diff --git a/.github/ISSUE_TEMPLATE/--bug-report.yaml b/.github/ISSUE_TEMPLATE/--bug-report.yaml
index ec03769295..277a3bdfa8 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 390c95aaac..c2bd609c04 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/instructions/bash.instructions.md b/.github/instructions/bash.instructions.md
new file mode 100644
index 0000000000..b14d3c9eda
--- /dev/null
+++ b/.github/instructions/bash.instructions.md
@@ -0,0 +1,48 @@
+---
+description: Guidelines for bash commands and tooling in the monorepo
+applyTo: "**/*.sh"
+---
+
+# Bash & Tooling Instructions
+
+This document outlines the standard tools and commands used in this monorepo.
+
+## Package Manager
+
+We use **pnpm** for package management.
+- **Do not use `npm` or `yarn`.**
+- Lockfile: `pnpm-lock.yaml`
+- Workspace configuration: `pnpm-workspace.yaml`
+
+### Common Commands
+- Install dependencies: `pnpm install`
+- Run a script in a specific package: `pnpm --filter <package_name> run <script>`
+- Run a script in all packages: `pnpm -r run <script>`
+
+## Monorepo Tooling
+
+We use **Turbo** for build system orchestration.
+- Configuration: `turbo.json`
+
+## Project Structure
+
+- `apps/`: Contains application services (admin, api, live, proxy, space, web).
+- `packages/`: Contains shared packages and libraries.
+- `deployments/`: Deployment configurations.
+
+## Running Tests
+
+- To run tests in a specific package (e.g., codemods):
+  ```bash
+  cd packages/codemods
+  pnpm run test
+  ```
+- Or from root:
+  ```bash
+  pnpm --filter @plane/codemods run test
+  ```
+
+## Docker
+
+- Local development uses `docker-compose-local.yml`.
+- Production/Staging uses `docker-compose.yml`.
diff --git a/.github/instructions/typescript.instructions.md b/.github/instructions/typescript.instructions.md
new file mode 100644
index 0000000000..4af2f9fdd2
--- /dev/null
+++ b/.github/instructions/typescript.instructions.md
@@ -0,0 +1,129 @@
+---
+description: Guidelines for using modern TypeScript features (v5.0-v5.8)
+applyTo: "**/*.{ts,tsx,mts,cts}"
+---
+
+# TypeScript Coding Guidelines & Modern Features (v5.0 - v5.8)
+
+When writing TypeScript code, prioritize using modern features and best practices introduced in recent versions (up to 5.8).
+
+## Global Themes Across 5.x
+
+1. **Standard decorators are here; legacy decorators are legacy.**
+   New TC39-compliant decorators landed in 5.0 and were extended in 5.2 (metadata). Old `experimentalDecorators`-style behavior is still supported but should be treated as legacy.
+
+2. **Type system is more precise and less noisy.**
+   Major work went into narrowing, control flow analysis, error messages, and new helpers like `NoInfer`, inferred predicates, and better `undefined`/`never`/uninitialized checks.
+
+3. **Module / runtime interop has been modernized.**
+   Options like `--moduleResolution bundler`, `--module nodenext`/`node18`, `--rewriteRelativeImportExtensions`, `--erasableSyntaxOnly`, and `--verbatimModuleSyntax` are about playing nicely with ESM, Node 18+/22+, direct TypeScript execution, and bundlers.
+
+4. **The standard library keeps tracking modern JS.**
+   Support for new ES features (iterator helpers, `Object.groupBy`/`Map.groupBy`, new Set/ES2024 APIs) shows up as type declarations and sometimes extra checks (regex syntax checking, etc.).
+
+When generating or refactoring code, prefer these newer idioms, and avoid patterns that conflict with updated checks.
+
+## Modern Features to Utilize
+
+### Type System & Inference
+- **`const` Type Parameters (5.0)**: Use `const` type parameters for more precise literal inference.
+  ```typescript
+  declare function names<const T extends string[]>(...names: T): void;
+  ```
+- **`@satisfies` Operator (5.0)**: Use `satisfies` to validate types without widening them.
+- **Inferred Type Predicates (5.5)**: Allow TypeScript to infer type predicates for functions that filter arrays or check types, reducing the need for explicit `is` return types.
+- **`NoInfer` Utility (5.4)**: Use `NoInfer<T>` to block inference for specific type arguments when you want them to be determined by other arguments.
+- **Narrowing**:
+  - **Switch(true) (5.3)**: Utilize narrowing in `switch(true)` blocks.
+  - **Boolean Comparisons (5.3)**: Rely on narrowing from direct boolean comparisons.
+  - **Closures (5.4)**: Trust preserved narrowing in closures when variables aren't modified after the check.
+  - **Constant Indexed Access (5.5)**: Use constant indices to narrow object/array properties.
+
+### Syntax & Control Flow
+- **Decorators (5.0)**: Use standard ECMAScript decorators (Stage 3).
+- **`using` Declarations (5.2)**: Use `using` for explicit resource management (Disposable pattern) instead of manual cleanup.
+  ```typescript
+  using resource = new Resource();
+  ```
+- **Import Attributes (5.3/5.8)**: Use `with { type: "json" }` for import attributes. Avoid the deprecated `assert` syntax.
+- **`switch` Exhaustiveness**: Rely on TypeScript's exhaustiveness checking in switch statements.
+
+### Modules & Imports
+- **`verbatimModuleSyntax` (5.0)**: Respect this flag by using `import type` explicitly when importing types to ensure they are erased during compilation.
+- **Type-Only Imports with Extensions (5.2)**: You can use `.ts`, `.mts`, `.cts` extensions in `import type` statements.
+- **`resolution-mode` (5.3)**: Use `import type { Type } from "mod" with { "resolution-mode": "import" }` if needed for specific module resolution contexts.
+- **JSDoc `@import` (5.5)**: Use `@import` tags in JSDoc for cleaner type imports in JS files if working in a mixed codebase.
+
+### Standard Library & Built-ins
+- **Iterator Helpers (5.6)**: Use new iterator methods (map, filter, etc.) if targeting modern environments.
+- **Set Methods (5.5)**: Utilize new `Set` methods like `union`, `intersection`, etc., when available.
+- **`Object.groupBy` / `Map.groupBy` (5.4)**: Use these standard methods for grouping instead of external libraries like Lodash when appropriate.
+- **`Promise.withResolvers` (5.7)**: Use `Promise.withResolvers()` for creating promises with exposed resolve/reject functions.
+
+### Configuration & Tooling
+- **`--moduleResolution bundler` (5.0)**: Assume this resolution strategy for modern web projects (Vite, Next.js, etc.).
+- **`--erasableSyntaxOnly` (5.8)**: Be aware of this flag; avoid TypeScript-specific syntax that cannot be simply erased (like `enum`s or `namespaces`) if the project aims for maximum compatibility with tools like Node.js's `--strip-types`. Prefer `const` objects or unions over `enum`s if requested.
+
+## Specific Coding Patterns
+
+### Arrays & Collections
+- Use **Copying Array Methods (5.2)** (`toSorted`, `toSpliced`, `with`) for immutable array operations.
+- **TypedArrays (5.7)**: Be aware that TypedArrays are now generic over `ArrayBufferLike`.
+
+### Classes
+- **Parameter Decorators (5.0/5.2)**: Use modern standard decorators.
+- **`super` Property Access (5.3)**: Avoid accessing instance fields via `super`.
+
+### Error Handling
+- **Checks for Never-Initialized Variables (5.7)**: Ensure variables are initialized before use to avoid new errors.
+
+## Deprecations to Avoid
+- Avoid `import ... assert` (use `with`).
+- Avoid implicit `any` returns in `undefined`-returning functions (though 5.1 makes this easier, explicit is better).
+- Avoid `enum`s if the project prefers erasable syntax (5.8).
+
+## Version-Specific Highlights
+
+### TypeScript 5.0
+- **Decorators**: Use standard decorators unless `experimentalDecorators` is explicitly enabled.
+- **`const` Type Parameters**: Use for literal inference.
+- **Enums**: All enums are union enums.
+- **Modules**: `--moduleResolution bundler` and `--verbatimModuleSyntax` are key for modern bundlers.
+
+### TypeScript 5.1
+- **Returns**: `undefined`-returning functions don't need explicit returns.
+- **Getters/Setters**: Can have unrelated types with explicit annotations.
+
+### TypeScript 5.2
+- **Resource Management**: `using` declarations for `Symbol.dispose`.
+- **Decorator Metadata**: Use `context.metadata` for design-time metadata.
+
+### TypeScript 5.3
+- **Import Attributes**: Use `with { type: "json" }`.
+- **Switch(true)**: Narrowing works in `switch(true)`.
+
+### TypeScript 5.4
+- **Closures**: Narrowing preserved in closures if last assignment is before creation.
+- **`NoInfer`**: Block inference for specific arguments.
+- **Grouping**: `Object.groupBy` / `Map.groupBy`.
+
+### TypeScript 5.5
+- **Inferred Predicates**: Functions checking types often don't need explicit `is` return types.
+- **Constant Index Access**: Better narrowing for constant keys.
+- **Regex**: Syntax checking for regex literals.
+
+### TypeScript 5.6
+- **Truthiness Checks**: Errors on always-truthy/falsy conditions (e.g., `if (/regex/)`).
+- **Iterator Helpers**: `.map`, `.filter` on iterators.
+
+### TypeScript 5.7
+- **Uninitialized Variables**: Stricter checks for never-initialized variables.
+- **Relative Imports**: `--rewriteRelativeImportExtensions` for `.ts` imports in output.
+- **ES2024**: Support for `Promise.withResolvers`, `Atomics.waitAsync`.
+
+### TypeScript 5.8
+- **Return Checks**: Granular checks for conditional returns.
+- **Node Modules**: `--module node18` stable; `require()` of ESM allowed in `nodenext`.
+- **Erasable Syntax**: `--erasableSyntaxOnly` forbids enums, namespaces, etc.
+
+When generating code, always prefer the most modern, standard, and type-safe approach available in TypeScript 5.8.
diff --git a/.github/workflows/pull-request-build-lint-api.yml b/.github/workflows/pull-request-build-lint-api.yml
index 50d105ef56..28a623f8e2 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.x"
+          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 d4a986155b..2a463852c0 100644
--- a/.github/workflows/pull-request-build-lint-web-apps.yml
+++ b/.github/workflows/pull-request-build-lint-web-apps.yml
@@ -17,10 +17,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 +30,140 @@ 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@v4
+        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: 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
-        run: pnpm turbo run check:types --affected
+  # 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: Build Affected
+      - 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@v4
+        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@v4
+        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@v4
+        with:
+          path: .turbo
+          key: turbo-${{ runner.os }}-${{ github.event.pull_request.base.sha }}-${{ github.sha }}
+
+  # Lint and type checks depend on build artifacts
+  check:
+    name: ${{ matrix.task }}
+    runs-on: ubuntu-latest
+    needs: build
+    timeout-minutes: 15
+    strategy:
+      fail-fast: false
+      matrix:
+        task: [check:lint, check:types]
+    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@v4
+        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@v4
+        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 ${{ matrix.task }}
+        run: pnpm turbo run ${{ matrix.task }} --affected
diff --git a/.gitignore b/.gitignore
index f19497acce..e2e6441ba3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -105,9 +105,8 @@ CLAUDE.md
 
 build/
 .react-router/
-AGENTS.md
 
 build/
 .react-router/
-AGENTS.md
 temp/
+scripts/
diff --git a/.husky/pre-commit b/.husky/pre-commit
new file mode 100644
index 0000000000..cb2c84d5c3
--- /dev/null
+++ b/.husky/pre-commit
@@ -0,0 +1 @@
+pnpm lint-staged
diff --git a/.npmrc b/.npmrc
index d652acc3b5..37808d63ab 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,34 +1,54 @@
-# Enforce pnpm workspace behavior and allow Turbo's lifecycle hooks if scripts are disabled
-# This repo uses pnpm with workspaces.
+# ------------------------------
+# Core Workspace Behavior
+# ------------------------------
 
-# Prefer linking local workspace packages when available
-prefer-workspace-packages=true
-link-workspace-packages=true
-shared-workspace-lockfile=true
+# Always prefer using local workspace packages when available
+prefer-workspace-packages = true
 
-# Make peer installs smoother across the monorepo
-auto-install-peers=true
-strict-peer-dependencies=false
+# Symlink workspace packages instead of duplicating them
+link-workspace-packages = true
 
-# If scripts are disabled (e.g., CI with --ignore-scripts), allowlisted packages can still run their hooks
-# Turbo occasionally performs postinstall tasks for optimal performance
-# moved to pnpm-workspace.yaml: onlyBuiltDependencies (e.g., allow turbo)
+# Use a single lockfile across the whole monorepo
+shared-workspace-lockfile = true
 
-public-hoist-pattern[]=*eslint*
-public-hoist-pattern[]=prettier
-public-hoist-pattern[]=typescript
+# Ensure packages added from workspace save using workspace: protocol
+save-workspace-protocol = true
 
-# Reproducible installs across CI and dev
-prefer-frozen-lockfile=true
 
-# Prefer resolving to highest versions in monorepo to reduce duplication
-resolution-mode=highest
+# ------------------------------
+# Dependency Resolution
+# ------------------------------
 
-# Speed up native module builds by caching side effects
-side-effects-cache=true
+# Choose the highest compatible version across the workspace
+# → reduces fragmentation & node_modules bloat
+resolution-mode = highest
 
-# Speed up local dev by reusing local store when possible
-prefer-offline=true
+# Automatically install peer dependencies instead of forcing every package to declare them
+auto-install-peers = true
 
-# Ensure workspace protocol is used when adding internal deps
-save-workspace-protocol=true
+# Don't break the install if peers are missing
+strict-peer-dependencies = false
+
+
+# ------------------------------
+# Performance Optimizations
+# ------------------------------
+
+# Use cached artifacts for native modules (sharp, esbuild, etc.)
+side-effects-cache = true
+
+# Prefer local cached packages rather than hitting network
+prefer-offline = true
+
+# In CI, refuse to modify lockfile (prevents drift)
+prefer-frozen-lockfile = true
+
+# Use isolated linker (best compatibility with Node ecosystem tools)
+node-linker = isolated
+
+# Hoist commonly used tools to the root to prevent duplicates and speed up resolution
+public-hoist-pattern[] = typescript
+public-hoist-pattern[] = eslint
+public-hoist-pattern[] = *@plane/*
+public-hoist-pattern[] = vite
+public-hoist-pattern[] = turbo
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000000..b0b8bc622a
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000000..ef155d4a13
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "overrides": [
+    {
+      "files": ["packages/codemods/**/*"],
+      "options": {
+        "printWidth": 80
+      }
+    }
+  ],
+  "plugins": ["@prettier/plugin-oxc"],
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}
diff --git a/AGENTS.md b/AGENTS.md
new file mode 100644
index 0000000000..dc76d8ce59
--- /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` - ESLint 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**: Prettier with Tailwind plugin, run `pnpm fix:format`
+- **Linting**: ESLint with shared config, max warnings vary by package
+- **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/CODEOWNERS b/CODEOWNERS
new file mode 100644
index 0000000000..11c7335b57
--- /dev/null
+++ b/CODEOWNERS
@@ -0,0 +1 @@
+eslint.config.mjs   @lifeiscontent
\ No newline at end of file
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 39eb4e8003..49c61547db 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 use [Eslint default rule guide](https://eslint.org/docs/rules/), with minor changes. An automated formatter is available using prettier.
+- 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`.
 
 ## Ways to contribute
 
@@ -187,18 +187,19 @@ Adding a new language involves several steps to ensure it integrates seamlessly
     Add the new language to the TLanguage type in the language definitions file:
 
 ```ts
-      // packages/i18n/src/types/language.ts
-      export type TLanguage = "en" | "fr" | "your-lang";
+// packages/i18n/src/types/language.ts
+export type TLanguage = "en" | "fr" | "your-lang";
 ```
 
 1.  **Add language configuration**
     Include the new language in the list of supported languages:
+
 ```ts
-      // packages/i18n/src/constants/language.ts
-      export const SUPPORTED_LANGUAGES: ILanguageOption[] = [
-      { label: "English", value: "en" },
-      { label: "Your Language", value: "your-lang" }
-      ];
+// packages/i18n/src/constants/language.ts
+export const SUPPORTED_LANGUAGES: ILanguageOption[] = [
+  { label: "English", value: "en" },
+  { label: "Your Language", value: "your-lang" },
+];
 ```
 
 2.  **Create translation files**
@@ -210,6 +211,7 @@ Adding a new language involves several steps to ensure it integrates seamlessly
 
 3.  **Update import logic**
     Modify the language import logic to include your new language:
+
 ```ts
       private importLanguageFile(language: TLanguage): Promise<any> {
       switch (language) {
diff --git a/README.md b/README.md
index f6b364befe..5a466594f8 100644
--- a/README.md
+++ b/README.md
@@ -54,7 +54,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 +72,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)
 
diff --git a/apps/admin/.eslintignore b/apps/admin/.eslintignore
deleted file mode 100644
index 289da70598..0000000000
--- a/apps/admin/.eslintignore
+++ /dev/null
@@ -1,14 +0,0 @@
-.next/*
-.react-router/*
-.vite/*
-out/*
-public/*
-dist/*
-node_modules/*
-.turbo/*
-.env*
-.env
-.env.local
-.env.development
-.env.production
-.env.test
\ No newline at end of file
diff --git a/apps/admin/.eslintrc.cjs b/apps/admin/.eslintrc.cjs
deleted file mode 100644
index 5a75536f79..0000000000
--- a/apps/admin/.eslintrc.cjs
+++ /dev/null
@@ -1,18 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["@plane/eslint-config/next.js"],
-  ignorePatterns: ["build/**", "dist/**", ".vite/**"],
-  rules: {
-    "import/no-duplicates": ["error", { "prefer-inline": false }],
-    "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
-    "@typescript-eslint/no-import-type-side-effects": "error",
-    "@typescript-eslint/consistent-type-imports": [
-      "error",
-      {
-        prefer: "type-imports",
-        fixStyle: "separate-type-imports",
-        disallowTypeAnnotations: false,
-      },
-    ],
-  },
-};
diff --git a/apps/admin/.prettierignore b/apps/admin/.prettierignore
index 0518c78f23..b0b8bc622a 100644
--- a/apps/admin/.prettierignore
+++ b/apps/admin/.prettierignore
@@ -1,8 +1,10 @@
-.next
-.react-router
-.vite
-.vercel
-.tubro
-out/
-dist/
+.next/
+.react-router/
+.turbo/
+.vite/
 build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/apps/admin/.prettierrc b/apps/admin/.prettierrc
deleted file mode 100644
index 87d988f1b2..0000000000
--- a/apps/admin/.prettierrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "printWidth": 120,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}
diff --git a/apps/admin/Dockerfile.admin b/apps/admin/Dockerfile.admin
index 05549126c1..458d00a2e3 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.5.8
+RUN pnpm add -g turbo@2.6.3
 
 COPY . .
 
@@ -62,10 +62,12 @@ COPY .gitignore .gitignore
 COPY --from=builder /app/out/json/ .
 COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
 
-# Fetch dependencies to cache store, then install offline with dev deps
-RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm fetch --store-dir=/pnpm/store
+# Copy full directory structure before fetch to ensure all package.json files are available
 COPY --from=builder /app/out/full/ .
 COPY turbo.json turbo.json
+
+# Fetch dependencies to cache store, then install offline with dev deps
+RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm fetch --store-dir=/pnpm/store
 RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store CI=true pnpm install --offline --frozen-lockfile --store-dir=/pnpm/store --prod=false
 
 # Build only the admin package
@@ -73,7 +75,7 @@ RUN pnpm turbo run build --filter=admin
 
 # =========================================================================== #
 
-FROM nginx:1.27-alpine AS production
+FROM nginx:1.29-alpine AS production
 
 COPY apps/admin/nginx/nginx.conf /etc/nginx/nginx.conf
 COPY --from=installer /app/apps/admin/build/client /usr/share/nginx/html/god-mode
diff --git a/apps/admin/app/(all)/(dashboard)/ai/form.tsx b/apps/admin/app/(all)/(dashboard)/ai/form.tsx
index 5b931e9d78..69456d8b61 100644
--- a/apps/admin/app/(all)/(dashboard)/ai/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/ai/form.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useForm } from "react-hook-form";
 import { Lightbulb } from "lucide-react";
 import { Button } from "@plane/propel/button";
@@ -17,7 +15,7 @@ type IInstanceAIForm = {
 
 type AIFormValues = Record<TInstanceAIConfigurationKeys, string>;
 
-export const InstanceAIForm: React.FC<IInstanceAIForm> = (props) => {
+export function InstanceAIForm(props: IInstanceAIForm) {
   const { config } = props;
   // store
   const { updateInstanceConfigurations } = useInstance();
@@ -44,7 +42,7 @@ export const InstanceAIForm: React.FC<IInstanceAIForm> = (props) => {
           <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
@@ -65,7 +63,7 @@ export const InstanceAIForm: React.FC<IInstanceAIForm> = (props) => {
           <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.
@@ -96,8 +94,8 @@ export const InstanceAIForm: React.FC<IInstanceAIForm> = (props) => {
     <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) => (
@@ -116,13 +114,13 @@ export const InstanceAIForm: React.FC<IInstanceAIForm> = (props) => {
         </div>
       </div>
 
-      <div className="space-y-4">
-        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
-          {isSubmitting ? "Saving..." : "Save changes"}
+      <div className="flex flex-col gap-4 items-start">
+        <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">
@@ -133,4 +131,4 @@ export const InstanceAIForm: React.FC<IInstanceAIForm> = (props) => {
       </div>
     </div>
   );
-};
+}
diff --git a/apps/admin/app/(all)/(dashboard)/ai/page.tsx b/apps/admin/app/(all)/(dashboard)/ai/page.tsx
index e5323e92b8..bf290ef361 100644
--- a/apps/admin/app/(all)/(dashboard)/ai/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/ai/page.tsx
@@ -1,45 +1,41 @@
-"use client";
-
 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<React.FC<Route.ComponentProps>>(() => {
+const InstanceAIPage = observer(function InstanceAIPage(_props: Route.ComponentProps) {
   // store
   const { fetchInstanceConfigurations, formattedConfig } = useInstance();
 
   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="w-2/3 grid 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 fefc1ac892..c2e637e279 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/gitea/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/gitea/form.tsx
@@ -1,21 +1,19 @@
-"use client";
-
-import type { FC } from "react";
 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
@@ -27,7 +25,7 @@ type Props = {
 
 type GiteaConfigFormValues = Record<TInstanceGiteaAuthenticationConfigurationKeys, string>;
 
-export const InstanceGiteaConfigForm: FC<Props> = (props) => {
+export function InstanceGiteaConfigForm(props: Props) {
   const { config } = props;
   // states
   const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
@@ -44,6 +42,7 @@ export const InstanceGiteaConfigForm: FC<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",
     },
   });
 
@@ -72,7 +71,7 @@ export const InstanceGiteaConfigForm: FC<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.
@@ -94,7 +93,7 @@ export const InstanceGiteaConfigForm: FC<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.
@@ -107,6 +106,11 @@ export const InstanceGiteaConfigForm: FC<Props> = (props) => {
     },
   ];
 
+  const GITEA_FORM_SWITCH_FIELD: TControllerSwitchFormField<GiteaConfigFormValues> = {
+    name: "ENABLE_GITEA_SYNC",
+    label: "Gitea",
+  };
+
   const GITEA_SERVICE_FIELD: TCopyField[] = [
     {
       key: "Callback_URI",
@@ -120,7 +124,7 @@ export const InstanceGiteaConfigForm: FC<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.
@@ -133,20 +137,22 @@ export const InstanceGiteaConfigForm: FC<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>) => {
@@ -166,7 +172,7 @@ export const InstanceGiteaConfigForm: FC<Props> = (props) => {
       <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="pt-2.5 text-18 font-medium">Gitea-provided details for Plane</div>
             {GITEA_FORM_FIELDS.map((field) => (
               <ControllerInput
                 key={field.key}
@@ -180,24 +186,27 @@ export const InstanceGiteaConfigForm: FC<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 px-6 pt-1.5 pb-4 bg-layer-1 rounded-lg">
+              <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} />
               ))}
@@ -207,4 +216,4 @@ export const InstanceGiteaConfigForm: FC<Props> = (props) => {
       </div>
     </>
   );
-};
+}
diff --git a/apps/admin/app/(all)/(dashboard)/authentication/gitea/page.tsx b/apps/admin/app/(all)/(dashboard)/authentication/gitea/page.tsx
index 8c2090279d..f0f7e23338 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/gitea/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/gitea/page.tsx
@@ -1,21 +1,22 @@
-"use client";
-
 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(() => {
+const InstanceGiteaAuthenticationPage = observer(function InstanceGiteaAuthenticationPage() {
   // store
   const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
   // state
@@ -34,7 +35,7 @@ const InstanceGiteaAuthenticationPage = observer(() => {
     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"}.`,
@@ -58,42 +59,39 @@ const InstanceGiteaAuthenticationPage = observer(() => {
   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 86ab729b8a..c1aef0f6cc 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { isEmpty } from "lodash-es";
 import Link from "next/link";
@@ -10,12 +8,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";
@@ -28,7 +26,7 @@ type Props = {
 
 type GithubConfigFormValues = Record<TInstanceGithubAuthenticationConfigurationKeys, string>;
 
-export const InstanceGithubConfigForm: React.FC<Props> = (props) => {
+export function InstanceGithubConfigForm(props: Props) {
   const { config } = props;
   // states
   const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
@@ -45,6 +43,7 @@ export const InstanceGithubConfigForm: React.FC<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",
     },
   });
 
@@ -62,7 +61,7 @@ export const InstanceGithubConfigForm: React.FC<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.
@@ -84,7 +83,7 @@ export const InstanceGithubConfigForm: React.FC<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.
@@ -106,6 +105,11 @@ export const InstanceGithubConfigForm: React.FC<Props> = (props) => {
     },
   ];
 
+  const GITHUB_FORM_SWITCH_FIELD: TControllerSwitchFormField<GithubConfigFormValues> = {
+    name: "ENABLE_GITHUB_SYNC",
+    label: "GitHub",
+  };
+
   const GITHUB_COMMON_SERVICE_DETAILS: TCopyField[] = [
     {
       key: "Origin_URL",
@@ -118,7 +122,7 @@ export const InstanceGithubConfigForm: React.FC<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.
@@ -141,7 +145,7 @@ export const InstanceGithubConfigForm: React.FC<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.
@@ -154,20 +158,22 @@ export const InstanceGithubConfigForm: React.FC<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>) => {
@@ -187,7 +193,7 @@ export const InstanceGithubConfigForm: React.FC<Props> = (props) => {
       <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="pt-2.5 text-18 font-medium">GitHub-provided details for Plane</div>
             {GITHUB_FORM_FIELDS.map((field) => (
               <ControllerInput
                 key={field.key}
@@ -201,27 +207,30 @@ export const InstanceGithubConfigForm: React.FC<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="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 px-6 py-4 bg-layer-1 rounded-lg">
                 {GITHUB_COMMON_SERVICE_DETAILS.map((field) => (
                   <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
                 ))}
@@ -229,11 +238,11 @@ export const InstanceGithubConfigForm: React.FC<Props> = (props) => {
 
               {/* 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">
+                <div className="px-6 py-3 bg-layer-3 font-medium text-11 uppercase flex items-center gap-x-3 text-secondary">
                   <Monitor className="w-3 h-3" />
                   Web
                 </div>
-                <div className="px-6 py-4 flex flex-col gap-y-4 bg-custom-background-80">
+                <div className="px-6 py-4 flex flex-col gap-y-4 bg-layer-1">
                   {GITHUB_SERVICE_DETAILS.map((field) => (
                     <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
                   ))}
@@ -245,4 +254,4 @@ export const InstanceGithubConfigForm: React.FC<Props> = (props) => {
       </div>
     </>
   );
-};
+}
diff --git a/apps/admin/app/(all)/(dashboard)/authentication/github/page.tsx b/apps/admin/app/(all)/(dashboard)/authentication/github/page.tsx
index 155f3b9f51..1186332d37 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/github/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/github/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
@@ -8,18 +6,22 @@ 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<React.FC<Route.ComponentProps>>(() => {
+const InstanceGithubAuthenticationPage = observer(function InstanceGithubAuthenticationPage(
+  _props: Route.ComponentProps
+) {
   // store
   const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
   // state
@@ -41,7 +43,7 @@ const InstanceGithubAuthenticationPage = observer<React.FC<Route.ComponentProps>
     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 +67,46 @@ const InstanceGithubAuthenticationPage = observer<React.FC<Route.ComponentProps>
   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 f8ffc6c35e..4511a70c91 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx
@@ -7,11 +7,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";
@@ -24,7 +25,7 @@ type Props = {
 
 type GitlabConfigFormValues = Record<TInstanceGitlabAuthenticationConfigurationKeys, string>;
 
-export const InstanceGitlabConfigForm: React.FC<Props> = (props) => {
+export function InstanceGitlabConfigForm(props: Props) {
   const { config } = props;
   // states
   const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
@@ -41,6 +42,7 @@ export const InstanceGitlabConfigForm: React.FC<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 +73,7 @@ export const InstanceGitlabConfigForm: React.FC<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 +96,7 @@ export const InstanceGitlabConfigForm: React.FC<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 +110,11 @@ export const InstanceGitlabConfigForm: React.FC<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 +127,7 @@ export const InstanceGitlabConfigForm: React.FC<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 +141,22 @@ export const InstanceGitlabConfigForm: React.FC<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>) => {
@@ -167,7 +176,7 @@ export const InstanceGitlabConfigForm: React.FC<Props> = (props) => {
       <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="pt-2.5 text-18 font-medium">GitLab-provided details for Plane</div>
             {GITLAB_FORM_FIELDS.map((field) => (
               <ControllerInput
                 key={field.key}
@@ -181,24 +190,27 @@ export const InstanceGitlabConfigForm: React.FC<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 px-6 pt-1.5 pb-4 bg-layer-3 rounded-lg">
+              <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} />
               ))}
@@ -208,4 +220,4 @@ export const InstanceGitlabConfigForm: React.FC<Props> = (props) => {
       </div>
     </>
   );
-};
+}
diff --git a/apps/admin/app/(all)/(dashboard)/authentication/gitlab/page.tsx b/apps/admin/app/(all)/(dashboard)/authentication/gitlab/page.tsx
index d354cb788d..0f3fd76a65 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/gitlab/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/gitlab/page.tsx
@@ -1,21 +1,23 @@
-"use client";
-
 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<React.FC<Route.ComponentProps>>(() => {
+const InstanceGitlabAuthenticationPage = observer(function InstanceGitlabAuthenticationPage(
+  _props: Route.ComponentProps
+) {
   // store
   const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
   // state
@@ -35,7 +37,7 @@ const InstanceGitlabAuthenticationPage = observer<React.FC<Route.ComponentProps>
     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 +58,43 @@ const InstanceGitlabAuthenticationPage = observer<React.FC<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">
-          <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 f3235f6b70..e068a1d07b 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { isEmpty } from "lodash-es";
 import Link from "next/link";
@@ -10,11 +8,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";
@@ -27,7 +26,7 @@ type Props = {
 
 type GoogleConfigFormValues = Record<TInstanceGoogleAuthenticationConfigurationKeys, string>;
 
-export const InstanceGoogleConfigForm: React.FC<Props> = (props) => {
+export function InstanceGoogleConfigForm(props: Props) {
   const { config } = props;
   // states
   const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
@@ -43,6 +42,7 @@ export const InstanceGoogleConfigForm: React.FC<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",
     },
   });
 
@@ -60,7 +60,7 @@ export const InstanceGoogleConfigForm: React.FC<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
@@ -82,7 +82,7 @@ export const InstanceGoogleConfigForm: React.FC<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
@@ -95,6 +95,11 @@ export const InstanceGoogleConfigForm: React.FC<Props> = (props) => {
     },
   ];
 
+  const GOOGLE_FORM_SWITCH_FIELD: TControllerSwitchFormField<GoogleConfigFormValues> = {
+    name: "ENABLE_GOOGLE_SYNC",
+    label: "Google",
+  };
+
   const GOOGLE_COMMON_SERVICE_DETAILS: TCopyField[] = [
     {
       key: "Origin_URL",
@@ -107,7 +112,7 @@ export const InstanceGoogleConfigForm: React.FC<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.
@@ -129,7 +134,7 @@ export const InstanceGoogleConfigForm: React.FC<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.
@@ -142,19 +147,21 @@ export const InstanceGoogleConfigForm: React.FC<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>) => {
@@ -174,7 +181,7 @@ export const InstanceGoogleConfigForm: React.FC<Props> = (props) => {
       <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="pt-2.5 text-18 font-medium">Google-provided details for Plane</div>
             {GOOGLE_FORM_FIELDS.map((field) => (
               <ControllerInput
                 key={field.key}
@@ -188,27 +195,30 @@ export const InstanceGoogleConfigForm: React.FC<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="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 px-6 py-4 bg-layer-1 rounded-lg">
                 {GOOGLE_COMMON_SERVICE_DETAILS.map((field) => (
                   <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
                 ))}
@@ -216,11 +226,11 @@ export const InstanceGoogleConfigForm: React.FC<Props> = (props) => {
 
               {/* 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">
+                <div className="px-6 py-3 bg-layer-3 font-medium text-11 uppercase flex items-center gap-x-3 text-secondary">
                   <Monitor className="w-3 h-3" />
                   Web
                 </div>
-                <div className="px-6 py-4 flex flex-col gap-y-4 bg-custom-background-80">
+                <div className="px-6 py-4 flex flex-col gap-y-4 bg-layer-1">
                   {GOOGLE_SERVICE_DETAILS.map((field) => (
                     <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
                   ))}
@@ -232,4 +242,4 @@ export const InstanceGoogleConfigForm: React.FC<Props> = (props) => {
       </div>
     </>
   );
-};
+}
diff --git a/apps/admin/app/(all)/(dashboard)/authentication/google/page.tsx b/apps/admin/app/(all)/(dashboard)/authentication/google/page.tsx
index 12e9189cca..bf2a18d5a8 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/google/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/google/page.tsx
@@ -1,21 +1,23 @@
-"use client";
-
 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<React.FC<Route.ComponentProps>>(() => {
+const InstanceGoogleAuthenticationPage = observer(function InstanceGoogleAuthenticationPage(
+  _props: Route.ComponentProps
+) {
   // store
   const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
   // state
@@ -35,7 +37,7 @@ const InstanceGoogleAuthenticationPage = observer<React.FC<Route.ComponentProps>
     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 +58,44 @@ const InstanceGoogleAuthenticationPage = observer<React.FC<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">
-          <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 ccce025c42..10adc31297 100644
--- a/apps/admin/app/(all)/(dashboard)/authentication/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/authentication/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
@@ -9,6 +7,8 @@ import { setPromiseToast } from "@plane/propel/toast";
 import type { TInstanceConfigurationKeys } from "@plane/types";
 import { Loader, ToggleSwitch } from "@plane/ui";
 import { cn, resolveGeneralTheme } from "@plane/utils";
+// components
+import { PageWrapper } from "@/components/common/page-wrapper";
 // hooks
 import { AuthenticationMethodCard } from "@/components/authentication/authentication-method-card";
 import { useAuthenticationModes } from "@/hooks/oauth";
@@ -16,7 +16,7 @@ import { useInstance } from "@/hooks/store";
 // types
 import type { Route } from "./+types/page";
 
-const InstanceAuthenticationPage = observer<React.FC<Route.ComponentProps>>(() => {
+const InstanceAuthenticationPage = observer(function InstanceAuthenticationPage(_props: Route.ComponentProps) {
   // theme
   const { resolvedTheme: resolvedThemeAdmin } = useTheme();
   // store
@@ -62,68 +62,63 @@ const InstanceAuthenticationPage = observer<React.FC<Route.ComponentProps>>(() =
 
   const authenticationModes = useAuthenticationModes({ disabled: isSubmitting, updateConfig, resolvedTheme });
   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("w-full flex items-center gap-14 rounded-sm")}>
+            <div className="flex grow items-center gap-4">
+              <div className="grow">
+                <div className="text-16 font-medium pb-1">Allow anyone to sign up even without an invite</div>
+                <div className={cn("font-regular leading-5 text-tertiary text-11")}>
+                  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.map((method) => (
-                <AuthenticationMethodCard
-                  key={method.key}
-                  name={method.name}
-                  description={method.description}
-                  icon={method.icon}
-                  config={method.config}
-                  disabled={isSubmitting}
-                  unavailable={method.unavailable}
-                />
-              ))}
             </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 font-medium pt-6">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 2c00311b79..5fdc66b91c 100644
--- a/apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 // types
@@ -30,7 +28,7 @@ const EMAIL_SECURITY_OPTIONS: { [key in TEmailSecurityKeys]: string } = {
   NONE: "No email security",
 };
 
-export const InstanceEmailForm: React.FC<IInstanceEmailForm> = (props) => {
+export function InstanceEmailForm(props: IInstanceEmailForm) {
   const { config } = props;
   // states
   const [isSendTestEmailModalOpen, setIsSendTestEmailModalOpen] = useState(false);
@@ -159,13 +157,12 @@ export const InstanceEmailForm: React.FC<IInstanceEmailForm> = (props) => {
             />
           ))}
           <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"
-              optionsClassName="w-full"
+              buttonClassName="rounded-md border-subtle"
               input
             >
               {Object.entries(EMAIL_SECURITY_OPTIONS).map(([key, value]) => (
@@ -176,12 +173,12 @@ export const InstanceEmailForm: React.FC<IInstanceEmailForm> = (props) => {
             </CustomSelect>
           </div>
         </div>
-        <div className="flex flex-col gap-6 my-6 pt-4 border-t border-custom-border-100">
+        <div className="flex flex-col gap-6 my-6 pt-4 border-t border-subtle">
           <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>
@@ -207,14 +204,16 @@ export const InstanceEmailForm: React.FC<IInstanceEmailForm> = (props) => {
       <div className="flex max-w-4xl items-center py-1 gap-4">
         <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}
@@ -224,4 +223,4 @@ export const InstanceEmailForm: React.FC<IInstanceEmailForm> = (props) => {
       </div>
     </div>
   );
-};
+}
diff --git a/apps/admin/app/(all)/(dashboard)/email/page.tsx b/apps/admin/app/(all)/(dashboard)/email/page.tsx
index 152c51dda8..5dbd9adaec 100644
--- a/apps/admin/app/(all)/(dashboard)/email/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/email/page.tsx
@@ -1,17 +1,18 @@
-"use client";
-
 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<React.FC<Route.ComponentProps>>(() => {
+const InstanceEmailPage = observer(function InstanceEmailPage(_props: Route.ComponentProps) {
   // store
   const { fetchInstanceConfigurations, formattedConfig, disableEmail } = useInstance();
 
@@ -51,44 +52,43 @@ const InstanceEmailPage = observer<React.FC<Route.ComponentProps>>(() => {
   }, [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">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 89043fcc18..9efbdf702c 100644
--- a/apps/admin/app/(all)/(dashboard)/email/test-email-modal.tsx
+++ b/apps/admin/app/(all)/(dashboard)/email/test-email-modal.tsx
@@ -19,7 +19,7 @@ enum ESendEmailSteps {
 
 const instanceService = new InstanceService();
 
-export const SendTestEmailModal: React.FC<Props> = (props) => {
+export function SendTestEmailModal(props: Props) {
   const { isOpen, handleClose } = props;
 
   // state
@@ -72,7 +72,7 @@ export const SendTestEmailModal: React.FC<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 +85,8 @@ export const SendTestEmailModal: React.FC<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 transform rounded-lg bg-surface-1 p-5 px-4 text-left shadow-raised-200 transition-all w-full sm:max-w-xl">
+                <h3 className="text-16 font-medium leading-6 text-primary">
                   {sendEmailStep === ESendEmailSteps.SEND_EMAIL
                     ? "Send test email"
                     : sendEmailStep === ESendEmailSteps.SUCCESS
@@ -101,12 +101,12 @@ export const SendTestEmailModal: React.FC<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 +114,14 @@ export const SendTestEmailModal: React.FC<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>}
+                  {sendEmailStep === ESendEmailSteps.FAILED && <div className="text-13">{error}</div>}
                   <div className="flex items-center gap-2 justify-end mt-5">
-                    <Button variant="neutral-primary" size="sm" onClick={handleClose} tabIndex={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>
@@ -133,4 +133,4 @@ export const SendTestEmailModal: React.FC<Props> = (props) => {
       </Dialog>
     </Transition.Root>
   );
-};
+}
diff --git a/apps/admin/app/(all)/(dashboard)/general/form.tsx b/apps/admin/app/(all)/(dashboard)/general/form.tsx
index 5d9578fd8c..ff7b00e0dc 100644
--- a/apps/admin/app/(all)/(dashboard)/general/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/general/form.tsx
@@ -1,25 +1,24 @@
-"use client";
 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;
   instanceAdmins: IInstanceAdmin[];
 }
 
-export const GeneralConfigurationForm: React.FC<IGeneralConfigurationForm> = observer((props) => {
+export const GeneralConfigurationForm = observer(function GeneralConfigurationForm(props: IGeneralConfigurationForm) {
   const { instance, instanceAdmins } = props;
   // hooks
   const { instanceConfigurations, updateInstanceInfo, updateInstanceConfigurations } = useInstance();
@@ -28,8 +27,8 @@ export const GeneralConfigurationForm: React.FC<IGeneralConfigurationForm> = obs
   const {
     handleSubmit,
     control,
-    watch,
     formState: { errors, isSubmitting },
+    watch,
   } = useForm<Partial<IInstance>>({
     defaultValues: {
       instance_name: instance?.instance_name,
@@ -64,8 +63,8 @@ export const GeneralConfigurationForm: React.FC<IGeneralConfigurationForm> = obs
 
   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"
@@ -79,54 +78,52 @@ export const GeneralConfigurationForm: React.FC<IGeneralConfigurationForm> = obs
           />
 
           <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="text-16 font-medium text-primary pb-1.5 border-b border-subtle">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="flex items-center gap-14">
           <div className="grow flex 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 items-center justify-center size-11 bg-layer-1 rounded-lg">
+                <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 font-medium text-primary leading-5">Let Plane collect anonymous usage data</div>
+              <div className="text-11 font-regular text-tertiary leading-5">
                 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.
@@ -147,8 +144,15 @@ export const GeneralConfigurationForm: React.FC<IGeneralConfigurationForm> = obs
       </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 61a417c45b..0704b7c47b 100644
--- a/apps/admin/app/(all)/(dashboard)/general/intercom.tsx
+++ b/apps/admin/app/(all)/(dashboard)/general/intercom.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
@@ -13,7 +11,7 @@ type TIntercomConfig = {
   isTelemetryEnabled: boolean;
 };
 
-export const IntercomConfig: React.FC<TIntercomConfig> = observer((props) => {
+export const IntercomConfig = observer(function IntercomConfig(props: TIntercomConfig) {
   const { isTelemetryEnabled } = props;
   // hooks
   const { instanceConfigurations, updateInstanceConfigurations, fetchInstanceConfigurations } = useInstance();
@@ -46,22 +44,22 @@ export const IntercomConfig: React.FC<TIntercomConfig> = observer((props) => {
   };
 
   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="flex items-center gap-14">
         <div className="grow flex 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 items-center justify-center size-11 bg-layer-1 rounded-lg">
+              <MessageSquare className="size-5 text-tertiary p-0.5" />
             </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 font-medium text-primary leading-5">Chat with us</div>
+            <div className="text-11 font-regular text-tertiary leading-5">
               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 4531da1e20..6e0a86d52a 100644
--- a/apps/admin/app/(all)/(dashboard)/general/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/general/page.tsx
@@ -1,31 +1,26 @@
-"use client";
 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 da105bb3e6..154e74bf12 100644
--- a/apps/admin/app/(all)/(dashboard)/image/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/image/form.tsx
@@ -1,4 +1,3 @@
-"use client";
 import { useForm } from "react-hook-form";
 import { Button } from "@plane/propel/button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
@@ -14,7 +13,7 @@ type IInstanceImageConfigForm = {
 
 type ImageConfigFormValues = Record<TInstanceImageConfigurationKeys, string>;
 
-export const InstanceImageConfigForm: React.FC<IInstanceImageConfigForm> = (props) => {
+export function InstanceImageConfigForm(props: IInstanceImageConfigForm) {
   const { config } = props;
   // store hooks
   const { updateInstanceConfigurations } = useInstance();
@@ -57,7 +56,7 @@ export const InstanceImageConfigForm: React.FC<IInstanceImageConfigForm> = (prop
               <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.
@@ -71,10 +70,10 @@ export const InstanceImageConfigForm: React.FC<IInstanceImageConfigForm> = (prop
       </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 8a8fad01ad..7b89393f27 100644
--- a/apps/admin/app/(all)/(dashboard)/image/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/image/page.tsx
@@ -1,41 +1,37 @@
-"use client";
-
 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<React.FC<Route.ComponentProps>>(() => {
+const InstanceImagePage = observer(function InstanceImagePage(_props: Route.ComponentProps) {
   // store
   const { formattedConfig, fetchInstanceConfigurations } = useInstance();
 
   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 da9be8bb91..ba5564bf52 100644
--- a/apps/admin/app/(all)/(dashboard)/layout.tsx
+++ b/apps/admin/app/(all)/(dashboard)/layout.tsx
@@ -1,20 +1,18 @@
-"use client";
-
 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";
 // hooks
 import { useUser } from "@/hooks/store";
 // local components
 import type { Route } from "./+types/layout";
-import { AdminHeader } from "./header";
 import { AdminSidebar } from "./sidebar";
 
-const AdminLayout: React.FC<Route.ComponentProps> = () => {
+function AdminLayout(_props: Route.ComponentProps) {
   // router
   const { replace } = useRouter();
   // store hooks
@@ -36,9 +34,9 @@ const AdminLayout: React.FC<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="h-full w-full overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
             <Outlet />
           </div>
         </main>
@@ -48,6 +46,6 @@ const AdminLayout: React.FC<Route.ComponentProps> = () => {
   }
 
   return <></>;
-};
+}
 
 export default observer(AdminLayout);
diff --git a/apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx b/apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx
index 656d0531dd..ed068d32ee 100644
--- a/apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx
+++ b/apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { Fragment, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useTheme as useNextTheme } from "next-themes";
@@ -16,7 +14,7 @@ import { useTheme, useUser } from "@/hooks/store";
 // service initialization
 const authService = new AuthService();
 
-export const AdminSidebarDropdown = observer(() => {
+export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
   // store hooks
   const { isSidebarCollapsed } = useTheme();
   const { currentUser, signOut } = useUser();
@@ -35,20 +33,20 @@ export const AdminSidebarDropdown = observer(() => {
   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",
+        "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 shadow-lg 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="px-2 text-secondary truncate">{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]" />
@@ -61,7 +59,7 @@ export const AdminSidebarDropdown = observer(() => {
           <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
@@ -73,14 +71,14 @@ export const AdminSidebarDropdown = observer(() => {
 
   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" : ""
           }`}
         >
@@ -90,8 +88,8 @@ export const AdminSidebarDropdown = observer(() => {
                 "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 && (
@@ -111,7 +109,7 @@ export const AdminSidebarDropdown = observer(() => {
 
           {!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>
@@ -125,7 +123,7 @@ export const AdminSidebarDropdown = observer(() => {
               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 157c3240b3..146770c70d 100644
--- a/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx
+++ b/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState, useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -11,10 +9,8 @@ import { DiscordIcon, GithubIcon, 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
-// eslint-disable-next-line import/order
-import packageJson from "package.json";
 
 const helpOptions = [
   {
@@ -34,10 +30,11 @@ const helpOptions = [
   },
 ];
 
-export const AdminSidebarHelpSection: React.FC = observer(() => {
+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);
@@ -47,7 +44,7 @@ export const AdminSidebarHelpSection: React.FC = observer(() => {
   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 w-full items-center justify-between gap-1 self-baseline border-t border-subtle bg-surface-1 px-4 h-14 flex-shrink-0",
         {
           "flex-col h-auto py-1.5": isSidebarCollapsed,
         }
@@ -57,32 +54,32 @@ export const AdminSidebarHelpSection: React.FC = observer(() => {
         <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 px-2 py-1 flex items-center gap-1 rounded-sm bg-layer-1 text-body-xs-medium text-secondary whitespace-nowrap`}
           >
-            <ExternalLink size={14} />
+            <ExternalLink size={16} />
             {!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>
@@ -100,7 +97,7 @@ export const AdminSidebarHelpSection: React.FC = observer(() => {
           <div
             className={`absolute bottom-2 min-w-[10rem] z-[15] ${
               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 whitespace-nowrap rounded-sm bg-surface-1 p-1 shadow-raised-100`}
             ref={helpOptionsRef}
           >
             <div className="space-y-1 pb-2">
@@ -108,11 +105,11 @@ export const AdminSidebarHelpSection: React.FC = observer(() => {
                 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>
                   );
@@ -121,17 +118,17 @@ export const AdminSidebarHelpSection: React.FC = observer(() => {
                     <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 pb-1 pt-2 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 b33ccecffb..3a81db3cc2 100644
--- a/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx
+++ b/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx
@@ -1,60 +1,20 @@
-"use client";
-
 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";
+import { useSidebarMenu } from "@/hooks/use-sidebar-menu";
 
-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/`,
-  },
-];
-
-export const AdminSidebarMenu = observer(() => {
-  // store hooks
-  const { isSidebarCollapsed, toggleSidebar } = useTheme();
+export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
   // router
   const pathName = usePathname();
+  // store hooks
+  const { isSidebarCollapsed, toggleSidebar } = useTheme();
+  // derived values
+  const sidebarMenu = useSidebarMenu();
 
   const handleItemClick = () => {
     if (window.innerWidth < 768) {
@@ -64,40 +24,27 @@ export const AdminSidebarMenu = observer(() => {
 
   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);
+      {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 outline-none transition-colors",
+                    {
+                      "text-primary !bg-layer-transparent-active": 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={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 fb8091df03..ec340247f5 100644
--- a/apps/admin/app/(all)/(dashboard)/sidebar.tsx
+++ b/apps/admin/app/(all)/(dashboard)/sidebar.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 // plane helpers
@@ -11,7 +9,7 @@ import { AdminSidebarDropdown } from "./sidebar-dropdown";
 import { AdminSidebarHelpSection } from "./sidebar-help-section";
 import { AdminSidebarMenu } from "./sidebar-menu";
 
-export const AdminSidebar = observer(() => {
+export const AdminSidebar = observer(function AdminSidebar() {
   // store
   const { isSidebarCollapsed, toggleSidebar } = useTheme();
 
@@ -40,7 +38,7 @@ export const AdminSidebar = observer(() => {
 
   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
+      className={`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
         fixed md:relative
         ${isSidebarCollapsed ? "-ml-[290px]" : ""}
         sm:${isSidebarCollapsed ? "-ml-[290px]" : ""}
diff --git a/apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx b/apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx
index 6ec3fe4a6d..334e960e98 100644
--- a/apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx
+++ b/apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx
@@ -15,7 +15,7 @@ import { useWorkspace } from "@/hooks/store";
 
 const instanceWorkspaceService = new InstanceWorkspaceService();
 
-export const WorkspaceCreateForm = () => {
+export function WorkspaceCreateForm() {
   // router
   const router = useRouter();
   // states
@@ -84,7 +84,7 @@ export const 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}
@@ -118,13 +118,13 @@ export const WorkspaceCreateForm = () => {
                 />
               )}
             />
-            <span className="text-xs text-red-500">{errors?.name?.message}</span>
+            <span className="text-11 text-red-500">{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 gap-0.5 w-full items-center rounded-md border-[0.5px] border-subtle px-3">
+            <span className="whitespace-nowrap text-13 text-secondary">{workspaceBaseURL}</span>
             <Controller
               control={control}
               name="slug"
@@ -148,19 +148,19 @@ export const 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-red-500">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-red-500">{`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-red-500">{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,12 +172,11 @@ export const 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
-                  optionsClassName="w-full"
                 >
                   {ORGANIZATION_SIZE.map((item) => (
                     <CustomSelect.Option key={item} value={item}>
@@ -188,7 +187,7 @@ export const WorkspaceCreateForm = () => {
               )}
             />
             {errors.organization_size && (
-              <span className="text-sm text-red-500">{errors.organization_size.message}</span>
+              <span className="text-13 text-red-500">{errors.organization_size.message}</span>
             )}
           </div>
         </div>
@@ -196,17 +195,17 @@ export const WorkspaceCreateForm = () => {
       <div className="flex max-w-4xl items-center py-1 gap-4">
         <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>
     </div>
   );
-};
+}
diff --git a/apps/admin/app/(all)/(dashboard)/workspace/create/page.tsx b/apps/admin/app/(all)/(dashboard)/workspace/create/page.tsx
index 6d69d313f1..30950d8783 100644
--- a/apps/admin/app/(all)/(dashboard)/workspace/create/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/workspace/create/page.tsx
@@ -1,23 +1,23 @@
-"use client";
-
 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<React.FC<Route.ComponentProps>>(() => (
-  <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">
+const WorkspaceCreatePage = observer(function WorkspaceCreatePage(_props: Route.ComponentProps) {
+  return (
+    <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 />
-    </div>
-  </div>
-));
+    </PageWrapper>
+  );
+});
 
 export const meta: Route.MetaFunction = () => [{ title: "Create Workspace - God Mode" }];
 
diff --git a/apps/admin/app/(all)/(dashboard)/workspace/page.tsx b/apps/admin/app/(all)/(dashboard)/workspace/page.tsx
index 5b6c96daaa..add3da10a3 100644
--- a/apps/admin/app/(all)/(dashboard)/workspace/page.tsx
+++ b/apps/admin/app/(all)/(dashboard)/workspace/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -10,15 +8,16 @@ 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<React.FC<Route.ComponentProps>>(() => {
+const WorkspaceManagementPage = observer(function WorkspaceManagementPage(_props: Route.ComponentProps) {
   // states
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
   // store
@@ -70,101 +69,95 @@ const WorkspaceManagementPage = observer<React.FC<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="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("w-full flex items-center gap-14 rounded-sm")}>
+            <div className="flex grow items-center gap-4">
+              <div className="grow">
+                <div className="text-16 font-medium pb-1">Prevent anyone else from creating a workspace.</div>
+                <div className={cn("font-regular leading-5 text-tertiary text-11")}>
+                  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="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-16 font-medium">
+                  All workspaces on this instance <span className="text-tertiary">• {workspaceIds.length}</span>
+                  {workspaceLoader && ["mutation", "pagination"].includes(workspaceLoader) && (
+                    <LoaderIcon className="w-4 h-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("font-regular leading-5 text-tertiary text-11")}>
+                  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="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>
+    </PageWrapper>
   );
 });
 
diff --git a/apps/admin/app/(all)/(home)/auth-banner.tsx b/apps/admin/app/(all)/(home)/auth-banner.tsx
index 2af42ed8e4..a2db1ad656 100644
--- a/apps/admin/app/(all)/(home)/auth-banner.tsx
+++ b/apps/admin/app/(all)/(home)/auth-banner.tsx
@@ -9,22 +9,22 @@ type TAuthBanner = {
   handleBannerData?: (bannerData: TAdminAuthErrorInfo | undefined) => void;
 };
 
-export const AuthBanner: React.FC<TAuthBanner> = (props) => {
+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="relative flex items-center p-2 rounded-md gap-2 border border-accent-strong/50 bg-accent-primary/10">
       <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
-        <Info size={16} className="text-custom-primary-100" />
+        <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 w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-accent-primary/20 text-accent-primary"
         onClick={() => handleBannerData && handleBannerData(undefined)}
       >
         <CloseIcon className="w-4 h-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 115c853814..1238be6c5a 100644
--- a/apps/admin/app/(all)/(home)/auth-header.tsx
+++ b/apps/admin/app/(all)/(home)/auth-header.tsx
@@ -1,12 +1,12 @@
-"use client";
-
 import Link from "next/link";
 import { PlaneLockup } from "@plane/propel/icons";
 
-export const AuthHeader = () => (
-  <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>
-);
+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-primary" />
+      </Link>
+    </div>
+  );
+}
diff --git a/apps/admin/app/(all)/(home)/auth-helpers.tsx b/apps/admin/app/(all)/(home)/auth-helpers.tsx
index 504bc7cd1a..18f793cd13 100644
--- a/apps/admin/app/(all)/(home)/auth-helpers.tsx
+++ b/apps/admin/app/(all)/(home)/auth-helpers.tsx
@@ -26,7 +26,7 @@ export enum EErrorAlertType {
 }
 
 const errorCodeMessages: {
-  [key in EAdminAuthErrorCodes]: { title: string; message: (email?: string | undefined) => React.ReactNode };
+  [key in EAdminAuthErrorCodes]: { title: string; message: (email?: string) => React.ReactNode };
 } = {
   // admin
   [EAdminAuthErrorCodes.ADMIN_ALREADY_EXIST]: {
@@ -79,14 +79,11 @@ const errorCodeMessages: {
   },
   [EAdminAuthErrorCodes.ADMIN_USER_DEACTIVATED]: {
     title: `User account deactivated`,
-    message: () => `User account deactivated. Please contact ${!!SUPPORT_EMAIL ? SUPPORT_EMAIL : "administrator"}.`,
+    message: () => `User account deactivated. Please contact ${SUPPORT_EMAIL ? SUPPORT_EMAIL : "administrator"}.`,
   },
 };
 
-export const authErrorHandler = (
-  errorCode: EAdminAuthErrorCodes,
-  email?: string | undefined
-): TAdminAuthErrorInfo | undefined => {
+export const authErrorHandler = (errorCode: EAdminAuthErrorCodes, email?: string): TAdminAuthErrorInfo | undefined => {
   const bannerAlertErrorCodes = [
     EAdminAuthErrorCodes.ADMIN_ALREADY_EXIST,
     EAdminAuthErrorCodes.REQUIRED_ADMIN_EMAIL_PASSWORD_FIRST_NAME,
@@ -120,14 +117,14 @@ export const getBaseAuthenticationModes: (props: TGetBaseAuthenticationModeProps
     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} />,
   },
   {
     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} />,
   },
   {
diff --git a/apps/admin/app/(all)/(home)/layout.tsx b/apps/admin/app/(all)/(home)/layout.tsx
index 97626e7e82..26c0e2b26e 100644
--- a/apps/admin/app/(all)/(home)/layout.tsx
+++ b/apps/admin/app/(all)/(home)/layout.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
@@ -18,7 +16,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 flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8 bg-surface-1">
       <Outlet />
     </div>
   );
diff --git a/apps/admin/app/(all)/(home)/page.tsx b/apps/admin/app/(all)/(home)/page.tsx
index 2308c691d1..12f701c462 100644
--- a/apps/admin/app/(all)/(home)/page.tsx
+++ b/apps/admin/app/(all)/(home)/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // components
 import { LogoSpinner } from "@/components/common/logo-spinner";
@@ -11,7 +9,7 @@ import { useInstance } from "@/hooks/store";
 import type { Route } from "./+types/page";
 import { InstanceSignInForm } from "./sign-in-form";
 
-const HomePage = () => {
+function HomePage() {
   // store hooks
   const { instance, error } = useInstance();
 
@@ -36,7 +34,7 @@ const HomePage = () => {
 
   // if instance is fetched and setup is done, show sign in form
   return <InstanceSignInForm />;
-};
+}
 
 export default observer(HomePage);
 
diff --git a/apps/admin/app/(all)/(home)/sign-in-form.tsx b/apps/admin/app/(all)/(home)/sign-in-form.tsx
index 56f0ca7351..6ac6605446 100644
--- a/apps/admin/app/(all)/(home)/sign-in-form.tsx
+++ b/apps/admin/app/(all)/(home)/sign-in-form.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import { Eye, EyeOff } from "lucide-react";
@@ -45,7 +43,7 @@ const defaultFromData: TFormData = {
   password: "",
 };
 
-export const InstanceSignInForm: React.FC = () => {
+export function InstanceSignInForm() {
   // search params
   const searchParams = useSearchParams();
   const emailParam = searchParams.get("email") || undefined;
@@ -130,11 +128,11 @@ export const InstanceSignInForm: React.FC = () => {
             <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">
+              <label className="text-13 text-tertiary font-medium" htmlFor="email">
                 Email <span className="text-red-500">*</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"
@@ -148,12 +146,12 @@ export const InstanceSignInForm: React.FC = () => {
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
+              <label className="text-13 text-tertiary font-medium" htmlFor="password">
                 Password <span className="text-red-500">*</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"}
@@ -166,7 +164,7 @@ export const InstanceSignInForm: React.FC = () => {
                 {showPassword ? (
                   <button
                     type="button"
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
                     onClick={() => setShowPassword(false)}
                   >
                     <EyeOff className="h-4 w-4" />
@@ -174,7 +172,7 @@ export const InstanceSignInForm: React.FC = () => {
                 ) : (
                   <button
                     type="button"
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
                     onClick={() => setShowPassword(true)}
                   >
                     <Eye className="h-4 w-4" />
@@ -183,7 +181,7 @@ export const InstanceSignInForm: React.FC = () => {
               </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>
@@ -192,4 +190,4 @@ export const InstanceSignInForm: React.FC = () => {
       </div>
     </>
   );
-};
+}
diff --git a/apps/admin/app/compat/next/image.tsx b/apps/admin/app/compat/next/image.tsx
index 91de8b7810..062638de41 100644
--- a/apps/admin/app/compat/next/image.tsx
+++ b/apps/admin/app/compat/next/image.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 
 // Minimal shim so code using next/image compiles under React Router + Vite
@@ -9,6 +7,8 @@ type NextImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
   src: string;
 };
 
-const Image: React.FC<NextImageProps> = ({ src, alt = "", ...rest }) => <img src={src} alt={alt} {...rest} />;
+function Image({ src, alt = "", ...rest }: NextImageProps) {
+  return <img src={src} alt={alt} {...rest} />;
+}
 
 export default Image;
diff --git a/apps/admin/app/compat/next/link.tsx b/apps/admin/app/compat/next/link.tsx
index 4f42363272..b0bca4faf5 100644
--- a/apps/admin/app/compat/next/link.tsx
+++ b/apps/admin/app/compat/next/link.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { Link as RRLink } from "react-router";
 import { ensureTrailingSlash } from "./helper";
@@ -12,13 +10,8 @@ type NextLinkProps = React.ComponentProps<"a"> & {
   shallow?: boolean; // next.js prop, ignored
 };
 
-const Link: React.FC<NextLinkProps> = ({
-  href,
-  replace,
-  prefetch: _prefetch,
-  scroll: _scroll,
-  shallow: _shallow,
-  ...rest
-}) => <RRLink to={ensureTrailingSlash(href)} replace={replace} {...rest} />;
+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/admin/app/compat/next/navigation.ts b/apps/admin/app/compat/next/navigation.ts
index 27ee033403..e0e6e90259 100644
--- a/apps/admin/app/compat/next/navigation.ts
+++ b/apps/admin/app/compat/next/navigation.ts
@@ -1,5 +1,3 @@
-"use client";
-
 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 fa17e4fcdc..a4954ebaaf 100644
--- a/apps/admin/app/components/404.tsx
+++ b/apps/admin/app/components/404.tsx
@@ -5,30 +5,32 @@ import { Button } from "@plane/propel/button";
 // images
 import Image404 from "@/app/assets/images/404.svg?url";
 
-const PageNotFound = () => (
-  <div className={`h-screen w-full overflow-hidden bg-custom-background-100`}>
-    <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" />
+function PageNotFound() {
+  return (
+    <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-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="secondary" size="lg">
+                Go to general settings
+              </Button>
+            </span>
+          </Link>
         </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">
-            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">
-              Go to general settings
-            </Button>
-          </span>
-        </Link>
       </div>
     </div>
-  </div>
-);
+  );
+}
 
 export default PageNotFound;
diff --git a/apps/admin/app/entry.client.tsx b/apps/admin/app/entry.client.tsx
index 82ea2d9381..9cf1c32deb 100644
--- a/apps/admin/app/entry.client.tsx
+++ b/apps/admin/app/entry.client.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable import/order */
 import * as Sentry from "@sentry/react-router";
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
diff --git a/apps/admin/app/root.tsx b/apps/admin/app/root.tsx
index 89415106d9..a2a5c216be 100644
--- a/apps/admin/app/root.tsx
+++ b/apps/admin/app/root.tsx
@@ -1,15 +1,20 @@
 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 * as Sentry from "@sentry/react-router";
 import appleTouchIcon from "@/app/assets/favicon/apple-touch-icon.png?url";
 import favicon16 from "@/app/assets/favicon/favicon-16x16.png?url";
 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 +27,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 +68,11 @@ export const meta: Route.MetaFunction = () => [
 ];
 
 export default function Root() {
-  return <Outlet />;
+  return (
+    <div className="bg-canvas min-h-screen">
+      <Outlet />
+    </div>
+  );
 }
 
 export function HydrateFallback() {
diff --git a/apps/admin/core/components/authentication/authentication-method-card.tsx b/apps/admin/core/components/authentication/authentication-method-card.tsx
index c1f613a96b..b420d13fb0 100644
--- a/apps/admin/core/components/authentication/authentication-method-card.tsx
+++ b/apps/admin/core/components/authentication/authentication-method-card.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 // helpers
 import { cn } from "@plane/utils";
 
@@ -13,13 +11,13 @@ type Props = {
   unavailable?: boolean;
 };
 
-export const AuthenticationMethodCard: React.FC<Props> = (props) => {
+export function AuthenticationMethodCard(props: Props) {
   const { name, description, icon, config, disabled = false, withBorder = true, unavailable = false } = 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("w-full flex items-center gap-14 rounded-lg bg-layer-2", {
+        "px-4 py-3 border border-subtle": withBorder,
       })}
     >
       <div
@@ -28,21 +26,21 @@ export const AuthenticationMethodCard: React.FC<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("font-medium leading-5 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("font-regular leading-5 text-tertiary", {
+              "text-11": withBorder,
+              "text-13": !withBorder,
             })}
           >
             {description}
@@ -52,4 +50,4 @@ export const AuthenticationMethodCard: React.FC<Props> = (props) => {
       <div className={`shrink-0 ${disabled && "opacity-70"}`}>{config}</div>
     </div>
   );
-};
+}
diff --git a/apps/admin/core/components/authentication/email-config-switch.tsx b/apps/admin/core/components/authentication/email-config-switch.tsx
index 3a2a5f541a..2a53eac126 100644
--- a/apps/admin/core/components/authentication/email-config-switch.tsx
+++ b/apps/admin/core/components/authentication/email-config-switch.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 // hooks
@@ -14,7 +12,7 @@ type Props = {
   updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
 };
 
-export const EmailCodesConfiguration: React.FC<Props> = observer((props) => {
+export const EmailCodesConfiguration = observer(function EmailCodesConfiguration(props: Props) {
   const { disabled, updateConfig } = props;
   // store
   const { formattedConfig } = useInstance();
diff --git a/apps/admin/core/components/authentication/gitea-config.tsx b/apps/admin/core/components/authentication/gitea-config.tsx
index 8b0b9b3745..e17e23ba10 100644
--- a/apps/admin/core/components/authentication/gitea-config.tsx
+++ b/apps/admin/core/components/authentication/gitea-config.tsx
@@ -1,13 +1,11 @@
-"use client";
-
-import React from "react";
 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";
@@ -17,7 +15,7 @@ type Props = {
   updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
 };
 
-export const GiteaConfiguration: React.FC<Props> = observer((props) => {
+export const GiteaConfiguration = observer(function GiteaConfiguration(props: Props) {
   const { disabled, updateConfig } = props;
   // store
   const { formattedConfig } = useInstance();
@@ -30,7 +28,7 @@ export const GiteaConfiguration: React.FC<Props> = observer((props) => {
     <>
       {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
@@ -45,11 +43,8 @@ export const GiteaConfiguration: React.FC<Props> = observer((props) => {
           />
         </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/core/components/authentication/github-config.tsx
index 3321914587..b058ecf1bd 100644
--- a/apps/admin/core/components/authentication/github-config.tsx
+++ b/apps/admin/core/components/authentication/github-config.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
@@ -18,7 +15,7 @@ type Props = {
   updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
 };
 
-export const GithubConfiguration: React.FC<Props> = observer((props) => {
+export const GithubConfiguration = observer(function GithubConfiguration(props: Props) {
   const { disabled, updateConfig } = props;
   // store
   const { formattedConfig } = useInstance();
@@ -30,7 +27,7 @@ export const GithubConfiguration: React.FC<Props> = observer((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
@@ -44,11 +41,8 @@ export const GithubConfiguration: React.FC<Props> = observer((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/core/components/authentication/gitlab-config.tsx
index d491ec1454..697f407d56 100644
--- a/apps/admin/core/components/authentication/gitlab-config.tsx
+++ b/apps/admin/core/components/authentication/gitlab-config.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
@@ -17,7 +15,7 @@ type Props = {
   updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
 };
 
-export const GitlabConfiguration: React.FC<Props> = observer((props) => {
+export const GitlabConfiguration = observer(function GitlabConfiguration(props: Props) {
   const { disabled, updateConfig } = props;
   // store
   const { formattedConfig } = useInstance();
@@ -29,7 +27,7 @@ export const GitlabConfiguration: React.FC<Props> = observer((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
@@ -43,11 +41,8 @@ export const GitlabConfiguration: React.FC<Props> = observer((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/core/components/authentication/google-config.tsx
index a87c6027e5..a130a82471 100644
--- a/apps/admin/core/components/authentication/google-config.tsx
+++ b/apps/admin/core/components/authentication/google-config.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import Link from "next/link";
 // icons
@@ -17,7 +15,7 @@ type Props = {
   updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
 };
 
-export const GoogleConfiguration: React.FC<Props> = observer((props) => {
+export const GoogleConfiguration = observer(function GoogleConfiguration(props: Props) {
   const { disabled, updateConfig } = props;
   // store
   const { formattedConfig } = useInstance();
@@ -29,7 +27,7 @@ export const GoogleConfiguration: React.FC<Props> = observer((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
@@ -43,11 +41,8 @@ export const GoogleConfiguration: React.FC<Props> = observer((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/core/components/authentication/password-config-switch.tsx
index 1126ff4fbe..bdc9c4920c 100644
--- a/apps/admin/core/components/authentication/password-config-switch.tsx
+++ b/apps/admin/core/components/authentication/password-config-switch.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 // hooks
@@ -14,7 +12,7 @@ type Props = {
   updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
 };
 
-export const PasswordLoginConfiguration: React.FC<Props> = observer((props) => {
+export const PasswordLoginConfiguration = observer(function PasswordLoginConfiguration(props: Props) {
   const { disabled, updateConfig } = props;
   // store
   const { formattedConfig } = useInstance();
diff --git a/apps/admin/core/components/common/banner.tsx b/apps/admin/core/components/common/banner.tsx
index 32bc5bc77f..861e8f6341 100644
--- a/apps/admin/core/components/common/banner.tsx
+++ b/apps/admin/core/components/common/banner.tsx
@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { AlertCircle, CheckCircle2 } from "lucide-react";
 
 type TBanner = {
@@ -6,7 +5,7 @@ type TBanner = {
   message: string;
 };
 
-export const Banner: FC<TBanner> = (props) => {
+export function Banner(props: TBanner) {
   const { type, message } = props;
 
   return (
@@ -24,9 +23,9 @@ export const Banner: FC<TBanner> = (props) => {
           )}
         </div>
         <div className="ml-1">
-          <p className={`text-sm font-medium ${type === "error" ? "text-red-600" : "text-green-600"}`}>{message}</p>
+          <p className={`text-13 font-medium ${type === "error" ? "text-red-600" : "text-green-600"}`}>{message}</p>
         </div>
       </div>
     </div>
   );
-};
+}
diff --git a/apps/admin/core/components/common/breadcrumb-link.tsx b/apps/admin/core/components/common/breadcrumb-link.tsx
index 567b88d923..0bed7e6064 100644
--- a/apps/admin/core/components/common/breadcrumb-link.tsx
+++ b/apps/admin/core/components/common/breadcrumb-link.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import Link from "next/link";
 import { Tooltip } from "@plane/propel/tooltip";
 
@@ -9,24 +7,19 @@ type Props = {
   icon?: React.ReactNode | undefined;
 };
 
-export const BreadcrumbLink: React.FC<Props> = (props) => {
+export function BreadcrumbLink(props: Props) {
   const { href, label, icon } = props;
   return (
     <Tooltip tooltipContent={label} position="bottom">
       <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>
-              )}
+            <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] overflow-hidden truncate">{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>
@@ -35,4 +28,4 @@ export const BreadcrumbLink: React.FC<Props> = (props) => {
       </li>
     </Tooltip>
   );
-};
+}
diff --git a/apps/admin/core/components/common/code-block.tsx b/apps/admin/core/components/common/code-block.tsx
index 88ad78a1e1..334d8d54ce 100644
--- a/apps/admin/core/components/common/code-block.tsx
+++ b/apps/admin/core/components/common/code-block.tsx
@@ -6,16 +6,18 @@ type TProps = {
   darkerShade?: boolean;
 };
 
-export const CodeBlock = ({ children, className, darkerShade }: TProps) => (
-  <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",
-      {
-        "text-custom-text-200 bg-custom-background-80 border-custom-border-200": darkerShade,
-      },
-      className
-    )}
-  >
-    {children}
-  </span>
-);
+export function CodeBlock({ children, className, darkerShade }: TProps) {
+  return (
+    <span
+      className={cn(
+        "px-0.5 text-11 text-tertiary bg-surface-2 font-semibold rounded-md border border-subtle",
+        {
+          "text-secondary bg-layer-1 border-subtle": darkerShade,
+        },
+        className
+      )}
+    >
+      {children}
+    </span>
+  );
+}
diff --git a/apps/admin/core/components/common/confirm-discard-modal.tsx b/apps/admin/core/components/common/confirm-discard-modal.tsx
index d1931f06f9..6b9d6f5963 100644
--- a/apps/admin/core/components/common/confirm-discard-modal.tsx
+++ b/apps/admin/core/components/common/confirm-discard-modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import Link from "next/link";
 // headless ui
@@ -13,7 +11,7 @@ type Props = {
   onDiscardHref: string;
 };
 
-export const ConfirmDiscardModal: React.FC<Props> = (props) => {
+export function ConfirmDiscardModal(props: Props) {
   const { isOpen, handleClose, onDiscardHref } = props;
 
   return (
@@ -28,7 +26,7 @@ export const ConfirmDiscardModal: React.FC<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">
@@ -41,15 +39,15 @@ export const ConfirmDiscardModal: React.FC<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]">
+              <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 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-300">
+                      <Dialog.Title as="h3" className="text-16 font-medium leading-6 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>
@@ -57,10 +55,10 @@ export const ConfirmDiscardModal: React.FC<Props> = (props) => {
                   </div>
                 </div>
                 <div className="flex justify-end items-center p-4 sm:px-6 gap-2">
-                  <Button variant="neutral-primary" size="sm" onClick={handleClose}>
+                  <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>
@@ -71,4 +69,4 @@ export const ConfirmDiscardModal: React.FC<Props> = (props) => {
       </Dialog>
     </Transition.Root>
   );
-};
+}
diff --git a/apps/admin/core/components/common/controller-input.tsx b/apps/admin/core/components/common/controller-input.tsx
index 4b16ffd07c..9dc38d851a 100644
--- a/apps/admin/core/components/common/controller-input.tsx
+++ b/apps/admin/core/components/common/controller-input.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import type { Control } from "react-hook-form";
 import { Controller } from "react-hook-form";
@@ -30,14 +28,14 @@ export type TControllerInputFormField = {
   required: boolean;
 };
 
-export const ControllerInput: React.FC<Props> = (props) => {
+export function ControllerInput(props: Props) {
   const { name, control, type, label, description, placeholder, error, required } = props;
   // states
   const [showPassword, setShowPassword] = useState(false);
 
   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}
@@ -63,7 +61,7 @@ export const ControllerInput: React.FC<Props> = (props) => {
           (showPassword ? (
             <button
               tabIndex={-1}
-              className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+              className="absolute right-3 top-2.5 flex items-center justify-center text-placeholder"
               onClick={() => setShowPassword(false)}
             >
               <EyeOff className="h-4 w-4" />
@@ -71,14 +69,14 @@ export const ControllerInput: React.FC<Props> = (props) => {
           ) : (
             <button
               tabIndex={-1}
-              className="absolute right-3 top-2.5 flex items-center justify-center text-custom-text-400"
+              className="absolute right-3 top-2.5 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/core/components/common/controller-switch.tsx b/apps/admin/core/components/common/controller-switch.tsx
new file mode 100644
index 0000000000..f20d6cafe3
--- /dev/null
+++ b/apps/admin/core/components/common/controller-switch.tsx
@@ -0,0 +1,38 @@
+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/core/components/common/copy-field.tsx
index 4f4f71753c..10a2c3729d 100644
--- a/apps/admin/core/components/common/copy-field.tsx
+++ b/apps/admin/core/components/common/copy-field.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 // ui
 import { Copy } from "lucide-react";
@@ -19,14 +17,15 @@ export type TCopyField = {
   description: string | React.ReactNode;
 };
 
-export const CopyField: React.FC<Props> = (props) => {
+export function CopyField(props: Props) {
   const { label, url, description } = 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);
@@ -37,10 +36,10 @@ export const CopyField: React.FC<Props> = (props) => {
           });
         }}
       >
-        <p className="text-sm font-medium">{url}</p>
+        <p className="text-13 font-medium">{url}</p>
         <Copy size={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/core/components/common/empty-state.tsx
index d0dae31aa3..861ff85882 100644
--- a/apps/admin/core/components/common/empty-state.tsx
+++ b/apps/admin/core/components/common/empty-state.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { Button } from "@plane/propel/button";
 
@@ -16,32 +14,28 @@ type Props = {
   disabled?: boolean;
 };
 
-export const EmptyState: React.FC<Props> = ({
-  title,
-  description,
-  image,
-  primaryButton,
-  secondaryButton,
-  disabled = false,
-}) => (
-  <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>}
-      <div className="flex items-center gap-4">
-        {primaryButton && (
-          <Button
-            variant="primary"
-            prependIcon={primaryButton.icon}
-            onClick={primaryButton.onClick}
-            disabled={disabled}
-          >
-            {primaryButton.text}
-          </Button>
-        )}
-        {secondaryButton}
+export function EmptyState({ title, description, image, primaryButton, secondaryButton, disabled = false }: Props) {
+  return (
+    <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-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
+              variant="primary"
+              prependIcon={primaryButton.icon}
+              onClick={primaryButton.onClick}
+              disabled={disabled}
+              size="lg"
+            >
+              {primaryButton.text}
+            </Button>
+          )}
+          {secondaryButton}
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+}
diff --git a/apps/admin/core/components/common/header/core.ts b/apps/admin/core/components/common/header/core.ts
new file mode 100644
index 0000000000..db77b83fa1
--- /dev/null
+++ b/apps/admin/core/components/common/header/core.ts
@@ -0,0 +1,13 @@
+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/core/components/common/header/extended.ts b/apps/admin/core/components/common/header/extended.ts
new file mode 100644
index 0000000000..152b082498
--- /dev/null
+++ b/apps/admin/core/components/common/header/extended.ts
@@ -0,0 +1 @@
+export const EXTENDED_HEADER_SEGMENT_LABELS: Record<string, string> = {};
diff --git a/apps/admin/app/(all)/(dashboard)/header.tsx b/apps/admin/core/components/common/header/index.tsx
similarity index 59%
rename from apps/admin/app/(all)/(dashboard)/header.tsx
rename to apps/admin/core/components/common/header/index.tsx
index 049c308342..65d6f5703b 100644
--- a/apps/admin/app/(all)/(dashboard)/header.tsx
+++ b/apps/admin/core/components/common/header/index.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 import { Menu, Settings } from "lucide-react";
@@ -9,50 +7,29 @@ import { Breadcrumbs } from "@plane/ui";
 import { BreadcrumbLink } from "@/components/common/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(() => {
+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="size-7 rounded-sm flex justify-center items-center bg-layer-1 transition-all hover:bg-layer-1-hover cursor-pointer group 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 group-hover:text-primary transition-all" />
+    </button>
   );
 });
 
-export const AdminHeader = observer(() => {
-  const pathName = usePathname();
+const HEADER_SEGMENT_LABELS = {
+  ...CORE_HEADER_SEGMENT_LABELS,
+  ...EXTENDED_HEADER_SEGMENT_LABELS,
+};
 
-  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();
-    }
-  };
+export const AdminHeader = observer(function AdminHeader() {
+  const pathName = usePathname();
 
   // Function to dynamically generate breadcrumb items based on pathname
   const generateBreadcrumbItems = (pathname: string) => {
@@ -63,17 +40,17 @@ export const AdminHeader = observer(() => {
     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 && (
@@ -84,7 +61,7 @@ export const AdminHeader = observer(() => {
                   <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/core/components/common/logo-spinner.tsx
index f51bdfe179..4d06d28224 100644
--- a/apps/admin/core/components/common/logo-spinner.tsx
+++ b/apps/admin/core/components/common/logo-spinner.tsx
@@ -2,7 +2,7 @@ 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";
 
-export const LogoSpinner = () => {
+export function LogoSpinner() {
   const { resolvedTheme } = useTheme();
 
   const logoSrc = resolvedTheme === "dark" ? LogoSpinnerLight : LogoSpinnerDark;
@@ -12,4 +12,4 @@ export const LogoSpinner = () => {
       <img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
     </div>
   );
-};
+}
diff --git a/apps/admin/core/components/common/page-header.tsx b/apps/admin/core/components/common/page-header.tsx
index a4b27b92fa..f0845fab33 100644
--- a/apps/admin/core/components/common/page-header.tsx
+++ b/apps/admin/core/components/common/page-header.tsx
@@ -1,11 +1,9 @@
-"use client";
-
 type TPageHeader = {
   title?: string;
   description?: string;
 };
 
-export const PageHeader: React.FC<TPageHeader> = (props) => {
+export function PageHeader(props: TPageHeader) {
   const { title = "God Mode - Plane", description = "Plane god mode" } = props;
 
   return (
@@ -14,4 +12,4 @@ export const PageHeader: React.FC<TPageHeader> = (props) => {
       <meta name="description" content={description} />
     </>
   );
-};
+}
diff --git a/apps/admin/core/components/common/page-wrapper.tsx b/apps/admin/core/components/common/page-wrapper.tsx
new file mode 100644
index 0000000000..e2f35a4884
--- /dev/null
+++ b/apps/admin/core/components/common/page-wrapper.tsx
@@ -0,0 +1,44 @@
+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 w-full h-full space-y-6 py-4", {
+        "md:px-4 max-w-[1000px] 2xl:max-w-[1200px]": size === "md",
+        "px-4 lg:px-12": size === "lg",
+      })}
+    >
+      {customHeader ? (
+        <div className="border-b border-subtle mx-4 py-4 space-y-1 shrink-0">{customHeader}</div>
+      ) : (
+        header && (
+          <div className="flex items-center justify-between gap-4 border-b border-subtle mx-4 py-4 space-y-1 shrink-0">
+            <div className={header.actions ? "flex flex-col gap-1" : "space-y-1"}>
+              <div className="text-primary text-h5-semibold">{header.title}</div>
+              <div className="text-secondary text-body-sm-regular">{header.description}</div>
+            </div>
+            {header.actions && <div className="shrink-0">{header.actions}</div>}
+          </div>
+        )
+      )}
+      <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-sm px-4 pb-4">
+        {children}
+      </div>
+    </div>
+  );
+};
diff --git a/apps/admin/core/components/instance/failure.tsx b/apps/admin/core/components/instance/failure.tsx
index 746c141f6a..30d9f09dfb 100644
--- a/apps/admin/core/components/instance/failure.tsx
+++ b/apps/admin/core/components/instance/failure.tsx
@@ -1,4 +1,3 @@
-"use client";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
 import { Button } from "@plane/propel/button";
@@ -7,7 +6,7 @@ import { AuthHeader } from "@/app/(all)/(home)/auth-header";
 import InstanceFailureDarkImage from "@/app/assets/instance/instance-failure-dark.svg?url";
 import InstanceFailureImage from "@/app/assets/instance/instance-failure.svg?url";
 
-export const InstanceFailureView: React.FC = observer(() => {
+export const InstanceFailureView = observer(function InstanceFailureView() {
   const { resolvedTheme } = useTheme();
 
   const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;
@@ -23,13 +22,13 @@ export const InstanceFailureView: React.FC = observer(() => {
         <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">
             <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="font-medium text-20 text-on-color text-center">Unable to fetch instance details.</h3>
+            <p className="font-medium text-14 text-center">
               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/core/components/instance/form-header.tsx b/apps/admin/core/components/instance/form-header.tsx
index d915ad293b..75062c30f5 100644
--- a/apps/admin/core/components/instance/form-header.tsx
+++ b/apps/admin/core/components/instance/form-header.tsx
@@ -1,8 +1,8 @@
-"use client";
-
-export const FormHeader = ({ heading, subHeading }: { heading: string; subHeading: string }) => (
-  <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>
-);
+export function FormHeader({ heading, subHeading }: { heading: string; subHeading: string }) {
+  return (
+    <div className="flex flex-col gap-1">
+      <span className="text-20 font-semibold text-primary leading-7">{heading}</span>
+      <span className="text-16 font-semibold text-placeholder 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
index d47b14f676..7092ae048c 100644
--- a/apps/admin/core/components/instance/instance-not-ready.tsx
+++ b/apps/admin/core/components/instance/instance-not-ready.tsx
@@ -1,28 +1,26 @@
-"use client";
-
 import Link from "next/link";
 import { Button } from "@plane/propel/button";
 // assets
 import PlaneTakeOffImage from "@/app/assets/images/plane-takeoff.png?url";
 
-export const InstanceNotReady: React.FC = () => (
-  <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>
+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-24 font-bold pb-3">Welcome aboard Plane!</h1>
+          <img src={PlaneTakeOffImage} alt="Plane Logo" />
+          <p className="font-medium text-14 text-placeholder">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>
+          <Link href={"/setup/?auth_enabled=0"}>
+            <Button size="xl" className="w-full">
+              Get started
+            </Button>
+          </Link>
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+}
diff --git a/apps/admin/core/components/instance/loading.tsx b/apps/admin/core/components/instance/loading.tsx
index 72d7c24c82..2b45deff28 100644
--- a/apps/admin/core/components/instance/loading.tsx
+++ b/apps/admin/core/components/instance/loading.tsx
@@ -3,7 +3,7 @@ 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";
 
-export const InstanceLoading = () => {
+export function InstanceLoading() {
   const { resolvedTheme } = useTheme();
 
   const logoSrc = resolvedTheme === "dark" ? LogoSpinnerLight : LogoSpinnerDark;
@@ -13,4 +13,4 @@ export const InstanceLoading = () => {
       <img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
     </div>
   );
-};
+}
diff --git a/apps/admin/core/components/instance/setup-form.tsx b/apps/admin/core/components/instance/setup-form.tsx
index eae4c6d87b..4d98885e55 100644
--- a/apps/admin/core/components/instance/setup-form.tsx
+++ b/apps/admin/core/components/instance/setup-form.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "next/navigation";
 // icons
@@ -53,17 +51,16 @@ const defaultFromData: TFormData = {
   is_telemetry_enabled: true,
 };
 
-export const InstanceSetupForm: React.FC = (props) => {
-  const {} = props;
+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,
@@ -159,11 +156,11 @@ export const InstanceSetupForm: React.FC = (props) => {
 
             <div className="flex flex-col sm:flex-row items-center gap-4">
               <div className="w-full space-y-1">
-                <label className="text-sm text-custom-text-300 font-medium" htmlFor="first_name">
+                <label className="text-13 text-tertiary font-medium" htmlFor="first_name">
                   First name <span className="text-red-500">*</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"
@@ -176,11 +173,11 @@ export const InstanceSetupForm: React.FC = (props) => {
                 />
               </div>
               <div className="w-full space-y-1">
-                <label className="text-sm text-custom-text-300 font-medium" htmlFor="last_name">
+                <label className="text-13 text-tertiary font-medium" htmlFor="last_name">
                   Last name <span className="text-red-500">*</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"
@@ -194,11 +191,11 @@ export const InstanceSetupForm: React.FC = (props) => {
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
+              <label className="text-13 text-tertiary font-medium" htmlFor="email">
                 Email <span className="text-red-500">*</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"
@@ -210,16 +207,16 @@ export const InstanceSetupForm: React.FC = (props) => {
                 autoComplete="on"
               />
               {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-red-500">{errorData.message}</p>
               )}
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-sm text-custom-text-300 font-medium" htmlFor="company_name">
+              <label className="text-13 text-tertiary font-medium" htmlFor="company_name">
                 Company name <span className="text-red-500">*</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"
@@ -231,17 +228,17 @@ export const InstanceSetupForm: React.FC = (props) => {
             </div>
 
             <div className="w-full space-y-1">
-              <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
+              <label className="text-13 text-tertiary font-medium" htmlFor="password">
                 Set a password <span className="text-red-500">*</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}
@@ -253,7 +250,7 @@ export const InstanceSetupForm: React.FC = (props) => {
                   <button
                     type="button"
                     tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("password")}
                   >
                     <EyeOff className="h-4 w-4" />
@@ -262,7 +259,7 @@ export const InstanceSetupForm: React.FC = (props) => {
                   <button
                     type="button"
                     tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("password")}
                   >
                     <Eye className="h-4 w-4" />
@@ -270,13 +267,13 @@ export const InstanceSetupForm: React.FC = (props) => {
                 )}
               </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-red-500">{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">
+              <label className="text-13 text-tertiary font-medium" htmlFor="confirm_password">
                 Confirm password <span className="text-red-500">*</span>
               </label>
               <div className="relative">
@@ -288,7 +285,7 @@ export const InstanceSetupForm: React.FC = (props) => {
                   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)}
                 />
@@ -296,7 +293,7 @@ export const InstanceSetupForm: React.FC = (props) => {
                   <button
                     type="button"
                     tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("retypePassword")}
                   >
                     <EyeOff className="h-4 w-4" />
@@ -305,7 +302,7 @@ export const InstanceSetupForm: React.FC = (props) => {
                   <button
                     type="button"
                     tabIndex={-1}
-                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-placeholder"
                     onClick={() => handleShowPassword("retypePassword")}
                   >
                     <Eye className="h-4 w-4" />
@@ -314,7 +311,7 @@ export const InstanceSetupForm: React.FC = (props) => {
               </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-red-500">Passwords don{"'"}t match</span>}
             </div>
 
             <div className="relative flex gap-2">
@@ -327,14 +324,14 @@ export const InstanceSetupForm: React.FC = (props) => {
                   checked={formData.is_telemetry_enabled}
                 />
               </div>
-              <label className="text-sm text-custom-text-300 font-medium cursor-pointer" htmlFor="is_telemetry_enabled">
+              <label className="text-13 text-tertiary font-medium cursor-pointer" 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-13 font-medium text-blue-500 hover:text-blue-600 flex-shrink-0"
                 >
                   See More
                 </a>
@@ -342,7 +339,7 @@ export const InstanceSetupForm: React.FC = (props) => {
             </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>
@@ -351,4 +348,4 @@ export const InstanceSetupForm: React.FC = (props) => {
       </div>
     </>
   );
-};
+}
diff --git a/apps/admin/core/components/new-user-popup.tsx b/apps/admin/core/components/new-user-popup.tsx
index 6192f57418..a20cb147fc 100644
--- a/apps/admin/core/components/new-user-popup.tsx
+++ b/apps/admin/core/components/new-user-popup.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useTheme as useNextTheme } from "next-themes";
@@ -12,7 +10,7 @@ import TakeoffIconLight from "@/app/assets/logos/takeoff-icon-light.svg?url";
 import { useTheme } from "@/hooks/store";
 // icons
 
-export const NewUserPopup = observer(() => {
+export const NewUserPopup = observer(function NewUserPopup() {
   // hooks
   const { isNewUserPopup, toggleNewUserPopup } = useTheme();
   // theme
@@ -20,19 +18,19 @@ export const NewUserPopup = observer(() => {
 
   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="absolute bottom-8 right-8 p-6 w-96 border border-subtle shadow-md rounded-lg bg-surface-1">
       <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>
diff --git a/apps/admin/core/components/workspace/list-item.tsx b/apps/admin/core/components/workspace/list-item.tsx
index 85a2b3c61e..c64ea648de 100644
--- a/apps/admin/core/components/workspace/list-item.tsx
+++ b/apps/admin/core/components/workspace/list-item.tsx
@@ -11,7 +11,7 @@ type TWorkspaceListItemProps = {
   workspaceId: string;
 };
 
-export const WorkspaceListItem = observer(({ workspaceId }: TWorkspaceListItemProps) => {
+export const WorkspaceListItem = observer(function WorkspaceListItem({ workspaceId }: TWorkspaceListItemProps) {
   // store hooks
   const { getWorkspaceById } = useWorkspace();
   // derived values
@@ -23,18 +23,19 @@ export const WorkspaceListItem = observer(({ workspaceId }: TWorkspaceListItemPr
       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 p-3 gap-2.5 truncate border border-subtle hover:border-subtle-1 bg-layer-1 hover:bg-layer-1-hover hover:shadow-raised-100 rounded-lg"
+      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 flex h-8 w-8 flex-shrink-0 items-center justify-center p-2 mt-1 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 left-0 top-0 h-full w-full rounded-sm object-cover"
               alt="Workspace Logo"
             />
           ) : (
@@ -43,30 +44,30 @@ export const WorkspaceListItem = observer(({ workspaceId }: TWorkspaceListItemPr
         </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>/
+            <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="text-secondary font-medium">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="text-secondary font-medium">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="text-secondary font-medium">Total members:</h3>
+                  <h4 className="text-tertiary">{workspace.total_members}</h4>
                 </span>
               </>
             )}
@@ -74,7 +75,7 @@ export const WorkspaceListItem = observer(({ workspaceId }: TWorkspaceListItemPr
         </div>
       </div>
       <div className="flex-shrink-0">
-        <ExternalLink size={14} className="text-custom-text-400 group-hover:text-custom-text-200" />
+        <ExternalLink size={16} className="text-placeholder group-hover:text-secondary" />
       </div>
     </a>
   );
diff --git a/apps/admin/core/hooks/oauth/core.tsx b/apps/admin/core/hooks/oauth/core.tsx
index 5d9ae165a6..dc04b40ff7 100644
--- a/apps/admin/core/hooks/oauth/core.tsx
+++ b/apps/admin/core/hooks/oauth/core.tsx
@@ -1,7 +1,10 @@
 import { KeyRound, Mails } from "lucide-react";
 // types
-import type { TGetBaseAuthenticationModeProps, TInstanceAuthenticationModes } from "@plane/types";
-import { resolveGeneralTheme } from "@plane/utils";
+import type {
+  TCoreInstanceAuthenticationModeKeys,
+  TGetBaseAuthenticationModeProps,
+  TInstanceAuthenticationModes,
+} from "@plane/types";
 // assets
 import giteaLogo from "@/app/assets/logos/gitea-logo.svg?url";
 import githubLightModeImage from "@/app/assets/logos/github-black.png?url";
@@ -19,7 +22,7 @@ import { PasswordLoginConfiguration } from "@/components/authentication/password
 // Authentication methods
 export const getCoreAuthenticationModesMap: (
   props: TGetBaseAuthenticationModeProps
-) => Record<TInstanceAuthenticationModes["key"], TInstanceAuthenticationModes> = ({
+) => Record<TCoreInstanceAuthenticationModeKeys, TInstanceAuthenticationModes> = ({
   disabled,
   updateConfig,
   resolvedTheme,
@@ -29,14 +32,14 @@ export const getCoreAuthenticationModesMap: (
     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} />,
   },
   "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} />,
   },
   google: {
@@ -52,7 +55,7 @@ export const getCoreAuthenticationModesMap: (
     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"
diff --git a/apps/admin/core/hooks/store/use-instance.tsx b/apps/admin/core/hooks/store/use-instance.tsx
index 5917df3fa0..508e8fe1ec 100644
--- a/apps/admin/core/hooks/store/use-instance.tsx
+++ b/apps/admin/core/hooks/store/use-instance.tsx
@@ -1,6 +1,6 @@
 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/core/hooks/store/use-theme.tsx
index d5a1e820e3..289ea6ae4a 100644
--- a/apps/admin/core/hooks/store/use-theme.tsx
+++ b/apps/admin/core/hooks/store/use-theme.tsx
@@ -1,6 +1,6 @@
 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/core/hooks/store/use-user.tsx
index 56b988eb80..80cd046b49 100644
--- a/apps/admin/core/hooks/store/use-user.tsx
+++ b/apps/admin/core/hooks/store/use-user.tsx
@@ -1,6 +1,6 @@
 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/core/hooks/store/use-workspace.tsx
index c4578c9170..957a33ff3c 100644
--- a/apps/admin/core/hooks/store/use-workspace.tsx
+++ b/apps/admin/core/hooks/store/use-workspace.tsx
@@ -1,6 +1,6 @@
 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/core/hooks/use-sidebar-menu/core.ts b/apps/admin/core/hooks/use-sidebar-menu/core.ts
new file mode 100644
index 0000000000..36b143598d
--- /dev/null
+++ b/apps/admin/core/hooks/use-sidebar-menu/core.ts
@@ -0,0 +1,46 @@
+import { Image, BrainCog, Cog, Lock, Mail } from "lucide-react";
+// plane imports
+import { 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: Lock,
+    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/core/hooks/use-sidebar-menu/index.ts b/apps/admin/core/hooks/use-sidebar-menu/index.ts
new file mode 100644
index 0000000000..0f9e717dc6
--- /dev/null
+++ b/apps/admin/core/hooks/use-sidebar-menu/index.ts
@@ -0,0 +1,14 @@
+// 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/core/hooks/use-sidebar-menu/types.ts b/apps/admin/core/hooks/use-sidebar-menu/types.ts
new file mode 100644
index 0000000000..d7a49a50d7
--- /dev/null
+++ b/apps/admin/core/hooks/use-sidebar-menu/types.ts
@@ -0,0 +1,8 @@
+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/admin/core/lib/b-progress/AppProgressBar.tsx b/apps/admin/core/lib/b-progress/AppProgressBar.tsx
index 915b19ff99..7ad93fc11b 100644
--- a/apps/admin/core/lib/b-progress/AppProgressBar.tsx
+++ b/apps/admin/core/lib/b-progress/AppProgressBar.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useRef } from "react";
 import { BProgress } from "@bprogress/core";
 import { useNavigation } from "react-router";
diff --git a/apps/admin/app/providers.tsx b/apps/admin/core/providers/core.tsx
similarity index 69%
rename from apps/admin/app/providers.tsx
rename to apps/admin/core/providers/core.tsx
index 841e4cf38f..d06d8f3f4a 100644
--- a/apps/admin/app/providers.tsx
+++ b/apps/admin/core/providers/core.tsx
@@ -1,12 +1,11 @@
-"use client";
-
 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,
@@ -17,7 +16,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/core/providers/extended.tsx b/apps/admin/core/providers/extended.tsx
new file mode 100644
index 0000000000..60f36cbe47
--- /dev/null
+++ b/apps/admin/core/providers/extended.tsx
@@ -0,0 +1,3 @@
+export function ExtendedProviders({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}
diff --git a/apps/admin/core/providers/index.tsx b/apps/admin/core/providers/index.tsx
new file mode 100644
index 0000000000..c0447b5bce
--- /dev/null
+++ b/apps/admin/core/providers/index.tsx
@@ -0,0 +1,10 @@
+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/core/providers/instance.provider.tsx
similarity index 80%
rename from apps/admin/app/(all)/instance.provider.tsx
rename to apps/admin/core/providers/instance.provider.tsx
index 8a5cadcd12..5dcd3b6f5f 100644
--- a/apps/admin/app/(all)/instance.provider.tsx
+++ b/apps/admin/core/providers/instance.provider.tsx
@@ -3,7 +3,7 @@ import useSWR from "swr";
 // hooks
 import { useInstance } from "@/hooks/store";
 
-export const InstanceProvider = observer<React.FC<React.PropsWithChildren>>((props) => {
+export const InstanceProvider = observer(function InstanceProvider(props: React.PropsWithChildren) {
   const { children } = props;
   // store hooks
   const { fetchInstanceInfo } = useInstance();
diff --git a/apps/admin/app/(all)/store.provider.tsx b/apps/admin/core/providers/store.provider.tsx
similarity index 90%
rename from apps/admin/app/(all)/store.provider.tsx
rename to apps/admin/core/providers/store.provider.tsx
index 35c6cbc018..49e341b723 100644
--- a/apps/admin/app/(all)/store.provider.tsx
+++ b/apps/admin/core/providers/store.provider.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { createContext } from "react";
 // plane admin store
 import { RootStore } from "@/plane-admin/store/root.store";
@@ -28,7 +26,7 @@ export type StoreProviderProps = {
   initialState?: any;
 };
 
-export const StoreProvider = ({ children, initialState = {} }: StoreProviderProps) => {
+export function StoreProvider({ children, initialState = {} }: StoreProviderProps) {
   const store = initializeStore(initialState);
   return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
-};
+}
diff --git a/apps/admin/app/(all)/toast.tsx b/apps/admin/core/providers/toast.tsx
similarity index 81%
rename from apps/admin/app/(all)/toast.tsx
rename to apps/admin/core/providers/toast.tsx
index 9cd1c46a13..1e7e3a11e0 100644
--- a/apps/admin/app/(all)/toast.tsx
+++ b/apps/admin/core/providers/toast.tsx
@@ -1,10 +1,8 @@
-"use client";
-
 import { useTheme } from "next-themes";
 import { Toast } from "@plane/propel/toast";
 import { resolveGeneralTheme } from "@plane/utils";
 
-export const ToastWithTheme = () => {
+export function ToastWithTheme() {
   const { resolvedTheme } = useTheme();
   return <Toast theme={resolveGeneralTheme(resolvedTheme)} />;
-};
+}
diff --git a/apps/admin/app/(all)/user.provider.tsx b/apps/admin/core/providers/user.provider.tsx
similarity index 89%
rename from apps/admin/app/(all)/user.provider.tsx
rename to apps/admin/core/providers/user.provider.tsx
index 5ff9e88c7e..04242abc9e 100644
--- a/apps/admin/app/(all)/user.provider.tsx
+++ b/apps/admin/core/providers/user.provider.tsx
@@ -1,12 +1,10 @@
-"use client";
-
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // hooks
 import { useInstance, useTheme, useUser } from "@/hooks/store";
 
-export const UserProvider = observer<React.FC<React.PropsWithChildren>>(({ children }) => {
+export const UserProvider = observer(function UserProvider({ children }: React.PropsWithChildren) {
   // hooks
   const { isSidebarCollapsed, toggleSidebar } = useTheme();
   const { currentUser, fetchCurrentUser } = useUser();
diff --git a/apps/admin/ee/components/common/index.ts b/apps/admin/ee/components/common/index.ts
deleted file mode 100644
index 60441ee25b..0000000000
--- a/apps/admin/ee/components/common/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/common";
diff --git a/apps/admin/package.json b/apps/admin/package.json
index dcc8e696ef..25f0076f63 100644
--- a/apps/admin/package.json
+++ b/apps/admin/package.json
@@ -1,7 +1,7 @@
 {
   "name": "admin",
   "description": "Admin UI for Plane",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "AGPL-3.0",
   "private": true,
   "type": "module",
@@ -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 19",
+    "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=485",
     "check:types": "react-router typegen && tsc --noEmit",
-    "check:format": "prettier --check \"**/*.{ts,tsx,md,json,css,scss}\"",
-    "fix:lint": "eslint . --fix",
-    "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\""
+    "check:format": "prettier . --cache --check",
+    "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=485",
+    "fix:format": "prettier . --cache --write"
   },
   "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:*",
@@ -27,7 +30,7 @@
     "@plane/types": "workspace:*",
     "@plane/ui": "workspace:*",
     "@plane/utils": "workspace:*",
-    "@react-router/node": "^7.9.3",
+    "@react-router/node": "catalog:",
     "@sentry/react-router": "catalog:",
     "@tanstack/react-virtual": "^3.13.12",
     "@tanstack/virtual-core": "^3.13.12",
@@ -37,26 +40,25 @@
     "lucide-react": "catalog:",
     "mobx": "catalog:",
     "mobx-react": "catalog:",
-    "next-themes": "^0.2.1",
+    "next-themes": "0.4.6",
     "react": "catalog:",
     "react-dom": "catalog:",
     "react-hook-form": "7.51.5",
-    "react-router": "^7.9.1",
-    "react-router-dom": "^7.9.1",
+    "react-router": "catalog:",
+    "react-router-dom": "catalog:",
     "serve": "14.2.5",
     "swr": "catalog:",
     "uuid": "catalog:"
   },
   "devDependencies": {
-    "@plane/eslint-config": "workspace:*",
+    "@dotenvx/dotenvx": "catalog:",
     "@plane/tailwind-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
-    "@react-router/dev": "^7.9.1",
+    "@react-router/dev": "catalog:",
     "@types/lodash-es": "catalog:",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
-    "dotenv": "^16.4.5",
     "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 9b1e55fc44..0000000000
--- a/apps/admin/postcss.config.cjs
+++ /dev/null
@@ -1,2 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-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 0000000000..3ad28f15f3
--- /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/styles/globals.css b/apps/admin/styles/globals.css
index 53c55a5334..7f7f2483a5 100644
--- a/apps/admin/styles/globals.css
+++ b/apps/admin/styles/globals.css
@@ -1,403 +1,22 @@
-@import "@plane/propel/styles/fonts.css";
+@import "@plane/tailwind-config/index.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;
-  }
+.shadow-custom {
+  box-shadow: 2px 2px 8px 2px rgba(234, 231, 250, 0.3); /* Convert #EAE7FA4D to rgba */
 }
-
-@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 */
-  }
+/* backdrop filter */
+.backdrop-blur-custom {
+  @apply backdrop-filter blur-[9px];
 }
 
-* {
-  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 */
-@-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);
-}
-/* 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;
 }
 
@@ -408,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;
 }
@@ -417,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 a05d9dcd8d..0000000000
--- a/apps/admin/tailwind.config.cjs
+++ /dev/null
@@ -1,6 +0,0 @@
-/* eslint-disable @typescript-eslint/no-require-imports */
-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 7dbd2eeb92..90dedb762e 100644
--- a/apps/admin/tsconfig.json
+++ b/apps/admin/tsconfig.json
@@ -1,16 +1,21 @@
 {
   "extends": "@plane/typescript-config/react-router.json",
   "compilerOptions": {
-    "baseUrl": ".",
+    "noImplicitOverride": false,
+    "exactOptionalPropertyTypes": false,
+    "noUnusedParameters": false,
+    "noUnusedLocals": false,
     "rootDirs": [".", "./.react-router/types"],
-    "types": ["node", "vite/client"],
+    "types": ["vite/client"],
     "paths": {
-      "@/app/*": ["app/*"],
-      "@/*": ["core/*"],
-      "@/plane-admin/*": ["ce/*"],
-      "@/styles/*": ["styles/*"]
-    },
-    "strictNullChecks": true
+      "package.json": ["./package.json"],
+      "ce/*": ["./ce/*"],
+      "@/app/*": ["./app/*"],
+      "@/*": ["./core/*"],
+      "@/plane-admin/*": ["./ce/*"],
+      "@/ce/*": ["./ce/*"],
+      "@/styles/*": ["./styles/*"]
+    }
   },
   "include": ["**/*", "**/.server/**/*", "**/.client/**/*", ".react-router/types/**/*"],
   "exclude": ["node_modules"]
diff --git a/apps/admin/vite.config.ts b/apps/admin/vite.config.ts
index 97993fcb72..c9d97157f4 100644
--- a/apps/admin/vite.config.ts
+++ b/apps/admin/vite.config.ts
@@ -1,6 +1,6 @@
 import path from "node:path";
+import * as dotenv from "@dotenvx/dotenvx";
 import { reactRouter } from "@react-router/dev/vite";
-import dotenv from "dotenv";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 import { joinUrlPath } from "@plane/utils";
diff --git a/apps/api/.env.example b/apps/api/.env.example
index f158e3d7cc..4c84bd6837 100644
--- a/apps/api/.env.example
+++ b/apps/api/.env.example
@@ -32,6 +32,9 @@ AWS_S3_ENDPOINT_URL="http://localhost:9000"
 AWS_S3_BUCKET_NAME="uploads"
 # Maximum file upload limit
 FILE_SIZE_LIMIT=5242880
+# Signed URL expiration time in seconds (default: 3600 = 1 hour)
+# Set to 30 for 30 seconds, 300 for 5 minutes, etc.
+SIGNED_URL_EXPIRATION=3600
 
 # Settings related to Docker
 DOCKERIZED=1 # deprecated
diff --git a/apps/api/.prettierignore b/apps/api/.prettierignore
new file mode 100644
index 0000000000..b0b8bc622a
--- /dev/null
+++ b/apps/api/.prettierignore
@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/apps/api/bin/docker-entrypoint-api.sh b/apps/api/bin/docker-entrypoint-api.sh
index 5a1da1570a..7a64028645 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/package.json b/apps/api/package.json
index ffecb3a73e..6e62f2bd11 100644
--- a/apps/api/package.json
+++ b/apps/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "plane-api",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "AGPL-3.0",
   "private": true,
   "description": "API server powering Plane's backend"
diff --git a/apps/api/plane/api/serializers/__init__.py b/apps/api/plane/api/serializers/__init__.py
index b58b9fdcb7..550d8e87f4 100644
--- a/apps/api/plane/api/serializers/__init__.py
+++ b/apps/api/plane/api/serializers/__init__.py
@@ -54,4 +54,5 @@ from .asset import (
     FileAssetSerializer,
 )
 from .invite import WorkspaceInviteSerializer
-from .member import ProjectMemberSerializer
\ No newline at end of file
+from .member import ProjectMemberSerializer
+from .sticky import StickySerializer
diff --git a/apps/api/plane/api/serializers/cycle.py b/apps/api/plane/api/serializers/cycle.py
index 6b7bfa442f..f2724231a2 100644
--- a/apps/api/plane/api/serializers/cycle.py
+++ b/apps/api/plane/api/serializers/cycle.py
@@ -4,7 +4,7 @@ from rest_framework import serializers
 
 # Module imports
 from .base import BaseSerializer
-from plane.db.models import Cycle, CycleIssue, User
+from plane.db.models import Cycle, CycleIssue, User, Project
 from plane.utils.timezone_converter import convert_to_utc
 
 
@@ -55,6 +55,18 @@ class CycleCreateSerializer(BaseSerializer):
         ]
 
     def validate(self, data):
+        project_id = self.initial_data.get("project_id") or (
+            self.instance.project_id if self.instance and hasattr(self.instance, "project_id") else None
+        )
+
+        if not project_id:
+            raise serializers.ValidationError("Project ID is required")
+
+        project = Project.objects.filter(id=project_id).first()
+        if not project:
+            raise serializers.ValidationError("Project not found")
+        if not project.cycle_view:
+            raise serializers.ValidationError("Cycles are not enabled for this project")
         if (
             data.get("start_date", None) is not None
             and data.get("end_date", None) is not None
@@ -63,13 +75,6 @@ class CycleCreateSerializer(BaseSerializer):
             raise serializers.ValidationError("Start date cannot exceed end date")
 
         if data.get("start_date", None) is not None and data.get("end_date", None) is not None:
-            project_id = self.initial_data.get("project_id") or (
-                self.instance.project_id if self.instance and hasattr(self.instance, "project_id") else None
-            )
-
-            if not project_id:
-                raise serializers.ValidationError("Project ID is required")
-
             data["start_date"] = convert_to_utc(
                 date=str(data.get("start_date").date()),
                 project_id=project_id,
diff --git a/apps/api/plane/api/serializers/intake.py b/apps/api/plane/api/serializers/intake.py
index 5fd846d1d8..40cbba38b6 100644
--- a/apps/api/plane/api/serializers/intake.py
+++ b/apps/api/plane/api/serializers/intake.py
@@ -1,7 +1,7 @@
 # Module imports
 from .base import BaseSerializer
 from .issue import IssueExpandSerializer
-from plane.db.models import IntakeIssue, Issue
+from plane.db.models import IntakeIssue, Issue, State, StateGroup
 from rest_framework import serializers
 
 
@@ -103,6 +103,52 @@ class IntakeIssueUpdateSerializer(BaseSerializer):
             "updated_at",
         ]
 
+    def validate(self, attrs):
+        """
+        Validate that if status is being changed to accepted (1),
+        the project has a default state to transition to.
+        """
+
+        # Check if status is being updated to accepted
+        if attrs.get("status") == 1:
+            intake_issue = self.instance
+            issue = intake_issue.issue
+
+            # Check if issue is in TRIAGE state
+            if issue.state and issue.state.group == StateGroup.TRIAGE.value:
+                # Verify default state exists before allowing the update
+                default_state = State.objects.filter(
+                    workspace=intake_issue.workspace, project=intake_issue.project, default=True
+                ).first()
+
+                if not default_state:
+                    raise serializers.ValidationError(
+                        {"status": "Cannot accept intake issue: No default state found for the project"}
+                    )
+
+        return attrs
+
+    def update(self, instance, validated_data):
+        """
+        Update intake issue and transition associated issue state if accepted.
+        """
+
+        # Update the intake issue with validated data
+        instance = super().update(instance, validated_data)
+
+        # If status is accepted (1), update the associated issue state from TRIAGE to default
+        if validated_data.get("status") == 1:
+            issue = instance.issue
+            if issue.state and issue.state.group == StateGroup.TRIAGE.value:
+                # Get the default project state
+                default_state = State.objects.filter(
+                    workspace=instance.workspace, project=instance.project, default=True
+                ).first()
+                if default_state:
+                    issue.state = default_state
+                    issue.save()
+        return instance
+
 
 class IssueDataSerializer(serializers.Serializer):
     """
diff --git a/apps/api/plane/api/serializers/module.py b/apps/api/plane/api/serializers/module.py
index 77be453c88..d1e3b0d81a 100644
--- a/apps/api/plane/api/serializers/module.py
+++ b/apps/api/plane/api/serializers/module.py
@@ -10,6 +10,7 @@ from plane.db.models import (
     ModuleMember,
     ModuleIssue,
     ProjectMember,
+    Project,
 )
 
 
@@ -53,6 +54,14 @@ class ModuleCreateSerializer(BaseSerializer):
         ]
 
     def validate(self, data):
+        project_id = self.context.get("project_id")
+        if not project_id:
+            raise serializers.ValidationError("Project ID is required")
+        project = Project.objects.get(id=project_id)
+        if not project:
+            raise serializers.ValidationError("Project not found")
+        if not project.module_view:
+            raise serializers.ValidationError("Modules are not enabled for this project")
         if (
             data.get("start_date", None) is not None
             and data.get("target_date", None) is not None
diff --git a/apps/api/plane/api/serializers/project.py b/apps/api/plane/api/serializers/project.py
index 5b30703611..c9a0a31c89 100644
--- a/apps/api/plane/api/serializers/project.py
+++ b/apps/api/plane/api/serializers/project.py
@@ -3,13 +3,7 @@ import random
 from rest_framework import serializers
 
 # 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,
@@ -123,6 +117,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")
 
@@ -171,7 +166,7 @@ class ProjectUpdateSerializer(ProjectCreateSerializer):
 
         if (
             validated_data.get("estimate", None) is not None
-            and not Estimate.objects.filter(project=instance, id=validated_data.get("estimate")).exists()
+            and not Estimate.objects.filter(project=instance, id=validated_data.get("estimate").id).exists()
         ):
             # Check if the estimate is a estimate in the project
             raise serializers.ValidationError("Estimate should be a estimate in the project")
diff --git a/apps/api/plane/api/serializers/state.py b/apps/api/plane/api/serializers/state.py
index fc6aac15e9..c279529b82 100644
--- a/apps/api/plane/api/serializers/state.py
+++ b/apps/api/plane/api/serializers/state.py
@@ -1,6 +1,7 @@
 # Module imports
 from .base import BaseSerializer
-from plane.db.models import State
+from plane.db.models import State, StateGroup
+from rest_framework import serializers
 
 
 class StateSerializer(BaseSerializer):
@@ -15,6 +16,9 @@ class StateSerializer(BaseSerializer):
         # If the default is being provided then make all other states default False
         if data.get("default", False):
             State.objects.filter(project_id=self.context.get("project_id")).update(default=False)
+
+        if data.get("group", None) == StateGroup.TRIAGE.value:
+            raise serializers.ValidationError("Cannot create triage state")
         return data
 
     class Meta:
diff --git a/apps/api/plane/api/serializers/sticky.py b/apps/api/plane/api/serializers/sticky.py
new file mode 100644
index 0000000000..067fc1b899
--- /dev/null
+++ b/apps/api/plane/api/serializers/sticky.py
@@ -0,0 +1,30 @@
+from rest_framework import serializers
+
+from .base import BaseSerializer
+from plane.db.models import Sticky
+from plane.utils.content_validator import validate_html_content, validate_binary_data
+
+
+class StickySerializer(BaseSerializer):
+    class Meta:
+        model = Sticky
+        fields = "__all__"
+        read_only_fields = ["workspace", "owner"]
+        extra_kwargs = {"name": {"required": False}}
+
+    def validate(self, data):
+        # Validate description content for security
+        if "description_html" in data and data["description_html"]:
+            is_valid, error_msg, sanitized_html = validate_html_content(data["description_html"])
+            if not is_valid:
+                raise serializers.ValidationError({"error": "html content is not valid"})
+            # Update the data with sanitized HTML if available
+            if sanitized_html is not None:
+                data["description_html"] = sanitized_html
+
+        if "description_binary" in data and data["description_binary"]:
+            is_valid, error_msg = validate_binary_data(data["description_binary"])
+            if not is_valid:
+                raise serializers.ValidationError({"description_binary": "Invalid binary data"})
+
+        return data
diff --git a/apps/api/plane/api/urls/__init__.py b/apps/api/plane/api/urls/__init__.py
index d239b67887..593501939c 100644
--- a/apps/api/plane/api/urls/__init__.py
+++ b/apps/api/plane/api/urls/__init__.py
@@ -9,6 +9,7 @@ from .state import urlpatterns as state_patterns
 from .user import urlpatterns as user_patterns
 from .work_item import urlpatterns as work_item_patterns
 from .invite import urlpatterns as invite_patterns
+from .sticky import urlpatterns as sticky_patterns
 
 urlpatterns = [
     *asset_patterns,
@@ -22,4 +23,5 @@ urlpatterns = [
     *user_patterns,
     *work_item_patterns,
     *invite_patterns,
+    *sticky_patterns,
 ]
diff --git a/apps/api/plane/api/urls/invite.py b/apps/api/plane/api/urls/invite.py
index 9d73cb6ef8..e4fddd5c50 100644
--- a/apps/api/plane/api/urls/invite.py
+++ b/apps/api/plane/api/urls/invite.py
@@ -15,4 +15,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/member.py b/apps/api/plane/api/urls/member.py
index a33d8bbe35..83c9dfbe50 100644
--- a/apps/api/plane/api/urls/member.py
+++ b/apps/api/plane/api/urls/member.py
@@ -1,6 +1,10 @@
 from django.urls import path
 
-from plane.api.views import ProjectMemberListCreateAPIEndpoint, ProjectMemberDetailAPIEndpoint, WorkspaceMemberAPIEndpoint
+from plane.api.views import (
+    ProjectMemberListCreateAPIEndpoint,
+    ProjectMemberDetailAPIEndpoint,
+    WorkspaceMemberAPIEndpoint,
+)
 
 urlpatterns = [
     # Project members
diff --git a/apps/api/plane/api/urls/sticky.py b/apps/api/plane/api/urls/sticky.py
new file mode 100644
index 0000000000..0066e77ea4
--- /dev/null
+++ b/apps/api/plane/api/urls/sticky.py
@@ -0,0 +1,12 @@
+from django.urls import path, include
+from rest_framework.routers import DefaultRouter
+
+from plane.api.views import StickyViewSet
+
+
+router = DefaultRouter()
+router.register(r"stickies", StickyViewSet, basename="workspace-stickies")
+
+urlpatterns = [
+    path("workspaces/<str:slug>/", include(router.urls)),
+]
diff --git a/apps/api/plane/api/views/__init__.py b/apps/api/plane/api/views/__init__.py
index 280c23bc23..75b1b17c40 100644
--- a/apps/api/plane/api/views/__init__.py
+++ b/apps/api/plane/api/views/__init__.py
@@ -54,4 +54,6 @@ from .asset import UserAssetEndpoint, UserServerAssetEndpoint, GenericAssetEndpo
 
 from .user import UserEndpoint
 
-from .invite import WorkspaceInvitationsViewset
\ No newline at end of file
+from .invite import WorkspaceInvitationsViewset
+
+from .sticky import StickyViewSet
diff --git a/apps/api/plane/api/views/base.py b/apps/api/plane/api/views/base.py
index f17ae2e328..2e65844301 100644
--- a/apps/api/plane/api/views/base.py
+++ b/apps/api/plane/api/views/base.py
@@ -13,8 +13,6 @@ from django.utils import timezone
 from rest_framework import status
 from rest_framework.permissions import IsAuthenticated
 from rest_framework.response import Response
-from django_filters.rest_framework import DjangoFilterBackend
-from rest_framework.filters import SearchFilter
 from rest_framework.viewsets import ModelViewSet
 from rest_framework.exceptions import APIException
 from rest_framework.generics import GenericAPIView
diff --git a/apps/api/plane/api/views/cycle.py b/apps/api/plane/api/views/cycle.py
index c92b27f591..170c644f33 100644
--- a/apps/api/plane/api/views/cycle.py
+++ b/apps/api/plane/api/views/cycle.py
@@ -195,9 +195,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 +252,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 +298,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 +344,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 +492,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 +505,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 +520,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 +577,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 +597,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 +735,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 +754,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 +785,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 +848,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 +885,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 +919,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 +931,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 +984,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 +1060,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 +1165,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/intake.py b/apps/api/plane/api/views/intake.py
index 7a00fa4315..216b27afc0 100644
--- a/apps/api/plane/api/views/intake.py
+++ b/apps/api/plane/api/views/intake.py
@@ -23,7 +23,7 @@ from plane.api.serializers import (
 )
 from plane.app.permissions import ProjectLitePermission
 from plane.bgtasks.issue_activities_task import issue_activity
-from plane.db.models import Intake, IntakeIssue, Issue, Project, ProjectMember, State
+from plane.db.models import Intake, IntakeIssue, Issue, Project, ProjectMember, State, StateGroup
 from plane.utils.host import base_host
 from .base import BaseAPIView
 from plane.db.models.intake import SourceType
@@ -165,6 +165,20 @@ class IntakeIssueListCreateAPIEndpoint(BaseAPIView):
         ]:
             return Response({"error": "Invalid priority"}, status=status.HTTP_400_BAD_REQUEST)
 
+        # get the triage state
+        triage_state = State.triage_objects.filter(project_id=project_id, workspace__slug=slug).first()
+
+        if not triage_state:
+            triage_state = State.objects.create(
+                name="Triage",
+                group=StateGroup.TRIAGE.value,
+                project_id=project_id,
+                workspace_id=project.workspace_id,
+                color="#4E5355",
+                sequence=65000,
+                default=False,
+            )
+
         # create an issue
         issue = Issue.objects.create(
             name=request.data.get("issue", {}).get("name"),
@@ -172,6 +186,7 @@ class IntakeIssueListCreateAPIEndpoint(BaseAPIView):
             description_html=request.data.get("issue", {}).get("description_html", "<p></p>"),
             priority=request.data.get("issue", {}).get("priority", "none"),
             project_id=project_id,
+            state_id=triage_state.id,
         )
 
         # create an intake issue
@@ -320,7 +335,10 @@ class IntakeIssueDetailAPIEndpoint(BaseAPIView):
 
         # Get issue data
         issue_data = request.data.pop("issue", False)
+        issue_serializer = None
+        intake_serializer = None
 
+        # Validate issue data if provided
         if bool(issue_data):
             issue = Issue.objects.annotate(
                 label_ids=Coalesce(
@@ -344,6 +362,7 @@ class IntakeIssueDetailAPIEndpoint(BaseAPIView):
                     Value([], output_field=ArrayField(UUIDField())),
                 ),
             ).get(pk=issue_id, workspace__slug=slug, project_id=project_id)
+
             # Only allow guests to edit name and description
             if project_member.role <= 5:
                 issue_data = {
@@ -354,71 +373,55 @@ class IntakeIssueDetailAPIEndpoint(BaseAPIView):
 
             issue_serializer = IssueSerializer(issue, data=issue_data, partial=True)
 
-            if issue_serializer.is_valid():
-                current_instance = issue
-                # Log all the updates
-                requested_data = json.dumps(issue_data, cls=DjangoJSONEncoder)
-                if issue is not None:
-                    issue_activity.delay(
-                        type="issue.activity.updated",
-                        requested_data=requested_data,
-                        actor_id=str(request.user.id),
-                        issue_id=str(issue_id),
-                        project_id=str(project_id),
-                        current_instance=json.dumps(
-                            IssueSerializer(current_instance).data,
-                            cls=DjangoJSONEncoder,
-                        ),
-                        epoch=int(timezone.now().timestamp()),
-                        intake=(intake_issue.id),
-                    )
-                issue_serializer.save()
-            else:
+            if not issue_serializer.is_valid():
                 return Response(issue_serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
         # Only project admins and members can edit intake issue attributes
         if project_member.role > 15:
-            serializer = IntakeIssueUpdateSerializer(intake_issue, data=request.data, partial=True)
+            intake_serializer = IntakeIssueUpdateSerializer(intake_issue, data=request.data, partial=True)
+
+            if not intake_serializer.is_valid():
+                return Response(intake_serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+        # Both serializers are valid, now save them
+        if issue_serializer:
+            current_instance = issue
+            # Log all the updates
+            requested_data = json.dumps(issue_data, cls=DjangoJSONEncoder)
+            issue_activity.delay(
+                type="issue.activity.updated",
+                requested_data=requested_data,
+                actor_id=str(request.user.id),
+                issue_id=str(issue_id),
+                project_id=str(project_id),
+                current_instance=json.dumps(
+                    IssueSerializer(current_instance).data,
+                    cls=DjangoJSONEncoder,
+                ),
+                epoch=int(timezone.now().timestamp()),
+                intake=str(intake_issue.id),
+            )
+            issue_serializer.save()
+
+        # Save intake issue (state transition happens in serializer's update method)
+        if intake_serializer:
             current_instance = json.dumps(IntakeIssueSerializer(intake_issue).data, cls=DjangoJSONEncoder)
+            intake_serializer.save()
 
-            if serializer.is_valid():
-                serializer.save()
-                # Update the issue state if the issue is rejected or marked as duplicate
-                if serializer.data["status"] in [-1, 2]:
-                    issue = Issue.objects.get(pk=issue_id, workspace__slug=slug, project_id=project_id)
-                    state = State.objects.filter(group="cancelled", workspace__slug=slug, project_id=project_id).first()
-                    if state is not None:
-                        issue.state = state
-                        issue.save()
-
-                # Update the issue state if it is accepted
-                if serializer.data["status"] in [1]:
-                    issue = Issue.objects.get(pk=issue_id, workspace__slug=slug, project_id=project_id)
-
-                    # Update the issue state only if it is in triage state
-                    if issue.state.is_triage:
-                        # Move to default state
-                        state = State.objects.filter(workspace__slug=slug, project_id=project_id, default=True).first()
-                        if state is not None:
-                            issue.state = state
-                            issue.save()
-
-                # create a activity for status change
-                issue_activity.delay(
-                    type="intake.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=current_instance,
-                    epoch=int(timezone.now().timestamp()),
-                    notification=False,
-                    origin=base_host(request=request, is_app=True),
-                    intake=str(intake_issue.id),
-                )
-                serializer = IntakeIssueSerializer(intake_issue)
-                return Response(serializer.data, status=status.HTTP_200_OK)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+            # create a activity for status change
+            issue_activity.delay(
+                type="intake.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=current_instance,
+                epoch=int(timezone.now().timestamp()),
+                notification=False,
+                origin=base_host(request=request, is_app=True),
+                intake=str(intake_issue.id),
+            )
+            return Response(IntakeIssueSerializer(intake_issue).data, status=status.HTTP_200_OK)
         else:
             return Response(IntakeIssueSerializer(intake_issue).data, status=status.HTTP_200_OK)
 
diff --git a/apps/api/plane/api/views/member.py b/apps/api/plane/api/views/member.py
index 854bc7ae67..a569a59769 100644
--- a/apps/api/plane/api/views/member.py
+++ b/apps/api/plane/api/views/member.py
@@ -154,7 +154,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 7e47c99eb2..a4e0f3fe82 100644
--- a/apps/api/plane/api/views/module.py
+++ b/apps/api/plane/api/views/module.py
@@ -65,9 +65,7 @@ from plane.utils.openapi import (
     ADMIN_ONLY_RESPONSE,
     REQUIRED_FIELDS_RESPONSE,
     MODULE_ISSUE_NOT_FOUND_RESPONSE,
-    ARCHIVED_RESPONSE,
     CANNOT_ARCHIVE_RESPONSE,
-    UNARCHIVED_RESPONSE,
 )
 
 
diff --git a/apps/api/plane/api/views/project.py b/apps/api/plane/api/views/project.py
index 131932bf22..fbf6790516 100644
--- a/apps/api/plane/api/views/project.py
+++ b/apps/api/plane/api/views/project.py
@@ -24,6 +24,7 @@ from plane.db.models import (
     DeployBoard,
     ProjectMember,
     State,
+    DEFAULT_STATES,
     Workspace,
     UserFavorite,
 )
@@ -209,7 +210,9 @@ 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()
 
@@ -232,41 +235,6 @@ class ProjectListCreateAPIEndpoint(BaseAPIView):
                         user_id=serializer.instance.project_lead,
                     )
 
-                # Default states
-                states = [
-                    {
-                        "name": "Backlog",
-                        "color": "#60646C",
-                        "sequence": 15000,
-                        "group": "backlog",
-                        "default": True,
-                    },
-                    {
-                        "name": "Todo",
-                        "color": "#60646C",
-                        "sequence": 25000,
-                        "group": "unstarted",
-                    },
-                    {
-                        "name": "In Progress",
-                        "color": "#F59E0B",
-                        "sequence": 35000,
-                        "group": "started",
-                    },
-                    {
-                        "name": "Done",
-                        "color": "#46A758",
-                        "sequence": 45000,
-                        "group": "completed",
-                    },
-                    {
-                        "name": "Cancelled",
-                        "color": "#9AA4BC",
-                        "sequence": 55000,
-                        "group": "cancelled",
-                    },
-                ]
-
                 State.objects.bulk_create(
                     [
                         State(
@@ -279,7 +247,7 @@ class ProjectListCreateAPIEndpoint(BaseAPIView):
                             default=state.get("default", False),
                             created_by=request.user,
                         )
-                        for state in states
+                        for state in DEFAULT_STATES
                     ]
                 )
 
diff --git a/apps/api/plane/api/views/sticky.py b/apps/api/plane/api/views/sticky.py
new file mode 100644
index 0000000000..a5173edc73
--- /dev/null
+++ b/apps/api/plane/api/views/sticky.py
@@ -0,0 +1,109 @@
+from rest_framework.response import Response
+from rest_framework import status
+
+from plane.api.views.base import BaseViewSet
+from plane.app.permissions import WorkspaceUserPermission
+from plane.db.models import Sticky, Workspace
+from plane.api.serializers import StickySerializer
+
+# OpenAPI imports
+from plane.utils.openapi.decorators import sticky_docs
+
+from drf_spectacular.utils import OpenApiRequest, OpenApiResponse
+from plane.utils.openapi import (
+    STICKY_EXAMPLE,
+    create_paginated_response,
+    DELETED_RESPONSE,
+)
+
+
+class StickyViewSet(BaseViewSet):
+    serializer_class = StickySerializer
+    model = Sticky
+    use_read_replica = True
+    permission_classes = [WorkspaceUserPermission]
+
+    def get_queryset(self):
+        return self.filter_queryset(
+            super()
+            .get_queryset()
+            .filter(workspace__slug=self.kwargs.get("slug"))
+            .filter(owner_id=self.request.user.id)
+            .distinct()
+        )
+
+    @sticky_docs(
+        operation_id="create_sticky",
+        summary="Create a new sticky",
+        description="Create a new sticky in the workspace",
+        request=OpenApiRequest(request=StickySerializer),
+        responses={
+            201: OpenApiResponse(description="Sticky created", response=StickySerializer, examples=[STICKY_EXAMPLE])
+        },
+    )
+    def create(self, request, slug):
+        workspace = Workspace.objects.get(slug=slug)
+        serializer = StickySerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save(workspace_id=workspace.id, owner_id=request.user.id)
+            return Response(serializer.data, status=status.HTTP_201_CREATED)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    @sticky_docs(
+        operation_id="list_stickies",
+        summary="List stickies",
+        description="List all stickies in the workspace",
+        responses={
+            200: create_paginated_response(
+                StickySerializer, "Sticky", "List of stickies", example_name="List of stickies"
+            )
+        },
+    )
+    def list(self, request, slug):
+        query = request.query_params.get("query", False)
+        stickies = self.get_queryset().order_by("-created_at")
+        if query:
+            stickies = stickies.filter(description_stripped__icontains=query)
+
+        return self.paginate(
+            request=request,
+            queryset=(stickies),
+            on_results=lambda stickies: StickySerializer(stickies, many=True).data,
+            default_per_page=20,
+        )
+
+    @sticky_docs(
+        operation_id="retrieve_sticky",
+        summary="Retrieve a sticky",
+        description="Retrieve a sticky by its ID",
+        responses={200: OpenApiResponse(description="Sticky", response=StickySerializer, examples=[STICKY_EXAMPLE])},
+    )
+    def retrieve(self, request, slug, pk):
+        sticky = self.get_object()
+        return Response(StickySerializer(sticky).data)
+
+    @sticky_docs(
+        operation_id="update_sticky",
+        summary="Update a sticky",
+        description="Update a sticky by its ID",
+        request=OpenApiRequest(request=StickySerializer),
+        responses={200: OpenApiResponse(description="Sticky", response=StickySerializer, examples=[STICKY_EXAMPLE])},
+    )
+    def partial_update(self, request, slug, pk):
+        sticky = self.get_object()
+        serializer = StickySerializer(sticky, data=request.data, partial=True)
+        if serializer.is_valid():
+            serializer.save()
+            return Response(serializer.data, status=status.HTTP_200_OK)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    @sticky_docs(
+        operation_id="delete_sticky",
+        summary="Delete a sticky",
+        description="Delete a sticky by its ID",
+        responses={204: DELETED_RESPONSE},
+    )
+    def destroy(self, request, slug, pk):
+        sticky = self.get_object()
+        sticky.delete()
+        return Response(status=status.HTTP_204_NO_CONTENT)
diff --git a/apps/api/plane/app/serializers/__init__.py b/apps/api/plane/app/serializers/__init__.py
index 18be363cda..759f27ed6e 100644
--- a/apps/api/plane/app/serializers/__init__.py
+++ b/apps/api/plane/app/serializers/__init__.py
@@ -37,6 +37,7 @@ from .project import (
     ProjectMemberAdminSerializer,
     ProjectPublicMemberSerializer,
     ProjectMemberRoleSerializer,
+    ProjectMemberPreferenceSerializer,
 )
 from .state import StateSerializer, StateLiteSerializer
 from .view import IssueViewSerializer, ViewIssueListSerializer
diff --git a/apps/api/plane/app/serializers/intake.py b/apps/api/plane/app/serializers/intake.py
index 7bc258220f..bc75a0ce58 100644
--- a/apps/api/plane/app/serializers/intake.py
+++ b/apps/api/plane/app/serializers/intake.py
@@ -7,7 +7,7 @@ from .issue import IssueIntakeSerializer, LabelLiteSerializer, IssueDetailSerial
 from .project import ProjectLiteSerializer
 from .state import StateLiteSerializer
 from .user import UserLiteSerializer
-from plane.db.models import Intake, IntakeIssue, Issue
+from plane.db.models import Intake, IntakeIssue, Issue, StateGroup, State
 
 
 class IntakeSerializer(BaseSerializer):
@@ -36,6 +36,49 @@ class IntakeIssueSerializer(BaseSerializer):
         ]
         read_only_fields = ["project", "workspace"]
 
+    def validate(self, attrs):
+        """
+        Validate that if status is being changed to accepted (1),
+        the project has a default state to transition to.
+        """
+
+        # Check if status is being updated to accepted
+        if attrs.get("status") == 1:
+            intake_issue = self.instance
+            issue = intake_issue.issue
+
+            # Check if issue is in TRIAGE state
+            if issue.state and issue.state.group == StateGroup.TRIAGE.value:
+                # Verify default state exists before allowing the update
+                default_state = State.objects.filter(
+                    workspace=intake_issue.workspace, project=intake_issue.project, default=True
+                ).first()
+
+                if not default_state:
+                    raise serializers.ValidationError(
+                        {"status": "Cannot accept intake issue: No default state found for the project"}
+                    )
+
+        return attrs
+
+    def update(self, instance, validated_data):
+        # Update the intake issue
+        instance = super().update(instance, validated_data)
+
+        # If status is accepted (1), transition the issue state from TRIAGE to default
+        if validated_data.get("status") == 1:
+            issue = instance.issue
+            if issue.state and issue.state.group == StateGroup.TRIAGE.value:
+                # Get the default project state
+                default_state = State.objects.filter(
+                    workspace=instance.workspace, project=instance.project, default=True
+                ).first()
+                if default_state:
+                    issue.state = default_state
+                    issue.save()
+
+        return instance
+
     def to_representation(self, instance):
         # Pass the annotated fields to the Issue instance if they exist
         if hasattr(instance, "label_ids"):
diff --git a/apps/api/plane/app/serializers/issue.py b/apps/api/plane/app/serializers/issue.py
index 583b62fd68..5e3b93ab67 100644
--- a/apps/api/plane/app/serializers/issue.py
+++ b/apps/api/plane/app/serializers/issue.py
@@ -78,7 +78,7 @@ class IssueProjectLiteSerializer(BaseSerializer):
 class IssueCreateSerializer(BaseSerializer):
     # ids
     state_id = serializers.PrimaryKeyRelatedField(
-        source="state", queryset=State.objects.all(), required=False, allow_null=True
+        source="state", queryset=State.all_state_objects.all(), required=False, allow_null=True
     )
     parent_id = serializers.PrimaryKeyRelatedField(
         source="parent", queryset=Issue.objects.all(), required=False, allow_null=True
@@ -117,6 +117,9 @@ class IssueCreateSerializer(BaseSerializer):
         return data
 
     def validate(self, attrs):
+        allow_triage = self.context.get("allow_triage_state", False)
+        state_manager = State.triage_objects if allow_triage else State.objects
+
         if (
             attrs.get("start_date", None) is not None
             and attrs.get("target_date", None) is not None
@@ -160,7 +163,7 @@ class IssueCreateSerializer(BaseSerializer):
         # Check state is from the project only else raise validation error
         if (
             attrs.get("state")
-            and not State.objects.filter(
+            and not state_manager.filter(
                 project_id=self.context.get("project_id"),
                 pk=attrs.get("state").id,
             ).exists()
@@ -364,6 +367,19 @@ class LabelSerializer(BaseSerializer):
         ]
         read_only_fields = ["workspace", "project"]
 
+    def validate_name(self, value):
+        project_id = self.context.get("project_id")
+
+        label = Label.objects.filter(project_id=project_id, name__iexact=value)
+
+        if self.instance:
+            label = label.exclude(id=self.instance.pk)
+
+        if label.exists():
+            raise serializers.ValidationError(detail="LABEL_NAME_ALREADY_EXISTS")
+
+        return value
+
 
 class LabelLiteSerializer(BaseSerializer):
     class Meta:
@@ -782,6 +798,14 @@ class IssueSerializer(DynamicBaseSerializer):
         ]
         read_only_fields = fields
 
+    def validate(self, data):
+        if (
+            data.get("state_id")
+            and not State.objects.filter(project_id=self.context.get("project_id"), pk=data.get("state_id")).exists()
+        ):
+            raise serializers.ValidationError("State is not valid please pass a valid state_id")
+        return data
+
 
 class IssueListDetailSerializer(serializers.Serializer):
     def __init__(self, *args, **kwargs):
diff --git a/apps/api/plane/app/serializers/project.py b/apps/api/plane/app/serializers/project.py
index c709093adc..b8a4136c96 100644
--- a/apps/api/plane/app/serializers/project.py
+++ b/apps/api/plane/app/serializers/project.py
@@ -3,6 +3,7 @@ from rest_framework import serializers
 
 # 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 +13,7 @@ from plane.db.models import (
     ProjectIdentifier,
     DeployBoard,
     ProjectPublicMember,
+    IssueSequence,
 )
 from plane.utils.content_validator import (
     validate_html_content,
@@ -105,6 +107,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 +116,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__"
@@ -142,6 +150,18 @@ class ProjectMemberSerializer(BaseSerializer):
         fields = "__all__"
 
 
+class ProjectMemberPreferenceSerializer(BaseSerializer):
+    class Meta:
+        model = ProjectMember
+        fields = ["preferences", "project_id", "member_id", "workspace_id"]
+
+    def validate_preferences(self, value):
+        preferences = self.instance.preferences
+
+        preferences.update(value)
+        return preferences
+
+
 class ProjectMemberAdminSerializer(BaseSerializer):
     workspace = WorkspaceLiteSerializer(read_only=True)
     project = ProjectLiteSerializer(read_only=True)
diff --git a/apps/api/plane/app/serializers/state.py b/apps/api/plane/app/serializers/state.py
index 29d8cf3024..cb56cfbe99 100644
--- a/apps/api/plane/app/serializers/state.py
+++ b/apps/api/plane/app/serializers/state.py
@@ -2,7 +2,7 @@
 from .base import BaseSerializer
 from rest_framework import serializers
 
-from plane.db.models import State
+from plane.db.models import State, StateGroup
 
 
 class StateSerializer(BaseSerializer):
@@ -24,6 +24,11 @@ class StateSerializer(BaseSerializer):
         ]
         read_only_fields = ["workspace", "project"]
 
+    def validate(self, attrs):
+        if attrs.get("group") == StateGroup.TRIAGE.value:
+            raise serializers.ValidationError("Cannot create triage state")
+        return attrs
+
 
 class StateLiteSerializer(BaseSerializer):
     class Meta:
diff --git a/apps/api/plane/app/serializers/user.py b/apps/api/plane/app/serializers/user.py
index 670667a853..5910178573 100644
--- a/apps/api/plane/app/serializers/user.py
+++ b/apps/api/plane/app/serializers/user.py
@@ -78,6 +78,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/urls/asset.py b/apps/api/plane/app/urls/asset.py
index 93356b04cb..4b7e2b220c 100644
--- a/apps/api/plane/app/urls/asset.py
+++ b/apps/api/plane/app/urls/asset.py
@@ -13,6 +13,7 @@ from plane.app.views import (
     ProjectAssetEndpoint,
     ProjectBulkAssetEndpoint,
     AssetCheckEndpoint,
+    DuplicateAssetEndpoint,
     WorkspaceAssetDownloadEndpoint,
     ProjectAssetDownloadEndpoint,
 )
@@ -91,6 +92,11 @@ urlpatterns = [
         AssetCheckEndpoint.as_view(),
         name="asset-check",
     ),
+    path(
+        "assets/v2/workspaces/<str:slug>/duplicate-assets/<uuid:asset_id>/",
+        DuplicateAssetEndpoint.as_view(),
+        name="duplicate-assets",
+    ),
     path(
         "assets/v2/workspaces/<str:slug>/download/<uuid:asset_id>/",
         WorkspaceAssetDownloadEndpoint.as_view(),
diff --git a/apps/api/plane/app/urls/exporter.py b/apps/api/plane/app/urls/exporter.py
index 0bcb4621b2..56c6bfb51a 100644
--- a/apps/api/plane/app/urls/exporter.py
+++ b/apps/api/plane/app/urls/exporter.py
@@ -9,4 +9,4 @@ urlpatterns = [
         ExportIssuesEndpoint.as_view(),
         name="export-issues",
     ),
-]
\ No newline at end of file
+]
diff --git a/apps/api/plane/app/urls/project.py b/apps/api/plane/app/urls/project.py
index 61d30f9166..a6dd8d8a8a 100644
--- a/apps/api/plane/app/urls/project.py
+++ b/apps/api/plane/app/urls/project.py
@@ -11,9 +11,9 @@ from plane.app.views import (
     ProjectIdentifierEndpoint,
     ProjectFavoritesViewSet,
     UserProjectInvitationsViewset,
-    ProjectPublicCoverImagesEndpoint,
     UserProjectRolesEndpoint,
     ProjectArchiveUnarchiveEndpoint,
+    ProjectMemberPreferenceEndpoint,
 )
 
 
@@ -105,11 +105,6 @@ urlpatterns = [
         ProjectFavoritesViewSet.as_view({"delete": "destroy"}),
         name="project-favorite",
     ),
-    path(
-        "project-covers/",
-        ProjectPublicCoverImagesEndpoint.as_view(),
-        name="project-covers",
-    ),
     path(
         "workspaces/<str:slug>/projects/<uuid:project_id>/project-deploy-boards/",
         DeployBoardViewSet.as_view({"get": "list", "post": "create"}),
@@ -125,4 +120,9 @@ urlpatterns = [
         ProjectArchiveUnarchiveEndpoint.as_view(),
         name="project-archive-unarchive",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/preferences/member/<uuid:member_id>/",
+        ProjectMemberPreferenceEndpoint.as_view(),
+        name="project-member-preference",
+    ),
 ]
diff --git a/apps/api/plane/app/urls/state.py b/apps/api/plane/app/urls/state.py
index 7dcf01d62d..b6135ca959 100644
--- a/apps/api/plane/app/urls/state.py
+++ b/apps/api/plane/app/urls/state.py
@@ -1,7 +1,7 @@
 from django.urls import path
 
 
-from plane.app.views import StateViewSet
+from plane.app.views import StateViewSet, IntakeStateEndpoint
 
 
 urlpatterns = [
@@ -15,6 +15,11 @@ urlpatterns = [
         StateViewSet.as_view({"get": "retrieve", "patch": "partial_update", "delete": "destroy"}),
         name="project-state",
     ),
+    path(
+        "workspaces/<str:slug>/projects/<uuid:project_id>/intake-state/",
+        IntakeStateEndpoint.as_view(),
+        name="intake-state",
+    ),
     path(
         "workspaces/<str:slug>/projects/<uuid:project_id>/states/<uuid:pk>/mark-default/",
         StateViewSet.as_view({"post": "mark_as_default"}),
diff --git a/apps/api/plane/app/urls/user.py b/apps/api/plane/app/urls/user.py
index ef4162c10f..373d4a70d3 100644
--- a/apps/api/plane/app/urls/user.py
+++ b/apps/api/plane/app/urls/user.py
@@ -30,6 +30,16 @@ urlpatterns = [
         UserEndpoint.as_view({"get": "retrieve_user_settings"}),
         name="users",
     ),
+    path(
+        "users/me/email/generate-code/",
+        UserEndpoint.as_view({"post": "generate_email_verification_code"}),
+        name="user-email-verify-code",
+    ),
+    path(
+        "users/me/email/",
+        UserEndpoint.as_view({"patch": "update_email"}),
+        name="user-email-update",
+    ),
     # Profile
     path("users/me/profile/", ProfileEndpoint.as_view(), name="accounts"),
     # End profile
diff --git a/apps/api/plane/app/urls/workspace.py b/apps/api/plane/app/urls/workspace.py
index 016b680884..5f781efa7a 100644
--- a/apps/api/plane/app/urls/workspace.py
+++ b/apps/api/plane/app/urls/workspace.py
@@ -253,9 +253,4 @@ urlpatterns = [
         WorkspaceUserPreferenceViewSet.as_view(),
         name="workspace-user-preference",
     ),
-    path(
-        "workspaces/<str:slug>/sidebar-preferences/<str:key>/",
-        WorkspaceUserPreferenceViewSet.as_view(),
-        name="workspace-user-preference",
-    ),
 ]
diff --git a/apps/api/plane/app/views/__init__.py b/apps/api/plane/app/views/__init__.py
index 9d81754e29..7a0e5cb3a2 100644
--- a/apps/api/plane/app/views/__init__.py
+++ b/apps/api/plane/app/views/__init__.py
@@ -3,7 +3,6 @@ from .project.base import (
     ProjectIdentifierEndpoint,
     ProjectUserViewsEndpoint,
     ProjectFavoritesViewSet,
-    ProjectPublicCoverImagesEndpoint,
     DeployBoardViewSet,
     ProjectArchiveUnarchiveEndpoint,
 )
@@ -18,6 +17,7 @@ from .project.member import (
     ProjectMemberViewSet,
     ProjectMemberUserEndpoint,
     UserProjectRolesEndpoint,
+    ProjectMemberPreferenceEndpoint,
 )
 
 from .user.base import (
@@ -79,7 +79,7 @@ from .workspace.cycle import WorkspaceCyclesEndpoint
 from .workspace.quick_link import QuickLinkViewSet
 from .workspace.sticky import WorkspaceStickyViewSet
 
-from .state.base import StateViewSet
+from .state.base import StateViewSet, IntakeStateEndpoint
 from .view.base import (
     WorkspaceViewViewSet,
     WorkspaceViewIssuesViewSet,
@@ -107,6 +107,7 @@ from .asset.v2 import (
     ProjectAssetEndpoint,
     ProjectBulkAssetEndpoint,
     AssetCheckEndpoint,
+    DuplicateAssetEndpoint,
     WorkspaceAssetDownloadEndpoint,
     ProjectAssetDownloadEndpoint,
 )
diff --git a/apps/api/plane/app/views/asset/v2.py b/apps/api/plane/app/views/asset/v2.py
index 610c5335f9..4313fe3fff 100644
--- a/apps/api/plane/app/views/asset/v2.py
+++ b/apps/api/plane/app/views/asset/v2.py
@@ -19,6 +19,7 @@ from plane.settings.storage import S3Storage
 from plane.app.permissions import allow_permission, ROLE
 from plane.utils.cache import invalidate_cache_directly
 from plane.bgtasks.storage_metadata_task import get_asset_object_metadata
+from plane.throttles.asset import AssetRateThrottle
 
 
 class UserAssetsV2Endpoint(BaseAPIView):
@@ -692,6 +693,89 @@ class AssetCheckEndpoint(BaseAPIView):
         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):
+        # Workspace Logo
+        if entity_type == FileAsset.EntityTypeContext.WORKSPACE_LOGO:
+            return {"workspace_id": entity_id}
+
+        # Project Cover
+        if entity_type == FileAsset.EntityTypeContext.PROJECT_COVER:
+            return {"project_id": entity_id}
+
+        # User Avatar and Cover
+        if entity_type in [
+            FileAsset.EntityTypeContext.USER_AVATAR,
+            FileAsset.EntityTypeContext.USER_COVER,
+        ]:
+            return {"user_id": entity_id}
+
+        # Issue Attachment and Description
+        if entity_type in [
+            FileAsset.EntityTypeContext.ISSUE_ATTACHMENT,
+            FileAsset.EntityTypeContext.ISSUE_DESCRIPTION,
+        ]:
+            return {"issue_id": entity_id}
+
+        # Page Description
+        if entity_type == FileAsset.EntityTypeContext.PAGE_DESCRIPTION:
+            return {"page_id": entity_id}
+
+        # Comment Description
+        if entity_type == FileAsset.EntityTypeContext.COMMENT_DESCRIPTION:
+            return {"comment_id": entity_id}
+
+        return {}
+
+    @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:
+            return Response(
+                {"error": "Invalid entity type or entity id"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        workspace = Workspace.objects.get(slug=slug)
+        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)
+
+        storage = S3Storage(request=request)
+        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)
+
+        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"),
+                "type": original_asset.attributes.get("type"),
+                "size": original_asset.attributes.get("size"),
+            },
+            asset=destination_key,
+            size=original_asset.size,
+            workspace=workspace,
+            created_by_id=request.user.id,
+            entity_type=entity_type,
+            project_id=project_id if project_id else None,
+            storage_metadata=original_asset.storage_metadata,
+            **self.get_entity_id_field(entity_type=entity_type, entity_id=entity_id),
+        )
+        storage.copy_object(original_asset.asset, destination_key)
+        # 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)
+
+
 class WorkspaceAssetDownloadEndpoint(BaseAPIView):
     """Endpoint to generate a download link for an asset with content-disposition=attachment."""
 
diff --git a/apps/api/plane/app/views/cycle/base.py b/apps/api/plane/app/views/cycle/base.py
index 712d71754e..d61f1587b3 100644
--- a/apps/api/plane/app/views/cycle/base.py
+++ b/apps/api/plane/app/views/cycle/base.py
@@ -97,9 +97,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 +148,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 +167,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 +198,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 +265,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 +308,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 +324,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 +338,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 +452,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 +474,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 +525,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 +629,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 +654,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 +702,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 +762,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 +784,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 +867,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 +902,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 +1004,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/intake/base.py b/apps/api/plane/app/views/intake/base.py
index cc63791319..7dd7828cbd 100644
--- a/apps/api/plane/app/views/intake/base.py
+++ b/apps/api/plane/app/views/intake/base.py
@@ -22,6 +22,7 @@ from plane.db.models import (
     IntakeIssue,
     Issue,
     State,
+    StateGroup,
     IssueLink,
     FileAsset,
     Project,
@@ -228,14 +229,30 @@ class IntakeIssueViewSet(BaseViewSet):
         ]:
             return Response({"error": "Invalid priority"}, status=status.HTTP_400_BAD_REQUEST)
 
-        # create an issue
         project = Project.objects.get(pk=project_id)
+
+        # get the triage state
+        triage_state = State.triage_objects.filter(project_id=project_id, workspace__slug=slug).first()
+        if not triage_state:
+            triage_state = State.objects.create(
+                name="Triage",
+                group=StateGroup.TRIAGE.value,
+                project_id=project_id,
+                workspace_id=project.workspace_id,
+                color="#4E5355",
+                sequence=65000,
+                default=False,
+            )
+        request.data["issue"]["state_id"] = triage_state.id
+
+        # create an issue
         serializer = IssueCreateSerializer(
             data=request.data.get("issue"),
             context={
                 "project_id": project_id,
                 "workspace_id": project.workspace_id,
                 "default_assignee_id": project.default_assignee_id,
+                "allow_triage_state": True,
             },
         )
         if serializer.is_valid():
@@ -305,6 +322,9 @@ class IntakeIssueViewSet(BaseViewSet):
 
     @allow_permission(allowed_roles=[ROLE.ADMIN], creator=True, model=Issue)
     def partial_update(self, request, slug, project_id, pk):
+        skip_activity = request.data.pop("skip_activity", False)
+        is_description_update = request.data.get("description_html") is not None
+
         intake_id = Intake.objects.filter(workspace__slug=slug, project_id=project_id).first()
         intake_issue = IntakeIssue.objects.get(
             issue_id=pk,
@@ -344,6 +364,12 @@ class IntakeIssueViewSet(BaseViewSet):
 
         # Get issue data
         issue_data = request.data.pop("issue", False)
+        issue_serializer = None
+        issue = None
+        issue_current_instance = None
+        issue_requested_data = None
+
+        # Validate issue data if provided
         if bool(issue_data):
             issue = Issue.objects.annotate(
                 label_ids=Coalesce(
@@ -371,23 +397,43 @@ class IntakeIssueViewSet(BaseViewSet):
                     "description": issue_data.get("description", issue.description),
                 }
 
-            current_instance = json.dumps(IssueDetailSerializer(issue).data, cls=DjangoJSONEncoder)
+            issue_current_instance = json.dumps(IssueDetailSerializer(issue).data, cls=DjangoJSONEncoder)
+            issue_requested_data = json.dumps(issue_data, cls=DjangoJSONEncoder)
 
             issue_serializer = IssueCreateSerializer(
-                issue, data=issue_data, partial=True, context={"project_id": project_id}
+                issue, data=issue_data, partial=True, context={"project_id": project_id, "allow_triage_state": True}
             )
 
-            if issue_serializer.is_valid():
-                # Log all the updates
-                requested_data = json.dumps(issue_data, cls=DjangoJSONEncoder)
+            if not issue_serializer.is_valid():
+                return Response(issue_serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+        # Validate intake issue data if user has permission
+        intake_serializer = None
+        intake_current_instance = None
+
+        if (project_member and project_member.role > ROLE.MEMBER.value) or is_workspace_admin:
+            intake_current_instance = json.dumps(IntakeIssueSerializer(intake_issue).data, cls=DjangoJSONEncoder)
+            intake_serializer = IntakeIssueSerializer(intake_issue, data=request.data, partial=True)
+
+            if not intake_serializer.is_valid():
+                return Response(intake_serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+        # Both serializers are valid, now save them
+        if issue_serializer:
+            issue_serializer.save()
+
+            # Check if the update is a migration description update
+            is_migration_description_update = skip_activity and is_description_update
+            # Log all the updates
+            if not is_migration_description_update:
                 if issue is not None:
                     issue_activity.delay(
                         type="issue.activity.updated",
-                        requested_data=requested_data,
+                        requested_data=issue_requested_data,
                         actor_id=str(request.user.id),
                         issue_id=str(issue.id),
                         project_id=str(project_id),
-                        current_instance=current_instance,
+                        current_instance=issue_current_instance,
                         epoch=int(timezone.now().timestamp()),
                         notification=True,
                         origin=base_host(request=request, is_app=True),
@@ -395,95 +441,55 @@ class IntakeIssueViewSet(BaseViewSet):
                     )
                     # updated issue description version
                     issue_description_version_task.delay(
-                        updated_issue=current_instance,
+                        updated_issue=issue_current_instance,
                         issue_id=str(pk),
                         user_id=request.user.id,
                     )
-                issue_serializer.save()
-            else:
-                return Response(issue_serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
-        # Only project admins can edit intake issue attributes
-        if (project_member and project_member.role > ROLE.MEMBER.value) or is_workspace_admin:
-            serializer = IntakeIssueSerializer(intake_issue, data=request.data, partial=True)
-            current_instance = json.dumps(IntakeIssueSerializer(intake_issue).data, cls=DjangoJSONEncoder)
-            if serializer.is_valid():
-                serializer.save()
-                # Update the issue state if the issue is rejected or marked as duplicate
-                if serializer.data["status"] in [-1, 2]:
-                    issue = Issue.objects.get(
-                        pk=intake_issue.issue_id,
-                        workspace__slug=slug,
-                        project_id=project_id,
-                    )
-                    state = State.objects.filter(group="cancelled", workspace__slug=slug, project_id=project_id).first()
-                    if state is not None:
-                        issue.state = state
-                        issue.save()
+        if intake_serializer:
+            intake_serializer.save()
+            # create a activity for status change
+            issue_activity.delay(
+                type="intake.activity.created",
+                requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
+                actor_id=str(request.user.id),
+                issue_id=str(pk),
+                project_id=str(project_id),
+                current_instance=intake_current_instance,
+                epoch=int(timezone.now().timestamp()),
+                notification=False,
+                origin=base_host(request=request, is_app=True),
+                intake=str(intake_issue.id),
+            )
 
-                # Update the issue state if it is accepted
-                if serializer.data["status"] in [1]:
-                    issue = Issue.objects.get(
-                        pk=intake_issue.issue_id,
-                        workspace__slug=slug,
-                        project_id=project_id,
-                    )
-
-                    # Update the issue state only if it is in triage state
-                    if issue.state.is_triage:
-                        # Move to default state
-                        state = State.objects.filter(workspace__slug=slug, project_id=project_id, default=True).first()
-                        if state is not None:
-                            issue.state = state
-                            issue.save()
-                # create a activity for status change
-                issue_activity.delay(
-                    type="intake.activity.created",
-                    requested_data=json.dumps(request.data, cls=DjangoJSONEncoder),
-                    actor_id=str(request.user.id),
-                    issue_id=str(pk),
-                    project_id=str(project_id),
-                    current_instance=current_instance,
-                    epoch=int(timezone.now().timestamp()),
-                    notification=False,
-                    origin=base_host(request=request, is_app=True),
-                    intake=(intake_issue.id),
-                )
-
-                intake_issue = (
-                    IntakeIssue.objects.select_related("issue")
-                    .prefetch_related("issue__labels", "issue__assignees")
-                    .annotate(
-                        label_ids=Coalesce(
-                            ArrayAgg(
-                                "issue__labels__id",
-                                distinct=True,
-                                filter=Q(
-                                    ~Q(issue__labels__id__isnull=True) & Q(issue__label_issue__deleted_at__isnull=True)
-                                ),
-                            ),
-                            Value([], output_field=ArrayField(UUIDField())),
+        # Fetch and return the updated intake issue
+        intake_issue = (
+            IntakeIssue.objects.select_related("issue")
+            .prefetch_related("issue__labels", "issue__assignees")
+            .annotate(
+                label_ids=Coalesce(
+                    ArrayAgg(
+                        "issue__labels__id",
+                        distinct=True,
+                        filter=Q(~Q(issue__labels__id__isnull=True) & Q(issue__label_issue__deleted_at__isnull=True)),
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+                assignee_ids=Coalesce(
+                    ArrayAgg(
+                        "issue__assignees__id",
+                        distinct=True,
+                        filter=Q(
+                            ~Q(issue__assignees__id__isnull=True) & Q(issue__issue_assignee__deleted_at__isnull=True)
                         ),
-                        assignee_ids=Coalesce(
-                            ArrayAgg(
-                                "issue__assignees__id",
-                                distinct=True,
-                                filter=Q(
-                                    ~Q(issue__assignees__id__isnull=True)
-                                    & Q(issue__issue_assignee__deleted_at__isnull=True)
-                                ),
-                            ),
-                            Value([], output_field=ArrayField(UUIDField())),
-                        ),
-                    )
-                    .get(intake_id=intake_id.id, issue_id=pk, project_id=project_id)
-                )
-                serializer = IntakeIssueDetailSerializer(intake_issue).data
-                return Response(serializer, status=status.HTTP_200_OK)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
-        else:
-            serializer = IntakeIssueDetailSerializer(intake_issue).data
-            return Response(serializer, status=status.HTTP_200_OK)
+                    ),
+                    Value([], output_field=ArrayField(UUIDField())),
+                ),
+            )
+            .get(intake_id=intake_id.id, issue_id=pk, project_id=project_id)
+        )
+        serializer = IntakeIssueDetailSerializer(intake_issue).data
+        return Response(serializer, status=status.HTTP_200_OK)
 
     @allow_permission(allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], creator=True, model=Issue)
     def retrieve(self, request, slug, project_id, pk):
diff --git a/apps/api/plane/app/views/issue/base.py b/apps/api/plane/app/views/issue/base.py
index c24db61698..7a5e7dddf6 100644
--- a/apps/api/plane/app/views/issue/base.py
+++ b/apps/api/plane/app/views/issue/base.py
@@ -611,6 +611,10 @@ class IssueViewSet(BaseViewSet):
     def partial_update(self, request, slug, project_id, pk=None):
         queryset = self.get_queryset()
         queryset = self.apply_annotations(queryset)
+
+        skip_activity = request.data.pop("skip_activity", False)
+        is_description_update = request.data.get("description_html") is not None
+
         issue = (
             queryset.annotate(
                 label_ids=Coalesce(
@@ -659,32 +663,36 @@ class IssueViewSet(BaseViewSet):
         serializer = IssueCreateSerializer(issue, data=request.data, partial=True, context={"project_id": project_id})
         if serializer.is_valid():
             serializer.save()
-            issue_activity.delay(
-                type="issue.activity.updated",
-                requested_data=requested_data,
-                actor_id=str(request.user.id),
-                issue_id=str(pk),
-                project_id=str(project_id),
-                current_instance=current_instance,
-                epoch=int(timezone.now().timestamp()),
-                notification=True,
-                origin=base_host(request=request, is_app=True),
-            )
-            model_activity.delay(
-                model_name="issue",
-                model_id=str(serializer.data.get("id", None)),
-                requested_data=request.data,
-                current_instance=current_instance,
-                actor_id=request.user.id,
-                slug=slug,
-                origin=base_host(request=request, is_app=True),
-            )
-            # updated issue description version
-            issue_description_version_task.delay(
-                updated_issue=current_instance,
-                issue_id=str(serializer.data.get("id", None)),
-                user_id=request.user.id,
-            )
+            # Check if the update is a migration description update
+            is_migration_description_update = skip_activity and is_description_update
+            # Log all the updates
+            if not is_migration_description_update:
+                issue_activity.delay(
+                    type="issue.activity.updated",
+                    requested_data=requested_data,
+                    actor_id=str(request.user.id),
+                    issue_id=str(pk),
+                    project_id=str(project_id),
+                    current_instance=current_instance,
+                    epoch=int(timezone.now().timestamp()),
+                    notification=True,
+                    origin=base_host(request=request, is_app=True),
+                )
+                model_activity.delay(
+                    model_name="issue",
+                    model_id=str(serializer.data.get("id", None)),
+                    requested_data=request.data,
+                    current_instance=current_instance,
+                    actor_id=request.user.id,
+                    slug=slug,
+                    origin=base_host(request=request, is_app=True),
+                )
+                # updated issue description version
+                issue_description_version_task.delay(
+                    updated_issue=current_instance,
+                    issue_id=str(serializer.data.get("id", None)),
+                    user_id=request.user.id,
+                )
             return Response(status=status.HTTP_204_NO_CONTENT)
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
diff --git a/apps/api/plane/app/views/issue/label.py b/apps/api/plane/app/views/issue/label.py
index 85e79c0114..6e46b5abb0 100644
--- a/apps/api/plane/app/views/issue/label.py
+++ b/apps/api/plane/app/views/issue/label.py
@@ -39,7 +39,7 @@ class LabelViewSet(BaseViewSet):
     @allow_permission([ROLE.ADMIN])
     def create(self, request, slug, project_id):
         try:
-            serializer = LabelSerializer(data=request.data)
+            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)
@@ -64,8 +64,18 @@ class LabelViewSet(BaseViewSet):
                 {"error": "Label with the same name already exists in the project"},
                 status=status.HTTP_400_BAD_REQUEST,
             )
-        # call the parent method to perform the update
-        return super().partial_update(request, *args, **kwargs)
+
+        serializer = LabelSerializer(
+            instance=self.get_object(),
+            data=request.data,
+            context={"project_id": kwargs["project_id"]},
+            partial=True,
+        )
+
+        if serializer.is_valid():
+            serializer.save()
+            return Response(serializer.data)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     @invalidate_cache(path="/api/workspaces/:slug/labels/", url_params=True, user=False)
     @allow_permission([ROLE.ADMIN])
@@ -77,6 +87,7 @@ class BulkCreateIssueLabelsEndpoint(BaseAPIView):
     @allow_permission([ROLE.ADMIN])
     def post(self, request, slug, project_id):
         label_data = request.data.get("label_data", [])
+
         project = Project.objects.get(pk=project_id)
 
         labels = Label.objects.bulk_create(
diff --git a/apps/api/plane/app/views/page/base.py b/apps/api/plane/app/views/page/base.py
index b8946d22a6..d3ad49b5fd 100644
--- a/apps/api/plane/app/views/page/base.py
+++ b/apps/api/plane/app/views/page/base.py
@@ -149,14 +149,24 @@ class PageViewSet(BaseViewSet):
 
     def partial_update(self, request, slug, project_id, page_id):
         try:
-            page = Page.objects.get(pk=page_id, workspace__slug=slug, projects__id=project_id)
+            page = Page.objects.get(
+                pk=page_id,
+                workspace__slug=slug,
+                projects__id=project_id,
+                project_pages__deleted_at__isnull=True,
+            )
 
             if page.is_locked:
                 return Response({"error": "Page is locked"}, status=status.HTTP_400_BAD_REQUEST)
 
             parent = request.data.get("parent", None)
             if parent:
-                _ = Page.objects.get(pk=parent, workspace__slug=slug, projects__id=project_id)
+                _ = Page.objects.get(
+                    pk=parent,
+                    workspace__slug=slug,
+                    projects__id=project_id,
+                    project_pages__deleted_at__isnull=True,
+                )
 
             # Only update access if the page owner is the requesting  user
             if page.access != request.data.get("access", page.access) and page.owned_by_id != request.user.id:
@@ -230,14 +240,24 @@ class PageViewSet(BaseViewSet):
             return Response(data, status=status.HTTP_200_OK)
 
     def lock(self, request, slug, project_id, page_id):
-        page = Page.objects.filter(pk=page_id, workspace__slug=slug, projects__id=project_id).first()
+        page = Page.objects.get(
+            pk=page_id,
+            workspace__slug=slug,
+            projects__id=project_id,
+            project_pages__deleted_at__isnull=True,
+        )
 
         page.is_locked = True
         page.save()
         return Response(status=status.HTTP_204_NO_CONTENT)
 
     def unlock(self, request, slug, project_id, page_id):
-        page = Page.objects.filter(pk=page_id, workspace__slug=slug, projects__id=project_id).first()
+        page = Page.objects.get(
+            pk=page_id,
+            workspace__slug=slug,
+            projects__id=project_id,
+            project_pages__deleted_at__isnull=True,
+        )
 
         page.is_locked = False
         page.save()
@@ -246,7 +266,12 @@ class PageViewSet(BaseViewSet):
 
     def access(self, request, slug, project_id, page_id):
         access = request.data.get("access", 0)
-        page = Page.objects.filter(pk=page_id, workspace__slug=slug, projects__id=project_id).first()
+        page = Page.objects.get(
+            pk=page_id,
+            workspace__slug=slug,
+            projects__id=project_id,
+            project_pages__deleted_at__isnull=True,
+        )
 
         # Only update access if the page owner is the requesting user
         if page.access != request.data.get("access", page.access) and page.owned_by_id != request.user.id:
@@ -277,7 +302,12 @@ class PageViewSet(BaseViewSet):
         return Response(pages, status=status.HTTP_200_OK)
 
     def archive(self, request, slug, project_id, page_id):
-        page = Page.objects.get(pk=page_id, workspace__slug=slug, projects__id=project_id)
+        page = Page.objects.get(
+            pk=page_id,
+            workspace__slug=slug,
+            projects__id=project_id,
+            project_pages__deleted_at__isnull=True,
+        )
 
         # only the owner or admin can archive the page
         if (
@@ -303,7 +333,12 @@ class PageViewSet(BaseViewSet):
         return Response({"archived_at": str(datetime.now())}, status=status.HTTP_200_OK)
 
     def unarchive(self, request, slug, project_id, page_id):
-        page = Page.objects.get(pk=page_id, workspace__slug=slug, projects__id=project_id)
+        page = Page.objects.get(
+            pk=page_id,
+            workspace__slug=slug,
+            projects__id=project_id,
+            project_pages__deleted_at__isnull=True,
+        )
 
         # only the owner or admin can un archive the page
         if (
@@ -327,7 +362,12 @@ class PageViewSet(BaseViewSet):
         return Response(status=status.HTTP_204_NO_CONTENT)
 
     def destroy(self, request, slug, project_id, page_id):
-        page = Page.objects.get(pk=page_id, workspace__slug=slug, projects__id=project_id)
+        page = Page.objects.get(
+            pk=page_id,
+            workspace__slug=slug,
+            projects__id=project_id,
+            project_pages__deleted_at__isnull=True,
+        )
 
         if page.archived_at is None:
             return Response(
@@ -350,7 +390,12 @@ class PageViewSet(BaseViewSet):
             )
 
         # remove parent from all the children
-        _ = Page.objects.filter(parent_id=page_id, projects__id=project_id, workspace__slug=slug).update(parent=None)
+        _ = Page.objects.filter(
+            parent_id=page_id,
+            projects__id=project_id,
+            workspace__slug=slug,
+            project_pages__deleted_at__isnull=True,
+        ).update(parent=None)
 
         page.delete()
         # Delete the user favorite page
@@ -450,13 +495,13 @@ class PagesDescriptionViewSet(BaseViewSet):
     permission_classes = [ProjectPagePermission]
 
     def retrieve(self, request, slug, project_id, page_id):
-        page = (
-            Page.objects.filter(pk=page_id, workspace__slug=slug, projects__id=project_id)
-            .filter(Q(owned_by=self.request.user) | Q(access=0))
-            .first()
+        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 None:
-            return Response({"error": "Page not found"}, status=404)
         binary_data = page.description_binary
 
         def stream_data():
@@ -470,15 +515,14 @@ class PagesDescriptionViewSet(BaseViewSet):
         return response
 
     def partial_update(self, request, slug, project_id, page_id):
-        page = (
-            Page.objects.filter(pk=page_id, workspace__slug=slug, projects__id=project_id)
-            .filter(Q(owned_by=self.request.user) | Q(access=0))
-            .first()
+        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 None:
-            return Response({"error": "Page not found"}, status=404)
-
         if page.is_locked:
             return Response(
                 {
@@ -529,7 +573,12 @@ class PageDuplicateEndpoint(BaseAPIView):
     permission_classes = [ProjectPagePermission]
 
     def post(self, request, slug, project_id, page_id):
-        page = Page.objects.filter(pk=page_id, workspace__slug=slug, projects__id=project_id).first()
+        page = Page.objects.get(
+            pk=page_id,
+            workspace__slug=slug,
+            projects__id=project_id,
+            project_pages__deleted_at__isnull=True,
+        )
 
         # check for permission
         if page.access == Page.PRIVATE_ACCESS and page.owned_by_id != request.user.id:
diff --git a/apps/api/plane/app/views/project/base.py b/apps/api/plane/app/views/project/base.py
index 84b2a5629a..34e13d472d 100644
--- a/apps/api/plane/app/views/project/base.py
+++ b/apps/api/plane/app/views/project/base.py
@@ -1,43 +1,40 @@
 # Python imports
-import boto3
-from django.conf import settings
-from django.utils import timezone
 import json
 
+
 # Django imports
-from django.db.models import Exists, F, OuterRef, Prefetch, Q, Subquery
 from django.core.serializers.json import DjangoJSONEncoder
+from django.db.models import Exists, F, OuterRef, Prefetch, Q, Subquery
+from django.utils import timezone
 
 # Third Party imports
-from rest_framework.response import Response
 from rest_framework import status
-from rest_framework.permissions import AllowAny
+from rest_framework.response import Response
 
 # Module imports
-from plane.app.views.base import BaseViewSet, BaseAPIView
+from plane.app.permissions import ROLE, ProjectMemberPermission, allow_permission
 from plane.app.serializers import (
-    ProjectSerializer,
-    ProjectListSerializer,
     DeployBoardSerializer,
+    ProjectListSerializer,
+    ProjectSerializer,
 )
-
-from plane.app.permissions import ProjectMemberPermission, allow_permission, ROLE
+from plane.app.views.base import BaseAPIView, BaseViewSet
+from plane.bgtasks.recent_visited_task import recent_visited_task
+from plane.bgtasks.webhook_task import model_activity, webhook_activity
 from plane.db.models import (
     UserFavorite,
-    Intake,
     DeployBoard,
+    Intake,
     IssueUserProperty,
     Project,
     ProjectIdentifier,
     ProjectMember,
+    ProjectNetwork,
     State,
+    DEFAULT_STATES,
     Workspace,
     WorkspaceMember,
 )
-from plane.utils.cache import cache_response
-from plane.bgtasks.webhook_task import model_activity, webhook_activity
-from plane.bgtasks.recent_visited_task import recent_visited_task
-from plane.utils.exception_logger import log_exception
 from plane.utils.host import base_host
 
 
@@ -209,19 +206,25 @@ class ProjectViewSet(BaseViewSet):
 
     @allow_permission(allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
     def retrieve(self, request, slug, pk):
-        project = (
-            self.get_queryset()
-            .filter(
-                project_projectmember__member=self.request.user,
-                project_projectmember__is_active=True,
-            )
-            .filter(archived_at__isnull=True)
-            .filter(pk=pk)
-        ).first()
+        project = self.get_queryset().filter(archived_at__isnull=True).filter(pk=pk).first()
 
         if project is None:
             return Response({"error": "Project does not exist"}, status=status.HTTP_404_NOT_FOUND)
 
+        member_ids = [str(project_member.member_id) for project_member in project.members_list]
+
+        if str(request.user.id) not in member_ids:
+            if project.network == ProjectNetwork.SECRET.value:
+                return Response(
+                    {"error": "You do not have permission"},
+                    status=status.HTTP_403_FORBIDDEN,
+                )
+            else:
+                return Response(
+                    {"error": "You are not a member of this project"},
+                    status=status.HTTP_409_CONFLICT,
+                )
+
         recent_visited_task.delay(
             slug=slug,
             project_id=pk,
@@ -264,41 +267,6 @@ class ProjectViewSet(BaseViewSet):
                     user_id=serializer.data["project_lead"],
                 )
 
-            # Default states
-            states = [
-                {
-                    "name": "Backlog",
-                    "color": "#60646C",
-                    "sequence": 15000,
-                    "group": "backlog",
-                    "default": True,
-                },
-                {
-                    "name": "Todo",
-                    "color": "#60646C",
-                    "sequence": 25000,
-                    "group": "unstarted",
-                },
-                {
-                    "name": "In Progress",
-                    "color": "#F59E0B",
-                    "sequence": 35000,
-                    "group": "started",
-                },
-                {
-                    "name": "Done",
-                    "color": "#46A758",
-                    "sequence": 45000,
-                    "group": "completed",
-                },
-                {
-                    "name": "Cancelled",
-                    "color": "#9AA4BC",
-                    "sequence": 55000,
-                    "group": "cancelled",
-                },
-            ]
-
             State.objects.bulk_create(
                 [
                     State(
@@ -311,7 +279,7 @@ class ProjectViewSet(BaseViewSet):
                         default=state.get("default", False),
                         created_by=request.user,
                     )
-                    for state in states
+                    for state in DEFAULT_STATES
                 ]
             )
 
@@ -553,49 +521,6 @@ class ProjectFavoritesViewSet(BaseViewSet):
         return Response(status=status.HTTP_204_NO_CONTENT)
 
 
-class ProjectPublicCoverImagesEndpoint(BaseAPIView):
-    permission_classes = [AllowAny]
-
-    # Cache the below api for 24 hours
-    @cache_response(60 * 60 * 24, user=False)
-    def get(self, request):
-        files = []
-        if settings.USE_MINIO:
-            s3 = boto3.client(
-                "s3",
-                endpoint_url=settings.AWS_S3_ENDPOINT_URL,
-                aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
-                aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
-            )
-        else:
-            s3 = boto3.client(
-                "s3",
-                aws_access_key_id=settings.AWS_ACCESS_KEY_ID,
-                aws_secret_access_key=settings.AWS_SECRET_ACCESS_KEY,
-            )
-        params = {
-            "Bucket": settings.AWS_STORAGE_BUCKET_NAME,
-            "Prefix": "static/project-cover/",
-        }
-
-        try:
-            response = s3.list_objects_v2(**params)
-            # Extracting file keys from the response
-            if "Contents" in response:
-                for content in response["Contents"]:
-                    if not content["Key"].endswith(
-                        "/"
-                    ):  # This line ensures we're only getting files, not "sub-folders"
-                        files.append(
-                            f"https://{settings.AWS_STORAGE_BUCKET_NAME}.s3.{settings.AWS_REGION}.amazonaws.com/{content['Key']}"
-                        )
-
-            return Response(files, status=status.HTTP_200_OK)
-        except Exception as e:
-            log_exception(e)
-            return Response([], status=status.HTTP_200_OK)
-
-
 class DeployBoardViewSet(BaseViewSet):
     permission_classes = [ProjectMemberPermission]
     serializer_class = DeployBoardSerializer
diff --git a/apps/api/plane/app/views/project/member.py b/apps/api/plane/app/views/project/member.py
index 0fc19adebb..3ab7061e15 100644
--- a/apps/api/plane/app/views/project/member.py
+++ b/apps/api/plane/app/views/project/member.py
@@ -8,6 +8,7 @@ from plane.app.serializers import (
     ProjectMemberSerializer,
     ProjectMemberAdminSerializer,
     ProjectMemberRoleSerializer,
+    ProjectMemberPreferenceSerializer,
 )
 
 from plane.app.permissions import WorkspaceUserPermission
@@ -163,6 +164,40 @@ class ProjectMemberViewSet(BaseViewSet):
         serializer = ProjectMemberRoleSerializer(project_members, fields=("id", "member", "role"), many=True)
         return Response(serializer.data, status=status.HTTP_200_OK)
 
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
+    def retrieve(self, request, slug, project_id, pk):
+        requesting_project_member = ProjectMember.objects.get(
+            project_id=project_id,
+            workspace__slug=slug,
+            member=request.user,
+            is_active=True,
+        )
+
+        project_member = (
+            ProjectMember.objects.filter(
+                pk=pk,
+                project_id=project_id,
+                workspace__slug=slug,
+                member__is_bot=False,
+                is_active=True,
+            )
+            .select_related("project", "member", "workspace")
+            .first()
+        )
+
+        if not project_member:
+            return Response(
+                {"error": "Project member not found"},
+                status=status.HTTP_404_NOT_FOUND,
+            )
+
+        if requesting_project_member.role > ROLE.GUEST.value:
+            serializer = ProjectMemberAdminSerializer(project_member)
+        else:
+            serializer = ProjectMemberRoleSerializer(project_member, fields=("id", "member", "role"))
+
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
     def partial_update(self, request, slug, project_id, pk):
         project_member = ProjectMember.objects.get(pk=pk, workspace__slug=slug, project_id=project_id, is_active=True)
@@ -300,3 +335,32 @@ class UserProjectRolesEndpoint(BaseAPIView):
 
         project_members = {str(member["project_id"]): member["role"] for member in project_members}
         return Response(project_members, status=status.HTTP_200_OK)
+
+
+class ProjectMemberPreferenceEndpoint(BaseAPIView):
+    def get_queryset(self, slug, project_id, member_id):
+        return ProjectMember.objects.get(
+            project_id=project_id,
+            member_id=member_id,
+            workspace__slug=slug,
+        )
+
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
+    def patch(self, request, slug, project_id, member_id):
+        project_member = self.get_queryset(slug, project_id, member_id)
+
+        serializer = ProjectMemberPreferenceSerializer(project_member, {"preferences": request.data}, partial=True)
+
+        if serializer.is_valid():
+            serializer.save()
+
+            return Response({"preferences": serializer.data["preferences"]}, status=status.HTTP_200_OK)
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
+    def get(self, request, slug, project_id, member_id):
+        project_member = self.get_queryset(slug, project_id, member_id)
+
+        serializer = ProjectMemberPreferenceSerializer(project_member)
+
+        return Response(serializer.data, status=status.HTTP_200_OK)
diff --git a/apps/api/plane/app/views/search/base.py b/apps/api/plane/app/views/search/base.py
index 5309bff554..f1e6926532 100644
--- a/apps/api/plane/app/views/search/base.py
+++ b/apps/api/plane/app/views/search/base.py
@@ -129,9 +129,7 @@ class GlobalSearchEndpoint(BaseAPIView):
         return (
             cycles.order_by("-created_at")
             .distinct()
-            .values(
-                "name", "id", "project_id", "project__identifier", "workspace__slug"
-            )
+            .values("name", "id", "project_id", "project__identifier", "workspace__slug")
         )
 
     def filter_modules(self, query, slug, project_id, workspace_search):
@@ -155,9 +153,7 @@ class GlobalSearchEndpoint(BaseAPIView):
         return (
             modules.order_by("-created_at")
             .distinct()
-            .values(
-                "name", "id", "project_id", "project__identifier", "workspace__slug"
-            )
+            .values("name", "id", "project_id", "project__identifier", "workspace__slug")
         )
 
     def filter_pages(self, query, slug, project_id, workspace_search):
@@ -177,9 +173,7 @@ class GlobalSearchEndpoint(BaseAPIView):
             )
             .annotate(
                 project_ids=Coalesce(
-                    ArrayAgg(
-                        "projects__id", distinct=True, filter=~Q(projects__id=True)
-                    ),
+                    ArrayAgg("projects__id", distinct=True, filter=~Q(projects__id=True)),
                     Value([], output_field=ArrayField(UUIDField())),
                 )
             )
@@ -196,20 +190,16 @@ class GlobalSearchEndpoint(BaseAPIView):
         )
 
         if workspace_search == "false" and project_id:
-            project_subquery = ProjectPage.objects.filter(
-                page_id=OuterRef("id"), project_id=project_id
-            ).values_list("project_id", flat=True)[:1]
+            project_subquery = ProjectPage.objects.filter(page_id=OuterRef("id"), project_id=project_id).values_list(
+                "project_id", flat=True
+            )[:1]
 
-            pages = pages.annotate(project_id=Subquery(project_subquery)).filter(
-                project_id=project_id
-            )
+            pages = pages.annotate(project_id=Subquery(project_subquery)).filter(project_id=project_id)
 
         return (
             pages.order_by("-created_at")
             .distinct()
-            .values(
-                "name", "id", "project_ids", "project_identifiers", "workspace__slug"
-            )
+            .values("name", "id", "project_ids", "project_identifiers", "workspace__slug")
         )
 
     def filter_views(self, query, slug, project_id, workspace_search):
@@ -233,9 +223,7 @@ class GlobalSearchEndpoint(BaseAPIView):
         return (
             issue_views.order_by("-created_at")
             .distinct()
-            .values(
-                "name", "id", "project_id", "project__identifier", "workspace__slug"
-            )
+            .values("name", "id", "project_id", "project__identifier", "workspace__slug")
         )
 
     def filter_intakes(self, query, slug, project_id, workspace_search):
@@ -294,9 +282,7 @@ class GlobalSearchEndpoint(BaseAPIView):
 
         # Determine which entities to search
         if entities_param:
-            requested_entities = [
-                e.strip() for e in entities_param.split(",") if e.strip()
-            ]
+            requested_entities = [e.strip() for e in entities_param.split(",") if e.strip()]
             requested_entities = [e for e in requested_entities if e in MODELS_MAPPER]
         else:
             requested_entities = list(MODELS_MAPPER.keys())
@@ -306,9 +292,7 @@ class GlobalSearchEndpoint(BaseAPIView):
         for entity in requested_entities:
             func = MODELS_MAPPER.get(entity)
             if func:
-                results[entity] = func(
-                    query or None, slug, project_id, workspace_search
-                )
+                results[entity] = func(query or None, slug, project_id, workspace_search)
 
         return Response({"results": results}, status=status.HTTP_200_OK)
 
@@ -320,7 +304,6 @@ class SearchEndpoint(BaseAPIView):
         query_types = [qt.strip() for qt in query_types]
         count = int(request.query_params.get("count", 5))
         project_id = request.query_params.get("project_id", None)
-        issue_id = request.query_params.get("issue_id", None)
 
         response_data = {}
 
@@ -367,14 +350,10 @@ class SearchEndpoint(BaseAPIView):
                         .order_by("-created_at")
                     )
 
-                    users = (
-                        users
-                        .distinct()
-                        .values(
-                            "member__avatar_url",
-                            "member__display_name",
-                            "member__id",
-                        )
+                    users = users.distinct().values(
+                        "member__avatar_url",
+                        "member__display_name",
+                        "member__id",
                     )
 
                     response_data["user_mention"] = list(users[:count])
@@ -389,15 +368,12 @@ class SearchEndpoint(BaseAPIView):
                     projects = (
                         Project.objects.filter(
                             q,
-                            Q(project_projectmember__member=self.request.user)
-                            | Q(network=2),
+                            Q(project_projectmember__member=self.request.user) | Q(network=2),
                             workspace__slug=slug,
                         )
                         .order_by("-created_at")
                         .distinct()
-                        .values(
-                            "name", "id", "identifier", "logo_props", "workspace__slug"
-                        )[:count]
+                        .values("name", "id", "identifier", "logo_props", "workspace__slug")[:count]
                     )
                     response_data["project"] = list(projects)
 
@@ -456,20 +432,16 @@ class SearchEndpoint(BaseAPIView):
                         .annotate(
                             status=Case(
                                 When(
-                                    Q(start_date__lte=timezone.now())
-                                    & Q(end_date__gte=timezone.now()),
+                                    Q(start_date__lte=timezone.now()) & Q(end_date__gte=timezone.now()),
                                     then=Value("CURRENT"),
                                 ),
                                 When(
                                     start_date__gt=timezone.now(),
                                     then=Value("UPCOMING"),
                                 ),
+                                When(end_date__lt=timezone.now(), then=Value("COMPLETED")),
                                 When(
-                                    end_date__lt=timezone.now(), then=Value("COMPLETED")
-                                ),
-                                When(
-                                    Q(start_date__isnull=True)
-                                    & Q(end_date__isnull=True),
+                                    Q(start_date__isnull=True) & Q(end_date__isnull=True),
                                     then=Value("DRAFT"),
                                 ),
                                 default=Value("DRAFT"),
@@ -587,9 +559,7 @@ class SearchEndpoint(BaseAPIView):
                             )
                         )
                         .order_by("-created_at")
-                        .values(
-                            "member__avatar_url", "member__display_name", "member__id"
-                        )[:count]
+                        .values("member__avatar_url", "member__display_name", "member__id")[:count]
                     )
                     response_data["user_mention"] = list(users)
 
@@ -603,15 +573,12 @@ class SearchEndpoint(BaseAPIView):
                     projects = (
                         Project.objects.filter(
                             q,
-                            Q(project_projectmember__member=self.request.user)
-                            | Q(network=2),
+                            Q(project_projectmember__member=self.request.user) | Q(network=2),
                             workspace__slug=slug,
                         )
                         .order_by("-created_at")
                         .distinct()
-                        .values(
-                            "name", "id", "identifier", "logo_props", "workspace__slug"
-                        )[:count]
+                        .values("name", "id", "identifier", "logo_props", "workspace__slug")[:count]
                     )
                     response_data["project"] = list(projects)
 
@@ -668,20 +635,16 @@ class SearchEndpoint(BaseAPIView):
                         .annotate(
                             status=Case(
                                 When(
-                                    Q(start_date__lte=timezone.now())
-                                    & Q(end_date__gte=timezone.now()),
+                                    Q(start_date__lte=timezone.now()) & Q(end_date__gte=timezone.now()),
                                     then=Value("CURRENT"),
                                 ),
                                 When(
                                     start_date__gt=timezone.now(),
                                     then=Value("UPCOMING"),
                                 ),
+                                When(end_date__lt=timezone.now(), then=Value("COMPLETED")),
                                 When(
-                                    end_date__lt=timezone.now(), then=Value("COMPLETED")
-                                ),
-                                When(
-                                    Q(start_date__isnull=True)
-                                    & Q(end_date__isnull=True),
+                                    Q(start_date__isnull=True) & Q(end_date__isnull=True),
                                     then=Value("DRAFT"),
                                 ),
                                 default=Value("DRAFT"),
diff --git a/apps/api/plane/app/views/state/base.py b/apps/api/plane/app/views/state/base.py
index bb5026b0fe..ce1597a685 100644
--- a/apps/api/plane/app/views/state/base.py
+++ b/apps/api/plane/app/views/state/base.py
@@ -10,7 +10,7 @@ from rest_framework.response import Response
 from rest_framework import status
 
 # Module imports
-from .. import BaseViewSet
+from .. import BaseViewSet, BaseAPIView
 from plane.app.serializers import StateSerializer
 from plane.app.permissions import ROLE, allow_permission
 from plane.db.models import State, Issue
@@ -127,3 +127,16 @@ class StateViewSet(BaseViewSet):
 
         state.delete()
         return Response(status=status.HTTP_204_NO_CONTENT)
+
+
+class IntakeStateEndpoint(BaseAPIView):
+    @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST])
+    def get(self, request, slug, project_id):
+        state = State.triage_objects.filter(workspace__slug=slug, project_id=project_id).first()
+        if not state:
+            return Response(
+                {"error": "Triage state not found"},
+                status=status.HTTP_404_NOT_FOUND,
+            )
+
+        return Response(StateSerializer(state).data, status=status.HTTP_200_OK)
diff --git a/apps/api/plane/app/views/user/base.py b/apps/api/plane/app/views/user/base.py
index c26b63c13d..72d42010ce 100644
--- a/apps/api/plane/app/views/user/base.py
+++ b/apps/api/plane/app/views/user/base.py
@@ -1,10 +1,18 @@
 # Python imports
 import uuid
+import json
+import logging
+import secrets
 
 # Django imports
 from django.db.models import Case, Count, IntegerField, Q, When
 from django.contrib.auth import logout
 from django.utils import timezone
+from django.utils.decorators import method_decorator
+from django.views.decorators.cache import cache_control
+from django.views.decorators.vary import vary_on_cookie
+from django.core.validators import validate_email
+from django.core.cache import cache
 
 # Third party imports
 from rest_framework import status
@@ -36,9 +44,11 @@ from plane.utils.paginator import BasePaginator
 from plane.authentication.utils.host import user_ip
 from plane.bgtasks.user_deactivation_email_task import user_deactivation_email
 from plane.utils.host import base_host
-from django.utils.decorators import method_decorator
-from django.views.decorators.cache import cache_control
-from django.views.decorators.vary import vary_on_cookie
+from plane.bgtasks.user_email_update_task import send_email_update_magic_code, send_email_update_confirmation
+from plane.authentication.rate_limit import EmailVerificationThrottle
+
+
+logger = logging.getLogger("plane")
 
 
 class UserEndpoint(BaseViewSet):
@@ -49,6 +59,14 @@ class UserEndpoint(BaseViewSet):
     def get_object(self):
         return self.request.user
 
+    def get_throttles(self):
+        """
+        Apply rate limiting to specific endpoints.
+        """
+        if self.action == "generate_email_verification_code":
+            return [EmailVerificationThrottle()]
+        return super().get_throttles()
+
     @method_decorator(cache_control(private=True, max_age=12))
     @method_decorator(vary_on_cookie)
     def retrieve(self, request):
@@ -69,6 +87,163 @@ class UserEndpoint(BaseViewSet):
     def partial_update(self, request, *args, **kwargs):
         return super().partial_update(request, *args, **kwargs)
 
+    def _validate_new_email(self, user, new_email):
+        """
+        Validate the new email address.
+
+        Args:
+            user: The User instance
+            new_email: The new email address to validate
+
+        Returns:
+            Response object with error if validation fails, None if validation passes
+        """
+        if not new_email:
+            return Response(
+                {"error": "Email is required"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        # Validate email format
+        try:
+            validate_email(new_email)
+        except Exception:
+            return Response(
+                {"error": "Invalid email format"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        # Check if email is the same as current email
+        if new_email == user.email:
+            return Response(
+                {"error": "New email must be different from current email"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        # Check if email already exists in the User model
+        if User.objects.filter(email=new_email).exclude(id=user.id).exists():
+            return Response(
+                {"error": "An account with this email already exists"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        return None
+
+    def generate_email_verification_code(self, request):
+        """
+        Generate and send a magic code to the new email address for verification.
+        Rate limited to 3 requests per hour per user (enforced by EmailVerificationThrottle).
+        Additional per-email cooldown of 60 seconds prevents rapid repeated requests.
+        """
+        user = self.get_object()
+        new_email = request.data.get("email", "").strip().lower()
+
+        # Validate the new email
+        validation_error = self._validate_new_email(user, new_email)
+        if validation_error:
+            return validation_error
+
+        try:
+            # Generate magic code for email verification
+            # Use a special key prefix to distinguish from regular magic signin
+            # Include user ID to bind the code to the specific user
+            cache_key = f"magic_email_update_{user.id}_{new_email}"
+            ## Generate a random token
+            token = str(secrets.randbelow(900000) + 100000)
+            # Store in cache with 10 minute expiration
+            cache_data = json.dumps({"token": token})
+            cache.set(cache_key, cache_data, timeout=600)
+
+            # Send magic code to the new email
+            send_email_update_magic_code.delay(new_email, token)
+
+            return Response(
+                {"message": "Verification code sent to email"},
+                status=status.HTTP_200_OK,
+            )
+        except Exception as e:
+            logger.error("Failed to generate verification code: %s", str(e), exc_info=True)
+            return Response(
+                {"error": "Failed to generate verification code. Please try again."},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+    def update_email(self, request):
+        """
+        Verify the magic code and update the user's email address.
+        This endpoint verifies the code and updates the existing user record
+        without creating a new user, ensuring the user ID remains unchanged.
+        """
+        user = self.get_object()
+        new_email = request.data.get("email", "").strip().lower()
+        code = request.data.get("code", "").strip()
+
+        # Validate the new email
+        validation_error = self._validate_new_email(user, new_email)
+        if validation_error:
+            return validation_error
+
+        if not code:
+            return Response(
+                {"error": "Verification code is required"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        # Verify the magic code
+        try:
+            cache_key = f"magic_email_update_{user.id}_{new_email}"
+            cached_data = cache.get(cache_key)
+
+            if not cached_data:
+                logger.warning("Cache key not found: %s. Code may have expired or was never generated.", cache_key)
+                return Response(
+                    {"error": "Verification code has expired or is invalid"},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+
+            data = json.loads(cached_data)
+            stored_token = data.get("token")
+
+            if str(stored_token) != str(code):
+                return Response(
+                    {"error": "Invalid verification code"},
+                    status=status.HTTP_400_BAD_REQUEST,
+                )
+
+        except Exception:
+            return Response(
+                {"error": "Failed to verify code. Please try again."},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+
+        # Final check: ensure email is still available (might have been taken between code generation and update)
+        if User.objects.filter(email=new_email).exclude(id=user.id).exists():
+            return Response(
+                {"error": "An account with this email already exists"},
+                status=status.HTTP_400_BAD_REQUEST,
+            )
+        old_email = user.email
+        # Update the email - this updates the existing user record without creating a new user
+        user.email = new_email
+        # Reset email verification status when email is changed
+        user.is_email_verified = False
+        user.save()
+
+        # delete the cache
+        cache.delete(cache_key)
+
+        # Logout the user
+        logout(request)
+
+        # Send confirmation email to the new email address
+        send_email_update_confirmation.delay(new_email)
+        # send the email to the old email address
+        send_email_update_confirmation.delay(old_email)
+
+        # Return updated user data
+        serialized_data = UserMeSerializer(user).data
+        return Response(serialized_data, status=status.HTTP_200_OK)
+
     def deactivate(self, request):
         # Check all workspace user is active
         user = self.get_object()
diff --git a/apps/api/plane/app/views/workspace/base.py b/apps/api/plane/app/views/workspace/base.py
index c27b7adbb2..f96b002fd2 100644
--- a/apps/api/plane/app/views/workspace/base.py
+++ b/apps/api/plane/app/views/workspace/base.py
@@ -42,7 +42,9 @@ 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
 
 
 class WorkSpaceViewSet(BaseViewSet):
@@ -131,6 +133,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 +180,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)
 
 
diff --git a/apps/api/plane/app/views/workspace/invite.py b/apps/api/plane/app/views/workspace/invite.py
index 48bcf7eba3..c237e0860f 100644
--- a/apps/api/plane/app/views/workspace/invite.py
+++ b/apps/api/plane/app/views/workspace/invite.py
@@ -21,12 +21,13 @@ 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 +122,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)
 
@@ -186,20 +200,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 +268,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/member.py b/apps/api/plane/app/views/workspace/member.py
index d81a647f69..3394cb253f 100644
--- a/apps/api/plane/app/views/workspace/member.py
+++ b/apps/api/plane/app/views/workspace/member.py
@@ -50,6 +50,25 @@ class WorkSpaceMemberViewSet(BaseViewSet):
             serializer = WorkSpaceMemberSerializer(workspace_members, fields=("id", "member", "role"), many=True)
         return Response(serializer.data, status=status.HTTP_200_OK)
 
+    @allow_permission(allowed_roles=[ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
+    def retrieve(self, request, slug, pk):
+        workspace_member = WorkspaceMember.objects.get(member=request.user, workspace__slug=slug, is_active=True)
+
+        try:
+            # Get the specific workspace member by pk
+            member = self.get_queryset().get(pk=pk)
+        except WorkspaceMember.DoesNotExist:
+            return Response(
+                {"error": "Workspace member not found"},
+                status=status.HTTP_404_NOT_FOUND,
+            )
+
+        if workspace_member.role > ROLE.GUEST.value:
+            serializer = WorkspaceMemberAdminSerializer(member, fields=("id", "member", "role"))
+        else:
+            serializer = WorkSpaceMemberSerializer(member, fields=("id", "member", "role"))
+        return Response(serializer.data, status=status.HTTP_200_OK)
+
     @allow_permission(allowed_roles=[ROLE.ADMIN], level="WORKSPACE")
     def partial_update(self, request, slug, pk):
         workspace_member = WorkspaceMember.objects.get(
diff --git a/apps/api/plane/app/views/workspace/user.py b/apps/api/plane/app/views/workspace/user.py
index 0d4f152ee4..b45c6e410b 100644
--- a/apps/api/plane/app/views/workspace/user.py
+++ b/apps/api/plane/app/views/workspace/user.py
@@ -249,23 +249,26 @@ class WorkspaceUserPropertiesEndpoint(BaseAPIView):
     permission_classes = [WorkspaceViewerPermission]
 
     def patch(self, request, slug):
-        workspace_properties = WorkspaceUserProperties.objects.get(user=request.user, workspace__slug=slug)
+        workspace = Workspace.objects.get(slug=slug)
 
-        workspace_properties.filters = request.data.get("filters", workspace_properties.filters)
-        workspace_properties.rich_filters = request.data.get("rich_filters", workspace_properties.rich_filters)
-        workspace_properties.display_filters = request.data.get("display_filters", workspace_properties.display_filters)
-        workspace_properties.display_properties = request.data.get(
-            "display_properties", workspace_properties.display_properties
+        (workspace_properties, _) = WorkspaceUserProperties.objects.get_or_create(
+            user=request.user, workspace_id=workspace.id
         )
-        workspace_properties.save()
 
-        serializer = WorkspaceUserPropertiesSerializer(workspace_properties)
-        return Response(serializer.data, status=status.HTTP_201_CREATED)
+        serializer = WorkspaceUserPropertiesSerializer(workspace_properties, data=request.data, partial=True)
+        if serializer.is_valid():
+            serializer.save()
+            return Response(serializer.data, status=status.HTTP_200_OK)
+
+        return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
     def get(self, request, slug):
+        workspace = Workspace.objects.get(slug=slug)
+
         (workspace_properties, _) = WorkspaceUserProperties.objects.get_or_create(
-            user=request.user, workspace__slug=slug
+            user=request.user, workspace=workspace
         )
+
         serializer = WorkspaceUserPropertiesSerializer(workspace_properties)
         return Response(serializer.data, status=status.HTTP_200_OK)
 
diff --git a/apps/api/plane/app/views/workspace/user_preference.py b/apps/api/plane/app/views/workspace/user_preference.py
index 30c6ab97a9..253f715b36 100644
--- a/apps/api/plane/app/views/workspace/user_preference.py
+++ b/apps/api/plane/app/views/workspace/user_preference.py
@@ -39,6 +39,16 @@ class WorkspaceUserPreferenceViewSet(BaseAPIView):
                             user=request.user,
                             workspace=workspace,
                             sort_order=(65535 + (i * 10000)),
+                            is_pinned=(
+                                True
+                                if key
+                                in [
+                                    WorkspaceUserPreference.UserPreferenceKeys.DRAFTS,
+                                    WorkspaceUserPreference.UserPreferenceKeys.YOUR_WORK,
+                                    WorkspaceUserPreference.UserPreferenceKeys.STICKIES,
+                                ]
+                                else False
+                            ),
                         )
                         for i, key in enumerate(create_preference_keys)
                     ],
@@ -65,15 +75,23 @@ class WorkspaceUserPreferenceViewSet(BaseAPIView):
         )
 
     @allow_permission([ROLE.ADMIN, ROLE.MEMBER, ROLE.GUEST], level="WORKSPACE")
-    def patch(self, request, slug, key):
-        preference = WorkspaceUserPreference.objects.filter(key=key, workspace__slug=slug, user=request.user).first()
+    def patch(self, request, slug):
+        for data in request.data:
+            key = data.pop("key", None)
+            if not key:
+                continue
 
-        if preference:
-            serializer = WorkspaceUserPreferenceSerializer(preference, data=request.data, partial=True)
+            preference = WorkspaceUserPreference.objects.filter(key=key, workspace__slug=slug).first()
 
-            if serializer.is_valid():
-                serializer.save()
-                return Response(serializer.data, status=status.HTTP_200_OK)
-            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
+            if not preference:
+                continue
 
-        return Response({"detail": "Preference not found"}, status=status.HTTP_404_NOT_FOUND)
+            if "is_pinned" in data:
+                preference.is_pinned = data["is_pinned"]
+
+            if "sort_order" in data:
+                preference.sort_order = data["sort_order"]
+
+            preference.save(update_fields=["is_pinned", "sort_order"])
+
+        return Response({"message": "Successfully updated"}, status=status.HTTP_200_OK)
diff --git a/apps/api/plane/authentication/adapter/base.py b/apps/api/plane/authentication/adapter/base.py
index bbb50eb76f..baae95453b 100644
--- a/apps/api/plane/authentication/adapter/base.py
+++ b/apps/api/plane/authentication/adapter/base.py
@@ -1,22 +1,27 @@
 # Python imports
 import os
 import uuid
+import requests
+from io import BytesIO
 
 # 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
+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
 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 plane.settings.storage import S3Storage
 
 
 class Adapter:
@@ -86,9 +91,9 @@ class Adapter:
         """Check if sign up is enabled or not and raise exception if not enabled"""
 
         # Get configuration value
-        (ENABLE_SIGNUP,) = get_configuration_value(
-            [{"key": "ENABLE_SIGNUP", "default": os.environ.get("ENABLE_SIGNUP", "1")}]
-        )
+        (ENABLE_SIGNUP,) = get_configuration_value([
+            {"key": "ENABLE_SIGNUP", "default": os.environ.get("ENABLE_SIGNUP", "1")}
+        ])
 
         # Check if sign up is disabled and invite is present or not
         if ENABLE_SIGNUP == "0" and not WorkspaceMemberInvite.objects.filter(email=email).exists():
@@ -101,6 +106,104 @@ class Adapter:
 
         return True
 
+    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.
+        Returns the uploaded file path or None if failed.
+        """
+        if not avatar_url:
+            return None
+
+        try:
+            headers = self.get_avatar_download_headers()
+            # Download the avatar image
+            response = requests.get(avatar_url, timeout=10, headers=headers)
+            response.raise_for_status()
+
+            # Check content length before downloading
+            content_length = response.headers.get("Content-Length")
+            max_size = settings.DATA_UPLOAD_MAX_MEMORY_SIZE
+            if content_length and int(content_length) > max_size:
+                return None
+
+            # Get content type and determine file extension
+            content_type = response.headers.get("Content-Type", "image/jpeg")
+            extension_map = {
+                "image/jpeg": "jpg",
+                "image/jpg": "jpg",
+                "image/png": "png",
+                "image/gif": "gif",
+                "image/webp": "webp",
+            }
+            extension = extension_map.get(content_type)
+
+            if not extension:
+                return None
+
+            # Download with size limit
+            chunks = []
+            total_size = 0
+            for chunk in response.iter_content(chunk_size=8192):
+                total_size += len(chunk)
+                if total_size > max_size:
+                    return None
+                chunks.append(chunk)
+            content = b"".join(chunks)
+            file_size = len(content)
+
+            # Generate unique filename
+            filename = f"{uuid.uuid4().hex}-user-avatar.{extension}"
+
+            storage = S3Storage(request=self.request)
+
+            # Create file-like object
+            file_obj = BytesIO(response.content)
+            file_obj.seek(0)
+
+            # Upload using boto3 directly
+            upload_success = storage.upload_file(file_obj=file_obj, object_name=filename, content_type=content_type)
+            if not upload_success:
+                return None
+
+            # Get storage metadata
+            storage_metadata = storage.get_object_metadata(object_name=filename)
+
+            # Create FileAsset record
+            file_asset = FileAsset.objects.create(
+                attributes={"name": f"{self.provider}-avatar.{extension}", "type": content_type, "size": file_size},
+                asset=filename,
+                size=file_size,
+                user=user,
+                created_by=user,
+                entity_type=FileAsset.EntityTypeContext.USER_AVATAR,
+                is_uploaded=True,
+                storage_metadata=storage_metadata,
+            )
+
+            return file_asset
+
+        except Exception as e:
+            log_exception(e)
+            # Return None if upload fails, so original URL can be used as fallback
+            return None
+
     def save_user_data(self, user):
         # Update user details
         user.last_login_medium = self.provider
@@ -117,6 +220,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")
@@ -151,17 +307,31 @@ class Adapter:
                 user.is_password_autoset = False
 
             # Set user details
-            avatar = self.user_data.get("user", {}).get("avatar", "")
             first_name = self.user_data.get("user", {}).get("first_name", "")
             last_name = self.user_data.get("user", {}).get("last_name", "")
-            user.avatar = avatar if avatar else ""
             user.first_name = first_name if first_name else ""
             user.last_name = last_name if last_name else ""
+
             user.save()
 
+            # Download and upload avatar
+            avatar = self.user_data.get("user", {}).get("avatar", "")
+            if avatar:
+                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
+
             # 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/provider/credentials/magic_code.py b/apps/api/plane/authentication/provider/credentials/magic_code.py
index 3f03572a47..e7c5cfff95 100644
--- a/apps/api/plane/authentication/provider/credentials/magic_code.py
+++ b/apps/api/plane/authentication/provider/credentials/magic_code.py
@@ -1,8 +1,7 @@
 # Python imports
 import json
 import os
-import random
-import string
+import secrets
 
 
 # Module imports
@@ -50,13 +49,7 @@ class MagicCodeProvider(CredentialAdapter):
 
     def initiate(self):
         ## Generate a random token
-        token = (
-            "".join(random.choices(string.ascii_lowercase, k=4))
-            + "-"
-            + "".join(random.choices(string.ascii_lowercase, k=4))
-            + "-"
-            + "".join(random.choices(string.ascii_lowercase, k=4))
-        )
+        token = str(secrets.randbelow(900000) + 100000)
 
         ri = redis_instance()
 
diff --git a/apps/api/plane/authentication/provider/oauth/gitea.py b/apps/api/plane/authentication/provider/oauth/gitea.py
index ba7d3d16ba..4d8de8e1af 100644
--- a/apps/api/plane/authentication/provider/oauth/gitea.py
+++ b/apps/api/plane/authentication/provider/oauth/gitea.py
@@ -101,9 +101,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 +166,4 @@ class GiteaOAuthProvider(OauthAdapter):
                     "is_password_autoset": True,
                 },
             }
-        )
\ No newline at end of file
+        )
diff --git a/apps/api/plane/authentication/rate_limit.py b/apps/api/plane/authentication/rate_limit.py
index 09c3381cee..d245d50b37 100644
--- a/apps/api/plane/authentication/rate_limit.py
+++ b/apps/api/plane/authentication/rate_limit.py
@@ -1,5 +1,5 @@
 # Third party imports
-from rest_framework.throttling import AnonRateThrottle
+from rest_framework.throttling import AnonRateThrottle, UserRateThrottle
 from rest_framework import status
 from rest_framework.response import Response
 
@@ -22,3 +22,22 @@ class AuthenticationThrottle(AnonRateThrottle):
             )
         except AuthenticationException as e:
             return Response(e.get_error_dict(), status=status.HTTP_429_TOO_MANY_REQUESTS)
+
+
+class EmailVerificationThrottle(UserRateThrottle):
+    """
+    Throttle for email verification code generation.
+    Limits to 3 requests per hour per user to prevent abuse.
+    """
+
+    rate = "3/hour"
+    scope = "email_verification"
+
+    def throttle_failure_view(self, request, *args, **kwargs):
+        try:
+            raise AuthenticationException(
+                error_code=AUTHENTICATION_ERROR_CODES["RATE_LIMIT_EXCEEDED"],
+                error_message="RATE_LIMIT_EXCEEDED",
+            )
+        except AuthenticationException as e:
+            return Response(e.get_error_dict(), status=status.HTTP_429_TOO_MANY_REQUESTS)
diff --git a/apps/api/plane/authentication/utils/workspace_project_join.py b/apps/api/plane/authentication/utils/workspace_project_join.py
index bd5ad8501b..31dae55eb7 100644
--- a/apps/api/plane/authentication/utils/workspace_project_join.py
+++ b/apps/api/plane/authentication/utils/workspace_project_join.py
@@ -1,3 +1,7 @@
+# Django imports
+from django.utils import timezone
+
+# Module imports
 from plane.db.models import (
     ProjectMember,
     ProjectMemberInvite,
@@ -5,6 +9,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 +31,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/app/gitea.py b/apps/api/plane/authentication/views/app/gitea.py
index fd12f8b336..e43a35c3c8 100644
--- a/apps/api/plane/authentication/views/app/gitea.py
+++ b/apps/api/plane/authentication/views/app/gitea.py
@@ -37,9 +37,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 +49,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 +83,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/bgtasks/dummy_data_task.py b/apps/api/plane/bgtasks/dummy_data_task.py
index 3220ef0c09..390bc160b5 100644
--- a/apps/api/plane/bgtasks/dummy_data_task.py
+++ b/apps/api/plane/bgtasks/dummy_data_task.py
@@ -17,6 +17,7 @@ from plane.db.models import (
     Project,
     ProjectMember,
     State,
+    StateGroup,
     Label,
     Cycle,
     Module,
@@ -264,7 +265,9 @@ def create_issues(workspace, project, user_id, issue_count):
     Faker.seed(0)
 
     states = (
-        State.objects.filter(workspace=workspace, project=project).exclude(group="Triage").values_list("id", flat=True)
+        State.objects.filter(workspace=workspace, project=project)
+        .exclude(group=StateGroup.TRIAGE.value)
+        .values_list("id", flat=True)
     )
     creators = ProjectMember.objects.filter(workspace=workspace, project=project).values_list("member_id", flat=True)
 
diff --git a/apps/api/plane/bgtasks/event_tracking_task.py b/apps/api/plane/bgtasks/event_tracking_task.py
index 0629db93af..82857fdfe1 100644
--- a/apps/api/plane/bgtasks/event_tracking_task.py
+++ b/apps/api/plane/bgtasks/event_tracking_task.py
@@ -1,5 +1,7 @@
+import logging
 import os
 import uuid
+from typing import Dict, Any
 
 # third party imports
 from celery import shared_task
@@ -8,6 +10,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 +24,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 +36,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 d8aad5f69c..f77e379108 100644
--- a/apps/api/plane/bgtasks/export_task.py
+++ b/apps/api/plane/bgtasks/export_task.py
@@ -2,7 +2,6 @@
 import io
 import zipfile
 from typing import List
-from collections import defaultdict
 import boto3
 from botocore.client import Config
 from uuid import UUID
@@ -16,9 +15,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:
@@ -160,10 +160,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"),
@@ -181,11 +187,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/logger_task.py b/apps/api/plane/bgtasks/logger_task.py
new file mode 100644
index 0000000000..01723ef77a
--- /dev/null
+++ b/apps/api/plane/bgtasks/logger_task.py
@@ -0,0 +1,96 @@
+# 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/page_transaction_task.py b/apps/api/plane/bgtasks/page_transaction_task.py
index 402d0a3ee0..9c0caccf06 100644
--- a/apps/api/plane/bgtasks/page_transaction_task.py
+++ b/apps/api/plane/bgtasks/page_transaction_task.py
@@ -88,7 +88,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 +124,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/user_email_update_task.py b/apps/api/plane/bgtasks/user_email_update_task.py
new file mode 100644
index 0000000000..667de368c7
--- /dev/null
+++ b/apps/api/plane/bgtasks/user_email_update_task.py
@@ -0,0 +1,110 @@
+# Python imports
+import logging
+
+# Third party imports
+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.exception_logger import log_exception
+
+
+@shared_task
+def send_email_update_magic_code(email, token):
+    try:
+        (
+            EMAIL_HOST,
+            EMAIL_HOST_USER,
+            EMAIL_HOST_PASSWORD,
+            EMAIL_PORT,
+            EMAIL_USE_TLS,
+            EMAIL_USE_SSL,
+            EMAIL_FROM,
+        ) = get_email_configuration()
+
+        # Send the mail
+        subject = "Verify your new email address"
+        context = {"code": token, "email": email}
+
+        html_content = render_to_string("emails/auth/magic_signin.html", context)
+        text_content = strip_tags(html_content)
+
+        connection = get_connection(
+            host=EMAIL_HOST,
+            port=int(EMAIL_PORT),
+            username=EMAIL_HOST_USER,
+            password=EMAIL_HOST_PASSWORD,
+            use_tls=EMAIL_USE_TLS == "1",
+            use_ssl=EMAIL_USE_SSL == "1",
+        )
+
+        msg = EmailMultiAlternatives(
+            subject=subject,
+            body=text_content,
+            from_email=EMAIL_FROM,
+            to=[email],
+            connection=connection,
+        )
+        msg.attach_alternative(html_content, "text/html")
+        msg.send()
+        logging.getLogger("plane.worker").info("Email sent successfully.")
+        return
+    except Exception as e:
+        log_exception(e)
+        return
+
+
+@shared_task
+def send_email_update_confirmation(email):
+    """
+    Send a confirmation email to the user after their email address has been successfully updated.
+
+    Args:
+        email: The new email address that was successfully updated
+    """
+    try:
+        (
+            EMAIL_HOST,
+            EMAIL_HOST_USER,
+            EMAIL_HOST_PASSWORD,
+            EMAIL_PORT,
+            EMAIL_USE_TLS,
+            EMAIL_USE_SSL,
+            EMAIL_FROM,
+        ) = get_email_configuration()
+
+        # Send the confirmation email
+        subject = "Plane email address successfully updated"
+        context = {"email": email}
+
+        html_content = render_to_string("emails/user/email_updated.html", context)
+        text_content = strip_tags(html_content)
+
+        connection = get_connection(
+            host=EMAIL_HOST,
+            port=int(EMAIL_PORT),
+            username=EMAIL_HOST_USER,
+            password=EMAIL_HOST_PASSWORD,
+            use_tls=EMAIL_USE_TLS == "1",
+            use_ssl=EMAIL_USE_SSL == "1",
+        )
+
+        msg = EmailMultiAlternatives(
+            subject=subject,
+            body=text_content,
+            from_email=EMAIL_FROM,
+            to=[email],
+            connection=connection,
+        )
+        msg.attach_alternative(html_content, "text/html")
+        msg.send()
+        logging.getLogger("plane.worker").info(f"Email update confirmation sent successfully to {email}.")
+        return
+    except Exception as e:
+        log_exception(e)
+        return
diff --git a/apps/api/plane/bgtasks/work_item_link_task.py b/apps/api/plane/bgtasks/work_item_link_task.py
index 7ceaacaf5a..e436c1e8f8 100644
--- a/apps/api/plane/bgtasks/work_item_link_task.py
+++ b/apps/api/plane/bgtasks/work_item_link_task.py
@@ -1,7 +1,6 @@
 # Python imports
 import logging
 
-
 # Third party imports
 from celery import shared_task
 import requests
@@ -20,6 +19,34 @@ logger = logging.getLogger("plane.worker")
 DEFAULT_FAVICON = "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWxpbmstaWNvbiBsdWNpZGUtbGluayI+PHBhdGggZD0iTTEwIDEzYTUgNSAwIDAgMCA3LjU0LjU0bDMtM2E1IDUgMCAwIDAtNy4wNy03LjA3bC0xLjcyIDEuNzEiLz48cGF0aCBkPSJNMTQgMTFhNSA1IDAgMCAwLTcuNTQtLjU0bC0zIDNhNSA1IDAgMCAwIDcuMDcgNy4wN2wxLjcxLTEuNzEiLz48L3N2Zz4="  # noqa: E501
 
 
+def validate_url_ip(url: str) -> None:
+    """
+    Validate that a URL doesn't point to a private/internal IP address.
+    Only checks if the hostname is a direct IP address.
+
+    Args:
+        url: The URL to validate
+
+    Raises:
+        ValueError: If the URL points to a private/internal IP
+    """
+    parsed = urlparse(url)
+    hostname = parsed.hostname
+
+    if not hostname:
+        return
+
+    try:
+        ip = ipaddress.ip_address(hostname)
+    except ValueError:
+        # Not an IP address (it's a domain name), nothing to check here
+        return
+
+    # It IS an IP address - check if it's private/internal
+    if ip.is_private or ip.is_loopback or ip.is_reserved:
+        raise ValueError("Access to private/internal networks is not allowed")
+
+
 def crawl_work_item_link_title_and_favicon(url: str) -> Dict[str, Any]:
     """
     Crawls a URL to extract the title and favicon.
@@ -31,17 +58,6 @@ def crawl_work_item_link_title_and_favicon(url: str) -> Dict[str, Any]:
         str: JSON string containing title and base64-encoded favicon
     """
     try:
-        # Prevent access to private IP ranges
-        parsed = urlparse(url)
-
-        try:
-            ip = ipaddress.ip_address(parsed.hostname)
-            if ip.is_private or ip.is_loopback or ip.is_reserved:
-                raise ValueError("Access to private/internal networks is not allowed")
-        except ValueError:
-            # Not an IP address, continue with domain validation
-            pass
-
         # Set up headers to mimic a real browser
         headers = {
             "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36"  # noqa: E501
@@ -49,9 +65,16 @@ def crawl_work_item_link_title_and_favicon(url: str) -> Dict[str, Any]:
 
         soup = None
         title = None
+        final_url = url
+
+        validate_url_ip(final_url)
 
         try:
-            response = requests.get(url, headers=headers, timeout=1)
+            response = requests.get(final_url, headers=headers, timeout=1)
+            final_url = response.url  # Get the final URL after any redirects
+
+            # check for redirected url also
+            validate_url_ip(final_url)
 
             soup = BeautifulSoup(response.content, "html.parser")
             title_tag = soup.find("title")
@@ -60,8 +83,8 @@ 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)}")
 
-        # Fetch and encode favicon
-        favicon_base64 = fetch_and_encode_favicon(headers, soup, url)
+        # Fetch and encode favicon using final URL (after redirects)
+        favicon_base64 = fetch_and_encode_favicon(headers, soup, final_url)
 
         # Prepare result
         result = {
diff --git a/apps/api/plane/bgtasks/workspace_seed_task.py b/apps/api/plane/bgtasks/workspace_seed_task.py
index fb9980c3fd..6df6b49663 100644
--- a/apps/api/plane/bgtasks/workspace_seed_task.py
+++ b/apps/api/plane/bgtasks/workspace_seed_task.py
@@ -10,6 +10,7 @@ from datetime import timedelta
 # Django imports
 from django.conf import settings
 from django.utils import timezone
+from django.contrib.auth.hashers import make_password
 
 # Third party imports
 from celery import shared_task
@@ -34,6 +35,8 @@ from plane.db.models import (
     CycleIssue,
     ModuleIssue,
     IssueView,
+    User,
+    BotTypeEnum,
 )
 
 logger = logging.getLogger("plane.worker")
@@ -61,7 +64,7 @@ def read_seed_file(filename):
         return None
 
 
-def create_project_and_member(workspace: Workspace) -> Dict[int, uuid.UUID]:
+def create_project_and_member(workspace: Workspace, bot_user: User) -> Dict[int, uuid.UUID]:
     """Creates a project and associated members for a workspace.
 
     Creates a new project using the workspace name and sets up all necessary
@@ -69,7 +72,7 @@ def create_project_and_member(workspace: Workspace) -> Dict[int, uuid.UUID]:
 
     Args:
         workspace: The workspace to create the project in
-
+        bot_user: The bot user to use for creating the project
     Returns:
         A mapping of seed project IDs to actual project IDs
     """
@@ -96,7 +99,7 @@ def create_project_and_member(workspace: Workspace) -> Dict[int, uuid.UUID]:
             workspace=workspace,
             name=workspace.name,  # Use workspace name
             identifier=project_identifier,
-            created_by_id=workspace.created_by_id,
+            created_by_id=bot_user.id,
             # Enable all views in seed data
             cycle_view=True,
             module_view=True,
@@ -111,7 +114,7 @@ def create_project_and_member(workspace: Workspace) -> Dict[int, uuid.UUID]:
                     member_id=workspace_member["member_id"],
                     role=workspace_member["role"],
                     workspace_id=workspace.id,
-                    created_by_id=workspace.created_by_id,
+                    created_by_id=bot_user.id,
                 )
                 for workspace_member in workspace_members
             ]
@@ -153,7 +156,7 @@ def create_project_and_member(workspace: Workspace) -> Dict[int, uuid.UUID]:
                         "attachment_count": False,
                         "customer_request_count": True,
                     },
-                    created_by_id=workspace.created_by_id,
+                    created_by_id=bot_user.id,
                 )
                 for workspace_member in workspace_members
             ]
@@ -165,13 +168,15 @@ def create_project_and_member(workspace: Workspace) -> Dict[int, uuid.UUID]:
     return projects_map
 
 
-def create_project_states(workspace: Workspace, project_map: Dict[int, uuid.UUID]) -> Dict[int, uuid.UUID]:
+def create_project_states(
+    workspace: Workspace, project_map: Dict[int, uuid.UUID], bot_user: User
+) -> Dict[int, uuid.UUID]:
     """Creates states for each project in the workspace.
 
     Args:
         workspace: The workspace containing the projects
         project_map: Mapping of seed project IDs to actual project IDs
-
+        bot_user: The bot user to use for creating the states
     Returns:
         A mapping of seed state IDs to actual state IDs
     """
@@ -190,7 +195,7 @@ def create_project_states(workspace: Workspace, project_map: Dict[int, uuid.UUID
             **state_seed,
             project_id=project_map[project_id],
             workspace=workspace,
-            created_by_id=workspace.created_by_id,
+            created_by_id=bot_user.id,
         )
 
         state_map[state_id] = state.id
@@ -198,13 +203,15 @@ def create_project_states(workspace: Workspace, project_map: Dict[int, uuid.UUID
     return state_map
 
 
-def create_project_labels(workspace: Workspace, project_map: Dict[int, uuid.UUID]) -> Dict[int, uuid.UUID]:
+def create_project_labels(
+    workspace: Workspace, project_map: Dict[int, uuid.UUID], bot_user: User
+) -> Dict[int, uuid.UUID]:
     """Creates labels for each project in the workspace.
 
     Args:
         workspace: The workspace containing the projects
         project_map: Mapping of seed project IDs to actual project IDs
-
+        bot_user: The bot user to use for creating the labels
     Returns:
         A mapping of seed label IDs to actual label IDs
     """
@@ -221,7 +228,7 @@ def create_project_labels(workspace: Workspace, project_map: Dict[int, uuid.UUID
             **label_seed,
             project_id=project_map[project_id],
             workspace=workspace,
-            created_by_id=workspace.created_by_id,
+            created_by_id=bot_user.id,
         )
         label_map[label_id] = label.id
 
@@ -236,6 +243,7 @@ def create_project_issues(
     labels_map: Dict[int, uuid.UUID],
     cycles_map: Dict[int, uuid.UUID],
     module_map: Dict[int, uuid.UUID],
+    bot_user: User,
 ) -> None:
     """Creates issues and their associated records for each project.
 
@@ -273,13 +281,13 @@ def create_project_issues(
             state_id=states_map[state_id],
             project_id=project_map[project_id],
             workspace=workspace,
-            created_by_id=workspace.created_by_id,
+            created_by_id=bot_user.id,
         )
         IssueSequence.objects.create(
             issue=issue,
             project_id=project_map[project_id],
             workspace_id=workspace.id,
-            created_by_id=workspace.created_by_id,
+            created_by_id=bot_user.id,
         )
 
         IssueActivity.objects.create(
@@ -288,7 +296,7 @@ def create_project_issues(
             workspace_id=workspace.id,
             comment="created the issue",
             verb="created",
-            actor_id=workspace.created_by_id,
+            actor_id=bot_user.id,
             epoch=time.time(),
         )
 
@@ -299,7 +307,7 @@ def create_project_issues(
                 label_id=labels_map[label_id],
                 project_id=project_map[project_id],
                 workspace_id=workspace.id,
-                created_by_id=workspace.created_by_id,
+                created_by_id=bot_user.id,
             )
 
         # Create cycle issues
@@ -309,7 +317,7 @@ def create_project_issues(
                 cycle_id=cycles_map[cycle_id],
                 project_id=project_map[project_id],
                 workspace_id=workspace.id,
-                created_by_id=workspace.created_by_id,
+                created_by_id=bot_user.id,
             )
 
         # Create module issues
@@ -320,19 +328,20 @@ def create_project_issues(
                     module_id=module_map[module_id],
                     project_id=project_map[project_id],
                     workspace_id=workspace.id,
-                    created_by_id=workspace.created_by_id,
+                    created_by_id=bot_user.id,
                 )
 
         logger.info(f"Task: workspace_seed_task -> Issue {issue_id} created")
     return
 
 
-def create_pages(workspace: Workspace, project_map: Dict[int, uuid.UUID]) -> None:
+def create_pages(workspace: Workspace, project_map: Dict[int, uuid.UUID], bot_user: User) -> None:
     """Creates pages for each project in the workspace.
 
     Args:
         workspace: The workspace containing the projects
         project_map: Mapping of seed project IDs to actual project IDs
+        bot_user: The bot user to use for creating the pages
     """
     page_seeds = read_seed_file("pages.json")
 
@@ -351,9 +360,9 @@ def create_pages(workspace: Workspace, project_map: Dict[int, uuid.UUID]) -> Non
             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),
-            created_by_id=workspace.created_by_id,
-            updated_by_id=workspace.created_by_id,
-            owned_by_id=workspace.created_by_id,
+            created_by_id=bot_user.id,
+            updated_by_id=bot_user.id,
+            owned_by_id=bot_user.id,
         )
 
         logger.info(f"Task: workspace_seed_task -> Page {page_id} created")
@@ -362,19 +371,27 @@ def create_pages(workspace: Workspace, project_map: Dict[int, uuid.UUID]) -> Non
                 workspace_id=workspace.id,
                 project_id=project_map[page_seed.get("project_id")],
                 page_id=page.id,
-                created_by_id=workspace.created_by_id,
-                updated_by_id=workspace.created_by_id,
+                created_by_id=bot_user.id,
+                updated_by_id=bot_user.id,
             )
 
             logger.info(f"Task: workspace_seed_task -> Project Page {page_id} created")
     return
 
 
-def create_cycles(workspace: Workspace, project_map: Dict[int, uuid.UUID]) -> Dict[int, uuid.UUID]:
-    # Create cycles
+def create_cycles(workspace: Workspace, project_map: Dict[int, uuid.UUID], bot_user: User) -> Dict[int, uuid.UUID]:
+    """Creates cycles for each project in the workspace.
+
+    Args:
+        workspace: The workspace containing the projects
+        project_map: Mapping of seed project IDs to actual project IDs
+        bot_user: The bot user to use for creating the cycles
+    Returns:
+        A mapping of seed cycle IDs to actual cycle IDs
+    """
     cycle_seeds = read_seed_file("cycles.json")
     if not cycle_seeds:
-        return
+        return {}
 
     cycle_map: Dict[int, uuid.UUID] = {}
 
@@ -403,8 +420,8 @@ def create_cycles(workspace: Workspace, project_map: Dict[int, uuid.UUID]) -> Di
             end_date=end_date,
             project_id=project_map[project_id],
             workspace=workspace,
-            created_by_id=workspace.created_by_id,
-            owned_by_id=workspace.created_by_id,
+            created_by_id=bot_user.id,
+            owned_by_id=bot_user.id,
         )
 
         cycle_map[cycle_id] = cycle.id
@@ -412,16 +429,17 @@ def create_cycles(workspace: Workspace, project_map: Dict[int, uuid.UUID]) -> Di
     return cycle_map
 
 
-def create_modules(workspace: Workspace, project_map: Dict[int, uuid.UUID]) -> None:
+def create_modules(workspace: Workspace, project_map: Dict[int, uuid.UUID], bot_user: User) -> None:
     """Creates modules for each project in the workspace.
 
     Args:
         workspace: The workspace containing the projects
         project_map: Mapping of seed project IDs to actual project IDs
+        bot_user: The bot user to use for creating the modules
     """
     module_seeds = read_seed_file("modules.json")
     if not module_seeds:
-        return
+        return {}
 
     module_map: Dict[int, uuid.UUID] = {}
 
@@ -438,19 +456,20 @@ def create_modules(workspace: Workspace, project_map: Dict[int, uuid.UUID]) -> N
             target_date=end_date,
             project_id=project_map[project_id],
             workspace=workspace,
-            created_by_id=workspace.created_by_id,
+            created_by_id=bot_user.id,
         )
         module_map[module_id] = module.id
         logger.info(f"Task: workspace_seed_task -> Module {module_id} created")
     return module_map
 
 
-def create_views(workspace: Workspace, project_map: Dict[int, uuid.UUID]) -> None:
+def create_views(workspace: Workspace, project_map: Dict[int, uuid.UUID], bot_user: User) -> None:
     """Creates views for each project in the workspace.
 
     Args:
         workspace: The workspace containing the projects
         project_map: Mapping of seed project IDs to actual project IDs
+        bot_user: The bot user to use for creating the views
     """
 
     view_seeds = read_seed_file("views.json")
@@ -463,8 +482,8 @@ def create_views(workspace: Workspace, project_map: Dict[int, uuid.UUID]) -> Non
             **view_seed,
             project_id=project_map[project_id],
             workspace=workspace,
-            created_by_id=workspace.created_by_id,
-            owned_by_id=workspace.created_by_id,
+            created_by_id=bot_user.id,
+            owned_by_id=bot_user.id,
         )
 
 
@@ -486,29 +505,42 @@ def workspace_seed(workspace_id: uuid.UUID) -> None:
         # Get the workspace
         workspace = Workspace.objects.get(id=workspace_id)
 
+        # Create a bot user for creating all the workspace data
+        bot_user = User.objects.create(
+            username=f"bot_user_{workspace.id}",
+            display_name="Plane",
+            first_name="Plane",
+            last_name="",
+            is_bot=True,
+            bot_type=BotTypeEnum.WORKSPACE_SEED,
+            email=f"bot_user_{workspace.id}@plane.so",
+            password=make_password(uuid.uuid4().hex),
+            is_password_autoset=True,
+        )
+
         # Create a project with the same name as workspace
-        project_map = create_project_and_member(workspace)
+        project_map = create_project_and_member(workspace, bot_user)
 
         # Create project states
-        state_map = create_project_states(workspace, project_map)
+        state_map = create_project_states(workspace, project_map, bot_user)
 
         # Create project labels
-        label_map = create_project_labels(workspace, project_map)
+        label_map = create_project_labels(workspace, project_map, bot_user)
 
         # Create project cycles
-        cycle_map = create_cycles(workspace, project_map)
+        cycle_map = create_cycles(workspace, project_map, bot_user)
 
         # Create project modules
-        module_map = create_modules(workspace, project_map)
+        module_map = create_modules(workspace, project_map, bot_user)
 
         # create project issues
-        create_project_issues(workspace, project_map, state_map, label_map, cycle_map, module_map)
+        create_project_issues(workspace, project_map, state_map, label_map, cycle_map, module_map, bot_user)
 
         # create project views
-        create_views(workspace, project_map)
+        create_views(workspace, project_map, bot_user)
 
         # create project pages
-        create_pages(workspace, project_map)
+        create_pages(workspace, project_map, bot_user)
 
         logger.info(f"Task: workspace_seed_task -> Workspace {workspace_id} seeded successfully")
         return
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
new file mode 100644
index 0000000000..8813f34db2
--- /dev/null
+++ b/apps/api/plane/db/management/commands/copy_issue_comment_to_description.py
@@ -0,0 +1,49 @@
+# Django imports
+from django.core.management.base import BaseCommand
+from django.db import transaction
+
+# Module imports
+from plane.db.models import Description
+from plane.db.models import IssueComment
+
+
+class Command(BaseCommand):
+    help = "Create Description records for existing IssueComment"
+
+    def handle(self, *args, **kwargs):
+        batch_size = 500
+
+        while True:
+            comments = list(
+                IssueComment.objects.filter(description_id__isnull=True).order_by("created_at")[:batch_size]
+            )
+
+            if not comments:
+                break
+
+            with transaction.atomic():
+                descriptions = [
+                    Description(
+                        created_at=comment.created_at,
+                        updated_at=comment.updated_at,
+                        description_json=comment.comment_json,
+                        description_html=comment.comment_html,
+                        description_stripped=comment.comment_stripped,
+                        project_id=comment.project_id,
+                        created_by_id=comment.created_by_id,
+                        updated_by_id=comment.updated_by_id,
+                        workspace_id=comment.workspace_id,
+                    )
+                    for comment in comments
+                ]
+
+                created_descriptions = Description.objects.bulk_create(descriptions)
+
+                comments_to_update = []
+                for comment, description in zip(comments, created_descriptions):
+                    comment.description_id = description.id
+                    comments_to_update.append(comment)
+
+                IssueComment.objects.bulk_update(comments_to_update, ["description_id"])
+
+        self.stdout.write(self.style.SUCCESS("Successfully Copied IssueComment to Description"))
diff --git a/apps/api/plane/db/migrations/0109_issuecomment_description_and_parent_id.py b/apps/api/plane/db/migrations/0109_issuecomment_description_and_parent_id.py
new file mode 100644
index 0000000000..4376c4ab8a
--- /dev/null
+++ b/apps/api/plane/db/migrations/0109_issuecomment_description_and_parent_id.py
@@ -0,0 +1,24 @@
+# Generated by Django 4.2.22 on 2025-11-06 08:28
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0108_alter_issueactivity_issue_comment'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='issuecomment',
+            name='description',
+            field=models.OneToOneField(null=True, on_delete=django.db.models.deletion.CASCADE, related_name='issue_comment_description', to='db.description'),
+        ),
+        migrations.AddField(
+            model_name='issuecomment',
+            name='parent',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='parent_issue_comment', to='db.issuecomment'),
+        ),
+    ]
diff --git a/apps/api/plane/db/migrations/0110_workspaceuserproperties_navigation_control_preference_and_more.py b/apps/api/plane/db/migrations/0110_workspaceuserproperties_navigation_control_preference_and_more.py
new file mode 100644
index 0000000000..a36f54c265
--- /dev/null
+++ b/apps/api/plane/db/migrations/0110_workspaceuserproperties_navigation_control_preference_and_more.py
@@ -0,0 +1,23 @@
+# Generated by Django 4.2.26 on 2025-11-21 11:32
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0109_issuecomment_description_and_parent_id'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='workspaceuserproperties',
+            name='navigation_control_preference',
+            field=models.CharField(choices=[('ACCORDION', 'Accordion'), ('TABBED', 'Tabbed')], default='ACCORDION', max_length=25),
+        ),
+        migrations.AddField(
+            model_name='workspaceuserproperties',
+            name='navigation_project_limit',
+            field=models.IntegerField(default=10),
+        ),
+    ]
diff --git a/apps/api/plane/db/migrations/0111_notification_notif_receiver_status_idx_and_more.py b/apps/api/plane/db/migrations/0111_notification_notif_receiver_status_idx_and_more.py
new file mode 100644
index 0000000000..5ceb1f36c0
--- /dev/null
+++ b/apps/api/plane/db/migrations/0111_notification_notif_receiver_status_idx_and_more.py
@@ -0,0 +1,39 @@
+# Generated by Django 4.2.22 on 2025-09-29 15:36
+
+from django.db import migrations, models
+from django.contrib.postgres.operations import AddIndexConcurrently
+
+
+class Migration(migrations.Migration):
+    atomic = False
+
+    dependencies = [
+        ('db', '0110_workspaceuserproperties_navigation_control_preference_and_more'),
+    ]
+
+    operations = [
+        AddIndexConcurrently(
+            model_name='notification',
+            index=models.Index(fields=['receiver', 'workspace', 'read_at', 'created_at'], name='notif_receiver_status_idx'),
+        ),
+        AddIndexConcurrently(
+            model_name='notification',
+            index=models.Index(fields=['receiver', 'workspace', 'entity_name', 'read_at'], name='notif_receiver_entity_idx'),
+        ),
+        AddIndexConcurrently(
+            model_name='notification',
+            index=models.Index(fields=['receiver', 'workspace', 'snoozed_till', 'archived_at'], name='notif_receiver_state_idx'),
+        ),
+        AddIndexConcurrently(
+            model_name='notification',
+            index=models.Index(fields=['receiver', 'workspace', 'sender'], name='notif_receiver_sender_idx'),
+        ),
+        AddIndexConcurrently(
+            model_name='notification',
+            index=models.Index(fields=['workspace', 'entity_identifier', 'entity_name'], name='notif_entity_lookup_idx'),
+        ),
+        AddIndexConcurrently(
+            model_name='fileasset',
+            index=models.Index(fields=['asset'], name='asset_asset_idx'),
+        ),
+    ]
diff --git a/apps/api/plane/db/migrations/0112_auto_20251124_0603.py b/apps/api/plane/db/migrations/0112_auto_20251124_0603.py
new file mode 100644
index 0000000000..6d5d4b9da3
--- /dev/null
+++ b/apps/api/plane/db/migrations/0112_auto_20251124_0603.py
@@ -0,0 +1,92 @@
+# Generated by Django 4.2.25 on 2025-11-24 06:03
+
+from django.db import migrations, transaction
+from django.db.models import OuterRef, Subquery
+
+import logging
+logger = logging.getLogger("plane.migrations")
+
+BATCH_SIZE = 4000
+
+
+def create_triage_state(apps, _schema_editor):
+    Project = apps.get_model("db", "Project")
+    State = apps.get_model("db", "State")
+    Issue = apps.get_model("db", "Issue")
+
+
+    # 1) Bulk-update existing triage states
+    triage_qs = State.objects.filter(group="triage")
+    projects_with_triage_state = list(triage_qs.values_list("project_id", flat=True))
+    triage_qs.update(
+        name="Triage",
+        color="#4E5355",
+        sequence=65000,
+        default=False,
+    )
+    logger.info(f"Updated {triage_qs.count()} triage states.")
+
+    # 2) Projects that already have a 'Triage' name but not in triage group
+    projects_to_update_qs = (
+        State.objects.exclude(group="triage")
+        .filter(name="Triage")
+        .values_list("project_id", flat=True)
+    )
+    projects_to_update = set(projects_to_update_qs)
+    logger.info(f"Projects to update: {len(projects_to_update)}")
+
+    # 3) Create missing triage states in chunks to avoid memory spike
+    states_to_create = []
+    project_iter = Project.objects.all().values_list("id", "workspace_id").iterator()
+    for proj_id, workspace_id in project_iter:
+        if proj_id in projects_with_triage_state:
+            continue
+        if proj_id in projects_to_update:
+            name = f"Triage-{str(proj_id)[:5]}"
+        else:
+            name = "Triage"
+        states_to_create.append(
+            State(
+                name=name,
+                group="triage",
+                project_id=proj_id,
+                workspace_id=workspace_id,
+                color="#4E5355",
+                sequence=65000,
+                default=False,
+            )
+        )
+        if len(states_to_create) >= BATCH_SIZE:
+            State.objects.bulk_create(states_to_create, batch_size=BATCH_SIZE)
+            states_to_create = []
+
+    if states_to_create:
+        State.objects.bulk_create(states_to_create, batch_size=BATCH_SIZE)
+
+    # 4) Update issues: use deterministic subquery and only update issues that will get a triage state.
+    with transaction.atomic():
+        triage_state_subquery = (
+            State.objects.filter(
+                group="triage",
+                project_id=OuterRef("project_id"),
+                workspace_id=OuterRef("workspace_id"),
+            )
+            .values("id")[:1]
+        )
+
+        updated_count = Issue._default_manager.filter(
+            issue_intake__status__in=[-2, 0],
+        ).update(state_id=Subquery(triage_state_subquery))
+        logger.info(f"Updated {updated_count} issues.")
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0111_notification_notif_receiver_status_idx_and_more'),
+    ]
+
+    operations = [
+        migrations.RunPython(create_triage_state, 
+        reverse_code=migrations.RunPython.noop),
+    ]
diff --git a/apps/api/plane/db/mixins.py b/apps/api/plane/db/mixins.py
index be5613b613..e43a46e294 100644
--- a/apps/api/plane/db/mixins.py
+++ b/apps/api/plane/db/mixins.py
@@ -188,3 +188,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 fcf77b936b..41fd32bd55 100644
--- a/apps/api/plane/db/models/__init__.py
+++ b/apps/api/plane/db/models/__init__.py
@@ -52,12 +52,13 @@ from .project import (
     ProjectIdentifier,
     ProjectMember,
     ProjectMemberInvite,
+    ProjectNetwork,
     ProjectPublicMember,
 )
 from .session import Session
 from .social_connection import SocialLoginConnection
-from .state import State
-from .user import Account, Profile, User
+from .state import State, StateGroup, DEFAULT_STATES
+from .user import Account, Profile, User, BotTypeEnum
 from .view import IssueView
 from .webhook import Webhook, WebhookLog
 from .workspace import (
diff --git a/apps/api/plane/db/models/asset.py b/apps/api/plane/db/models/asset.py
index 1de0f18b40..ed9879a733 100644
--- a/apps/api/plane/db/models/asset.py
+++ b/apps/api/plane/db/models/asset.py
@@ -66,6 +66,7 @@ class FileAsset(BaseModel):
             models.Index(fields=["entity_type"], name="asset_entity_type_idx"),
             models.Index(fields=["entity_identifier"], name="asset_entity_identifier_idx"),
             models.Index(fields=["entity_type", "entity_identifier"], name="asset_entity_idx"),
+            models.Index(fields=["asset"], name="asset_asset_idx"),
         ]
 
     def __str__(self):
diff --git a/apps/api/plane/db/models/issue.py b/apps/api/plane/db/models/issue.py
index 8f9de34093..07ebdf0a41 100644
--- a/apps/api/plane/db/models/issue.py
+++ b/apps/api/plane/db/models/issue.py
@@ -17,6 +17,9 @@ from plane.db.mixins import SoftDeletionManager
 from plane.utils.exception_logger import log_exception
 from .project import ProjectBaseModel
 from plane.utils.uuid import convert_uuid_to_integer
+from .description import Description
+from plane.db.mixins import ChangeTrackerMixin
+from .state import StateGroup
 
 
 def get_default_properties():
@@ -95,6 +98,7 @@ class IssueManager(SoftDeletionManager):
             )
             .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)
             .exclude(is_draft=True)
@@ -203,39 +207,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 = (
@@ -442,10 +442,13 @@ class IssueActivity(ProjectBaseModel):
         return str(self.issue)
 
 
-class IssueComment(ProjectBaseModel):
+class IssueComment(ChangeTrackerMixin, ProjectBaseModel):
     comment_stripped = models.TextField(verbose_name="Comment", blank=True)
     comment_json = models.JSONField(blank=True, default=dict)
     comment_html = models.TextField(blank=True, default="<p></p>")
+    description = models.OneToOneField(
+        "db.Description", on_delete=models.CASCADE, related_name="issue_comment_description", null=True
+    )
     attachments = ArrayField(models.URLField(), size=10, blank=True, default=list)
     issue = models.ForeignKey(Issue, on_delete=models.CASCADE, related_name="issue_comments")
     # System can also create comment
@@ -463,10 +466,62 @@ class IssueComment(ProjectBaseModel):
     external_source = models.CharField(max_length=255, null=True, blank=True)
     external_id = models.CharField(max_length=255, blank=True, null=True)
     edited_at = models.DateTimeField(null=True, blank=True)
+    parent = models.ForeignKey(
+        "self", on_delete=models.CASCADE, null=True, blank=True, related_name="parent_issue_comment"
+    )
+
+    TRACKED_FIELDS = ["comment_stripped", "comment_json", "comment_html"]
 
     def save(self, *args, **kwargs):
+        """
+        Custom save method for IssueComment that manages the associated Description model.
+
+        This method handles creation and updates of both the comment and its description in a
+        single atomic transaction to ensure data consistency.
+        """
+
         self.comment_stripped = strip_tags(self.comment_html) if self.comment_html != "" else ""
-        return super(IssueComment, self).save(*args, **kwargs)
+        is_creating = self._state.adding
+
+        # Prepare description defaults
+        description_defaults = {
+            "workspace_id": self.workspace_id,
+            "project_id": self.project_id,
+            "created_by_id": self.created_by_id,
+            "updated_by_id": self.updated_by_id,
+            "description_stripped": self.comment_stripped,
+            "description_json": self.comment_json,
+            "description_html": self.comment_html,
+        }
+
+        with transaction.atomic():
+            super(IssueComment, self).save(*args, **kwargs)
+
+            if is_creating or not self.description_id:
+                # Create new description for new comment
+                description = Description.objects.create(**description_defaults)
+                self.description_id = description.id
+                super(IssueComment, self).save(update_fields=["description_id"])
+            else:
+                field_mapping = {
+                    "comment_html": "description_html",
+                    "comment_stripped": "description_stripped",
+                    "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 comment_field in self._changes_on_save
+                }
+
+                # Update description only if comment fields changed
+                if changed_fields and self.description_id:
+                    Description.objects.filter(pk=self.description_id).update(
+                        **changed_fields, updated_by_id=self.updated_by_id, updated_at=self.updated_at
+                    )
 
     class Meta:
         verbose_name = "Issue Comment"
diff --git a/apps/api/plane/db/models/notification.py b/apps/api/plane/db/models/notification.py
index aa58bc30cf..fd97a3c968 100644
--- a/apps/api/plane/db/models/notification.py
+++ b/apps/api/plane/db/models/notification.py
@@ -38,6 +38,26 @@ class Notification(BaseModel):
             models.Index(fields=["entity_name"], name="notif_entity_name_idx"),
             models.Index(fields=["read_at"], name="notif_read_at_idx"),
             models.Index(fields=["receiver", "read_at"], name="notif_entity_idx"),
+            models.Index(
+                fields=["receiver", "workspace", "read_at", "created_at"],
+                name="notif_receiver_status_idx",
+            ),
+            models.Index(
+                fields=["receiver", "workspace", "entity_name", "read_at"],
+                name="notif_receiver_entity_idx",
+            ),
+            models.Index(
+                fields=["receiver", "workspace", "snoozed_till", "archived_at"],
+                name="notif_receiver_state_idx",
+            ),
+            models.Index(
+                fields=["receiver", "workspace", "sender"],
+                name="notif_receiver_sender_idx",
+            ),
+            models.Index(
+                fields=["workspace", "entity_identifier", "entity_name"],
+                name="notif_entity_lookup_idx",
+            ),
         ]
 
     def __str__(self):
diff --git a/apps/api/plane/db/models/project.py b/apps/api/plane/db/models/project.py
index ed5a087723..173ed43854 100644
--- a/apps/api/plane/db/models/project.py
+++ b/apps/api/plane/db/models/project.py
@@ -59,7 +59,7 @@ def get_default_props():
 
 
 def get_default_preferences():
-    return {"pages": {"block_display": True}}
+    return {"pages": {"block_display": True}, "navigation": {"default_tab": "work_items", "hide_in_more_menu": []}}
 
 
 class Project(BaseModel):
@@ -116,6 +116,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
@@ -155,7 +160,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)
 
 
diff --git a/apps/api/plane/db/models/state.py b/apps/api/plane/db/models/state.py
index e9d56acf96..aeb08b8b2e 100644
--- a/apps/api/plane/db/models/state.py
+++ b/apps/api/plane/db/models/state.py
@@ -7,6 +7,71 @@ from django.db.models import Q
 from .project import ProjectBaseModel
 
 
+class StateGroup(models.TextChoices):
+    BACKLOG = "backlog", "Backlog"
+    UNSTARTED = "unstarted", "Unstarted"
+    STARTED = "started", "Started"
+    COMPLETED = "completed", "Completed"
+    CANCELLED = "cancelled", "Cancelled"
+    TRIAGE = "triage", "Triage"
+
+
+# Default states
+DEFAULT_STATES = [
+    {
+        "name": "Backlog",
+        "color": "#60646C",
+        "sequence": 15000,
+        "group": StateGroup.BACKLOG.value,
+        "default": True,
+    },
+    {
+        "name": "Todo",
+        "color": "#60646C",
+        "sequence": 25000,
+        "group": StateGroup.UNSTARTED.value,
+    },
+    {
+        "name": "In Progress",
+        "color": "#F59E0B",
+        "sequence": 35000,
+        "group": StateGroup.STARTED.value,
+    },
+    {
+        "name": "Done",
+        "color": "#46A758",
+        "sequence": 45000,
+        "group": StateGroup.COMPLETED.value,
+    },
+    {
+        "name": "Cancelled",
+        "color": "#9AA4BC",
+        "sequence": 55000,
+        "group": StateGroup.CANCELLED.value,
+    },
+    {
+        "name": "Triage",
+        "color": "#4E5355",
+        "sequence": 65000,
+        "group": StateGroup.TRIAGE.value,
+    },
+]
+
+
+class StateManager(models.Manager):
+    """Default manager - excludes triage states"""
+
+    def get_queryset(self):
+        return super().get_queryset().exclude(group=StateGroup.TRIAGE.value)
+
+
+class TriageStateManager(models.Manager):
+    """Manager for triage states only"""
+
+    def get_queryset(self):
+        return super().get_queryset().filter(group=StateGroup.TRIAGE.value)
+
+
 class State(ProjectBaseModel):
     name = models.CharField(max_length=255, verbose_name="State Name")
     description = models.TextField(verbose_name="State Description", blank=True)
@@ -14,15 +79,8 @@ class State(ProjectBaseModel):
     slug = models.SlugField(max_length=100, blank=True)
     sequence = models.FloatField(default=65535)
     group = models.CharField(
-        choices=(
-            ("backlog", "Backlog"),
-            ("unstarted", "Unstarted"),
-            ("started", "Started"),
-            ("completed", "Completed"),
-            ("cancelled", "Cancelled"),
-            ("triage", "Triage"),
-        ),
-        default="backlog",
+        choices=StateGroup.choices,
+        default=StateGroup.BACKLOG,
         max_length=20,
     )
     is_triage = models.BooleanField(default=False)
@@ -30,6 +88,10 @@ class State(ProjectBaseModel):
     external_source = models.CharField(max_length=255, null=True, blank=True)
     external_id = models.CharField(max_length=255, blank=True, null=True)
 
+    objects = StateManager()
+    all_state_objects = models.Manager()
+    triage_objects = TriageStateManager()
+
     def __str__(self):
         """Return name of the state"""
         return f"{self.name} <{self.project.name}>"
diff --git a/apps/api/plane/db/models/user.py b/apps/api/plane/db/models/user.py
index c9f0df9b0d..247c04745a 100644
--- a/apps/api/plane/db/models/user.py
+++ b/apps/api/plane/db/models/user.py
@@ -35,6 +35,10 @@ def get_mobile_default_onboarding():
     }
 
 
+class BotTypeEnum(models.TextChoices):
+    WORKSPACE_SEED = "WORKSPACE_SEED", "Workspace Seed"
+
+
 class User(AbstractBaseUser, PermissionsMixin):
     id = models.UUIDField(default=uuid.uuid4, unique=True, editable=False, db_index=True, primary_key=True)
     username = models.CharField(max_length=128, unique=True)
@@ -143,6 +147,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
@@ -163,6 +172,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
diff --git a/apps/api/plane/db/models/workspace.py b/apps/api/plane/db/models/workspace.py
index 0f5c09760a..d3470d531e 100644
--- a/apps/api/plane/db/models/workspace.py
+++ b/apps/api/plane/db/models/workspace.py
@@ -301,6 +301,10 @@ class WorkspaceTheme(BaseModel):
 
 
 class WorkspaceUserProperties(BaseModel):
+    class NavigationControlPreference(models.TextChoices):
+        ACCORDION = "ACCORDION", "Accordion"
+        TABBED = "TABBED", "Tabbed"
+
     workspace = models.ForeignKey(
         "db.Workspace",
         on_delete=models.CASCADE,
@@ -315,6 +319,12 @@ class WorkspaceUserProperties(BaseModel):
     display_filters = models.JSONField(default=get_default_display_filters)
     display_properties = models.JSONField(default=get_default_display_properties)
     rich_filters = models.JSONField(default=dict)
+    navigation_project_limit = models.IntegerField(default=10)
+    navigation_control_preference = models.CharField(
+        max_length=25,
+        choices=NavigationControlPreference.choices,
+        default=NavigationControlPreference.ACCORDION,
+    )
 
     class Meta:
         unique_together = ["workspace", "user", "deleted_at"]
@@ -407,6 +417,7 @@ class WorkspaceUserPreference(BaseModel):
         DRAFTS = "drafts", "Drafts"
         YOUR_WORK = "your_work", "Your Work"
         ARCHIVES = "archives", "Archives"
+        STICKIES = "stickies", "Stickies"
 
     workspace = models.ForeignKey(
         "db.Workspace",
diff --git a/apps/api/plane/license/api/views/admin.py b/apps/api/plane/license/api/views/admin.py
index 5b70beab9d..0d37f4fdc0 100644
--- a/apps/api/plane/license/api/views/admin.py
+++ b/apps/api/plane/license/api/views/admin.py
@@ -134,8 +134,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)
diff --git a/apps/api/plane/license/api/views/instance.py b/apps/api/plane/license/api/views/instance.py
index 23eeebec1c..fed0c5e17e 100644
--- a/apps/api/plane/license/api/views/instance.py
+++ b/apps/api/plane/license/api/views/instance.py
@@ -175,6 +175,7 @@ class InstanceEndpoint(BaseAPIView):
         data["app_base_url"] = settings.APP_BASE_URL
 
         data["instance_changelog_url"] = settings.INSTANCE_CHANGELOG_URL
+        data["is_self_managed"] = settings.IS_SELF_MANAGED
 
         instance_data = serializer.data
         instance_data["workspaces_exist"] = Workspace.objects.count() >= 1
diff --git a/apps/api/plane/middleware/logger.py b/apps/api/plane/middleware/logger.py
index d513ee3e36..07facdab0e 100644
--- a/apps/api/plane/middleware/logger.py
+++ b/apps/api/plane/middleware/logger.py
@@ -4,13 +4,15 @@ 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 +72,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 +110,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/seeds/data/issues.json b/apps/api/plane/seeds/data/issues.json
index badd0e6115..be966e723a 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 d719220bfe..00c5c91ef0 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/common.py b/apps/api/plane/settings/common.py
index d47bf6293f..8f28b9e986 100644
--- a/apps/api/plane/settings/common.py
+++ b/apps/api/plane/settings/common.py
@@ -25,6 +25,9 @@ SECRET_KEY = os.environ.get("SECRET_KEY", get_random_secret_key())
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = int(os.environ.get("DEBUG", "0"))
 
+# Self-hosted mode
+IS_SELF_MANAGED = True
+
 # Allowed Hosts
 ALLOWED_HOSTS = os.environ.get("ALLOWED_HOSTS", "*").split(",")
 
@@ -33,6 +36,7 @@ INSTALLED_APPS = [
     "django.contrib.auth",
     "django.contrib.contenttypes",
     "django.contrib.sessions",
+    "django.contrib.staticfiles",
     # Inhouse apps
     "plane.analytics",
     "plane.app",
@@ -55,6 +59,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",
@@ -70,6 +75,11 @@ MIDDLEWARE = [
 # Rest Framework settings
 REST_FRAMEWORK = {
     "DEFAULT_AUTHENTICATION_CLASSES": ("rest_framework.authentication.SessionAuthentication",),
+    "DEFAULT_THROTTLE_CLASSES": ("rest_framework.throttling.AnonRateThrottle",),
+    "DEFAULT_THROTTLE_RATES": {
+        "anon": "30/minute",
+        "asset_id": "5/minute",
+    },
     "DEFAULT_PERMISSION_CLASSES": ("rest_framework.permissions.IsAuthenticated",),
     "DEFAULT_RENDERER_CLASSES": ("rest_framework.renderers.JSONRenderer",),
     "DEFAULT_FILTER_BACKENDS": ("django_filters.rest_framework.DjangoFilterBackend",),
diff --git a/apps/api/plane/settings/local.py b/apps/api/plane/settings/local.py
index 84737712b5..15f05aa3d7 100644
--- a/apps/api/plane/settings/local.py
+++ b/apps/api/plane/settings/local.py
@@ -76,5 +76,10 @@ LOGGING = {
             "handlers": ["console"],
             "propagate": False,
         },
+        "plane.migrations": {
+            "level": "INFO",
+            "handlers": ["console"],
+            "propagate": False,
+        },
     },
 }
diff --git a/apps/api/plane/settings/production.py b/apps/api/plane/settings/production.py
index 4725db38a6..8df7ae9060 100644
--- a/apps/api/plane/settings/production.py
+++ b/apps/api/plane/settings/production.py
@@ -86,5 +86,10 @@ LOGGING = {
             "handlers": ["console"],
             "propagate": False,
         },
+        "plane.migrations": {
+            "level": "DEBUG" if DEBUG else "INFO",
+            "handlers": ["console"],
+            "propagate": False,
+        },
     },
 }
diff --git a/apps/api/plane/settings/storage.py b/apps/api/plane/settings/storage.py
index 0a07200863..4ebf6c58e8 100644
--- a/apps/api/plane/settings/storage.py
+++ b/apps/api/plane/settings/storage.py
@@ -29,6 +29,8 @@ class S3Storage(S3Boto3Storage):
         self.aws_region = os.environ.get("AWS_REGION")
         # Use the AWS_S3_ENDPOINT_URL environment variable for the endpoint URL
         self.aws_s3_endpoint_url = os.environ.get("AWS_S3_ENDPOINT_URL") or os.environ.get("MINIO_ENDPOINT_URL")
+        # Use the SIGNED_URL_EXPIRATION environment variable for the expiration time (default: 3600 seconds)
+        self.signed_url_expiration = int(os.environ.get("SIGNED_URL_EXPIRATION", "3600"))
 
         if os.environ.get("USE_MINIO") == "1":
             # Determine protocol based on environment variable
@@ -56,8 +58,10 @@ class S3Storage(S3Boto3Storage):
                 config=boto3.session.Config(signature_version="s3v4"),
             )
 
-    def generate_presigned_post(self, object_name, file_type, file_size, expiration=3600):
+    def generate_presigned_post(self, object_name, file_type, file_size, expiration=None):
         """Generate a presigned URL to upload an S3 object"""
+        if expiration is None:
+            expiration = self.signed_url_expiration
         fields = {"Content-Type": file_type}
 
         conditions = [
@@ -104,13 +108,15 @@ class S3Storage(S3Boto3Storage):
     def generate_presigned_url(
         self,
         object_name,
-        expiration=3600,
+        expiration=None,
         http_method="GET",
         disposition="inline",
         filename=None,
     ):
-        content_disposition = self._get_content_disposition(disposition, filename)
         """Generate a presigned URL to share an S3 object"""
+        if expiration is None:
+            expiration = self.signed_url_expiration
+        content_disposition = self._get_content_disposition(disposition, filename)
         try:
             response = self.s3_client.generate_presigned_url(
                 "get_object",
@@ -158,3 +164,38 @@ class S3Storage(S3Boto3Storage):
             return None
 
         return response
+
+    def upload_file(
+        self,
+        file_obj,
+        object_name: str,
+        content_type: str = None,
+        extra_args: dict = {},
+    ) -> bool:
+        """Upload a file directly to S3"""
+        try:
+            if content_type:
+                extra_args["ContentType"] = content_type
+
+            self.s3_client.upload_fileobj(
+                file_obj,
+                self.aws_storage_bucket_name,
+                object_name,
+                ExtraArgs=extra_args,
+            )
+            return True
+        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/space/views/asset.py b/apps/api/plane/space/views/asset.py
index 6ed5ab9b6a..faabd97ab6 100644
--- a/apps/api/plane/space/views/asset.py
+++ b/apps/api/plane/space/views/asset.py
@@ -11,11 +11,12 @@ from rest_framework import status
 from rest_framework.permissions import AllowAny, IsAuthenticated
 from rest_framework.response import Response
 
-# Module imports
-from .base import BaseAPIView
+from plane.bgtasks.storage_metadata_task import get_asset_object_metadata
 from plane.db.models import DeployBoard, FileAsset
 from plane.settings.storage import S3Storage
-from plane.bgtasks.storage_metadata_task import get_asset_object_metadata
+
+# Module imports
+from .base import BaseAPIView
 
 
 class EntityAssetEndpoint(BaseAPIView):
@@ -167,7 +168,7 @@ class EntityAssetEndpoint(BaseAPIView):
 class AssetRestoreEndpoint(BaseAPIView):
     """Endpoint to restore a deleted assets."""
 
-    def post(self, request, anchor, asset_id):
+    def post(self, request, anchor, pk):
         # Get the deploy board
         deploy_board = DeployBoard.objects.filter(anchor=anchor, entity_name="project").first()
         # Check if the project is published
@@ -175,7 +176,7 @@ class AssetRestoreEndpoint(BaseAPIView):
             return Response({"error": "Project is not published"}, status=status.HTTP_404_NOT_FOUND)
 
         # Get the asset
-        asset = FileAsset.all_objects.get(id=asset_id, workspace=deploy_board.workspace)
+        asset = FileAsset.all_objects.get(id=pk, workspace=deploy_board.workspace)
         asset.is_deleted = False
         asset.deleted_at = None
         asset.save(update_fields=["is_deleted", "deleted_at"])
diff --git a/apps/api/plane/space/views/intake.py b/apps/api/plane/space/views/intake.py
index 60d4443b5d..7ea2dee91f 100644
--- a/apps/api/plane/space/views/intake.py
+++ b/apps/api/plane/space/views/intake.py
@@ -12,7 +12,7 @@ from rest_framework.response import Response
 
 # Module imports
 from .base import BaseViewSet
-from plane.db.models import IntakeIssue, Issue, IssueLink, FileAsset, DeployBoard
+from plane.db.models import IntakeIssue, Issue, IssueLink, FileAsset, DeployBoard, State, StateGroup
 from plane.app.serializers import (
     IssueSerializer,
     IntakeIssueSerializer,
@@ -121,6 +121,22 @@ class IntakeIssuePublicViewSet(BaseViewSet):
         ]:
             return Response({"error": "Invalid priority"}, status=status.HTTP_400_BAD_REQUEST)
 
+        # get the triage state
+        triage_state = State.triage_objects.filter(
+            project_id=project_deploy_board.project_id, workspace_id=project_deploy_board.workspace_id
+        ).first()
+
+        if not triage_state:
+            triage_state = State.objects.create(
+                name="Triage",
+                group=StateGroup.TRIAGE.value,
+                project_id=project_deploy_board.project_id,
+                workspace_id=project_deploy_board.workspace_id,
+                color="#4E5355",
+                sequence=65000,
+                default=False,
+            )
+
         # create an issue
         issue = Issue.objects.create(
             name=request.data.get("issue", {}).get("name"),
@@ -128,6 +144,7 @@ class IntakeIssuePublicViewSet(BaseViewSet):
             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,
+            state_id=triage_state.id,
         )
 
         # Create an Issue Activity
@@ -191,7 +208,7 @@ class IntakeIssuePublicViewSet(BaseViewSet):
             issue,
             data=issue_data,
             partial=True,
-            context={"project_id": project_deploy_board.project_id},
+            context={"project_id": project_deploy_board.project_id, "allow_triage_state": True},
         )
 
         if issue_serializer.is_valid():
diff --git a/apps/api/plane/static/logos/Logo.png b/apps/api/plane/static/logos/Logo.png
new file mode 100644
index 0000000000..385ed57aac
Binary files /dev/null and b/apps/api/plane/static/logos/Logo.png differ
diff --git a/apps/api/plane/tests/contract/api/test_cycles.py b/apps/api/plane/tests/contract/api/test_cycles.py
index fb4ad3f335..644fe2bef9 100644
--- a/apps/api/plane/tests/contract/api/test_cycles.py
+++ b/apps/api/plane/tests/contract/api/test_cycles.py
@@ -1,8 +1,7 @@
 import pytest
 from rest_framework import status
-from django.db import IntegrityError
 from django.utils import timezone
-from datetime import datetime, timedelta
+from datetime import timedelta
 from uuid import uuid4
 
 from plane.db.models import Cycle, Project, ProjectMember
@@ -58,8 +57,6 @@ def create_cycle(db, project, create_user):
     )
 
 
-
-
 @pytest.mark.contract
 class TestCycleListCreateAPIEndpoint:
     """Test Cycle List and Create API Endpoint"""
@@ -85,7 +82,6 @@ class TestCycleListCreateAPIEndpoint:
         assert created_cycle.project == project
         assert created_cycle.owned_by_id is not None
 
-
     @pytest.mark.django_db
     def test_create_cycle_invalid_data(self, api_key_client, workspace, project):
         """Test cycle creation with invalid data"""
@@ -197,7 +193,7 @@ class TestCycleListCreateAPIEndpoint:
 
         # Create cycles in different states
         now = timezone.now()
-        
+
         # Current cycle (started but not ended)
         Cycle.objects.create(
             name="Current Cycle",
@@ -207,7 +203,7 @@ class TestCycleListCreateAPIEndpoint:
             end_date=now + timedelta(days=6),
             owned_by=create_user,
         )
-        
+
         # Upcoming cycle
         Cycle.objects.create(
             name="Upcoming Cycle",
@@ -217,7 +213,7 @@ class TestCycleListCreateAPIEndpoint:
             end_date=now + timedelta(days=8),
             owned_by=create_user,
         )
-        
+
         # Completed cycle
         Cycle.objects.create(
             name="Completed Cycle",
@@ -227,7 +223,7 @@ class TestCycleListCreateAPIEndpoint:
             end_date=now - timedelta(days=3),
             owned_by=create_user,
         )
-        
+
         # Draft cycle
         Cycle.objects.create(
             name="Draft Cycle",
@@ -320,7 +316,9 @@ class TestCycleDetailAPIEndpoint:
         assert response.status_code in [status.HTTP_400_BAD_REQUEST, status.HTTP_200_OK]
 
     @pytest.mark.django_db
-    def test_update_cycle_with_external_id_conflict(self, api_key_client, workspace, project, create_cycle, create_user ):
+    def test_update_cycle_with_external_id_conflict(
+        self, api_key_client, workspace, project, create_cycle, create_user
+    ):
         """Test cycle update with conflicting external ID"""
         url = self.get_cycle_detail_url(workspace.slug, project.id, create_cycle.id)
 
@@ -363,7 +361,7 @@ class TestCycleDetailAPIEndpoint:
         response = api_key_client.get(url)
 
         assert response.status_code == status.HTTP_200_OK
-        
+
         # Check that metrics are included in response
         cycle_data = response.data
         assert "total_issues" in cycle_data
@@ -372,11 +370,11 @@ class TestCycleDetailAPIEndpoint:
         assert "started_issues" in cycle_data
         assert "unstarted_issues" in cycle_data
         assert "backlog_issues" in cycle_data
-        
+
         # All should be 0 for a new cycle
         assert cycle_data["total_issues"] == 0
         assert cycle_data["completed_issues"] == 0
         assert cycle_data["cancelled_issues"] == 0
         assert cycle_data["started_issues"] == 0
         assert cycle_data["unstarted_issues"] == 0
-        assert cycle_data["backlog_issues"] == 0
\ No newline at end of file
+        assert cycle_data["backlog_issues"] == 0
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
new file mode 100644
index 0000000000..98a0b05b24
--- /dev/null
+++ b/apps/api/plane/tests/unit/models/test_issue_comment_modal.py
@@ -0,0 +1,286 @@
+import pytest
+
+from plane.db.models import IssueComment, Description, Project, Issue, Workspace, State
+
+
+@pytest.fixture
+def workspace(create_user):
+    """Create a test workspace"""
+    return Workspace.objects.create(
+        name="Test Workspace",
+        slug="test-workspace",
+        owner=create_user,
+    )
+
+
+@pytest.fixture
+def project(workspace, create_user):
+    """Create a test project"""
+    return Project.objects.create(
+        name="Test Project",
+        identifier="TP",
+        workspace=workspace,
+        created_by=create_user,
+    )
+
+
+@pytest.fixture
+def state(project):
+    """Create a test state"""
+    return State.objects.create(
+        name="Todo",
+        project=project,
+        group="backlog",
+        default=True,
+    )
+
+
+@pytest.fixture
+def issue(workspace, project, state, create_user):
+    """Create a test issue"""
+    return Issue.objects.create(
+        name="Test Issue",
+        workspace=workspace,
+        project=project,
+        state=state,
+        created_by=create_user,
+    )
+
+
+@pytest.mark.unit
+class TestIssueCommentModel:
+    """Test the IssueComment model"""
+
+    @pytest.mark.django_db
+    def test_issue_comment_creation_creates_description(self, workspace, project, issue, create_user):
+        """Test that creating a comment automatically creates a description"""
+        # Arrange
+        comment_html = "<p>This is a test comment</p>"
+        comment_json = {"type": "doc", "content": [{"type": "paragraph", "text": "This is a test comment"}]}
+
+        # Act
+        issue_comment = IssueComment.objects.create(
+            workspace=workspace,
+            project=project,
+            issue=issue,
+            comment_html=comment_html,
+            comment_json=comment_json,
+            created_by=create_user,
+            updated_by=create_user,
+        )
+
+        # Assert
+        assert issue_comment.id is not None
+        assert issue_comment.comment_stripped == "This is a test comment"
+        assert issue_comment.description_id is not None
+
+        # Verify description was created
+        description = Description.objects.get(pk=issue_comment.description_id)
+        assert description is not None
+        assert description.description_html == comment_html
+        assert description.description_json == comment_json
+        assert description.description_stripped == "This is a test comment"
+        assert description.workspace_id == workspace.id
+        assert description.project_id == project.id
+
+    @pytest.mark.django_db
+    def test_issue_comment_update_updates_description(self, workspace, project, issue, create_user):
+        """Test that updating a comment updates its associated description"""
+        # Arrange - Create initial comment
+        initial_html = "<p>Initial comment</p>"
+        initial_json = {"type": "doc", "content": [{"type": "paragraph", "text": "Initial comment"}]}
+
+        issue_comment = IssueComment.objects.create(
+            workspace=workspace,
+            project=project,
+            issue=issue,
+            comment_html=initial_html,
+            comment_json=initial_json,
+            created_by=create_user,
+            updated_by=create_user,
+        )
+
+        initial_description_id = issue_comment.description_id
+
+        # Act - Update the comment
+        updated_html = "<p>Updated comment</p>"
+        updated_json = {"type": "doc", "content": [{"type": "paragraph", "text": "Updated comment"}]}
+
+        issue_comment.comment_html = updated_html
+        issue_comment.comment_json = updated_json
+        issue_comment.save()
+
+        # Assert
+        # Refresh from database
+        issue_comment.refresh_from_db()
+        updated_description = Description.objects.get(pk=initial_description_id)
+
+        # Verify comment was updated
+        assert issue_comment.comment_stripped == "Updated comment"
+        assert issue_comment.description_id == initial_description_id  # Same description object
+
+        # Verify description was updated
+        assert updated_description.description_html == updated_html
+        assert updated_description.description_json == updated_json
+        assert updated_description.description_stripped == "Updated comment"
+
+    @pytest.mark.django_db
+    def test_issue_comment_update_only_changed_fields_in_description(self, workspace, project, issue, create_user):
+        """Test that only changed fields are updated in description"""
+        # Arrange - Create initial comment
+        initial_html = "<p>Initial comment</p>"
+        initial_json = {"type": "doc", "content": [{"type": "paragraph", "text": "Initial comment"}]}
+
+        issue_comment = IssueComment.objects.create(
+            workspace=workspace,
+            project=project,
+            issue=issue,
+            comment_html=initial_html,
+            comment_json=initial_json,
+            created_by=create_user,
+            updated_by=create_user,
+        )
+
+        initial_description_id = issue_comment.description_id
+
+        # Act - Update only the HTML (not JSON)
+        updated_html = "<p>Updated comment only HTML</p>"
+
+        issue_comment.comment_html = updated_html
+        # comment_json remains the same
+        issue_comment.save()
+
+        # Assert
+        updated_description = Description.objects.get(pk=initial_description_id)
+
+        # Verify HTML was updated
+        assert updated_description.description_html == updated_html
+        assert updated_description.description_stripped == "Updated comment only HTML"
+
+        # Verify JSON remained the same
+        assert updated_description.description_json == initial_json
+
+    @pytest.mark.django_db
+    def test_issue_comment_no_update_when_content_unchanged(self, workspace, project, issue, create_user):
+        """Test that description is not updated when comment content doesn't change"""
+        # Arrange - Create initial comment
+        initial_html = "<p>Test comment</p>"
+        initial_json = {"type": "doc", "content": [{"type": "paragraph", "text": "Test comment"}]}
+
+        issue_comment = IssueComment.objects.create(
+            workspace=workspace,
+            project=project,
+            issue=issue,
+            comment_html=initial_html,
+            comment_json=initial_json,
+            created_by=create_user,
+            updated_by=create_user,
+        )
+
+        initial_description_id = issue_comment.description_id
+
+        # Act - Save without changing content
+        issue_comment.save()
+
+        # Assert
+        updated_description = Description.objects.get(pk=initial_description_id)
+
+        # Verify description was not updated (updated_at should be the same)
+        # Note: This test assumes updated_at is not changed when no fields change
+        assert updated_description.description_html == initial_html
+        assert updated_description.description_json == initial_json
+        assert updated_description.description_stripped == "Test comment"
+
+    @pytest.mark.django_db
+    def test_issue_comment_update_creates_description_if_missing(self, workspace, project, issue, create_user):
+        """Test that updating a comment creates description if it doesn't exist (legacy data)"""
+        # Arrange - Create comment and manually remove description (simulating legacy data)
+        initial_html = "<p>Legacy comment</p>"
+        initial_json = {"type": "doc", "content": [{"type": "paragraph", "text": "Legacy comment"}]}
+
+        issue_comment = IssueComment.objects.create(
+            workspace=workspace,
+            project=project,
+            issue=issue,
+            comment_html=initial_html,
+            comment_json=initial_json,
+            created_by=create_user,
+            updated_by=create_user,
+        )
+
+        # Simulate legacy data by removing the description
+        if issue_comment.description_id:
+            Description.objects.filter(pk=issue_comment.description_id).delete()
+            IssueComment.objects.filter(pk=issue_comment.pk).update(description_id=None)
+            issue_comment.refresh_from_db()
+
+        assert issue_comment.description_id is None
+
+        # Act - Update the comment
+        updated_html = "<p>Updated legacy comment</p>"
+        updated_json = {"type": "doc", "content": [{"type": "paragraph", "text": "Updated legacy comment"}]}
+
+        issue_comment.comment_html = updated_html
+        issue_comment.comment_json = updated_json
+        issue_comment.save()
+
+        # Assert
+        issue_comment.refresh_from_db()
+
+        # Verify description was created
+        assert issue_comment.description_id is not None
+        description = Description.objects.get(pk=issue_comment.description_id)
+        assert description.description_html == updated_html
+        assert description.description_json == updated_json
+        assert description.description_stripped == "Updated legacy comment"
+
+    @pytest.mark.django_db
+    def test_issue_comment_strips_html_tags(self, workspace, project, issue, create_user):
+        """Test that HTML tags are properly stripped from comment_html"""
+        # Arrange
+        comment_html = "<p>This is <strong>bold</strong> and <em>italic</em> text</p>"
+        comment_json = {"type": "doc", "content": []}
+
+        # Act
+        issue_comment = IssueComment.objects.create(
+            workspace=workspace,
+            project=project,
+            issue=issue,
+            comment_html=comment_html,
+            comment_json=comment_json,
+            created_by=create_user,
+            updated_by=create_user,
+        )
+
+        # Assert
+        assert issue_comment.comment_stripped == "This is bold and italic text"
+
+        # Verify description has the same stripped content
+        description = Description.objects.get(pk=issue_comment.description_id)
+        assert description.description_stripped == "This is bold and italic text"
+
+    @pytest.mark.django_db
+    def test_issue_comment_empty_html_creates_empty_stripped(self, workspace, project, issue, create_user):
+        """Test that empty HTML results in empty comment_stripped"""
+        # Arrange
+        comment_html = ""
+        comment_json = {"type": "doc", "content": []}
+
+        # Act
+        issue_comment = IssueComment.objects.create(
+            workspace=workspace,
+            project=project,
+            issue=issue,
+            comment_html=comment_html,
+            comment_json=comment_json,
+            created_by=create_user,
+            updated_by=create_user,
+        )
+
+        # Assert
+        assert issue_comment.comment_stripped == ""
+
+        # Verify description was created with empty stripped content
+        description = Description.objects.get(pk=issue_comment.description_id)
+
+        assert description.description_stripped is None
diff --git a/apps/api/plane/tests/unit/serializers/test_label.py b/apps/api/plane/tests/unit/serializers/test_label.py
new file mode 100644
index 0000000000..4775ef49ad
--- /dev/null
+++ b/apps/api/plane/tests/unit/serializers/test_label.py
@@ -0,0 +1,37 @@
+import pytest
+from plane.app.serializers import LabelSerializer
+from plane.db.models import Project, Label
+
+
+@pytest.mark.unit
+class TestLabelSerializer:
+    """Test the LabelSerializer"""
+
+    @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)
+
+        serializer = LabelSerializer(
+            data={"name": "Test Label"},
+            context={"project_id": project.id},
+        )
+        assert serializer.is_valid()
+        assert serializer.errors == {}
+        serializer.save(project_id=project.id)
+
+        label = Label.objects.all().first()
+        assert label.name == "Test Label"
+        assert label.project == project
+        assert label
+
+    @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)
+
+        Label.objects.create(name="Test Label", project=project)
+
+        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/settings/__init__.py b/apps/api/plane/tests/unit/settings/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/api/plane/tests/unit/settings/test_storage.py b/apps/api/plane/tests/unit/settings/test_storage.py
new file mode 100644
index 0000000000..fe8cf43f8b
--- /dev/null
+++ b/apps/api/plane/tests/unit/settings/test_storage.py
@@ -0,0 +1,202 @@
+import os
+from unittest.mock import Mock, patch
+import pytest
+from plane.settings.storage import S3Storage
+
+
+@pytest.mark.unit
+class TestS3StorageSignedURLExpiration:
+    """Test the configurable signed URL expiration in S3Storage"""
+
+    @patch.dict(os.environ, {}, clear=True)
+    @patch("plane.settings.storage.boto3")
+    def test_default_expiration_without_env_variable(self, mock_boto3):
+        """Test that default expiration is 3600 seconds when env variable is not set"""
+        # Mock the boto3 client
+        mock_boto3.client.return_value = Mock()
+
+        # Create S3Storage instance without SIGNED_URL_EXPIRATION env variable
+        storage = S3Storage()
+
+        # Assert default expiration is 3600
+        assert storage.signed_url_expiration == 3600
+
+    @patch.dict(os.environ, {"SIGNED_URL_EXPIRATION": "30"}, clear=True)
+    @patch("plane.settings.storage.boto3")
+    def test_custom_expiration_with_env_variable(self, mock_boto3):
+        """Test that expiration is read from SIGNED_URL_EXPIRATION env variable"""
+        # Mock the boto3 client
+        mock_boto3.client.return_value = Mock()
+
+        # Create S3Storage instance with SIGNED_URL_EXPIRATION=30
+        storage = S3Storage()
+
+        # Assert expiration is 30
+        assert storage.signed_url_expiration == 30
+
+    @patch.dict(os.environ, {"SIGNED_URL_EXPIRATION": "300"}, clear=True)
+    @patch("plane.settings.storage.boto3")
+    def test_custom_expiration_multiple_values(self, mock_boto3):
+        """Test that expiration works with different custom values"""
+        # Mock the boto3 client
+        mock_boto3.client.return_value = Mock()
+
+        # Create S3Storage instance with SIGNED_URL_EXPIRATION=300
+        storage = S3Storage()
+
+        # Assert expiration is 300
+        assert storage.signed_url_expiration == 300
+
+    @patch.dict(
+        os.environ,
+        {
+            "AWS_ACCESS_KEY_ID": "test-key",
+            "AWS_SECRET_ACCESS_KEY": "test-secret",
+            "AWS_S3_BUCKET_NAME": "test-bucket",
+            "AWS_REGION": "us-east-1",
+        },
+        clear=True,
+    )
+    @patch("plane.settings.storage.boto3")
+    def test_generate_presigned_post_uses_default_expiration(self, mock_boto3):
+        """Test that generate_presigned_post uses the configured default expiration"""
+        # Mock the boto3 client and its response
+        mock_s3_client = Mock()
+        mock_s3_client.generate_presigned_post.return_value = {
+            "url": "https://test-url.com",
+            "fields": {},
+        }
+        mock_boto3.client.return_value = mock_s3_client
+
+        # Create S3Storage instance
+        storage = S3Storage()
+
+        # Call generate_presigned_post without explicit expiration
+        storage.generate_presigned_post("test-object", "image/png", 1024)
+
+        # Assert that the boto3 method was called with the default expiration (3600)
+        mock_s3_client.generate_presigned_post.assert_called_once()
+        call_kwargs = mock_s3_client.generate_presigned_post.call_args[1]
+        assert call_kwargs["ExpiresIn"] == 3600
+
+    @patch.dict(
+        os.environ,
+        {
+            "AWS_ACCESS_KEY_ID": "test-key",
+            "AWS_SECRET_ACCESS_KEY": "test-secret",
+            "AWS_S3_BUCKET_NAME": "test-bucket",
+            "AWS_REGION": "us-east-1",
+            "SIGNED_URL_EXPIRATION": "60",
+        },
+        clear=True,
+    )
+    @patch("plane.settings.storage.boto3")
+    def test_generate_presigned_post_uses_custom_expiration(self, mock_boto3):
+        """Test that generate_presigned_post uses custom expiration from env variable"""
+        # Mock the boto3 client and its response
+        mock_s3_client = Mock()
+        mock_s3_client.generate_presigned_post.return_value = {
+            "url": "https://test-url.com",
+            "fields": {},
+        }
+        mock_boto3.client.return_value = mock_s3_client
+
+        # Create S3Storage instance with SIGNED_URL_EXPIRATION=60
+        storage = S3Storage()
+
+        # Call generate_presigned_post without explicit expiration
+        storage.generate_presigned_post("test-object", "image/png", 1024)
+
+        # Assert that the boto3 method was called with custom expiration (60)
+        mock_s3_client.generate_presigned_post.assert_called_once()
+        call_kwargs = mock_s3_client.generate_presigned_post.call_args[1]
+        assert call_kwargs["ExpiresIn"] == 60
+
+    @patch.dict(
+        os.environ,
+        {
+            "AWS_ACCESS_KEY_ID": "test-key",
+            "AWS_SECRET_ACCESS_KEY": "test-secret",
+            "AWS_S3_BUCKET_NAME": "test-bucket",
+            "AWS_REGION": "us-east-1",
+        },
+        clear=True,
+    )
+    @patch("plane.settings.storage.boto3")
+    def test_generate_presigned_url_uses_default_expiration(self, mock_boto3):
+        """Test that generate_presigned_url uses the configured default expiration"""
+        # Mock the boto3 client and its response
+        mock_s3_client = Mock()
+        mock_s3_client.generate_presigned_url.return_value = "https://test-url.com"
+        mock_boto3.client.return_value = mock_s3_client
+
+        # Create S3Storage instance
+        storage = S3Storage()
+
+        # Call generate_presigned_url without explicit expiration
+        storage.generate_presigned_url("test-object")
+
+        # Assert that the boto3 method was called with the default expiration (3600)
+        mock_s3_client.generate_presigned_url.assert_called_once()
+        call_kwargs = mock_s3_client.generate_presigned_url.call_args[1]
+        assert call_kwargs["ExpiresIn"] == 3600
+
+    @patch.dict(
+        os.environ,
+        {
+            "AWS_ACCESS_KEY_ID": "test-key",
+            "AWS_SECRET_ACCESS_KEY": "test-secret",
+            "AWS_S3_BUCKET_NAME": "test-bucket",
+            "AWS_REGION": "us-east-1",
+            "SIGNED_URL_EXPIRATION": "30",
+        },
+        clear=True,
+    )
+    @patch("plane.settings.storage.boto3")
+    def test_generate_presigned_url_uses_custom_expiration(self, mock_boto3):
+        """Test that generate_presigned_url uses custom expiration from env variable"""
+        # Mock the boto3 client and its response
+        mock_s3_client = Mock()
+        mock_s3_client.generate_presigned_url.return_value = "https://test-url.com"
+        mock_boto3.client.return_value = mock_s3_client
+
+        # Create S3Storage instance with SIGNED_URL_EXPIRATION=30
+        storage = S3Storage()
+
+        # Call generate_presigned_url without explicit expiration
+        storage.generate_presigned_url("test-object")
+
+        # Assert that the boto3 method was called with custom expiration (30)
+        mock_s3_client.generate_presigned_url.assert_called_once()
+        call_kwargs = mock_s3_client.generate_presigned_url.call_args[1]
+        assert call_kwargs["ExpiresIn"] == 30
+
+    @patch.dict(
+        os.environ,
+        {
+            "AWS_ACCESS_KEY_ID": "test-key",
+            "AWS_SECRET_ACCESS_KEY": "test-secret",
+            "AWS_S3_BUCKET_NAME": "test-bucket",
+            "AWS_REGION": "us-east-1",
+            "SIGNED_URL_EXPIRATION": "30",
+        },
+        clear=True,
+    )
+    @patch("plane.settings.storage.boto3")
+    def test_explicit_expiration_overrides_default(self, mock_boto3):
+        """Test that explicit expiration parameter overrides the default"""
+        # Mock the boto3 client and its response
+        mock_s3_client = Mock()
+        mock_s3_client.generate_presigned_url.return_value = "https://test-url.com"
+        mock_boto3.client.return_value = mock_s3_client
+
+        # Create S3Storage instance with SIGNED_URL_EXPIRATION=30
+        storage = S3Storage()
+
+        # Call generate_presigned_url with explicit expiration=120
+        storage.generate_presigned_url("test-object", expiration=120)
+
+        # Assert that the boto3 method was called with explicit expiration (120)
+        mock_s3_client.generate_presigned_url.assert_called_once()
+        call_kwargs = mock_s3_client.generate_presigned_url.call_args[1]
+        assert call_kwargs["ExpiresIn"] == 120
diff --git a/apps/api/plane/throttles/asset.py b/apps/api/plane/throttles/asset.py
new file mode 100644
index 0000000000..4846500493
--- /dev/null
+++ b/apps/api/plane/throttles/asset.py
@@ -0,0 +1,11 @@
+from rest_framework.throttling import SimpleRateThrottle
+
+
+class AssetRateThrottle(SimpleRateThrottle):
+    scope = "asset_id"
+
+    def get_cache_key(self, request, view):
+        asset_id = view.kwargs.get("asset_id")
+        if not asset_id:
+            return None
+        return f"throttle_asset_{asset_id}"
diff --git a/apps/api/plane/utils/analytics_events.py b/apps/api/plane/utils/analytics_events.py
new file mode 100644
index 0000000000..7fa8af9493
--- /dev/null
+++ b/apps/api/plane/utils/analytics_events.py
@@ -0,0 +1,4 @@
+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/build_chart.py b/apps/api/plane/utils/build_chart.py
index 9a2d9c3a0c..573636483b 100644
--- a/apps/api/plane/utils/build_chart.py
+++ b/apps/api/plane/utils/build_chart.py
@@ -51,7 +51,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/content_validator.py b/apps/api/plane/utils/content_validator.py
index 9fe01ed422..00e6c0c660 100644
--- a/apps/api/plane/utils/content_validator.py
+++ b/apps/api/plane/utils/content_validator.py
@@ -56,9 +56,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
@@ -119,6 +117,7 @@ ATTRIBUTES = {
         "aspectratio",
         "src",
         "alignment",
+        "status",
     },
     "img": {
         "width",
diff --git a/apps/api/plane/utils/cycle_transfer_issues.py b/apps/api/plane/utils/cycle_transfer_issues.py
index ec934e8892..fda9f39b95 100644
--- a/apps/api/plane/utils/cycle_transfer_issues.py
+++ b/apps/api/plane/utils/cycle_transfer_issues.py
@@ -51,9 +51,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 +214,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 +306,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 +354,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 +401,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 +451,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/filters/filter_backend.py b/apps/api/plane/utils/filters/filter_backend.py
index 2f7a27d360..11ed48f718 100644
--- a/apps/api/plane/utils/filters/filter_backend.py
+++ b/apps/api/plane/utils/filters/filter_backend.py
@@ -1,10 +1,16 @@
+# Python imports
 import json
 
-from django.core.exceptions import ValidationError
+# Django imports
 from django.db.models import Q
 from django.http import QueryDict
+
+# Third party imports
 from django_filters.utils import translate_validation
 from rest_framework import filters
+from rest_framework.exceptions import ValidationError as DRFValidationError
+
+from plane.utils.exception_logger import log_exception
 
 
 class ComplexFilterBackend(filters.BaseFilterBackend):
@@ -35,12 +41,12 @@ class ComplexFilterBackend(filters.BaseFilterBackend):
 
             normalized = self._normalize_filter_data(filter_string, "filter")
             return self._apply_json_filter(queryset, normalized, view)
-        except ValidationError:
+        except DRFValidationError:
             # Propagate validation errors unchanged
             raise
         except Exception as e:
-            # Convert unexpected errors to ValidationError to keep response consistent
-            raise ValidationError(f"Filter error: {str(e)}")
+            log_exception(e)
+            raise
 
     def _normalize_filter_data(self, raw_filter, source_label):
         """Return a dict from raw filter input or raise a ValidationError.
@@ -53,9 +59,19 @@ class ComplexFilterBackend(filters.BaseFilterBackend):
                 return json.loads(raw_filter)
             if isinstance(raw_filter, dict):
                 return raw_filter
-            raise ValidationError(f"'{source_label}' must be a dict or a JSON string.")
+            raise DRFValidationError(
+                {
+                    "message": f"'{source_label}' must be a dict or a JSON string.",
+                    "code": "invalid_filter_type",
+                }
+            )
         except json.JSONDecodeError:
-            raise ValidationError(f"Invalid JSON for '{source_label}'. Expected a valid JSON object.")
+            raise DRFValidationError(
+                {
+                    "message": (f"Invalid JSON for '{source_label}'. Expected a valid JSON object."),
+                    "code": "invalid_json",
+                }
+            )
 
     def _apply_json_filter(self, queryset, filter_data, view):
         """Process a JSON filter structure using Q object composition."""
@@ -83,7 +99,12 @@ class ComplexFilterBackend(filters.BaseFilterBackend):
         allowed_fields = set(filterset_class.base_filters.keys()) if filterset_class else None
         if not allowed_fields:
             # If no FilterSet is configured, reject filtering to avoid unintended exposure # noqa: E501
-            raise ValidationError("Filtering is not enabled for this endpoint (missing filterset_class)")
+            raise DRFValidationError(
+                {
+                    "message": ("Filtering is not enabled for this endpoint (missing filterset_class)"),
+                    "code": "filtering_not_enabled",
+                }
+            )
 
         # Extract field names from the filter data
         fields = self._extract_field_names(filter_data)
@@ -94,7 +115,25 @@ class ComplexFilterBackend(filters.BaseFilterBackend):
             # Example: 'sequence_id__gte' should be declared in base_filters
             # Special-case __range: require the '<base>__range' filter itself
             if field not in allowed_fields:
-                raise ValidationError(f"Filtering on field '{field}' is not allowed")
+                raise DRFValidationError(
+                    {
+                        "message": f"Filtering on field '{field}' is not allowed",
+                        "code": "invalid_filter_field",
+                    }
+                )
+
+    def _transform_field_name_for_validation(self, field_name):
+        """Hook: Transform a field name before validation.
+
+        Override this in subclasses to handle special field naming conventions.
+
+        Args:
+            field_name: The original field name from the filter data
+
+        Returns:
+            The transformed field name to validate against the FilterSet
+        """
+        return field_name
 
     def _extract_field_names(self, filter_data):
         """Extract all field names from a nested filter structure"""
@@ -112,8 +151,9 @@ class ComplexFilterBackend(filters.BaseFilterBackend):
                         for item in value:
                             fields.extend(self._extract_field_names(item))
                 else:
-                    # This is a field name
-                    fields.append(key)
+                    # This is a field name - apply transformation hook
+                    transformed_field = self._transform_field_name_for_validation(key)
+                    fields.append(transformed_field)
             return fields
         return []
 
@@ -171,6 +211,23 @@ class ComplexFilterBackend(filters.BaseFilterBackend):
         # Leaf dict: evaluate via FilterSet to get a Q object
         return self._build_leaf_q(node, view, queryset)
 
+    def _preprocess_leaf_conditions(self, leaf_conditions, view, queryset):
+        """Hook: Preprocess leaf conditions before building Q object.
+
+        Override this in subclasses to transform filter keys/values.
+        For example, custom property filters might need to be transformed
+        from 'customproperty_<id>__<lookup>' to 'customproperty_value__<lookup>'.
+
+        Args:
+            leaf_conditions: Dict of field filters
+            view: The view instance
+            queryset: The queryset being filtered
+
+        Returns:
+            Dict of transformed field filters
+        """
+        return leaf_conditions
+
     def _build_leaf_q(self, leaf_conditions, view, queryset):
         """Build a Q object from leaf filter conditions using the view's FilterSet.
 
@@ -186,11 +243,19 @@ class ComplexFilterBackend(filters.BaseFilterBackend):
         # Get the filterset class from the view
         filterset_class = getattr(view, "filterset_class", None)
         if not filterset_class:
-            raise ValidationError("Filtering requires a filterset_class to be defined on the view")
+            raise DRFValidationError(
+                {
+                    "message": ("Filtering requires a filterset_class to be defined on the view"),
+                    "code": "filterset_missing",
+                }
+            )
+
+        # Apply preprocessing hook
+        processed_conditions = self._preprocess_leaf_conditions(leaf_conditions, view, queryset)
 
         # Build a QueryDict from the leaf conditions
         qd = QueryDict(mutable=True)
-        for key, value in leaf_conditions.items():
+        for key, value in processed_conditions.items():
             # Default serialization to string; QueryDict expects strings
             if isinstance(value, list):
                 # Repeat key for list values (e.g., __in)
@@ -206,11 +271,23 @@ class ComplexFilterBackend(filters.BaseFilterBackend):
         fs = filterset_class(data=qd, queryset=queryset)
 
         if not fs.is_valid():
-            raise translate_validation(fs.errors)
+            ve = translate_validation(fs.errors)
+            raise DRFValidationError(
+                {
+                    "message": "Invalid filter parameters",
+                    "code": "invalid_filterset",
+                    "errors": ve.detail,
+                }
+            )
 
         # Build and return the combined Q object
         if not hasattr(fs, "build_combined_q"):
-            raise ValidationError("FilterSet must have build_combined_q method for complex filtering")
+            raise DRFValidationError(
+                {
+                    "message": ("FilterSet must have build_combined_q method for complex filtering"),
+                    "code": "missing_build_combined_q",
+                }
+            )
 
         return fs.build_combined_q()
 
@@ -243,34 +320,69 @@ class ComplexFilterBackend(filters.BaseFilterBackend):
         - Depth must not exceed max_depth
         """
         if current_depth > max_depth:
-            raise ValidationError(f"Filter nesting is too deep (max {max_depth}); found depth {current_depth}")
+            raise DRFValidationError(
+                {
+                    "message": (f"Filter nesting is too deep (max {max_depth}); found depth {current_depth}"),
+                    "code": "max_depth_exceeded",
+                }
+            )
 
         if not isinstance(node, dict):
-            raise ValidationError("Each filter node must be a JSON object")
+            raise DRFValidationError(
+                {
+                    "message": "Each filter node must be a JSON object",
+                    "code": "invalid_filter_node",
+                }
+            )
 
         if not node:
-            raise ValidationError("Filter objects must not be empty")
+            raise DRFValidationError(
+                {
+                    "message": "Filter objects must not be empty",
+                    "code": "empty_filter_object",
+                }
+            )
 
         logical_keys = [k for k in node.keys() if isinstance(k, str) and k.lower() in ("or", "and", "not")]
 
         if len(logical_keys) > 1:
-            raise ValidationError("A filter object cannot contain multiple logical operators at the same level")
+            raise DRFValidationError(
+                {
+                    "message": ("A filter object cannot contain multiple logical operators at the same level"),
+                    "code": "multiple_logical_operators",
+                }
+            )
 
         if len(logical_keys) == 1:
             op_key = logical_keys[0]
             # must not mix operator with other keys
             if len(node) != 1:
-                raise ValidationError(f"Cannot mix logical operator '{op_key}' with field keys at the same level")
+                raise DRFValidationError(
+                    {
+                        "message": (f"Cannot mix logical operator '{op_key}' with field keys at the same level"),
+                        "code": "mixed_operator_and_fields",
+                    }
+                )
 
             op = op_key.lower()
             value = node[op_key]
 
             if op in ("or", "and"):
                 if not isinstance(value, list) or len(value) == 0:
-                    raise ValidationError(f"'{op}' must be a non-empty list of filter objects")
+                    raise DRFValidationError(
+                        {
+                            "message": f"'{op}' must be a non-empty list of filter objects",
+                            "code": "invalid_operator_children",
+                        }
+                    )
                 for child in value:
                     if not isinstance(child, dict):
-                        raise ValidationError(f"All children of '{op}' must be JSON objects")
+                        raise DRFValidationError(
+                            {
+                                "message": f"All children of '{op}' must be JSON objects",
+                                "code": "invalid_operator_child_type",
+                            }
+                        )
                     self._validate_structure(
                         child,
                         max_depth=max_depth,
@@ -280,7 +392,12 @@ class ComplexFilterBackend(filters.BaseFilterBackend):
 
             if op == "not":
                 if not isinstance(value, dict):
-                    raise ValidationError("'not' must be a single JSON object")
+                    raise DRFValidationError(
+                        {
+                            "message": "'not' must be a single JSON object",
+                            "code": "invalid_not_child",
+                        }
+                    )
                 self._validate_structure(value, max_depth=max_depth, current_depth=current_depth + 1)
                 return
 
@@ -290,24 +407,49 @@ class ComplexFilterBackend(filters.BaseFilterBackend):
     def _validate_leaf(self, leaf):
         """Validate a leaf dict containing field lookups and values."""
         if not isinstance(leaf, dict) or not leaf:
-            raise ValidationError("Leaf filter must be a non-empty JSON object")
+            raise DRFValidationError(
+                {
+                    "message": "Leaf filter must be a non-empty JSON object",
+                    "code": "invalid_leaf",
+                }
+            )
 
         for key, value in leaf.items():
             if isinstance(key, str) and key.lower() in ("or", "and", "not"):
-                raise ValidationError("Logical operators cannot appear in a leaf filter object")
+                raise DRFValidationError(
+                    {
+                        "message": "Logical operators cannot appear in a leaf filter object",
+                        "code": "operator_in_leaf",
+                    }
+                )
 
             # Lists/Tuples must contain only scalar values
             if isinstance(value, (list, tuple)):
                 if len(value) == 0:
-                    raise ValidationError(f"List value for '{key}' must not be empty")
+                    raise DRFValidationError(
+                        {
+                            "message": f"List value for '{key}' must not be empty",
+                            "code": "empty_list_value",
+                        }
+                    )
                 for item in value:
                     if not self._is_scalar(item):
-                        raise ValidationError(f"List value for '{key}' must contain only scalar items")
+                        raise DRFValidationError(
+                            {
+                                "message": f"List value for '{key}' must contain only scalar items",
+                                "code": "non_scalar_list_item",
+                            }
+                        )
                 continue
 
             # Scalars and None are allowed
             if not self._is_scalar(value):
-                raise ValidationError(f"Value for '{key}' must be a scalar, null, or list/tuple of scalars")
+                raise DRFValidationError(
+                    {
+                        "message": (f"Value for '{key}' must be a scalar, null, or list/tuple of scalars"),
+                        "code": "invalid_value_type",
+                    }
+                )
 
     def _is_scalar(self, value):
         return value is None or isinstance(value, (str, int, float, bool))
diff --git a/apps/api/plane/utils/instance_config_variables/core.py b/apps/api/plane/utils/instance_config_variables/core.py
index cf8d8d41fb..4f4833207a 100644
--- a/apps/api/plane/utils/instance_config_variables/core.py
+++ b/apps/api/plane/utils/instance_config_variables/core.py
@@ -44,6 +44,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 +71,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 +99,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 +132,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/openapi/__init__.py b/apps/api/plane/utils/openapi/__init__.py
index bf68212588..b2c9ba6b0c 100644
--- a/apps/api/plane/utils/openapi/__init__.py
+++ b/apps/api/plane/utils/openapi/__init__.py
@@ -140,6 +140,7 @@ from .examples import (
     WORKSPACE_MEMBER_EXAMPLE,
     PROJECT_MEMBER_EXAMPLE,
     CYCLE_ISSUE_EXAMPLE,
+    STICKY_EXAMPLE,
 )
 
 # Helper decorators
@@ -292,6 +293,7 @@ __all__ = [
     "WORKSPACE_MEMBER_EXAMPLE",
     "PROJECT_MEMBER_EXAMPLE",
     "CYCLE_ISSUE_EXAMPLE",
+    "STICKY_EXAMPLE",
     # Decorators
     "workspace_docs",
     "project_docs",
diff --git a/apps/api/plane/utils/openapi/decorators.py b/apps/api/plane/utils/openapi/decorators.py
index e4a86839f6..b11926889c 100644
--- a/apps/api/plane/utils/openapi/decorators.py
+++ b/apps/api/plane/utils/openapi/decorators.py
@@ -262,3 +262,19 @@ def state_docs(**kwargs):
     }
 
     return extend_schema(**_merge_schema_options(defaults, kwargs))
+
+
+def sticky_docs(**kwargs):
+    """Decorator for sticky management endpoints"""
+    defaults = {
+        "tags": ["Stickies"],
+        "summary": "Endpoints for sticky create/update/delete and fetch sticky details",
+        "parameters": [WORKSPACE_SLUG_PARAMETER],
+        "responses": {
+            401: UNAUTHORIZED_RESPONSE,
+            403: FORBIDDEN_RESPONSE,
+            404: NOT_FOUND_RESPONSE,
+        },
+    }
+
+    return extend_schema(**_merge_schema_options(defaults, kwargs))
diff --git a/apps/api/plane/utils/openapi/examples.py b/apps/api/plane/utils/openapi/examples.py
index db7ee50c44..f41bdddbcb 100644
--- a/apps/api/plane/utils/openapi/examples.py
+++ b/apps/api/plane/utils/openapi/examples.py
@@ -672,6 +672,15 @@ CYCLE_ISSUE_EXAMPLE = OpenApiExample(
     },
 )
 
+STICKY_EXAMPLE = OpenApiExample(
+    name="Sticky",
+    value={
+        "id": "550e8400-e29b-41d4-a716-446655440000",
+        "name": "Sticky 1",
+        "description_html": "<p>Sticky 1 description</p>",
+        "created_at": "2024-01-01T10:30:00Z",
+    },
+)
 
 # Sample data for different entity types
 SAMPLE_ISSUE = {
@@ -781,6 +790,13 @@ SAMPLE_CYCLE_ISSUE = {
     "created_at": "2024-01-01T10:30:00Z",
 }
 
+SAMPLE_STICKY = {
+    "id": "550e8400-e29b-41d4-a716-446655440000",
+    "name": "Sticky 1",
+    "description_html": "<p>Sticky 1 description</p>",
+    "created_at": "2024-01-01T10:30:00Z",
+}
+
 # Mapping of schema types to sample data
 SCHEMA_EXAMPLES = {
     "Issue": SAMPLE_ISSUE,
@@ -795,6 +811,7 @@ SCHEMA_EXAMPLES = {
     "Activity": SAMPLE_ACTIVITY,
     "Intake": SAMPLE_INTAKE,
     "CycleIssue": SAMPLE_CYCLE_ISSUE,
+    "Sticky": SAMPLE_STICKY,
 }
 
 
diff --git a/apps/api/plane/utils/porters/__init__.py b/apps/api/plane/utils/porters/__init__.py
new file mode 100644
index 0000000000..cd411ff724
--- /dev/null
+++ b/apps/api/plane/utils/porters/__init__.py
@@ -0,0 +1,15 @@
+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 0000000000..3b55d4d984
--- /dev/null
+++ b/apps/api/plane/utils/porters/exporter.py
@@ -0,0 +1,103 @@
+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 0000000000..e130f73540
--- /dev/null
+++ b/apps/api/plane/utils/porters/formatters.py
@@ -0,0 +1,265 @@
+"""
+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
+
+
+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([row.get(key, "") for key in fieldnames])
+        else:
+            writer = csv.DictWriter(output, fieldnames=fieldnames, delimiter=self.delimiter)
+            writer.writeheader()
+            writer.writerows(data)
+
+        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 0000000000..a52e98d6dd
--- /dev/null
+++ b/apps/api/plane/utils/porters/serializers/__init__.py
@@ -0,0 +1,6 @@
+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 0000000000..94c6f065ae
--- /dev/null
+++ b/apps/api/plane/utils/porters/serializers/issue.py
@@ -0,0 +1,141 @@
+# 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/requirements/base.txt b/apps/api/requirements/base.txt
index 8454ad09ec..52c18c706c 100644
--- a/apps/api/requirements/base.txt
+++ b/apps/api/requirements/base.txt
@@ -1,13 +1,13 @@
 # base requirements
 
 # django
-Django==4.2.26
+Django==4.2.27
 # rest framework
 djangorestframework==3.15.2
 # postgres
-psycopg==3.2.9
-psycopg-binary==3.2.9
-psycopg-c==3.2.9
+psycopg==3.3.0
+psycopg-binary==3.3.0
+psycopg-c==3.3.0
 dj-database-url==2.1.0
 # mongo
 pymongo==4.6.3
@@ -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
diff --git a/apps/api/templates/emails/user/email_updated.html b/apps/api/templates/emails/user/email_updated.html
new file mode 100644
index 0000000000..cd13347ead
--- /dev/null
+++ b/apps/api/templates/emails/user/email_updated.html
@@ -0,0 +1,1058 @@
+<!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"
+>
+  <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>Plane email address successfully updated</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";
+        }
+        .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;
+        }
+        .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-heading2 {
+        color: #1f2d3d;
+        font-family: arial, helvetica, sans-serif;
+        font-size: 32px;
+        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"
+  >
+    <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">
+                <!-- Logo Section -->
+                <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>
+
+                <!-- Main Content Section -->
+                <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="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;
+                                                  "
+                                                >
+                                                  Plane email address
+                                                  successfully updated
+                                                </h2>
+                                              </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="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>
+                                                <p style="margin: 0">
+                                                  You have successfully updated
+                                                  your email address with Plane
+                                                  to
+                                                  <strong>{{email}}</strong>.
+                                                </p>
+                                                <p
+                                                  style="
+                                                    margin: 0;
+                                                    margin-top: 15px;
+                                                  "
+                                                >
+                                                  You can now log in using this
+                                                  email address.
+                                                </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"
+                      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>
+</html>
diff --git a/apps/live/.eslintignore b/apps/live/.eslintignore
deleted file mode 100644
index 0854216957..0000000000
--- a/apps/live/.eslintignore
+++ /dev/null
@@ -1,4 +0,0 @@
-.turbo/*
-out/*
-dist/*
-public/*
\ No newline at end of file
diff --git a/apps/live/.eslintrc.cjs b/apps/live/.eslintrc.cjs
deleted file mode 100644
index 0a4c3d9eed..0000000000
--- a/apps/live/.eslintrc.cjs
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["@plane/eslint-config/server.js"],
-};
diff --git a/apps/live/.prettierignore b/apps/live/.prettierignore
index 8f6f9062d2..b0b8bc622a 100644
--- a/apps/live/.prettierignore
+++ b/apps/live/.prettierignore
@@ -1,6 +1,10 @@
-.next
-.turbo
-out/
-dist/
+.next/
+.react-router/
+.turbo/
+.vite/
 build/
-node_modules/
\ No newline at end of file
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/apps/live/.prettierrc b/apps/live/.prettierrc
deleted file mode 100644
index 87d988f1b2..0000000000
--- a/apps/live/.prettierrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "printWidth": 120,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}
diff --git a/apps/live/Dockerfile.live b/apps/live/Dockerfile.live
index 56027bf5ec..8349c69fe4 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.5.6
+ARG TURBO_VERSION=2.6.3
 RUN corepack enable pnpm && pnpm add -g turbo@${TURBO_VERSION}
 COPY . .
 RUN turbo prune --scope=live --docker
@@ -34,11 +34,13 @@ COPY .gitignore .gitignore
 COPY --from=builder /app/out/json/ .
 COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
 RUN corepack enable pnpm
-RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm fetch --store-dir=/pnpm/store
 
-# Build the project and its dependencies
+# Copy full directory structure before fetch to ensure all package.json files are available
 COPY --from=builder /app/out/full/ .
 COPY turbo.json turbo.json
+
+# Fetch dependencies to cache store, then install offline with dev deps
+RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm fetch --store-dir=/pnpm/store
 RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store CI=true pnpm install --offline --frozen-lockfile --store-dir=/pnpm/store
 
 ENV TURBO_TELEMETRY_DISABLED=1
@@ -56,9 +58,10 @@ COPY --from=installer /app/packages ./packages
 COPY --from=installer /app/apps/live/dist ./apps/live/dist
 COPY --from=installer /app/apps/live/node_modules ./apps/live/node_modules
 COPY --from=installer /app/node_modules ./node_modules
+COPY --from=installer /app/apps/live/package.json ./apps/live/package.json
 
 ENV TURBO_TELEMETRY_DISABLED=1
 
 EXPOSE 3000
 
-CMD ["node", "apps/live/dist/start.js"]
+CMD ["node", "apps/live"]
diff --git a/apps/live/package.json b/apps/live/package.json
index e8c1098d7b..88ee28b14c 100644
--- a/apps/live/package.json
+++ b/apps/live/package.json
@@ -1,25 +1,30 @@
 {
   "name": "live",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "AGPL-3.0",
   "description": "A realtime collaborative server powers Plane's rich text editor",
-  "main": "./dist/start.js",
+  "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 dist/start.js\"",
-    "start": "node --env-file=.env dist/start.js",
-    "check:lint": "eslint . --max-warnings 10",
+    "dev": "tsdown --watch --onSuccess \"node --env-file=.env .\"",
+    "start": "node --env-file=.env .",
+    "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=160",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check \"**/*.{ts,tsx,md,json,css,scss}\"",
-    "fix:lint": "eslint . --fix",
-    "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\"",
+    "check:format": "prettier . --cache --check",
+    "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=160",
+    "fix:format": "prettier . --cache --write",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "author": "Plane Software Inc.",
   "dependencies": {
-    "@dotenvx/dotenvx": "^1.49.0",
+    "@dotenvx/dotenvx": "catalog:",
     "@hocuspocus/extension-database": "2.15.2",
     "@hocuspocus/extension-logger": "2.15.2",
     "@hocuspocus/extension-redis": "2.15.2",
@@ -36,8 +41,7 @@
     "axios": "catalog:",
     "compression": "1.8.1",
     "cors": "^2.8.5",
-    "dotenv": "^16.4.5",
-    "express": "^4.21.2",
+    "express": "catalog:",
     "express-ws": "^5.0.2",
     "helmet": "^7.1.0",
     "ioredis": "5.7.0",
@@ -49,7 +53,6 @@
     "zod": "^3.25.76"
   },
   "devDependencies": {
-    "@plane/eslint-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
     "@types/compression": "1.8.1",
     "@types/cors": "^2.8.17",
diff --git a/apps/live/src/extensions/database.ts b/apps/live/src/extensions/database.ts
index be7a3139c6..5c496f52c4 100644
--- a/apps/live/src/extensions/database.ts
+++ b/apps/live/src/extensions/database.ts
@@ -20,13 +20,32 @@ const fetchDocument = async ({ context, documentName: pageId, instance }: FetchP
   try {
     const service = getPageService(context.documentType, context);
     // fetch details
-    const response = await service.fetchDescriptionBinary(pageId);
+    const response = (await service.fetchDescriptionBinary(pageId)) as Buffer;
     const binaryData = new Uint8Array(response);
     // if binary data is empty, convert HTML to binary data
     if (binaryData.byteLength === 0) {
       const pageDetails = await service.fetchDetails(pageId);
-      const convertedBinaryData = getBinaryDataFromDocumentEditorHTMLString(pageDetails.description_html ?? "<p></p>");
+      const convertedBinaryData = getBinaryDataFromDocumentEditorHTMLString(
+        pageDetails.description_html ?? "<p></p>",
+        pageDetails.name
+      );
       if (convertedBinaryData) {
+        // save the converted binary data back to the database
+        try {
+          const { contentBinaryEncoded, contentHTML, contentJSON } = getAllDocumentFormatsFromDocumentEditorBinaryData(
+            convertedBinaryData,
+            true
+          );
+          const payload = {
+            description_binary: contentBinaryEncoded,
+            description_html: contentHTML,
+            description: 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);
+        }
         return convertedBinaryData;
       }
     }
@@ -52,8 +71,10 @@ const storeDocument = async ({
   try {
     const service = getPageService(context.documentType, context);
     // convert binary data to all formats
-    const { contentBinaryEncoded, contentHTML, contentJSON } =
-      getAllDocumentFormatsFromDocumentEditorBinaryData(pageBinaryData);
+    const { contentBinaryEncoded, contentHTML, contentJSON } = getAllDocumentFormatsFromDocumentEditorBinaryData(
+      pageBinaryData,
+      true
+    );
     // create payload
     const payload = {
       description_binary: contentBinaryEncoded,
diff --git a/apps/live/src/extensions/force-close-handler.ts b/apps/live/src/extensions/force-close-handler.ts
index 5a474cdf61..19c06fe17f 100644
--- a/apps/live/src/extensions/force-close-handler.ts
+++ b/apps/live/src/extensions/force-close-handler.ts
@@ -12,7 +12,7 @@ export class ForceCloseHandler implements Extension {
   priority = 999;
 
   async onConfigure({ instance }: onConfigurePayload) {
-    const redisExt = instance.configuration.extensions.find((ext) => ext instanceof Redis) as Redis | undefined;
+    const redisExt = instance.configuration.extensions.find((ext) => ext instanceof Redis);
 
     if (!redisExt) {
       logger.warn("[FORCE_CLOSE_HANDLER] Redis extension not found");
@@ -149,7 +149,7 @@ export const forceCloseDocumentAcrossServers = async (
   logger.info(`[FORCE_CLOSE] Closed ${closedCount}/${connectionsBefore} local connections`);
 
   // STEP 4: BROADCAST TO OTHER SERVERS
-  const redisExt = instance.configuration.extensions.find((ext) => ext instanceof Redis) as Redis | undefined;
+  const redisExt = instance.configuration.extensions.find((ext) => ext instanceof Redis);
 
   if (redisExt) {
     const commandData: ForceCloseCommandData = {
diff --git a/apps/live/src/extensions/index.ts b/apps/live/src/extensions/index.ts
index e82b1fb601..fb53ab7905 100644
--- a/apps/live/src/extensions/index.ts
+++ b/apps/live/src/extensions/index.ts
@@ -1,5 +1,13 @@
 import { Database } from "./database";
+import { ForceCloseHandler } from "./force-close-handler";
 import { Logger } from "./logger";
 import { Redis } from "./redis";
+import { TitleSyncExtension } from "./title-sync";
 
-export const getExtensions = () => [new Logger(), new Database(), new Redis()];
+export const getExtensions = () => [
+  new Logger(),
+  new Database(),
+  new Redis(),
+  new TitleSyncExtension(),
+  new ForceCloseHandler(), // Must be after Redis to receive broadcasts
+];
diff --git a/apps/live/src/extensions/title-sync.ts b/apps/live/src/extensions/title-sync.ts
new file mode 100644
index 0000000000..ca3783f14e
--- /dev/null
+++ b/apps/live/src/extensions/title-sync.ts
@@ -0,0 +1,175 @@
+// hocuspocus
+import type { Extension, Hocuspocus, Document } from "@hocuspocus/server";
+import { TiptapTransformer } from "@hocuspocus/transformer";
+import type { AnyExtension, JSONContent } from "@tiptap/core";
+import type * as Y from "yjs";
+// editor extensions
+import {
+  TITLE_EDITOR_EXTENSIONS,
+  createRealtimeEvent,
+  extractTextFromHTML,
+  generateTitleProsemirrorJson,
+} from "@plane/editor";
+import { logger } from "@plane/logger";
+import { AppError } from "@/lib/errors";
+// helpers
+import { getPageService } from "@/services/page/handler";
+import type { HocusPocusServerContext, OnLoadDocumentPayloadWithContext } from "@/types";
+import { broadcastMessageToPage } from "@/utils/broadcast-message";
+import { TitleUpdateManager } from "./title-update/title-update-manager";
+
+/**
+ * Hocuspocus extension for synchronizing document titles
+ */
+export class TitleSyncExtension implements Extension {
+  // Maps document names to their observers and update managers
+  private titleObservers: Map<string, (events: Y.YEvent<any>[]) => void> = new Map();
+  private titleUpdateManagers: Map<string, TitleUpdateManager> = new Map();
+  // Store minimal data needed for each document's title observer (prevents closure memory leaks)
+  private titleObserverData: Map<
+    string,
+    {
+      parentId?: string | null;
+      userId: string;
+      workspaceSlug: string | null;
+      instance: Hocuspocus;
+    }
+  > = new Map();
+
+  /**
+   * Handle document loading - migrate old titles if needed
+   */
+  async onLoadDocument({ context, document, documentName }: OnLoadDocumentPayloadWithContext) {
+    try {
+      // initially for on demand migration of old titles to a new title field
+      // in the yjs binary
+      if (document.isEmpty("title")) {
+        const service = getPageService(context.documentType, context);
+        const pageDetails = await service.fetchDetails(documentName);
+        const title = pageDetails.name;
+        if (title == null) return;
+        const titleJson = (generateTitleProsemirrorJson as (text: string) => JSONContent)(title);
+        const titleField = TiptapTransformer.toYdoc(titleJson, "title", TITLE_EDITOR_EXTENSIONS as AnyExtension[]);
+        document.merge(titleField);
+      }
+    } catch (error) {
+      const appError = new AppError(error, {
+        context: { operation: "onLoadDocument", documentName },
+      });
+      logger.error("Error loading document title", appError);
+    }
+  }
+  /**
+   * Set up title synchronization for a document after it's loaded
+   */
+  async afterLoadDocument({
+    document,
+    documentName,
+    context,
+    instance,
+  }: {
+    document: Document;
+    documentName: string;
+    context: HocusPocusServerContext;
+    instance: Hocuspocus;
+  }) {
+    // Create a title update manager for this document
+    const updateManager = new TitleUpdateManager(documentName, context);
+
+    // Store the manager
+    this.titleUpdateManagers.set(documentName, updateManager);
+
+    // Store minimal data needed for the observer (prevents closure memory leak)
+    this.titleObserverData.set(documentName, {
+      userId: context.userId,
+      workspaceSlug: context.workspaceSlug,
+      instance: instance,
+    });
+
+    // Create observer using bound method to avoid closure capturing heavy objects
+    const titleObserver = this.handleTitleChange.bind(this, documentName);
+
+    // Observe the title field
+    document.getXmlFragment("title").observeDeep(titleObserver);
+    this.titleObservers.set(documentName, titleObserver);
+  }
+
+  /**
+   * Handle title changes for a document
+   * This is a separate method to avoid closure memory leaks
+   */
+  private handleTitleChange(documentName: string, events: Y.YEvent<any>[]) {
+    let title = "";
+    events.forEach((event) => {
+      title = extractTextFromHTML(event.currentTarget.toJSON() as string);
+    });
+
+    // Get the manager for this document
+    const manager = this.titleUpdateManagers.get(documentName);
+
+    // Get the stored data for this document
+    const data = this.titleObserverData.get(documentName);
+
+    // Broadcast to parent page if it exists
+    if (data?.parentId && data.workspaceSlug && data.instance) {
+      const event = createRealtimeEvent({
+        user_id: data.userId,
+        workspace_slug: data.workspaceSlug,
+        action: "property_updated",
+        page_id: documentName,
+        data: { name: title },
+        descendants_ids: [],
+      });
+
+      // Use the instance from stored data (guaranteed to be set)
+      broadcastMessageToPage(data.instance, data.parentId, event);
+    }
+
+    // Schedule the title update
+    if (manager) {
+      manager.scheduleUpdate(title);
+    }
+  }
+
+  /**
+   * Force save title before unloading the document
+   */
+  async beforeUnloadDocument({ documentName }: { documentName: string }) {
+    const updateManager = this.titleUpdateManagers.get(documentName);
+    if (updateManager) {
+      // Force immediate save and wait for it to complete
+      await updateManager.forceSave();
+      // Clean up the manager
+      this.titleUpdateManagers.delete(documentName);
+    }
+  }
+
+  /**
+   * Remove observers after document unload
+   */
+  async afterUnloadDocument({ documentName, document }: { documentName: string; document?: Document }) {
+    // Clean up observer when document is unloaded
+    const observer = this.titleObservers.get(documentName);
+    if (observer) {
+      // unregister observer from Y.js document to prevent memory leak
+      if (document) {
+        try {
+          document.getXmlFragment("title").unobserveDeep(observer);
+        } catch (error) {
+          logger.error("Failed to unobserve title field", new AppError(error, { context: { documentName } }));
+        }
+      }
+      this.titleObservers.delete(documentName);
+    }
+
+    // Clean up the observer data map to prevent memory leak
+    this.titleObserverData.delete(documentName);
+
+    // Ensure manager is cleaned up if beforeUnloadDocument somehow didn't run
+    if (this.titleUpdateManagers.has(documentName)) {
+      const manager = this.titleUpdateManagers.get(documentName)!;
+      manager.cancel();
+      this.titleUpdateManagers.delete(documentName);
+    }
+  }
+}
diff --git a/apps/live/src/extensions/title-update/debounce.ts b/apps/live/src/extensions/title-update/debounce.ts
new file mode 100644
index 0000000000..e9adeb4a4c
--- /dev/null
+++ b/apps/live/src/extensions/title-update/debounce.ts
@@ -0,0 +1,277 @@
+import { logger } from "@plane/logger";
+
+/**
+ * DebounceState - Tracks the state of a debounced function
+ */
+export interface DebounceState {
+  lastArgs: any[] | null;
+  timerId: ReturnType<typeof setTimeout> | null;
+  lastCallTime: number | undefined;
+  lastExecutionTime: number;
+  inProgress: boolean;
+  abortController: AbortController | null;
+}
+
+/**
+ * Creates a new DebounceState object
+ */
+export const createDebounceState = (): DebounceState => ({
+  lastArgs: null,
+  timerId: null,
+  lastCallTime: undefined,
+  lastExecutionTime: 0,
+  inProgress: false,
+  abortController: null,
+});
+
+/**
+ * DebounceOptions - Configuration options for debounce
+ */
+export interface DebounceOptions {
+  /** The wait time in milliseconds */
+  wait: number;
+
+  /** Optional logging prefix for debug messages */
+  logPrefix?: string;
+}
+
+/**
+ * Enhanced debounce manager with abort support
+ * Manages the state and timing of debounced function calls
+ */
+export class DebounceManager {
+  private state: DebounceState;
+  private wait: number;
+  private logPrefix: string;
+
+  /**
+   * Creates a new DebounceManager
+   * @param options Debounce configuration options
+   */
+  constructor(options: DebounceOptions) {
+    this.state = createDebounceState();
+    this.wait = options.wait;
+    this.logPrefix = options.logPrefix || "";
+  }
+
+  /**
+   * Schedule a debounced function call
+   * @param func The function to call
+   * @param args The arguments to pass to the function
+   */
+  schedule(func: (...args: any[]) => Promise<void>, ...args: any[]): void {
+    // Always update the last arguments
+    this.state.lastArgs = args;
+
+    const time = Date.now();
+    this.state.lastCallTime = time;
+
+    // If an operation is in progress, just store the new args and start the timer
+    if (this.state.inProgress) {
+      // Always restart the timer for the new call, even if an operation is in progress
+      if (this.state.timerId) {
+        clearTimeout(this.state.timerId);
+      }
+
+      this.state.timerId = setTimeout(() => {
+        this.timerExpired(func);
+      }, this.wait);
+      return;
+    }
+
+    // If already scheduled, update the args and restart the timer
+    if (this.state.timerId) {
+      clearTimeout(this.state.timerId);
+      this.state.timerId = setTimeout(() => {
+        this.timerExpired(func);
+      }, this.wait);
+      return;
+    }
+
+    // Start the timer for the trailing edge execution
+    this.state.timerId = setTimeout(() => {
+      this.timerExpired(func);
+    }, this.wait);
+  }
+
+  /**
+   * Called when the timer expires
+   */
+  private timerExpired(func: (...args: any[]) => Promise<void>): void {
+    const time = Date.now();
+
+    // Check if this timer expiration represents the end of the debounce period
+    if (this.shouldInvoke(time)) {
+      // Execute the function
+      this.executeFunction(func, time);
+      return;
+    }
+
+    // Otherwise restart the timer
+    this.state.timerId = setTimeout(() => {
+      this.timerExpired(func);
+    }, this.remainingWait(time));
+  }
+
+  /**
+   * Execute the debounced function
+   */
+  private executeFunction(func: (...args: any[]) => Promise<void>, time: number): void {
+    this.state.timerId = null;
+    this.state.lastExecutionTime = time;
+
+    // Execute the function asynchronously
+    this.performFunction(func).catch((error) => {
+      logger.error(`${this.logPrefix}: Error in execution:`, error);
+    });
+  }
+
+  /**
+   * Perform the actual function call, handling any in-progress operations
+   */
+  private async performFunction(func: (...args: any[]) => Promise<void>): Promise<void> {
+    const args = this.state.lastArgs;
+    if (!args) return;
+
+    // Store the args we're about to use
+    const currentArgs = [...args];
+
+    // If another operation is in progress, abort it
+    await this.abortOngoingOperation();
+
+    // Mark that we're starting a new operation
+    this.state.inProgress = true;
+    this.state.abortController = new AbortController();
+
+    try {
+      // Add the abort signal to the arguments if the function can use it
+      const execArgs = [...currentArgs];
+      execArgs.push(this.state.abortController.signal);
+
+      await func(...execArgs);
+
+      // Only clear lastArgs if they haven't been changed during this operation
+      if (this.state.lastArgs && this.arraysEqual(this.state.lastArgs, currentArgs)) {
+        this.state.lastArgs = null;
+
+        // Clear any timer as we've successfully processed the latest args
+        if (this.state.timerId) {
+          clearTimeout(this.state.timerId);
+          this.state.timerId = null;
+        }
+      } else if (this.state.lastArgs) {
+        // If lastArgs have changed during this operation, the timer should already be running
+        // but let's make sure it is
+        if (!this.state.timerId) {
+          this.state.timerId = setTimeout(() => {
+            this.timerExpired(func);
+          }, this.wait);
+        }
+      }
+    } catch (error) {
+      if (error instanceof Error && error.name === "AbortError") {
+        // Nothing to do here, the new operation will be triggered by the timer expiration
+      } else {
+        logger.error(`${this.logPrefix}: Error during operation:`, error);
+
+        // On error (not abort), make sure we have a timer running to retry
+        if (!this.state.timerId && this.state.lastArgs) {
+          this.state.timerId = setTimeout(() => {
+            this.timerExpired(func);
+          }, this.wait);
+        }
+      }
+    } finally {
+      this.state.inProgress = false;
+      this.state.abortController = null;
+    }
+  }
+
+  /**
+   * Abort any ongoing operation
+   */
+  private async abortOngoingOperation(): Promise<void> {
+    if (this.state.inProgress && this.state.abortController) {
+      this.state.abortController.abort();
+
+      // Small delay to ensure the abort has had time to propagate
+      await new Promise((resolve) => setTimeout(resolve, 20));
+
+      // Double-check that state has been reset, force it if not
+      if (this.state.inProgress || this.state.abortController) {
+        this.state.inProgress = false;
+        this.state.abortController = null;
+      }
+    }
+  }
+
+  /**
+   * Determine if we should invoke the function now
+   */
+  private shouldInvoke(time: number): boolean {
+    // Either this is the first call, or we've waited long enough since the last call
+    return this.state.lastCallTime === undefined || time - this.state.lastCallTime >= this.wait;
+  }
+
+  /**
+   * Calculate how much longer we should wait
+   */
+  private remainingWait(time: number): number {
+    const timeSinceLastCall = time - (this.state.lastCallTime || 0);
+    return Math.max(0, this.wait - timeSinceLastCall);
+  }
+
+  /**
+   * Force immediate execution
+   */
+  async flush(func: (...args: any[]) => Promise<void>): Promise<void> {
+    // Clear any pending timeout
+    if (this.state.timerId) {
+      clearTimeout(this.state.timerId);
+      this.state.timerId = null;
+    }
+
+    // Reset timing state
+    this.state.lastCallTime = undefined;
+
+    // Perform the function immediately
+    if (this.state.lastArgs) {
+      await this.performFunction(func);
+    }
+  }
+
+  /**
+   * Cancel any pending operations without executing
+   */
+  cancel(): void {
+    // Clear any pending timeout
+    if (this.state.timerId) {
+      clearTimeout(this.state.timerId);
+      this.state.timerId = null;
+    }
+
+    // Reset timing state
+    this.state.lastCallTime = undefined;
+
+    // Abort any in-progress operation
+    if (this.state.inProgress && this.state.abortController) {
+      this.state.abortController.abort();
+      this.state.inProgress = false;
+      this.state.abortController = null;
+    }
+
+    // Clear args
+    this.state.lastArgs = null;
+  }
+
+  /**
+   * Compare two arrays for equality
+   */
+  private arraysEqual(a: any[], b: any[]): boolean {
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      if (a[i] !== b[i]) return false;
+    }
+    return true;
+  }
+}
diff --git a/apps/live/src/extensions/title-update/title-update-manager.ts b/apps/live/src/extensions/title-update/title-update-manager.ts
new file mode 100644
index 0000000000..8469ad4eb0
--- /dev/null
+++ b/apps/live/src/extensions/title-update/title-update-manager.ts
@@ -0,0 +1,90 @@
+import { logger } from "@plane/logger";
+import { AppError } from "@/lib/errors";
+import { getPageService } from "@/services/page/handler";
+import type { HocusPocusServerContext } from "@/types";
+import { DebounceManager } from "./debounce";
+
+/**
+ * Manages title update operations for a single document
+ * Handles debouncing, aborting, and force saving title updates
+ */
+export class TitleUpdateManager {
+  private documentName: string;
+  private context: HocusPocusServerContext;
+  private debounceManager: DebounceManager;
+  private lastTitle: string | null = null;
+
+  /**
+   * Create a new TitleUpdateManager instance
+   */
+  constructor(documentName: string, context: HocusPocusServerContext, wait: number = 5000) {
+    this.documentName = documentName;
+    this.context = context;
+
+    // Set up debounce manager with logging
+    this.debounceManager = new DebounceManager({
+      wait,
+      logPrefix: `TitleManager[${documentName.substring(0, 8)}]`,
+    });
+  }
+
+  /**
+   * Schedule a debounced title update
+   */
+  scheduleUpdate(title: string): void {
+    // Store the latest title
+    this.lastTitle = title;
+
+    // Schedule the update with the debounce manager
+    this.debounceManager.schedule(this.updateTitle.bind(this), title);
+  }
+
+  /**
+   * Update the title - will be called by the debounce manager
+   */
+  private async updateTitle(title: string, signal?: AbortSignal): Promise<void> {
+    const service = getPageService(this.context.documentType, this.context);
+    if (!service.updatePageProperties) {
+      logger.warn(`No updateTitle method found for document ${this.documentName}`);
+      return;
+    }
+
+    try {
+      await service.updatePageProperties(this.documentName, {
+        data: { name: title },
+        abortSignal: signal,
+      });
+
+      // Clear last title only if it matches what we just updated
+      if (this.lastTitle === title) {
+        this.lastTitle = null;
+      }
+    } catch (error) {
+      const appError = new AppError(error, {
+        context: { operation: "updateTitle", documentName: this.documentName },
+      });
+      logger.error("Error updating title", appError);
+    }
+  }
+
+  /**
+   * Force save the current title immediately
+   */
+  async forceSave(): Promise<void> {
+    // Ensure we have the current title
+    if (!this.lastTitle) {
+      return;
+    }
+
+    // Use the debounce manager to flush the operation
+    await this.debounceManager.flush(this.updateTitle.bind(this));
+  }
+
+  /**
+   * Cancel any pending updates
+   */
+  cancel(): void {
+    this.debounceManager.cancel();
+    this.lastTitle = null;
+  }
+}
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 0000000000..4113afb33f
--- /dev/null
+++ b/apps/live/src/extensions/title-update/title-utils.ts
@@ -0,0 +1,11 @@
+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/start.ts b/apps/live/src/start.ts
index 7929b9b9bc..ced70a209b 100644
--- a/apps/live/src/start.ts
+++ b/apps/live/src/start.ts
@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/order
 import { setupSentry } from "./instrument";
 setupSentry();
 
diff --git a/apps/live/src/utils/broadcast-error.ts b/apps/live/src/utils/broadcast-error.ts
index ff1c07fc78..d9dbbc485b 100644
--- a/apps/live/src/utils/broadcast-error.ts
+++ b/apps/live/src/utils/broadcast-error.ts
@@ -1,7 +1,7 @@
 import type { Hocuspocus } from "@hocuspocus/server";
 import { createRealtimeEvent } from "@plane/editor";
 import { logger } from "@plane/logger";
-import type { FetchPayloadWithContext, StorePayloadWithContext } from "@/types";
+import type { HocusPocusServerContext } from "@/types";
 import { broadcastMessageToPage } from "./broadcast-message";
 
 // Helper to broadcast error to frontend
@@ -10,7 +10,7 @@ export const broadcastError = async (
   pageId: string,
   errorMessage: string,
   errorType: "fetch" | "store",
-  context: FetchPayloadWithContext["context"] | StorePayloadWithContext["context"],
+  context: HocusPocusServerContext,
   errorCode?: "content_too_large" | "page_locked" | "page_archived",
   shouldDisconnect?: boolean
 ) => {
diff --git a/apps/live/src/utils/document.ts b/apps/live/src/utils/document.ts
deleted file mode 100644
index 318a506e09..0000000000
--- a/apps/live/src/utils/document.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export const generateTitleProsemirrorJson = (text: string) => {
-  return {
-    type: "doc",
-    content: [
-      {
-        type: "heading",
-        attrs: { level: 1 },
-        ...(text
-          ? {
-              content: [
-                {
-                  type: "text",
-                  text,
-                },
-              ],
-            }
-          : {}),
-      },
-    ],
-  };
-};
diff --git a/apps/live/src/utils/index.ts b/apps/live/src/utils/index.ts
deleted file mode 100644
index fe6d89c0eb..0000000000
--- a/apps/live/src/utils/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./document";
diff --git a/apps/live/tsconfig.json b/apps/live/tsconfig.json
index cdfe5996e0..a3a901c9c2 100644
--- a/apps/live/tsconfig.json
+++ b/apps/live/tsconfig.json
@@ -1,27 +1,19 @@
 {
   "extends": "@plane/typescript-config/base.json",
   "compilerOptions": {
-    "module": "ES2015",
-    "moduleResolution": "Bundler",
-    "lib": ["ES2015"],
-    "target": "ES2015",
-    "outDir": "./dist",
-    "rootDir": ".",
-    "baseUrl": ".",
+    "exactOptionalPropertyTypes": false,
+    "noUnusedParameters": false,
+    "noImplicitOverride": false,
+    "noImplicitReturns": false,
+    "noUnusedLocals": false,
+
     "paths": {
       "@/*": ["./src/*"],
       "@/plane-live/*": ["./src/ce/*"]
     },
-    "removeComments": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "inlineSources": true,
     "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
-    "sourceRoot": "/",
-    "types": ["node"]
+    "emitDecoratorMetadata": true
   },
-  "include": ["src/**/*.ts", "tsdown.config.ts"],
-  "exclude": ["./dist", "./build", "./node_modules", "**/*.d.ts"]
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
 }
diff --git a/apps/live/tsdown.config.ts b/apps/live/tsdown.config.ts
index d8c7882635..e94a584bac 100644
--- a/apps/live/tsdown.config.ts
+++ b/apps/live/tsdown.config.ts
@@ -7,4 +7,5 @@ export default defineConfig({
   dts: false,
   clean: true,
   sourcemap: false,
+  exports: true,
 });
diff --git a/apps/proxy/.prettierignore b/apps/proxy/.prettierignore
new file mode 100644
index 0000000000..b0b8bc622a
--- /dev/null
+++ b/apps/proxy/.prettierignore
@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/apps/proxy/Caddyfile.aio.ce b/apps/proxy/Caddyfile.aio.ce
new file mode 100644
index 0000000000..9cf6d8dd8e
--- /dev/null
+++ b/apps/proxy/Caddyfile.aio.ce
@@ -0,0 +1,46 @@
+(plane_proxy) {
+	request_body {
+		max_size {$FILE_SIZE_LIMIT}
+	}
+
+    handle /spaces/* {
+        reverse_proxy localhost:3002
+    }
+	
+    handle /live/* {
+        reverse_proxy localhost:3005
+    }
+	handle /api/* {
+        reverse_proxy localhost:3004
+    }
+
+	handle /auth/* {
+        reverse_proxy localhost:3004
+    }
+
+	handle_path /god-mode* {
+        root * /app/admin
+        try_files {path} {path}/ /index.html
+        file_server
+    }
+    handle_path /* {
+        root * /app/web
+        try_files {path} {path}/ /index.html
+        file_server
+    }
+}
+
+{
+	{$CERT_EMAIL}
+	acme_ca {$CERT_ACME_CA:https://acme-v02.api.letsencrypt.org/directory} 
+	{$CERT_ACME_DNS}
+	servers {
+		max_header_size 25MB
+		client_ip_headers X-Forwarded-For X-Real-IP
+		trusted_proxies static {$TRUSTED_PROXIES:0.0.0.0/0}
+	}
+}
+
+{$SITE_ADDRESS} {
+	import plane_proxy
+}
\ No newline at end of file
diff --git a/apps/proxy/Caddyfile.ce b/apps/proxy/Caddyfile.ce
index 7f8fc79f75..14559f2721 100644
--- a/apps/proxy/Caddyfile.ce
+++ b/apps/proxy/Caddyfile.ce
@@ -3,8 +3,10 @@
 		max_size {$FILE_SIZE_LIMIT}
 	}
 
+  redir /spaces /spaces/ permanent
 	reverse_proxy /spaces/* space:3000
 
+  redir /god-mode /god-mode/ permanent
 	reverse_proxy /god-mode/* admin:3000
 	
 	reverse_proxy /live/* live:3000
@@ -13,7 +15,10 @@
 
 	reverse_proxy /auth/* api:8000
 
+	reverse_proxy /static/* api:8000
+
 	reverse_proxy /{$BUCKET_NAME}/* plane-minio:9000
+	reverse_proxy /{$BUCKET_NAME} plane-minio:9000
 
 	reverse_proxy /* web:3000
 }
diff --git a/apps/space/.eslintignore b/apps/space/.eslintignore
deleted file mode 100644
index 289da70598..0000000000
--- a/apps/space/.eslintignore
+++ /dev/null
@@ -1,14 +0,0 @@
-.next/*
-.react-router/*
-.vite/*
-out/*
-public/*
-dist/*
-node_modules/*
-.turbo/*
-.env*
-.env
-.env.local
-.env.development
-.env.production
-.env.test
\ No newline at end of file
diff --git a/apps/space/.eslintrc.cjs b/apps/space/.eslintrc.cjs
deleted file mode 100644
index 5a75536f79..0000000000
--- a/apps/space/.eslintrc.cjs
+++ /dev/null
@@ -1,18 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["@plane/eslint-config/next.js"],
-  ignorePatterns: ["build/**", "dist/**", ".vite/**"],
-  rules: {
-    "import/no-duplicates": ["error", { "prefer-inline": false }],
-    "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
-    "@typescript-eslint/no-import-type-side-effects": "error",
-    "@typescript-eslint/consistent-type-imports": [
-      "error",
-      {
-        prefer: "type-imports",
-        fixStyle: "separate-type-imports",
-        disallowTypeAnnotations: false,
-      },
-    ],
-  },
-};
diff --git a/apps/space/.prettierignore b/apps/space/.prettierignore
index fe4d33d398..b0b8bc622a 100644
--- a/apps/space/.prettierignore
+++ b/apps/space/.prettierignore
@@ -1,9 +1,10 @@
-.next
-.react-router
-.vite
-.vercel
-.tubro
-out/
-dist/
+.next/
+.react-router/
+.turbo/
+.vite/
 build/
+dist/
 node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/apps/space/.prettierrc.json b/apps/space/.prettierrc.json
deleted file mode 100644
index 87d988f1b2..0000000000
--- a/apps/space/.prettierrc.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "printWidth": 120,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}
diff --git a/apps/space/Dockerfile.space b/apps/space/Dockerfile.space
index cb2d925884..4c121fa746 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.5.8
+RUN pnpm add -g turbo@2.6.3
 
 COPY . .
 
@@ -63,10 +63,12 @@ COPY .gitignore .gitignore
 COPY --from=builder /app/out/json/ .
 COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
 
-# Fetch dependencies to cache store, then install offline with dev deps
-RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm fetch --store-dir=/pnpm/store
+# Copy full directory structure before fetch to ensure all package.json files are available
 COPY --from=builder /app/out/full/ .
 COPY turbo.json turbo.json
+
+# Fetch dependencies to cache store, then install offline with dev deps
+RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm fetch --store-dir=/pnpm/store
 RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store CI=true pnpm install --offline --frozen-lockfile --store-dir=/pnpm/store --prod=false
 
 # Build only the space package
diff --git a/apps/space/app/[workspaceSlug]/[projectId]/page.tsx b/apps/space/app/[workspaceSlug]/[projectId]/page.tsx
index 40277ce9b7..013e7f8c19 100644
--- a/apps/space/app/[workspaceSlug]/[projectId]/page.tsx
+++ b/apps/space/app/[workspaceSlug]/[projectId]/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { redirect } from "react-router";
 // plane imports
 import { SitesProjectPublishService } from "@plane/services";
diff --git a/apps/space/app/compat/next/image.tsx b/apps/space/app/compat/next/image.tsx
index 91de8b7810..062638de41 100644
--- a/apps/space/app/compat/next/image.tsx
+++ b/apps/space/app/compat/next/image.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 
 // Minimal shim so code using next/image compiles under React Router + Vite
@@ -9,6 +7,8 @@ type NextImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
   src: string;
 };
 
-const Image: React.FC<NextImageProps> = ({ src, alt = "", ...rest }) => <img src={src} alt={alt} {...rest} />;
+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
index 4f42363272..b0bca4faf5 100644
--- a/apps/space/app/compat/next/link.tsx
+++ b/apps/space/app/compat/next/link.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { Link as RRLink } from "react-router";
 import { ensureTrailingSlash } from "./helper";
@@ -12,13 +10,8 @@ type NextLinkProps = React.ComponentProps<"a"> & {
   shallow?: boolean; // next.js prop, ignored
 };
 
-const Link: React.FC<NextLinkProps> = ({
-  href,
-  replace,
-  prefetch: _prefetch,
-  scroll: _scroll,
-  shallow: _shallow,
-  ...rest
-}) => <RRLink to={ensureTrailingSlash(href)} replace={replace} {...rest} />;
+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 b5bec8d6c8..a825b1e652 100644
--- a/apps/space/app/compat/next/navigation.ts
+++ b/apps/space/app/compat/next/navigation.ts
@@ -1,5 +1,3 @@
-"use client";
-
 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 82ea2d9381..9cf1c32deb 100644
--- a/apps/space/app/entry.client.tsx
+++ b/apps/space/app/entry.client.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable import/order */
 import * as Sentry from "@sentry/react-router";
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
diff --git a/apps/space/app/error.tsx b/apps/space/app/error.tsx
index 98fe1cd0a2..35267ad5cb 100644
--- a/apps/space/app/error.tsx
+++ b/apps/space/app/error.tsx
@@ -1,29 +1,27 @@
-"use client";
-
 // ui
 import { Button } from "@plane/propel/button";
 
-const ErrorPage = () => {
+function ErrorPage() {
   const handleRetry = () => {
     window.location.reload();
   };
 
   return (
-    <div className="grid h-screen place-items-center p-4">
+    <div className="bg-surface-1 grid h-screen place-items-center 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 md:w-1/2 text-13 text-secondary">
             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"
+              className="text-accent-primary"
               rel="noopener noreferrer"
             >
               Discord
@@ -32,16 +30,16 @@ const ErrorPage = () => {
           </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>
       </div>
     </div>
   );
-};
+}
 
 export default ErrorPage;
diff --git a/apps/space/app/issues/[anchor]/layout.tsx b/apps/space/app/issues/[anchor]/layout.tsx
index 60a171bcf5..79f2f7e3ea 100644
--- a/apps/space/app/issues/[anchor]/layout.tsx
+++ b/apps/space/app/issues/[anchor]/layout.tsx
@@ -114,7 +114,7 @@ function IssuesLayout(props: Route.ComponentProps) {
 
   if (!publishSettings && !error) {
     return (
-      <div className="flex items-center justify-center h-screen w-full">
+      <div className="bg-surface-1 flex items-center justify-center h-screen w-full">
         <LogoSpinner />
       </div>
     );
@@ -127,10 +127,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 select-none items-center border-b border-subtle-1 bg-surface-1">
           <IssuesNavbarRoot publishSettings={publishSettings} />
         </div>
-        <div className="relative h-full w-full overflow-hidden bg-custom-background-90">
+        <div className="relative size-full bg-surface-2 overflow-hidden">
           <Outlet />
         </div>
       </div>
diff --git a/apps/space/app/issues/[anchor]/page.tsx b/apps/space/app/issues/[anchor]/page.tsx
index c4a4eb1bd0..32cdcad861 100644
--- a/apps/space/app/issues/[anchor]/page.tsx
+++ b/apps/space/app/issues/[anchor]/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { useParams, useSearchParams } from "next/navigation";
 import useSWR from "swr";
@@ -10,7 +8,7 @@ import { usePublish } from "@/hooks/store/publish";
 import { useLabel } from "@/hooks/store/use-label";
 import { useStates } from "@/hooks/store/use-state";
 
-const IssuesPage = observer(() => {
+const IssuesPage = observer(function IssuesPage() {
   // params
   const params = useParams<{ anchor: string }>();
   const { anchor } = params;
diff --git a/apps/space/app/not-found.tsx b/apps/space/app/not-found.tsx
index e902cd0505..2ae119c39e 100644
--- a/apps/space/app/not-found.tsx
+++ b/apps/space/app/not-found.tsx
@@ -1,22 +1,22 @@
-"use client";
-
 // assets
 import SomethingWentWrongImage from "@/app/assets/something-went-wrong.svg?url";
 
-const NotFound = () => (
-  <div className="h-screen w-screen grid place-items-center">
-    <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={SomethingWentWrongImage} alt="Something went wrong" width={128} height={128} />
+function NotFound() {
+  return (
+    <div className="h-screen w-screen grid 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">
+          <div className="size-16 md:size-32 grid place-items-center">
+            <img src={SomethingWentWrongImage} alt="Something went wrong" width={128} height={128} />
+          </div>
         </div>
+        <h1 className="mt-8 md:mt-12 text-18 md:text-24 font-semibold">That didn{"'"}t work</h1>
+        <p className="mt-2 md:mt-4 text-13 md:text-14">
+          Check the URL you are entering in the browser{"'"}s address bar and try again.
+        </p>
       </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">
-        Check the URL you are entering in the browser{"'"}s address bar and try again.
-      </p>
     </div>
-  </div>
-);
+  );
+}
 
 export default NotFound;
diff --git a/apps/space/app/page.tsx b/apps/space/app/page.tsx
index f544bcb103..6f58126ed1 100644
--- a/apps/space/app/page.tsx
+++ b/apps/space/app/page.tsx
@@ -1,4 +1,3 @@
-"use client";
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useSearchParams, useRouter } from "next/navigation";
@@ -10,8 +9,13 @@ import { LogoSpinner } from "@/components/common/logo-spinner";
 import { AuthView } from "@/components/views";
 // hooks
 import { useUser } from "@/hooks/store/use-user";
+import type { Route } from "./+types/page";
 
-const HomePage = observer(() => {
+export const headers: Route.HeadersFunction = () => ({
+  "X-Frame-Options": "SAMEORIGIN",
+});
+
+const HomePage = observer(function HomePage() {
   const { data: currentUser, isAuthenticated, isInitializing } = useUser();
   const searchParams = useSearchParams();
   const router = useRouter();
@@ -25,7 +29,7 @@ const HomePage = observer(() => {
 
   if (isInitializing)
     return (
-      <div className="flex h-screen min-h-[500px] w-full justify-center items-center">
+      <div className="bg-surface-1 flex h-screen min-h-[500px] w-full justify-center items-center">
         <LogoSpinner />
       </div>
     );
@@ -33,7 +37,7 @@ const HomePage = observer(() => {
   if (currentUser && isAuthenticated) {
     if (nextPath && isValidNextPath(nextPath)) {
       return (
-        <div className="flex h-screen min-h-[500px] w-full justify-center items-center">
+        <div className="bg-surface-1 flex h-screen min-h-[500px] w-full justify-center items-center">
           <LogoSpinner />
         </div>
       );
diff --git a/apps/space/app/providers.tsx b/apps/space/app/providers.tsx
index 44093d26fc..981270cc30 100644
--- a/apps/space/app/providers.tsx
+++ b/apps/space/app/providers.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 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 85c385d095..ca0651042e 100644
--- a/apps/space/app/root.tsx
+++ b/apps/space/app/root.tsx
@@ -1,6 +1,5 @@
 import * as Sentry from "@sentry/react-router";
 import { Links, Meta, Outlet, Scripts } from "react-router";
-import type { HeadersFunction, LinksFunction } from "react-router";
 // assets
 import appleTouchIcon from "@/app/assets/favicon/apple-touch-icon.png?url";
 import favicon16 from "@/app/assets/favicon/favicon-16x16.png?url";
@@ -14,22 +13,33 @@ 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";
 
-export const links: LinksFunction = () => [
+export const links: Route.LinksFunction = () => [
   { rel: "apple-touch-icon", sizes: "180x180", href: appleTouchIcon },
   { rel: "icon", type: "image/png", sizes: "32x32", href: favicon32 },
   { rel: "icon", type: "image/png", sizes: "16x16", href: favicon16 },
   { 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: HeadersFunction = () => ({
+export const headers: Route.HeadersFunction = () => ({
   "Referrer-Policy": "origin-when-cross-origin",
-  "X-Frame-Options": "SAMEORIGIN",
   "X-Content-Type-Options": "nosniff",
   "X-DNS-Prefetch-Control": "on",
   "Strict-Transport-Security": "max-age=31536000; includeSubDomains; preload",
@@ -74,7 +84,7 @@ export default function Root() {
 
 export function HydrateFallback() {
   return (
-    <div className="relative flex h-screen w-full items-center justify-center">
+    <div className="bg-surface-1 relative flex h-screen w-full items-center justify-center">
       <LogoSpinner />
     </div>
   );
diff --git a/apps/space/ce/components/editor/embeds/index.ts b/apps/space/ce/components/editor/embeds/index.ts
deleted file mode 100644
index 8146e94d92..0000000000
--- a/apps/space/ce/components/editor/embeds/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./mentions";
diff --git a/apps/space/ce/components/editor/embeds/mentions/root.tsx b/apps/space/ce/components/editor/embeds/mentions/root.tsx
index 299a1e36a0..6fc36cc740 100644
--- a/apps/space/ce/components/editor/embeds/mentions/root.tsx
+++ b/apps/space/ce/components/editor/embeds/mentions/root.tsx
@@ -1,4 +1,8 @@
 // plane editor
 import type { TCallbackMentionComponentProps } from "@plane/editor";
 
-export const EditorAdditionalMentionsRoot: React.FC<TCallbackMentionComponentProps> = () => null;
+export type TEditorMentionComponentProps = TCallbackMentionComponentProps;
+
+export function EditorAdditionalMentionsRoot(_props: TEditorMentionComponentProps) {
+  return null;
+}
diff --git a/apps/space/ce/components/editor/index.ts b/apps/space/ce/components/editor/index.ts
deleted file mode 100644
index cf8352ae4a..0000000000
--- a/apps/space/ce/components/editor/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./embeds";
diff --git a/apps/space/ce/components/issue-layouts/root.tsx b/apps/space/ce/components/issue-layouts/root.tsx
index 028bf4e914..95d58029df 100644
--- a/apps/space/ce/components/issue-layouts/root.tsx
+++ b/apps/space/ce/components/issue-layouts/root.tsx
@@ -6,4 +6,6 @@ type Props = {
   publishSettings: PublishStore;
 };
 
-export const ViewLayoutsRoot = (_props: Props) => <PageNotFound />;
+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
index 0d00777ce3..e91b2d47ea 100644
--- a/apps/space/ce/components/navbar/index.tsx
+++ b/apps/space/ce/components/navbar/index.tsx
@@ -5,4 +5,6 @@ type Props = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const ViewNavbarRoot = (props: Props) => <></>;
+export function ViewNavbarRoot(props: Props) {
+  return <></>;
+}
diff --git a/apps/space/core/components/account/auth-forms/auth-banner.tsx b/apps/space/core/components/account/auth-forms/auth-banner.tsx
index 3006beacfa..689fde5e94 100644
--- a/apps/space/core/components/account/auth-forms/auth-banner.tsx
+++ b/apps/space/core/components/account/auth-forms/auth-banner.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { Info } from "lucide-react";
 import { CloseIcon } from "@plane/propel/icons";
 // helpers
@@ -10,22 +8,22 @@ type TAuthBanner = {
   handleBannerData?: (bannerData: TAuthErrorInfo | undefined) => void;
 };
 
-export const AuthBanner: React.FC<TAuthBanner> = (props) => {
+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="relative flex items-center p-2 rounded-md gap-2 border border-accent-strong/50 bg-accent-primary/10">
       <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
-        <Info size={16} className="text-custom-primary-100" />
+        <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 w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-accent-primary/20 text-accent-primary/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/auth-header.tsx b/apps/space/core/components/account/auth-forms/auth-header.tsx
index 8e8aa196cb..cac429ffdf 100644
--- a/apps/space/core/components/account/auth-forms/auth-header.tsx
+++ b/apps/space/core/components/account/auth-forms/auth-header.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 // helpers
 import { EAuthModes } from "@/types/auth";
 
@@ -27,7 +25,7 @@ const Titles: TAuthHeaderDetails = {
   },
 };
 
-export const AuthHeader: React.FC<TAuthHeader> = (props) => {
+export function AuthHeader(props: TAuthHeader) {
   const { authMode } = props;
 
   const getHeaderSubHeader = (mode: EAuthModes | null): TAuthHeaderContent => {
@@ -46,9 +44,9 @@ export const AuthHeader: React.FC<TAuthHeader> = (props) => {
   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 font-semibold text-primary leading-7">{header}</span>
+        <span className="text-20 font-semibold text-placeholder leading-7">{subHeader}</span>
       </div>
     </>
   );
-};
+}
diff --git a/apps/space/core/components/account/auth-forms/auth-root.tsx b/apps/space/core/components/account/auth-forms/auth-root.tsx
index 9b99302fbd..e313cce893 100644
--- a/apps/space/core/components/account/auth-forms/auth-root.tsx
+++ b/apps/space/core/components/account/auth-forms/auth-root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
@@ -25,7 +23,7 @@ import { AuthUniqueCodeForm } from "./unique-code";
 
 const authService = new SitesAuthService();
 
-export const AuthRoot: React.FC = observer(() => {
+export const AuthRoot = observer(function AuthRoot() {
   // router params
   const searchParams = useSearchParams();
   const emailParam = searchParams.get("email") || undefined;
diff --git a/apps/space/core/components/account/auth-forms/email.tsx b/apps/space/core/components/account/auth-forms/email.tsx
index 8b0fa712af..46ecea0f0d 100644
--- a/apps/space/core/components/account/auth-forms/email.tsx
+++ b/apps/space/core/components/account/auth-forms/email.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FormEvent } from "react";
 import { useMemo, useRef, useState } from "react";
 import { observer } from "mobx-react";
@@ -19,7 +17,7 @@ type TAuthEmailForm = {
   onSubmit: (data: IEmailCheckData) => Promise<void>;
 };
 
-export const AuthEmailForm: React.FC<TAuthEmailForm> = observer((props) => {
+export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailForm) {
   const { onSubmit, defaultEmail } = props;
   // states
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -48,13 +46,13 @@ export const AuthEmailForm: React.FC<TAuthEmailForm> = observer((props) => {
   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 text-tertiary font-medium" 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 bg-surface-1 border`,
+            !isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-subtle`
           )}
           onFocus={() => {
             setIsFocused(true);
@@ -70,7 +68,7 @@ export const AuthEmailForm: React.FC<TAuthEmailForm> = observer((props) => {
             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`}
+            className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-red-500 border-0 focus:bg-none active:bg-transparent`}
             autoComplete="on"
             autoFocus
             ref={inputRef}
@@ -85,18 +83,18 @@ export const AuthEmailForm: React.FC<TAuthEmailForm> = observer((props) => {
               }}
               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 px-3 stroke-placeholder hover:cursor-pointer text-11" />
             </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 text-11 text-red-600 px-0.5">
             <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/core/components/account/auth-forms/password.tsx b/apps/space/core/components/account/auth-forms/password.tsx
index acd081bfca..7d265cee01 100644
--- a/apps/space/core/components/account/auth-forms/password.tsx
+++ b/apps/space/core/components/account/auth-forms/password.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { Eye, EyeOff, XCircle } from "lucide-react";
@@ -35,7 +33,7 @@ const defaultValues: TPasswordFormValues = {
 
 const authService = new AuthService();
 
-export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
+export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props) {
   const { email, nextPath, isSMTPConfigured, handleAuthStep, handleEmailClear, mode } = props;
   // ref
   const formRef = useRef<HTMLFormElement>(null);
@@ -118,12 +116,10 @@ export const AuthPasswordForm: React.FC<Props> = observer((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 bg-surface-1 border border-subtle`}>
           <Input
             id="email"
             name="email"
@@ -131,12 +127,12 @@ export const AuthPasswordForm: React.FC<Props> = observer((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={`disable-autofill-style h-10 w-full placeholder:text-placeholder border-0`}
             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}
             />
           )}
@@ -144,17 +140,17 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
       </div>
 
       <div className="space-y-1">
-        <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
+        <label className="text-13 text-tertiary font-medium" 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="disable-autofill-style h-10 w-full border border-subtle !bg-surface-1 pr-12 placeholder:text-placeholder"
             onFocus={() => setIsPasswordInputFocused(true)}
             onBlur={() => setIsPasswordInputFocused(false)}
             autoComplete="on"
@@ -162,12 +158,12 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
           />
           {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")}
             />
           )}
@@ -177,42 +173,42 @@ export const AuthPasswordForm: React.FC<Props> = observer((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 text-tertiary font-medium" 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="disable-autofill-style h-10 w-full border border-subtle !bg-surface-1 pr-12 placeholder:text-placeholder"
               onFocus={() => setIsRetryPasswordInputFocused(true)}
               onBlur={() => setIsRetryPasswordInputFocused(false)}
             />
             {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-red-500">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 ? (
@@ -225,16 +221,16 @@ export const AuthPasswordForm: React.FC<Props> = observer((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/core/components/account/auth-forms/unique-code.tsx
index 8e691cf8e9..7e7543e56b 100644
--- a/apps/space/core/components/account/auth-forms/unique-code.tsx
+++ b/apps/space/core/components/account/auth-forms/unique-code.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useEffect, useState } from "react";
 import { CircleCheck, XCircle } from "lucide-react";
 // plane imports
@@ -33,7 +31,7 @@ const defaultValues: TUniqueCodeFormValues = {
   code: "",
 };
 
-export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
+export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
   const { mode, email, nextPath, handleEmailClear, generateEmailUniqueCode } = props;
   // derived values
   const defaultResetTimerValue = 5;
@@ -82,12 +80,10 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
       <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 bg-surface-1 border border-subtle`}>
           <Input
             id="email"
             name="email"
@@ -95,12 +91,12 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
             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={`disable-autofill-style h-10 w-full placeholder:text-placeholder border-0`}
             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}
             />
           )}
@@ -108,18 +104,18 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
       </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
           name="code"
           value={uniqueCodeFormData.code}
           onChange={(e) => handleFormChange("code", e.target.value)}
-          placeholder="gets-sets-flys"
-          className="disable-autofill-style h-10 w-full border border-custom-border-100 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+          placeholder="123456"
+          className="disable-autofill-style h-10 w-full border border-subtle !bg-surface-1 pr-12 placeholder:text-placeholder"
           autoFocus
         />
-        <div className="flex w-full items-center justify-between px-1 text-xs pt-1">
+        <div className="flex w-full items-center justify-between px-1 text-11 pt-1">
           <p className="flex items-center gap-1 font-medium text-green-700">
             <CircleCheck height={12} width={12} />
             Paste the code sent to your email
@@ -129,8 +125,8 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
             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}
           >
@@ -144,10 +140,10 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
       </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>
     </form>
   );
-};
+}
diff --git a/apps/space/core/components/account/terms-and-conditions.tsx b/apps/space/core/components/account/terms-and-conditions.tsx
index bd5a3ed2ea..2b3e8daa97 100644
--- a/apps/space/core/components/account/terms-and-conditions.tsx
+++ b/apps/space/core/components/account/terms-and-conditions.tsx
@@ -1,26 +1,24 @@
-"use client";
-
 import Link from "next/link";
 
 type Props = {
   isSignUp?: boolean;
 };
 
-export const TermsAndConditions: React.FC<Props> = (props) => {
+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">
+      <p className="text-center text-13 text-secondary 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>
+          <span className="text-13 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>
+          <span className="text-13 font-medium underline hover:cursor-pointer">Privacy Policy</span>
         </Link>
         {"."}
       </p>
     </span>
   );
-};
+}
diff --git a/apps/space/core/components/account/user-logged-in.tsx b/apps/space/core/components/account/user-logged-in.tsx
index f211c5680f..fb719cd723 100644
--- a/apps/space/core/components/account/user-logged-in.tsx
+++ b/apps/space/core/components/account/user-logged-in.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { PlaneLockup } from "@plane/propel/icons";
 // assets
@@ -10,7 +8,7 @@ import { UserAvatar } from "@/components/issues/navbar/user-avatar";
 // hooks
 import { useUser } from "@/hooks/store/use-user";
 
-export const UserLoggedIn = observer(() => {
+export const UserLoggedIn = observer(function UserLoggedIn() {
   // store hooks
   const { data: user } = useUser();
 
@@ -18,20 +16,20 @@ export const UserLoggedIn = observer(() => {
 
   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="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="text-center">
-          <div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full bg-custom-background-80">
+          <div className="mx-auto size-32 md:size-52 grid place-items-center rounded-full bg-layer-1">
             <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>
           </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 md:mt-12 text-18 md:text-24 font-semibold">Nice! Just one more step.</h1>
+          <p className="mt-2 md:mt-4 text-13 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/core/components/common/logo-spinner.tsx
index 6f7f843eb5..69a4b602b5 100644
--- a/apps/space/core/components/common/logo-spinner.tsx
+++ b/apps/space/core/components/common/logo-spinner.tsx
@@ -1,11 +1,9 @@
-"use client";
-
 import { useTheme } from "next-themes";
 // assets
 import LogoSpinnerDark from "@/app/assets/images/logo-spinner-dark.gif?url";
 import LogoSpinnerLight from "@/app/assets/images/logo-spinner-light.gif?url";
 
-export const LogoSpinner = () => {
+export function LogoSpinner() {
   const { resolvedTheme } = useTheme();
 
   const logoSrc = resolvedTheme === "dark" ? LogoSpinnerLight : LogoSpinnerDark;
@@ -15,4 +13,4 @@ export const LogoSpinner = () => {
       <img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
     </div>
   );
-};
+}
diff --git a/apps/space/core/components/common/powered-by.tsx b/apps/space/core/components/common/powered-by.tsx
index 57734feb67..824cad483c 100644
--- a/apps/space/core/components/common/powered-by.tsx
+++ b/apps/space/core/components/common/powered-by.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { WEBSITE_URL } from "@plane/constants";
 // assets
 import { PlaneLogo } from "@plane/propel/icons";
@@ -8,7 +6,7 @@ type TPoweredBy = {
   disabled?: boolean;
 };
 
-export const PoweredBy: React.FC<TPoweredBy> = (props) => {
+export function PoweredBy(props: TPoweredBy) {
   // props
   const { disabled = false } = props;
 
@@ -17,14 +15,14 @@ export const PoweredBy: React.FC<TPoweredBy> = (props) => {
   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 bottom-2.5 right-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/core/components/common/project-logo.tsx
index bea8e213f4..7319826c83 100644
--- a/apps/space/core/components/common/project-logo.tsx
+++ b/apps/space/core/components/common/project-logo.tsx
@@ -8,7 +8,7 @@ type Props = {
   logo: TLogoProps;
 };
 
-export const ProjectLogo: React.FC<Props> = (props) => {
+export function ProjectLogo(props: Props) {
   const { className, logo } = props;
 
   if (logo.in_use === "icon" && logo.icon)
@@ -17,7 +17,7 @@ export const ProjectLogo: React.FC<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,10 +25,10 @@ export const ProjectLogo: React.FC<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>
     );
 
   return <span />;
-};
+}
diff --git a/apps/space/core/components/editor/embeds/mentions/root.tsx b/apps/space/core/components/editor/embeds/mentions/root.tsx
index 348bc1e094..7b1f7f718b 100644
--- a/apps/space/core/components/editor/embeds/mentions/root.tsx
+++ b/apps/space/core/components/editor/embeds/mentions/root.tsx
@@ -1,11 +1,10 @@
-// plane editor
-import type { TCallbackMentionComponentProps } from "@plane/editor";
-// plane web components
-import { EditorAdditionalMentionsRoot } from "@/plane-web/components/editor";
+// 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 const EditorMentionsRoot: React.FC<TCallbackMentionComponentProps> = (props) => {
+export function EditorMentionsRoot(props: TEditorMentionComponentProps) {
   const { entity_identifier, entity_name } = props;
 
   switch (entity_name) {
@@ -14,4 +13,4 @@ export const EditorMentionsRoot: React.FC<TCallbackMentionComponentProps> = (pro
     default:
       return <EditorAdditionalMentionsRoot {...props} />;
   }
-};
+}
diff --git a/apps/space/core/components/editor/embeds/mentions/user.tsx b/apps/space/core/components/editor/embeds/mentions/user.tsx
index f75bcba3b1..33265537b2 100644
--- a/apps/space/core/components/editor/embeds/mentions/user.tsx
+++ b/apps/space/core/components/editor/embeds/mentions/user.tsx
@@ -9,7 +9,7 @@ type Props = {
   id: string;
 };
 
-export const EditorUserMention: React.FC<Props> = observer((props) => {
+export const EditorUserMention = observer(function EditorUserMention(props: Props) {
   const { id } = props;
   // store hooks
   const { data: currentUser } = useUser();
@@ -19,7 +19,7 @@ export const EditorUserMention: React.FC<Props> = observer((props) => {
 
   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 px-1 py-0.5 rounded-sm bg-layer-1 text-tertiary no-underline">
         @deactivated user
       </div>
     );
@@ -27,12 +27,9 @@ export const EditorUserMention: React.FC<Props> = observer((props) => {
 
   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 px-1 py-0.5 rounded-sm bg-accent-primary/20 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/core/components/editor/lite-text-editor.tsx
index 5b33b58119..dc17219caf 100644
--- a/apps/space/core/components/editor/lite-text-editor.tsx
+++ b/apps/space/core/components/editor/lite-text-editor.tsx
@@ -6,6 +6,9 @@ import type { MakeOptional } from "@plane/types";
 import { cn, isCommentEmpty } from "@plane/utils";
 // helpers
 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";
 // local imports
 import { EditorMentionsRoot } from "./embeds/mentions";
@@ -13,7 +16,7 @@ import { IssueCommentToolbar } from "./toolbar";
 
 type LiteTextEditorWrapperProps = MakeOptional<
   Omit<ILiteTextEditorProps, "fileHandler" | "mentionHandler" | "extendedEditorProps">,
-  "disabledExtensions" | "flaggedExtensions"
+  "disabledExtensions" | "flaggedExtensions" | "getEditorMetaData"
 > & {
   anchor: string;
   isSubmitting?: boolean;
@@ -29,7 +32,10 @@ type LiteTextEditorWrapperProps = MakeOptional<
       }
   );
 
-export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapperProps>((props, ref) => {
+export const LiteTextEditor = React.forwardRef(function LiteTextEditor(
+  props: LiteTextEditorWrapperProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
   const {
     anchor,
     containerClassName,
@@ -47,9 +53,13 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
   const isEmpty = isCommentEmpty(props.initialValue);
   const editorRef = isMutableRefObject<EditorRefApi>(ref) ? ref.current : null;
   const { liteText: liteTextEditorExtensions } = useEditorFlagging(anchor);
+  // parse content
+  const { getEditorMetaData } = useParseEditorContent({
+    anchor,
+  });
 
   return (
-    <div className="border border-custom-border-200 rounded p-3 space-y-3">
+    <div className="border border-subtle rounded-sm p-3 space-y-3">
       <LiteTextEditorWithRef
         ref={ref}
         disabledExtensions={[...liteTextEditorExtensions.disabled, ...additionalDisabledExtensions]}
@@ -60,6 +70,7 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
           uploadFile: editable ? props.uploadFile : async () => "",
           workspaceId,
         })}
+        getEditorMetaData={getEditorMetaData}
         mentionHandler={{
           renderComponent: (props) => <EditorMentionsRoot {...props} />,
         }}
@@ -68,21 +79,23 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
         // overriding the containerClassName to add relative class passed
         containerClassName={cn(containerClassName, "relative")}
       />
-      <IssueCommentToolbar
-        executeCommand={(item) => {
-          // TODO: update this while toolbar homogenization
-          // @ts-expect-error type mismatch here
-          editorRef?.executeMenuItemCommand({
-            itemKey: item.itemKey,
-            ...item.extraProps,
-          });
-        }}
-        isSubmitting={isSubmitting}
-        showSubmitButton={showSubmitButton}
-        handleSubmit={(e) => rest.onEnterKeyPress?.(e)}
-        isCommentEmpty={isEmpty}
-        editorRef={editorRef}
-      />
+      {editable && (
+        <IssueCommentToolbar
+          executeCommand={(item) => {
+            // TODO: update this while toolbar homogenization
+            // @ts-expect-error type mismatch here
+            editorRef?.executeMenuItemCommand({
+              itemKey: item.itemKey,
+              ...item.extraProps,
+            });
+          }}
+          isSubmitting={isSubmitting}
+          showSubmitButton={showSubmitButton}
+          handleSubmit={(e) => rest.onEnterKeyPress?.(e)}
+          isCommentEmpty={isEmpty}
+          editorRef={editorRef}
+        />
+      )}
     </div>
   );
 });
diff --git a/apps/space/core/components/editor/rich-text-editor.tsx b/apps/space/core/components/editor/rich-text-editor.tsx
index 1d48d7da28..d1273dd2b9 100644
--- a/apps/space/core/components/editor/rich-text-editor.tsx
+++ b/apps/space/core/components/editor/rich-text-editor.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 // plane imports
 import { RichTextEditorWithRef } from "@plane/editor";
 import type { EditorRefApi, IRichTextEditorProps, TFileHandler } from "@plane/editor";
@@ -7,6 +7,7 @@ import type { MakeOptional } from "@plane/types";
 import { getEditorFileHandlers } from "@/helpers/editor.helper";
 // hooks
 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";
 // local imports
@@ -14,7 +15,7 @@ import { EditorMentionsRoot } from "./embeds/mentions";
 
 type RichTextEditorWrapperProps = MakeOptional<
   Omit<IRichTextEditorProps, "editable" | "fileHandler" | "mentionHandler" | "extendedEditorProps">,
-  "disabledExtensions" | "flaggedExtensions"
+  "disabledExtensions" | "flaggedExtensions" | "getEditorMetaData"
 > & {
   anchor: string;
   workspaceId: string;
@@ -28,7 +29,10 @@ type RichTextEditorWrapperProps = MakeOptional<
       }
   );
 
-export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProps>((props, ref) => {
+export const RichTextEditor = forwardRef(function RichTextEditor(
+  props: RichTextEditorWrapperProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
   const {
     anchor,
     containerClassName,
@@ -37,7 +41,13 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
     disabledExtensions: additionalDisabledExtensions = [],
     ...rest
   } = props;
+  // store hooks
   const { getMemberById } = useMember();
+  // parse content
+  const { getEditorMetaData } = useParseEditorContent({
+    anchor,
+  });
+  // editor flaggings
   const { richText: richTextEditorExtensions } = useEditorFlagging(anchor);
 
   return (
@@ -56,6 +66,7 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
         uploadFile: editable ? props.uploadFile : async () => "",
         workspaceId,
       })}
+      getEditorMetaData={getEditorMetaData}
       flaggedExtensions={richTextEditorExtensions.flagged}
       extendedEditorProps={{}}
       {...rest}
diff --git a/apps/space/core/components/editor/toolbar.tsx b/apps/space/core/components/editor/toolbar.tsx
index bb6347f427..c1ca99d6a3 100644
--- a/apps/space/core/components/editor/toolbar.tsx
+++ b/apps/space/core/components/editor/toolbar.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useEffect, useState, useCallback } from "react";
 // plane imports
 import { TOOLBAR_ITEMS } from "@plane/editor";
@@ -19,7 +17,7 @@ type Props = {
 
 const toolbarItems = TOOLBAR_ITEMS.lite;
 
-export const IssueCommentToolbar: React.FC<Props> = (props) => {
+export function IssueCommentToolbar(props: Props) {
   const { executeCommand, handleSubmit, isCommentEmpty, editorRef, isSubmitting, showSubmitButton } = props;
   // states
   const [activeStates, setActiveStates] = useState<Record<string, boolean>>({});
@@ -50,13 +48,13 @@ export const IssueCommentToolbar: React.FC<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,
               })}
             >
@@ -67,9 +65,9 @@ export const IssueCommentToolbar: React.FC<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>
                     }
                   >
@@ -77,15 +75,15 @@ export const IssueCommentToolbar: React.FC<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 place-items-center aspect-square 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}
                       />
@@ -101,7 +99,6 @@ export const IssueCommentToolbar: React.FC<Props> = (props) => {
             <Button
               type="button"
               variant="primary"
-              className="px-2.5 py-1.5 text-xs"
               onClick={handleSubmit}
               disabled={isCommentEmpty}
               loading={isSubmitting}
@@ -113,4 +110,4 @@ export const IssueCommentToolbar: React.FC<Props> = (props) => {
       </div>
     </div>
   );
-};
+}
diff --git a/apps/space/core/components/instance/instance-failure-view.tsx b/apps/space/core/components/instance/instance-failure-view.tsx
index 5680b39d66..f519a432dc 100644
--- a/apps/space/core/components/instance/instance-failure-view.tsx
+++ b/apps/space/core/components/instance/instance-failure-view.tsx
@@ -1,12 +1,10 @@
-"use client";
-
 import { useTheme } from "next-themes";
 import { Button } from "@plane/propel/button";
 // assets
 import InstanceFailureDarkImage from "@/app/assets/instance/instance-failure-dark.svg?url";
 import InstanceFailureImage from "@/app/assets/instance/instance-failure.svg?url";
 
-export const InstanceFailureView: React.FC = () => {
+export function InstanceFailureView() {
   const { resolvedTheme } = useTheme();
 
   const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;
@@ -20,18 +18,18 @@ export const InstanceFailureView: React.FC = () => {
       <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">
           <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="font-medium text-20 text-on-color ">Unable to fetch instance details.</h3>
+          <p className="font-medium text-14 text-center">
             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>
       </div>
     </div>
   );
-};
+}
diff --git a/apps/space/core/components/issues/filters/applied-filters/filters-list.tsx b/apps/space/core/components/issues/filters/applied-filters/filters-list.tsx
index bffc7c553a..73be2c1059 100644
--- a/apps/space/core/components/issues/filters/applied-filters/filters-list.tsx
+++ b/apps/space/core/components/issues/filters/applied-filters/filters-list.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import { CloseIcon } from "@plane/propel/icons";
@@ -17,7 +15,7 @@ type Props = {
 
 export const replaceUnderscoreIfSnakeCase = (str: string) => str.replace(/_/g, " ");
 
-export const AppliedFiltersList: React.FC<Props> = observer((props) => {
+export const AppliedFiltersList = observer(function AppliedFiltersList(props: Props) {
   const { appliedFilters = {}, handleRemoveAllFilters, handleRemoveFilter } = props;
   const { t } = useTranslation();
 
@@ -32,9 +30,9 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
         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
@@ -52,7 +50,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
 
               <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} />
@@ -64,7 +62,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
       <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/core/components/issues/filters/applied-filters/label.tsx
index 2b842c152e..850c166dd4 100644
--- a/apps/space/core/components/issues/filters/applied-filters/label.tsx
+++ b/apps/space/core/components/issues/filters/applied-filters/label.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { CloseIcon } from "@plane/propel/icons";
 // types
 import type { IIssueLabel } from "@/types/issue";
@@ -10,7 +8,7 @@ type Props = {
   values: string[];
 };
 
-export const AppliedLabelsFilters: React.FC<Props> = (props) => {
+export function AppliedLabelsFilters(props: Props) {
   const { handleRemove, labels, values } = props;
 
   return (
@@ -21,7 +19,7 @@ export const AppliedLabelsFilters: React.FC<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={{
@@ -31,7 +29,7 @@ export const AppliedLabelsFilters: React.FC<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} />
@@ -41,4 +39,4 @@ export const AppliedLabelsFilters: React.FC<Props> = (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
index da151873f9..c439b1d106 100644
--- a/apps/space/core/components/issues/filters/applied-filters/priority.tsx
+++ b/apps/space/core/components/issues/filters/applied-filters/priority.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { CloseIcon, PriorityIcon } from "@plane/propel/icons";
 import type { TIssuePriorities } from "@plane/propel/icons";
 
@@ -8,26 +6,24 @@ type Props = {
   values: TIssuePriorities[];
 };
 
-export const AppliedPriorityFilters: React.FC<Props> = (props) => {
+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>
-        ))}
+      {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/core/components/issues/filters/applied-filters/root.tsx
index a266e8de9b..965ea473c9 100644
--- a/apps/space/core/components/issues/filters/applied-filters/root.tsx
+++ b/apps/space/core/components/issues/filters/applied-filters/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useCallback } from "react";
 import { cloneDeep } from "lodash-es";
 import { observer } from "mobx-react";
@@ -15,7 +13,7 @@ type TIssueAppliedFilters = {
   anchor: string;
 };
 
-export const IssueAppliedFilters: React.FC<TIssueAppliedFilters> = observer((props) => {
+export const IssueAppliedFilters = observer(function IssueAppliedFilters(props: TIssueAppliedFilters) {
   const { anchor } = props;
   // router
   const router = useRouter();
@@ -91,7 +89,7 @@ export const IssueAppliedFilters: React.FC<TIssueAppliedFilters> = observer((pro
   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/core/components/issues/filters/applied-filters/state.tsx
index 1836c86a76..ad41cb001b 100644
--- a/apps/space/core/components/issues/filters/applied-filters/state.tsx
+++ b/apps/space/core/components/issues/filters/applied-filters/state.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane imports
 import { EIconSize } from "@plane/constants";
@@ -12,7 +10,7 @@ type Props = {
   values: string[];
 };
 
-export const AppliedStateFilters: React.FC<Props> = observer((props) => {
+export const AppliedStateFilters = observer(function AppliedStateFilters(props: Props) {
   const { handleRemove, values } = props;
 
   const { sortedStates: states } = useStates();
@@ -25,12 +23,12 @@ export const AppliedStateFilters: React.FC<Props> = observer((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/core/components/issues/filters/helpers/dropdown.tsx
index e9f025b2b4..b4987a9df3 100644
--- a/apps/space/core/components/issues/filters/helpers/dropdown.tsx
+++ b/apps/space/core/components/issues/filters/helpers/dropdown.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { Fragment, useState } from "react";
 import type { Placement } from "@popperjs/core";
 import { usePopper } from "react-popper";
@@ -13,7 +11,7 @@ type Props = {
   placement?: Placement;
 };
 
-export const FiltersDropdown: React.FC<Props> = (props) => {
+export function FiltersDropdown(props: Props) {
   const { children, title = "Dropdown", placement } = props;
 
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
@@ -31,8 +29,8 @@ export const FiltersDropdown: React.FC<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>
@@ -48,7 +46,7 @@ export const FiltersDropdown: React.FC<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}
@@ -62,4 +60,4 @@ export const FiltersDropdown: React.FC<Props> = (props) => {
       }}
     </Popover>
   );
-};
+}
diff --git a/apps/space/core/components/issues/filters/helpers/filter-header.tsx b/apps/space/core/components/issues/filters/helpers/filter-header.tsx
index 4505efbdb0..aebbad7f1f 100644
--- a/apps/space/core/components/issues/filters/helpers/filter-header.tsx
+++ b/apps/space/core/components/issues/filters/helpers/filter-header.tsx
@@ -1,4 +1,3 @@
-"use client";
 import React from "react";
 // icons
 import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
@@ -9,15 +8,17 @@ interface IFilterHeader {
   handleIsPreviewEnabled: () => void;
 }
 
-export const FilterHeader = ({ title, isPreviewEnabled, handleIsPreviewEnabled }: IFilterHeader) => (
-  <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>
-    <button
-      type="button"
-      className="grid h-5 w-5 flex-shrink-0 place-items-center rounded hover:bg-custom-background-80"
-      onClick={handleIsPreviewEnabled}
-    >
-      {isPreviewEnabled ? <ChevronUpIcon height={14} width={14} /> : <ChevronDownIcon height={14} width={14} />}
-    </button>
-  </div>
-);
+export function FilterHeader({ title, isPreviewEnabled, handleIsPreviewEnabled }: IFilterHeader) {
+  return (
+    <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 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} />}
+      </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
index ba782b2c3b..0926e5e934 100644
--- a/apps/space/core/components/issues/filters/helpers/filter-option.tsx
+++ b/apps/space/core/components/issues/filters/helpers/filter-option.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 // lucide icons
 import { Check } from "lucide-react";
@@ -12,26 +10,26 @@ type Props = {
   multiple?: boolean;
 };
 
-export const FilterOption: React.FC<Props> = (props) => {
+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"
+      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 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} />}
       </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>
+        {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/core/components/issues/filters/labels.tsx b/apps/space/core/components/issues/filters/labels.tsx
index a3effcf2b8..3db53f0253 100644
--- a/apps/space/core/components/issues/filters/labels.tsx
+++ b/apps/space/core/components/issues/filters/labels.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 // plane imports
 import { Loader } from "@plane/ui";
@@ -9,9 +7,9 @@ import type { IIssueLabel } from "@/types/issue";
 import { FilterHeader } from "./helpers/filter-header";
 import { FilterOption } from "./helpers/filter-option";
 
-const LabelIcons = ({ color }: { color: string }) => (
-  <span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: color }} />
-);
+function LabelIcons({ color }: { color: string }) {
+  return <span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: color }} />;
+}
 
 type Props = {
   appliedFilters: string[] | null;
@@ -20,7 +18,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterLabels: React.FC<Props> = (props) => {
+export function FilterLabels(props: Props) {
   const { appliedFilters, handleUpdate, labels, searchQuery } = props;
 
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -61,7 +59,7 @@ export const FilterLabels: React.FC<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"}
@@ -69,7 +67,7 @@ export const FilterLabels: React.FC<Props> = (props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 italic text-placeholder">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
@@ -82,4 +80,4 @@ export const FilterLabels: React.FC<Props> = (props) => {
       )}
     </>
   );
-};
+}
diff --git a/apps/space/core/components/issues/filters/priority.tsx b/apps/space/core/components/issues/filters/priority.tsx
index 674b052f5b..df18ec6aef 100644
--- a/apps/space/core/components/issues/filters/priority.tsx
+++ b/apps/space/core/components/issues/filters/priority.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -16,7 +14,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterPriority: React.FC<Props> = observer((props) => {
+export const FilterPriority = observer(function FilterPriority(props: Props) {
   const { appliedFilters, handleUpdate, searchQuery } = props;
 
   // hooks
@@ -48,7 +46,7 @@ export const FilterPriority: React.FC<Props> = observer((props) => {
               />
             ))
           ) : (
-            <p className="text-xs italic text-custom-text-400">{t("common.search.no_matches_found")}</p>
+            <p className="text-11 italic text-placeholder">{t("common.search.no_matches_found")}</p>
           )}
         </div>
       )}
diff --git a/apps/space/core/components/issues/filters/root.tsx b/apps/space/core/components/issues/filters/root.tsx
index 6b21171c70..d7d5de6aa2 100644
--- a/apps/space/core/components/issues/filters/root.tsx
+++ b/apps/space/core/components/issues/filters/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useCallback } from "react";
 import { cloneDeep } from "lodash-es";
 import { observer } from "mobx-react";
@@ -20,7 +18,7 @@ type IssueFiltersDropdownProps = {
   anchor: string;
 };
 
-export const IssueFiltersDropdown: React.FC<IssueFiltersDropdownProps> = observer((props) => {
+export const IssueFiltersDropdown = observer(function IssueFiltersDropdown(props: IssueFiltersDropdownProps) {
   const { anchor } = props;
   // router
   const router = useRouter();
@@ -58,7 +56,7 @@ export const IssueFiltersDropdown: React.FC<IssueFiltersDropdownProps> = observe
   );
 
   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/core/components/issues/filters/selection.tsx
index 221e9df8cf..cf7f11c4e3 100644
--- a/apps/space/core/components/issues/filters/selection.tsx
+++ b/apps/space/core/components/issues/filters/selection.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { Search } from "lucide-react";
@@ -16,7 +14,7 @@ type Props = {
   layoutDisplayFiltersOptions: TIssueFilterKeys[];
 };
 
-export const FilterSelection: React.FC<Props> = observer((props) => {
+export const FilterSelection = observer(function FilterSelection(props: Props) {
   const { filters, handleFilters, layoutDisplayFiltersOptions } = props;
 
   const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
@@ -25,12 +23,12 @@ export const FilterSelection: React.FC<Props> = observer((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">
+          <Search className="text-placeholder" size={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)}
@@ -38,12 +36,12 @@ export const FilterSelection: React.FC<Props> = observer((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/core/components/issues/filters/state.tsx
index a794d532af..6ea374eb53 100644
--- a/apps/space/core/components/issues/filters/state.tsx
+++ b/apps/space/core/components/issues/filters/state.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // ui
@@ -18,7 +16,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterState: React.FC<Props> = observer((props) => {
+export const FilterState = observer(function FilterState(props: Props) {
   const { appliedFilters, handleUpdate, searchQuery } = props;
 
   const { sortedStates: states } = useStates();
@@ -61,7 +59,7 @@ export const FilterState: React.FC<Props> = observer((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"}
@@ -69,7 +67,7 @@ export const FilterState: React.FC<Props> = observer((props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 italic text-placeholder">No matches found</p>
             )
           ) : (
             <Loader className="space-y-2">
diff --git a/apps/space/core/components/issues/issue-layouts/error.tsx b/apps/space/core/components/issues/issue-layouts/error.tsx
index a67ca8a6ad..8ae86f1ba9 100644
--- a/apps/space/core/components/issues/issue-layouts/error.tsx
+++ b/apps/space/core/components/issues/issue-layouts/error.tsx
@@ -1,20 +1,22 @@
 // assets
 import SomethingWentWrongImage from "@/app/assets/something-went-wrong.svg?url";
 
-export const SomethingWentWrongError = () => (
-  <div className="grid min-h-screen w-full place-items-center 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="grid h-32 w-32 place-items-center">
-          <img
-            src={SomethingWentWrongImage}
-            alt="Oops! Something went wrong"
-            className="w-full h-full object-contain"
-          />
+export function SomethingWentWrongError() {
+  return (
+    <div className="bg-surface-1 grid min-h-screen w-full place-items-center p-6">
+      <div className="text-center">
+        <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"
+            />
+          </div>
         </div>
+        <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>
-      <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>
     </div>
-  </div>
-);
+  );
+}
diff --git a/apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx b/apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx
index 473843343d..849c98a445 100644
--- a/apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx
+++ b/apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx
@@ -11,24 +11,24 @@ interface Props {
     subGroupId: string | undefined,
     isSubGroupCumulative: boolean
   ) => number | undefined;
-  getIssueLoader: (groupId?: string | undefined, subGroupId?: string | undefined) => TLoader;
+  getIssueLoader: (groupId?: string, subGroupId?: string) => TLoader;
 }
 
-export const IssueLayoutHOC = observer((props: Props) => {
+export const IssueLayoutHOC = observer(function IssueLayoutHOC(props: Props) {
   const { getIssueLoader, getGroupIssueCount } = props;
 
   const issueCount = getGroupIssueCount(undefined, undefined, false);
 
   if (getIssueLoader() === "init-loader" || issueCount === undefined) {
     return (
-      <div className="relative flex h-screen w-full items-center justify-center">
+      <div className="relative size-full grid 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="size-full grid 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/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
index b65b93924e..0043ed6601 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useCallback, useMemo, useRef } from "react";
 import { debounce } from "lodash-es";
 import { observer } from "mobx-react";
@@ -15,7 +13,7 @@ import { KanBan } from "./default";
 type Props = {
   anchor: string;
 };
-export const IssueKanbanLayoutRoot: React.FC<Props> = observer((props: Props) => {
+export const IssueKanbanLayoutRoot = observer(function IssueKanbanLayoutRoot(props: Props) {
   const { anchor } = props;
   // store hooks
   const { groupedIssueIds, getIssueLoader, fetchNextPublicIssues, getGroupIssueCount, getPaginationData } = useIssue();
@@ -51,10 +49,10 @@ export const IssueKanbanLayoutRoot: React.FC<Props> = observer((props: Props) =>
   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 scrollbar-lg relative flex 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/core/components/issues/issue-layouts/kanban/block-reactions.tsx
index 504b67dffd..d9fc8bb1ec 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/block-reactions.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/block-reactions.tsx
@@ -11,7 +11,7 @@ import { usePublish } from "@/hooks/store/publish";
 type Props = {
   issueId: string;
 };
-export const BlockReactions = observer((props: Props) => {
+export const BlockReactions = observer(function BlockReactions(props: Props) {
   const { issueId } = props;
   const { anchor } = useParams();
   const { canVote, canReact } = usePublish(anchor.toString());
@@ -20,16 +20,12 @@ export const BlockReactions = observer((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="flex flex-wrap border-t-[1px] outline-transparent w-full border-t-subtle-1 bg-surface-2 rounded-b-lg">
       <div className="py-2 px-3 flex flex-wrap items-center gap-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:h-6 after:ml-1 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/core/components/issues/issue-layouts/kanban/block.tsx
index e98502b3f5..9a4b9f18b0 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/block.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/block.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { MutableRefObject } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -36,7 +34,7 @@ interface IssueDetailsBlockProps {
   displayProperties: IIssueDisplayProperties | undefined;
 }
 
-const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((props) => {
+const KanbanIssueDetailsBlock = observer(function KanbanIssueDetailsBlock(props: IssueDetailsBlockProps) {
   const { issue, displayProperties } = props;
   const { anchor } = useParams();
   // hooks
@@ -46,20 +44,20 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
     <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="w-full line-clamp-1 text-13 text-primary mb-1.5">
         <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 whitespace-nowrap text-tertiary pt-1.5"
         issue={issue}
         displayProperties={displayProperties}
       />
@@ -67,7 +65,7 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
   );
 });
 
-export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
+export const KanbanIssueBlock = observer(function KanbanIssueBlock(props: IssueBlockProps) {
   const { issueId, groupId, subGroupId, displayProperties } = props;
   const searchParams = useSearchParams();
   // query params
@@ -89,8 +87,10 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
     <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 border border-subtle border-strong bg-layer-2 text-13 transition-all rounded-lg bg-layer-2 hover:bg-layer-2-hover",
+          {
+            "border-accent-strong hover:border-accent-strong": getIsIssuePeeked(issue.id),
+          }
         )}
       >
         <Link
@@ -106,5 +106,3 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
     </div>
   );
 });
-
-KanbanIssueBlock.displayName = "KanbanIssueBlock";
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/blocks-list.tsx b/apps/space/core/components/issues/issue-layouts/kanban/blocks-list.tsx
index c5cea19cc7..93e95fed9a 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/blocks-list.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/blocks-list.tsx
@@ -13,14 +13,13 @@ interface IssueBlocksListProps {
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
 }
 
-export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = observer((props) => {
+export const KanbanIssueBlocksList = observer(function KanbanIssueBlocksList(props: IssueBlocksListProps) {
   const { subGroupId, groupId, issueIds, displayProperties, scrollableContainerRef } = props;
 
   return (
     <>
-      {issueIds && issueIds.length > 0 ? (
-        <>
-          {issueIds.map((issueId) => {
+      {issueIds && issueIds.length > 0
+        ? issueIds.map((issueId) => {
             if (!issueId) return null;
 
             let draggableId = issueId;
@@ -37,9 +36,8 @@ export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = observer((p
                 scrollableContainerRef={scrollableContainerRef}
               />
             );
-          })}
-        </>
-      ) : null}
+          })
+        : null}
     </>
   );
 });
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/default.tsx b/apps/space/core/components/issues/issue-layouts/kanban/default.tsx
index e5e622e8a9..ce8d9796c7 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/default.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/default.tsx
@@ -37,12 +37,12 @@ export interface IKanBan {
     isSubGroupCumulative: boolean
   ) => number | undefined;
   getPaginationData: (groupId: string | undefined, subGroupId: string | undefined) => TPaginationData | undefined;
-  getIssueLoader: (groupId?: string | undefined, subGroupId?: string | undefined) => TLoader;
+  getIssueLoader: (groupId?: string, subGroupId?: string) => TLoader;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
   showEmptyGroup?: boolean;
 }
 
-export const KanBan: React.FC<IKanBan> = observer((props) => {
+export const KanBan = observer(function KanBan(props: IKanBan) {
   const {
     groupedIssueIds,
     displayProperties,
@@ -80,48 +80,46 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
   };
 
   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 size-full flex 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/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
index a529afc770..38e75d1041 100644
--- 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
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { Circle } from "lucide-react";
 // types
@@ -12,21 +10,18 @@ interface IHeaderGroupByCard {
   count: number;
 }
 
-export const HeaderGroupByCard: React.FC<IHeaderGroupByCard> = observer((props) => {
+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">
+      <div className="relative flex shrink-0 gap-2 p-1.5 w-full flex-row items-center">
+        <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 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 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-primary">{title}</div>
+          <div className="shrink-0 text-13 font-medium text-tertiary pl-2">{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/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
index 6e5654c932..d86c71178c 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
@@ -11,24 +11,24 @@ interface IHeaderSubGroupByCard {
   toggleExpanded: () => void;
 }
 
-export const HeaderSubGroupByCard: React.FC<IHeaderSubGroupByCard> = observer((props) => {
+export const HeaderSubGroupByCard = observer(function HeaderSubGroupByCard(props: IHeaderSubGroupByCard) {
   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 flex-row items-center gap-2 rounded-xs p-1.5 cursor-pointer`}
       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/core/components/issues/issue-layouts/kanban/kanban-group.tsx
index 7fbcc5ae67..b467b74757 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/kanban-group.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/kanban-group.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { MutableRefObject } from "react";
 import { forwardRef, useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
@@ -31,17 +29,20 @@ interface IKanbanGroup {
     isSubGroupCumulative: boolean
   ) => number | undefined;
   getPaginationData: (groupId: string | undefined, subGroupId: string | undefined) => TPaginationData | undefined;
-  getIssueLoader: (groupId?: string | undefined, subGroupId?: string | undefined) => TLoader;
+  getIssueLoader: (groupId?: string, subGroupId?: string) => TLoader;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
 }
 
 // Loader components
-const KanbanIssueBlockLoader = forwardRef<HTMLSpanElement>((props, ref) => (
-  <span ref={ref} className="block h-28 m-1.5 animate-pulse bg-custom-background-80 rounded" />
-));
+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-layer-1 rounded-sm" />;
+});
 KanbanIssueBlockLoader.displayName = "KanbanIssueBlockLoader";
 
-export const KanbanGroup = observer((props: IKanbanGroup) => {
+export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
   const {
     groupId,
     subGroupId,
@@ -87,8 +88,9 @@ export const KanbanGroup = observer((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 p-3 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline cursor-pointer"
       onClick={loadMoreIssuesInThisGroup}
+      role="button"
     >
       {" "}
       Load More &darr;
diff --git a/apps/space/core/components/issues/issue-layouts/kanban/swimlanes.tsx b/apps/space/core/components/issues/issue-layouts/kanban/swimlanes.tsx
index 2799ee2832..f007ca93e7 100644
--- a/apps/space/core/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/apps/space/core/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -37,13 +37,13 @@ export interface IKanBanSwimLanes {
     isSubGroupCumulative: boolean
   ) => number | undefined;
   getPaginationData: (groupId: string | undefined, subGroupId: string | undefined) => TPaginationData | undefined;
-  getIssueLoader: (groupId?: string | undefined, subGroupId?: string | undefined) => TLoader;
+  getIssueLoader: (groupId?: string, subGroupId?: string) => TLoader;
   showEmptyGroup: boolean;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
   orderBy: TIssueOrderByOptions | undefined;
 }
 
-export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
+export const KanBanSwimLanes = observer(function KanBanSwimLanes(props: IKanBanSwimLanes) {
   const {
     groupedIssueIds,
     displayProperties,
@@ -71,7 +71,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
 
   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}
@@ -125,8 +125,14 @@ const visibilitySubGroupByGroupCount = (subGroupIssueCount: number, showEmptyGro
   return subGroupHeaderVisibility;
 };
 
-const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = observer(
-  ({ subGroupBy, groupBy, groupList, showEmptyGroup, getGroupIssueCount }) => (
+const SubGroupSwimlaneHeader = observer(function SubGroupSwimlaneHeader({
+  subGroupBy,
+  groupBy,
+  groupList,
+  showEmptyGroup,
+  getGroupIssueCount,
+}: ISubGroupSwimlaneHeader) {
+  return (
     <div className="relative flex h-max min-h-full w-full items-center gap-2">
       {groupList &&
         groupList.length > 0 &&
@@ -143,8 +149,8 @@ const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = observer(
           );
         })}
     </div>
-  )
-);
+  );
+});
 
 interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
   groupedIssueIds: TGroupedIssues | TSubGroupedIssues;
@@ -157,12 +163,12 @@ interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
     isSubGroupCumulative: boolean
   ) => number | undefined;
   getPaginationData: (groupId: string | undefined, subGroupId: string | undefined) => TPaginationData | undefined;
-  getIssueLoader: (groupId?: string | undefined, subGroupId?: string | undefined) => TLoader;
+  getIssueLoader: (groupId?: string, subGroupId?: string) => TLoader;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
   loadMoreIssues: (groupId?: string, subGroupId?: string) => void;
 }
 
-const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
+const SubGroupSwimlane = observer(function SubGroupSwimlane(props: ISubGroupSwimlane) {
   const {
     groupedIssueIds,
     subGroupBy,
@@ -214,12 +220,12 @@ interface ISubGroup {
     isSubGroupCumulative: boolean
   ) => number | undefined;
   getPaginationData: (groupId: string | undefined, subGroupId: string | undefined) => TPaginationData | undefined;
-  getIssueLoader: (groupId?: string | undefined, subGroupId?: string | undefined) => TLoader;
+  getIssueLoader: (groupId?: string, subGroupId?: string) => TLoader;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
   loadMoreIssues: (groupId?: string, subGroupId?: string) => void;
 }
 
-const SubGroup: React.FC<ISubGroup> = observer((props) => {
+const SubGroup = observer(function SubGroup(props: ISubGroup) {
   const {
     groupedIssueIds,
     subGroupBy,
@@ -263,7 +269,7 @@ const SubGroup: React.FC<ISubGroup> = observer((props) => {
   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] py-1 flex w-full items-center bg-layer-1 border-y-[0.5px] border-subtle">
           <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/core/components/issues/issue-layouts/list/base-list-root.tsx
index c3d498e315..c4cc972fe6 100644
--- a/apps/space/core/components/issues/issue-layouts/list/base-list-root.tsx
+++ b/apps/space/core/components/issues/issue-layouts/list/base-list-root.tsx
@@ -13,7 +13,7 @@ type Props = {
   anchor: string;
 };
 
-export const IssuesListLayoutRoot = observer((props: Props) => {
+export const IssuesListLayoutRoot = observer(function IssuesListLayoutRoot(props: Props) {
   const { anchor } = props;
   // store hooks
   const {
@@ -46,7 +46,7 @@ export const IssuesListLayoutRoot = observer((props: 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/core/components/issues/issue-layouts/list/block.tsx
index 522d46a9e8..2168d9f5f0 100644
--- a/apps/space/core/components/issues/issue-layouts/list/block.tsx
+++ b/apps/space/core/components/issues/issue-layouts/list/block.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -24,7 +22,7 @@ interface IssueBlockProps {
   displayProperties: IIssueDisplayProperties | undefined;
 }
 
-export const IssueBlock = observer((props: IssueBlockProps) => {
+export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
   const { anchor } = useParams();
   const { issueId, displayProperties } = props;
   const searchParams = useSearchParams();
@@ -52,18 +50,18 @@ export const IssueBlock = observer((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 min-h-11 relative flex flex-col md:flex-row md:items-center gap-3 hover:bg-layer-transparent-hover p-3 pl-1.5 text-13 transition-colors border border-transparent border-b-subtle",
         {
-          "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 text-11 font-medium text-tertiary px-4">
                 {projectIdentifier}-{issue.sequence_id}
               </div>
             )}
@@ -73,7 +71,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
             id={`issue-${issue.id}`}
             href={`?${queryParam}`}
             onClick={handleIssuePeekOverview}
-            className="w-full truncate cursor-pointer text-sm text-custom-text-100"
+            className="w-full truncate cursor-pointer text-13 text-primary"
           >
             <Tooltip tooltipContent={issue.name} position="top-start">
               <p className="truncate">{issue.name}</p>
@@ -81,9 +79,9 @@ export const IssueBlock = observer((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 md:grow md:shrink-0 items-center gap-2 whitespace-nowrap"
           issue={issue}
           displayProperties={displayProperties}
         />
diff --git a/apps/space/core/components/issues/issue-layouts/list/blocks-list.tsx b/apps/space/core/components/issues/issue-layouts/list/blocks-list.tsx
index 392d17a04f..391c51dd0c 100644
--- a/apps/space/core/components/issues/issue-layouts/list/blocks-list.tsx
+++ b/apps/space/core/components/issues/issue-layouts/list/blocks-list.tsx
@@ -10,16 +10,14 @@ interface Props {
   containerRef: MutableRefObject<HTMLDivElement | null>;
 }
 
-export const IssueBlocksList: React.FC<Props> = (props) => {
+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/core/components/issues/issue-layouts/list/default.tsx
index a10333a61e..fcc27d3e4b 100644
--- a/apps/space/core/components/issues/issue-layouts/list/default.tsx
+++ b/apps/space/core/components/issues/issue-layouts/list/default.tsx
@@ -6,7 +6,6 @@ import type {
   TGroupedIssues,
   IIssueDisplayProperties,
   TIssueGroupByOptions,
-  IGroupByColumn,
   TPaginationData,
   TLoader,
 } from "@plane/types";
@@ -32,10 +31,10 @@ export interface IList {
     isSubGroupCumulative: boolean
   ) => number | undefined;
   getPaginationData: (groupId: string | undefined, subGroupId: string | undefined) => TPaginationData | undefined;
-  getIssueLoader: (groupId?: string | undefined, subGroupId?: string | undefined) => TLoader;
+  getIssueLoader: (groupId?: string, subGroupId?: string) => TLoader;
 }
 
-export const List: React.FC<IList> = observer((props) => {
+export const List = observer(function List(props: IList) {
   const {
     groupedIssueIds,
     groupBy,
@@ -67,7 +66,7 @@ export const List: React.FC<IList> = observer((props) => {
             ref={containerRef}
             className="size-full vertical-scrollbar scrollbar-lg relative overflow-auto vertical-scrollbar-margin-top-md"
           >
-            {groupList.map((group: IGroupByColumn) => (
+            {groupList.map((group) => (
               <ListGroup
                 key={group.id}
                 groupIssueIds={groupedIssueIds?.[group.id]}
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
index e92e9daeda..f40b379491 100644
--- 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
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { CircleDashed } from "lucide-react";
 
@@ -11,22 +9,23 @@ interface IHeaderGroupByCard {
   toggleListGroup: (id: string) => void;
 }
 
-export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => {
+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"
+        className="group/list-header relative w-full shrink-0 flex items-center gap-2 py-1.5 hover:bg-layer-transparent-hover px-2 py-1"
         onClick={() => toggleListGroup(groupID)}
+        role="button"
       >
-        <div className="flex-shrink-0 grid place-items-center overflow-hidden">
+        <div className="shrink-0 size-3.5 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 className="relative flex w-full items-center gap-1 overflow-hidden cursor-pointer">
+          <div className="inline-block line-clamp-1 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/core/components/issues/issue-layouts/list/list-group.tsx
index f62cd02329..7bf8e6c486 100644
--- a/apps/space/core/components/issues/issue-layouts/list/list-group.tsx
+++ b/apps/space/core/components/issues/issue-layouts/list/list-group.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { MutableRefObject } from "react";
 import { Fragment, forwardRef, useRef, useState } from "react";
 import { observer } from "mobx-react";
@@ -34,28 +32,33 @@ interface Props {
     isSubGroupCumulative: boolean
   ) => number | undefined;
   getPaginationData: (groupId: string | undefined, subGroupId: string | undefined) => TPaginationData | undefined;
-  getIssueLoader: (groupId?: string | undefined, subGroupId?: string | undefined) => TLoader;
+  getIssueLoader: (groupId?: string, subGroupId?: string) => TLoader;
 }
 
 // List loader component
-const ListLoaderItemRow = forwardRef<HTMLDivElement>((props, ref) => (
-  <div ref={ref} className="flex items-center justify-between h-11 p-3 border-b border-custom-border-200">
-    <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`} />
+const ListLoaderItemRow = forwardRef(function ListLoaderItemRow(
+  props: Record<string, unknown>,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  return (
+    <div ref={ref} className="flex items-center justify-between h-11 p-3 border-b border-subtle">
+      <div className="flex items-center gap-3">
+        <span className="h-5 w-10 bg-layer-1 rounded-sm animate-pulse" />
+        <span className={`h-5 w-52 bg-layer-1 rounded-sm animate-pulse`} />
+      </div>
+      <div className="flex items-center gap-2">
+        {[...Array(6)].map((_, index) => (
+          <Fragment key={index}>
+            <span key={index} className="h-5 w-5 bg-layer-1 rounded-sm animate-pulse" />
+          </Fragment>
+        ))}
+      </div>
     </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" />
-        </Fragment>
-      ))}
-    </div>
-  </div>
-));
+  );
+});
 ListLoaderItemRow.displayName = "ListLoaderItemRow";
 
-export const ListGroup = observer((props: Props) => {
+export const ListGroup = observer(function ListGroup(props: Props) {
   const {
     groupIssueIds = [],
     group,
@@ -91,9 +94,10 @@ export const ListGroup = observer((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"
+        "h-11 relative flex items-center gap-3 bg-surface-1 border border-transparent border-t-subtle-1 pl-6 p-3 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline cursor-pointer"
       }
       onClick={() => loadMoreIssues(group.id)}
+      role="button"
     >
       {t("common.load_more")} &darr;
     </div>
@@ -111,8 +115,8 @@ export const ListGroup = observer((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/core/components/issues/issue-layouts/properties/all-properties.tsx
index 1162331d0e..d16a7b5975 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/all-properties.tsx
+++ b/apps/space/core/components/issues/issue-layouts/properties/all-properties.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { Link, Paperclip } from "lucide-react";
 import { ViewsIcon } from "@plane/propel/icons";
@@ -27,7 +25,7 @@ export interface IIssueProperties {
   className: string;
 }
 
-export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
+export const IssueProperties = observer(function IssueProperties(props: IIssueProperties) {
   const { issue, displayProperties, className } = props;
 
   if (!displayProperties || !issue.project_id) return null;
@@ -137,14 +135,14 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
         <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,
+                "hover:bg-layer-1 cursor-pointer": 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>
@@ -156,9 +154,9 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
         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>
@@ -170,9 +168,9 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
         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">
+          <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">
             <Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
-            <div className="text-xs">{issue.link_count}</div>
+            <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/core/components/issues/issue-layouts/properties/cycle.tsx
index 0df14f1ed0..a3dac69440 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/cycle.tsx
+++ b/apps/space/core/components/issues/issue-layouts/properties/cycle.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane ui
 import { CycleIcon } from "@plane/propel/icons";
@@ -14,7 +12,7 @@ type Props = {
   shouldShowBorder?: boolean;
 };
 
-export const IssueBlockCycle = observer(({ cycleId, shouldShowBorder = true }: Props) => {
+export const IssueBlockCycle = observer(function IssueBlockCycle({ cycleId, shouldShowBorder = true }: Props) {
   const { getCycleById } = useCycle();
 
   const cycle = getCycleById(cycleId);
@@ -23,13 +21,13 @@ export const IssueBlockCycle = observer(({ cycleId, shouldShowBorder = true }: P
     <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 text-11 gap-1.5">
           <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/core/components/issues/issue-layouts/properties/due-date.tsx
index 71afb2489b..07bb29ad6a 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/due-date.tsx
+++ b/apps/space/core/components/issues/issue-layouts/properties/due-date.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { DueDatePropertyIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -17,7 +15,7 @@ type Props = {
   shouldShowBorder?: boolean;
 };
 
-export const IssueBlockDate = observer((props: Props) => {
+export const IssueBlockDate = observer(function IssueBlockDate(props: Props) {
   const { due_date, stateId, shouldHighLight = true, shouldShowBorder = true } = props;
   const { getStateById } = useStates();
 
@@ -28,9 +26,9 @@ export const IssueBlockDate = observer((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", {
+        className={cn("flex h-full items-center gap-1 rounded-sm px-2.5 py-1 text-11 text-primary", {
           "text-red-500": shouldHighLight && due_date && shouldHighlightIssueDueDate(due_date, state?.group),
-          "border-[0.5px] border-custom-border-300": shouldShowBorder,
+          "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/core/components/issues/issue-layouts/properties/labels.tsx
index 9e4b80fff5..ce38586a3a 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/labels.tsx
+++ b/apps/space/core/components/issues/issue-layouts/properties/labels.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { LabelPropertyIcon } from "@plane/propel/icons";
 // plane imports
@@ -12,7 +10,7 @@ type Props = {
   shouldShowLabel?: boolean;
 };
 
-export const IssueBlockLabels = observer(({ labelIds, shouldShowLabel = false }: Props) => {
+export const IssueBlockLabels = observer(function IssueBlockLabels({ labelIds, shouldShowLabel = false }: Props) {
   const { getLabelsByIds } = useLabel();
 
   const labels = getLabelsByIds(labelIds);
@@ -23,7 +21,7 @@ export const IssueBlockLabels = observer(({ labelIds, shouldShowLabel = false }:
     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 px-2.5 py-1 text-11 border-[0.5px] border-strong`}
         >
           <LabelPropertyIcon className="h-3.5 w-3.5" strokeWidth={2} />
           {shouldShowLabel && <span>No Labels</span>}
@@ -39,9 +37,9 @@ export const IssueBlockLabels = observer(({ labelIds, shouldShowLabel = false }:
             <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 overflow-hidden h-full max-w-full flex-shrink-0 items-center 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={{
@@ -56,12 +54,12 @@ export const IssueBlockLabels = observer(({ labelIds, shouldShowLabel = false }:
         </>
       ) : (
         <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={`flex h-full flex-shrink-0 items-center rounded-sm border-[0.5px] border-strong px-2.5 py-1 text-11 cursor-not-allowed"
             `}
         >
           <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/core/components/issues/issue-layouts/properties/member.tsx
index 6b1bce1f95..2309f887cc 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/member.tsx
+++ b/apps/space/core/components/issues/issue-layouts/properties/member.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // icons
 import type { LucideIcon } from "lucide-react";
@@ -24,7 +22,7 @@ type AvatarProps = {
   icon?: LucideIcon;
 };
 
-export const ButtonAvatars: React.FC<AvatarProps> = observer((props: AvatarProps) => {
+export const ButtonAvatars = observer(function ButtonAvatars(props: AvatarProps) {
   const { showTooltip, members, icon: Icon } = props;
 
   if (Array.isArray(members)) {
@@ -56,7 +54,7 @@ export const ButtonAvatars: React.FC<AvatarProps> = observer((props: AvatarProps
   );
 });
 
-export const IssueBlockMembers = observer(({ memberIds, shouldShowBorder = true }: Props) => {
+export const IssueBlockMembers = observer(function IssueBlockMembers({ memberIds, shouldShowBorder = true }: Props) {
   const { getMembersByIds } = useMember();
 
   const members = getMembersByIds(memberIds);
@@ -64,11 +62,11 @@ export const IssueBlockMembers = observer(({ memberIds, shouldShowBorder = true
   return (
     <div className="relative h-full flex 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/core/components/issues/issue-layouts/properties/modules.tsx
index 29c7a4cee9..79ff45ff90 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/modules.tsx
+++ b/apps/space/core/components/issues/issue-layouts/properties/modules.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane ui
 import { ModuleIcon } from "@plane/propel/icons";
@@ -14,7 +12,7 @@ type Props = {
   shouldShowBorder?: boolean;
 };
 
-export const IssueBlockModules = observer(({ moduleIds, shouldShowBorder = true }: Props) => {
+export const IssueBlockModules = observer(function IssueBlockModules({ moduleIds, shouldShowBorder = true }: Props) {
   const { getModulesByIds } = useModule();
 
   const modules = getModulesByIds(moduleIds ?? []);
@@ -27,19 +25,19 @@ export const IssueBlockModules = observer(({ moduleIds, shouldShowBorder = true
         {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/core/components/issues/issue-layouts/properties/priority.tsx
index 720d9b4684..67ee607b74 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/priority.tsx
+++ b/apps/space/core/components/issues/issue-layouts/properties/priority.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { SignalHigh } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
 // types
@@ -9,23 +7,23 @@ import type { TIssuePriorities } from "@plane/types";
 // constants
 import { cn, getIssuePriorityFilters } from "@plane/utils";
 
-export const IssueBlockPriority = ({
+export function IssueBlockPriority({
   priority,
   shouldShowName = false,
 }: {
   priority: TIssuePriorities | null;
   shouldShowName?: boolean;
-}) => {
+}) {
   // hooks
   const { t } = useTranslation();
   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 <></>;
@@ -34,13 +32,13 @@ export const 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",
+          "h-full flex items-center gap-1.5 border-[0.5px] rounded-sm text-11 px-2 py-0.5",
           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,
           }
         )}
       >
@@ -61,8 +59,8 @@ export const 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/core/components/issues/issue-layouts/properties/state.tsx
index 2613adc4d3..71d57796f8 100644
--- a/apps/space/core/components/issues/issue-layouts/properties/state.tsx
+++ b/apps/space/core/components/issues/issue-layouts/properties/state.tsx
@@ -1,33 +1,45 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane ui
 import { StateGroupIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
+import type { TStateGroups } from "@plane/types";
 // plane utils
 import { cn } from "@plane/utils";
 //hooks
 import { useStates } from "@/hooks/store/use-state";
 
 type Props = {
-  stateId: string | undefined;
   shouldShowBorder?: boolean;
-};
-export const IssueBlockState = observer(({ stateId, shouldShowBorder = true }: Props) => {
-  const { getStateById } = useStates();
+} & (
+  | {
+      stateDetails: {
+        name: string;
+        group: TStateGroups;
+      };
+    }
+  | {
+      stateId: string;
+    }
+);
 
-  const state = getStateById(stateId);
+export const IssueBlockState = observer(function IssueBlockState(props: Props) {
+  const { shouldShowBorder = true } = props;
+  // store hooks
+  const { getStateById } = useStates();
+  // derived values
+  const state = "stateId" in props ? getStateById(props.stateId) : props.stateDetails;
+  if (!state) return null;
 
   return (
-    <Tooltip tooltipHeading="State" tooltipContent={state?.name ?? "State"}>
+    <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 ?? "backlog"} color={state?.color} />
-          <div className="text-xs">{state?.name ?? "State"}</div>
+          <StateGroupIcon stateGroup={state.group} />
+          <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/core/components/issues/issue-layouts/root.tsx
index bbe8186693..27d92a79bd 100644
--- a/apps/space/core/components/issues/issue-layouts/root.tsx
+++ b/apps/space/core/components/issues/issue-layouts/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
@@ -22,7 +20,7 @@ type Props = {
   publishSettings: PublishStore;
 };
 
-export const IssuesLayoutsRoot: React.FC<Props> = observer((props) => {
+export const IssuesLayoutsRoot = observer(function IssuesLayoutsRoot(props: Props) {
   const { peekId, publishSettings } = props;
   // store hooks
   const { getIssueFilters } = useIssueFilter();
@@ -53,20 +51,20 @@ export const IssuesLayoutsRoot: React.FC<Props> = observer((props) => {
   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/core/components/issues/issue-layouts/utils.tsx
index f36a76c21c..e8e2a6c699 100644
--- a/apps/space/core/components/issues/issue-layouts/utils.tsx
+++ b/apps/space/core/components/issues/issue-layouts/utils.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { isNil } from "lodash-es";
 // types
 import { EIconSize, ISSUE_PRIORITIES } from "@plane/constants";
@@ -46,7 +44,7 @@ export const getGroupByColumns = (
     case "labels":
       return getLabelsColumns(label) as any;
     case "assignees":
-      return getAssigneeColumns(member) as any;
+      return getAssigneeColumns(member);
     case "created_by":
       return getCreatedByColumns(member) as any;
     default:
@@ -67,7 +65,7 @@ const getCycleColumns = (cycleStore: ICycleStore): IGroupByColumn[] | undefined
       cycleGroups.push({
         id: cycle.id,
         name: cycle.name,
-        icon: <CycleGroupIcon cycleGroup={cycleStatus as TCycleGroups} className="h-3.5 w-3.5" />,
+        icon: <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5" />,
         payload: { cycle_id: cycle.id },
       });
     }
@@ -198,11 +196,8 @@ export const getDisplayPropertiesCount = (
   return count;
 };
 
-export const getIssueBlockId = (
-  issueId: string | undefined,
-  groupId: string | undefined,
-  subGroupId?: string | undefined
-) => `issue_${issueId}_${groupId}_${subGroupId}`;
+export const getIssueBlockId = (issueId: string | undefined, groupId: string | undefined, subGroupId?: string) =>
+  `issue_${issueId}_${groupId}_${subGroupId}`;
 
 /**
  * returns empty Array if groupId is None
diff --git a/apps/space/core/components/issues/issue-layouts/with-display-properties-HOC.tsx b/apps/space/core/components/issues/issue-layouts/with-display-properties-HOC.tsx
index 6b63d2bd5c..40593cde75 100644
--- a/apps/space/core/components/issues/issue-layouts/with-display-properties-HOC.tsx
+++ b/apps/space/core/components/issues/issue-layouts/with-display-properties-HOC.tsx
@@ -9,18 +9,21 @@ interface IWithDisplayPropertiesHOC {
   children: React.ReactNode;
 }
 
-export const WithDisplayPropertiesHOC = observer(
-  ({ displayProperties, shouldRenderProperty, displayPropertyKey, children }: IWithDisplayPropertiesHOC) => {
-    let shouldDisplayPropertyFromFilters = false;
-    if (Array.isArray(displayPropertyKey))
-      shouldDisplayPropertyFromFilters = displayPropertyKey.every((key) => !!displayProperties[key]);
-    else shouldDisplayPropertyFromFilters = !!displayProperties[displayPropertyKey];
+export const WithDisplayPropertiesHOC = observer(function WithDisplayPropertiesHOC({
+  displayProperties,
+  shouldRenderProperty,
+  displayPropertyKey,
+  children,
+}: IWithDisplayPropertiesHOC) {
+  let shouldDisplayPropertyFromFilters = false;
+  if (Array.isArray(displayPropertyKey))
+    shouldDisplayPropertyFromFilters = displayPropertyKey.every((key) => !!displayProperties[key]);
+  else shouldDisplayPropertyFromFilters = !!displayProperties[displayPropertyKey];
 
-    const renderProperty =
-      shouldDisplayPropertyFromFilters && (shouldRenderProperty ? shouldRenderProperty(displayProperties) : true);
+  const renderProperty =
+    shouldDisplayPropertyFromFilters && (shouldRenderProperty ? shouldRenderProperty(displayProperties) : true);
 
-    if (!renderProperty) return null;
+  if (!renderProperty) return null;
 
-    return <>{children}</>;
-  }
-);
+  return <>{children}</>;
+});
diff --git a/apps/space/core/components/issues/navbar/controls.tsx b/apps/space/core/components/issues/navbar/controls.tsx
index 7913f479b5..b8e2a06f6e 100644
--- a/apps/space/core/components/issues/navbar/controls.tsx
+++ b/apps/space/core/components/issues/navbar/controls.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -24,7 +22,7 @@ export type NavbarControlsProps = {
   publishSettings: PublishStore;
 };
 
-export const NavbarControls: React.FC<NavbarControlsProps> = observer((props) => {
+export const NavbarControls = observer(function NavbarControls(props: NavbarControlsProps) {
   // props
   const { publishSettings } = props;
   // router
@@ -106,17 +104,17 @@ export const NavbarControls: React.FC<NavbarControlsProps> = observer((props) =>
   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/core/components/issues/navbar/layout-icon.tsx b/apps/space/core/components/issues/navbar/layout-icon.tsx
index 2d5a5db5a6..e5dc3d0a7e 100644
--- a/apps/space/core/components/issues/navbar/layout-icon.tsx
+++ b/apps/space/core/components/issues/navbar/layout-icon.tsx
@@ -2,11 +2,11 @@ import type { TIssueLayout } from "@plane/constants";
 import { ListLayoutIcon, BoardLayoutIcon } from "@plane/propel/icons";
 import type { ISvgIcons } from "@plane/propel/icons";
 
-export const IssueLayoutIcon = ({
+export function IssueLayoutIcon({
   layout,
   size,
   ...props
-}: { layout: TIssueLayout; size?: number } & Omit<ISvgIcons, "width" | "height">) => {
+}: { layout: TIssueLayout; size?: number } & Omit<ISvgIcons, "width" | "height">) {
   const iconProps = {
     ...props,
     ...(size && { width: size, height: size }),
@@ -20,4 +20,4 @@ export const IssueLayoutIcon = ({
     default:
       return null;
   }
-};
+}
diff --git a/apps/space/core/components/issues/navbar/layout-selection.tsx b/apps/space/core/components/issues/navbar/layout-selection.tsx
index d6c196f54f..9c9662c2bc 100644
--- a/apps/space/core/components/issues/navbar/layout-selection.tsx
+++ b/apps/space/core/components/issues/navbar/layout-selection.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { useRouter, useSearchParams } from "next/navigation";
 // ui
@@ -19,7 +17,7 @@ type Props = {
   anchor: string;
 };
 
-export const IssuesLayoutSelection: React.FC<Props> = observer((props) => {
+export const IssuesLayoutSelection = observer(function IssuesLayoutSelection(props: Props) {
   const { anchor } = props;
   // hooks
   const { t } = useTranslation();
@@ -44,7 +42,7 @@ export const IssuesLayoutSelection: React.FC<Props> = observer((props) => {
   };
 
   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;
 
@@ -52,14 +50,14 @@ export const IssuesLayoutSelection: React.FC<Props> = observer((props) => {
           <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 transition-all bg-layer-transparent 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/core/components/issues/navbar/root.tsx
index d6e6bf08c8..5ae4da3681 100644
--- a/apps/space/core/components/issues/navbar/root.tsx
+++ b/apps/space/core/components/issues/navbar/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { ProjectIcon } from "@plane/propel/icons";
 // components
@@ -13,7 +11,7 @@ type Props = {
   publishSettings: PublishStore;
 };
 
-export const IssuesNavbarRoot: React.FC<Props> = observer((props) => {
+export const IssuesNavbarRoot = observer(function IssuesNavbarRoot(props: Props) {
   const { publishSettings } = props;
   // hooks
   const { project_details } = publishSettings;
@@ -21,22 +19,21 @@ export const IssuesNavbarRoot: React.FC<Props> = observer((props) => {
   return (
     <div className="relative flex justify-between w-full 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="size-7 shrink-0 grid 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/core/components/issues/navbar/theme.tsx
index 2078e9d123..21df650769 100644
--- a/apps/space/core/components/issues/navbar/theme.tsx
+++ b/apps/space/core/components/issues/navbar/theme.tsx
@@ -1,15 +1,12 @@
-"use client";
-
-// next theme
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
+import { Moon, Sun } from "lucide-react";
 
-// mobx react lite
-
-export const NavbarTheme = observer(() => {
+export const NavbarTheme = observer(function NavbarTheme() {
+  // states
   const [appTheme, setAppTheme] = useState("light");
-
+  // theme
   const { setTheme, theme } = useTheme();
 
   const handleTheme = () => {
@@ -25,9 +22,9 @@ export const NavbarTheme = observer(() => {
     <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 hover:bg-layer-transparent-hover text-primary"
     >
-      <span className="material-symbols-rounded text-sm">{appTheme === "light" ? "dark_mode" : "light_mode"}</span>
+      {appTheme === "light" ? <Moon className="shrink-0 size-3.5" /> : <Sun className="shrink-0 size-3.5" />}
     </button>
   );
 });
diff --git a/apps/space/core/components/issues/navbar/user-avatar.tsx b/apps/space/core/components/issues/navbar/user-avatar.tsx
index 6b4d8cf0bd..7cbdc6a88d 100644
--- a/apps/space/core/components/issues/navbar/user-avatar.tsx
+++ b/apps/space/core/components/issues/navbar/user-avatar.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { Fragment, useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -20,7 +18,7 @@ import { useUser } from "@/hooks/store/use-user";
 
 const authService = new AuthService();
 
-export const UserAvatar: React.FC = observer(() => {
+export const UserAvatar = observer(function UserAvatar() {
   const pathName = usePathname();
   const searchParams = useSearchParams();
   // query params
@@ -62,10 +60,7 @@ export const UserAvatar: React.FC = observer(() => {
         <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)}
@@ -73,7 +68,7 @@ export const UserAvatar: React.FC = observer(() => {
                   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 ||
@@ -92,7 +87,7 @@ export const UserAvatar: React.FC = observer(() => {
             >
               <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 shadow-raised-200 p-1"
                   ref={setPopperElement}
                   style={styles.popper}
                   {...attributes.popper}
@@ -103,9 +98,9 @@ export const UserAvatar: React.FC = observer(() => {
                       <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 items-center gap-2 rounded-sm p-2 whitespace-nowrap hover:bg-layer-transparent-hover text-13 min-w-36 cursor-pointer"
                       >
-                        <LogOut size={12} className="flex-shrink-0 text-red-500" />
+                        <LogOut size={12} className="shrink-0 text-red-500" />
                         <div>Sign out</div>
                       </button>
                     </form>
@@ -118,7 +113,7 @@ export const UserAvatar: React.FC = observer(() => {
       ) : (
         <div className="flex-shrink-0">
           <Link href={`/?next_path=${pathName}?${queryParam}`}>
-            <Button variant="outline-primary">Sign in</Button>
+            <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/core/components/issues/peek-overview/comment/add-comment.tsx
index 3a6e6f1d6f..f0e91d8b40 100644
--- a/apps/space/core/components/issues/peek-overview/comment/add-comment.tsx
+++ b/apps/space/core/components/issues/peek-overview/comment/add-comment.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useForm, Controller } from "react-hook-form";
@@ -26,7 +24,7 @@ type Props = {
   disabled?: boolean;
 };
 
-export const AddComment: React.FC<Props> = observer((props) => {
+export const AddComment = observer(function AddComment(props: Props) {
   const { anchor } = props;
   // states
   const [uploadedAssetIds, setUploadAssetIds] = useState<string[]>([]);
@@ -98,6 +96,9 @@ export const AddComment: React.FC<Props> = observer((props) => {
                 setUploadAssetIds((prev) => [...prev, asset_id]);
                 return asset_id;
               }}
+              displayConfig={{
+                fontSize: "small-font",
+              }}
             />
           )}
         />
diff --git a/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx b/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
index c33c1789bd..b6849e2dfb 100644
--- a/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
+++ b/apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
@@ -24,7 +24,7 @@ type Props = {
   comment: TIssuePublicComment;
 };
 
-export const CommentCard: React.FC<Props> = observer((props) => {
+export const CommentCard = observer(function CommentCard(props: Props) {
   const { anchor, comment } = props;
   // store hooks
   const { peekId, deleteIssueComment, updateIssueComment, uploadCommentAsset } = useIssueDetails();
@@ -42,7 +42,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
     control,
     formState: { isSubmitting },
     handleSubmit,
-  } = useForm<any>({
+  } = useForm<TIssuePublicComment>({
     defaultValues: { comment_html: comment.comment_html },
   });
 
@@ -63,7 +63,6 @@ export const CommentCard: React.FC<Props> = observer((props) => {
     <div className="relative flex items-start space-x-3">
       <div className="relative px-1">
         {comment.actor_detail.avatar_url && comment.actor_detail.avatar_url !== "" ? (
-          // eslint-disable-next-line @next/next/no-img-element
           <img
             src={getFileURL(comment.actor_detail.avatar_url)}
             alt={
@@ -71,26 +70,28 @@ export const CommentCard: React.FC<Props> = observer((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={`grid size-7 place-items-center rounded-full border-2 border-strong-1 bg-gray-500 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 -bottom-0.5 -right-1 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>
@@ -120,6 +121,9 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                       const { asset_id } = await uploadCommentAsset(file, anchor, comment.id);
                       return asset_id;
                     }}
+                    displayConfig={{
+                      fontSize: "small-font",
+                    }}
                   />
                 )}
               />
@@ -128,16 +132,16 @@ export const CommentCard: React.FC<Props> = observer((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 rounded-sm border border-green-500 bg-green-500/20 p-2 shadow-md duration-300 hover:bg-green-500"
               >
-                <Check className="h-3 w-3 text-green-500 duration-300 group-hover:text-white" strokeWidth={2} />
+                <Check className="h-3 w-3 text-green-500 duration-300 group-hover: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 rounded-sm border border-red-500 bg-red-500/20 p-2 shadow-md duration-300 hover:bg-red-500"
                 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-red-500 duration-300 group-hover:text-on-color" strokeWidth={2} />
               </button>
             </div>
           </form>
@@ -157,15 +161,14 @@ export const CommentCard: React.FC<Props> = observer((props) => {
           </div>
         </div>
       </div>
-
       {!isInIframe && currentUser?.id === comment?.actor_detail?.id && (
         <Menu as="div" className="relative w-min text-left">
           <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
@@ -177,7 +180,7 @@ export const CommentCard: React.FC<Props> = observer((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="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-strong bg-surface-1 p-1 text-11 shadow-lg focus:outline-none">
               <Menu.Item>
                 {({ active }) => (
                   <div className="py-1">
@@ -186,8 +189,8 @@ export const CommentCard: React.FC<Props> = observer((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 select-none truncate rounded-sm px-1 py-1.5 text-left text-secondary hover:bg-layer-transparent-hover ${
+                        active ? "bg-layer-transparent-hover" : ""
                       }`}
                     >
                       Edit
@@ -201,8 +204,8 @@ export const CommentCard: React.FC<Props> = observer((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 select-none truncate rounded-sm px-1 py-1.5 text-left text-secondary 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/core/components/issues/peek-overview/comment/comment-reactions.tsx
index 2636554efc..7a73fb4a0c 100644
--- a/apps/space/core/components/issues/peek-overview/comment/comment-reactions.tsx
+++ b/apps/space/core/components/issues/peek-overview/comment/comment-reactions.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
@@ -20,7 +18,7 @@ type Props = {
   commentId: string;
 };
 
-export const CommentReactions: React.FC<Props> = observer((props) => {
+export const CommentReactions = observer(function CommentReactions(props: Props) {
   const { anchor, commentId } = props;
   // state
   const [isPickerOpen, setIsPickerOpen] = useState(false);
diff --git a/apps/space/core/components/issues/peek-overview/full-screen-peek-view.tsx b/apps/space/core/components/issues/peek-overview/full-screen-peek-view.tsx
index 2b40085af2..c2fe4d8e7e 100644
--- a/apps/space/core/components/issues/peek-overview/full-screen-peek-view.tsx
+++ b/apps/space/core/components/issues/peek-overview/full-screen-peek-view.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane imports
 import { Loader } from "@plane/ui";
@@ -17,11 +15,11 @@ type Props = {
   issueDetails: IIssue | undefined;
 };
 
-export const FullScreenPeekView: React.FC<Props> = observer((props) => {
+export const FullScreenPeekView = observer(function FullScreenPeekView(props: Props) {
   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} />
@@ -33,7 +31,7 @@ export const FullScreenPeekView: React.FC<Props> = observer((props) => {
               <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/core/components/issues/peek-overview/header.tsx
index 0bf33066a1..fae71817d8 100644
--- a/apps/space/core/components/issues/peek-overview/header.tsx
+++ b/apps/space/core/components/issues/peek-overview/header.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 import { Link2, MoveRight } from "lucide-react";
@@ -38,7 +36,7 @@ const PEEK_MODES: {
   },
 ];
 
-export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
+export const PeekOverviewHeader = observer(function PeekOverviewHeader(props: Props) {
   const { handleClose } = props;
 
   const { peekMode, setPeekMode } = useIssueDetails();
@@ -63,7 +61,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
       <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>
           )}
@@ -71,12 +69,12 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
             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
@@ -88,16 +86,16 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
               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="absolute left-0 z-10 mt-1 min-w-[12rem] origin-top-left overflow-y-auto whitespace-nowrap rounded-md border border-strong bg-surface-2 text-11 shadow-lg 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 select-none truncate rounded-sm px-1 py-1.5 ${
+                          active ? "bg-layer-transparent-hover" : ""
+                        } ${selected ? "text-primary" : "text-secondary"}`
                       }
                     >
                       <div className="flex items-center gap-1.5">
@@ -112,16 +110,14 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
           </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 focus:outline-none text-tertiary hover:text-secondary"
+            tabIndex={1}
+          >
+            <Link2 className="h-4 w-4 -rotate-45" />
+          </button>
         )}
       </div>
     </>
diff --git a/apps/space/core/components/issues/peek-overview/issue-activity.tsx b/apps/space/core/components/issues/peek-overview/issue-activity.tsx
index c31ca24f2c..b5e94560e5 100644
--- a/apps/space/core/components/issues/peek-overview/issue-activity.tsx
+++ b/apps/space/core/components/issues/peek-overview/issue-activity.tsx
@@ -1,15 +1,12 @@
-"use client";
-
-import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 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";
@@ -23,7 +20,7 @@ type Props = {
   issueDetails: IIssue;
 };
 
-export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
+export const PeekOverviewIssueActivity = observer(function PeekOverviewIssueActivity(props: Props) {
   const { anchor } = props;
   // router
   const pathname = usePathname();
@@ -54,9 +51,9 @@ export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
               )}
             </>
           ) : (
-            <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 break-words text-13 text-secondary">
+                <Lock className="shrink-0 size-3" />
                 Sign in to add your comment
               </p>
               <Link href={`/?next_path=${pathname}`}>
diff --git a/apps/space/core/components/issues/peek-overview/issue-details.tsx b/apps/space/core/components/issues/peek-overview/issue-details.tsx
index 2ca097b236..94d7a125b2 100644
--- a/apps/space/core/components/issues/peek-overview/issue-details.tsx
+++ b/apps/space/core/components/issues/peek-overview/issue-details.tsx
@@ -12,7 +12,7 @@ type Props = {
   issueDetails: IIssue;
 };
 
-export const PeekOverviewIssueDetails: React.FC<Props> = observer((props) => {
+export const PeekOverviewIssueDetails = observer(function PeekOverviewIssueDetails(props: Props) {
   const { anchor, issueDetails } = props;
   // store hooks
   const { project_details, workspace: workspaceID } = usePublish(anchor);
@@ -21,10 +21,10 @@ export const PeekOverviewIssueDetails: React.FC<Props> = observer((props) => {
 
   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="break-words text-20 font-medium">{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/core/components/issues/peek-overview/issue-properties.tsx
index 94507922a5..0b73eed7b2 100644
--- a/apps/space/core/components/issues/peek-overview/issue-properties.tsx
+++ b/apps/space/core/components/issues/peek-overview/issue-properties.tsx
@@ -1,14 +1,17 @@
-"use client";
-
 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";
@@ -24,7 +27,10 @@ type Props = {
   mode?: IPeekMode;
 };
 
-export const PeekOverviewIssueProperties: React.FC<Props> = observer(({ issueDetails, mode }) => {
+export const PeekOverviewIssueProperties = observer(function PeekOverviewIssueProperties({
+  issueDetails,
+  mode,
+}: Props) {
   // hooks
   const { t } = useTranslation();
   const { getStateById } = useStates();
@@ -49,7 +55,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = observer(({ issueDet
   };
 
   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">
@@ -57,61 +63,57 @@ export const PeekOverviewIssueProperties: React.FC<Props> = observer(({ issueDet
           </h6>
           <div className="flex items-center gap-2">
             <button type="button" onClick={handleCopyLink} className="-rotate-45">
-              <Icon iconName="link" />
+              <LinkIcon className="shrink-0 size-3.5" />
             </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 items-center gap-1 w-1/4 flex-shrink-0 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="w-3/4 flex 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 items-center gap-1 w-1/4 flex-shrink-0 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 px-2.5 py-0.5 text-left text-13 capitalize bg-layer-2 ${
                 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 items-center gap-1 w-1/4 flex-shrink-0 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", {
+                className={cn("flex items-center gap-1.5 rounded-sm py-0.5 text-11 text-primary", {
                   "text-red-500": shouldHighlightIssueDueDate(issueDetails.target_date, state?.group),
                 })}
               >
@@ -119,7 +121,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = observer(({ issueDet
                 {renderFormattedDate(issueDetails.target_date)}
               </div>
             ) : (
-              <span className="text-custom-text-200">Empty</span>
+              <span className="text-secondary text-13">Empty</span>
             )}
           </div>
         </div>
diff --git a/apps/space/core/components/issues/peek-overview/issue-reaction.tsx b/apps/space/core/components/issues/peek-overview/issue-reaction.tsx
index 970f7ef5b5..6e13a85bd2 100644
--- a/apps/space/core/components/issues/peek-overview/issue-reaction.tsx
+++ b/apps/space/core/components/issues/peek-overview/issue-reaction.tsx
@@ -10,7 +10,7 @@ type Props = {
   anchor: string;
 };
 
-export const IssueReactions: React.FC<Props> = observer((props) => {
+export const IssueReactions = observer(function IssueReactions(props: Props) {
   const { anchor } = props;
   // store hooks
   const { canVote, canReact } = usePublish(anchor);
diff --git a/apps/space/core/components/issues/peek-overview/layout.tsx b/apps/space/core/components/issues/peek-overview/layout.tsx
index fe2a4655d8..d8b5a29ce1 100644
--- a/apps/space/core/components/issues/peek-overview/layout.tsx
+++ b/apps/space/core/components/issues/peek-overview/layout.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { Fragment, useEffect } from "react";
 import { observer } from "mobx-react";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -16,7 +14,7 @@ type TIssuePeekOverview = {
   handlePeekClose?: () => void;
 };
 
-export const IssuePeekOverview: React.FC<TIssuePeekOverview> = observer((props) => {
+export const IssuePeekOverview = observer(function IssuePeekOverview(props: TIssuePeekOverview) {
   const { anchor, peekId, handlePeekClose } = props;
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -70,7 +68,7 @@ export const IssuePeekOverview: React.FC<TIssuePeekOverview> = observer((props)
             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 right-0 top-0 z-20 h-full w-1/2 bg-surface-1 shadow-raised-200 border-l border-subtle-1">
               <SidePeekView anchor={anchor} handleClose={handleClose} issueDetails={issueDetails} />
             </Dialog.Panel>
           </Transition.Child>
@@ -87,7 +85,7 @@ export const IssuePeekOverview: React.FC<TIssuePeekOverview> = observer((props)
             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 bg-opacity-50 transition-opacity" />
           </Transition.Child>
           <Transition.Child
             as={Fragment}
@@ -100,8 +98,8 @@ export const IssuePeekOverview: React.FC<TIssuePeekOverview> = observer((props)
           >
             <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 left-1/2 top-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/core/components/issues/peek-overview/side-peek-view.tsx
index 047989083d..c965b7056c 100644
--- a/apps/space/core/components/issues/peek-overview/side-peek-view.tsx
+++ b/apps/space/core/components/issues/peek-overview/side-peek-view.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane imports
 import { Loader } from "@plane/ui";
@@ -19,18 +17,18 @@ type Props = {
   issueDetails: IIssue | undefined;
 };
 
-export const SidePeekView: React.FC<Props> = observer((props) => {
+export const SidePeekView = observer(function SidePeekView(props: Props) {
   const { anchor, handleClose, issueDetails } = props;
   // store hooks
   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} />
@@ -40,7 +38,7 @@ export const SidePeekView: React.FC<Props> = observer((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/core/components/issues/reactions/issue-emoji-reactions.tsx
index 0a3c193d9f..4f881595d6 100644
--- a/apps/space/core/components/issues/reactions/issue-emoji-reactions.tsx
+++ b/apps/space/core/components/issues/reactions/issue-emoji-reactions.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
@@ -19,7 +17,7 @@ type IssueEmojiReactionsProps = {
   issueIdFromProps?: string;
 };
 
-export const IssueEmojiReactions: React.FC<IssueEmojiReactionsProps> = observer((props) => {
+export const IssueEmojiReactions = observer(function IssueEmojiReactions(props: IssueEmojiReactionsProps) {
   const { anchor, issueIdFromProps } = props;
   // state
   const [isPickerOpen, setIsPickerOpen] = useState(false);
diff --git a/apps/space/core/components/issues/reactions/issue-vote-reactions.tsx b/apps/space/core/components/issues/reactions/issue-vote-reactions.tsx
index ce8642bb56..73e14cd0d2 100644
--- a/apps/space/core/components/issues/reactions/issue-vote-reactions.tsx
+++ b/apps/space/core/components/issues/reactions/issue-vote-reactions.tsx
@@ -1,6 +1,5 @@
-"use client";
-
 import { useState } from "react";
+import { ArrowDown, ArrowUp } from "lucide-react";
 import { observer } from "mobx-react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 // plane imports
@@ -19,7 +18,7 @@ type TIssueVotes = {
   size?: "md" | "sm";
 };
 
-export const IssueVotes: React.FC<TIssueVotes> = observer((props) => {
+export const IssueVotes = observer(function IssueVotes(props: TIssueVotes) {
   const { anchor, issueIdFromProps, size = "md" } = props;
   // states
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -101,17 +100,17 @@ export const IssueVotes: React.FC<TIssueVotes> = observer((props) => {
             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 focus:outline-none hover:bg-layer-transparent-hover",
             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="shrink-0 size-3.5" />
+          <span className="text-13 font-regular transition-opacity ease-in-out">{allUpVotes.length}</span>
         </button>
       </Tooltip>
 
@@ -142,17 +141,17 @@ export const IssueVotes: React.FC<TIssueVotes> = observer((props) => {
             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 focus:outline-none hover:bg-layer-transparent-hover",
             votingDimensions,
             {
               "border-red-600 text-red-600": isDownVotedByUser,
-              "border-custom-border-300": !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="shrink-0 size-3.5" />
+          <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/icon.tsx b/apps/space/core/components/ui/icon.tsx
deleted file mode 100644
index 7ddc768436..0000000000
--- 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 const Icon: React.FC<Props> = ({ iconName, className = "" }) => (
-  <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 b975409af4..0000000000
--- a/apps/space/core/components/ui/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./icon";
diff --git a/apps/space/core/components/ui/not-found.tsx b/apps/space/core/components/ui/not-found.tsx
index 5b78024a4b..5ec0874cb3 100644
--- a/apps/space/core/components/ui/not-found.tsx
+++ b/apps/space/core/components/ui/not-found.tsx
@@ -1,23 +1,23 @@
-"use client";
-
 // images
 import Image404 from "@/app/assets/404.svg?url";
 
-export const PageNotFound = () => (
-  <div className={`h-screen w-full overflow-hidden bg-custom-background-100`}>
-    <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" />
-        </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">
-            Sorry, the page you are looking for cannot be found. It may have been removed, had its name changed, or is
-            temporarily unavailable.
-          </p>
+export function PageNotFound() {
+  return (
+    <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" />
+          </div>
+          <div className="space-y-2">
+            <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>
         </div>
       </div>
     </div>
-  </div>
-);
+  );
+}
diff --git a/apps/space/core/components/views/auth.tsx b/apps/space/core/components/views/auth.tsx
index 756c047d3d..3fdf137356 100644
--- a/apps/space/core/components/views/auth.tsx
+++ b/apps/space/core/components/views/auth.tsx
@@ -1,15 +1,15 @@
-"use client";
-
 // components
 import { AuthRoot } from "@/components/account/auth-forms";
 import { PoweredBy } from "@/components/common/powered-by";
 // local imports
 import { AuthHeader } from "./header";
 
-export const AuthView = () => (
-  <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">
-    <AuthHeader />
-    <AuthRoot />
-    <PoweredBy />
-  </div>
-);
+export function AuthView() {
+  return (
+    <div className="bg-surface-1 relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
+      <AuthHeader />
+      <AuthRoot />
+      <PoweredBy />
+    </div>
+  );
+}
diff --git a/apps/space/core/components/views/header.tsx b/apps/space/core/components/views/header.tsx
index 80ba76de91..30284882d6 100644
--- a/apps/space/core/components/views/header.tsx
+++ b/apps/space/core/components/views/header.tsx
@@ -1,13 +1,13 @@
-"use client";
-
 import React from "react";
 import Link from "next/link";
 import { PlaneLockup } from "@plane/propel/icons";
 
-export const AuthHeader = () => (
-  <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>
-);
+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-primary" />
+      </Link>
+    </div>
+  );
+}
diff --git a/apps/space/core/hooks/use-clipboard-write-permission.tsx b/apps/space/core/hooks/use-clipboard-write-permission.tsx
index 1f89b82919..687a574c29 100644
--- a/apps/space/core/hooks/use-clipboard-write-permission.tsx
+++ b/apps/space/core/hooks/use-clipboard-write-permission.tsx
@@ -6,7 +6,7 @@ const useClipboardWritePermission = () => {
   useEffect(() => {
     const checkClipboardWriteAccess = () => {
       navigator.permissions
-        //eslint-disable-next-line no-undef
+
         .query({ name: "clipboard-write" as PermissionName })
         .then((result) => {
           if (result.state === "granted") {
diff --git a/apps/space/core/hooks/use-intersection-observer.tsx b/apps/space/core/hooks/use-intersection-observer.tsx
index 0fb1a26664..e2f2fd71eb 100644
--- a/apps/space/core/hooks/use-intersection-observer.tsx
+++ b/apps/space/core/hooks/use-intersection-observer.tsx
@@ -32,7 +32,6 @@ export const useIntersectionObserver = (
       observer.observe(elementRef);
       return () => {
         if (elementRef) {
-          // eslint-disable-next-line react-hooks/exhaustive-deps
           observer.unobserve(elementRef);
         }
       };
diff --git a/apps/space/core/hooks/use-parse-editor-content.ts b/apps/space/core/hooks/use-parse-editor-content.ts
new file mode 100644
index 0000000000..e540aad637
--- /dev/null
+++ b/apps/space/core/hooks/use-parse-editor-content.ts
@@ -0,0 +1,69 @@
+import { useCallback } from "react";
+// helpers
+import type { TCustomComponentsMetaData } from "@plane/utils";
+// helpers
+import { getEditorAssetSrc } from "@/helpers/editor.helper";
+// hooks
+import { useMember } from "@/hooks/store/use-member";
+
+type TArgs = {
+  anchor: string;
+};
+
+export const useParseEditorContent = (args: TArgs) => {
+  const { anchor } = args;
+  // store hooks
+  const { getMemberById } = useMember();
+
+  const getEditorMetaData = useCallback(
+    (htmlContent: string): TCustomComponentsMetaData => {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(htmlContent, "text/html");
+      const imageMetaData: TCustomComponentsMetaData["file_assets"] = [];
+      // process image components
+      const imageComponents = doc.querySelectorAll("image-component");
+      imageComponents.forEach((element) => {
+        const src = element.getAttribute("src");
+        if (src) {
+          const assetSrc = src.startsWith("http") ? src : getEditorAssetSrc(anchor, src);
+          if (assetSrc) {
+            imageMetaData.push({
+              id: src,
+              name: src,
+              url: assetSrc,
+            });
+          }
+        }
+      });
+      // process user mentions
+      const userMentions: TCustomComponentsMetaData["user_mentions"] = [];
+      const mentionComponents = doc.querySelectorAll("mention-component");
+      mentionComponents.forEach((element) => {
+        const id = element.getAttribute("entity_identifier");
+        if (id) {
+          const userDetails = getMemberById(id);
+          const originUrl = typeof window !== "undefined" && (window.location.origin ?? "");
+          const path = `profile/${id}`;
+          const url = `${originUrl}/${path}`;
+          if (userDetails) {
+            userMentions.push({
+              id,
+              display_name: userDetails.member__display_name,
+              url,
+            });
+          }
+        }
+      });
+
+      return {
+        file_assets: imageMetaData,
+        user_mentions: userMentions,
+      };
+    },
+    [anchor, getMemberById]
+  );
+
+  return {
+    getEditorMetaData,
+  };
+};
diff --git a/apps/space/core/lib/b-progress/AppProgressBar.tsx b/apps/space/core/lib/b-progress/AppProgressBar.tsx
index 915b19ff99..7ad93fc11b 100644
--- a/apps/space/core/lib/b-progress/AppProgressBar.tsx
+++ b/apps/space/core/lib/b-progress/AppProgressBar.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useRef } from "react";
 import { BProgress } from "@bprogress/core";
 import { useNavigation } from "react-router";
diff --git a/apps/space/core/lib/instance-provider.tsx b/apps/space/core/lib/instance-provider.tsx
index fa56fccc67..89ee49dfcf 100644
--- a/apps/space/core/lib/instance-provider.tsx
+++ b/apps/space/core/lib/instance-provider.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useTheme } from "next-themes";
@@ -17,7 +15,7 @@ import { InstanceFailureView } from "@/components/instance/instance-failure-view
 import { useInstance } from "@/hooks/store/use-instance";
 import { useUser } from "@/hooks/store/use-user";
 
-export const InstanceProvider = observer(({ children }: { children: React.ReactNode }) => {
+export const InstanceProvider = observer(function InstanceProvider({ children }: { children: React.ReactNode }) {
   const { fetchInstanceInfo, instance, error } = useInstance();
   const { fetchCurrentUser } = useUser();
   const { resolvedTheme } = useTheme();
@@ -49,7 +47,7 @@ export const InstanceProvider = observer(({ children }: { children: React.ReactN
           <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={`${SPACE_BASE_PATH}/`}>
-                <PlaneLockup className="h-7 w-auto text-custom-text-100" />
+                <PlaneLockup className="h-7 w-auto text-primary" />
               </Link>
             </div>
           </div>
diff --git a/apps/space/core/lib/store-provider.tsx b/apps/space/core/lib/store-provider.tsx
index cefb45c71e..e251909df1 100644
--- a/apps/space/core/lib/store-provider.tsx
+++ b/apps/space/core/lib/store-provider.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { createContext } from "react";
 // plane web store
 import { RootStore } from "@/plane-web/store/root.store";
@@ -23,7 +21,7 @@ export type StoreProviderProps = {
   initialState?: any;
 };
 
-export const StoreProvider = ({ children, initialState = undefined }: StoreProviderProps) => {
+export function StoreProvider({ children, initialState = undefined }: StoreProviderProps) {
   const store = initializeStore();
   // If your page has Next.js data fetching methods that use a Mobx store, it will
   // get hydrated here, check `pages/ssg.js` and `pages/ssr.js` for more details
@@ -32,4 +30,4 @@ export const StoreProvider = ({ children, initialState = undefined }: StoreProvi
   }
 
   return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
-};
+}
diff --git a/apps/space/core/lib/toast-provider.tsx b/apps/space/core/lib/toast-provider.tsx
index 22c2d7ecc2..fc30bf1fa5 100644
--- a/apps/space/core/lib/toast-provider.tsx
+++ b/apps/space/core/lib/toast-provider.tsx
@@ -1,11 +1,9 @@
-"use client";
-
 import { useTheme } from "next-themes";
 // plane imports
 import { Toast } from "@plane/propel/toast";
 import { resolveGeneralTheme } from "@plane/utils";
 
-export const ToastProvider = ({ children }: { children: React.ReactNode }) => {
+export function ToastProvider({ children }: { children: React.ReactNode }) {
   // themes
   const { resolvedTheme } = useTheme();
 
@@ -15,4 +13,4 @@ export const ToastProvider = ({ children }: { children: React.ReactNode }) => {
       {children}
     </>
   );
-};
+}
diff --git a/apps/space/core/store/helpers/base-issues.store.ts b/apps/space/core/store/helpers/base-issues.store.ts
index 01d4d706ba..5c0ac63445 100644
--- a/apps/space/core/store/helpers/base-issues.store.ts
+++ b/apps/space/core/store/helpers/base-issues.store.ts
@@ -103,15 +103,15 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
 
     const allIssues = groupedIssueIds[ALL_ISSUES] ?? [];
     if (allIssues && Array.isArray(allIssues)) {
-      return allIssues as string[];
+      return allIssues;
     }
 
     if (groupId && groupedIssueIds?.[groupId] && Array.isArray(groupedIssueIds[groupId])) {
-      return (groupedIssueIds[groupId] ?? []) as string[];
+      return groupedIssueIds[groupId] ?? [];
     }
 
     if (groupId && subGroupId) {
-      return ((groupedIssueIds as TSubGroupedIssues)[groupId]?.[subGroupId] ?? []) as string[];
+      return (groupedIssueIds as TSubGroupedIssues)[groupId]?.[subGroupId] ?? [];
     }
 
     return undefined;
@@ -443,7 +443,7 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
     // if groupedIssueIds is an array, update the `groupedIssueIds` store at the issuePath
     if (groupedIssueIds && Array.isArray(groupedIssueIds)) {
       update(this, ["groupedIssueIds", ...issuePath], (issueIds: string[] = []) =>
-        uniq(concat(issueIds, groupedIssueIds as string[]))
+        uniq(concat(issueIds, groupedIssueIds))
       );
       // return true to indicate the store has been updated
       return true;
diff --git a/apps/space/core/store/profile.store.ts b/apps/space/core/store/profile.store.ts
index 009b46ca49..84455bc08d 100644
--- a/apps/space/core/store/profile.store.ts
+++ b/apps/space/core/store/profile.store.ts
@@ -32,13 +32,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,
diff --git a/apps/space/core/types/issue.d.ts b/apps/space/core/types/issue.d.ts
index 66542317ec..299aada242 100644
--- a/apps/space/core/types/issue.d.ts
+++ b/apps/space/core/types/issue.d.ts
@@ -33,31 +33,30 @@ export type TIssueQueryFilters = Partial<TFilters>;
 
 export type TIssueQueryFiltersParams = Partial<Record<keyof TFilters, string>>;
 
-export interface IIssue
-  extends Pick<
-    TIssue,
-    | "description_html"
-    | "created_at"
-    | "updated_at"
-    | "created_by"
-    | "id"
-    | "name"
-    | "priority"
-    | "state_id"
-    | "project_id"
-    | "sequence_id"
-    | "sort_order"
-    | "start_date"
-    | "target_date"
-    | "cycle_id"
-    | "module_ids"
-    | "label_ids"
-    | "assignee_ids"
-    | "attachment_count"
-    | "sub_issues_count"
-    | "link_count"
-    | "estimate_point"
-  > {
+export interface IIssue extends Pick<
+  TIssue,
+  | "description_html"
+  | "created_at"
+  | "updated_at"
+  | "created_by"
+  | "id"
+  | "name"
+  | "priority"
+  | "state_id"
+  | "project_id"
+  | "sequence_id"
+  | "sort_order"
+  | "start_date"
+  | "target_date"
+  | "cycle_id"
+  | "module_ids"
+  | "label_ids"
+  | "assignee_ids"
+  | "attachment_count"
+  | "sub_issues_count"
+  | "link_count"
+  | "estimate_point"
+> {
   comments: TIssuePublicComment[];
   reaction_items: IIssueReaction[];
   vote_items: IVote[];
diff --git a/apps/space/ee/components/editor/index.ts b/apps/space/ee/components/editor/index.ts
deleted file mode 100644
index f8506c1d6d..0000000000
--- a/apps/space/ee/components/editor/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "ce/components/editor";
diff --git a/apps/space/helpers/authentication.helper.tsx b/apps/space/helpers/authentication.helper.tsx
index d2472665de..9981f7c37d 100644
--- a/apps/space/helpers/authentication.helper.tsx
+++ b/apps/space/helpers/authentication.helper.tsx
@@ -86,7 +86,7 @@ export type TAuthErrorInfo = {
 };
 
 const errorCodeMessages: {
-  [key in EAuthenticationErrorCodes]: { title: string; message: (email?: string | undefined) => React.ReactNode };
+  [key in EAuthenticationErrorCodes]: { title: string; message: (email?: string) => React.ReactNode };
 } = {
   // global
   [EAuthenticationErrorCodes.INSTANCE_NOT_CONFIGURED]: {
@@ -156,7 +156,7 @@ const errorCodeMessages: {
   // sign in
   [EAuthenticationErrorCodes.USER_ACCOUNT_DEACTIVATED]: {
     title: `User account deactivated`,
-    message: () => `User account deactivated. Please contact ${!!SUPPORT_EMAIL ? SUPPORT_EMAIL : "administrator"}.`,
+    message: () => `User account deactivated. Please contact ${SUPPORT_EMAIL ? SUPPORT_EMAIL : "administrator"}.`,
   },
 
   [EAuthenticationErrorCodes.USER_DOES_NOT_EXIST]: {
@@ -332,10 +332,7 @@ const errorCodeMessages: {
   },
 };
 
-export const authErrorHandler = (
-  errorCode: EAuthenticationErrorCodes,
-  email?: string | undefined
-): TAuthErrorInfo | undefined => {
+export const authErrorHandler = (errorCode: EAuthenticationErrorCodes, email?: string): TAuthErrorInfo | undefined => {
   const bannerAlertErrorCodes = [
     EAuthenticationErrorCodes.INSTANCE_NOT_CONFIGURED,
     EAuthenticationErrorCodes.INVALID_EMAIL,
diff --git a/apps/space/helpers/editor.helper.ts b/apps/space/helpers/editor.helper.ts
index 43b265af55..f8fbd1158f 100644
--- a/apps/space/helpers/editor.helper.ts
+++ b/apps/space/helpers/editor.helper.ts
@@ -58,6 +58,10 @@ export const getEditorFileHandlers = (args: TArgs): TFileHandler => {
         await sitesFileService.restoreNewAsset(anchor, src);
       }
     },
+    duplicate: async (assetId: string) =>
+      // Duplication is not supported for sites/space app
+      // Return the same assetId as a fallback
+      assetId,
     validation: {
       maxFileSize: MAX_FILE_SIZE,
     },
diff --git a/apps/space/helpers/emoji.helper.tsx b/apps/space/helpers/emoji.helper.tsx
index 1619d6c0d1..8190a6552f 100644
--- a/apps/space/helpers/emoji.helper.tsx
+++ b/apps/space/helpers/emoji.helper.tsx
@@ -10,7 +10,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/package.json b/apps/space/package.json
index 5c92c49074..f1fef4b763 100644
--- a/apps/space/package.json
+++ b/apps/space/package.json
@@ -1,6 +1,6 @@
 {
   "name": "space",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",
@@ -10,16 +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 28",
+    "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=932",
     "check:types": "react-router typegen && tsc --noEmit",
-    "check:format": "prettier --check \"**/*.{ts,tsx,md,json,css,scss}\"",
-    "fix:lint": "eslint . --fix",
-    "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\""
+    "check:format": "prettier . --cache --check",
+    "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=932",
+    "fix:format": "prettier . --cache --write"
   },
   "dependencies": {
     "@bprogress/core": "catalog:",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
+    "@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,8 +31,8 @@
     "@plane/ui": "workspace:*",
     "@plane/utils": "workspace:*",
     "@popperjs/core": "^2.11.8",
-    "@react-router/node": "^7.9.3",
-    "@react-router/serve": "^7.9.5",
+    "@react-router/node": "catalog:",
+    "@react-router/serve": "catalog:",
     "@sentry/react-router": "catalog:",
     "axios": "catalog:",
     "clsx": "^2.0.0",
@@ -42,27 +43,27 @@
     "mobx": "catalog:",
     "mobx-react": "catalog:",
     "mobx-utils": "catalog:",
-    "next-themes": "^0.2.1",
+    "next-themes": "0.4.6",
     "react": "catalog:",
     "react-dom": "catalog:",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "7.51.5",
     "react-popper": "^2.3.0",
-    "react-router": "^7.9.1",
-    "react-router-dom": "^7.9.1",
+    "react-router": "catalog:",
+    "react-router-dom": "catalog:",
     "swr": "catalog:",
     "uuid": "catalog:"
   },
   "devDependencies": {
-    "@plane/eslint-config": "workspace:*",
+    "@dotenvx/dotenvx": "catalog:",
     "@plane/tailwind-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
-    "@react-router/dev": "^7.9.1",
+    "@react-router/dev": "catalog:",
+    "@tailwindcss/typography": "0.5.19",
     "@types/lodash-es": "catalog:",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
-    "dotenv": "^16.4.5",
     "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 9b1e55fc44..0000000000
--- a/apps/space/postcss.config.cjs
+++ /dev/null
@@ -1,2 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-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 0000000000..3ad28f15f3
--- /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/styles/globals.css b/apps/space/styles/globals.css
index 46fca34027..ba7f052d19 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 2232bb29ae..0000000000
--- a/apps/space/tailwind.config.cjs
+++ /dev/null
@@ -1,2 +0,0 @@
-/* eslint-disable @typescript-eslint/no-require-imports */
-module.exports = require("@plane/tailwind-config/tailwind.config.js");
diff --git a/apps/space/tsconfig.json b/apps/space/tsconfig.json
index fc26e2e4ab..224a2b2d2f 100644
--- a/apps/space/tsconfig.json
+++ b/apps/space/tsconfig.json
@@ -1,17 +1,22 @@
 {
   "extends": "@plane/typescript-config/react-router.json",
   "compilerOptions": {
-    "baseUrl": ".",
     "rootDirs": [".", "./.react-router/types"],
-    "types": ["node", "vite/client"],
+    "types": ["vite/client"],
     "paths": {
-      "@/app/*": ["app/*"],
-      "@/*": ["core/*"],
-      "@/helpers/*": ["helpers/*"],
-      "@/styles/*": ["styles/*"],
-      "@/plane-web/*": ["ce/*"]
+      "@/app/*": ["./app/*"],
+      "@/*": ["./core/*"],
+      "@/helpers/*": ["./helpers/*"],
+      "@/styles/*": ["./styles/*"],
+      "@/plane-web/*": ["./ce/*"],
+      "ce/*": ["./ce/*"]
     },
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "noImplicitOverride": false,
+    "noUnusedLocals": false,
+    "noImplicitReturns": false,
+    "exactOptionalPropertyTypes": false,
+    "noUnusedParameters": false
   },
   "include": ["**/*", "**/.server/**/*", "**/.client/**/*", ".react-router/types/**/*", "additional.d.ts"],
   "exclude": ["node_modules"]
diff --git a/apps/space/vite.config.ts b/apps/space/vite.config.ts
index 5374a4eee2..58e0facb01 100644
--- a/apps/space/vite.config.ts
+++ b/apps/space/vite.config.ts
@@ -1,6 +1,6 @@
 import path from "node:path";
+import * as dotenv from "@dotenvx/dotenvx";
 import { reactRouter } from "@react-router/dev/vite";
-import dotenv from "dotenv";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 import { joinUrlPath } from "@plane/utils";
diff --git a/apps/web/.eslintignore b/apps/web/.eslintignore
deleted file mode 100644
index 321e1ec56f..0000000000
--- a/apps/web/.eslintignore
+++ /dev/null
@@ -1,15 +0,0 @@
-.next/*
-.react-router/*
-.vite/*
-build/*
-out/*
-public/*
-dist/*
-node_modules/*
-.turbo/*
-.env*
-.env
-.env.local
-.env.development
-.env.production
-.env.test
\ No newline at end of file
diff --git a/apps/web/.eslintrc.cjs b/apps/web/.eslintrc.cjs
deleted file mode 100644
index 5a75536f79..0000000000
--- a/apps/web/.eslintrc.cjs
+++ /dev/null
@@ -1,18 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["@plane/eslint-config/next.js"],
-  ignorePatterns: ["build/**", "dist/**", ".vite/**"],
-  rules: {
-    "import/no-duplicates": ["error", { "prefer-inline": false }],
-    "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
-    "@typescript-eslint/no-import-type-side-effects": "error",
-    "@typescript-eslint/consistent-type-imports": [
-      "error",
-      {
-        prefer: "type-imports",
-        fixStyle: "separate-type-imports",
-        disallowTypeAnnotations: false,
-      },
-    ],
-  },
-};
diff --git a/apps/web/.prettierignore b/apps/web/.prettierignore
index 9705027a77..b0b8bc622a 100644
--- a/apps/web/.prettierignore
+++ b/apps/web/.prettierignore
@@ -1,9 +1,10 @@
-.next
-.react-router
-.vite
-.turbo
-out/
-dist/
+.next/
+.react-router/
+.turbo/
+.vite/
 build/
-node_modules
+dist/
+node_modules/
+out/
 pnpm-lock.yaml
+storybook-static/
diff --git a/apps/web/.prettierrc b/apps/web/.prettierrc
deleted file mode 100644
index 87d988f1b2..0000000000
--- a/apps/web/.prettierrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "printWidth": 120,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}
diff --git a/apps/web/Dockerfile.web b/apps/web/Dockerfile.web
index b08881cf4d..104a9e2f7f 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.5.6
+ARG TURBO_VERSION=2.6.3
 RUN corepack enable pnpm && pnpm add -g turbo@${TURBO_VERSION}
 COPY . .
 
@@ -34,11 +34,13 @@ COPY .gitignore .gitignore
 COPY --from=builder /app/out/json/ .
 COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
 RUN corepack enable pnpm
-RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm fetch --store-dir=/pnpm/store
 
-# Build the project
+# Copy full directory structure before fetch to ensure all package.json files are available
 COPY --from=builder /app/out/full/ .
 COPY turbo.json turbo.json
+
+# Fetch dependencies to cache store, then install offline with dev deps
+RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store pnpm fetch --store-dir=/pnpm/store
 RUN --mount=type=cache,id=pnpm-store,target=/pnpm/store CI=true pnpm install --offline --frozen-lockfile --store-dir=/pnpm/store
 
 ARG VITE_API_BASE_URL=""
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx
index d81d2c1487..b87edfb297 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/_sidebar.tsx
@@ -1,20 +1,19 @@
-"use client";
 import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
+import { useParams, usePathname } from "next/navigation";
 import { SIDEBAR_WIDTH } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
 // components
 import { ResizableSidebar } from "@/components/sidebar/resizable-sidebar";
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
-import { useAppRail } from "@/hooks/use-app-rail";
 // local imports
 import { ExtendedAppSidebar } from "./extended-sidebar";
 import { AppSidebar } from "./sidebar";
 
-export const ProjectAppSidebar: FC = observer(() => {
+export const ProjectAppSidebar = observer(function ProjectAppSidebar() {
   // store hooks
   const {
     sidebarCollapsed,
@@ -27,14 +26,19 @@ export const ProjectAppSidebar: FC = observer(() => {
   const { storedValue, setValue } = useLocalStorage("sidebarWidth", SIDEBAR_WIDTH);
   // states
   const [sidebarWidth, setSidebarWidth] = useState<number>(storedValue ?? SIDEBAR_WIDTH);
-  // hooks
-  const { shouldRenderAppRail } = useAppRail();
+  // routes
+  const { workspaceSlug } = useParams();
+  const pathname = usePathname();
   // derived values
   const isAnyExtendedSidebarOpen = isExtendedSidebarOpened;
 
+  const isNotificationsPath = pathname.includes(`/${workspaceSlug}/notifications`);
+
   // handlers
   const handleWidthChange = (width: number) => setValue(width);
 
+  if (isNotificationsPath) return null;
+
   return (
     <>
       <ResizableSidebar
@@ -56,7 +60,6 @@ export const ProjectAppSidebar: FC = observer(() => {
         }
         isAnyExtendedSidebarExpanded={isAnyExtendedSidebarOpen}
         isAnySidebarDropdownOpen={isAnySidebarDropdownOpen}
-        disablePeekTrigger={shouldRenderAppRail}
       >
         <AppSidebar />
       </ResizableSidebar>
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 8408a97066..6eed5ff95c 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/header.tsx
@@ -1,4 +1,3 @@
-"use client";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 // ui
@@ -9,7 +8,7 @@ import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 // plane web components
 import { UpgradeBadge } from "@/plane-web/components/workspace/upgrade-badge";
 
-export const WorkspaceActiveCycleHeader = observer(() => {
+export const WorkspaceActiveCycleHeader = observer(function WorkspaceActiveCycleHeader() {
   const { t } = useTranslation();
   return (
     <Header>
@@ -19,7 +18,7 @@ export const WorkspaceActiveCycleHeader = observer(() => {
             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 text-tertiary rotate-180" />}
               />
             }
           />
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 e1db9309f9..9d4e32d26c 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/layout.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 // 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 eb5d4bdcc6..f0c470cfbb 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/active-cycles/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 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 8171d55a84..85798e17e1 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/header.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import { AnalyticsIcon } from "@plane/propel/icons";
@@ -8,7 +6,7 @@ import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 
-export const WorkspaceAnalyticsHeader = observer(() => {
+export const WorkspaceAnalyticsHeader = observer(function WorkspaceAnalyticsHeader() {
   const { t } = useTranslation();
   return (
     <Header>
@@ -18,7 +16,7 @@ export const WorkspaceAnalyticsHeader = observer(() => {
             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 497e403667..4521939e69 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/layout.tsx
@@ -1,4 +1,3 @@
-"use client";
 // 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 a805da7839..f3a5fe3e80 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx
@@ -1,15 +1,13 @@
-"use client";
-
-import { useMemo } from "react";
+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 { useTranslation } from "@plane/i18n";
 import { EmptyStateDetailed } from "@plane/propel/empty-state";
-import { Tabs } from "@plane/ui";
-import type { TabItem } from "@plane/ui";
+import { Tabs } from "@plane/propel/tabs";
 // components
+import { cn } from "@plane/utils";
 import AnalyticsFilterActions from "@/components/analytics/analytics-filter-actions";
 import { PageHead } from "@/components/core/page-title";
 // hooks
@@ -18,7 +16,7 @@ import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useProject } from "@/hooks/store/use-project";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUserPermissions } from "@/hooks/store/user";
-import { getAnalyticsTabs } from "@/plane-web/components/analytics/tabs";
+import { useAnalyticsTabs } from "@/plane-web/components/analytics/use-analytics-tabs";
 import type { Route } from "./+types/page";
 
 function AnalyticsPage({ params }: Route.ComponentProps) {
@@ -36,31 +34,32 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
   const { currentWorkspace } = useWorkspace();
   const { allowPermissions } = useUserPermissions();
 
+  const pageTitle = currentWorkspace?.name
+    ? t(`workspace_analytics.page_label`, { workspace: currentWorkspace?.name })
+    : undefined;
+
   // permissions
   const canPerformEmptyStateActions = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
     EUserPermissionsLevel.WORKSPACE
   );
 
-  // derived values
-  const pageTitle = currentWorkspace?.name
-    ? t(`workspace_analytics.page_label`, { workspace: currentWorkspace?.name })
-    : undefined;
-  const ANALYTICS_TABS = useMemo(() => getAnalyticsTabs(t), [t]);
-  const tabs: TabItem[] = useMemo(
-    () =>
-      ANALYTICS_TABS.map((tab) => ({
-        key: tab.key,
-        label: tab.label,
-        content: <tab.content />,
-        onClick: () => {
-          router.push(`/${currentWorkspace?.slug}/analytics/${tab.key}`);
-        },
-        disabled: tab.isDisabled,
-      })),
-    [ANALYTICS_TABS, router, currentWorkspace?.slug]
-  );
-  const defaultTab = tabId;
+  const workspaceSlug = params.workspaceSlug;
+  const ANALYTICS_TABS = useAnalyticsTabs(workspaceSlug.toString());
+
+  const [selectedTab, setSelectedTab] = useState(tabId || ANALYTICS_TABS[0]?.key);
+
+  useEffect(() => {
+    if (tabId) {
+      setSelectedTab(tabId);
+    }
+  }, [tabId]);
+
+  // Handle tab change
+  const handleTabChange = (value: string) => {
+    setSelectedTab(value);
+    router.push(`/${currentWorkspace?.slug}/analytics/${value}`);
+  };
 
   return (
     <>
@@ -68,19 +67,48 @@ function AnalyticsPage({ params }: Route.ComponentProps) {
       {workspaceProjectIds && (
         <>
           {workspaceProjectIds.length > 0 || loader === "init-loader" ? (
-            <div className="flex h-full overflow-hidden bg-custom-background-100 justify-between items-center  ">
-              <Tabs
-                tabs={tabs}
-                storageKey={`analytics-page-${currentWorkspace?.id}`}
-                defaultTab={defaultTab}
-                size="md"
-                tabListContainerClassName="px-6 py-2 border-b border-custom-border-200 flex items-center justify-between"
-                tabListClassName="my-2 w-auto"
-                tabClassName="px-3"
-                tabPanelClassName="h-full overflow-hidden overflow-y-auto px-2"
-                storeInLocalStorage={false}
-                actions={<AnalyticsFilterActions />}
-              />
+            <div className="flex h-full overflow-hidden ">
+              <Tabs value={selectedTab} onValueChange={handleTabChange} className="w-full h-full">
+                <div className={"flex flex-col w-full h-full"}>
+                  <div
+                    className={cn(
+                      "px-6 py-2 border-b border-subtle flex items-center gap-4 overflow-hidden w-full justify-between bg-surface-1"
+                    )}
+                  >
+                    <Tabs.List className={"overflow-x-auto flex w-fit h-7"}>
+                      {ANALYTICS_TABS.map((tab) => (
+                        <Tabs.Trigger
+                          key={tab.key}
+                          value={tab.key}
+                          disabled={tab.isDisabled}
+                          size="md"
+                          className="px-3 h-6"
+                          onClick={() => {
+                            if (!tab.isDisabled) {
+                              handleTabChange(tab.key);
+                            }
+                          }}
+                        >
+                          {tab.label}
+                        </Tabs.Trigger>
+                      ))}
+                    </Tabs.List>
+
+                    <div className="flex-shrink-0">
+                      <AnalyticsFilterActions />
+                    </div>
+                  </div>
+                  {ANALYTICS_TABS.map((tab) => (
+                    <Tabs.Content
+                      key={tab.key}
+                      value={tab.key}
+                      className={"h-full overflow-hidden overflow-y-auto px-2"}
+                    >
+                      <tab.content />
+                    </Tabs.Content>
+                  ))}
+                </div>
+              </Tabs>
             </div>
           ) : (
             <EmptyStateDetailed
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 7b854c58d2..cf5176a2be 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/header.tsx
@@ -1,63 +1,59 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { EProjectFeatureKey } from "@plane/constants";
-import { Breadcrumbs, Header } from "@plane/ui";
+import { Header, Row } from "@plane/ui";
+import { cn } from "@plane/utils";
 // components
-import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
-import { IssueDetailQuickActions } from "@/components/issues/issue-detail/issue-detail-quick-actions";
+import { AppHeader } from "@/components/core/app-header";
+import { TabNavigationRoot } from "@/components/navigation";
+import { AppSidebarToggleButton } from "@/components/sidebar/sidebar-toggle-button";
 // 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";
-import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
+import { useProjectNavigationPreferences } from "@/hooks/use-navigation-preferences";
+// local components
+import { WorkItemDetailsHeader } from "./work-item-header";
 
-export const ProjectIssueDetailsHeader = observer(() => {
+export const ProjectWorkItemDetailsHeader = observer(function ProjectWorkItemDetailsHeader() {
   // router
-  const router = useAppRouter();
   const { workspaceSlug, workItem } = useParams();
   // store hooks
-  const { getProjectById, loader } = useProject();
+  const { sidebarCollapsed } = useAppTheme();
   const {
     issue: { getIssueById, getIssueIdByIdentifier },
   } = useIssueDetail();
   // derived values
   const issueId = getIssueIdByIdentifier(workItem?.toString());
-  const issueDetails = issueId ? getIssueById(issueId.toString()) : undefined;
-  const projectId = issueDetails ? issueDetails?.project_id : undefined;
-  const projectDetails = projectId ? getProjectById(projectId?.toString()) : undefined;
-
-  if (!workspaceSlug || !projectId || !issueId) return null;
+  const issueDetails = issueId ? getIssueById(issueId?.toString()) : undefined;
+  // preferences
+  const { preferences: projectPreferences } = useProjectNavigationPreferences();
 
   return (
-    <Header>
-      <Header.LeftItem>
-        <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
-          <CommonProjectBreadcrumbs
-            workspaceSlug={workspaceSlug?.toString()}
-            projectId={projectId?.toString()}
-            featureKey={EProjectFeatureKey.WORK_ITEMS}
-          />
-          <Breadcrumbs.Item
-            component={
-              <BreadcrumbLink
-                label={projectDetails && issueDetails ? `${projectDetails.identifier}-${issueDetails.sequence_id}` : ""}
-              />
-            }
-          />
-        </Breadcrumbs>
-      </Header.LeftItem>
-      <Header.RightItem>
-        {projectId && issueId && (
-          <IssueDetailQuickActions
-            workspaceSlug={workspaceSlug?.toString()}
-            projectId={projectId?.toString()}
-            issueId={issueId?.toString()}
-          />
-        )}
-      </Header.RightItem>
-    </Header>
+    <>
+      {projectPreferences.navigationMode === "horizontal" && (
+        <div className="z-20">
+          <Row className="h-header flex gap-2 w-full items-center border-b border-subtle bg-surface-1">
+            <div className="flex items-center gap-2 divide-x divide-subtle h-full w-full">
+              <div className="flex items-center gap-2 size-full flex-1">
+                {sidebarCollapsed && (
+                  <div className="shrink-0">
+                    <AppSidebarToggleButton />
+                  </div>
+                )}
+                <Header className={cn("h-full", { "pl-1.5": !sidebarCollapsed })}>
+                  <Header.LeftItem className="h-full max-w-full">
+                    <TabNavigationRoot
+                      workspaceSlug={workspaceSlug}
+                      projectId={issueDetails?.project_id?.toString() ?? ""}
+                    />
+                  </Header.LeftItem>
+                </Header>
+              </div>
+            </div>
+          </Row>
+        </div>
+      )}
+      <AppHeader header={<WorkItemDetailsHeader />} />
+    </>
   );
 });
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 c9d8faf048..48dd7cec74 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/layout.tsx
@@ -1,15 +1,12 @@
-"use client";
-
 // components
 import { Outlet } from "react-router";
-import { AppHeader } from "@/components/core/app-header";
 import { ContentWrapper } from "@/components/core/content-wrapper";
-import { ProjectIssueDetailsHeader } from "./header";
+import { ProjectWorkItemDetailsHeader } from "./header";
 
 export default function ProjectIssueDetailsLayout() {
   return (
     <>
-      <AppHeader header={<ProjectIssueDetailsHeader />} />
+      <ProjectWorkItemDetailsHeader />
       <ContentWrapper className="overflow-hidden">
         <Outlet />
       </ContentWrapper>
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 9462653f00..d9f7d82b0b 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/page.tsx
@@ -1,11 +1,10 @@
-"use client";
-
 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
@@ -14,7 +13,6 @@ 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";
@@ -23,9 +21,11 @@ import { useAppRouter } from "@/hooks/use-app-router";
 // 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;
@@ -37,18 +37,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;
@@ -79,51 +82,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 ? (
-        <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
new file mode 100644
index 0000000000..e4aa6e1fba
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/browse/[workItem]/work-item-header.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// plane ui
+import { WorkItemsIcon } from "@plane/propel/icons";
+import { Breadcrumbs, Header } from "@plane/ui";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
+import { IssueDetailQuickActions } from "@/components/issues/issue-detail/issue-detail-quick-actions";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useProject } from "@/hooks/store/use-project";
+import { useAppRouter } from "@/hooks/use-app-router";
+// plane web imports
+import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
+
+export const WorkItemDetailsHeader = observer(function WorkItemDetailsHeader() {
+  // router
+  const router = useAppRouter();
+  const { workspaceSlug, workItem } = useParams();
+  // store hooks
+  const { getProjectById, loader } = useProject();
+  const {
+    issue: { getIssueById, getIssueIdByIdentifier },
+  } = useIssueDetail();
+  // derived values
+  const issueId = getIssueIdByIdentifier(workItem?.toString());
+  const issueDetails = issueId ? getIssueById(issueId.toString()) : undefined;
+  const projectId = issueDetails ? issueDetails?.project_id : undefined;
+  const projectDetails = projectId ? getProjectById(projectId?.toString()) : undefined;
+
+  if (!workspaceSlug || !projectId || !issueId) return null;
+  return (
+    <Header>
+      <Header.LeftItem>
+        <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
+          <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
+          <Breadcrumbs.Item
+            component={
+              <BreadcrumbLink
+                label="Work Items"
+                href={`/${workspaceSlug}/projects/${projectId}/issues/`}
+                icon={<WorkItemsIcon className="h-4 w-4 text-tertiary" />}
+              />
+            }
+          />
+          <Breadcrumbs.Item
+            component={
+              <BreadcrumbLink
+                label={projectDetails && issueDetails ? `${projectDetails.identifier}-${issueDetails.sequence_id}` : ""}
+              />
+            }
+          />
+        </Breadcrumbs>
+      </Header.LeftItem>
+      <Header.RightItem>
+        {projectId && issueId && (
+          <IssueDetailQuickActions
+            workspaceSlug={workspaceSlug?.toString()}
+            projectId={projectId?.toString()}
+            issueId={issueId?.toString()}
+          />
+        )}
+      </Header.RightItem>
+    </Header>
+  );
+});
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx
index 9e84728229..c34457db1d 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/header.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
@@ -19,7 +17,7 @@ import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";
 import { useWorkspaceDraftIssues } from "@/hooks/store/workspace-draft";
 
-export const WorkspaceDraftHeader = observer(() => {
+export const WorkspaceDraftHeader = observer(function WorkspaceDraftHeader() {
   // state
   const [isDraftIssueModalOpen, setIsDraftIssueModalOpen] = useState(false);
   // store hooks
@@ -48,7 +46,7 @@ export const WorkspaceDraftHeader = observer(() => {
             <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>
@@ -64,7 +62,7 @@ export const WorkspaceDraftHeader = observer(() => {
           {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 e2b6a06e6e..539d35e77f 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/layout.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 // 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 b36a31c78f..7c3814c6dc 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/drafts/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 // 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 b193dbe24e..52edb02bfd 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-project-sidebar.tsx
@@ -1,12 +1,11 @@
-"use client";
-
-import React, { useRef, useState } from "react";
+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 { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import { copyUrlToClipboard, orderJoinedProjects } from "@plane/utils";
@@ -20,7 +19,7 @@ import { useUserPermissions } from "@/hooks/store/user";
 import type { TProject } from "@/plane-web/types";
 import { ExtendedSidebarWrapper } from "./extended-sidebar-wrapper";
 
-export const ExtendedProjectSidebar = observer(() => {
+export const ExtendedProjectSidebar = observer(function ExtendedProjectSidebar() {
   // refs
   const extendedProjectSidebarRef = useRef<HTMLDivElement | null>(null);
   const [searchQuery, setSearchQuery] = useState<string>("");
@@ -77,7 +76,7 @@ export const ExtendedProjectSidebar = observer(() => {
     EUserPermissionsLevel.WORKSPACE
   );
 
-  const handleClose = () => toggleExtendedProjectSidebar(false);
+  const handleClose = useCallback(() => toggleExtendedProjectSidebar(false), [toggleExtendedProjectSidebar]);
 
   const handleCopyText = (projectId: string) => {
     copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/issues`).then(() => {
@@ -103,16 +102,17 @@ export const ExtendedProjectSidebar = observer(() => {
         extendedSidebarRef={extendedProjectSidebarRef}
         handleClose={handleClose}
         excludedElementId="extended-project-sidebar-toggle"
+        className="px-0"
       >
-        <div className="flex flex-col gap-1 w-full sticky top-4 pt-0 px-4">
+        <div className="flex flex-col gap-1 w-full sticky top-4 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="text-13 font-semibold text-tertiary py-1.5">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"
+                  className="p-0.5 rounded-sm hover:bg-layer-1 flex-shrink-0 text-tertiary hover:text-secondary transition-colors"
                   onClick={() => {
                     setIsProjectModalOpen(true);
                   }}
@@ -122,10 +122,10 @@ export const ExtendedProjectSidebar = observer(() => {
               </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 items-center gap-1.5 rounded-md border border-subtle bg-surface-1 px-2.5 py-1 w-full">
+            <Search 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
@@ -133,21 +133,33 @@ export const ExtendedProjectSidebar = observer(() => {
             />
           </div>
         </div>
-        <div className="flex flex-col gap-0.5 overflow-x-hidden overflow-y-auto vertical-scrollbar scrollbar-sm flex-grow mt-4 px-4">
-          {filteredProjects.map((projectId, index) => (
-            <SidebarProjectsListItem
-              key={projectId}
-              projectId={projectId}
-              handleCopyText={() => handleCopyText(projectId)}
-              projectListType={"JOINED"}
-              disableDrag={false}
-              disableDrop={false}
-              isLastChild={index === joinedProjects.length - 1}
-              handleOnProjectDrop={handleOnProjectDrop}
-              renderInExtendedSidebar
+        {filteredProjects.length === 0 ? (
+          <div className="flex flex-col items-center mt-4 p-10">
+            <EmptyStateCompact
+              title={t("common_empty_state.search.title")}
+              description={t("common_empty_state.search.description")}
+              assetKey="search"
+              assetClassName="size-20"
+              align="center"
             />
-          ))}
-        </div>
+          </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">
+            {filteredProjects.map((projectId, index) => (
+              <SidebarProjectsListItem
+                key={projectId}
+                projectId={projectId}
+                handleCopyText={() => handleCopyText(projectId)}
+                projectListType={"JOINED"}
+                disableDrag={false}
+                disableDrop={false}
+                isLastChild={index === filteredProjects.length - 1}
+                handleOnProjectDrop={handleOnProjectDrop}
+                renderInExtendedSidebar
+              />
+            ))}
+          </div>
+        )}
       </ExtendedSidebarWrapper>
     </>
   );
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 878f9ee3f0..d3ae5de8ae 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar-wrapper.tsx
@@ -1,16 +1,16 @@
-"use client";
-
-import type { FC } from "react";
-import React from "react";
+import React, { useEffect } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { EXTENDED_SIDEBAR_WIDTH, SIDEBAR_WIDTH } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
 import { cn } from "@plane/utils";
 // hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+// hooks
 import useExtendedSidebarOutsideClickDetector from "@/hooks/use-extended-sidebar-overview-outside-click";
 
 type Props = {
+  className?: string;
   children: React.ReactNode;
   extendedSidebarRef: React.RefObject<HTMLDivElement>;
   isExtendedSidebarOpened: boolean;
@@ -18,27 +18,36 @@ type Props = {
   excludedElementId: string;
 };
 
-export const ExtendedSidebarWrapper: FC<Props> = observer((props) => {
-  const { children, extendedSidebarRef, isExtendedSidebarOpened, handleClose, excludedElementId } = props;
+export const ExtendedSidebarWrapper = observer(function ExtendedSidebarWrapper(props: Props) {
+  const { className, children, extendedSidebarRef, isExtendedSidebarOpened, handleClose, excludedElementId } = props;
   // store hooks
+  const { sidebarCollapsed } = useAppTheme();
+  // local storage
   const { storedValue } = useLocalStorage("sidebarWidth", SIDEBAR_WIDTH);
 
   useExtendedSidebarOutsideClickDetector(extendedSidebarRef, handleClose, excludedElementId);
 
+  useEffect(() => {
+    if (sidebarCollapsed) {
+      handleClose();
+    }
+  }, [sidebarCollapsed, handleClose]);
+
   return (
     <div
       id={excludedElementId}
       ref={extendedSidebarRef}
       className={cn(
-        `absolute h-full z-[19] 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`,
+        "absolute h-full z-[21] flex flex-col py-2 transform transition-all duration-300 ease-in-out bg-surface-1 border-r border-subtle p-4 shadow-sm",
         {
-          "translate-x-0 opacity-100": isExtendedSidebarOpened,
-          [`-translate-x-[${EXTENDED_SIDEBAR_WIDTH}px] opacity-0 hidden`]: !isExtendedSidebarOpened,
-        }
+          "opacity-100": isExtendedSidebarOpened,
+          "opacity-0 hidden": !isExtendedSidebarOpened,
+        },
+        className
       )}
       style={{
         left: `${storedValue ?? SIDEBAR_WIDTH}px`,
-        width: `${isExtendedSidebarOpened ? EXTENDED_SIDEBAR_WIDTH : 0}px`,
+        width: `${EXTENDED_SIDEBAR_WIDTH}px`,
       }}
     >
       {children}
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx
index 108de05f03..4c51edcb13 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/extended-sidebar.tsx
@@ -1,41 +1,56 @@
-"use client";
-
-import React, { useMemo, useRef } from "react";
+import { useCallback, useMemo, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS } from "@plane/constants";
+import { WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS, EUserPermissionsLevel } from "@plane/constants";
 import type { EUserWorkspaceRoles } from "@plane/types";
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
-import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUserPermissions } from "@/hooks/store/user";
+import { useWorkspaceNavigationPreferences } from "@/hooks/use-navigation-preferences";
 // plane-web imports
 import { ExtendedSidebarItem } from "@/plane-web/components/workspace/sidebar/extended-sidebar-item";
 import { ExtendedSidebarWrapper } from "./extended-sidebar-wrapper";
 
-export const ExtendedAppSidebar = observer(() => {
+export const ExtendedAppSidebar = observer(function ExtendedAppSidebar() {
   // refs
   const extendedSidebarRef = useRef<HTMLDivElement | null>(null);
   // routers
   const { workspaceSlug } = useParams();
   // store hooks
   const { isExtendedSidebarOpened, toggleExtendedSidebar } = useAppTheme();
-  const { updateSidebarPreference, getNavigationPreferences } = useWorkspace();
+  const { allowPermissions } = useUserPermissions();
+  const { preferences: workspacePreferences, updateWorkspaceItemSortOrder } = useWorkspaceNavigationPreferences();
 
   // derived values
-  const currentWorkspaceNavigationPreferences = getNavigationPreferences(workspaceSlug.toString());
+  const currentWorkspaceNavigationPreferences = workspacePreferences.items;
 
-  const sortedNavigationItems = useMemo(
-    () =>
-      WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS.map((item) => {
+  const sortedNavigationItems = useMemo(() => {
+    const slug = workspaceSlug.toString();
+
+    return WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS.filter((item) => {
+      // Permission check
+      const hasPermission = allowPermissions(item.access, EUserPermissionsLevel.WORKSPACE, slug);
+
+      return hasPermission;
+    })
+      .map((item) => {
         const preference = currentWorkspaceNavigationPreferences?.[item.key];
         return {
           ...item,
-          sort_order: preference ? preference.sort_order : 0,
+          sort_order: preference?.sort_order ?? 0,
+          is_pinned: preference?.is_pinned ?? false,
         };
-      }).sort((a, b) => a.sort_order - b.sort_order),
-    [currentWorkspaceNavigationPreferences]
-  );
+      })
+      .sort((a, b) => {
+        // First sort by pinned status (pinned items first)
+        if (a.is_pinned !== b.is_pinned) {
+          return b.is_pinned ? 1 : -1;
+        }
+        // Then sort by sort_order within each group
+        return a.sort_order - b.sort_order;
+      });
+  }, [workspaceSlug, currentWorkspaceNavigationPreferences, allowPermissions]);
 
   const sortedNavigationItemsKeys = sortedNavigationItems.map((item) => item.key);
 
@@ -89,13 +104,10 @@ export const ExtendedAppSidebar = observer(() => {
 
     const updatedSortOrder = orderNavigationItem(sourceIndex, destinationIndex, sortedNavigationItems);
 
-    if (updatedSortOrder != undefined)
-      updateSidebarPreference(workspaceSlug.toString(), sourceId, {
-        sort_order: updatedSortOrder,
-      });
+    if (updatedSortOrder != undefined) updateWorkspaceItemSortOrder(sourceId, updatedSortOrder);
   };
 
-  const handleClose = () => toggleExtendedSidebar(false);
+  const handleClose = useCallback(() => toggleExtendedSidebar(false), [toggleExtendedSidebar]);
 
   return (
     <ExtendedSidebarWrapper
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
index 18629c1723..0eef838a34 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { Shapes } from "lucide-react";
 // plane imports
@@ -11,10 +9,8 @@ import { Breadcrumbs, Header } from "@plane/ui";
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 // hooks
 import { useHome } from "@/hooks/store/use-home";
-// local imports
-import { StarUsOnGitHubLink } from "./star-us-link";
 
-export const WorkspaceDashboardHeader = observer(() => {
+export const WorkspaceDashboardHeader = observer(function WorkspaceDashboardHeader() {
   // plane hooks
   const { t } = useTranslation();
   // hooks
@@ -28,10 +24,7 @@ export const WorkspaceDashboardHeader = observer(() => {
             <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>
@@ -39,15 +32,14 @@ export const WorkspaceDashboardHeader = observer(() => {
         </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>
-          <StarUsOnGitHubLink />
         </Header.RightItem>
       </Header>
     </>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx
index e4d8d7627d..f64640536b 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/layout.tsx
@@ -1,20 +1,20 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { Outlet } from "react-router";
 import { ProjectsAppPowerKProvider } from "@/components/power-k/projects-app-provider";
 // plane web components
 import { ProjectAppSidebar } from "./_sidebar";
+import { ExtendedProjectSidebar } from "./extended-project-sidebar";
 
 function WorkspaceLayout() {
   return (
     <>
       <ProjectsAppPowerKProvider />
-      <div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
+      <div className="relative flex flex-col h-full w-full overflow-hidden rounded-lg border border-subtle">
         <div id="full-screen-portal" className="inset-0 absolute w-full" />
         <div className="relative flex size-full overflow-hidden">
           <ProjectAppSidebar />
-          <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
+          <ExtendedProjectSidebar />
+          <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 d0083781d6..13aacc02b3 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/layout.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { Outlet } from "react-router";
 // components
 import { NotificationsSidebarRoot } from "@/components/workspace-notifications/sidebar";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/page.tsx
index 2932f94f0c..a9b293bdc2 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/notifications/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 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 d5ee26fa16..86baf2781a 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 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 fdfaa22e14..689a76173f 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,5 +1,3 @@
-"use client";
-
 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 f079a1e77a..6d1f212a14 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,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -53,14 +51,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">
           {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 cee770d807..5bfdc10c1c 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,3 @@
-"use client";
-
 // ui
 import type { FC } from "react";
 import { observer } from "mobx-react";
@@ -17,6 +15,7 @@ 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;
@@ -24,7 +23,7 @@ type TUserProfileHeader = {
   showProfileIssuesFilter?: boolean;
 };
 
-export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
+export const UserProfileHeader = observer(function UserProfileHeader(props: TUserProfileHeader) {
   const { userProjectsData, type = undefined, showProfileIssuesFilter } = props;
   // router
   const { workspaceSlug, userId } = useParams();
@@ -59,7 +58,7 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
               <BreadcrumbLink
                 label={breadcrumbLabel}
                 disableTooltip
-                icon={<YourWorkIcon className="h-4 w-4 text-custom-text-300" />}
+                icon={<YourWorkIcon className="h-4 w-4 text-tertiary" />}
               />
             }
           />
@@ -70,15 +69,15 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
         <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
           >
             <></>
@@ -88,23 +87,22 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
                 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 50f1bdc568..b77c6493f1 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 import { Outlet } from "react-router";
@@ -76,7 +74,7 @@ function UseProfileLayout({ params }: Route.ComponentProps) {
                     <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 c6d4e34105..df9247d539 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,5 +1,3 @@
-"use client";
-
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -25,7 +23,7 @@ import { IssueLayoutIcon } from "@/components/issues/issue-layouts/layout-icon";
 // hooks
 import { useIssues } from "@/hooks/store/use-issues";
 
-export const ProfileIssuesMobileHeader = observer(() => {
+export const ProfileIssuesMobileHeader = observer(function ProfileIssuesMobileHeader() {
   // plane i18n
   const { t } = useTranslation();
   // router
@@ -80,18 +78,18 @@ export const ProfileIssuesMobileHeader = observer(() => {
   );
 
   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 flex-center 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="ml-2  h-4 w-4 text-secondary my-auto" 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) => {
@@ -105,19 +103,19 @@ export const ProfileIssuesMobileHeader = observer(() => {
               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 flex-center 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 a91836518a..82dd85c0b3 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
@@ -1,19 +1,16 @@
-import React from "react";
-
 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;
 };
 
-export const ProfileNavbar: React.FC<Props> = (props) => {
+export function ProfileNavbar(props: Props) {
   const { isAuthorized } = props;
   const { t } = useTranslation();
   const { workspaceSlug, userId } = useParams();
@@ -27,11 +24,13 @@ export const ProfileNavbar: React.FC<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 whitespace-nowrap border-b-2 p-4 text-13 font-medium outline-none text-tertiary 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>
@@ -40,4 +39,4 @@ export const ProfileNavbar: React.FC<Props> = (props) => {
       </div>
     </Header>
   );
-};
+}
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 b63ce1affb..6a670e6727 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 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 7732b85044..d8212f6ed0 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,5 +1,3 @@
-"use client";
-
 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 d99c818fae..077ab4edc6 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,5 +1,3 @@
-"use client";
-
 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 fcb28bd3a5..ce8f2d82f1 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,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { ArchiveIcon, CycleIcon, ModuleIcon, WorkItemsIcon } from "@plane/propel/icons";
@@ -15,8 +12,8 @@ import { useIssues } from "@/hooks/store/use-issues";
 import { useProject } from "@/hooks/store/use-project";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-// plane web
-import { ProjectBreadcrumb } from "@/plane-web/components/breadcrumbs/project";
+// plane web imports
+import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
 
 type TProps = {
   activeTab: "issues" | "cycles" | "modules";
@@ -46,7 +43,7 @@ const PROJECT_ARCHIVES_BREADCRUMB_LIST: {
   },
 };
 
-export const ProjectArchivesHeader: FC<TProps> = observer((props: TProps) => {
+export const ProjectArchivesHeader = observer(function ProjectArchivesHeader(props: TProps) {
   const { activeTab } = props;
   // router
   const router = useAppRouter();
@@ -69,13 +66,13 @@ export const ProjectArchivesHeader: FC<TProps> = observer((props: TProps) => {
       <Header.LeftItem>
         <div className="flex items-center gap-2.5">
           <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
-            <ProjectBreadcrumb workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
+            <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
             <Breadcrumbs.Item
               component={
                 <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" />}
                 />
               }
             />
@@ -84,7 +81,7 @@ export const ProjectArchivesHeader: FC<TProps> = observer((props: TProps) => {
                 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" />}
                   />
                 }
               />
@@ -96,7 +93,7 @@ export const ProjectArchivesHeader: FC<TProps> = observer((props: TProps) => {
               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="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-accent-primary/20 text-accent-primary text-11 font-semibold rounded-xl">
                 {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 005c66c86b..97c1bc8ef6 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
 import useSWR from "swr";
@@ -69,17 +67,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 3cfbdb8166..112810c167 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
@@ -20,7 +18,7 @@ import { IssueService } from "@/services/issue";
 
 const issueService = new IssueService();
 
-export const ProjectArchivedIssueDetailsHeader = observer(() => {
+export const ProjectArchivedIssueDetailsHeader = observer(function ProjectArchivedIssueDetailsHeader() {
   // router
   const { workspaceSlug, projectId, archivedIssueId } = useParams();
   // store hooks
@@ -43,7 +41,7 @@ export const ProjectArchivedIssueDetailsHeader = observer(() => {
               <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" />}
               />
             }
           />
@@ -52,7 +50,7 @@ export const ProjectArchivedIssueDetailsHeader = observer(() => {
               <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 77f0c854ab..acb4f7189f 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,5 +1,3 @@
-"use client";
-
 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 61105a0d4c..83dffbaf95 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,5 +1,3 @@
-"use client";
-
 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 dfb32d9bc2..51c9c90d3c 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,5 +1,3 @@
-"use client";
-
 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 e7ab5f7475..d04808bf85 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,5 +1,3 @@
-"use client";
-
 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 3187e73eff..53c50f6521 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,5 +1,3 @@
-"use client";
-
 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 b5ac74dad4..3d38155b36 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane imports
 import { cn } from "@plane/utils";
@@ -68,12 +66,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]"
+                  "flex 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 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-13 shadow-raised-200"
                 )}
-                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 885d6bc68c..b74886bae7 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,5 +1,3 @@
-"use client";
-
 import { useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -10,13 +8,13 @@ import {
   EIssueFilterType,
   EUserPermissions,
   EUserPermissionsLevel,
-  EProjectFeatureKey,
   ISSUE_DISPLAY_FILTERS_BY_PAGE,
   WORK_ITEM_TRACKER_ELEMENTS,
 } from "@plane/constants";
 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";
@@ -25,6 +23,7 @@ import { Breadcrumbs, BreadcrumbNavigationSearchDropdown, Header } from "@plane/
 import { cn } from "@plane/utils";
 // components
 import { WorkItemsModal } from "@/components/analytics/work-items/modal";
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { SwitcherLabel } from "@/components/common/switcher-label";
 import { CycleQuickActions } from "@/components/cycles/quick-actions";
 import {
@@ -45,18 +44,14 @@ import useLocalStorage from "@/hooks/use-local-storage";
 // plane web imports
 import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
 
-export const CycleIssuesHeader: React.FC = observer(() => {
+export const CycleIssuesHeader = observer(function CycleIssuesHeader() {
   // refs
   const parentRef = useRef<HTMLDivElement>(null);
   // states
   const [analyticsModal, setAnalyticsModal] = useState(false);
   // router
   const router = useAppRouter();
-  const { workspaceSlug, projectId, cycleId } = useParams() as {
-    workspaceSlug: string;
-    projectId: string;
-    cycleId: string;
-  };
+  const { workspaceSlug, projectId, cycleId } = useParams();
   // i18n
   const { t } = useTranslation();
   // store hooks
@@ -137,10 +132,15 @@ export const CycleIssuesHeader: React.FC = observer(() => {
         <Header.LeftItem>
           <div className="flex items-center gap-2">
             <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
-              <CommonProjectBreadcrumbs
-                workspaceSlug={workspaceSlug?.toString()}
-                projectId={projectId?.toString()}
-                featureKey={EProjectFeatureKey.CYCLES}
+              <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
+              <Breadcrumbs.Item
+                component={
+                  <BreadcrumbLink
+                    label="Cycles"
+                    href={`/${workspaceSlug}/projects/${projectId}/cycles/`}
+                    icon={<CycleIcon className="h-4 w-4 text-tertiary" />}
+                  />
+                }
               />
               <Breadcrumbs.Item
                 component={
@@ -153,7 +153,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                     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
@@ -170,7 +170,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                 } 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>
@@ -227,39 +227,41 @@ export const CycleIssuesHeader: React.FC = observer(() => {
 
             {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({
+                "text-accent-primary bg-accent-subtle": !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 52b4d42e40..40c0d7b114 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,5 +1,3 @@
-"use client";
-
 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 75c0a9114d..26ac9b4801 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,5 +1,3 @@
-"use client";
-
 import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -25,7 +23,7 @@ const SUPPORTED_LAYOUTS = [
   { key: "calendar", titleTranslationKey: "issue.layouts.calendar", icon: CalendarLayoutIcon },
 ];
 
-export const CycleIssuesMobileHeader = observer(() => {
+export const CycleIssuesMobileHeader = observer(function CycleIssuesMobileHeader() {
   // router
   const { workspaceSlug, projectId, cycleId } = useParams();
   // states
@@ -92,15 +90,15 @@ export const CycleIssuesMobileHeader = observer(() => {
         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 py-2 border-b border-subtle md:hidden bg-surface-1">
         <CustomMenu
           maxHeight={"md"}
-          className="flex flex-grow justify-center text-custom-text-200 text-sm"
+          className="flex flex-grow justify-center text-secondary text-13"
           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-secondary text-13">{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) => (
@@ -112,18 +110,18 @@ export const CycleIssuesMobileHeader = observer(() => {
               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>
+              <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 justify-center border-l border-subtle items-center text-secondary text-13">
           <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-secondary text-13">
                 {t("common.display")}
-                <ChevronDownIcon className="text-custom-text-200 h-4 w-4 ml-2" />
+                <ChevronDownIcon className="text-secondary h-4 w-4 ml-2" />
               </span>
             }
           >
@@ -144,7 +142,7 @@ export const CycleIssuesMobileHeader = observer(() => {
 
         <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 text-secondary text-13 border-l border-subtle"
         >
           {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 c2ac8e4551..5ee1f4e44b 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,28 +1,26 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // ui
-import { EProjectFeatureKey, EUserPermissions, EUserPermissionsLevel, CYCLE_TRACKER_ELEMENTS } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel, CYCLE_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { CycleIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { CyclesViewHeader } from "@/components/cycles/cycles-view-header";
 // hooks
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
-// plane web
+// plane web imports
 import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
-// constants
 
-export const CyclesListHeader: FC = observer(() => {
+export const CyclesListHeader = observer(function CyclesListHeader() {
   // router
   const router = useAppRouter();
-  const { workspaceSlug } = useParams();
+  const { workspaceSlug, projectId } = useParams();
 
   // store hooks
   const { toggleCreateCycleModal } = useCommandPalette();
@@ -39,10 +37,16 @@ export const CyclesListHeader: FC = observer(() => {
     <Header>
       <Header.LeftItem>
         <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
-          <CommonProjectBreadcrumbs
-            workspaceSlug={workspaceSlug?.toString()}
-            projectId={currentProjectDetails?.id ?? ""}
-            featureKey={EProjectFeatureKey.CYCLES}
+          <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
+          <Breadcrumbs.Item
+            component={
+              <BreadcrumbLink
+                label="Cycles"
+                href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/cycles/`}
+                icon={<CycleIcon className="h-4 w-4 text-tertiary" />}
+                isLast
+              />
+            }
             isLast
           />
         </Breadcrumbs>
@@ -52,7 +56,7 @@ export const CyclesListHeader: FC = observer(() => {
           <CyclesViewHeader projectId={currentProjectDetails.id} />
           <Button
             variant="primary"
-            size="sm"
+            size="lg"
             data-ph-element={CYCLE_TRACKER_ELEMENTS.RIGHT_HEADER_ADD_BUTTON}
             onClick={() => {
               toggleCreateCycleModal(true);
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 002ab55376..f65235274a 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,5 +1,3 @@
-"use client";
-
 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 4c8e4e9c49..f3bdc98b7d 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,5 +1,3 @@
-"use client";
-
 import type React from "react";
 import { observer } from "mobx-react";
 // ui
@@ -34,7 +32,7 @@ const CYCLE_VIEW_LAYOUTS: {
   },
 ];
 
-export const CyclesListMobileHeader = observer(() => {
+export const CyclesListMobileHeader = observer(function CyclesListMobileHeader() {
   const { currentProjectDetails } = useProject();
   // hooks
   const { updateDisplayFilters } = useCycleFilter();
@@ -42,15 +40,15 @@ export const CyclesListMobileHeader = observer(() => {
     <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 text-secondary text-13 py-2 border-b border-subtle bg-surface-1"
         // 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-secondary text-13">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) => {
@@ -66,7 +64,7 @@ export const CyclesListMobileHeader = observer(() => {
               className="flex items-center gap-2"
             >
               <layout.icon className="w-3 h-3" />
-              <div className="text-custom-text-300">{layout.title}</div>
+              <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 60285485f9..f029bc0b31 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,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
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 24e96477e9..3d3ec5d053 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,5 +1,3 @@
-"use client";
-
 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 e8cedf8e18..4904f9da13 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,4 +1,3 @@
-"use client";
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
 import { useTheme } from "next-themes";
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 726686e78c..216aed2ad5 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,5 +1,3 @@
-"use client";
-
 import { useTheme } from "next-themes";
 import { redirect } from "react-router";
 import { useTranslation } from "@plane/i18n";
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 8a2e9a71a5..f444410013 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,5 @@
 import { IssuesHeader } from "@/plane-web/components/issues/header";
 
-export const ProjectIssuesHeader = () => <IssuesHeader />;
+export function ProjectIssuesHeader() {
+  return <IssuesHeader />;
+}
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 ffaf086c03..5fe249e5c3 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,5 +1,3 @@
-"use client";
-
 // 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 c714cfaf1f..7a13d897e4 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,5 +1,3 @@
-"use client";
-
 import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -20,14 +18,11 @@ import {
 import { useIssues } from "@/hooks/store/use-issues";
 import { useProject } from "@/hooks/store/use-project";
 
-export const ProjectIssuesMobileHeader = observer(() => {
+export const ProjectIssuesMobileHeader = observer(function ProjectIssuesMobileHeader() {
   // i18n
   const { t } = useTranslation();
   const [analyticsModal, setAnalyticsModal] = useState(false);
-  const { workspaceSlug, projectId } = useParams() as {
-    workspaceSlug: string;
-    projectId: string;
-  };
+  const { workspaceSlug, projectId } = useParams();
   const { currentProjectDetails } = useProject();
 
   // store hooks
@@ -67,19 +62,19 @@ export const ProjectIssuesMobileHeader = observer(() => {
         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="md:hidden flex justify-evenly border-b border-subtle py-2 z-[13] bg-surface-1">
         <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>
             }
           >
@@ -99,7 +94,7 @@ export const ProjectIssuesMobileHeader = observer(() => {
 
         <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 17955c562b..f2d5355b1f 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,5 +1,3 @@
-"use client";
-
 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
new file mode 100644
index 0000000000..c3a27ec6ec
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/layout.tsx
@@ -0,0 +1,53 @@
+import { observer } from "mobx-react";
+import { Outlet } from "react-router";
+// plane imports
+import { Header, Row } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { TabNavigationRoot } from "@/components/navigation/tab-navigation-root";
+import { AppSidebarToggleButton } from "@/components/sidebar/sidebar-toggle-button";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useProjectNavigationPreferences } from "@/hooks/use-navigation-preferences";
+import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";
+// local imports
+import type { Route } from "./+types/layout";
+
+function ProjectLayout({ params }: Route.ComponentProps) {
+  // router
+  const { workspaceSlug, projectId } = params;
+  // store hooks
+  const { sidebarCollapsed } = useAppTheme();
+  // preferences
+  const { preferences: projectPreferences } = useProjectNavigationPreferences();
+
+  return (
+    <>
+      {projectPreferences.navigationMode === "horizontal" && (
+        <div className="z-20">
+          <Row className="h-header flex gap-2 w-full items-center border-b border-subtle bg-surface-1">
+            <div className="flex items-center gap-2 divide-x divide-subtle h-full w-full">
+              <div className="flex items-center gap-2 size-full flex-1">
+                {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">
+                    <TabNavigationRoot workspaceSlug={workspaceSlug} projectId={projectId} />
+                  </Header.LeftItem>
+                </Header>
+              </div>
+            </div>
+          </Row>
+        </div>
+      )}
+      <ProjectAuthWrapper workspaceSlug={workspaceSlug} projectId={projectId}>
+        <Outlet />
+      </ProjectAuthWrapper>
+    </>
+  );
+}
+
+export default observer(ProjectLayout);
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 bcb1501407..9c5db9a986 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // plane imports
@@ -64,12 +62,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]"
+                "flex h-full w-[24rem] flex-shrink-0 flex-col gap-3.5 overflow-y-auto border-l border-subtle bg-surface-1 px-6 duration-300 vertical-scrollbar scrollbar-sm absolute right-0 z-13 shadow-raised-200"
               )}
-              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 2dec9fa964..38dbcbc87b 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,5 +1,3 @@
-"use client";
-
 import { useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -11,7 +9,6 @@ import {
   ISSUE_DISPLAY_FILTERS_BY_PAGE,
   EUserPermissions,
   EUserPermissionsLevel,
-  EProjectFeatureKey,
   WORK_ITEM_TRACKER_ELEMENTS,
 } from "@plane/constants";
 import { Button } from "@plane/propel/button";
@@ -23,6 +20,7 @@ import { Breadcrumbs, Header, BreadcrumbNavigationSearchDropdown } from "@plane/
 import { cn } from "@plane/utils";
 // components
 import { WorkItemsModal } from "@/components/analytics/work-items/modal";
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { SwitcherLabel } from "@/components/common/switcher-label";
 import {
   DisplayFiltersSelection,
@@ -42,10 +40,11 @@ import { useAppRouter } from "@/hooks/use-app-router";
 import { useIssuesActions } from "@/hooks/use-issues-actions";
 import useLocalStorage from "@/hooks/use-local-storage";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-// plane web
+// plane web imports
 import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
+import { IconButton } from "@plane/propel/icon-button";
 
-export const ModuleIssuesHeader: React.FC = observer(() => {
+export const ModuleIssuesHeader = observer(function ModuleIssuesHeader() {
   // refs
   const parentRef = useRef<HTMLDivElement>(null);
   // states
@@ -130,10 +129,17 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
         <Header.LeftItem>
           <div className="flex items-center gap-2">
             <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
-              <CommonProjectBreadcrumbs
-                workspaceSlug={workspaceSlug?.toString() ?? ""}
-                projectId={projectId?.toString() ?? ""}
-                featureKey={EProjectFeatureKey.MODULES}
+              <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
+              <Breadcrumbs.Item
+                component={
+                  <BreadcrumbLink
+                    label="Modules"
+                    href={`/${workspaceSlug}/projects/${projectId}/modules/`}
+                    icon={<ModuleIcon className="h-4 w-4 text-tertiary" />}
+                    isLast
+                  />
+                }
+                isLast
               />
               <Breadcrumbs.Item
                 component={
@@ -144,7 +150,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                       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
                   />
                 }
@@ -158,7 +164,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                 } 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>
@@ -216,24 +222,20 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
 
           {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>
@@ -241,20 +243,22 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
           ) : (
             <></>
           )}
-          <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({
+              "text-accent-primary bg-accent-subtle": !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 4e8e0e60bf..33234e33c4 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,5 +1,3 @@
-"use client";
-
 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 6be0088d63..bce3d92322 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,5 +1,3 @@
-"use client";
-
 import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -25,13 +23,9 @@ const SUPPORTED_LAYOUTS = [
   { key: "calendar", i18n_title: "issue.layouts.calendar", icon: CalendarLayoutIcon },
 ];
 
-export const ModuleIssuesMobileHeader = observer(() => {
+export const ModuleIssuesMobileHeader = observer(function ModuleIssuesMobileHeader() {
   // router
-  const { workspaceSlug, projectId, moduleId } = useParams() as {
-    workspaceSlug: string;
-    projectId: string;
-    moduleId: string;
-  };
+  const { workspaceSlug, projectId, moduleId } = useParams();
   // states
   const [analyticsModal, setAnalyticsModal] = useState(false);
   // plane hooks
@@ -78,13 +72,13 @@ export const ModuleIssuesMobileHeader = observer(() => {
         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) => (
@@ -96,18 +90,18 @@ export const ModuleIssuesMobileHeader = observer(() => {
               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>
             }
           >
@@ -128,7 +122,7 @@ export const ModuleIssuesMobileHeader = observer(() => {
 
         <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 fbb40e3b4b..f08452982f 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,28 +1,27 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { EProjectFeatureKey, EUserPermissions, EUserPermissionsLevel, MODULE_TRACKER_ELEMENTS } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel, MODULE_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // ui
 import { Button } from "@plane/propel/button";
+import { ModuleIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { ModuleViewHeader } from "@/components/modules";
 // hooks
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
-// plane web
+// plane web imports
 import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
-// constants
 
-export const ModulesListHeader: React.FC = observer(() => {
+export const ModulesListHeader = observer(function ModulesListHeader() {
   // router
   const router = useAppRouter();
-  const { workspaceSlug, projectId } = useParams() as { workspaceSlug: string; projectId: string };
+  const { workspaceSlug, projectId } = useParams();
   // store hooks
   const { toggleCreateModuleModal } = useCommandPalette();
   const { allowPermissions } = useUserPermissions();
@@ -42,10 +41,16 @@ export const ModulesListHeader: React.FC = observer(() => {
       <Header.LeftItem>
         <div>
           <Breadcrumbs onBack={router.back} isLoading={loader === "init-loader"}>
-            <CommonProjectBreadcrumbs
-              workspaceSlug={workspaceSlug?.toString() ?? ""}
-              projectId={projectId?.toString() ?? ""}
-              featureKey={EProjectFeatureKey.MODULES}
+            <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label="Modules"
+                  href={`/${workspaceSlug}/projects/${projectId}/modules/`}
+                  icon={<ModuleIcon className="h-4 w-4 text-tertiary" />}
+                  isLast
+                />
+              }
               isLast
             />
           </Breadcrumbs>
@@ -56,11 +61,11 @@ export const ModulesListHeader: React.FC = observer(() => {
         {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="hidden sm:block">{t("project_module.add_module")}</div>
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 781de0480a..909418c898 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,5 +1,3 @@
-"use client";
-
 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 94b1904574..c044561544 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { MODULE_VIEW_LAYOUTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -9,7 +7,7 @@ import { ModuleLayoutIcon } from "@/components/modules";
 import { useModuleFilter } from "@/hooks/store/use-module-filter";
 import { useProject } from "@/hooks/store/use-project";
 
-export const ModulesListMobileHeader = observer(() => {
+export const ModulesListMobileHeader = observer(function ModulesListMobileHeader() {
   const { currentProjectDetails } = useProject();
   const { updateDisplayFilters } = useModuleFilter();
   const { t } = useTranslation();
@@ -18,14 +16,14 @@ export const ModulesListMobileHeader = observer(() => {
     <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 text-secondary text-13 py-2 border-b border-subtle bg-surface-1"
         // 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 text-secondary text-13 gap-2">
+            <span>Layout</span> <ChevronDownIcon className="h-4 w-4 text-secondary my-auto" 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) => {
@@ -39,7 +37,7 @@ export const ModulesListMobileHeader = observer(() => {
               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 65b96d9ba9..292db35540 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,5 +1,3 @@
-"use client";
-
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
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 6fdd3a1c4e..85d5b49615 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,5 +1,3 @@
-"use client";
-
 import { useCallback, useEffect, useMemo } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -46,7 +44,7 @@ function PageDetailsPage({ params }: Route.ComponentProps) {
     storeType,
   });
   const { getWorkspaceBySlug } = useWorkspace();
-  const { uploadEditorAsset } = useEditorAsset();
+  const { uploadEditorAsset, duplicateEditorAsset } = useEditorAsset();
   // derived values
   const workspaceId = workspaceSlug ? (getWorkspaceBySlug(workspaceSlug)?.id ?? "") : "";
   const { canCurrentUserAccessPage, id, name, updateDescription } = page ?? {};
@@ -115,11 +113,21 @@ function PageDetailsPage({ params }: Route.ComponentProps) {
           });
           return asset_id;
         },
+        duplicateFile: async (assetId: string) => {
+          const { asset_id } = await duplicateEditorAsset({
+            assetId,
+            entityId: id,
+            entityType: EFileAssetType.PAGE_DESCRIPTION,
+            projectId,
+            workspaceSlug,
+          });
+          return asset_id;
+        },
         workspaceId,
         workspaceSlug,
       }),
     }),
-    [getEditorFileHandlers, id, uploadEditorAsset, projectId, workspaceId, workspaceSlug]
+    [getEditorFileHandlers, projectId, workspaceId, workspaceSlug, uploadEditorAsset, id, duplicateEditorAsset]
   );
 
   const webhookConnectionParams: TWebhookConnectionQueryParams = useMemo(
@@ -147,13 +155,13 @@ function PageDetailsPage({ params }: Route.ComponentProps) {
   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">
+        <h3 className="text-16 font-semibold text-center">Page not found</h3>
+        <p className="text-13 text-secondary text-center mt-3">
           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>
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 ad6b9c1285..3f8dbe2ae4 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,25 +1,22 @@
-"use client";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
-import { EProjectFeatureKey } from "@plane/constants";
+// plane imports
 import { PageIcon } from "@plane/propel/icons";
-// types
 import type { ICustomSearchSelectOption } from "@plane/types";
-// ui
 import { Breadcrumbs, Header, BreadcrumbNavigationSearchDropdown } from "@plane/ui";
-// components
 import { getPageName } from "@plane/utils";
+// components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { PageAccessIcon } from "@/components/common/page-access-icon";
 import { SwitcherIcon, SwitcherLabel } from "@/components/common/switcher-label";
 import { PageHeaderActions } from "@/components/pages/header/actions";
-// helpers
+import { PageSyncingBadge } from "@/components/pages/header/syncing-badge";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
-// plane web components
 import { useAppRouter } from "@/hooks/use-app-router";
+// plane web imports
 import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
 import { PageDetailsHeaderExtraActions } from "@/plane-web/components/pages";
-// plane web hooks
 import { EPageStoreType, usePage, usePageStore } from "@/plane-web/hooks/store";
 
 export interface IPagesHeaderProps {
@@ -28,7 +25,7 @@ export interface IPagesHeaderProps {
 
 const storeType = EPageStoreType.PROJECT;
 
-export const PageDetailsHeader = observer(() => {
+export const PageDetailsHeader = observer(function PageDetailsHeader() {
   // router
   const router = useAppRouter();
   const { workspaceSlug, pageId, projectId } = useParams();
@@ -66,10 +63,15 @@ export const PageDetailsHeader = observer(() => {
       <Header.LeftItem>
         <div>
           <Breadcrumbs isLoading={loader === "init-loader"}>
-            <CommonProjectBreadcrumbs
-              workspaceSlug={workspaceSlug?.toString()}
-              projectId={projectId?.toString()}
-              featureKey={EProjectFeatureKey.PAGES}
+            <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label="Pages"
+                  href={`/${workspaceSlug}/projects/${projectId}/pages/`}
+                  icon={<PageIcon className="h-4 w-4 text-tertiary" />}
+                />
+              }
             />
 
             <Breadcrumbs.Item
@@ -94,6 +96,7 @@ export const PageDetailsHeader = observer(() => {
         </div>
       </Header.LeftItem>
       <Header.RightItem>
+        <PageSyncingBadge syncStatus={page.isSyncingWithServer} />
         <PageDetailsHeaderExtraActions page={page} storeType={storeType} />
         <PageHeaderActions page={page} storeType={storeType} />
       </Header.RightItem>
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 a446165d0d..59f609dbfb 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,5 +1,3 @@
-"use client";
-
 // 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 4aa12716ba..b7e339d045 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,36 +1,30 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 // constants
-import {
-  EPageAccess,
-  EProjectFeatureKey,
-  PROJECT_PAGE_TRACKER_EVENTS,
-  PROJECT_TRACKER_ELEMENTS,
-} from "@plane/constants";
+import { EPageAccess, PROJECT_PAGE_TRACKER_EVENTS, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 // plane types
 import { Button } from "@plane/propel/button";
+import { PageIcon } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { TPage } from "@plane/types";
 // plane ui
 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
+// plane web imports
 import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
-// plane web hooks
 import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
 
-export const PagesListHeader = observer(() => {
+export const PagesListHeader = observer(function PagesListHeader() {
   // states
   const [isCreatingPage, setIsCreatingPage] = useState(false);
   // router
   const router = useRouter();
-  const { workspaceSlug } = useParams();
+  const { workspaceSlug, projectId } = useParams();
   const searchParams = useSearchParams();
   const pageType = searchParams.get("type");
   // store hooks
@@ -76,19 +70,25 @@ export const PagesListHeader = observer(() => {
     <Header>
       <Header.LeftItem>
         <Breadcrumbs isLoading={loader === "init-loader"}>
-          <CommonProjectBreadcrumbs
-            workspaceSlug={workspaceSlug?.toString() ?? ""}
-            projectId={currentProjectDetails?.id?.toString() ?? ""}
-            featureKey={EProjectFeatureKey.PAGES}
+          <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
+          <Breadcrumbs.Item
+            component={
+              <BreadcrumbLink
+                label="Pages"
+                href={`/${workspaceSlug}/projects/${currentProjectDetails?.id}/pages/`}
+                icon={<PageIcon className="h-4 w-4 text-tertiary" />}
+                isLast
+              />
+            }
             isLast
           />
         </Breadcrumbs>
       </Header.LeftItem>
-      {canCurrentUserCreatePage ? (
+      {canCurrentUserCreatePage && (
         <Header.RightItem>
           <Button
             variant="primary"
-            size="sm"
+            size="lg"
             onClick={handleCreatePage}
             loading={isCreatingPage}
             data-ph-element={PROJECT_TRACKER_ELEMENTS.CREATE_HEADER_BUTTON}
@@ -96,8 +96,6 @@ export const PagesListHeader = observer(() => {
             {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 64f4ee95de..911ef24bbb 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,5 +1,3 @@
-"use client";
-
 // 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 775472f82b..b4f6ff523b 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
 import { useTheme } from "next-themes";
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 33a84241ab..e64d5d9821 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,30 +1,25 @@
-"use client";
-
 import { useCallback, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Lock } from "lucide-react";
-// plane constants
+// plane imports
 import {
   EIssueFilterType,
   ISSUE_DISPLAY_FILTERS_BY_PAGE,
   EUserPermissions,
   EUserPermissionsLevel,
-  EProjectFeatureKey,
   WORK_ITEM_TRACKER_ELEMENTS,
 } from "@plane/constants";
-// types
 import { Button } from "@plane/propel/button";
 import { 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";
-// ui
 import { Breadcrumbs, Header, BreadcrumbNavigationSearchDropdown } from "@plane/ui";
 // components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { SwitcherIcon, SwitcherLabel } from "@/components/common/switcher-label";
 import { DisplayFiltersSelection, FiltersDropdown, LayoutSelection } from "@/components/issues/issue-layouts/filters";
-// constants
 import { ViewQuickActions } from "@/components/views/quick-actions";
 import { WorkItemFiltersToggle } from "@/components/work-item-filters/filters-toggle";
 // hooks
@@ -33,11 +28,11 @@ import { useIssues } from "@/hooks/store/use-issues";
 import { useProject } from "@/hooks/store/use-project";
 import { useProjectView } from "@/hooks/store/use-project-view";
 import { useUserPermissions } from "@/hooks/store/user";
-// plane web
 import { useAppRouter } from "@/hooks/use-app-router";
+// plane web imports
 import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
 
-export const ProjectViewIssuesHeader: React.FC = observer(() => {
+export const ProjectViewIssuesHeader = observer(function ProjectViewIssuesHeader() {
   // refs
   const parentRef = useRef(null);
   // router
@@ -123,12 +118,16 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
     <Header>
       <Header.LeftItem>
         <Breadcrumbs isLoading={loader === "init-loader"}>
-          <CommonProjectBreadcrumbs
-            workspaceSlug={workspaceSlug?.toString() ?? ""}
-            projectId={projectId?.toString() ?? ""}
-            featureKey={EProjectFeatureKey.VIEWS}
+          <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
+          <Breadcrumbs.Item
+            component={
+              <BreadcrumbLink
+                label="Views"
+                href={`/${workspaceSlug}/projects/${projectId}/views/`}
+                icon={<ViewsIcon className="h-4 w-4 text-tertiary" />}
+              />
+            }
           />
-
           <Breadcrumbs.Item
             component={
               <BreadcrumbNavigationSearchDropdown
@@ -150,7 +149,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
         </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" />
             </Tooltip>
@@ -191,23 +190,22 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
             </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 4d3c3a183e..a51b2dbb51 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,5 +1,3 @@
-"use client";
-
 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 f7ad8f2122..dfd295513a 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,5 +1,3 @@
-"use client";
-
 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 1ac783ebd6..ba08f18159 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,21 +1,21 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // ui
-import { EProjectFeatureKey, PROJECT_VIEW_TRACKER_ELEMENTS } from "@plane/constants";
+import { PROJECT_VIEW_TRACKER_ELEMENTS } from "@plane/constants";
 import { Button } from "@plane/propel/button";
+import { ViewsIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { ViewListHeader } from "@/components/views/view-list-header";
 // hooks
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useProject } from "@/hooks/store/use-project";
-// plane web
+// plane web imports
 import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
 
-export const ProjectViewsHeader = observer(() => {
-  const { workspaceSlug, projectId } = useParams() as { workspaceSlug: string; projectId: string };
+export const ProjectViewsHeader = observer(function ProjectViewsHeader() {
+  const { workspaceSlug, projectId } = useParams();
   // store hooks
   const { toggleCreateViewModal } = useCommandPalette();
   const { loader } = useProject();
@@ -25,10 +25,16 @@ export const ProjectViewsHeader = observer(() => {
       <Header>
         <Header.LeftItem>
           <Breadcrumbs isLoading={loader === "init-loader"}>
-            <CommonProjectBreadcrumbs
-              workspaceSlug={workspaceSlug?.toString() ?? ""}
-              projectId={projectId?.toString() ?? ""}
-              featureKey={EProjectFeatureKey.VIEWS}
+            <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label="Views"
+                  href={`/${workspaceSlug}/projects/${projectId}/views/`}
+                  icon={<ViewsIcon className="h-4 w-4 text-tertiary" />}
+                  isLast
+                />
+              }
               isLast
             />
           </Breadcrumbs>
@@ -39,7 +45,7 @@ export const ProjectViewsHeader = observer(() => {
             <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 c6fc4039c0..41751627c1 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,5 +1,3 @@
-"use client";
-
 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 3980e977fe..b60158a0fb 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // icons
 import { ListFilter } from "lucide-react";
@@ -13,7 +11,7 @@ import { ViewOrderByDropdown } from "@/components/views/filters/order-by";
 import { useMember } from "@/hooks/store/use-member";
 import { useProjectView } from "@/hooks/store/use-project-view";
 
-export const ViewMobileHeader = observer(() => {
+export const ViewMobileHeader = observer(function ViewMobileHeader() {
   // store hooks
   const { filters, updateFilters } = useProjectView();
   const {
@@ -22,8 +20,8 @@ export const ViewMobileHeader = observer(() => {
 
   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="md:hidden flex justify-evenly border-b border-subtle py-2 z-[13] bg-surface-1">
+        <Row className="flex flex-grow items-center justify-center border-l border-subtle text-13 text-secondary">
           <ViewOrderByDropdown
             sortBy={filters.sortBy}
             sortKey={filters.sortKey}
@@ -34,16 +32,16 @@ export const ViewMobileHeader = observer(() => {
             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 b68a395bdb..76bebd6711 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,5 +1,3 @@
-"use client";
-
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
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 c2c678c772..588a8a43da 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,5 +1,3 @@
-"use client";
-
 // 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 ac6e5c3cd9..bbd6d42b19 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,4 +1,7 @@
 import { ProjectPageRoot } from "@/plane-web/components/projects/page";
 
-const ProjectsPage = () => <ProjectPageRoot />;
+function ProjectsPage() {
+  return <ProjectPageRoot />;
+}
+
 export default ProjectsPage;
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/layout.tsx
deleted file mode 100644
index 4053aa6c73..0000000000
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/layout.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-"use client";
-
-import { Outlet } from "react-router";
-// plane web layouts
-import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";
-import type { Route } from "./+types/layout";
-
-export default function ProjectDetailLayout({ params }: Route.ComponentProps) {
-  // router
-  const { workspaceSlug, projectId } = params;
-  return (
-    <ProjectAuthWrapper workspaceSlug={workspaceSlug} projectId={projectId}>
-      <Outlet />
-    </ProjectAuthWrapper>
-  );
-}
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 4e9249ed7b..5087369279 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(list)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(list)/layout.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 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 ac6e5c3cd9..bbd6d42b19 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(list)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(list)/page.tsx
@@ -1,4 +1,7 @@
 import { ProjectPageRoot } from "@/plane-web/components/projects/page";
 
-const ProjectsPage = () => <ProjectPageRoot />;
+function ProjectsPage() {
+  return <ProjectPageRoot />;
+}
+
 export default ProjectsPage;
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
index a30707e218..f076ea2d35 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/sidebar.tsx
@@ -15,7 +15,7 @@ import { useUserPermissions } from "@/hooks/store/user";
 // plane web components
 import { SidebarTeamsList } from "@/plane-web/components/workspace/sidebar/teams-sidebar-list";
 
-export const AppSidebar: FC = observer(() => {
+export const AppSidebar = observer(function AppSidebar() {
   // store hooks
   const { allowPermissions } = useUserPermissions();
   const { groupedFavorites } = useFavorite();
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 4644e7818a..7501a2e1e8 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/star-us-link.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/star-us-link.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useTheme } from "next-themes";
 // plane imports
 import { HEADER_GITHUB_ICON, GITHUB_REDIRECTED_TRACKER_EVENT } from "@plane/constants";
@@ -10,7 +8,7 @@ import githubWhiteImage from "@/app/assets/logos/github-white.png?url";
 // helpers
 import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
 
-export const StarUsOnGitHubLink = () => {
+export function StarUsOnGitHubLink() {
   // plane hooks
   const { t } = useTranslation();
   // hooks
@@ -31,13 +29,13 @@ export const StarUsOnGitHubLink = () => {
           },
         })
       }
-      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 49b76da57f..9c77a82c84 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/header.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
@@ -13,7 +11,7 @@ import { useStickyOperations } from "@/components/stickies/sticky/use-operations
 // hooks
 import { useSticky } from "@/hooks/use-stickies";
 
-export const WorkspaceStickyHeader = observer(() => {
+export const WorkspaceStickyHeader = observer(function WorkspaceStickyHeader() {
   const { workspaceSlug } = useParams();
   // hooks
   const { creatingSticky, toggleShowNewSticky } = useSticky();
@@ -29,7 +27,7 @@ export const WorkspaceStickyHeader = observer(() => {
                 component={
                   <BreadcrumbLink
                     label={`Stickies`}
-                    icon={<RecentStickyIcon className="size-5 rotate-90 text-custom-text-200" />}
+                    icon={<RecentStickyIcon className="size-5 rotate-90 text-secondary" />}
                   />
                 }
               />
@@ -41,8 +39,7 @@ export const WorkspaceStickyHeader = observer(() => {
           <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 366a71ab7a..f33cfefd0b 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/layout.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 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 198985929c..463e75c612 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/stickies/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 // 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 7f2c4abe99..9862aae69f 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,5 +1,3 @@
-"use client";
-
 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 07f75a3098..961c6b7cd7 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/header.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useCallback, useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -30,7 +28,7 @@ import { useIssues } from "@/hooks/store/use-issues";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { GlobalViewLayoutSelection } from "@/plane-web/components/views/helper";
 
-export const GlobalIssuesHeader = observer(() => {
+export const GlobalIssuesHeader = observer(function GlobalIssuesHeader() {
   // states
   const [createViewModal, setCreateViewModal] = useState(false);
   // router
@@ -122,9 +120,7 @@ export const GlobalIssuesHeader = observer(() => {
         <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={
@@ -137,7 +133,7 @@ export const GlobalIssuesHeader = observer(() => {
                   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
@@ -168,10 +164,9 @@ export const GlobalIssuesHeader = observer(() => {
               />
             </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 95469c3d05..34fa8df49b 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/layout.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 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 9f8865077e..4bb831ebf3 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/workspace-views/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { Search } from "lucide-react";
@@ -26,10 +24,10 @@ function WorkspaceViewsPage() {
     <>
       <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-11 w-full items-center gap-2.5  px-5 py-3 overflow-hidden border-b border-subtle">
+          <Search className="text-secondary" size={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"
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/layout.tsx
index 2a5eda4f3b..982489d500 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/layout.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { Outlet } from "react-router";
 // components
 import { ContentWrapper } from "@/components/core/content-wrapper";
@@ -10,13 +8,13 @@ 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">
+      <div className="relative flex size-full overflow-hidden rounded-lg border border-subtle">
+        <main className="relative flex size-full flex-col overflow-hidden">
           {/* Header */}
           <SettingsHeader />
           {/* Content */}
-          <ContentWrapper className="p-page-x md:flex w-full">
-            <div className="w-full h-full overflow-hidden">
+          <ContentWrapper className="p-page-x md:flex w-full bg-surface-1">
+            <div className="size-full overflow-hidden">
               <Outlet />
             </div>
           </ContentWrapper>
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 6eeb9e667a..0ea5d2c9c9 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // component
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
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 e637dfb4f8..5891e50845 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // components
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
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
index 38585a77ec..89eb978fce 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/imports/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/imports/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // components
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
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 a538a44869..8e4b1b1ea7 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,4 +1,3 @@
-"use client";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // components
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 08ed35d80d..783f7a0dd0 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/layout.tsx
@@ -1,28 +1,32 @@
-"use client";
-
 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";
+// plane imports
+import { WORKSPACE_SETTINGS_ACCESS } from "@plane/constants";
+import type { EUserWorkspaceRoles } from "@plane/types";
+// plane web components
+import { WorkspaceSettingsRightSidebar } from "@/plane-web/components/workspace/right-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) {
@@ -44,11 +48,12 @@ function WorkspaceSettingLayout() {
             <div className="w-full h-full overflow-y-scroll md:pt-page-y">
               <Outlet />
             </div>
+            <WorkspaceSettingsRightSidebar workspaceSlug={workspaceSlug} />
           </div>
         )}
       </div>
     </>
   );
-}
+});
 
-export default observer(WorkspaceSettingLayout);
+export default WorkspaceSettingLayout;
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 20d3f57ee0..a50bbba2c1 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,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { Search } from "lucide-react";
@@ -30,10 +28,10 @@ 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 type { Route } from "./+types/page";
 
-function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) {
+const WorkspaceMembersSettingsPage = observer(function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) {
   // states
   const [inviteModal, setInviteModal] = useState(false);
   const [searchQuery, setSearchQuery] = useState<string>("");
@@ -44,7 +42,7 @@ function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) {
   const {
     workspace: { workspaceMemberIds, inviteMembersToWorkspace, filtersStore },
   } = useMember();
-  const { currentWorkspace } = useWorkspace();
+  const { currentWorkspace, mutateWorkspaceMembersActivity } = useWorkspace();
   const { t } = useTranslation();
 
   // derived values
@@ -57,6 +55,7 @@ function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) {
   const handleWorkspaceInvite = async (data: IWorkspaceBulkInviteFormData) => {
     try {
       await inviteMembersToWorkspace(workspaceSlug, data);
+      void mutateWorkspaceMembersActivity(workspaceSlug);
 
       setInviteModal(false);
 
@@ -72,23 +71,27 @@ function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) {
         title: "Success!",
         message: t("workspace_settings.settings.members.invitations_sent_successfully"),
       });
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (err: any) {
+    } catch (error: unknown) {
+      let message = undefined;
+      if (error instanceof Error) {
+        const err = error as Error & { error?: string };
+        message = err.error;
+      }
       captureError({
         eventName: MEMBER_TRACKER_EVENTS.invite,
         payload: {
           emails: data.emails.map((email) => email.email),
         },
-        error: err,
+        error: error as 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;
     }
   };
 
@@ -125,20 +128,21 @@ function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) {
           "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 justify-between gap-4 pb-3.5 items-center">
+          <h4 className="flex items-center gap-2.5 text-h5-medium">
             {t("workspace_settings.settings.members.title")}
             {workspaceMemberIds && workspaceMemberIds.length > 0 && (
               <CountChip count={workspaceMemberIds.length} className="h-5 m-auto" />
             )}
           </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">
+              <Search 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)}
               />
@@ -148,10 +152,11 @@ function WorkspaceMembersSettingsPage({ params }: Route.ComponentProps) {
               handleUpdate={handleRoleFilterUpdate}
               memberType="workspace"
             />
+            <MembersActivityButton workspaceSlug={workspaceSlug} />
             {canPerformWorkspaceAdminActions && (
               <Button
                 variant="primary"
-                size="sm"
+                size="lg"
                 onClick={() => setInviteModal(true)}
                 data-ph-element={MEMBER_TRACKER_ELEMENTS.HEADER_ADD_BUTTON}
               >
@@ -165,6 +170,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
index 9e7c24982c..822ba83f98 100644
--- 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
@@ -8,7 +8,7 @@ import { useAppRouter } from "@/hooks/use-app-router";
 // plane web helpers
 import { shouldRenderSettingLink } from "@/plane-web/helpers/workspace.helper";
 
-export const MobileWorkspaceSettingsTabs = observer(() => {
+export const MobileWorkspaceSettingsTabs = observer(function MobileWorkspaceSettingsTabs() {
   const router = useAppRouter();
   const { workspaceSlug } = useParams();
   const pathname = usePathname();
@@ -17,7 +17,7 @@ export const MobileWorkspaceSettingsTabs = observer(() => {
   const { allowPermissions } = useUserPermissions();
 
   return (
-    <div className="flex-shrink-0 md:hidden sticky inset-0 flex overflow-x-auto bg-custom-background-100 z-10">
+    <div className="flex-shrink-0 md:hidden sticky inset-0 flex overflow-x-auto bg-surface-1 z-10">
       {WORKSPACE_SETTINGS_LINKS.map(
         (item, index) =>
           shouldRenderSettingLink(workspaceSlug.toString(), item.key) &&
@@ -25,8 +25,8 @@ export const MobileWorkspaceSettingsTabs = observer(() => {
             <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"
+                  ? "text-accent-primary text-13 py-2 px-3 whitespace-nowrap flex flex-grow cursor-pointer justify-around border-b border-accent-strong-200"
+                  : "text-secondary flex flex-grow cursor-pointer justify-around border-b border-subtle text-13 py-2 px-3 whitespace-nowrap"
               }`}
               key={index}
               onClick={() => router.push(`/${workspaceSlug}${item.href}`)}
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 9f27cb7d08..f7aa43fdea 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/sidebar.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/sidebar.tsx
index 3e9a6397cc..d4f6aed1a6 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/sidebar.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/(workspace)/sidebar.tsx
@@ -27,26 +27,18 @@ export const WORKSPACE_SETTINGS_ICONS: Record<keyof typeof WORKSPACE_SETTINGS, L
   webhooks: Webhook,
 };
 
-export const WorkspaceActionIcons = ({
-  type,
-  size,
-  className,
-}: {
-  type: string;
-  size?: number;
-  className?: string;
-}) => {
+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 const WorkspaceSettingsSidebar = (props: TWorkspaceSettingsSidebarProps) => {
+export function WorkspaceSettingsSidebar(props: TWorkspaceSettingsSidebarProps) {
   const { isMobile = false } = props;
   // router
   const pathname = usePathname();
@@ -77,4 +69,4 @@ export const WorkspaceSettingsSidebar = (props: TWorkspaceSettingsSidebarProps)
       actionIcons={WorkspaceActionIcons}
     />
   );
-};
+}
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 f8801d1ca2..c9135696d5 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,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
@@ -89,7 +87,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>
       </>
     );
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 eff5ce4d44..93ae93967e 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,5 +1,3 @@
-"use client";
-
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/activity/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/activity/page.tsx
index e76dcb1aab..00b795dfdc 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/activity/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/activity/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
@@ -15,6 +13,7 @@ import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-stat
 import { ProfileActivityListPage } from "@/components/profile/activity/profile-activity-list";
 // hooks
 import { SettingsHeading } from "@/components/settings/heading";
+import { ChevronDown } from "lucide-react";
 
 const PER_PAGE = 100;
 
@@ -65,8 +64,8 @@ function ProfileActivityPage() {
           title={""}
           description={""}
           assetPath={resolvedPath}
-          className="w-full !p-0 justify-center mx-auto min-h-fit"
-          size="md"
+          className="w-full p-0! justify-center mx-auto min-h-fit"
+          size="base"
         />
       </div>
     );
@@ -81,8 +80,8 @@ function ProfileActivityPage() {
       />
       <div className="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="flex w-full items-center justify-center mt-4">
+          <Button variant="ghost" onClick={handleLoadMore} appendIcon={<ChevronDown />}>
             {t("load_more")}
           </Button>
         </div>
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
index 7b0663da9d..6553d52a1c 100644
--- 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
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/layout.tsx
index 0678b884a5..25d737300b 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/layout.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 import { Outlet } from "react-router";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/notifications/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/notifications/page.tsx
index 5b0d43ab22..c4d05e1f88 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/notifications/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/notifications/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import useSWR from "swr";
 // plane imports
 import { useTranslation } from "@plane/i18n";
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/page.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/page.tsx
index 0fef26e1a7..7e52686778 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/page.tsx
@@ -1,9 +1,6 @@
-"use client";
-
 import { observer } from "mobx-react";
 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";
 // hooks
@@ -14,13 +11,7 @@ function ProfileSettingsPage() {
   // 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>
-    );
-
+  if (!currentUser) return <></>;
   return (
     <>
       <PageHead title={`${t("profile.label")} - ${t("general_settings")}`} />
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
index 4ea14f70b4..f3098f675a 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/preferences/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/preferences/page.tsx
@@ -1,10 +1,7 @@
-"use client";
-
 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 { PreferencesList } from "@/components/preferences/list";
 import { LanguageTimezone } from "@/components/profile/preferences/language-timezone";
@@ -13,37 +10,30 @@ import { SettingsHeading } from "@/components/settings/heading";
 // hooks
 import { useUserProfile } from "@/hooks/store/user";
 
-function ProfileAppearancePage() {
+const ProfileAppearancePage = observer(() => {
   const { t } = useTranslation();
   // hooks
   const { data: userProfile } = useUserProfile();
 
+  if (!userProfile) return <></>;
   return (
     <>
       <PageHead title={`${t("profile.label")} - ${t("preferences")}`} />
-      {userProfile ? (
-        <>
-          <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>
-        </>
-      ) : (
-        <div className="grid h-full w-full place-items-center px-4 sm:px-0">
-          <LogoSpinner />
+      <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);
+export default 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
index fad026ddae..e68070da13 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
@@ -129,7 +127,7 @@ function SecurityPage() {
         <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>
+              <h4 className="text-13">{t("auth.common.password.current_password.label")}</h4>
               <div className="relative flex items-center rounded-md">
                 <Controller
                   control={control}
@@ -151,21 +149,21 @@ function SecurityPage() {
                 />
                 {showPassword?.oldPassword ? (
                   <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("oldPassword")}
                   />
                 ) : (
                   <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("oldPassword")}
                   />
                 )}
               </div>
-              {errors.old_password && <span className="text-xs text-red-500">{errors.old_password.message}</span>}
+              {errors.old_password && <span className="text-11 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>
+            <h4 className="text-13">{t("auth.common.password.new_password.label")}</h4>
             <div className="relative flex items-center rounded-md">
               <Controller
                 control={control}
@@ -189,23 +187,23 @@ function SecurityPage() {
               />
               {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}
             {isNewPasswordSameAsOldPassword && !isPasswordInputFocused && (
-              <span className="text-xs text-red-500">{t("new_password_must_be_different_from_old_password")}</span>
+              <span className="text-11 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>
+            <h4 className="text-13">{t("auth.common.password.confirm_password.label")}</h4>
             <div className="relative flex items-center rounded-md">
               <Controller
                 control={control}
@@ -229,18 +227,18 @@ function SecurityPage() {
               />
               {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-red-500">{t("auth.common.password.errors.match")}</span>
             )}
           </div>
         </div>
diff --git a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/sidebar.tsx b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/sidebar.tsx
index 0dd30509ce..86930f734f 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/sidebar.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/sidebar.tsx
@@ -19,18 +19,18 @@ const ICONS = {
   connections: Blocks,
 };
 
-export const ProjectActionIcons = ({ type, size, className }: { type: string; size?: number; className?: string }) => {
+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((props: TProfileSidebarProps) => {
+export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSidebarProps) {
   const { isMobile = false } = props;
   // router
   const pathname = usePathname();
@@ -50,7 +50,7 @@ export const ProfileSidebar = observer((props: TProfileSidebarProps) => {
           <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" />
+                <CircleUserRound className="h-full w-full text-secondary" />
               </div>
             ) : (
               <div className="relative h-8 w-8 overflow-hidden">
@@ -63,8 +63,8 @@ export const ProfileSidebar = observer((props: TProfileSidebarProps) => {
             )}
           </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 className="text-14 font-medium text-secondary truncate">{currentUser?.display_name}</div>
+            <div className="text-13 text-tertiary truncate">{currentUser?.email}</div>
           </div>
         </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 8e62377f3e..cd84d7c2f3 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,5 +1,3 @@
-"use client";
-
 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 2e2664ff45..3607757553 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
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 bbf1cd313a..2d446ae7ca 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // components
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
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
index dbcb2c5aa7..6db9c4bd09 100644
--- 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
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // components
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
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 acfff800d9..812b583023 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,5 +1,3 @@
-"use client";
-
 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";
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
new file mode 100644
index 0000000000..8e8c09064d
--- /dev/null
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/layout.tsx
@@ -0,0 +1,33 @@
+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";
+// types
+import type { Route } from "./+types/layout";
+
+function ProjectDetailSettingsLayout({ params }: Route.ComponentProps) {
+  const { workspaceSlug, projectId } = params;
+  // router
+  const pathname = usePathname();
+
+  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 />
+          </div>
+        </ProjectAuthWrapper>
+      </div>
+    </>
+  );
+}
+
+export default observer(ProjectDetailSettingsLayout);
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 d12bc65a2f..3bdf8e9991 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
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 1d67c80afa..ea0486fa37 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,8 +1,5 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
-import useSWR from "swr";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 // components
@@ -26,12 +23,8 @@ function ProjectSettingsPage({ params }: Route.ComponentProps) {
   // router
   const { workspaceSlug, projectId } = params;
   // store hooks
-  const { currentProjectDetails, fetchProjectDetails } = useProject();
+  const { currentProjectDetails } = useProject();
   const { allowPermissions } = useUserPermissions();
-
-  // api call to fetch project details
-  // TODO: removed this API if not necessary
-  const { isLoading } = useSWR(`PROJECT_DETAILS_${projectId}`, () => fetchProjectDetails(workspaceSlug, projectId));
   // derived values
   const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.PROJECT, workspaceSlug, projectId);
 
@@ -58,7 +51,7 @@ function ProjectSettingsPage({ params }: Route.ComponentProps) {
       )}
 
       <div className={`w-full ${isAdmin ? "" : "opacity-60"}`}>
-        {currentProjectDetails && !isLoading ? (
+        {currentProjectDetails ? (
           <ProjectDetailsForm
             project={currentProjectDetails}
             workspaceSlug={workspaceSlug}
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 c85c643ddd..31d8ccbc1a 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
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 2adbe99895..977d9ebc9a 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/layout.tsx
@@ -1,23 +1,17 @@
-"use client";
-
 import { useEffect } from "react";
 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";
+// hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useAppRouter } from "@/hooks/use-app-router";
-import { ProjectAuthWrapper } from "@/plane-web/layouts/project-wrapper";
+// types
 import type { Route } from "./+types/layout";
 
 function ProjectSettingsLayout({ params }: Route.ComponentProps) {
+  const { workspaceSlug, projectId } = params;
   // router
   const router = useAppRouter();
-  const pathname = usePathname();
-  const { workspaceSlug, projectId } = params;
+  // store hooks
   const { joinedProjectIds } = useProject();
 
   useEffect(() => {
@@ -27,19 +21,7 @@ function ProjectSettingsLayout({ params }: Route.ComponentProps) {
     }
   }, [joinedProjectIds, router, workspaceSlug, projectId]);
 
-  return (
-    <>
-      <SettingsMobileNav hamburgerContent={ProjectSettingsSidebar} activePath={getProjectActivePath(pathname) || ""} />
-      <ProjectAuthWrapper workspaceSlug={workspaceSlug} projectId={projectId}>
-        <div className="relative flex h-full w-full">
-          <div className="hidden md:block">{projectId && <ProjectSettingsSidebar />}</div>
-          <div className="w-full h-full overflow-y-scroll md:pt-page-y">
-            <Outlet />
-          </div>
-        </div>
-      </ProjectAuthWrapper>
-    </>
-  );
+  return <Outlet />;
 }
 
 export default observer(ProjectSettingsLayout);
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 a497d9ad45..522e2ff5fb 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx
@@ -1,34 +1,35 @@
-"use client";
+import { observer } from "mobx-react";
 import Link from "next/link";
 import { useTheme } from "next-themes";
+// plane imports
 import { PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { Button, getButtonStyling } from "@plane/propel/button";
 import { cn } from "@plane/utils";
+// assets
+import ProjectDarkEmptyState from "@/app/assets/empty-state/project-settings/no-projects-dark.png?url";
+import ProjectLightEmptyState from "@/app/assets/empty-state/project-settings/no-projects-light.png?url";
+// hooks
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 
-const ProjectSettingsPage = () => {
+function ProjectSettingsPage() {
   // store hooks
   const { resolvedTheme } = useTheme();
   const { toggleCreateProjectModal } = useCommandPalette();
   // derived values
-  const resolvedPath =
-    resolvedTheme === "dark"
-      ? "/empty-state/project-settings/no-projects-dark.png"
-      : "/empty-state/project-settings/no-projects-light.png";
+  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">
-      <img src={resolvedPath} className="w-full h-full object-contain" 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">
+      <img src={resolvedPath} alt="No projects yet" />
+      <div className="text-16 font-semibold text-tertiary">No projects yet</div>
+      <div className="text-13 text-tertiary text-center">
         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}
         >
@@ -37,6 +38,6 @@ const ProjectSettingsPage = () => {
       </div>
     </div>
   );
-};
+}
 
-export default ProjectSettingsPage;
+export default observer(ProjectSettingsPage);
diff --git a/apps/web/app/(all)/[workspaceSlug]/layout.tsx b/apps/web/app/(all)/[workspaceSlug]/layout.tsx
index 945c0724b0..0e489644d4 100644
--- a/apps/web/app/(all)/[workspaceSlug]/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/layout.tsx
@@ -1,20 +1,18 @@
-"use client";
-
 import { Outlet } from "react-router";
-import { AppRailProvider } from "@/hooks/context/app-rail-context";
 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";
 
 export default function WorkspaceLayout() {
   return (
     <AuthenticationWrapper>
       <WorkspaceAuthWrapper>
-        <AppRailProvider>
+        <AppRailVisibilityProvider>
           <WorkspaceContentWrapper>
             <Outlet />
           </WorkspaceContentWrapper>
-        </AppRailProvider>
+        </AppRailVisibilityProvider>
       </WorkspaceAuthWrapper>
     </AuthenticationWrapper>
   );
diff --git a/apps/web/app/(all)/accounts/forgot-password/page.tsx b/apps/web/app/(all)/accounts/forgot-password/page.tsx
index 7c121e25fc..299897364e 100644
--- a/apps/web/app/(all)/accounts/forgot-password/page.tsx
+++ b/apps/web/app/(all)/accounts/forgot-password/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // components
 import { ForgotPasswordForm } from "@/components/account/auth-forms/forgot-password";
diff --git a/apps/web/app/(all)/accounts/reset-password/page.tsx b/apps/web/app/(all)/accounts/reset-password/page.tsx
index 93cc0f8307..b37fb9aed6 100644
--- a/apps/web/app/(all)/accounts/reset-password/page.tsx
+++ b/apps/web/app/(all)/accounts/reset-password/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 // plane imports
 import { EAuthModes } from "@plane/constants";
 // components
@@ -11,15 +9,17 @@ import { EPageTypes } from "@/helpers/authentication.helper";
 import DefaultLayout from "@/layouts/default-layout";
 import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";
 
-const ResetPasswordPage = () => (
-  <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">
-        <AuthHeader type={EAuthModes.SIGN_IN} />
-        <ResetPasswordForm />
-      </div>
-    </AuthenticationWrapper>
-  </DefaultLayout>
-);
+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">
+          <AuthHeader type={EAuthModes.SIGN_IN} />
+          <ResetPasswordForm />
+        </div>
+      </AuthenticationWrapper>
+    </DefaultLayout>
+  );
+}
 
 export default ResetPasswordPage;
diff --git a/apps/web/app/(all)/accounts/set-password/page.tsx b/apps/web/app/(all)/accounts/set-password/page.tsx
index 3f9a07bf15..4e3a3bfa01 100644
--- a/apps/web/app/(all)/accounts/set-password/page.tsx
+++ b/apps/web/app/(all)/accounts/set-password/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 // plane imports
 import { EAuthModes } from "@plane/constants";
 // components
@@ -11,15 +9,17 @@ import { EPageTypes } from "@/helpers/authentication.helper";
 import DefaultLayout from "@/layouts/default-layout";
 import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";
 
-const SetPasswordPage = () => (
-  <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">
-        <AuthHeader type={EAuthModes.SIGN_IN} />
-        <ResetPasswordForm />
-      </div>
-    </AuthenticationWrapper>
-  </DefaultLayout>
-);
+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">
+          <AuthHeader type={EAuthModes.SIGN_IN} />
+          <ResetPasswordForm />
+        </div>
+      </AuthenticationWrapper>
+    </DefaultLayout>
+  );
+}
 
 export default SetPasswordPage;
diff --git a/apps/web/app/(all)/create-workspace/page.tsx b/apps/web/app/(all)/create-workspace/page.tsx
index 25554b4e6f..0228efa2dc 100644
--- a/apps/web/app/(all)/create-workspace/page.tsx
+++ b/apps/web/app/(all)/create-workspace/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -20,7 +18,7 @@ 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();
@@ -54,45 +52,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 sm:flex-row sm:gap-y-0 bg-surface-1">
         <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 left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-subtle 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" />
           <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 left-5 top-1/2 grid -translate-y-1/2 place-items-center 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"
             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 right-4 top-1/4 -translate-y-1/2 text-13 text-primary sm:fixed sm:right-16 sm:top-12 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="w-4/5 h-full flex flex-col items-center justify-center text-16 font-medium gap-1">
               <img
                 src={WorkspaceCreationDisabled}
                 className="w-full h-full object-contain mb-4"
                 alt="Workspace creation disabled"
               />
-              <div className="text-lg font-medium text-center">
+              <div className="text-16 font-medium text-center">
                 {t("workspace_creation.errors.creation_disabled.title")}
               </div>
-              <p className="text-sm text-custom-text-300 break-words text-center">
+              <p className="text-13 text-tertiary break-words text-center">
                 {t("workspace_creation.errors.creation_disabled.description")}
               </p>
               <div className="flex gap-4 mt-6">
                 <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}
@@ -106,6 +104,6 @@ function CreateWorkspacePage() {
       </div>
     </AuthenticationWrapper>
   );
-}
+});
 
-export default observer(CreateWorkspacePage);
+export default CreateWorkspacePage;
diff --git a/apps/web/app/(all)/invitations/page.tsx b/apps/web/app/(all)/invitations/page.tsx
index b67bc9b61e..f16a8a24e6 100644
--- a/apps/web/app/(all)/invitations/page.tsx
+++ b/apps/web/app/(all)/invitations/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -130,14 +128,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 left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-subtle 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" />
           <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 left-5 top-1/2 grid -translate-y-1/2 place-items-center 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"
           >
-            <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 right-4 top-1/4 -translate-y-1/2 text-13 text-primary sm:fixed sm:right-16 sm:top-12 sm:translate-y-0 sm:py-5">
             {currentUser?.email}
           </div>
         </div>
@@ -145,8 +143,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);
@@ -154,10 +152,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")}
                       >
@@ -169,12 +165,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>
@@ -185,7 +179,7 @@ function UserInvitationsPage() {
                   <Button
                     variant="primary"
                     type="submit"
-                    size="md"
+                    size="lg"
                     onClick={submitInvitations}
                     disabled={isJoiningWorkspaces || invitationsRespond.length === 0}
                     loading={isJoiningWorkspaces}
@@ -195,7 +189,7 @@ function UserInvitationsPage() {
                   </Button>
                   <Link href={`/${redirectWorkspaceSlug}`}>
                     <span>
-                      <Button variant="neutral-primary" size="md">
+                      <Button variant="secondary" size="lg">
                         {t("go_home")}
                       </Button>
                     </span>
diff --git a/apps/web/app/(all)/layout.preload.tsx b/apps/web/app/(all)/layout.preload.tsx
index 266df5a1cc..af2368fa8c 100644
--- a/apps/web/app/(all)/layout.preload.tsx
+++ b/apps/web/app/(all)/layout.preload.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 // TODO: Check if we need this
 // https://nextjs.org/docs/app/api-reference/functions/generate-metadata#link-relpreload
 // export const usePreloadResources = () => {
@@ -20,6 +18,9 @@
 //   }, []);
 // };
 
-export const PreloadResources = () =>
-  // usePreloadResources();
-  null;
+export function PreloadResources() {
+  return (
+    // usePreloadResources();
+    null
+  );
+}
diff --git a/apps/web/app/(all)/layout.tsx b/apps/web/app/(all)/layout.tsx
index e87557cb7d..986e93e4a5 100644
--- a/apps/web/app/(all)/layout.tsx
+++ b/apps/web/app/(all)/layout.tsx
@@ -1,12 +1,6 @@
 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/page.tsx b/apps/web/app/(all)/onboarding/page.tsx
index bbcdc5585a..9dc169495c 100644
--- a/apps/web/app/(all)/onboarding/page.tsx
+++ b/apps/web/app/(all)/onboarding/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import useSWR from "swr";
 
@@ -42,9 +40,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="flex relative size-full overflow-hidden bg-canvas 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 flex-col h-full w-full overflow-hidden rounded-lg bg-surface-1 shadow-md border border-subtle">
             {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
index 39c4c479cb..e3956258ff 100644
--- a/apps/web/app/(all)/profile/activity/page.tsx
+++ b/apps/web/app/(all)/profile/activity/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
@@ -71,8 +69,8 @@ function ProfileActivityPage() {
         <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}>
+          <div className="flex w-full items-center justify-center text-11">
+            <Button variant="secondary" onClick={handleLoadMore}>
               {t("load_more")}
             </Button>
           </div>
diff --git a/apps/web/app/(all)/profile/appearance/page.tsx b/apps/web/app/(all)/profile/appearance/page.tsx
index e9c1ee96e1..d0d05588d8 100644
--- a/apps/web/app/(all)/profile/appearance/page.tsx
+++ b/apps/web/app/(all)/profile/appearance/page.tsx
@@ -1,6 +1,4 @@
-"use client";
-
-import { useEffect, useState } from "react";
+import { useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
 // plane imports
@@ -8,9 +6,8 @@ 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 { applyCustomTheme } from "@plane/utils";
 // 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";
@@ -21,46 +18,59 @@ import { ProfileSettingContentWrapper } from "@/components/profile/profile-setti
 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
+  // store 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);
-      }
-    }
+  // 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 = (themeOption: I_THEME_OPTION) => {
-    applyThemeChange({ theme: themeOption.value });
+  const handleThemeChange = useCallback(
+    async (themeOption: I_THEME_OPTION) => {
+      setTheme(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",
-      },
-    });
-  };
+      // 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 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();
-  };
+      const updateCurrentUserThemePromise = updateUserTheme({ theme: themeOption.value });
+      setPromiseToast(updateCurrentUserThemePromise, {
+        loading: "Updating theme...",
+        success: {
+          title: "Theme updated",
+          message: () => "Reloading to apply changes...",
+        },
+        error: {
+          title: "Error!",
+          message: () => "Failed to update theme. Please try again.",
+        },
+      });
+      // Wait for the promise to resolve, then reload after showing toast
+      try {
+        await updateCurrentUserThemePromise;
+        window.location.reload();
+      } catch (error) {
+        // Error toast already shown by setPromiseToast
+        console.error("Error updating theme:", error);
+      }
+    },
+    [setTheme, updateUserTheme, userProfile]
+  );
 
   return (
     <>
@@ -70,14 +80,14 @@ function ProfileAppearancePage() {
           <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>
+              <h4 className="text-16 font-semibold text-primary">{t("theme")}</h4>
+              <p className="text-13 text-secondary">{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} />}
+          {userProfile?.theme?.theme === "custom" && <CustomThemeSelector />}
         </ProfileSettingContentWrapper>
       ) : (
         <div className="grid h-full w-full place-items-center px-4 sm:px-0">
diff --git a/apps/web/app/(all)/profile/layout.tsx b/apps/web/app/(all)/profile/layout.tsx
index e86f606810..f5aebbfbbb 100644
--- a/apps/web/app/(all)/profile/layout.tsx
+++ b/apps/web/app/(all)/profile/layout.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 // components
 import { Outlet } from "react-router";
 // wrappers
@@ -13,9 +11,9 @@ export default function ProfileSettingsLayout() {
     <>
       <ProjectsAppPowerKProvider />
       <AuthenticationWrapper>
-        <div className="relative flex h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
+        <div className="relative flex h-full w-full overflow-hidden rounded-lg border border-subtle">
           <ProfileLayoutSidebar />
-          <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">
             <div className="h-full w-full overflow-hidden">
               <Outlet />
             </div>
diff --git a/apps/web/app/(all)/profile/notifications/page.tsx b/apps/web/app/(all)/profile/notifications/page.tsx
index 9f7bb2203d..725117e5c2 100644
--- a/apps/web/app/(all)/profile/notifications/page.tsx
+++ b/apps/web/app/(all)/profile/notifications/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import useSWR from "swr";
 // components
 import { useTranslation } from "@plane/i18n";
diff --git a/apps/web/app/(all)/profile/page.tsx b/apps/web/app/(all)/profile/page.tsx
index b89759fd49..9b6f8f083c 100644
--- a/apps/web/app/(all)/profile/page.tsx
+++ b/apps/web/app/(all)/profile/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
diff --git a/apps/web/app/(all)/profile/security/page.tsx b/apps/web/app/(all)/profile/security/page.tsx
index a0ee1f4726..99f19bce88 100644
--- a/apps/web/app/(all)/profile/security/page.tsx
+++ b/apps/web/app/(all)/profile/security/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
@@ -43,7 +41,7 @@ const defaultShowPassword = {
   confirmPassword: false,
 };
 
-const SecurityPage = () => {
+function SecurityPage() {
   // store
   const { data: currentUser, changePassword } = useUser();
   // states
@@ -127,7 +125,7 @@ const SecurityPage = () => {
           <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>
+                <h4 className="text-13">{t("auth.common.password.current_password.label")}</h4>
                 <div className="relative flex items-center rounded-md">
                   <Controller
                     control={control}
@@ -149,21 +147,21 @@ const SecurityPage = () => {
                   />
                   {showPassword?.oldPassword ? (
                     <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("oldPassword")}
                     />
                   ) : (
                     <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("oldPassword")}
                     />
                   )}
                 </div>
-                {errors.old_password && <span className="text-xs text-red-500">{errors.old_password.message}</span>}
+                {errors.old_password && <span className="text-11 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>
+              <h4 className="text-13">{t("auth.common.password.new_password.label")}</h4>
               <div className="relative flex items-center rounded-md">
                 <Controller
                   control={control}
@@ -187,23 +185,23 @@ const SecurityPage = () => {
                 />
                 {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}
               {isNewPasswordSameAsOldPassword && !isPasswordInputFocused && (
-                <span className="text-xs text-red-500">{t("new_password_must_be_different_from_old_password")}</span>
+                <span className="text-11 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>
+              <h4 className="text-13">{t("auth.common.password.confirm_password.label")}</h4>
               <div className="relative flex items-center rounded-md">
                 <Controller
                   control={control}
@@ -227,18 +225,18 @@ const SecurityPage = () => {
                 />
                 {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-red-500">{t("auth.common.password.errors.match")}</span>
               )}
             </div>
           </div>
@@ -254,6 +252,6 @@ const SecurityPage = () => {
       </ProfileSettingContentWrapper>
     </>
   );
-};
+}
 
 export default observer(SecurityPage);
diff --git a/apps/web/app/(all)/profile/sidebar.tsx b/apps/web/app/(all)/profile/sidebar.tsx
index 4619b186fa..daaad3d2ee 100644
--- a/apps/web/app/(all)/profile/sidebar.tsx
+++ b/apps/web/app/(all)/profile/sidebar.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -37,7 +35,7 @@ const WORKSPACE_ACTION_LINKS = [
   },
 ];
 
-const ProjectActionIcons = ({ type, size, className = "" }: { type: string; size?: number; className?: string }) => {
+function ProjectActionIcons({ type, size, className = "" }: { type: string; size?: number; className?: string }) {
   const icons = {
     profile: CircleUser,
     security: KeyRound,
@@ -51,8 +49,9 @@ const ProjectActionIcons = ({ type, size, className = "" }: { type: string; size
   const Icon = icons[type as keyof typeof icons];
   if (!Icon) return null;
   return <Icon size={size} className={className} />;
-};
-export const ProfileLayoutSidebar = observer(() => {
+}
+
+export const ProfileLayoutSidebar = observer(function ProfileLayoutSidebar() {
   // states
   const [isSigningOut, setIsSigningOut] = useState(false);
   // router
@@ -117,7 +116,7 @@ export const ProfileLayoutSidebar = observer(() => {
 
   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 
+      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 
         ${sidebarCollapsed ? "-ml-[250px]" : ""}
         sm:${sidebarCollapsed ? "-ml-[250px]" : ""}
         md:ml-0 ${sidebarCollapsed ? "w-[70px]" : "w-[250px]"}
@@ -134,13 +133,13 @@ export const ProfileLayoutSidebar = observer(() => {
               <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>
+              <h4 className="truncate text-16 font-semibold text-secondary">{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>
+            <h6 className="rounded-sm px-6 text-13 font-semibold text-placeholder">{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) => {
@@ -163,7 +162,7 @@ export const ProfileLayoutSidebar = observer(() => {
                       <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>}
+                        {!sidebarCollapsed && <p className="text-13 leading-5 font-medium">{t(link.i18n_label)}</p>}
                       </div>
                     </SidebarNavItem>
                   </Tooltip>
@@ -174,7 +173,7 @@ export const ProfileLayoutSidebar = observer(() => {
         </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>
+            <h6 className="rounded-sm px-6 text-13 font-semibold text-placeholder">{t("workspaces")}</h6>
           )}
           {workspacesList && workspacesList.length > 0 && (
             <div
@@ -187,34 +186,32 @@ export const ProfileLayoutSidebar = observer(() => {
                 <Link
                   key={workspace.id}
                   href={`/${workspace.slug}`}
-                  className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-sm font-medium ${
+                  className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-13 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 ${
+                    className={`flex w-full flex-grow items-center gap-x-2 truncate rounded-md px-3 py-1 hover:bg-layer-1 ${
                       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"
+                      className={`relative flex h-6 w-6 flex-shrink-0 items-center  justify-center p-2 text-11 uppercase ${
+                        !workspace?.logo_url && "rounded-sm 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 left-0 top-0 h-full w-full rounded-sm object-cover"
                           alt="Workspace Logo"
                         />
                       ) : (
                         (workspace?.name?.charAt(0) ?? "...")
                       )}
                     </span>
-                    {!sidebarCollapsed && (
-                      <p className="truncate text-sm text-custom-sidebar-text-200">{workspace.name}</p>
-                    )}
+                    {!sidebarCollapsed && <p className="truncate text-13 text-secondary">{workspace.name}</p>}
                   </span>
                 </Link>
               ))}
@@ -231,7 +228,7 @@ export const ProfileLayoutSidebar = observer(() => {
                   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 ${
+                    className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-13 font-medium text-secondary outline-none hover:bg-layer-1 focus:bg-layer-1 ${
                       sidebarCollapsed ? "justify-center" : ""
                     }`}
                   >
@@ -252,7 +249,7 @@ export const ProfileLayoutSidebar = observer(() => {
             <button
               type="button"
               onClick={handleSignOut}
-              className="flex items-center justify-center gap-2 text-sm font-medium text-red-500"
+              className="flex items-center justify-center gap-2 text-13 font-medium text-red-500"
               disabled={isSigningOut}
             >
               <LogOut className="h-3.5 w-3.5" />
@@ -260,14 +257,14 @@ export const ProfileLayoutSidebar = observer(() => {
             </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"
+              className="grid place-items-center rounded-md p-1.5 text-secondary outline-none hover:bg-surface-2 hover:text-primary 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 ${
+              className={`ml-auto hidden place-items-center rounded-md p-1.5 text-secondary outline-none hover:bg-surface-2 hover:text-primary md:grid ${
                 sidebarCollapsed ? "w-full" : ""
               }`}
               onClick={() => toggleSidebar()}
diff --git a/apps/web/app/(all)/sign-up/page.tsx b/apps/web/app/(all)/sign-up/page.tsx
index 18deab2d83..b3563ae7d7 100644
--- a/apps/web/app/(all)/sign-up/page.tsx
+++ b/apps/web/app/(all)/sign-up/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 // components
 import { AuthBase } from "@/components/auth-screens/auth-base";
 // helpers
@@ -8,12 +6,14 @@ import { EAuthModes, EPageTypes } from "@/helpers/authentication.helper";
 import DefaultLayout from "@/layouts/default-layout";
 import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";
 
-const SignUpPage = () => (
-  <DefaultLayout>
-    <AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
-      <AuthBase authType={EAuthModes.SIGN_UP} />
-    </AuthenticationWrapper>
-  </DefaultLayout>
-);
+function SignUpPage() {
+  return (
+    <DefaultLayout>
+      <AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
+        <AuthBase authType={EAuthModes.SIGN_UP} />
+      </AuthenticationWrapper>
+    </DefaultLayout>
+  );
+}
 
 export default SignUpPage;
diff --git a/apps/web/app/(all)/workspace-invitations/page.tsx b/apps/web/app/(all)/workspace-invitations/page.tsx
index 67d9b6c5a2..33323d3344 100644
--- a/apps/web/app/(all)/workspace-invitations/page.tsx
+++ b/apps/web/app/(all)/workspace-invitations/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
@@ -77,8 +75,8 @@ 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="flex w-full flex-col space-y-4 rounded-sm border border-subtle bg-surface-1 px-4 py-8 text-center shadow-2xl md:w-1/3">
+              <h2 className="text-18 uppercase">INVITATION NOT FOUND</h2>
             </div>
           ) : (
             <EmptySpace
diff --git a/apps/web/app/(home)/page.tsx b/apps/web/app/(home)/page.tsx
index 20a184ffc4..657ee50179 100644
--- a/apps/web/app/(home)/page.tsx
+++ b/apps/web/app/(home)/page.tsx
@@ -1,4 +1,3 @@
-"use client";
 import React from "react";
 // components
 import { AuthBase } from "@/components/auth-screens/auth-base";
@@ -9,12 +8,14 @@ import DefaultLayout from "@/layouts/default-layout";
 // wrappers
 import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";
 
-const HomePage = () => (
-  <DefaultLayout>
-    <AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
-      <AuthBase authType={EAuthModes.SIGN_IN} />
-    </AuthenticationWrapper>
-  </DefaultLayout>
-);
+function HomePage() {
+  return (
+    <DefaultLayout>
+      <AuthenticationWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
+        <AuthBase authType={EAuthModes.SIGN_IN} />
+      </AuthenticationWrapper>
+    </DefaultLayout>
+  );
+}
 
 export default HomePage;
diff --git a/apps/web/app/assets/cover-images/image_1.jpg b/apps/web/app/assets/cover-images/image_1.jpg
new file mode 100644
index 0000000000..3565e8890c
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_1.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_10.jpg b/apps/web/app/assets/cover-images/image_10.jpg
new file mode 100644
index 0000000000..cecad95d48
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_10.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_11.jpg b/apps/web/app/assets/cover-images/image_11.jpg
new file mode 100644
index 0000000000..ebe34f24de
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_11.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_12.jpg b/apps/web/app/assets/cover-images/image_12.jpg
new file mode 100644
index 0000000000..cae254d468
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_12.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_13.jpg b/apps/web/app/assets/cover-images/image_13.jpg
new file mode 100644
index 0000000000..a3f4d408bf
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_13.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_14.jpg b/apps/web/app/assets/cover-images/image_14.jpg
new file mode 100644
index 0000000000..3b3da8801e
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_14.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_15.jpg b/apps/web/app/assets/cover-images/image_15.jpg
new file mode 100644
index 0000000000..3e44b7f8d1
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_15.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_16.jpg b/apps/web/app/assets/cover-images/image_16.jpg
new file mode 100644
index 0000000000..f31335bf28
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_16.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_17.jpg b/apps/web/app/assets/cover-images/image_17.jpg
new file mode 100644
index 0000000000..d2a50342d2
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_17.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_18.jpg b/apps/web/app/assets/cover-images/image_18.jpg
new file mode 100644
index 0000000000..10cf37c307
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_18.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_19.jpg b/apps/web/app/assets/cover-images/image_19.jpg
new file mode 100644
index 0000000000..dca5619435
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_19.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_2.jpg b/apps/web/app/assets/cover-images/image_2.jpg
new file mode 100644
index 0000000000..a1adad5263
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_2.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_20.jpg b/apps/web/app/assets/cover-images/image_20.jpg
new file mode 100644
index 0000000000..a8daf9772d
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_20.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_21.jpg b/apps/web/app/assets/cover-images/image_21.jpg
new file mode 100644
index 0000000000..57c094ebd7
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_21.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_22.jpg b/apps/web/app/assets/cover-images/image_22.jpg
new file mode 100644
index 0000000000..9efc564b9b
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_22.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_23.jpg b/apps/web/app/assets/cover-images/image_23.jpg
new file mode 100644
index 0000000000..fec33d99d7
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_23.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_24.jpg b/apps/web/app/assets/cover-images/image_24.jpg
new file mode 100644
index 0000000000..54c74a6920
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_24.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_25.jpg b/apps/web/app/assets/cover-images/image_25.jpg
new file mode 100644
index 0000000000..66841c06bc
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_25.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_26.jpg b/apps/web/app/assets/cover-images/image_26.jpg
new file mode 100644
index 0000000000..d0c2766024
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_26.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_27.jpg b/apps/web/app/assets/cover-images/image_27.jpg
new file mode 100644
index 0000000000..84abce2ef3
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_27.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_28.jpg b/apps/web/app/assets/cover-images/image_28.jpg
new file mode 100644
index 0000000000..0ce78e34f9
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_28.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_29.jpg b/apps/web/app/assets/cover-images/image_29.jpg
new file mode 100644
index 0000000000..9df7aa0e0f
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_29.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_3.jpg b/apps/web/app/assets/cover-images/image_3.jpg
new file mode 100644
index 0000000000..451849288a
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_3.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_4.jpg b/apps/web/app/assets/cover-images/image_4.jpg
new file mode 100644
index 0000000000..04d1109314
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_4.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_5.jpg b/apps/web/app/assets/cover-images/image_5.jpg
new file mode 100644
index 0000000000..6dcdb25a3c
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_5.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_6.jpg b/apps/web/app/assets/cover-images/image_6.jpg
new file mode 100644
index 0000000000..f1cb9bf018
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_6.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_7.jpg b/apps/web/app/assets/cover-images/image_7.jpg
new file mode 100644
index 0000000000..c70602ca9c
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_7.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_8.jpg b/apps/web/app/assets/cover-images/image_8.jpg
new file mode 100644
index 0000000000..508bd55785
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_8.jpg differ
diff --git a/apps/web/app/assets/cover-images/image_9.jpg b/apps/web/app/assets/cover-images/image_9.jpg
new file mode 100644
index 0000000000..d5267f9616
Binary files /dev/null and b/apps/web/app/assets/cover-images/image_9.jpg differ
diff --git a/apps/web/app/assets/scribble/scribble-black.svg b/apps/web/app/assets/scribble/scribble-black.svg
new file mode 100644
index 0000000000..556b9565e9
--- /dev/null
+++ b/apps/web/app/assets/scribble/scribble-black.svg
@@ -0,0 +1,10 @@
+<svg width="51" height="12" viewBox="0 0 51 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4942_85899)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3456 0.0493489C15.205 0.0895139 14.7431 0.119635 14.3113 0.109594C13.8796 0.0995527 13.5181 0.119635 13.4879 0.1598C13.4679 0.199965 13.3072 0.189926 13.1265 0.149761C12.9558 0.0995552 12.765 0.0895213 12.7047 0.119645C12.6445 0.15981 12.4637 0.179893 12.293 0.169851C12.1324 0.149769 11.8412 0.189926 11.6504 0.250174C11.4094 0.310422 11.2688 0.310424 11.1785 0.240135C11.0881 0.169846 10.9877 0.169844 10.827 0.250174C10.6563 0.350587 10.6262 0.340548 10.6864 0.240135C10.7467 0.149764 10.6764 0.129684 10.3852 0.17989C10.1743 0.210014 9.96346 0.290337 9.93334 0.360625C9.89317 0.420873 9.83292 0.430921 9.8028 0.380715C9.76264 0.320468 8.37694 0.280298 8.37694 0.350587C8.37694 0.38071 7.97529 0.46104 7.8548 0.450999C7.44311 0.420875 7.19208 0.430919 6.50927 0.491167C5.77626 0.561455 5.36457 0.6217 5.36457 0.651824C5.36457 0.671907 4.56127 0.762283 4.15962 0.782365C3.99896 0.792407 3.79813 0.842613 3.73788 0.882778C3.6676 0.932984 3.56718 0.932979 3.50694 0.902855C3.45673 0.872732 3.21574 0.892812 2.98479 0.963101C2.7438 1.02335 2.4526 1.07356 2.32207 1.07356C2.20157 1.07356 2.07104 1.11372 2.04091 1.16393C2.01079 1.21413 1.83005 1.2543 1.63926 1.2543C1.44848 1.2543 1.29786 1.29447 1.29786 1.34467C1.29786 1.40492 1.21753 1.425 1.10707 1.40492C0.996621 1.38484 0.825919 1.4752 0.705424 1.61578C0.474476 1.87685 0.434311 2.0576 0.605012 2.0576C0.655218 2.0576 0.685342 2.01743 0.655218 1.96723C0.564847 1.83669 0.795797 1.77645 1.22757 1.8367C1.43844 1.85678 1.5991 1.9371 1.5991 2.00739C1.5991 2.08772 1.74972 2.12789 2.04091 2.11784C2.47269 2.1078 2.60322 1.95719 2.18149 1.95719C1.82 1.95719 2.07104 1.83669 2.50281 1.79653C2.88438 1.76641 2.90446 1.77645 2.90446 2.03752V2.30863L3.10529 1.97728C3.21574 1.79653 3.35632 1.67603 3.40652 1.70616C3.46677 1.73628 3.50694 1.69611 3.50694 1.60574C3.50694 1.51537 3.55714 1.47521 3.60735 1.50533C3.6676 1.5455 3.68768 1.61578 3.65756 1.66599C3.61739 1.71619 3.73788 1.75636 3.89854 1.75636C4.07929 1.75636 4.20982 1.70616 4.20982 1.62583C4.20982 1.5455 4.24999 1.55554 4.31024 1.65595C4.36044 1.73628 4.41065 1.75636 4.41065 1.69612C4.41065 1.63587 4.48094 1.58567 4.56127 1.58567C4.6416 1.58567 4.71189 1.62583 4.71189 1.67604C4.71189 1.72625 4.79222 1.72625 4.89263 1.67604C4.983 1.62583 5.25411 1.60575 5.4951 1.62583C5.73609 1.64592 5.99717 1.61578 6.06746 1.55554C6.16787 1.47521 6.20803 1.47521 6.23816 1.57563C6.27832 1.67604 6.35865 1.67604 6.64985 1.58567C6.97117 1.48525 7.02138 1.49529 7.02138 1.63587C7.03142 1.78649 7.04146 1.78649 7.16195 1.62583C7.24228 1.52542 7.33265 1.48525 7.36278 1.53546C7.44311 1.666 7.33265 1.95719 7.21216 1.95719C7.16195 1.95719 7.12179 1.99736 7.12179 2.03752C7.12179 2.07769 7.27241 2.09777 7.46319 2.07769C7.76443 2.03752 7.80459 2.00739 7.79455 1.7664C7.77447 1.53545 7.81463 1.50534 8.15604 1.47521C8.38698 1.45513 8.52756 1.48525 8.52756 1.55554C8.52756 1.62583 8.46731 1.65596 8.38698 1.62583C8.28657 1.58567 8.26649 1.63587 8.29661 1.78649C8.33678 1.95719 8.32674 1.97727 8.23636 1.85677C8.12591 1.69611 7.96525 1.77645 8.07571 1.94715C8.15604 2.08773 8.42715 2.08772 8.42715 1.95719C8.42715 1.89694 8.47736 1.85677 8.52756 1.85677C8.58781 1.85677 8.61793 1.91703 8.60789 1.97728C8.58781 2.04757 8.64806 2.08772 8.72839 2.06764C8.80872 2.04756 9.07983 2.01744 9.33086 1.99735C9.58189 1.96723 9.89317 1.93711 10.0338 1.92707C10.2245 1.90699 10.2747 1.85677 10.2547 1.70616C10.2346 1.58566 10.2547 1.54549 10.3049 1.61578C10.4956 1.8869 11.2387 2.0576 11.2387 1.8367C11.2387 1.74633 11.1082 1.72624 10.7668 1.75636C10.6161 1.7664 10.5358 1.7162 10.5358 1.62583C10.5358 1.53546 10.5057 1.45513 10.4655 1.42501C10.4153 1.40493 10.4555 1.40493 10.5358 1.42501C11.1182 1.58567 11.2688 1.58567 11.2086 1.42501C11.1684 1.31455 11.1885 1.28443 11.2989 1.3246C11.3692 1.35472 11.4395 1.41496 11.4395 1.46516C11.4395 1.51537 11.5701 1.55554 11.7307 1.55554C11.8914 1.55554 12.0721 1.62583 12.1424 1.70616C12.2127 1.79653 12.3332 1.84673 12.4135 1.81661C12.4838 1.78648 12.5441 1.80657 12.5441 1.84674C12.5441 1.96723 12.8754 1.91703 12.9156 1.78649C12.9357 1.73628 12.7951 1.70615 12.5842 1.71619C12.283 1.74632 12.2428 1.72624 12.3432 1.60574C12.4035 1.53545 12.5641 1.48525 12.6947 1.51537C12.8252 1.53545 12.9658 1.51537 12.9959 1.45512C13.0361 1.39488 13.1164 1.38484 13.1767 1.42501C13.2469 1.47521 13.3775 1.50533 13.4879 1.50533C13.749 1.50533 13.9498 1.82665 13.7591 1.94715C13.6687 2.0074 13.7189 2.04757 13.9298 2.07769L14.231 2.11784L13.99 1.80657C13.6988 1.41496 13.6888 1.35471 13.9599 1.35471C14.1306 1.35471 14.1607 1.40492 14.1205 1.60574C14.0904 1.81661 14.1306 1.89694 14.3615 2.00739C14.5724 2.11785 14.6427 2.1279 14.6828 2.02748C14.713 1.93711 14.7833 1.9371 14.9941 2.0576C15.215 2.16805 15.2853 2.17809 15.3456 2.06764C15.3958 1.99735 15.4661 1.94715 15.5163 1.94715C15.6669 1.96723 15.6167 1.72625 15.456 1.67604C15.3757 1.64592 15.3355 1.66599 15.3757 1.70616C15.4661 1.79653 15.2853 2.0576 15.1347 2.0576C15.0745 2.0576 15.0544 1.98731 15.0945 1.90698C15.1347 1.79653 15.0845 1.75636 14.9038 1.75636C14.5724 1.75636 14.5824 1.61578 14.9138 1.46516C15.1447 1.36475 15.1749 1.37479 15.1146 1.50533C15.0745 1.62583 15.1146 1.64591 15.3054 1.5957C15.456 1.55554 15.6267 1.58566 15.7271 1.66599C15.8476 1.7664 15.8778 1.76641 15.8175 1.67604C15.6669 1.43505 15.8978 1.56559 16.1589 1.87686C16.3597 2.11785 16.4501 2.15801 16.5104 2.0576C16.5606 1.97727 16.5505 1.94715 16.4903 1.98732C16.43 2.02748 16.3597 1.96723 16.3296 1.85677C16.2895 1.70616 16.3397 1.63587 16.5204 1.5957C16.8116 1.52542 16.9723 1.62583 16.7614 1.75636C16.6811 1.80657 16.6409 1.87686 16.671 1.90698C16.7714 1.99735 17.0626 1.84674 17.0626 1.69612C17.0626 1.52542 17.2835 1.51538 17.4442 1.67604C17.5245 1.75637 17.5647 1.75637 17.5647 1.68608C17.5647 1.63587 17.6852 1.5957 17.8458 1.61578C18.1872 1.65595 18.4885 1.56558 18.4182 1.44509C18.378 1.39488 18.4282 1.35471 18.5086 1.35471C18.609 1.35471 18.6692 1.44508 18.6692 1.56558C18.6692 1.72624 18.619 1.76641 18.4784 1.72625C18.358 1.69612 18.2575 1.73629 18.2274 1.82666C18.1471 2.03752 18.137 2.03752 18.4282 1.97728C18.619 1.94715 18.6793 1.96723 18.6291 2.04756C18.5889 2.10781 18.609 2.15801 18.6592 2.15801C18.7194 2.15801 18.7696 2.10781 18.7696 2.04756C18.7696 1.97727 18.8701 1.95719 19.0207 1.97728C19.1612 2.0074 19.3018 1.98731 19.332 1.94715C19.3621 1.89694 19.2416 1.85677 19.0809 1.85677C18.9102 1.85677 18.7696 1.80657 18.7696 1.75636C18.7696 1.69611 18.8399 1.65595 18.9203 1.65595C19.0006 1.65595 19.0709 1.59571 19.0709 1.52542C19.0809 1.44509 19.111 1.45512 19.2014 1.55554C19.3319 1.7162 20.1754 1.79653 20.1754 1.65595C20.1754 1.56558 20.7678 1.60574 20.8582 1.70616C20.8883 1.73628 20.7478 1.75636 20.5469 1.75636C20.2156 1.75636 20.1754 1.78649 20.1955 2.00739C20.2156 2.21826 20.2357 2.2283 20.3762 2.11784C20.4566 2.03751 20.6373 1.94715 20.7779 1.90698C21.0088 1.83669 21.0189 1.83669 20.8783 2.00739C20.7377 2.17809 20.7478 2.18814 20.9586 2.13793C21.0791 2.09777 21.1795 2.10781 21.1795 2.15801C21.1795 2.29859 21.5009 2.36888 21.6414 2.25842C21.7117 2.19818 21.9226 2.13793 22.1033 2.13793C22.515 2.12789 22.6456 2.0576 22.4749 1.94715C22.3644 1.87686 22.3744 1.85677 22.515 1.85677C22.6154 1.85677 22.6757 1.81661 22.6456 1.7664C22.6154 1.71619 22.7359 1.65595 22.9066 1.61578C23.1075 1.57562 23.248 1.5957 23.2982 1.66599C23.3384 1.73628 23.4388 1.75637 23.5292 1.72625C23.6196 1.68608 23.6899 1.70615 23.6899 1.7664C23.6899 1.82665 23.7601 1.84673 23.8405 1.81661C23.9208 1.78648 24.0614 1.72624 24.1618 1.68608C24.2622 1.64591 24.3024 1.666 24.2622 1.72625C24.222 1.78649 24.2622 1.86682 24.3526 1.89694C24.4329 1.92707 24.4731 1.91702 24.4429 1.86681C24.4128 1.81661 24.5434 1.77645 24.7341 1.78649C24.9249 1.79653 25.0555 1.8367 25.0253 1.87686C25.0053 1.92707 25.0755 1.95719 25.196 1.95719C25.3266 1.95719 25.3868 1.91702 25.3366 1.84674C25.2965 1.77645 25.3667 1.78648 25.5073 1.86681C25.7784 2.00739 26.0897 2.03752 26.2805 1.92707C26.3407 1.87686 26.4914 1.89694 26.6018 1.95719C26.7324 2.02748 26.8026 2.02748 26.8026 1.95719C26.8026 1.90698 26.9231 1.85677 27.0838 1.85677C27.2344 1.85677 27.3047 1.89694 27.2445 1.93711C27.1541 1.98732 27.1641 2.04756 27.2645 2.13793C27.385 2.23835 27.4051 2.23834 27.4051 2.10781C27.4051 1.9371 27.5658 1.89694 27.626 2.0576C27.6662 2.17809 28.4092 2.2785 28.4092 2.16805C28.4092 2.04756 28.8209 2.10781 28.9113 2.24839C28.9615 2.32872 29.072 2.35884 29.2125 2.30863C29.333 2.26847 29.574 2.2283 29.7347 2.21826C30.0058 2.19817 30.0158 2.20823 29.8552 2.32872C29.6443 2.48938 29.6644 2.48937 30.1062 2.35884C30.3874 2.27851 30.4777 2.29859 30.5882 2.43917C30.6886 2.57975 30.7087 2.57975 30.6685 2.44921C30.6284 2.3488 30.6685 2.28855 30.7589 2.28855C30.8392 2.28855 30.8894 2.32872 30.8593 2.37893C30.8292 2.41909 30.8794 2.45925 30.9597 2.45925C31.0501 2.45925 31.1204 2.48938 31.1204 2.52955C31.1204 2.65004 31.6425 2.65004 31.8735 2.53958C31.9839 2.47934 32.0442 2.46929 32.004 2.50946C31.9638 2.54962 32.0341 2.67011 32.1546 2.77053L32.3755 2.95127L32.1546 2.89103C32.0241 2.8609 31.8433 2.87094 31.753 2.90107C31.6024 2.96131 31.6024 2.98139 31.7229 3.06172C31.8032 3.11193 31.9538 3.13202 32.0643 3.10189C32.1848 3.06173 32.2249 3.08181 32.1848 3.1521C32.1044 3.27259 32.255 3.29268 32.6065 3.2023C32.8776 3.12197 32.8977 2.96131 32.6266 3.01152C32.5161 3.0316 32.4458 3.01152 32.4759 2.96131C32.5061 2.91111 32.6467 2.87095 32.7772 2.88099C32.9077 2.89103 32.9881 2.94124 32.968 2.9814C32.9378 3.02157 32.9981 3.06172 33.0885 3.06172C33.1889 3.06172 33.2391 3.09185 33.1989 3.12197C33.1286 3.2023 33.45 3.56379 33.5403 3.50354C33.5905 3.48346 33.6006 3.38305 33.5704 3.28264C33.5202 3.14206 33.5303 3.14206 33.6106 3.26255C33.6709 3.34288 33.701 3.43325 33.6709 3.47341C33.6106 3.58387 34.4742 3.64413 34.6147 3.53367C34.6951 3.46338 34.7352 3.48346 34.7352 3.60396C34.7352 3.72445 34.8356 3.76461 35.167 3.77465C35.5586 3.78469 35.5687 3.7847 35.3076 3.86503C35.1469 3.91523 34.9561 3.92528 34.8859 3.90519C34.8156 3.87507 34.6549 3.90519 34.5445 3.96544C34.424 4.02569 34.2733 4.04577 34.2131 4.00561C34.0022 3.87507 33.1889 3.85498 32.8977 3.97548C32.6969 4.06585 32.5964 4.06585 32.486 3.97548C32.4057 3.90519 32.3153 3.89515 32.2852 3.94536C32.2249 4.04577 31.9237 4.03572 31.7429 3.92527C31.6727 3.88511 31.6224 3.90519 31.6224 3.96544C31.6224 4.03573 31.4216 4.05581 30.9999 4.00561C30.6484 3.96544 30.2769 3.94536 30.1665 3.94536C28.9916 4.00561 28.6101 4.00561 28.6101 3.9554C28.6101 3.92528 28.4092 3.92527 28.1582 3.96544C27.9172 4.0056 27.6963 3.99557 27.6863 3.94536C27.6662 3.89515 27.5256 3.89515 27.365 3.96544C27.1842 4.02569 27.0336 4.03572 26.9633 3.97548C26.9031 3.92527 26.6721 3.91523 26.4512 3.9554C26.2303 3.99556 25.0354 4.02569 23.7903 4.01564C22.5451 4.0056 21.4105 4.02568 21.2699 4.07589C21.1093 4.11605 20.9586 4.10602 20.8883 4.03573C20.8181 3.96545 20.7478 3.96545 20.6574 4.03573C20.5871 4.08594 20.306 4.11606 20.0348 4.10602C19.7637 4.08594 19.4826 4.11605 19.4123 4.1763C19.3219 4.24659 19.2215 4.24659 19.0809 4.16626C18.9303 4.09597 18.2676 4.07589 16.9321 4.11606C13.9699 4.20643 11.6002 4.32693 11.4696 4.38718C11.4295 4.40726 11.1684 4.41729 10.8873 4.41729C10.6061 4.41729 10.3551 4.45746 10.3149 4.51771C10.2647 4.57795 10.2346 4.57796 10.2346 4.49763C10.2346 4.4173 10.0639 4.39721 9.71243 4.42733C8.39703 4.52775 7.31257 4.588 6.64985 4.59804C6.25824 4.60808 5.9068 4.64825 5.86663 4.68842C5.82647 4.72858 5.74613 4.73862 5.67584 4.70849C5.60556 4.67837 5.46498 4.74866 5.36457 4.86915C5.26416 4.9796 5.13362 5.06998 5.06333 5.06998C4.90267 5.06998 4.51106 5.41138 4.51106 5.55196C4.51106 5.61221 4.59139 5.71262 4.6918 5.76282C4.79222 5.83311 4.82234 5.90341 4.76209 5.94357C4.6416 6.04398 4.60143 6.39542 4.72193 6.31509C4.77213 6.28497 4.8123 6.30505 4.8123 6.3653C4.8123 6.41551 4.76209 6.47576 4.70184 6.49584C4.61147 6.52596 4.61147 6.59625 4.70184 6.75691C4.79222 6.93765 4.90267 6.97782 5.24407 6.96777C5.47502 6.96777 5.82647 7.00794 6.01725 7.06819C6.46911 7.20877 6.931 7.2188 6.72014 7.07823C6.5896 6.9979 6.59964 6.97781 6.75026 6.97781C6.84063 6.97781 6.92096 7.02802 6.92096 7.08827C6.92096 7.14851 7.01133 7.1686 7.12179 7.12843C7.24228 7.08827 7.32261 7.10835 7.32261 7.18868C7.32261 7.26901 7.37282 7.25897 7.49331 7.1686C7.62385 7.05815 7.66401 7.05815 7.70418 7.15856C7.7343 7.25897 7.77447 7.25897 7.89496 7.1686C7.97529 7.09831 8.0255 7.08827 8.01546 7.13847C7.97529 7.34934 8.03554 7.39955 8.17612 7.27905C8.29661 7.17864 8.32674 7.17864 8.32674 7.28909C8.32674 7.36942 8.38699 7.3393 8.47736 7.21881C8.57108 7.09162 8.62128 7.09162 8.62798 7.21881C8.62798 7.32926 8.6581 7.37947 8.69826 7.34935C8.72839 7.30918 8.80872 7.31922 8.87901 7.37946C8.93925 7.42967 9.16016 7.47988 9.36099 7.49997C9.57185 7.51001 9.73251 7.57025 9.73251 7.64053C9.73251 7.71082 9.65218 7.74095 9.52165 7.71083C9.33086 7.66062 9.32082 7.69075 9.35094 8.31331C9.37103 8.67479 9.42123 8.9459 9.4614 8.91578C9.50156 8.8957 9.51161 8.98607 9.47144 9.11661C9.38107 9.51826 9.50156 9.78937 9.76264 9.71908C10.3752 9.56846 10.4956 9.5785 10.7065 9.77933C11.0078 10.0605 11.1483 10.0404 11.0981 9.73916C11.058 9.51825 11.0881 9.48813 11.3391 9.48813C11.4998 9.48813 11.7006 9.45801 11.791 9.41784C11.9416 9.36764 11.9516 9.38771 11.8412 9.59858C11.7408 9.76928 11.7408 9.83958 11.8311 9.8697C11.8914 9.88978 11.9215 9.93999 11.9014 9.98015C11.8713 10.0203 11.9014 10.0605 11.9717 10.0605C12.042 10.0605 12.2328 10.1006 12.4135 10.1308C12.5943 10.1609 12.765 10.1508 12.7951 10.0906C12.8252 10.0404 12.9357 9.99019 13.026 9.99019C13.1767 9.99019 13.1767 10.0103 13.0461 10.1006C12.9256 10.191 12.9256 10.2011 13.0762 10.1508C13.1767 10.1207 13.3072 10.0906 13.3574 10.0906C13.4177 10.0906 13.4277 10.0404 13.3976 9.99019C13.3674 9.92994 13.3775 9.88978 13.4177 9.88978C13.4679 9.88978 13.5482 9.97011 13.6185 10.0705C13.6888 10.191 13.8595 10.2613 14.0402 10.2713C14.2109 10.2713 14.3314 10.2412 14.3013 10.191C14.2712 10.1408 14.2912 10.0806 14.3515 10.0404C14.4017 10.0103 14.4519 10.0504 14.4519 10.1308C14.4519 10.2211 14.5222 10.2914 14.6025 10.2914C14.6929 10.2914 14.723 10.2312 14.6828 10.1207C14.6326 9.99019 14.6628 9.97011 14.7933 10.0203C14.8937 10.0605 14.9841 10.0906 15.0142 10.0906C15.0343 10.0906 15.0243 10.1609 14.9941 10.2412C14.954 10.3216 14.9841 10.3918 15.0443 10.3918C15.1046 10.3918 15.1548 10.3416 15.1548 10.2914C15.1548 10.2312 15.2853 10.191 15.446 10.191C15.6167 10.191 15.7773 10.1408 15.8075 10.0906C15.8978 9.93998 16.0585 10.0705 15.9882 10.2412C15.9581 10.3517 16.0083 10.3918 16.169 10.3918C16.3597 10.3918 16.3798 10.3718 16.2593 10.2914C16.179 10.2412 16.1489 10.1709 16.179 10.1308C16.2192 10.0906 16.1388 9.98015 16.0083 9.8697C15.6669 9.60863 15.697 9.51825 16.1087 9.52829C16.3497 9.53834 16.4501 9.57851 16.4099 9.65884C16.3899 9.72912 16.4099 9.78936 16.4602 9.78936C16.5104 9.78936 16.5706 9.70904 16.5907 9.60863C16.6309 9.44797 16.6409 9.44797 16.6509 9.60863C16.661 9.72912 16.7513 9.78936 16.9421 9.7994C17.2032 9.7994 17.2032 9.80945 16.9923 9.88978C16.8417 9.95002 16.7815 10.0404 16.8216 10.1408C16.8718 10.2513 16.8417 10.2814 16.7212 10.2312C16.6208 10.191 16.5706 10.1006 16.6007 10.0304C16.6309 9.95003 16.5907 9.88978 16.5204 9.88978C16.4401 9.88978 16.3999 9.97011 16.43 10.1207C16.4702 10.3015 16.5505 10.3517 16.8417 10.3718C17.0425 10.3918 17.3639 10.422 17.5446 10.442C17.7856 10.4722 17.8961 10.4421 17.9362 10.3216C17.9965 10.181 18.0165 10.181 18.137 10.3416C18.2475 10.5023 18.4483 10.5324 19.7236 10.5525C20.8582 10.5625 21.1996 10.5425 21.29 10.432C21.3804 10.3216 21.3703 10.2914 21.2398 10.2914C21.1494 10.2914 21.0791 10.2412 21.0791 10.191C21.0791 10.0504 21.2097 10.0705 21.4406 10.2412C21.7117 10.442 21.9628 10.422 22.033 10.2011C22.0732 10.0705 22.1535 10.0203 22.2439 10.0605C22.3343 10.0906 22.3845 10.0605 22.3644 9.98015C22.3443 9.89982 22.4347 9.83958 22.5853 9.81949L22.8363 9.7994L22.5853 9.8697C22.4146 9.91991 22.3744 9.97011 22.4648 10.0304C22.5251 10.0705 22.6355 10.0705 22.7058 10.0304C22.7761 9.99019 22.7861 10.0002 22.746 10.0705C22.7058 10.1408 22.5351 10.191 22.3544 10.191C22.0833 10.191 22.0632 10.2111 22.1837 10.3316C22.264 10.4119 22.505 10.5425 22.7158 10.6328C23.0472 10.7634 23.1075 10.7634 23.1577 10.6429C23.1878 10.5625 23.2681 10.4923 23.3485 10.4923C23.4187 10.4923 23.4589 10.5525 23.4288 10.6228C23.3987 10.7132 23.4991 10.7634 23.7501 10.7734C24.0915 10.8035 24.1116 10.7835 23.9811 10.6328C23.8505 10.4722 23.8606 10.4621 24.0714 10.5123C24.1919 10.5525 24.2923 10.5324 24.2923 10.4621C24.2923 10.4019 24.3225 10.3918 24.3626 10.422C24.453 10.5224 24.704 10.2914 24.6337 10.1709C24.5936 10.1107 24.6538 10.0906 24.7844 10.1408C24.9048 10.181 24.9952 10.1609 24.9952 10.1006C24.9952 10.0404 25.0655 9.99019 25.1458 9.99019C25.2262 9.99019 25.2965 10.0304 25.2965 10.0705C25.2965 10.1107 25.4169 10.1408 25.5776 10.1308C25.7383 10.1308 25.919 10.2011 26.0295 10.3216C26.2202 10.5425 26.2504 10.6931 26.0998 10.6931C26.0495 10.6931 26.0094 10.6328 26.0295 10.5625C26.0395 10.5023 25.9793 10.442 25.8989 10.442C25.8186 10.442 25.6981 10.4019 25.6379 10.3718C25.5776 10.3316 25.5274 10.3617 25.5274 10.442C25.5274 10.5224 25.6077 10.5927 25.7081 10.5927C25.8086 10.5927 25.919 10.6328 25.9491 10.6931C25.9793 10.7433 26.1098 10.7734 26.2303 10.7533C26.3508 10.7232 26.5014 10.7031 26.5717 10.7031C26.642 10.6931 26.6721 10.6228 26.642 10.5425C26.6018 10.4621 26.5416 10.4119 26.5014 10.442C26.4612 10.4722 26.401 10.432 26.3709 10.3617C26.3407 10.2714 26.411 10.2412 26.6119 10.2513C26.8227 10.2613 26.9031 10.2211 26.9131 10.1107C26.9131 10.0103 26.9432 9.9902 26.9633 10.0605C26.9934 10.1308 27.0738 10.1609 27.144 10.1308C27.2244 10.1006 27.3047 10.1508 27.3449 10.2412C27.375 10.3316 27.4453 10.3818 27.5055 10.3416C27.5557 10.3115 27.6863 10.3316 27.7967 10.3818C27.9273 10.4521 27.9976 10.4621 28.0277 10.3918C28.0879 10.191 28.7004 10.4019 28.7406 10.6328C28.7707 10.8035 28.7908 10.7935 28.8009 10.5726C28.8109 10.3918 28.8511 10.3115 28.9414 10.3517C29.0318 10.3818 29.0619 10.5123 29.0318 10.6931C28.9916 10.9441 29.0218 10.9943 29.2025 10.9943C29.4636 10.9943 29.4636 10.9542 29.2427 10.7332C29.072 10.5625 29.072 10.5525 29.2527 10.6228C29.3933 10.673 29.4234 10.663 29.3732 10.5425C29.333 10.432 29.3832 10.3918 29.564 10.3918C29.7046 10.3918 29.815 10.442 29.815 10.5023C29.815 10.5625 29.7447 10.5826 29.6544 10.5525C29.564 10.5123 29.5138 10.5425 29.5339 10.6027C29.5841 10.7634 30.0962 10.8136 30.1765 10.673C30.2167 10.6027 30.1966 10.5927 30.1363 10.6328C30.056 10.683 30.0158 10.6228 30.0158 10.4923C30.0158 10.3416 30.0661 10.2914 30.1564 10.3216C30.2368 10.3517 30.3271 10.3316 30.3472 10.2613C30.3773 10.1709 30.4275 10.181 30.5581 10.2814C30.7087 10.4119 30.7489 10.4119 30.8292 10.2814C30.9095 10.1609 30.9296 10.1609 31.02 10.2914C31.0702 10.3718 31.1204 10.3918 31.1204 10.3416C31.1204 10.2814 31.1907 10.3216 31.261 10.422C31.3413 10.5224 31.3815 10.6931 31.3513 10.7935C31.3212 10.9039 31.3513 10.9943 31.4116 10.9943C31.4718 10.9943 31.522 10.9541 31.522 10.9039C31.522 10.8437 31.6124 10.8136 31.7128 10.8236C31.8233 10.8236 31.8835 10.8839 31.8534 10.9642C31.8233 11.0345 31.8534 11.0947 31.9136 11.0947C31.9739 11.0947 32.0241 11.0445 32.0241 10.9943C32.0241 10.9341 32.1145 10.8939 32.235 10.8939C32.3454 10.8939 32.4057 10.9341 32.3755 10.9943C32.3454 11.0445 32.3555 11.0947 32.4157 11.0947C32.4659 11.0947 32.5262 11.0345 32.5563 10.9642C32.5964 10.8638 32.6266 10.8638 32.737 10.9642C32.8977 11.1249 33.0684 11.1349 32.968 10.9742C32.9178 10.8939 32.9479 10.8839 33.0885 10.9441C33.4801 11.1048 33.7512 11.1249 33.8416 10.9843C33.9119 10.8839 33.952 10.8738 34.0123 10.9541C34.0524 11.0345 34.3537 11.0646 34.8156 11.0546C35.2072 11.0445 35.5385 11.0747 35.5385 11.1249C35.5385 11.165 35.5887 11.1751 35.6389 11.1449C35.6992 11.1048 35.7193 11.0345 35.6892 10.9843C35.6088 10.8537 35.7795 10.8738 35.9101 11.0044C36.0607 11.155 36.2615 11.0847 36.1511 10.914C36.1109 10.8437 35.9402 10.7634 35.7795 10.7433C35.6189 10.7232 35.4682 10.7031 35.4381 10.7031C35.408 10.6931 35.4482 10.6529 35.5285 10.6027C35.6189 10.5425 35.7695 10.5525 35.9201 10.6027C36.0607 10.6529 36.2515 10.673 36.3519 10.6429C36.4925 10.5927 36.5728 10.6429 36.6431 10.8136C36.71 10.9609 36.7334 10.9475 36.7134 10.7734C36.6933 10.6228 36.7134 10.5224 36.7535 10.5525C36.8037 10.5826 36.8439 10.5224 36.8439 10.432C36.8439 10.2713 36.8539 10.2713 37.0347 10.432C37.1652 10.5425 37.3962 10.6128 37.6874 10.6128C38.089 10.6128 38.1493 10.6429 38.1493 10.8136C38.1493 10.9542 38.1995 10.9943 38.3099 10.9541C38.4003 10.924 38.4806 10.8939 38.5107 10.8939C38.5308 10.8939 38.5208 10.8337 38.4907 10.7533C38.4304 10.5927 38.7216 10.4521 38.812 10.6027C38.8421 10.663 38.9927 10.683 39.1433 10.6429C39.314 10.6027 39.3743 10.6127 39.304 10.683C39.2538 10.7332 39.0731 10.7935 38.9024 10.8236C38.7317 10.8437 38.8421 10.8738 39.1735 10.8839C39.5149 10.8839 39.7759 10.8437 39.8161 10.7734C39.8663 10.7031 39.8161 10.683 39.6755 10.7132C39.545 10.7533 39.4847 10.7332 39.5149 10.6529C39.535 10.5927 39.7057 10.5324 39.8864 10.5224C40.5893 10.4923 40.8704 10.432 40.9709 10.2914C41.0512 10.1609 41.0813 10.1609 41.2018 10.3115C41.3424 10.5023 41.7139 10.5525 41.8143 10.3918C41.8444 10.3416 41.9348 10.3216 42.0151 10.3617C42.1156 10.3918 42.1658 10.3416 42.1658 10.2011C42.1658 10.0404 42.1156 10.0002 41.9448 10.0304C41.8143 10.0504 41.6737 10.0304 41.6135 9.99019C41.5231 9.9199 41.1215 9.84961 40.2579 9.73916C40.1173 9.71908 39.8061 9.67891 39.555 9.63875C37.848 9.39776 36.0707 9.21701 35.167 9.19693C35.0264 9.18689 34.9361 9.12664 34.9361 9.03627C34.9361 8.95594 34.8959 8.88565 34.8457 8.88565C34.7955 8.88565 34.7252 8.81537 34.6951 8.72499C34.6649 8.64466 34.675 8.6045 34.7352 8.63462C34.7854 8.66474 34.8557 8.57437 34.8959 8.4338C34.926 8.30326 34.9963 8.21289 35.0465 8.23297C35.0867 8.26309 35.1871 8.20285 35.2574 8.08235C35.3277 7.9719 35.418 7.88153 35.4682 7.88153C35.6289 7.88153 36.7435 7.3393 36.7435 7.25897C36.7435 7.21881 36.7033 7.17864 36.6531 7.17864C36.6029 7.17864 36.5427 7.08827 36.5125 6.98785C36.4824 6.8774 36.2916 6.71674 36.0808 6.62637C35.7494 6.48579 35.7193 6.44563 35.8599 6.3653C35.9502 6.31509 36.3519 6.29501 36.7535 6.32513C37.2355 6.35526 37.5367 6.32514 37.6271 6.25485C37.7376 6.16448 37.7878 6.16447 37.848 6.28496C37.9183 6.40546 38.1894 6.43559 39.0831 6.46571C39.7057 6.47575 40.3885 6.50587 40.5893 6.52596C40.8604 6.54604 40.9608 6.51591 40.9909 6.38538C41.0311 6.2448 41.0411 6.24481 41.0512 6.39543C41.0612 6.53601 41.1616 6.55609 41.6135 6.54605C41.9147 6.53601 42.1658 6.55609 42.1658 6.59625C42.1658 6.69667 43.0795 6.69667 43.2402 6.59625C43.3205 6.54605 43.3305 6.46571 43.2703 6.37534C43.1197 6.14439 43.1498 6.0741 43.3707 6.0741C43.4812 6.0741 43.5715 6.1243 43.5715 6.18455C43.5715 6.23476 43.5314 6.25484 43.4711 6.22472C43.3506 6.14439 43.3406 6.27493 43.4611 6.46571C43.5715 6.64645 44.1037 6.71675 44.0134 6.54605C43.9832 6.47576 44.0134 6.49583 44.0937 6.57616C44.2443 6.75691 44.8769 6.83724 44.8769 6.67658C44.8769 6.62637 44.9974 6.57616 45.1581 6.5862C45.389 6.5862 45.399 6.60629 45.2384 6.66654C45.0576 6.73683 45.0576 6.74687 45.2183 6.80712C45.3187 6.84728 45.4794 6.82719 45.5798 6.77699C45.6802 6.72678 45.8409 6.7067 45.9212 6.73682C46.0216 6.77699 46.0818 6.74687 46.0818 6.66654C46.0818 6.55608 46.1019 6.54604 46.1722 6.6565C46.2124 6.72679 46.2927 6.77699 46.3429 6.76695C46.3931 6.75691 46.4534 6.76695 46.4835 6.77699C46.5136 6.78703 46.7245 6.80711 46.9655 6.82719C47.2968 6.84728 47.3872 6.8272 47.3973 6.69667C47.3973 6.55609 47.4073 6.54604 47.4675 6.67658C47.5479 6.85732 47.9094 6.87741 47.9696 6.69667C47.9897 6.63642 48.0801 6.57616 48.1604 6.57616C48.2809 6.57616 48.2909 6.60629 48.2006 6.7067C48.1102 6.81716 48.1503 6.84728 48.4014 6.85732C48.6926 6.86736 48.7026 6.84728 48.6323 6.54605C48.6022 6.3653 48.5319 6.21469 48.4817 6.1946C48.3512 6.1444 48.6524 5.87328 48.8231 5.87328C48.9034 5.87328 48.9938 5.81304 49.0239 5.74275C49.0741 5.61221 49.4858 5.38125 50.1285 5.13022C50.3293 5.04989 50.5 4.93944 50.5 4.87919C50.5 4.71853 50.0381 4.26668 49.8774 4.26668C49.7971 4.26668 49.6967 4.22651 49.6465 4.1763C49.5862 4.11605 49.4155 4.05581 49.2649 4.02568C49.0139 3.98552 47.6483 3.61399 46.8349 3.373C46.5437 3.28263 45.7404 3.12197 45.5296 3.11193C45.4794 3.11193 45.389 3.08181 45.3288 3.05169C45.2785 3.01152 45.0476 2.95127 44.8267 2.91111C44.6058 2.8609 44.3849 2.82073 44.3246 2.81069C44.0535 2.75045 42.5072 2.42912 42.4168 2.41908C42.3666 2.40904 42.2762 2.37892 42.216 2.3488C42.1658 2.30863 42.0252 2.29859 41.9248 2.31867C41.8143 2.32871 41.6537 2.30863 41.5733 2.25842C41.483 2.21826 41.2821 2.14797 41.1114 2.11784C40.9508 2.08772 40.5893 2.01743 40.3081 1.95719C40.037 1.90698 39.555 1.84673 39.2538 1.81661C38.9526 1.79652 38.4806 1.72624 38.1995 1.66599C36.9041 1.39487 35.1068 1.13381 34.1328 1.09364C33.7713 1.0836 33.4801 1.06352 33.4801 1.05347C33.4801 1.02335 33.0684 0.953064 32.5061 0.892817C32.0542 0.84261 31.9237 0.862688 31.9237 0.963101C31.9237 1.07355 31.9036 1.07356 31.8434 0.973152C31.7329 0.812492 31.4618 0.752237 30.5179 0.70203C30.1062 0.681948 29.6544 0.631739 29.5138 0.611657C29.3732 0.581533 28.831 0.531329 28.3088 0.501205C27.7867 0.471082 27.134 0.420883 26.8528 0.370676C26.5817 0.330511 26.0696 0.30038 25.7282 0.30038C25.3868 0.30038 25.0956 0.260223 25.0956 0.220058C25.0956 0.179893 25.0053 0.189926 24.9048 0.250174C24.6639 0.370669 24.5634 0.380718 24.6337 0.270264C24.6639 0.220058 24.4932 0.17989 24.2622 0.17989C24.0313 0.17989 23.4991 0.149769 23.0874 0.119645C22.1335 0.039315 21.3502 0.0292689 20.798 0.0895164C20.567 0.11964 20.3863 0.109604 20.4164 0.0694388C20.4767 -0.0309737 19.8441 -0.0209374 19.6834 0.0895164C19.593 0.149764 19.5227 0.149764 19.5026 0.0895164C19.4826 0.0393101 19.0307 0.00919127 18.4985 0.0192325C17.9563 0.0292738 17.1229 0.0393077 16.6409 0.0493489C16.1589 0.0593902 15.7271 0.0493563 15.687 0.0192325C15.6468 -0.000849979 15.4862 0.00918392 15.3456 0.0493489ZM5.66581 1.35471C5.69593 1.41496 5.65576 1.425 5.57543 1.39488C5.39469 1.32459 5.36457 1.2543 5.50515 1.2543C5.56539 1.2543 5.63568 1.29446 5.66581 1.35471ZM8.92921 1.66599C8.92921 1.71619 8.84888 1.75636 8.75851 1.74632C8.64806 1.74632 8.62797 1.7162 8.7083 1.68608C8.76855 1.666 8.79868 1.58567 8.76855 1.53546C8.72839 1.46517 8.74847 1.45513 8.80872 1.49529C8.87901 1.53546 8.92921 1.60574 8.92921 1.66599ZM9.64214 1.65595C9.64214 1.75636 9.67227 1.73628 9.73251 1.60574C9.81284 1.41496 9.82288 1.41496 9.82288 1.61578C9.83293 1.75636 9.7526 1.85678 9.61202 1.89694C9.28066 1.97727 9.10996 1.96723 9.1702 1.86681C9.21037 1.81661 9.18024 1.75637 9.10995 1.73628C8.90913 1.666 9.12 1.47521 9.38107 1.49529C9.53169 1.49529 9.6321 1.56558 9.64214 1.65595ZM10.084 1.55554C10.1141 1.60574 10.094 1.65595 10.0438 1.65595C9.98354 1.65595 9.93334 1.60574 9.93334 1.55554C9.93334 1.49529 9.95342 1.45512 9.9735 1.45512C10.0036 1.45512 10.0538 1.49529 10.084 1.55554ZM21.3 1.5455C21.1896 1.60575 21.2197 1.67604 21.4205 1.8367C21.6314 1.99736 21.6515 2.04756 21.5209 2.09777C21.4406 2.12789 21.4004 2.11784 21.4306 2.06764C21.4607 2.01743 21.3904 1.94715 21.28 1.90698C20.9888 1.81661 21.0289 1.45512 21.3201 1.45512C21.3804 1.45512 21.3703 1.49529 21.3 1.5455ZM21.8322 1.75636C21.8623 1.80657 21.8523 1.85677 21.7921 1.85677C21.7419 1.85677 21.6615 1.80657 21.6314 1.75636C21.6013 1.69611 21.6113 1.65595 21.6716 1.65595C21.7218 1.65595 21.8021 1.69611 21.8322 1.75636ZM22.1937 1.8869C22.0933 1.97727 22.0833 1.96724 22.1435 1.82666C22.1736 1.72625 22.2339 1.67603 22.264 1.70616C22.2941 1.73628 22.264 1.81661 22.1937 1.8869ZM14.6025 1.85677C14.6326 1.90698 14.6226 1.95719 14.5624 1.95719C14.5122 1.95719 14.4318 1.90698 14.4017 1.85677C14.3716 1.79653 14.3816 1.75636 14.4419 1.75636C14.4921 1.75636 14.5724 1.79653 14.6025 1.85677ZM34.183 2.92114C34.3135 2.97135 34.3235 3.00148 34.2131 3.07176C34.0123 3.2023 33.8315 3.18222 33.8315 3.01152C33.8315 2.85086 33.9219 2.82073 34.183 2.92114ZM35.6088 3.19227C35.5586 3.35293 35.0063 3.33284 34.9561 3.17218C34.926 3.09185 34.9561 3.06173 35.0164 3.10189C35.0766 3.13202 35.1469 3.12197 35.177 3.07176C35.2574 2.95127 35.659 3.06173 35.6088 3.19227ZM36.6129 3.18223C36.5828 3.26256 36.5527 3.23242 36.5527 3.12197C36.5427 3.01152 36.5728 2.95128 36.6029 2.99144C36.633 3.02156 36.6431 3.11194 36.6129 3.18223ZM36.2414 3.30272C36.4925 3.38305 36.6531 3.46337 36.5929 3.47341C36.2615 3.53366 36.0306 3.52363 35.9803 3.4433C35.9502 3.40313 35.8799 3.38305 35.8297 3.41317C35.7795 3.45333 35.7394 3.40313 35.7394 3.3228C35.7394 3.23242 35.7494 3.16214 35.7695 3.16214C35.7795 3.16214 35.9904 3.23243 36.2414 3.30272ZM25.196 5.37121C25.196 5.26076 25.2262 5.26076 25.3165 5.35114C25.5073 5.54192 25.2864 5.70257 24.9852 5.58208C24.8546 5.53187 24.7944 5.48166 24.8647 5.48166C24.935 5.47162 24.9651 5.40134 24.9249 5.29089C24.8747 5.15031 24.8948 5.16035 25.0253 5.32101C25.1458 5.46158 25.186 5.48167 25.196 5.37121ZM23.238 5.37121C23.2681 5.42142 23.248 5.47163 23.1978 5.47163C23.1376 5.47163 23.0874 5.42142 23.0874 5.37121C23.0874 5.31097 23.1075 5.2708 23.1275 5.2708C23.1577 5.2708 23.2079 5.31097 23.238 5.37121ZM27.9574 5.49172C28.098 5.55196 28.2084 5.64232 28.2084 5.68249C28.2084 5.77286 27.0336 5.73271 26.9332 5.64233C26.8729 5.58209 27.0436 5.53188 27.2344 5.562C27.2746 5.562 27.3047 5.52183 27.3047 5.47163C27.3047 5.34109 27.6361 5.3411 27.9574 5.49172ZM29.3431 5.562C29.6744 5.77287 29.5439 5.95361 29.2025 5.76282C29.0619 5.69254 29.0117 5.69254 29.0519 5.76282C29.092 5.82307 28.9916 5.85319 28.7406 5.83311C28.5398 5.81303 28.349 5.74274 28.3289 5.68249C28.2988 5.58208 28.4996 5.52183 28.7908 5.562C28.8511 5.57204 28.9113 5.53187 28.9113 5.47163C28.9113 5.32101 29.0218 5.35113 29.3431 5.562ZM26.2504 5.67245C26.2202 5.72266 26.1098 5.7327 25.9893 5.70258C25.8387 5.66241 25.8186 5.62224 25.909 5.57204C26.0596 5.47163 26.3207 5.562 26.2504 5.67245ZM30.2167 5.58208C30.2167 5.64232 30.297 5.66241 30.4075 5.62224C30.5581 5.57204 30.5982 5.61221 30.5882 5.76282C30.5782 5.9034 30.538 5.93353 30.4577 5.86324C30.3874 5.81303 30.2167 5.79294 30.066 5.83311C29.815 5.89336 29.805 5.88331 29.9054 5.68249C30.0259 5.46158 30.2167 5.39129 30.2167 5.58208ZM32.5663 5.61221C32.5262 5.72266 32.5764 5.74274 32.8475 5.68249C33.0282 5.64232 33.2893 5.64232 33.4299 5.68249L33.6809 5.75279L33.4098 5.76282C33.2491 5.77287 33.1286 5.82307 33.1286 5.88331C33.1286 5.96364 33.0784 5.96365 32.978 5.87328C32.8575 5.77286 32.7973 5.77287 32.6868 5.86324C32.5864 5.95361 32.5262 5.95361 32.4759 5.87328C32.4057 5.76282 32.476 5.47163 32.5663 5.47163C32.5964 5.47163 32.5964 5.53188 32.5663 5.61221ZM26.8026 5.67245C26.8026 5.72266 26.7826 5.77286 26.7625 5.77286C26.7324 5.77286 26.6821 5.72266 26.652 5.67245C26.6219 5.6122 26.642 5.57204 26.6922 5.57204C26.7524 5.57204 26.8026 5.6122 26.8026 5.67245ZM31.6526 5.69254C31.7731 5.76283 31.9839 5.80299 32.1245 5.79295C32.3655 5.76283 32.3655 5.77286 32.1848 5.92348C31.9337 6.11427 31.8634 6.11427 31.7831 5.92348C31.753 5.84315 31.6124 5.77286 31.4718 5.77286C31.2911 5.77286 31.2308 5.81304 31.281 5.89337C31.3313 5.9737 31.3011 5.98374 31.1806 5.94357C31.0802 5.90341 30.9798 5.87328 30.9597 5.87328C30.8392 5.87328 30.9497 5.6825 31.1003 5.64233C31.3915 5.562 31.4317 5.57205 31.6526 5.69254ZM33.9319 5.77286C33.9319 5.82307 33.8817 5.87328 33.8215 5.87328C33.7713 5.87328 33.7512 5.82307 33.7813 5.77286C33.8114 5.71262 33.8616 5.67245 33.8918 5.67245C33.9119 5.67245 33.9319 5.71262 33.9319 5.77286ZM34.5846 5.77286C34.5545 5.82307 34.4842 5.87328 34.424 5.87328C34.3737 5.87328 34.3336 5.82307 34.3336 5.77286C34.3336 5.71262 34.4039 5.67245 34.4942 5.67245C34.5746 5.67245 34.6147 5.71262 34.5846 5.77286ZM35.2373 5.93352C35.2373 5.9536 35.1469 5.93352 35.0365 5.87328C34.926 5.81303 34.8356 5.74274 34.8356 5.71262C34.8356 5.69254 34.926 5.71262 35.0365 5.77286C35.1469 5.83311 35.2373 5.9034 35.2373 5.93352ZM35.6892 5.77286C35.7193 5.82307 35.6791 5.87328 35.5988 5.87328C35.5084 5.87328 35.4381 5.82307 35.4381 5.77286C35.4381 5.71262 35.4783 5.67245 35.5285 5.67245C35.5887 5.67245 35.659 5.71262 35.6892 5.77286ZM36.2916 5.77286C36.2615 5.82307 36.1711 5.84316 36.0908 5.80299C35.8799 5.7327 35.9 5.67245 36.1511 5.67245C36.2615 5.67245 36.3318 5.71262 36.2916 5.77286ZM32.8776 5.97369C32.9077 6.02389 32.8876 6.0741 32.8374 6.0741C32.7772 6.0741 32.727 6.02389 32.727 5.97369C32.727 5.91344 32.7471 5.87328 32.7671 5.87328C32.7973 5.87328 32.8475 5.91344 32.8776 5.97369ZM40.4085 5.97369C40.3784 6.02389 40.288 6.0741 40.2278 6.0741C40.1575 6.0741 40.1675 6.03394 40.2579 5.97369C40.4487 5.85319 40.4889 5.85319 40.4085 5.97369ZM40.9608 6.02389C40.9608 6.10422 40.8905 6.17451 40.8102 6.17451C40.5491 6.17451 40.6294 5.97369 40.9407 5.88331C40.9508 5.87327 40.9608 5.94356 40.9608 6.02389ZM34.7854 6.0741C34.7553 6.12431 34.6649 6.17451 34.6047 6.17451C34.5344 6.17451 34.5444 6.13435 34.6348 6.0741C34.8256 5.95361 34.8658 5.95361 34.7854 6.0741ZM35.4883 6.28496C35.4883 6.35525 35.398 6.43559 35.2875 6.46571C35.1268 6.49584 35.1168 6.47576 35.2172 6.35526C35.2775 6.27493 35.2975 6.17451 35.2574 6.12431C35.2172 6.08414 35.2574 6.06407 35.3377 6.09419C35.418 6.12431 35.4883 6.20463 35.4883 6.28496ZM45.4794 6.1946C45.4794 6.27493 45.3187 6.33518 45.0777 6.34522C44.8468 6.3653 44.6761 6.32513 44.6761 6.26489C44.6761 6.20464 44.7162 6.1946 44.7765 6.22472C44.8267 6.25484 44.9572 6.23476 45.0476 6.18455C45.2986 6.04397 45.4794 6.05403 45.4794 6.1946ZM43.8728 6.27493C43.8728 6.32513 43.8527 6.37534 43.8326 6.37534C43.8025 6.37534 43.7523 6.32513 43.7222 6.27493C43.692 6.21468 43.7121 6.17451 43.7623 6.17451C43.8226 6.17451 43.8728 6.21468 43.8728 6.27493ZM44.5255 6.47575C44.5556 6.52596 44.5154 6.57616 44.425 6.57616C44.3347 6.57616 44.2945 6.52596 44.3246 6.47575C44.3548 6.4155 44.405 6.37534 44.425 6.37534C44.4451 6.37534 44.4953 6.4155 44.5255 6.47575ZM7.72426 6.73682C7.72426 6.81715 7.67406 6.85732 7.62385 6.82719C7.5636 6.78703 7.54352 6.71674 7.57364 6.66654C7.66402 6.52596 7.72426 6.55608 7.72426 6.73682ZM7.35274 6.74687C7.28245 6.76695 7.16195 6.76695 7.1017 6.74687C7.03142 6.71675 7.08162 6.69667 7.2222 6.69667C7.36278 6.69667 7.41298 6.71675 7.35274 6.74687ZM8.17612 6.78703C8.29661 6.97781 8.12591 7.01799 7.95521 6.84728C7.79455 6.68662 7.79455 6.67658 7.94517 6.67658C8.03554 6.67658 8.146 6.72678 8.17612 6.78703ZM8.75851 6.88744C8.79868 7.0481 8.78864 7.06819 8.66814 6.96777C8.50748 6.83724 8.47736 6.67658 8.61793 6.67658C8.66814 6.67658 8.72839 6.76694 8.75851 6.88744ZM6.51931 6.8774C6.51931 6.92761 6.49923 6.97781 6.47914 6.97781C6.44902 6.97781 6.39882 6.92761 6.36869 6.8774C6.33857 6.81715 6.35865 6.77699 6.40886 6.77699C6.46911 6.77699 6.51931 6.81715 6.51931 6.8774ZM9.58189 6.8774C9.72247 6.94769 9.66223 6.95774 9.38107 6.90753C9.16016 6.87741 8.95933 6.83724 8.93925 6.81716C8.84888 6.73683 9.39111 6.79707 9.58189 6.8774ZM10.1844 6.97781C10.2145 7.02802 10.1944 7.07823 10.1442 7.07823C10.084 7.07823 10.0338 7.02802 10.0338 6.97781C10.0338 6.91757 10.0538 6.8774 10.0739 6.8774C10.104 6.8774 10.1542 6.91757 10.1844 6.97781ZM31.7731 8.78524C31.8032 8.83545 31.763 8.88565 31.6827 8.88565C31.5923 8.88565 31.522 8.83545 31.522 8.78524C31.522 8.72499 31.5622 8.68483 31.6124 8.68483C31.6727 8.68483 31.7429 8.72499 31.7731 8.78524ZM13.5783 9.41784C13.6084 9.49817 13.5683 9.55842 13.498 9.55842C13.4277 9.55842 13.3875 9.49817 13.4177 9.41784C13.4478 9.34755 13.4779 9.2873 13.498 9.2873C13.5181 9.2873 13.5482 9.34755 13.5783 9.41784ZM12.6445 9.53833C12.6445 9.70903 12.3633 9.73916 12.1424 9.5785C12.0219 9.49817 12.052 9.47809 12.2729 9.51826C12.4236 9.53834 12.5441 9.51825 12.5441 9.47809C12.5441 9.42788 12.5641 9.38771 12.5943 9.38771C12.6244 9.38771 12.6445 9.458 12.6445 9.53833ZM14.3314 9.5785C14.6025 9.80945 14.6126 9.88978 14.3515 9.81949C14.231 9.78937 14.1707 9.73917 14.2009 9.70904C14.221 9.67892 14.2009 9.59859 14.1406 9.51826C13.98 9.32747 14.0804 9.35759 14.3314 9.5785ZM14 9.66887C13.9699 9.699 13.8896 9.66887 13.8193 9.59858C13.7289 9.49817 13.739 9.48812 13.8795 9.54837C13.98 9.5785 14.0302 9.63875 14 9.66887ZM21.4306 9.87974C21.3703 9.92994 21.1795 9.77933 21.1795 9.67891C21.1795 9.62871 21.2398 9.63875 21.3201 9.70904C21.4004 9.77933 21.4406 9.85966 21.4306 9.87974ZM15.1046 9.78936C14.8335 9.90986 14.6728 9.90986 14.8535 9.78936C14.9339 9.73916 15.0745 9.69899 15.1548 9.69899C15.2552 9.69899 15.2351 9.72912 15.1046 9.78936ZM18.9504 9.87974C19.0709 9.88978 19.1713 9.92994 19.1713 9.98015C19.1713 10.0304 19.0508 10.0605 18.9002 10.0504C18.7395 10.0304 18.5889 10.0605 18.5588 10.1207C18.4584 10.2613 18.2676 10.1107 18.3278 9.95002C18.358 9.86969 18.4584 9.81949 18.5487 9.83957C18.6391 9.85965 18.8198 9.87974 18.9504 9.87974ZM20.7176 9.84961C20.9787 9.95002 20.8984 10.0906 20.5871 10.0906C20.2457 10.0906 20.085 9.92995 20.3461 9.85966C20.4465 9.82954 20.5369 9.80944 20.5469 9.7994C20.557 9.7994 20.6273 9.81949 20.7176 9.84961ZM21.9326 9.88978C21.9025 9.93998 21.7921 9.99019 21.7017 9.98015C21.5611 9.98015 21.5711 9.96007 21.7318 9.88978C21.9126 9.81614 21.9795 9.81614 21.9326 9.88978ZM19.9344 10.0103C19.9846 10.0806 19.9344 10.1006 19.7938 10.0705C19.6734 10.0404 19.5629 10.0605 19.5428 10.1207C19.5027 10.2412 19.2717 10.1308 19.2717 9.98015C19.2717 9.84961 19.8441 9.8697 19.9344 10.0103ZM23.9208 10.1408C24.0714 10.1609 24.2622 10.1709 24.3425 10.181C24.4229 10.181 24.4932 10.2312 24.4932 10.2713C24.4932 10.3617 23.73 10.3617 23.6296 10.2713C23.5995 10.2312 23.489 10.2513 23.3886 10.3115C23.248 10.4019 23.1677 10.4019 23.0271 10.2914C22.8765 10.1508 22.8765 10.1408 23.0974 10.0806C23.228 10.0404 23.4087 10.0404 23.489 10.0705C23.5694 10.1006 23.7601 10.1308 23.9208 10.1408ZM30.4476 10.0605C30.3773 10.0806 30.2568 10.0806 30.1966 10.0605C30.1263 10.0304 30.1765 10.0103 30.3171 10.0103C30.4577 10.0103 30.5079 10.0304 30.4476 10.0605ZM33.3295 10.5525C33.7813 10.5826 33.8918 10.6027 33.7612 10.6529C33.6909 10.683 33.6508 10.7634 33.6709 10.8236C33.6809 10.8939 33.6809 10.914 33.6608 10.8638C33.6307 10.8236 33.5504 10.7935 33.47 10.7935C33.3897 10.7935 33.3295 10.7533 33.3295 10.7132C33.3295 10.663 32.9378 10.6328 32.4659 10.6529C31.994 10.663 31.6325 10.6429 31.6626 10.6128C31.6927 10.5826 31.8434 10.5525 31.994 10.5425C32.1546 10.5224 32.3655 10.4822 32.4659 10.442C32.6065 10.3818 32.6366 10.3918 32.5864 10.4722C32.5462 10.5425 32.5563 10.5927 32.6065 10.5927C32.6667 10.5927 32.737 10.5123 32.7772 10.4119C32.8374 10.2613 32.8575 10.2613 32.9579 10.3918C33.0282 10.4722 33.1889 10.5525 33.3295 10.5525ZM34.2332 10.4923C34.2332 10.5525 34.2934 10.5927 34.3637 10.5726C34.434 10.5525 34.4942 10.5826 34.5043 10.6429C34.5143 10.6931 34.3838 10.7533 34.2231 10.7634C33.9119 10.7935 33.9018 10.7834 33.9922 10.5525C34.0625 10.3718 34.2332 10.3316 34.2332 10.4923ZM23.0874 10.5927C23.0874 10.6429 23.0673 10.6931 23.0472 10.6931C23.0171 10.6931 22.9669 10.6429 22.9368 10.5927C22.9066 10.5324 22.9267 10.4923 22.9769 10.4923C23.0372 10.4923 23.0874 10.5324 23.0874 10.5927ZM35.0365 10.6328C35.0365 10.663 34.9963 10.7132 34.9361 10.7433C34.8859 10.7734 34.8356 10.7533 34.8356 10.7031C34.8356 10.6429 34.8859 10.5927 34.9361 10.5927C34.9963 10.5927 35.0365 10.6127 35.0365 10.6328ZM35.3377 10.7935C35.3377 10.8437 35.2975 10.8939 35.2373 10.8939C35.1871 10.8939 35.1369 10.8437 35.1369 10.7935C35.1369 10.7332 35.1871 10.6931 35.2373 10.6931C35.2975 10.6931 35.3377 10.7332 35.3377 10.7935Z" fill="#1A1A1A"/>
+</g>
+<defs>
+<clipPath id="clip0_4942_85899">
+<rect width="50" height="11.1625" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/web/app/assets/scribble/scribble-white.svg b/apps/web/app/assets/scribble/scribble-white.svg
new file mode 100644
index 0000000000..2133897370
--- /dev/null
+++ b/apps/web/app/assets/scribble/scribble-white.svg
@@ -0,0 +1,10 @@
+<svg width="50" height="12" viewBox="0 0 50 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4949_86128)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8456 0.0493489C14.705 0.0895139 14.2431 0.119635 13.8113 0.109594C13.3796 0.0995527 13.0181 0.119635 12.9879 0.1598C12.9679 0.199965 12.8072 0.189926 12.6265 0.149761C12.4558 0.0995552 12.265 0.0895213 12.2047 0.119645C12.1445 0.15981 11.9637 0.179893 11.793 0.169851C11.6324 0.149769 11.3412 0.189926 11.1504 0.250174C10.9094 0.310422 10.7688 0.310424 10.6785 0.240135C10.5881 0.169846 10.4877 0.169844 10.327 0.250174C10.1563 0.350587 10.1262 0.340548 10.1864 0.240135C10.2467 0.149764 10.1764 0.129684 9.8852 0.17989C9.67433 0.210014 9.46346 0.290337 9.43334 0.360625C9.39317 0.420873 9.33292 0.430921 9.3028 0.380715C9.26264 0.320468 7.87694 0.280298 7.87694 0.350587C7.87694 0.38071 7.47529 0.46104 7.3548 0.450999C6.94311 0.420875 6.69208 0.430919 6.00927 0.491167C5.27626 0.561455 4.86457 0.6217 4.86457 0.651824C4.86457 0.671907 4.06127 0.762283 3.65962 0.782365C3.49896 0.792407 3.29813 0.842613 3.23788 0.882778C3.1676 0.932984 3.06718 0.932979 3.00694 0.902855C2.95673 0.872732 2.71574 0.892812 2.48479 0.963101C2.2438 1.02335 1.9526 1.07356 1.82207 1.07356C1.70157 1.07356 1.57104 1.11372 1.54091 1.16393C1.51079 1.21413 1.33005 1.2543 1.13926 1.2543C0.948479 1.2543 0.797861 1.29447 0.797861 1.34467C0.797861 1.40492 0.717528 1.425 0.607075 1.40492C0.496621 1.38484 0.325919 1.4752 0.205424 1.61578C-0.0255244 1.87685 -0.0656894 2.0576 0.105012 2.0576C0.155218 2.0576 0.185342 2.01743 0.155218 1.96723C0.0648469 1.83669 0.295797 1.77645 0.727571 1.8367C0.938437 1.85678 1.0991 1.9371 1.0991 2.00739C1.0991 2.08772 1.24972 2.12789 1.54091 2.11784C1.97269 2.1078 2.10322 1.95719 1.68149 1.95719C1.32 1.95719 1.57104 1.83669 2.00281 1.79653C2.38438 1.76641 2.40446 1.77645 2.40446 2.03752V2.30863L2.60529 1.97728C2.71574 1.79653 2.85632 1.67603 2.90652 1.70616C2.96677 1.73628 3.00694 1.69611 3.00694 1.60574C3.00694 1.51537 3.05714 1.47521 3.10735 1.50533C3.1676 1.5455 3.18768 1.61578 3.15756 1.66599C3.11739 1.71619 3.23788 1.75636 3.39854 1.75636C3.57929 1.75636 3.70982 1.70616 3.70982 1.62583C3.70982 1.5455 3.74999 1.55554 3.81024 1.65595C3.86044 1.73628 3.91065 1.75636 3.91065 1.69612C3.91065 1.63587 3.98094 1.58567 4.06127 1.58567C4.1416 1.58567 4.21189 1.62583 4.21189 1.67604C4.21189 1.72625 4.29222 1.72625 4.39263 1.67604C4.483 1.62583 4.75411 1.60575 4.9951 1.62583C5.23609 1.64592 5.49717 1.61578 5.56746 1.55554C5.66787 1.47521 5.70803 1.47521 5.73816 1.57563C5.77832 1.67604 5.85865 1.67604 6.14985 1.58567C6.47117 1.48525 6.52138 1.49529 6.52138 1.63587C6.53142 1.78649 6.54146 1.78649 6.66195 1.62583C6.74228 1.52542 6.83265 1.48525 6.86278 1.53546C6.94311 1.666 6.83265 1.95719 6.71216 1.95719C6.66195 1.95719 6.62179 1.99736 6.62179 2.03752C6.62179 2.07769 6.77241 2.09777 6.96319 2.07769C7.26443 2.03752 7.30459 2.00739 7.29455 1.7664C7.27447 1.53545 7.31463 1.50534 7.65604 1.47521C7.88698 1.45513 8.02756 1.48525 8.02756 1.55554C8.02756 1.62583 7.96731 1.65596 7.88698 1.62583C7.78657 1.58567 7.76649 1.63587 7.79661 1.78649C7.83678 1.95719 7.82674 1.97727 7.73636 1.85677C7.62591 1.69611 7.46525 1.77645 7.57571 1.94715C7.65604 2.08773 7.92715 2.08772 7.92715 1.95719C7.92715 1.89694 7.97736 1.85677 8.02756 1.85677C8.08781 1.85677 8.11793 1.91703 8.10789 1.97728C8.08781 2.04757 8.14806 2.08772 8.22839 2.06764C8.30872 2.04756 8.57983 2.01744 8.83086 1.99735C9.08189 1.96723 9.39317 1.93711 9.53375 1.92707C9.72454 1.90699 9.77474 1.85677 9.75466 1.70616C9.73457 1.58566 9.75466 1.54549 9.80486 1.61578C9.99565 1.8869 10.7387 2.0576 10.7387 1.8367C10.7387 1.74633 10.6082 1.72624 10.2668 1.75636C10.1161 1.7664 10.0358 1.7162 10.0358 1.62583C10.0358 1.53546 10.0057 1.45513 9.96552 1.42501C9.91532 1.40493 9.95548 1.40493 10.0358 1.42501C10.6182 1.58567 10.7688 1.58567 10.7086 1.42501C10.6684 1.31455 10.6885 1.28443 10.7989 1.3246C10.8692 1.35472 10.9395 1.41496 10.9395 1.46516C10.9395 1.51537 11.0701 1.55554 11.2307 1.55554C11.3914 1.55554 11.5721 1.62583 11.6424 1.70616C11.7127 1.79653 11.8332 1.84673 11.9135 1.81661C11.9838 1.78648 12.0441 1.80657 12.0441 1.84674C12.0441 1.96723 12.3754 1.91703 12.4156 1.78649C12.4357 1.73628 12.2951 1.70615 12.0842 1.71619C11.783 1.74632 11.7428 1.72624 11.8432 1.60574C11.9035 1.53545 12.0641 1.48525 12.1947 1.51537C12.3252 1.53545 12.4658 1.51537 12.4959 1.45512C12.5361 1.39488 12.6164 1.38484 12.6767 1.42501C12.7469 1.47521 12.8775 1.50533 12.9879 1.50533C13.249 1.50533 13.4498 1.82665 13.2591 1.94715C13.1687 2.0074 13.2189 2.04757 13.4298 2.07769L13.731 2.11784L13.49 1.80657C13.1988 1.41496 13.1888 1.35471 13.4599 1.35471C13.6306 1.35471 13.6607 1.40492 13.6205 1.60574C13.5904 1.81661 13.6306 1.89694 13.8615 2.00739C14.0724 2.11785 14.1427 2.1279 14.1828 2.02748C14.213 1.93711 14.2833 1.9371 14.4941 2.0576C14.715 2.16805 14.7853 2.17809 14.8456 2.06764C14.8958 1.99735 14.9661 1.94715 15.0163 1.94715C15.1669 1.96723 15.1167 1.72625 14.956 1.67604C14.8757 1.64592 14.8355 1.66599 14.8757 1.70616C14.9661 1.79653 14.7853 2.0576 14.6347 2.0576C14.5745 2.0576 14.5544 1.98731 14.5945 1.90698C14.6347 1.79653 14.5845 1.75636 14.4038 1.75636C14.0724 1.75636 14.0824 1.61578 14.4138 1.46516C14.6447 1.36475 14.6749 1.37479 14.6146 1.50533C14.5745 1.62583 14.6146 1.64591 14.8054 1.5957C14.956 1.55554 15.1267 1.58566 15.2271 1.66599C15.3476 1.7664 15.3778 1.76641 15.3175 1.67604C15.1669 1.43505 15.3978 1.56559 15.6589 1.87686C15.8597 2.11785 15.9501 2.15801 16.0104 2.0576C16.0606 1.97727 16.0505 1.94715 15.9903 1.98732C15.93 2.02748 15.8597 1.96723 15.8296 1.85677C15.7895 1.70616 15.8397 1.63587 16.0204 1.5957C16.3116 1.52542 16.4723 1.62583 16.2614 1.75636C16.1811 1.80657 16.1409 1.87686 16.171 1.90698C16.2714 1.99735 16.5626 1.84674 16.5626 1.69612C16.5626 1.52542 16.7835 1.51538 16.9442 1.67604C17.0245 1.75637 17.0647 1.75637 17.0647 1.68608C17.0647 1.63587 17.1852 1.5957 17.3458 1.61578C17.6872 1.65595 17.9885 1.56558 17.9182 1.44509C17.878 1.39488 17.9282 1.35471 18.0086 1.35471C18.109 1.35471 18.1692 1.44508 18.1692 1.56558C18.1692 1.72624 18.119 1.76641 17.9784 1.72625C17.858 1.69612 17.7575 1.73629 17.7274 1.82666C17.6471 2.03752 17.637 2.03752 17.9282 1.97728C18.119 1.94715 18.1793 1.96723 18.1291 2.04756C18.0889 2.10781 18.109 2.15801 18.1592 2.15801C18.2194 2.15801 18.2696 2.10781 18.2696 2.04756C18.2696 1.97727 18.3701 1.95719 18.5207 1.97728C18.6612 2.0074 18.8018 1.98731 18.832 1.94715C18.8621 1.89694 18.7416 1.85677 18.5809 1.85677C18.4102 1.85677 18.2696 1.80657 18.2696 1.75636C18.2696 1.69611 18.3399 1.65595 18.4203 1.65595C18.5006 1.65595 18.5709 1.59571 18.5709 1.52542C18.5809 1.44509 18.611 1.45512 18.7014 1.55554C18.8319 1.7162 19.6754 1.79653 19.6754 1.65595C19.6754 1.56558 20.2678 1.60574 20.3582 1.70616C20.3883 1.73628 20.2478 1.75636 20.0469 1.75636C19.7156 1.75636 19.6754 1.78649 19.6955 2.00739C19.7156 2.21826 19.7357 2.2283 19.8762 2.11784C19.9566 2.03751 20.1373 1.94715 20.2779 1.90698C20.5088 1.83669 20.5189 1.83669 20.3783 2.00739C20.2377 2.17809 20.2478 2.18814 20.4586 2.13793C20.5791 2.09777 20.6795 2.10781 20.6795 2.15801C20.6795 2.29859 21.0009 2.36888 21.1414 2.25842C21.2117 2.19818 21.4226 2.13793 21.6033 2.13793C22.015 2.12789 22.1456 2.0576 21.9749 1.94715C21.8644 1.87686 21.8744 1.85677 22.015 1.85677C22.1154 1.85677 22.1757 1.81661 22.1456 1.7664C22.1154 1.71619 22.2359 1.65595 22.4066 1.61578C22.6075 1.57562 22.748 1.5957 22.7982 1.66599C22.8384 1.73628 22.9388 1.75637 23.0292 1.72625C23.1196 1.68608 23.1899 1.70615 23.1899 1.7664C23.1899 1.82665 23.2601 1.84673 23.3405 1.81661C23.4208 1.78648 23.5614 1.72624 23.6618 1.68608C23.7622 1.64591 23.8024 1.666 23.7622 1.72625C23.722 1.78649 23.7622 1.86682 23.8526 1.89694C23.9329 1.92707 23.9731 1.91702 23.9429 1.86681C23.9128 1.81661 24.0434 1.77645 24.2341 1.78649C24.4249 1.79653 24.5555 1.8367 24.5253 1.87686C24.5053 1.92707 24.5755 1.95719 24.696 1.95719C24.8266 1.95719 24.8868 1.91702 24.8366 1.84674C24.7965 1.77645 24.8667 1.78648 25.0073 1.86681C25.2784 2.00739 25.5897 2.03752 25.7805 1.92707C25.8407 1.87686 25.9914 1.89694 26.1018 1.95719C26.2324 2.02748 26.3026 2.02748 26.3026 1.95719C26.3026 1.90698 26.4231 1.85677 26.5838 1.85677C26.7344 1.85677 26.8047 1.89694 26.7445 1.93711C26.6541 1.98732 26.6641 2.04756 26.7645 2.13793C26.885 2.23835 26.9051 2.23834 26.9051 2.10781C26.9051 1.9371 27.0658 1.89694 27.126 2.0576C27.1662 2.17809 27.9092 2.2785 27.9092 2.16805C27.9092 2.04756 28.3209 2.10781 28.4113 2.24839C28.4615 2.32872 28.572 2.35884 28.7125 2.30863C28.833 2.26847 29.074 2.2283 29.2347 2.21826C29.5058 2.19817 29.5158 2.20823 29.3552 2.32872C29.1443 2.48938 29.1644 2.48937 29.6062 2.35884C29.8874 2.27851 29.9777 2.29859 30.0882 2.43917C30.1886 2.57975 30.2087 2.57975 30.1685 2.44921C30.1284 2.3488 30.1685 2.28855 30.2589 2.28855C30.3392 2.28855 30.3894 2.32872 30.3593 2.37893C30.3292 2.41909 30.3794 2.45925 30.4597 2.45925C30.5501 2.45925 30.6204 2.48938 30.6204 2.52955C30.6204 2.65004 31.1425 2.65004 31.3735 2.53958C31.4839 2.47934 31.5442 2.46929 31.504 2.50946C31.4638 2.54962 31.5341 2.67011 31.6546 2.77053L31.8755 2.95127L31.6546 2.89103C31.5241 2.8609 31.3433 2.87094 31.253 2.90107C31.1024 2.96131 31.1024 2.98139 31.2229 3.06172C31.3032 3.11193 31.4538 3.13202 31.5643 3.10189C31.6848 3.06173 31.7249 3.08181 31.6848 3.1521C31.6044 3.27259 31.755 3.29268 32.1065 3.2023C32.3776 3.12197 32.3977 2.96131 32.1266 3.01152C32.0161 3.0316 31.9458 3.01152 31.9759 2.96131C32.0061 2.91111 32.1467 2.87095 32.2772 2.88099C32.4077 2.89103 32.4881 2.94124 32.468 2.9814C32.4378 3.02157 32.4981 3.06172 32.5885 3.06172C32.6889 3.06172 32.7391 3.09185 32.6989 3.12197C32.6286 3.2023 32.95 3.56379 33.0403 3.50354C33.0905 3.48346 33.1006 3.38305 33.0704 3.28264C33.0202 3.14206 33.0303 3.14206 33.1106 3.26255C33.1709 3.34288 33.201 3.43325 33.1709 3.47341C33.1106 3.58387 33.9742 3.64413 34.1147 3.53367C34.1951 3.46338 34.2352 3.48346 34.2352 3.60396C34.2352 3.72445 34.3356 3.76461 34.667 3.77465C35.0586 3.78469 35.0687 3.7847 34.8076 3.86503C34.6469 3.91523 34.4561 3.92528 34.3859 3.90519C34.3156 3.87507 34.1549 3.90519 34.0445 3.96544C33.924 4.02569 33.7733 4.04577 33.7131 4.00561C33.5022 3.87507 32.6889 3.85498 32.3977 3.97548C32.1969 4.06585 32.0964 4.06585 31.986 3.97548C31.9057 3.90519 31.8153 3.89515 31.7852 3.94536C31.7249 4.04577 31.4237 4.03572 31.2429 3.92527C31.1727 3.88511 31.1224 3.90519 31.1224 3.96544C31.1224 4.03573 30.9216 4.05581 30.4999 4.00561C30.1484 3.96544 29.7769 3.94536 29.6665 3.94536C28.4916 4.00561 28.1101 4.00561 28.1101 3.9554C28.1101 3.92528 27.9092 3.92527 27.6582 3.96544C27.4172 4.0056 27.1963 3.99557 27.1863 3.94536C27.1662 3.89515 27.0256 3.89515 26.865 3.96544C26.6842 4.02569 26.5336 4.03572 26.4633 3.97548C26.4031 3.92527 26.1721 3.91523 25.9512 3.9554C25.7303 3.99556 24.5354 4.02569 23.2903 4.01564C22.0451 4.0056 20.9105 4.02568 20.7699 4.07589C20.6093 4.11605 20.4586 4.10602 20.3883 4.03573C20.3181 3.96545 20.2478 3.96545 20.1574 4.03573C20.0871 4.08594 19.806 4.11606 19.5348 4.10602C19.2637 4.08594 18.9826 4.11605 18.9123 4.1763C18.8219 4.24659 18.7215 4.24659 18.5809 4.16626C18.4303 4.09597 17.7676 4.07589 16.4321 4.11606C13.4699 4.20643 11.1002 4.32693 10.9696 4.38718C10.9295 4.40726 10.6684 4.41729 10.3873 4.41729C10.1061 4.41729 9.85507 4.45746 9.81491 4.51771C9.7647 4.57795 9.73458 4.57796 9.73458 4.49763C9.73458 4.4173 9.56387 4.39721 9.21243 4.42733C7.89703 4.52775 6.81257 4.588 6.14985 4.59804C5.75824 4.60808 5.4068 4.64825 5.36663 4.68842C5.32647 4.72858 5.24613 4.73862 5.17584 4.70849C5.10556 4.67837 4.96498 4.74866 4.86457 4.86915C4.76416 4.9796 4.63362 5.06998 4.56333 5.06998C4.40267 5.06998 4.01106 5.41138 4.01106 5.55196C4.01106 5.61221 4.09139 5.71262 4.1918 5.76282C4.29222 5.83311 4.32234 5.90341 4.26209 5.94357C4.1416 6.04398 4.10143 6.39542 4.22193 6.31509C4.27213 6.28497 4.3123 6.30505 4.3123 6.3653C4.3123 6.41551 4.26209 6.47576 4.20184 6.49584C4.11147 6.52596 4.11147 6.59625 4.20184 6.75691C4.29222 6.93765 4.40267 6.97782 4.74407 6.96777C4.97502 6.96777 5.32647 7.00794 5.51725 7.06819C5.96911 7.20877 6.431 7.2188 6.22014 7.07823C6.0896 6.9979 6.09964 6.97781 6.25026 6.97781C6.34063 6.97781 6.42096 7.02802 6.42096 7.08827C6.42096 7.14851 6.51133 7.1686 6.62179 7.12843C6.74228 7.08827 6.82261 7.10835 6.82261 7.18868C6.82261 7.26901 6.87282 7.25897 6.99331 7.1686C7.12385 7.05815 7.16401 7.05815 7.20418 7.15856C7.2343 7.25897 7.27447 7.25897 7.39496 7.1686C7.47529 7.09831 7.5255 7.08827 7.51546 7.13847C7.47529 7.34934 7.53554 7.39955 7.67612 7.27905C7.79661 7.17864 7.82674 7.17864 7.82674 7.28909C7.82674 7.36942 7.88699 7.3393 7.97736 7.21881C8.07108 7.09162 8.12128 7.09162 8.12798 7.21881C8.12798 7.32926 8.1581 7.37947 8.19826 7.34935C8.22839 7.30918 8.30872 7.31922 8.37901 7.37946C8.43925 7.42967 8.66016 7.47988 8.86099 7.49997C9.07185 7.51001 9.23251 7.57025 9.23251 7.64053C9.23251 7.71082 9.15218 7.74095 9.02165 7.71083C8.83086 7.66062 8.82082 7.69075 8.85094 8.31331C8.87103 8.67479 8.92123 8.9459 8.9614 8.91578C9.00156 8.8957 9.01161 8.98607 8.97144 9.11661C8.88107 9.51826 9.00156 9.78937 9.26264 9.71908C9.87515 9.56846 9.99565 9.5785 10.2065 9.77933C10.5078 10.0605 10.6483 10.0404 10.5981 9.73916C10.558 9.51825 10.5881 9.48813 10.8391 9.48813C10.9998 9.48813 11.2006 9.45801 11.291 9.41784C11.4416 9.36764 11.4516 9.38771 11.3412 9.59858C11.2408 9.76928 11.2408 9.83958 11.3311 9.8697C11.3914 9.88978 11.4215 9.93999 11.4014 9.98015C11.3713 10.0203 11.4014 10.0605 11.4717 10.0605C11.542 10.0605 11.7328 10.1006 11.9135 10.1308C12.0943 10.1609 12.265 10.1508 12.2951 10.0906C12.3252 10.0404 12.4357 9.99019 12.526 9.99019C12.6767 9.99019 12.6767 10.0103 12.5461 10.1006C12.4256 10.191 12.4256 10.2011 12.5762 10.1508C12.6767 10.1207 12.8072 10.0906 12.8574 10.0906C12.9177 10.0906 12.9277 10.0404 12.8976 9.99019C12.8674 9.92994 12.8775 9.88978 12.9177 9.88978C12.9679 9.88978 13.0482 9.97011 13.1185 10.0705C13.1888 10.191 13.3595 10.2613 13.5402 10.2713C13.7109 10.2713 13.8314 10.2412 13.8013 10.191C13.7712 10.1408 13.7912 10.0806 13.8515 10.0404C13.9017 10.0103 13.9519 10.0504 13.9519 10.1308C13.9519 10.2211 14.0222 10.2914 14.1025 10.2914C14.1929 10.2914 14.223 10.2312 14.1828 10.1207C14.1326 9.99019 14.1628 9.97011 14.2933 10.0203C14.3937 10.0605 14.4841 10.0906 14.5142 10.0906C14.5343 10.0906 14.5243 10.1609 14.4941 10.2412C14.454 10.3216 14.4841 10.3918 14.5443 10.3918C14.6046 10.3918 14.6548 10.3416 14.6548 10.2914C14.6548 10.2312 14.7853 10.191 14.946 10.191C15.1167 10.191 15.2773 10.1408 15.3075 10.0906C15.3978 9.93998 15.5585 10.0705 15.4882 10.2412C15.4581 10.3517 15.5083 10.3918 15.669 10.3918C15.8597 10.3918 15.8798 10.3718 15.7593 10.2914C15.679 10.2412 15.6489 10.1709 15.679 10.1308C15.7192 10.0906 15.6388 9.98015 15.5083 9.8697C15.1669 9.60863 15.197 9.51825 15.6087 9.52829C15.8497 9.53834 15.9501 9.57851 15.9099 9.65884C15.8899 9.72912 15.9099 9.78936 15.9602 9.78936C16.0104 9.78936 16.0706 9.70904 16.0907 9.60863C16.1309 9.44797 16.1409 9.44797 16.1509 9.60863C16.161 9.72912 16.2513 9.78936 16.4421 9.7994C16.7032 9.7994 16.7032 9.80945 16.4923 9.88978C16.3417 9.95002 16.2815 10.0404 16.3216 10.1408C16.3718 10.2513 16.3417 10.2814 16.2212 10.2312C16.1208 10.191 16.0706 10.1006 16.1007 10.0304C16.1309 9.95003 16.0907 9.88978 16.0204 9.88978C15.9401 9.88978 15.8999 9.97011 15.93 10.1207C15.9702 10.3015 16.0505 10.3517 16.3417 10.3718C16.5425 10.3918 16.8639 10.422 17.0446 10.442C17.2856 10.4722 17.3961 10.4421 17.4362 10.3216C17.4965 10.181 17.5165 10.181 17.637 10.3416C17.7475 10.5023 17.9483 10.5324 19.2236 10.5525C20.3582 10.5625 20.6996 10.5425 20.79 10.432C20.8804 10.3216 20.8703 10.2914 20.7398 10.2914C20.6494 10.2914 20.5791 10.2412 20.5791 10.191C20.5791 10.0504 20.7097 10.0705 20.9406 10.2412C21.2117 10.442 21.4628 10.422 21.533 10.2011C21.5732 10.0705 21.6535 10.0203 21.7439 10.0605C21.8343 10.0906 21.8845 10.0605 21.8644 9.98015C21.8443 9.89982 21.9347 9.83958 22.0853 9.81949L22.3363 9.7994L22.0853 9.8697C21.9146 9.91991 21.8744 9.97011 21.9648 10.0304C22.0251 10.0705 22.1355 10.0705 22.2058 10.0304C22.2761 9.99019 22.2861 10.0002 22.246 10.0705C22.2058 10.1408 22.0351 10.191 21.8544 10.191C21.5833 10.191 21.5632 10.2111 21.6837 10.3316C21.764 10.4119 22.005 10.5425 22.2158 10.6328C22.5472 10.7634 22.6075 10.7634 22.6577 10.6429C22.6878 10.5625 22.7681 10.4923 22.8485 10.4923C22.9187 10.4923 22.9589 10.5525 22.9288 10.6228C22.8987 10.7132 22.9991 10.7634 23.2501 10.7734C23.5915 10.8035 23.6116 10.7835 23.4811 10.6328C23.3505 10.4722 23.3606 10.4621 23.5714 10.5123C23.6919 10.5525 23.7923 10.5324 23.7923 10.4621C23.7923 10.4019 23.8225 10.3918 23.8626 10.422C23.953 10.5224 24.204 10.2914 24.1337 10.1709C24.0936 10.1107 24.1538 10.0906 24.2844 10.1408C24.4048 10.181 24.4952 10.1609 24.4952 10.1006C24.4952 10.0404 24.5655 9.99019 24.6458 9.99019C24.7262 9.99019 24.7965 10.0304 24.7965 10.0705C24.7965 10.1107 24.9169 10.1408 25.0776 10.1308C25.2383 10.1308 25.419 10.2011 25.5295 10.3216C25.7202 10.5425 25.7504 10.6931 25.5998 10.6931C25.5495 10.6931 25.5094 10.6328 25.5295 10.5625C25.5395 10.5023 25.4793 10.442 25.3989 10.442C25.3186 10.442 25.1981 10.4019 25.1379 10.3718C25.0776 10.3316 25.0274 10.3617 25.0274 10.442C25.0274 10.5224 25.1077 10.5927 25.2081 10.5927C25.3086 10.5927 25.419 10.6328 25.4491 10.6931C25.4793 10.7433 25.6098 10.7734 25.7303 10.7533C25.8508 10.7232 26.0014 10.7031 26.0717 10.7031C26.142 10.6931 26.1721 10.6228 26.142 10.5425C26.1018 10.4621 26.0416 10.4119 26.0014 10.442C25.9612 10.4722 25.901 10.432 25.8709 10.3617C25.8407 10.2714 25.911 10.2412 26.1119 10.2513C26.3227 10.2613 26.4031 10.2211 26.4131 10.1107C26.4131 10.0103 26.4432 9.9902 26.4633 10.0605C26.4934 10.1308 26.5738 10.1609 26.644 10.1308C26.7244 10.1006 26.8047 10.1508 26.8449 10.2412C26.875 10.3316 26.9453 10.3818 27.0055 10.3416C27.0557 10.3115 27.1863 10.3316 27.2967 10.3818C27.4273 10.4521 27.4976 10.4621 27.5277 10.3918C27.5879 10.191 28.2004 10.4019 28.2406 10.6328C28.2707 10.8035 28.2908 10.7935 28.3009 10.5726C28.3109 10.3918 28.3511 10.3115 28.4414 10.3517C28.5318 10.3818 28.5619 10.5123 28.5318 10.6931C28.4916 10.9441 28.5218 10.9943 28.7025 10.9943C28.9636 10.9943 28.9636 10.9542 28.7427 10.7332C28.572 10.5625 28.572 10.5525 28.7527 10.6228C28.8933 10.673 28.9234 10.663 28.8732 10.5425C28.833 10.432 28.8832 10.3918 29.064 10.3918C29.2046 10.3918 29.315 10.442 29.315 10.5023C29.315 10.5625 29.2447 10.5826 29.1544 10.5525C29.064 10.5123 29.0138 10.5425 29.0339 10.6027C29.0841 10.7634 29.5962 10.8136 29.6765 10.673C29.7167 10.6027 29.6966 10.5927 29.6363 10.6328C29.556 10.683 29.5158 10.6228 29.5158 10.4923C29.5158 10.3416 29.5661 10.2914 29.6564 10.3216C29.7368 10.3517 29.8271 10.3316 29.8472 10.2613C29.8773 10.1709 29.9275 10.181 30.0581 10.2814C30.2087 10.4119 30.2489 10.4119 30.3292 10.2814C30.4095 10.1609 30.4296 10.1609 30.52 10.2914C30.5702 10.3718 30.6204 10.3918 30.6204 10.3416C30.6204 10.2814 30.6907 10.3216 30.761 10.422C30.8413 10.5224 30.8815 10.6931 30.8513 10.7935C30.8212 10.9039 30.8513 10.9943 30.9116 10.9943C30.9718 10.9943 31.022 10.9541 31.022 10.9039C31.022 10.8437 31.1124 10.8136 31.2128 10.8236C31.3233 10.8236 31.3835 10.8839 31.3534 10.9642C31.3233 11.0345 31.3534 11.0947 31.4136 11.0947C31.4739 11.0947 31.5241 11.0445 31.5241 10.9943C31.5241 10.9341 31.6145 10.8939 31.735 10.8939C31.8454 10.8939 31.9057 10.9341 31.8755 10.9943C31.8454 11.0445 31.8555 11.0947 31.9157 11.0947C31.9659 11.0947 32.0262 11.0345 32.0563 10.9642C32.0964 10.8638 32.1266 10.8638 32.237 10.9642C32.3977 11.1249 32.5684 11.1349 32.468 10.9742C32.4178 10.8939 32.4479 10.8839 32.5885 10.9441C32.9801 11.1048 33.2512 11.1249 33.3416 10.9843C33.4119 10.8839 33.452 10.8738 33.5123 10.9541C33.5524 11.0345 33.8537 11.0646 34.3156 11.0546C34.7072 11.0445 35.0385 11.0747 35.0385 11.1249C35.0385 11.165 35.0887 11.1751 35.1389 11.1449C35.1992 11.1048 35.2193 11.0345 35.1892 10.9843C35.1088 10.8537 35.2795 10.8738 35.4101 11.0044C35.5607 11.155 35.7615 11.0847 35.6511 10.914C35.6109 10.8437 35.4402 10.7634 35.2795 10.7433C35.1189 10.7232 34.9682 10.7031 34.9381 10.7031C34.908 10.6931 34.9482 10.6529 35.0285 10.6027C35.1189 10.5425 35.2695 10.5525 35.4201 10.6027C35.5607 10.6529 35.7515 10.673 35.8519 10.6429C35.9925 10.5927 36.0728 10.6429 36.1431 10.8136C36.21 10.9609 36.2334 10.9475 36.2134 10.7734C36.1933 10.6228 36.2134 10.5224 36.2535 10.5525C36.3037 10.5826 36.3439 10.5224 36.3439 10.432C36.3439 10.2713 36.3539 10.2713 36.5347 10.432C36.6652 10.5425 36.8962 10.6128 37.1874 10.6128C37.589 10.6128 37.6493 10.6429 37.6493 10.8136C37.6493 10.9542 37.6995 10.9943 37.8099 10.9541C37.9003 10.924 37.9806 10.8939 38.0107 10.8939C38.0308 10.8939 38.0208 10.8337 37.9907 10.7533C37.9304 10.5927 38.2216 10.4521 38.312 10.6027C38.3421 10.663 38.4927 10.683 38.6433 10.6429C38.814 10.6027 38.8743 10.6127 38.804 10.683C38.7538 10.7332 38.5731 10.7935 38.4024 10.8236C38.2317 10.8437 38.3421 10.8738 38.6735 10.8839C39.0149 10.8839 39.2759 10.8437 39.3161 10.7734C39.3663 10.7031 39.3161 10.683 39.1755 10.7132C39.045 10.7533 38.9847 10.7332 39.0149 10.6529C39.035 10.5927 39.2057 10.5324 39.3864 10.5224C40.0893 10.4923 40.3704 10.432 40.4709 10.2914C40.5512 10.1609 40.5813 10.1609 40.7018 10.3115C40.8424 10.5023 41.2139 10.5525 41.3143 10.3918C41.3444 10.3416 41.4348 10.3216 41.5151 10.3617C41.6156 10.3918 41.6658 10.3416 41.6658 10.2011C41.6658 10.0404 41.6156 10.0002 41.4448 10.0304C41.3143 10.0504 41.1737 10.0304 41.1135 9.99019C41.0231 9.9199 40.6215 9.84961 39.7579 9.73916C39.6173 9.71908 39.3061 9.67891 39.055 9.63875C37.348 9.39776 35.5707 9.21701 34.667 9.19693C34.5264 9.18689 34.4361 9.12664 34.4361 9.03627C34.4361 8.95594 34.3959 8.88565 34.3457 8.88565C34.2955 8.88565 34.2252 8.81537 34.1951 8.72499C34.1649 8.64466 34.175 8.6045 34.2352 8.63462C34.2854 8.66474 34.3557 8.57437 34.3959 8.4338C34.426 8.30326 34.4963 8.21289 34.5465 8.23297C34.5867 8.26309 34.6871 8.20285 34.7574 8.08235C34.8277 7.9719 34.918 7.88153 34.9682 7.88153C35.1289 7.88153 36.2435 7.3393 36.2435 7.25897C36.2435 7.21881 36.2033 7.17864 36.1531 7.17864C36.1029 7.17864 36.0427 7.08827 36.0125 6.98785C35.9824 6.8774 35.7916 6.71674 35.5808 6.62637C35.2494 6.48579 35.2193 6.44563 35.3599 6.3653C35.4502 6.31509 35.8519 6.29501 36.2535 6.32513C36.7355 6.35526 37.0367 6.32514 37.1271 6.25485C37.2376 6.16448 37.2878 6.16447 37.348 6.28496C37.4183 6.40546 37.6894 6.43559 38.5831 6.46571C39.2057 6.47575 39.8885 6.50587 40.0893 6.52596C40.3604 6.54604 40.4608 6.51591 40.4909 6.38538C40.5311 6.2448 40.5411 6.24481 40.5512 6.39543C40.5612 6.53601 40.6616 6.55609 41.1135 6.54605C41.4147 6.53601 41.6658 6.55609 41.6658 6.59625C41.6658 6.69667 42.5795 6.69667 42.7402 6.59625C42.8205 6.54605 42.8305 6.46571 42.7703 6.37534C42.6197 6.14439 42.6498 6.0741 42.8707 6.0741C42.9812 6.0741 43.0715 6.1243 43.0715 6.18455C43.0715 6.23476 43.0314 6.25484 42.9711 6.22472C42.8506 6.14439 42.8406 6.27493 42.9611 6.46571C43.0715 6.64645 43.6037 6.71675 43.5134 6.54605C43.4832 6.47576 43.5134 6.49583 43.5937 6.57616C43.7443 6.75691 44.3769 6.83724 44.3769 6.67658C44.3769 6.62637 44.4974 6.57616 44.6581 6.5862C44.889 6.5862 44.899 6.60629 44.7384 6.66654C44.5576 6.73683 44.5576 6.74687 44.7183 6.80712C44.8187 6.84728 44.9794 6.82719 45.0798 6.77699C45.1802 6.72678 45.3409 6.7067 45.4212 6.73682C45.5216 6.77699 45.5818 6.74687 45.5818 6.66654C45.5818 6.55608 45.6019 6.54604 45.6722 6.6565C45.7124 6.72679 45.7927 6.77699 45.8429 6.76695C45.8931 6.75691 45.9534 6.76695 45.9835 6.77699C46.0136 6.78703 46.2245 6.80711 46.4655 6.82719C46.7968 6.84728 46.8872 6.8272 46.8973 6.69667C46.8973 6.55609 46.9073 6.54604 46.9675 6.67658C47.0479 6.85732 47.4094 6.87741 47.4696 6.69667C47.4897 6.63642 47.5801 6.57616 47.6604 6.57616C47.7809 6.57616 47.7909 6.60629 47.7006 6.7067C47.6102 6.81716 47.6503 6.84728 47.9014 6.85732C48.1926 6.86736 48.2026 6.84728 48.1323 6.54605C48.1022 6.3653 48.0319 6.21469 47.9817 6.1946C47.8512 6.1444 48.1524 5.87328 48.3231 5.87328C48.4034 5.87328 48.4938 5.81304 48.5239 5.74275C48.5741 5.61221 48.9858 5.38125 49.6285 5.13022C49.8293 5.04989 50 4.93944 50 4.87919C50 4.71853 49.5381 4.26668 49.3774 4.26668C49.2971 4.26668 49.1967 4.22651 49.1465 4.1763C49.0862 4.11605 48.9155 4.05581 48.7649 4.02568C48.5139 3.98552 47.1483 3.61399 46.3349 3.373C46.0437 3.28263 45.2404 3.12197 45.0296 3.11193C44.9794 3.11193 44.889 3.08181 44.8288 3.05169C44.7785 3.01152 44.5476 2.95127 44.3267 2.91111C44.1058 2.8609 43.8849 2.82073 43.8246 2.81069C43.5535 2.75045 42.0072 2.42912 41.9168 2.41908C41.8666 2.40904 41.7762 2.37892 41.716 2.3488C41.6658 2.30863 41.5252 2.29859 41.4248 2.31867C41.3143 2.32871 41.1537 2.30863 41.0733 2.25842C40.983 2.21826 40.7821 2.14797 40.6114 2.11784C40.4508 2.08772 40.0893 2.01743 39.8081 1.95719C39.537 1.90698 39.055 1.84673 38.7538 1.81661C38.4526 1.79652 37.9806 1.72624 37.6995 1.66599C36.4041 1.39487 34.6068 1.13381 33.6328 1.09364C33.2713 1.0836 32.9801 1.06352 32.9801 1.05347C32.9801 1.02335 32.5684 0.953064 32.0061 0.892817C31.5542 0.84261 31.4237 0.862688 31.4237 0.963101C31.4237 1.07355 31.4036 1.07356 31.3434 0.973152C31.2329 0.812492 30.9618 0.752237 30.0179 0.70203C29.6062 0.681948 29.1544 0.631739 29.0138 0.611657C28.8732 0.581533 28.331 0.531329 27.8088 0.501205C27.2867 0.471082 26.634 0.420883 26.3528 0.370676C26.0817 0.330511 25.5696 0.30038 25.2282 0.30038C24.8868 0.30038 24.5956 0.260223 24.5956 0.220058C24.5956 0.179893 24.5053 0.189926 24.4048 0.250174C24.1639 0.370669 24.0634 0.380718 24.1337 0.270264C24.1639 0.220058 23.9932 0.17989 23.7622 0.17989C23.5313 0.17989 22.9991 0.149769 22.5874 0.119645C21.6335 0.039315 20.8502 0.0292689 20.298 0.0895164C20.067 0.11964 19.8863 0.109604 19.9164 0.0694388C19.9767 -0.0309737 19.3441 -0.0209374 19.1834 0.0895164C19.093 0.149764 19.0227 0.149764 19.0026 0.0895164C18.9826 0.0393101 18.5307 0.00919127 17.9985 0.0192325C17.4563 0.0292738 16.6229 0.0393077 16.1409 0.0493489C15.6589 0.0593902 15.2271 0.0493563 15.187 0.0192325C15.1468 -0.000849979 14.9862 0.00918392 14.8456 0.0493489ZM5.16581 1.35471C5.19593 1.41496 5.15576 1.425 5.07543 1.39488C4.89469 1.32459 4.86457 1.2543 5.00515 1.2543C5.06539 1.2543 5.13568 1.29446 5.16581 1.35471ZM8.42921 1.66599C8.42921 1.71619 8.34888 1.75636 8.25851 1.74632C8.14806 1.74632 8.12797 1.7162 8.2083 1.68608C8.26855 1.666 8.29868 1.58567 8.26855 1.53546C8.22839 1.46517 8.24847 1.45513 8.30872 1.49529C8.37901 1.53546 8.42921 1.60574 8.42921 1.66599ZM9.14214 1.65595C9.14214 1.75636 9.17227 1.73628 9.23251 1.60574C9.31284 1.41496 9.32288 1.41496 9.32288 1.61578C9.33293 1.75636 9.2526 1.85678 9.11202 1.89694C8.78066 1.97727 8.60996 1.96723 8.6702 1.86681C8.71037 1.81661 8.68024 1.75637 8.60995 1.73628C8.40913 1.666 8.62 1.47521 8.88107 1.49529C9.03169 1.49529 9.1321 1.56558 9.14214 1.65595ZM9.58396 1.55554C9.61408 1.60574 9.594 1.65595 9.54379 1.65595C9.48354 1.65595 9.43334 1.60574 9.43334 1.55554C9.43334 1.49529 9.45342 1.45512 9.4735 1.45512C9.50363 1.45512 9.55383 1.49529 9.58396 1.55554ZM20.8 1.5455C20.6896 1.60575 20.7197 1.67604 20.9205 1.8367C21.1314 1.99736 21.1515 2.04756 21.0209 2.09777C20.9406 2.12789 20.9004 2.11784 20.9306 2.06764C20.9607 2.01743 20.8904 1.94715 20.78 1.90698C20.4888 1.81661 20.5289 1.45512 20.8201 1.45512C20.8804 1.45512 20.8703 1.49529 20.8 1.5455ZM21.3322 1.75636C21.3623 1.80657 21.3523 1.85677 21.2921 1.85677C21.2419 1.85677 21.1615 1.80657 21.1314 1.75636C21.1013 1.69611 21.1113 1.65595 21.1716 1.65595C21.2218 1.65595 21.3021 1.69611 21.3322 1.75636ZM21.6937 1.8869C21.5933 1.97727 21.5833 1.96724 21.6435 1.82666C21.6736 1.72625 21.7339 1.67603 21.764 1.70616C21.7941 1.73628 21.764 1.81661 21.6937 1.8869ZM14.1025 1.85677C14.1326 1.90698 14.1226 1.95719 14.0624 1.95719C14.0122 1.95719 13.9318 1.90698 13.9017 1.85677C13.8716 1.79653 13.8816 1.75636 13.9419 1.75636C13.9921 1.75636 14.0724 1.79653 14.1025 1.85677ZM33.683 2.92114C33.8135 2.97135 33.8235 3.00148 33.7131 3.07176C33.5123 3.2023 33.3315 3.18222 33.3315 3.01152C33.3315 2.85086 33.4219 2.82073 33.683 2.92114ZM35.1088 3.19227C35.0586 3.35293 34.5063 3.33284 34.4561 3.17218C34.426 3.09185 34.4561 3.06173 34.5164 3.10189C34.5766 3.13202 34.6469 3.12197 34.677 3.07176C34.7574 2.95127 35.159 3.06173 35.1088 3.19227ZM36.1129 3.18223C36.0828 3.26256 36.0527 3.23242 36.0527 3.12197C36.0427 3.01152 36.0728 2.95128 36.1029 2.99144C36.133 3.02156 36.1431 3.11194 36.1129 3.18223ZM35.7414 3.30272C35.9925 3.38305 36.1531 3.46337 36.0929 3.47341C35.7615 3.53366 35.5306 3.52363 35.4803 3.4433C35.4502 3.40313 35.3799 3.38305 35.3297 3.41317C35.2795 3.45333 35.2394 3.40313 35.2394 3.3228C35.2394 3.23242 35.2494 3.16214 35.2695 3.16214C35.2795 3.16214 35.4904 3.23243 35.7414 3.30272ZM24.696 5.37121C24.696 5.26076 24.7262 5.26076 24.8165 5.35114C25.0073 5.54192 24.7864 5.70257 24.4852 5.58208C24.3546 5.53187 24.2944 5.48166 24.3647 5.48166C24.435 5.47162 24.4651 5.40134 24.4249 5.29089C24.3747 5.15031 24.3948 5.16035 24.5253 5.32101C24.6458 5.46158 24.686 5.48167 24.696 5.37121ZM22.738 5.37121C22.7681 5.42142 22.748 5.47163 22.6978 5.47163C22.6376 5.47163 22.5874 5.42142 22.5874 5.37121C22.5874 5.31097 22.6075 5.2708 22.6275 5.2708C22.6577 5.2708 22.7079 5.31097 22.738 5.37121ZM27.4574 5.49172C27.598 5.55196 27.7084 5.64232 27.7084 5.68249C27.7084 5.77286 26.5336 5.73271 26.4332 5.64233C26.3729 5.58209 26.5436 5.53188 26.7344 5.562C26.7746 5.562 26.8047 5.52183 26.8047 5.47163C26.8047 5.34109 27.1361 5.3411 27.4574 5.49172ZM28.8431 5.562C29.1744 5.77287 29.0439 5.95361 28.7025 5.76282C28.5619 5.69254 28.5117 5.69254 28.5519 5.76282C28.592 5.82307 28.4916 5.85319 28.2406 5.83311C28.0398 5.81303 27.849 5.74274 27.8289 5.68249C27.7988 5.58208 27.9996 5.52183 28.2908 5.562C28.3511 5.57204 28.4113 5.53187 28.4113 5.47163C28.4113 5.32101 28.5218 5.35113 28.8431 5.562ZM25.7504 5.67245C25.7202 5.72266 25.6098 5.7327 25.4893 5.70258C25.3387 5.66241 25.3186 5.62224 25.409 5.57204C25.5596 5.47163 25.8207 5.562 25.7504 5.67245ZM29.7167 5.58208C29.7167 5.64232 29.797 5.66241 29.9075 5.62224C30.0581 5.57204 30.0982 5.61221 30.0882 5.76282C30.0782 5.9034 30.038 5.93353 29.9577 5.86324C29.8874 5.81303 29.7167 5.79294 29.566 5.83311C29.315 5.89336 29.305 5.88331 29.4054 5.68249C29.5259 5.46158 29.7167 5.39129 29.7167 5.58208ZM32.0663 5.61221C32.0262 5.72266 32.0764 5.74274 32.3475 5.68249C32.5282 5.64232 32.7893 5.64232 32.9299 5.68249L33.1809 5.75279L32.9098 5.76282C32.7491 5.77287 32.6286 5.82307 32.6286 5.88331C32.6286 5.96364 32.5784 5.96365 32.478 5.87328C32.3575 5.77286 32.2973 5.77287 32.1868 5.86324C32.0864 5.95361 32.0262 5.95361 31.9759 5.87328C31.9057 5.76282 31.976 5.47163 32.0663 5.47163C32.0964 5.47163 32.0964 5.53188 32.0663 5.61221ZM26.3026 5.67245C26.3026 5.72266 26.2826 5.77286 26.2625 5.77286C26.2324 5.77286 26.1821 5.72266 26.152 5.67245C26.1219 5.6122 26.142 5.57204 26.1922 5.57204C26.2524 5.57204 26.3026 5.6122 26.3026 5.67245ZM31.1526 5.69254C31.2731 5.76283 31.4839 5.80299 31.6245 5.79295C31.8655 5.76283 31.8655 5.77286 31.6848 5.92348C31.4337 6.11427 31.3634 6.11427 31.2831 5.92348C31.253 5.84315 31.1124 5.77286 30.9718 5.77286C30.7911 5.77286 30.7308 5.81304 30.781 5.89337C30.8313 5.9737 30.8011 5.98374 30.6806 5.94357C30.5802 5.90341 30.4798 5.87328 30.4597 5.87328C30.3392 5.87328 30.4497 5.6825 30.6003 5.64233C30.8915 5.562 30.9317 5.57205 31.1526 5.69254ZM33.4319 5.77286C33.4319 5.82307 33.3817 5.87328 33.3215 5.87328C33.2713 5.87328 33.2512 5.82307 33.2813 5.77286C33.3114 5.71262 33.3616 5.67245 33.3918 5.67245C33.4119 5.67245 33.4319 5.71262 33.4319 5.77286ZM34.0846 5.77286C34.0545 5.82307 33.9842 5.87328 33.924 5.87328C33.8737 5.87328 33.8336 5.82307 33.8336 5.77286C33.8336 5.71262 33.9039 5.67245 33.9942 5.67245C34.0746 5.67245 34.1147 5.71262 34.0846 5.77286ZM34.7373 5.93352C34.7373 5.9536 34.6469 5.93352 34.5365 5.87328C34.426 5.81303 34.3356 5.74274 34.3356 5.71262C34.3356 5.69254 34.426 5.71262 34.5365 5.77286C34.6469 5.83311 34.7373 5.9034 34.7373 5.93352ZM35.1892 5.77286C35.2193 5.82307 35.1791 5.87328 35.0988 5.87328C35.0084 5.87328 34.9381 5.82307 34.9381 5.77286C34.9381 5.71262 34.9783 5.67245 35.0285 5.67245C35.0887 5.67245 35.159 5.71262 35.1892 5.77286ZM35.7916 5.77286C35.7615 5.82307 35.6711 5.84316 35.5908 5.80299C35.3799 5.7327 35.4 5.67245 35.6511 5.67245C35.7615 5.67245 35.8318 5.71262 35.7916 5.77286ZM32.3776 5.97369C32.4077 6.02389 32.3876 6.0741 32.3374 6.0741C32.2772 6.0741 32.227 6.02389 32.227 5.97369C32.227 5.91344 32.2471 5.87328 32.2671 5.87328C32.2973 5.87328 32.3475 5.91344 32.3776 5.97369ZM39.9085 5.97369C39.8784 6.02389 39.788 6.0741 39.7278 6.0741C39.6575 6.0741 39.6675 6.03394 39.7579 5.97369C39.9487 5.85319 39.9889 5.85319 39.9085 5.97369ZM40.4608 6.02389C40.4608 6.10422 40.3905 6.17451 40.3102 6.17451C40.0491 6.17451 40.1294 5.97369 40.4407 5.88331C40.4508 5.87327 40.4608 5.94356 40.4608 6.02389ZM34.2854 6.0741C34.2553 6.12431 34.1649 6.17451 34.1047 6.17451C34.0344 6.17451 34.0444 6.13435 34.1348 6.0741C34.3256 5.95361 34.3658 5.95361 34.2854 6.0741ZM34.9883 6.28496C34.9883 6.35525 34.898 6.43559 34.7875 6.46571C34.6268 6.49584 34.6168 6.47576 34.7172 6.35526C34.7775 6.27493 34.7975 6.17451 34.7574 6.12431C34.7172 6.08414 34.7574 6.06407 34.8377 6.09419C34.918 6.12431 34.9883 6.20463 34.9883 6.28496ZM44.9794 6.1946C44.9794 6.27493 44.8187 6.33518 44.5777 6.34522C44.3468 6.3653 44.1761 6.32513 44.1761 6.26489C44.1761 6.20464 44.2162 6.1946 44.2765 6.22472C44.3267 6.25484 44.4572 6.23476 44.5476 6.18455C44.7986 6.04397 44.9794 6.05403 44.9794 6.1946ZM43.3728 6.27493C43.3728 6.32513 43.3527 6.37534 43.3326 6.37534C43.3025 6.37534 43.2523 6.32513 43.2222 6.27493C43.192 6.21468 43.2121 6.17451 43.2623 6.17451C43.3226 6.17451 43.3728 6.21468 43.3728 6.27493ZM44.0255 6.47575C44.0556 6.52596 44.0154 6.57616 43.925 6.57616C43.8347 6.57616 43.7945 6.52596 43.8246 6.47575C43.8548 6.4155 43.905 6.37534 43.925 6.37534C43.9451 6.37534 43.9953 6.4155 44.0255 6.47575ZM7.22426 6.73682C7.22426 6.81715 7.17406 6.85732 7.12385 6.82719C7.0636 6.78703 7.04352 6.71674 7.07364 6.66654C7.16402 6.52596 7.22426 6.55608 7.22426 6.73682ZM6.85274 6.74687C6.78245 6.76695 6.66195 6.76695 6.6017 6.74687C6.53142 6.71675 6.58162 6.69667 6.7222 6.69667C6.86278 6.69667 6.91298 6.71675 6.85274 6.74687ZM7.67612 6.78703C7.79661 6.97781 7.62591 7.01799 7.45521 6.84728C7.29455 6.68662 7.29455 6.67658 7.44517 6.67658C7.53554 6.67658 7.646 6.72678 7.67612 6.78703ZM8.25851 6.88744C8.29868 7.0481 8.28864 7.06819 8.16814 6.96777C8.00748 6.83724 7.97736 6.67658 8.11793 6.67658C8.16814 6.67658 8.22839 6.76694 8.25851 6.88744ZM6.01931 6.8774C6.01931 6.92761 5.99923 6.97781 5.97914 6.97781C5.94902 6.97781 5.89882 6.92761 5.86869 6.8774C5.83857 6.81715 5.85865 6.77699 5.90886 6.77699C5.96911 6.77699 6.01931 6.81715 6.01931 6.8774ZM9.08189 6.8774C9.22247 6.94769 9.16223 6.95774 8.88107 6.90753C8.66016 6.87741 8.45933 6.83724 8.43925 6.81716C8.34888 6.73683 8.89111 6.79707 9.08189 6.8774ZM9.68437 6.97781C9.71449 7.02802 9.69441 7.07823 9.6442 7.07823C9.58396 7.07823 9.53375 7.02802 9.53375 6.97781C9.53375 6.91757 9.55383 6.8774 9.57392 6.8774C9.60404 6.8774 9.65425 6.91757 9.68437 6.97781ZM31.2731 8.78524C31.3032 8.83545 31.263 8.88565 31.1827 8.88565C31.0923 8.88565 31.022 8.83545 31.022 8.78524C31.022 8.72499 31.0622 8.68483 31.1124 8.68483C31.1727 8.68483 31.2429 8.72499 31.2731 8.78524ZM13.0783 9.41784C13.1084 9.49817 13.0683 9.55842 12.998 9.55842C12.9277 9.55842 12.8875 9.49817 12.9177 9.41784C12.9478 9.34755 12.9779 9.2873 12.998 9.2873C13.0181 9.2873 13.0482 9.34755 13.0783 9.41784ZM12.1445 9.53833C12.1445 9.70903 11.8633 9.73916 11.6424 9.5785C11.5219 9.49817 11.552 9.47809 11.7729 9.51826C11.9236 9.53834 12.0441 9.51825 12.0441 9.47809C12.0441 9.42788 12.0641 9.38771 12.0943 9.38771C12.1244 9.38771 12.1445 9.458 12.1445 9.53833ZM13.8314 9.5785C14.1025 9.80945 14.1126 9.88978 13.8515 9.81949C13.731 9.78937 13.6707 9.73917 13.7009 9.70904C13.721 9.67892 13.7009 9.59859 13.6406 9.51826C13.48 9.32747 13.5804 9.35759 13.8314 9.5785ZM13.5 9.66887C13.4699 9.699 13.3896 9.66887 13.3193 9.59858C13.2289 9.49817 13.239 9.48812 13.3795 9.54837C13.48 9.5785 13.5302 9.63875 13.5 9.66887ZM20.9306 9.87974C20.8703 9.92994 20.6795 9.77933 20.6795 9.67891C20.6795 9.62871 20.7398 9.63875 20.8201 9.70904C20.9004 9.77933 20.9406 9.85966 20.9306 9.87974ZM14.6046 9.78936C14.3335 9.90986 14.1728 9.90986 14.3535 9.78936C14.4339 9.73916 14.5745 9.69899 14.6548 9.69899C14.7552 9.69899 14.7351 9.72912 14.6046 9.78936ZM18.4504 9.87974C18.5709 9.88978 18.6713 9.92994 18.6713 9.98015C18.6713 10.0304 18.5508 10.0605 18.4002 10.0504C18.2395 10.0304 18.0889 10.0605 18.0588 10.1207C17.9584 10.2613 17.7676 10.1107 17.8278 9.95002C17.858 9.86969 17.9584 9.81949 18.0487 9.83957C18.1391 9.85965 18.3198 9.87974 18.4504 9.87974ZM20.2176 9.84961C20.4787 9.95002 20.3984 10.0906 20.0871 10.0906C19.7457 10.0906 19.585 9.92995 19.8461 9.85966C19.9465 9.82954 20.0369 9.80944 20.0469 9.7994C20.057 9.7994 20.1273 9.81949 20.2176 9.84961ZM21.4326 9.88978C21.4025 9.93998 21.2921 9.99019 21.2017 9.98015C21.0611 9.98015 21.0711 9.96007 21.2318 9.88978C21.4126 9.81614 21.4795 9.81614 21.4326 9.88978ZM19.4344 10.0103C19.4846 10.0806 19.4344 10.1006 19.2938 10.0705C19.1734 10.0404 19.0629 10.0605 19.0428 10.1207C19.0027 10.2412 18.7717 10.1308 18.7717 9.98015C18.7717 9.84961 19.3441 9.8697 19.4344 10.0103ZM23.4208 10.1408C23.5714 10.1609 23.7622 10.1709 23.8425 10.181C23.9229 10.181 23.9932 10.2312 23.9932 10.2713C23.9932 10.3617 23.23 10.3617 23.1296 10.2713C23.0995 10.2312 22.989 10.2513 22.8886 10.3115C22.748 10.4019 22.6677 10.4019 22.5271 10.2914C22.3765 10.1508 22.3765 10.1408 22.5974 10.0806C22.728 10.0404 22.9087 10.0404 22.989 10.0705C23.0694 10.1006 23.2601 10.1308 23.4208 10.1408ZM29.9476 10.0605C29.8773 10.0806 29.7568 10.0806 29.6966 10.0605C29.6263 10.0304 29.6765 10.0103 29.8171 10.0103C29.9577 10.0103 30.0079 10.0304 29.9476 10.0605ZM32.8295 10.5525C33.2813 10.5826 33.3918 10.6027 33.2612 10.6529C33.1909 10.683 33.1508 10.7634 33.1709 10.8236C33.1809 10.8939 33.1809 10.914 33.1608 10.8638C33.1307 10.8236 33.0504 10.7935 32.97 10.7935C32.8897 10.7935 32.8295 10.7533 32.8295 10.7132C32.8295 10.663 32.4378 10.6328 31.9659 10.6529C31.494 10.663 31.1325 10.6429 31.1626 10.6128C31.1927 10.5826 31.3434 10.5525 31.494 10.5425C31.6546 10.5224 31.8655 10.4822 31.9659 10.442C32.1065 10.3818 32.1366 10.3918 32.0864 10.4722C32.0462 10.5425 32.0563 10.5927 32.1065 10.5927C32.1667 10.5927 32.237 10.5123 32.2772 10.4119C32.3374 10.2613 32.3575 10.2613 32.4579 10.3918C32.5282 10.4722 32.6889 10.5525 32.8295 10.5525ZM33.7332 10.4923C33.7332 10.5525 33.7934 10.5927 33.8637 10.5726C33.934 10.5525 33.9942 10.5826 34.0043 10.6429C34.0143 10.6931 33.8838 10.7533 33.7231 10.7634C33.4119 10.7935 33.4018 10.7834 33.4922 10.5525C33.5625 10.3718 33.7332 10.3316 33.7332 10.4923ZM22.5874 10.5927C22.5874 10.6429 22.5673 10.6931 22.5472 10.6931C22.5171 10.6931 22.4669 10.6429 22.4368 10.5927C22.4066 10.5324 22.4267 10.4923 22.4769 10.4923C22.5372 10.4923 22.5874 10.5324 22.5874 10.5927ZM34.5365 10.6328C34.5365 10.663 34.4963 10.7132 34.4361 10.7433C34.3859 10.7734 34.3356 10.7533 34.3356 10.7031C34.3356 10.6429 34.3859 10.5927 34.4361 10.5927C34.4963 10.5927 34.5365 10.6127 34.5365 10.6328ZM34.8377 10.7935C34.8377 10.8437 34.7975 10.8939 34.7373 10.8939C34.6871 10.8939 34.6369 10.8437 34.6369 10.7935C34.6369 10.7332 34.6871 10.6931 34.7373 10.6931C34.7975 10.6931 34.8377 10.7332 34.8377 10.7935Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4949_86128">
+<rect width="50" height="11.1625" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/apps/web/app/compat/next/image.tsx b/apps/web/app/compat/next/image.tsx
index f9a858db2c..58e8765eb5 100644
--- a/apps/web/app/compat/next/image.tsx
+++ b/apps/web/app/compat/next/image.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 
 // Minimal shim so code using next/image compiles under React Router + Vite
@@ -14,7 +12,7 @@ type NextImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
   blurDataURL?: string;
 };
 
-const Image: React.FC<NextImageProps> = ({
+function Image({
   src,
   alt = "",
   fill,
@@ -23,11 +21,11 @@ const Image: React.FC<NextImageProps> = ({
   placeholder: _placeholder,
   blurDataURL: _blurDataURL,
   ...rest
-}) => {
+}: NextImageProps) {
   // If fill is true, apply object-fit styles
   const style = fill ? { objectFit: "cover" as const, width: "100%", height: "100%" } : rest.style;
 
   return <img src={src} alt={alt} {...rest} style={style} />;
-};
+}
 
 export default Image;
diff --git a/apps/web/app/compat/next/link.tsx b/apps/web/app/compat/next/link.tsx
index 4f42363272..b0bca4faf5 100644
--- a/apps/web/app/compat/next/link.tsx
+++ b/apps/web/app/compat/next/link.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { Link as RRLink } from "react-router";
 import { ensureTrailingSlash } from "./helper";
@@ -12,13 +10,8 @@ type NextLinkProps = React.ComponentProps<"a"> & {
   shallow?: boolean; // next.js prop, ignored
 };
 
-const Link: React.FC<NextLinkProps> = ({
-  href,
-  replace,
-  prefetch: _prefetch,
-  scroll: _scroll,
-  shallow: _shallow,
-  ...rest
-}) => <RRLink to={ensureTrailingSlash(href)} replace={replace} {...rest} />;
+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/web/app/compat/next/navigation.ts b/apps/web/app/compat/next/navigation.ts
index ecb076fed6..7a5f099842 100644
--- a/apps/web/app/compat/next/navigation.ts
+++ b/apps/web/app/compat/next/navigation.ts
@@ -1,5 +1,3 @@
-"use client";
-
 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 2baa63f455..af1063dbf1 100644
--- a/apps/web/app/compat/next/script.tsx
+++ b/apps/web/app/compat/next/script.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect } from "react";
 
 type ScriptProps = {
@@ -14,7 +12,7 @@ type ScriptProps = {
 };
 
 // Minimal shim for next/script that creates a script tag
-const Script: React.FC<ScriptProps> = ({ src, id, strategy: _strategy, onLoad, onError, children, ...rest }) => {
+function Script({ src, id, strategy: _strategy, onLoad, onError, children, ...rest }: ScriptProps) {
   useEffect(() => {
     if (src) {
       const script = document.createElement("script");
@@ -50,6 +48,6 @@ const Script: React.FC<ScriptProps> = ({ src, id, strategy: _strategy, onLoad, o
   }, [src, id, children, onLoad, onError, rest]);
 
   return null;
-};
+}
 
 export default Script;
diff --git a/apps/web/app/entry.client.tsx b/apps/web/app/entry.client.tsx
index 82ea2d9381..9cf1c32deb 100644
--- a/apps/web/app/entry.client.tsx
+++ b/apps/web/app/entry.client.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable import/order */
 import * as Sentry from "@sentry/react-router";
 import { startTransition, StrictMode } from "react";
 import { hydrateRoot } from "react-dom/client";
diff --git a/apps/web/app/error/dev.tsx b/apps/web/app/error/dev.tsx
index d4c30165bc..2e87859f43 100644
--- a/apps/web/app/error/dev.tsx
+++ b/apps/web/app/error/dev.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 // plane imports
 import { isRouteErrorResponse } from "react-router";
 import { Banner } from "@plane/propel/banner";
@@ -12,18 +10,20 @@ interface ErrorActionsProps {
   onReload?: () => void;
 }
 
-const ErrorActions: React.FC<ErrorActionsProps> = ({ onGoHome, onReload }) => (
-  <div className="flex gap-3 pt-2">
-    <Button variant="primary" size="md" onClick={onGoHome}>
-      Go to home
-    </Button>
-    {onReload && (
-      <Button variant="outline-primary" size="md" onClick={onReload}>
-        Reload page
+function ErrorActions({ onGoHome, onReload }: ErrorActionsProps) {
+  return (
+    <div className="flex gap-3 pt-2">
+      <Button variant="primary" size="lg" onClick={onGoHome}>
+        Go to home
       </Button>
-    )}
-  </div>
-);
+      {onReload && (
+        <Button variant="secondary" size="lg" onClick={onReload}>
+          Reload page
+        </Button>
+      )}
+    </div>
+  );
+}
 
 interface DevErrorComponentProps {
   error: unknown;
@@ -31,10 +31,10 @@ interface DevErrorComponentProps {
   onReload: () => void;
 }
 
-export const DevErrorComponent: React.FC<DevErrorComponentProps> = ({ error, onGoHome, onReload }) => {
+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="min-h-screen bg-surface-2 p-6 flex items-start justify-center transition-none">
         <div className="w-full max-w-4xl mt-12 space-y-4 transition-none">
           <Banner
             variant="error"
@@ -46,16 +46,16 @@ export const DevErrorComponent: React.FC<DevErrorComponentProps> = ({ error, onG
           <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="text-20 font-semibold text-red-500 mb-2">
                   {error.status} {error.statusText}
                 </h2>
-                <div className="h-px w-full bg-custom-border-200" />
+                <div className="h-px w-full bg-subtle-1" />
               </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 text-tertiary uppercase tracking-wide">Error Data</h3>
+                <div className="bg-layer-1 rounded-md p-4">
+                  <p className="text-13 text-secondary font-code">{error.data}</p>
                 </div>
               </div>
 
@@ -69,7 +69,7 @@ export const DevErrorComponent: React.FC<DevErrorComponentProps> = ({ error, onG
 
   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="min-h-screen bg-surface-2 p-6 flex items-start justify-center transition-none">
         <div className="w-full max-w-4xl mt-12 space-y-4 transition-none">
           <Banner
             variant="error"
@@ -80,22 +80,22 @@ export const DevErrorComponent: React.FC<DevErrorComponentProps> = ({ error, onG
           <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="text-20 font-semibold text-red-500 mb-2">Error</h2>
+                <div className="h-px w-full bg-subtle-1" />
               </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 text-tertiary uppercase tracking-wide">Message</h3>
+                <div className="bg-layer-1 rounded-md p-4">
+                  <p className="text-13 text-primary font-medium">{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 text-tertiary uppercase tracking-wide">Stack Trace</h3>
+                  <div className="bg-layer-1 rounded-md border border-subtle max-h-96 overflow-auto">
+                    <pre className="p-4 text-11 text-secondary font-code whitespace-pre-wrap break-words">
                       {error.stack}
                     </pre>
                   </div>
@@ -106,12 +106,12 @@ export const DevErrorComponent: React.FC<DevErrorComponentProps> = ({ error, onG
             </div>
           </Card>
 
-          <Card variant={ECardVariant.WITHOUT_SHADOW} className="!p-4 bg-custom-background-80 transition-none">
+          <Card variant={ECardVariant.WITHOUT_SHADOW} className="!p-4 bg-layer-1 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="size-5 text-tertiary flex-shrink-0 mt-0.5" />
               <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,7 +124,7 @@ export const DevErrorComponent: React.FC<DevErrorComponentProps> = ({ error, onG
   }
 
   return (
-    <div className="min-h-screen bg-custom-background-90 p-6 flex items-start justify-center transition-none">
+    <div className="min-h-screen bg-surface-2 p-6 flex items-start justify-center transition-none">
       <div className="w-full max-w-4xl mt-12 space-y-4 transition-none">
         <Banner
           variant="error"
@@ -136,12 +136,12 @@ export const DevErrorComponent: React.FC<DevErrorComponentProps> = ({ error, onG
         <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="text-20 font-semibold text-primary mb-2">Unknown Error</h2>
+              <div className="h-px w-full bg-subtle-1" />
             </div>
 
-            <div className="bg-custom-background-80 rounded-md p-4">
-              <p className="text-sm text-custom-text-200">
+            <div className="bg-layer-1 rounded-md 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>
@@ -152,4 +152,4 @@ export const DevErrorComponent: React.FC<DevErrorComponentProps> = ({ error, onG
       </div>
     </div>
   );
-};
+}
diff --git a/apps/web/app/error/index.tsx b/apps/web/app/error/index.tsx
index b577f866be..d7da7a8dbc 100644
--- a/apps/web/app/error/index.tsx
+++ b/apps/web/app/error/index.tsx
@@ -1,12 +1,10 @@
-"use client";
-
 // hooks
 import { useAppRouter } from "@/hooks/use-app-router";
 // layouts
 import { DevErrorComponent } from "./dev";
 import { ProdErrorComponent } from "./prod";
 
-export const CustomErrorComponent: React.FC<{ error: unknown }> = ({ error }) => {
+export function CustomErrorComponent({ error }: { error: unknown }) {
   // router
   const router = useAppRouter();
 
@@ -18,4 +16,4 @@ export const CustomErrorComponent: React.FC<{ error: unknown }> = ({ error }) =>
   }
 
   return <ProdErrorComponent onGoHome={handleGoHome} />;
-};
+}
diff --git a/apps/web/app/error/prod.tsx b/apps/web/app/error/prod.tsx
index e30c58bddf..75148e7838 100644
--- a/apps/web/app/error/prod.tsx
+++ b/apps/web/app/error/prod.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useTheme } from "next-themes";
 // plane imports
 import { Button } from "@plane/propel/button";
@@ -32,7 +30,7 @@ interface ProdErrorComponentProps {
   onGoHome: () => void;
 }
 
-export const ProdErrorComponent: React.FC<ProdErrorComponentProps> = ({ onGoHome }) => {
+export function ProdErrorComponent({ onGoHome }: ProdErrorComponentProps) {
   // hooks
   const { resolvedTheme } = useTheme();
 
@@ -41,7 +39,7 @@ export const ProdErrorComponent: React.FC<ProdErrorComponentProps> = ({ onGoHome
 
   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 h-full w-full max-w-xl flex flex-col gap-2 items-center justify-center gap-y-6 bg-surface-1 text-center px-6">
         <div className="relative w-full">
           <img
             src={maintenanceModeImage}
@@ -53,10 +51,8 @@ export const ProdErrorComponent: React.FC<ProdErrorComponentProps> = ({ onGoHome
         </div>
         <div className="w-full relative flex flex-col gap-4 mt-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-18 font-semibold text-primary text-left">&#x1F6A7; Looks like something went wrong!</h1>
+            <span className="text-14 font-medium text-secondary text-left">
               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>
@@ -69,7 +65,7 @@ export const ProdErrorComponent: React.FC<ProdErrorComponentProps> = ({ onGoHome
                   href={link.value}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-custom-primary-100 hover:underline text-sm"
+                  className="text-accent-primary hover:underline text-13"
                 >
                   {link.label}
                 </a>
@@ -78,7 +74,7 @@ export const ProdErrorComponent: React.FC<ProdErrorComponentProps> = ({ onGoHome
           </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>
@@ -86,4 +82,4 @@ export const ProdErrorComponent: React.FC<ProdErrorComponentProps> = ({ onGoHome
       </div>
     </DefaultLayout>
   );
-};
+}
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 824b19b91e..04a46a2058 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -76,12 +76,7 @@ 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"
-            )}
-          >
+          <div className={cn("h-screen w-full overflow-hidden relative flex flex-col", "app-container")}>
             <main className="w-full h-full overflow-hidden relative">{children}</main>
           </div>
         </AppProvider>
diff --git a/apps/web/app/not-found.tsx b/apps/web/app/not-found.tsx
index 6a4e808542..44290d63cd 100644
--- a/apps/web/app/not-found.tsx
+++ b/apps/web/app/not-found.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import Link from "next/link";
 // ui
 import { Button } from "@plane/propel/button";
@@ -13,30 +11,32 @@ export const meta: Route.MetaFunction = () => [
   { name: "robots", content: "noindex, nofollow" },
 ];
 
-const PageNotFound = () => (
-  <div className={`h-screen w-full overflow-hidden bg-custom-background-100`}>
-    <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" />
+function PageNotFound() {
+  return (
+    <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-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="secondary" size="lg">
+                Go to Home
+              </Button>
+            </span>
+          </Link>
         </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">
-            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">
-              Go to Home
-            </Button>
-          </span>
-        </Link>
       </div>
     </div>
-  </div>
-);
+  );
+}
 
 export default PageNotFound;
diff --git a/apps/web/app/provider.tsx b/apps/web/app/provider.tsx
index 125f502160..4d23fed9d3 100644
--- a/apps/web/app/provider.tsx
+++ b/apps/web/app/provider.tsx
@@ -1,8 +1,5 @@
-"use client";
-
-import type { FC, ReactNode } from "react";
 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";
@@ -12,48 +9,57 @@ import { Toast } from "@plane/propel/toast";
 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 StoreWrapper = lazy(() => import("@/lib/wrappers/store-wrapper"));
-const PostHogProvider = lazy(() => import("@/lib/posthog-provider"));
-const IntercomProvider = lazy(() => import("@/lib/intercom-provider"));
+const AppProgressBar = lazy(function AppProgressBar() {
+  return import("@/lib/b-progress/AppProgressBar");
+});
+
+const StoreWrapper = lazy(function StoreWrapper() {
+  return import("@/lib/wrappers/store-wrapper");
+});
+
+const InstanceWrapper = lazy(function InstanceWrapper() {
+  return import("@/lib/wrappers/instance-wrapper");
+});
+
+const ChatSupportModal = lazy(function ChatSupportModal() {
+  return import("@/components/global/chat-support-modal");
+});
+
+const PostHogProvider = lazy(function PostHogProvider() {
+  return import("@/lib/posthog-provider");
+});
 
 export interface IAppProvider {
-  children: ReactNode;
+  children: React.ReactNode;
 }
 
-const ToastWithTheme = () => {
-  const { resolvedTheme } = useTheme();
-  return <Toast theme={resolveGeneralTheme(resolvedTheme)} />;
-};
-
-export const AppProvider: FC<IAppProvider> = (props) => {
+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>
-                <IntercomProvider>
-                  <PostHogProvider>
-                    <SWRConfig value={WEB_SWR_CONFIG}>{children}</SWRConfig>
-                  </PostHogProvider>
-                </IntercomProvider>
+                <ChatSupportModal />
+                <PostHogProvider>
+                  <SWRConfig value={WEB_SWR_CONFIG}>{children}</SWRConfig>
+                </PostHogProvider>
               </Suspense>
             </InstanceWrapper>
           </StoreWrapper>
         </TranslationProvider>
-      </ThemeProvider>
+      </>
     </StoreProvider>
   );
-};
+}
diff --git a/apps/web/app/root.tsx b/apps/web/app/root.tsx
index fe1c36765d..2fbfd46c64 100644
--- a/apps/web/app/root.tsx
+++ b/apps/web/app/root.tsx
@@ -3,6 +3,7 @@ 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 +15,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 +40,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 +68,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,12 +116,25 @@ export const meta: Route.MetaFunction = () => [
 ];
 
 export default function Root() {
-  return <Outlet />;
+  return (
+    <AppProvider>
+      <div className={cn("h-screen w-full overflow-hidden bg-canvas relative flex flex-col", "desktop-app-container")}>
+        <main className="w-full h-full overflow-hidden relative">
+          <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 bg-canvas h-screen w-full items-center justify-center">
       <LogoSpinner />
     </div>
   );
diff --git a/apps/web/app/routes.ts b/apps/web/app/routes.ts
index 2589937839..e862bd15f4 100644
--- a/apps/web/app/routes.ts
+++ b/apps/web/app/routes.ts
@@ -2,75 +2,7 @@ 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 9aa20973b8..ccb9d78d37 100644
--- a/apps/web/app/routes/core.ts
+++ b/apps/web/app/routes/core.ts
@@ -108,9 +108,13 @@ export const coreRoutes: RouteConfigEntry[] = [
           ),
         ]),
 
-        // ====================================================================
-        // PROJECT LEVEL ROUTES
-        // ====================================================================
+        // Archived Projects
+        layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/archives/layout.tsx", [
+          route(
+            ":workspaceSlug/projects/archives",
+            "./(all)/[workspaceSlug]/(projects)/projects/(detail)/archives/page.tsx"
+          ),
+        ]),
 
         // --------------------------------------------------------------------
         // PROJECT LEVEL ROUTES
@@ -122,39 +126,20 @@ export const coreRoutes: RouteConfigEntry[] = [
         ]),
 
         // Project Detail
-        layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/layout.tsx", [
-          // Archived Projects
-          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/archives/layout.tsx", [
-            route(
-              ":workspaceSlug/projects/archives",
-              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/archives/page.tsx"
-            ),
-          ]),
-
-          // Project Issues
-          // Issues List
+        layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/layout.tsx", [
+          // Project Issues List
           layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/layout.tsx", [
             route(
               ":workspaceSlug/projects/:projectId/issues",
               "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/page.tsx"
             ),
           ]),
-
           // Issue Detail
           route(
             ":workspaceSlug/projects/:projectId/issues/:issueId",
             "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx"
           ),
 
-          // Project Cycles
-          // Cycles List
-          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/layout.tsx", [
-            route(
-              ":workspaceSlug/projects/:projectId/cycles",
-              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx"
-            ),
-          ]),
-
           // Cycle Detail
           layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/layout.tsx", [
             route(
@@ -163,12 +148,11 @@ export const coreRoutes: RouteConfigEntry[] = [
             ),
           ]),
 
-          // Project Modules
-          // Modules List
-          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/layout.tsx", [
+          // Cycles List
+          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/layout.tsx", [
             route(
-              ":workspaceSlug/projects/:projectId/modules",
-              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx"
+              ":workspaceSlug/projects/:projectId/cycles",
+              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx"
             ),
           ]),
 
@@ -180,12 +164,11 @@ export const coreRoutes: RouteConfigEntry[] = [
             ),
           ]),
 
-          // Project Views
-          // Views List
-          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/layout.tsx", [
+          // Modules List
+          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/layout.tsx", [
             route(
-              ":workspaceSlug/projects/:projectId/views",
-              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx"
+              ":workspaceSlug/projects/:projectId/modules",
+              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx"
             ),
           ]),
 
@@ -197,12 +180,11 @@ export const coreRoutes: RouteConfigEntry[] = [
             ),
           ]),
 
-          // Project Pages
-          // Pages List
-          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/layout.tsx", [
+          // Views List
+          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/layout.tsx", [
             route(
-              ":workspaceSlug/projects/:projectId/pages",
-              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx"
+              ":workspaceSlug/projects/:projectId/views",
+              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx"
             ),
           ]),
 
@@ -214,49 +196,53 @@ export const coreRoutes: RouteConfigEntry[] = [
             ),
           ]),
 
-          // Project Intake
+          // Pages List
+          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/layout.tsx", [
+            route(
+              ":workspaceSlug/projects/:projectId/pages",
+              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx"
+            ),
+          ]),
+          // Intake list
           layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/layout.tsx", [
             route(
               ":workspaceSlug/projects/:projectId/intake",
               "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/intake/page.tsx"
             ),
           ]),
+        ]),
 
-          // Project Archives - Issues, Cycles, Modules
-          // Project Archives - Issues - List
-          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/layout.tsx", [
-            route(
-              ":workspaceSlug/projects/:projectId/archives/issues",
-              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/page.tsx"
-            ),
-          ]),
-
-          // Project Archives - Issues - Detail
-          layout(
-            "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/layout.tsx",
-            [
-              route(
-                ":workspaceSlug/projects/:projectId/archives/issues/:archivedIssueId",
-                "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx"
-              ),
-            ]
+        // Project Archives - Issues, Cycles, Modules
+        // Project Archives - Issues - List
+        layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/layout.tsx", [
+          route(
+            ":workspaceSlug/projects/:projectId/archives/issues",
+            "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/page.tsx"
           ),
+        ]),
 
-          // Project Archives - Cycles
-          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/layout.tsx", [
-            route(
-              ":workspaceSlug/projects/:projectId/archives/cycles",
-              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/page.tsx"
-            ),
-          ]),
+        // Project Archives - Issues - Detail
+        layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/layout.tsx", [
+          route(
+            ":workspaceSlug/projects/:projectId/archives/issues/:archivedIssueId",
+            "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx"
+          ),
+        ]),
 
-          // Project Archives - Modules
-          layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/layout.tsx", [
-            route(
-              ":workspaceSlug/projects/:projectId/archives/modules",
-              "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/page.tsx"
-            ),
-          ]),
+        // Project Archives - Cycles
+        layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/layout.tsx", [
+          route(
+            ":workspaceSlug/projects/:projectId/archives/cycles",
+            "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/page.tsx"
+          ),
+        ]),
+
+        // Project Archives - Modules
+        layout("./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/layout.tsx", [
+          route(
+            ":workspaceSlug/projects/:projectId/archives/modules",
+            "./(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/page.tsx"
+          ),
         ]),
       ]),
 
@@ -325,44 +311,46 @@ export const coreRoutes: RouteConfigEntry[] = [
         // --------------------------------------------------------------------
 
         layout("./(all)/[workspaceSlug]/(settings)/settings/projects/layout.tsx", [
-          // CORE Routes
-          // Project Settings
+          // No Projects available page
           route(":workspaceSlug/settings/projects", "./(all)/[workspaceSlug]/(settings)/settings/projects/page.tsx"),
-          route(
-            ":workspaceSlug/settings/projects/:projectId",
-            "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/page.tsx"
-          ),
-          // Project Members
-          route(
-            ":workspaceSlug/settings/projects/:projectId/members",
-            "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/page.tsx"
-          ),
-          // Project Features
-          route(
-            ":workspaceSlug/settings/projects/:projectId/features",
-            "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/page.tsx"
-          ),
-          // Project States
-          route(
-            ":workspaceSlug/settings/projects/:projectId/states",
-            "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/page.tsx"
-          ),
-          // Project Labels
-          route(
-            ":workspaceSlug/settings/projects/:projectId/labels",
-            "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/labels/page.tsx"
-          ),
-          // Project Estimates
-          route(
-            ":workspaceSlug/settings/projects/:projectId/estimates",
-            "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/page.tsx"
-          ),
-          // Project Automations
-          layout("./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/layout.tsx", [
+          layout("./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/layout.tsx", [
+            // Project Settings
             route(
-              ":workspaceSlug/settings/projects/:projectId/automations",
-              "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/page.tsx"
+              ":workspaceSlug/settings/projects/:projectId",
+              "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/page.tsx"
             ),
+            // Project Members
+            route(
+              ":workspaceSlug/settings/projects/:projectId/members",
+              "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/members/page.tsx"
+            ),
+            // Project Features
+            route(
+              ":workspaceSlug/settings/projects/:projectId/features",
+              "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/features/page.tsx"
+            ),
+            // Project States
+            route(
+              ":workspaceSlug/settings/projects/:projectId/states",
+              "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/states/page.tsx"
+            ),
+            // Project Labels
+            route(
+              ":workspaceSlug/settings/projects/:projectId/labels",
+              "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/labels/page.tsx"
+            ),
+            // Project Estimates
+            route(
+              ":workspaceSlug/settings/projects/:projectId/estimates",
+              "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/estimates/page.tsx"
+            ),
+            // Project Automations
+            layout("./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/layout.tsx", [
+              route(
+                ":workspaceSlug/settings/projects/:projectId/automations",
+                "./(all)/[workspaceSlug]/(settings)/settings/projects/[projectId]/automations/page.tsx"
+              ),
+            ]),
           ]),
         ]),
       ]),
diff --git a/apps/web/app/routes/helper.ts b/apps/web/app/routes/helper.ts
new file mode 100644
index 0000000000..5db1c8855a
--- /dev/null
+++ b/apps/web/app/routes/helper.ts
@@ -0,0 +1,70 @@
+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/ce/components/active-cycles/root.tsx b/apps/web/ce/components/active-cycles/root.tsx
index caad61a0a2..ae0aa9b1f7 100644
--- a/apps/web/ce/components/active-cycles/root.tsx
+++ b/apps/web/ce/components/active-cycles/root.tsx
@@ -1,4 +1,6 @@
 // local imports
 import { WorkspaceActiveCyclesUpgrade } from "./workspace-active-cycles-upgrade";
 
-export const WorkspaceActiveCyclesRoot = () => <WorkspaceActiveCyclesUpgrade />;
+export function WorkspaceActiveCyclesRoot() {
+  return <WorkspaceActiveCyclesUpgrade />;
+}
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 982e15220a..03c9a05f32 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { AlertOctagon, BarChart4, CircleDashed, Folder, Microscope, Search } from "lucide-react";
 // plane imports
@@ -63,7 +61,7 @@ export const WORKSPACE_ACTIVE_CYCLES_DETAILS = [
   },
 ];
 
-export const WorkspaceActiveCyclesUpgrade = observer(() => {
+export const WorkspaceActiveCyclesUpgrade = observer(function WorkspaceActiveCyclesUpgrade() {
   const { t } = useTranslation();
   // store hooks
   const {
@@ -82,17 +80,17 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
       >
         <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>
@@ -115,12 +113,12 @@ export const WorkspaceActiveCyclesUpgrade = observer(() => {
       </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 key={item.title} className="flex min-h-32 w-full flex-col gap-2 rounded-md bg-layer-1 p-4">
             <div className="flex gap-2 justify-between">
               <h3 className="font-medium">{t(item.key)}</h3>
               <item.icon className="mt-1 h-4 w-4 text-blue-500" />
             </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/use-analytics-tabs.tsx b/apps/web/ce/components/analytics/use-analytics-tabs.tsx
new file mode 100644
index 0000000000..71f1ab15fd
--- /dev/null
+++ b/apps/web/ce/components/analytics/use-analytics-tabs.tsx
@@ -0,0 +1,11 @@
+import { useMemo } from "react";
+import { useTranslation } from "@plane/i18n";
+import { getAnalyticsTabs } from "./tabs";
+
+export const useAnalyticsTabs = (workspaceSlug: string) => {
+  const { t } = useTranslation();
+
+  const analyticsTabs = useMemo(() => getAnalyticsTabs(t), [t]);
+
+  return analyticsTabs;
+};
diff --git a/apps/web/ce/components/app-rail/app-rail-hoc.tsx b/apps/web/ce/components/app-rail/app-rail-hoc.tsx
new file mode 100644
index 0000000000..63d13e5c2e
--- /dev/null
+++ b/apps/web/ce/components/app-rail/app-rail-hoc.tsx
@@ -0,0 +1,32 @@
+// hoc/withDockItems.tsx
+import React from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { PlaneNewIcon } from "@plane/propel/icons";
+import type { AppSidebarItemData } from "@/components/sidebar/sidebar-item";
+import { useWorkspacePaths } from "@/hooks/use-workspace-paths";
+
+type WithDockItemsProps = {
+  dockItems: (AppSidebarItemData & { shouldRender: boolean })[];
+};
+
+export function withDockItems<P extends WithDockItemsProps>(WrappedComponent: React.ComponentType<P>) {
+  const ComponentWithDockItems = observer(function ComponentWithDockItems(props: Omit<P, keyof WithDockItemsProps>) {
+    const { workspaceSlug } = useParams();
+    const { isProjectsPath, isNotificationsPath } = useWorkspacePaths();
+
+    const dockItems: (AppSidebarItemData & { shouldRender: boolean })[] = [
+      {
+        label: "Projects",
+        icon: <PlaneNewIcon className="size-5" />,
+        href: `/${workspaceSlug}/`,
+        isActive: isProjectsPath && !isNotificationsPath,
+        shouldRender: true,
+      },
+    ];
+
+    return <WrappedComponent {...(props as P)} dockItems={dockItems} />;
+  });
+
+  return ComponentWithDockItems;
+}
diff --git a/apps/web/ce/components/app-rail/index.ts b/apps/web/ce/components/app-rail/index.ts
index 1efe34c51e..c29a9bf13a 100644
--- a/apps/web/ce/components/app-rail/index.ts
+++ b/apps/web/ce/components/app-rail/index.ts
@@ -1 +1 @@
-export * from "./root";
+export * from "./app-rail-hoc";
diff --git a/apps/web/ce/components/app-rail/root.tsx b/apps/web/ce/components/app-rail/root.tsx
deleted file mode 100644
index 259764b269..0000000000
--- a/apps/web/ce/components/app-rail/root.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-"use client";
-import React from "react";
-
-export const AppRailRoot = () => <></>;
diff --git a/apps/web/ce/components/automations/list/wrapper.tsx b/apps/web/ce/components/automations/list/wrapper.tsx
index 1db9b9da6c..80b819aa09 100644
--- a/apps/web/ce/components/automations/list/wrapper.tsx
+++ b/apps/web/ce/components/automations/list/wrapper.tsx
@@ -4,4 +4,6 @@ type Props = {
   children: React.ReactNode;
 };
 
-export const AutomationsListWrapper: React.FC<Props> = (props) => <>{props.children}</>;
+export function AutomationsListWrapper(props: Props) {
+  return <>{props.children}</>;
+}
diff --git a/apps/web/ce/components/automations/root.tsx b/apps/web/ce/components/automations/root.tsx
index e7f15288b0..9dbb44942f 100644
--- a/apps/web/ce/components/automations/root.tsx
+++ b/apps/web/ce/components/automations/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import React from "react";
 
@@ -8,4 +6,6 @@ export type TCustomAutomationsRootProps = {
   workspaceSlug: string;
 };
 
-export const CustomAutomationsRoot: FC<TCustomAutomationsRootProps> = () => <></>;
+export function CustomAutomationsRoot(_props: TCustomAutomationsRootProps) {
+  return <></>;
+}
diff --git a/apps/web/ce/components/breadcrumbs/common.tsx b/apps/web/ce/components/breadcrumbs/common.tsx
index 86a123915a..397de3db55 100644
--- a/apps/web/ce/components/breadcrumbs/common.tsx
+++ b/apps/web/ce/components/breadcrumbs/common.tsx
@@ -1,32 +1,17 @@
-"use client";
-
-import type { FC } from "react";
-// plane imports
-import type { EProjectFeatureKey } from "@plane/constants";
 // local components
+import { useProjectNavigationPreferences } from "@/hooks/use-navigation-preferences";
 import { ProjectBreadcrumb } from "./project";
-import { ProjectFeatureBreadcrumb } from "./project-feature";
 
 type TCommonProjectBreadcrumbProps = {
   workspaceSlug: string;
   projectId: string;
-  featureKey?: EProjectFeatureKey;
-  isLast?: boolean;
 };
 
-export const CommonProjectBreadcrumbs: FC<TCommonProjectBreadcrumbProps> = (props) => {
-  const { workspaceSlug, projectId, featureKey, isLast = false } = props;
-  return (
-    <>
-      <ProjectBreadcrumb workspaceSlug={workspaceSlug} projectId={projectId} />
-      {featureKey && (
-        <ProjectFeatureBreadcrumb
-          workspaceSlug={workspaceSlug?.toString()}
-          projectId={projectId?.toString()}
-          featureKey={featureKey}
-          isLast={isLast}
-        />
-      )}
-    </>
-  );
-};
+export function CommonProjectBreadcrumbs(props: TCommonProjectBreadcrumbProps) {
+  const { workspaceSlug, projectId } = props;
+  // preferences
+  const { preferences: projectPreferences } = useProjectNavigationPreferences();
+
+  if (projectPreferences.navigationMode === "horizontal") 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 cad4338d35..51d26d8ea6 100644
--- a/apps/web/ce/components/breadcrumbs/project-feature.tsx
+++ b/apps/web/ce/components/breadcrumbs/project-feature.tsx
@@ -1,17 +1,13 @@
-"use client";
-
-import type { FC } from "react";
+import type { ReactNode } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import { EProjectFeatureKey } from "@plane/constants";
-import type { ISvgIcons } from "@plane/propel/icons";
-import { BreadcrumbNavigationDropdown, Breadcrumbs } from "@plane/ui";
+import type { EProjectFeatureKey } from "@plane/constants";
+import { Breadcrumbs } from "@plane/ui";
 // components
-import { SwitcherLabel } from "@/components/common/switcher-label";
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import type { TNavigationItem } from "@/components/workspace/sidebar/project-navigation";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
-import { useAppRouter } from "@/hooks/use-app-router";
 // local imports
 import { getProjectFeatureNavigation } from "../projects/navigation/helper";
 
@@ -23,10 +19,10 @@ type TProjectFeatureBreadcrumbProps = {
   additionalNavigationItems?: TNavigationItem[];
 };
 
-export const ProjectFeatureBreadcrumb = observer((props: TProjectFeatureBreadcrumbProps) => {
+export const ProjectFeatureBreadcrumb = observer(function ProjectFeatureBreadcrumb(
+  props: TProjectFeatureBreadcrumbProps
+) {
   const { workspaceSlug, projectId, featureKey, isLast = false, additionalNavigationItems } = props;
-  // router
-  const router = useAppRouter();
   // store hooks
   const { getPartialProjectById } = useProject();
   // derived values
@@ -39,27 +35,21 @@ export const ProjectFeatureBreadcrumb = observer((props: TProjectFeatureBreadcru
   // if additional navigation items are provided, add them to the navigation items
   const allNavigationItems = [...(additionalNavigationItems || []), ...navigationItems];
 
+  const currentNavigationItem = allNavigationItems.find((item) => item.key === featureKey);
+  const icon = currentNavigationItem?.icon as ReactNode;
+  const name = currentNavigationItem?.name;
+  const href = currentNavigationItem?.href;
+
   return (
     <>
       <Breadcrumbs.Item
         component={
-          <BreadcrumbNavigationDropdown
-            selectedItemKey={featureKey}
-            navigationItems={allNavigationItems
-              .filter((item) => item.shouldRender)
-              .map((item) => ({
-                key: item.key,
-                title: item.name,
-                customContent: <SwitcherLabel name={item.name} LabelIcon={item.icon as FC<ISvgIcons>} />,
-                action: () => router.push(item.href),
-                icon: item.icon as FC<ISvgIcons>,
-              }))}
-            handleOnClick={() => {
-              router.push(
-                `/${workspaceSlug}/projects/${projectId}/${featureKey === EProjectFeatureKey.WORK_ITEMS ? "issues" : featureKey}/`
-              );
-            }}
+          <BreadcrumbLink
+            key={featureKey}
+            label={name}
             isLast={isLast}
+            href={href}
+            icon={<Breadcrumbs.Icon>{icon}</Breadcrumbs.Icon>}
           />
         }
         showSeparator={false}
diff --git a/apps/web/ce/components/breadcrumbs/project.tsx b/apps/web/ce/components/breadcrumbs/project.tsx
index b1137d3299..fc17a5eb1f 100644
--- a/apps/web/ce/components/breadcrumbs/project.tsx
+++ b/apps/web/ce/components/breadcrumbs/project.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ProjectIcon } from "@plane/propel/icons";
@@ -18,7 +16,7 @@ type TProjectBreadcrumbProps = {
   handleOnClick?: () => void;
 };
 
-export const ProjectBreadcrumb = observer((props: TProjectBreadcrumbProps) => {
+export const ProjectBreadcrumb = observer(function ProjectBreadcrumb(props: TProjectBreadcrumbProps) {
   const { workspaceSlug, projectId, handleOnClick } = props;
   // router
   const router = useAppRouter();
@@ -51,7 +49,7 @@ export const ProjectBreadcrumb = observer((props: TProjectBreadcrumbProps) => {
 
   // helpers
   const renderIcon = (projectDetails: TProject) => (
-    <span className="grid place-items-center flex-shrink-0 h-4 w-4">
+    <span className="grid place-items-center flex-shrink-0 size-4">
       <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 0000000000..64c466fbdf
--- /dev/null
+++ b/apps/web/ce/components/browse/workItem-detail.tsx
@@ -0,0 +1,23 @@
+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/work-item-actions/change-state-list.tsx b/apps/web/ce/components/command-palette/actions/work-item-actions/change-state-list.tsx
index fb3595d565..091aaea3f5 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
@@ -14,7 +14,7 @@ export type TChangeWorkItemStateListProps = {
   handleStateChange: (stateId: string) => void;
 };
 
-export const ChangeWorkItemStateList = observer((props: TChangeWorkItemStateListProps) => {
+export const ChangeWorkItemStateList = observer(function ChangeWorkItemStateList(props: TChangeWorkItemStateListProps) {
   const { projectId, currentStateId, handleStateChange } = props;
   // store hooks
   const { getProjectStates } = useProjectState();
diff --git a/apps/web/ce/components/command-palette/helpers.tsx b/apps/web/ce/components/command-palette/helpers.tsx
index 1ad7e6f498..714f9a7e59 100644
--- a/apps/web/ce/components/command-palette/helpers.tsx
+++ b/apps/web/ce/components/command-palette/helpers.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { LayoutGrid } from "lucide-react";
 // plane imports
 import { CycleIcon, ModuleIcon, PageIcon, ProjectIcon, ViewsIcon } from "@plane/propel/icons";
@@ -28,7 +26,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) =>
@@ -44,7 +42,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>
@@ -63,7 +61,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) =>
@@ -74,7 +72,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) =>
@@ -85,7 +83,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/modals/project-level.tsx b/apps/web/ce/components/command-palette/modals/project-level.tsx
index 6b9e8000d1..baf430f55e 100644
--- a/apps/web/ce/components/command-palette/modals/project-level.tsx
+++ b/apps/web/ce/components/command-palette/modals/project-level.tsx
@@ -14,7 +14,7 @@ export type TProjectLevelModalsProps = {
   projectId: string;
 };
 
-export const ProjectLevelModals = observer((props: TProjectLevelModalsProps) => {
+export const ProjectLevelModals = observer(function ProjectLevelModals(props: TProjectLevelModalsProps) {
   const { workspaceSlug, projectId } = props;
   // store hooks
   const {
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 d06602d7e2..8f71596c7f 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
@@ -19,7 +19,7 @@ export type TWorkItemLevelModalsProps = {
   workItemIdentifier: string | undefined;
 };
 
-export const WorkItemLevelModals: FC<TWorkItemLevelModalsProps> = observer((props) => {
+export const WorkItemLevelModals = observer(function WorkItemLevelModals(props: TWorkItemLevelModalsProps) {
   const { workItemIdentifier } = props;
   // router
   const { workspaceSlug, cycleId, moduleId } = useParams();
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 a6c89776dd..6a82d54e91 100644
--- a/apps/web/ce/components/command-palette/modals/workspace-level.tsx
+++ b/apps/web/ce/components/command-palette/modals/workspace-level.tsx
@@ -8,7 +8,7 @@ export type TWorkspaceLevelModalsProps = {
   workspaceSlug: string;
 };
 
-export const WorkspaceLevelModals = observer((props: TWorkspaceLevelModalsProps) => {
+export const WorkspaceLevelModals = observer(function WorkspaceLevelModals(props: TWorkspaceLevelModalsProps) {
   const { workspaceSlug } = props;
   // store hooks
   const { isCreateProjectModalOpen, toggleCreateProjectModal } = useCommandPalette();
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 ad5f43860b..e92e54e2e6 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,8 +1,8 @@
 // local imports
-import type { TPowerKContextTypeExtended } from "../types";
+import type { TPowerKContextType } from "@/components/power-k/core/types";
 
 type TArgs = {
-  activeContext: TPowerKContextTypeExtended | null;
+  activeContext: TPowerKContextType | null;
 };
 
 export const useExtendedContextIndicator = (_args: TArgs): string | null => null;
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 2c6c0e8913..12833d9df3 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
@@ -6,6 +6,8 @@ import type { TPowerKContextTypeExtended } from "../../types";
 
 export const CONTEXT_ENTITY_MAP_EXTENDED: Record<TPowerKContextTypeExtended, TContextEntityMap> = {};
 
-export const PowerKContextBasedActionsExtended: React.FC<ContextBasedActionsProps> = () => null;
+export function PowerKContextBasedActionsExtended(_props: ContextBasedActionsProps) {
+  return null;
+}
 
 export const usePowerKContextBasedExtendedActions = (): TPowerKCommandConfig[] => [];
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 5fbc91edf8..2478fdf4f0 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane types
 import { StateGroupIcon } from "@plane/propel/icons";
@@ -15,7 +13,9 @@ export type TPowerKProjectStatesMenuItemsProps = {
   workspaceSlug: string;
 };
 
-export const PowerKProjectStatesMenuItems: React.FC<TPowerKProjectStatesMenuItemsProps> = observer((props) => {
+export const PowerKProjectStatesMenuItems = observer(function PowerKProjectStatesMenuItems(
+  props: TPowerKProjectStatesMenuItemsProps
+) {
   const { handleSelect, selectedStateId, states } = props;
 
   return (
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 cc8ca10d51..c4badccd4f 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
@@ -13,7 +13,7 @@ export type TPowerKModalNoSearchResultsCommandProps = {
   updateSearchTerm: (value: string) => void;
 };
 
-export const PowerKModalNoSearchResultsCommand: React.FC<TPowerKModalNoSearchResultsCommandProps> = (props) => {
+export function PowerKModalNoSearchResultsCommand(props: TPowerKModalNoSearchResultsCommandProps) {
   const { updateSearchTerm } = props;
   // translation
   const { t } = useTranslation();
@@ -26,11 +26,11 @@ export const PowerKModalNoSearchResultsCommand: React.FC<TPowerKModalNoSearchRes
         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("")}
       />
     </Command.Group>
   );
-};
+}
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 c09dd41a10..90d5b5f20a 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,5 +1,3 @@
-"use client";
-
 // components
 import type { TPowerKSearchResultGroupDetails } from "@/components/power-k/ui/modal/search-results-map";
 // local imports
diff --git a/apps/web/ce/components/comments/comment-block.tsx b/apps/web/ce/components/comments/comment-block.tsx
index c5c9b442a1..47590e53ff 100644
--- a/apps/web/ce/components/comments/comment-block.tsx
+++ b/apps/web/ce/components/comments/comment-block.tsx
@@ -1,81 +1,44 @@
-import type { FC, ReactNode } from "react";
+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 { EIssueCommentAccessSpecifier } 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: FC<TCommentBlock> = observer((props) => {
-  const { comment, ends, quickActions, children } = props;
-  // refs
+export const CommentBlock = observer(function CommentBlock(props: TCommentBlock) {
+  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="absolute left-[13px] top-0 bottom-0 w-px transition-border duration-1000 bg-layer-3"
         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"
+          "flex-shrink-0 relative w-7 h-7  rounded-lg transition-border duration-1000 flex justify-center items-center z-[3] uppercase shadow-raised-100 bg-layer-2 border border-subtle"
         )}
       >
-        <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}${comment.access === EIssueCommentAccessSpecifier.EXTERNAL ? " (External User)" : ""}`}
-              </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.updated_at)}
-                  {comment.edited_at && ` (${t("edited")})`}
-                </span>
-              </Tooltip>
-            </div>
-          </div>
-          <div className="flex-shrink-0 ">{quickActions}</div>
+        <div className="text-body-sm-regular mb-2 bg-layer-2 border border-subtle shadow-raised-100 rounded-lg p-3">
+          {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 f0ef4e2b69..6144f52360 100644
--- a/apps/web/ce/components/comments/index.ts
+++ b/apps/web/ce/components/comments/index.ts
@@ -1 +1,2 @@
 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 59dbf3394d..f8661d5c20 100644
--- a/apps/web/ce/components/common/extended-app-header.tsx
+++ b/apps/web/ce/components/common/extended-app-header.tsx
@@ -1,16 +1,26 @@
 import type { ReactNode } from "react";
 import { observer } from "mobx-react";
+import { useParams } from "react-router";
+// components
 import { AppSidebarToggleButton } from "@/components/sidebar/sidebar-toggle-button";
+// hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useProjectNavigationPreferences } from "@/hooks/use-navigation-preferences";
 
-export const ExtendedAppHeader = observer((props: { header: ReactNode }) => {
+export const ExtendedAppHeader = observer(function ExtendedAppHeader(props: { header: ReactNode }) {
   const { header } = props;
+  // params
+  const { projectId, workItem } = useParams();
+  // preferences
+  const { preferences: projectPreferences } = useProjectNavigationPreferences();
   // store hooks
   const { sidebarCollapsed } = useAppTheme();
+  // derived values
+  const shouldShowSidebarToggleButton = projectPreferences.navigationMode === "accordion" || (!projectId && !workItem);
 
   return (
     <>
-      {sidebarCollapsed && <AppSidebarToggleButton />}
+      {sidebarCollapsed && shouldShowSidebarToggleButton && <AppSidebarToggleButton />}
       <div className="w-full">{header}</div>
     </>
   );
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 0000000000..a59a61e533
--- /dev/null
+++ b/apps/web/ce/components/common/quick-actions-factory.tsx
@@ -0,0 +1 @@
+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 ba30d3ad68..e03ecf8d75 100644
--- a/apps/web/ce/components/common/subscription/subscription-pill.tsx
+++ b/apps/web/ce/components/common/subscription/subscription-pill.tsx
@@ -4,4 +4,6 @@ type TProps = {
   workspace?: IWorkspace;
 };
 
-export const SubscriptionPill = (props: TProps) => <></>;
+export function SubscriptionPill(props: TProps) {
+  return <></>;
+}
diff --git a/apps/web/ce/components/cycles/active-cycle/root.tsx b/apps/web/ce/components/cycles/active-cycle/root.tsx
index b0933218e6..465dfaa602 100644
--- a/apps/web/ce/components/cycles/active-cycle/root.tsx
+++ b/apps/web/ce/components/cycles/active-cycle/root.tsx
@@ -1,11 +1,10 @@
-"use client";
-
-import { useMemo } from "react";
 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";
 import { Row } from "@plane/ui";
 // assets
 import darkActiveCycleAsset from "@/app/assets/empty-state/cycle/active-dark.webp?url";
@@ -17,7 +16,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";
@@ -29,7 +27,71 @@ interface IActiveCycleDetails {
   showHeader?: boolean;
 }
 
-export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) => {
+type ActiveCyclesComponentProps = {
+  cycleId: string | null | undefined;
+  activeCycle: ICycle | null;
+  activeCycleResolvedPath: string;
+  workspaceSlug: string;
+  projectId: string;
+  handleFiltersUpdate: (filters: any) => void;
+  cycleIssueDetails?: ActiveCycleIssueDetails | { nextPageResults: boolean };
+};
+
+const ActiveCyclesComponent = observer(function ActiveCyclesComponent({
+  cycleId,
+  activeCycle,
+  activeCycleResolvedPath,
+  workspaceSlug,
+  projectId,
+  handleFiltersUpdate,
+  cycleIssueDetails,
+}: ActiveCyclesComponentProps) {
+  const { t } = useTranslation();
+
+  if (!cycleId || !activeCycle) {
+    return (
+      <EmptyStateDetailed
+        assetKey="cycle"
+        title={t("project_cycles.empty_state.active.title")}
+        description={t("project_cycles.empty_state.active.description")}
+        rootClassName="py-10 h-auto"
+      />
+    );
+  }
+
+  return (
+    <div className="flex flex-col border-b border-subtle">
+      <CyclesListItem
+        key={cycleId}
+        cycleId={cycleId}
+        workspaceSlug={workspaceSlug}
+        projectId={projectId}
+        className="!border-b-transparent"
+      />
+      <Row className="bg-surface-1 pt-3 pb-6">
+        <div className="grid grid-cols-1 bg-surface-1 gap-3 lg:grid-cols-2 xl:grid-cols-3">
+          <ActiveCycleProgress
+            handleFiltersUpdate={handleFiltersUpdate}
+            projectId={projectId}
+            workspaceSlug={workspaceSlug}
+            cycle={activeCycle}
+          />
+          <ActiveCycleProductivity workspaceSlug={workspaceSlug} projectId={projectId} cycle={activeCycle} />
+          <ActiveCycleStats
+            workspaceSlug={workspaceSlug}
+            projectId={projectId}
+            cycle={activeCycle}
+            cycleId={cycleId}
+            handleFiltersUpdate={handleFiltersUpdate}
+            cycleIssueDetails={cycleIssueDetails}
+          />
+        </div>
+      </Row>
+    </div>
+  );
+});
+
+export const ActiveCycleRoot = observer(function ActiveCycleRoot(props: IActiveCycleDetails) {
   const { workspaceSlug, projectId, cycleId: propsCycleId, showHeader = true } = props;
   // theme hook
   const { resolvedTheme } = useTheme();
@@ -47,67 +109,39 @@ export const ActiveCycleRoot: React.FC<IActiveCycleDetails> = observer((props) =
     cycleIssueDetails,
   } = useCyclesDetails({ workspaceSlug, projectId, cycleId });
 
-  const ActiveCyclesComponent = useMemo(
-    () => (
-      <>
-        {!cycleId || !activeCycle ? (
-          <DetailedEmptyState
-            title={t("project_cycles.empty_state.active.title")}
-            description={t("project_cycles.empty_state.active.description")}
-            assetPath={activeCycleResolvedPath}
-          />
-        ) : (
-          <div className="flex flex-col border-b border-custom-border-200">
-            {cycleId && (
-              <CyclesListItem
-                key={cycleId}
-                cycleId={cycleId}
-                workspaceSlug={workspaceSlug}
-                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">
-                <ActiveCycleProgress
-                  handleFiltersUpdate={handleFiltersUpdate}
-                  projectId={projectId}
-                  workspaceSlug={workspaceSlug}
-                  cycle={activeCycle}
-                />
-                <ActiveCycleProductivity workspaceSlug={workspaceSlug} projectId={projectId} cycle={activeCycle} />
-                <ActiveCycleStats
-                  workspaceSlug={workspaceSlug}
-                  projectId={projectId}
-                  cycle={activeCycle}
-                  cycleId={cycleId}
-                  handleFiltersUpdate={handleFiltersUpdate}
-                  cycleIssueDetails={cycleIssueDetails as ActiveCycleIssueDetails}
-                />
-              </div>
-            </Row>
-          </div>
-        )}
-      </>
-    ),
-    [cycleId, activeCycle, workspaceSlug, projectId, handleFiltersUpdate, cycleIssueDetails]
-  );
-
   return (
     <>
       {showHeader ? (
         <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 border-b border-subtle bg-layer-1 cursor-pointer">
                 <CycleListGroupHeader title={t("project_cycles.active_cycle.label")} type="current" isExpanded={open} />
               </Disclosure.Button>
-              <Disclosure.Panel>{ActiveCyclesComponent}</Disclosure.Panel>
+              <Disclosure.Panel>
+                <ActiveCyclesComponent
+                  cycleId={cycleId}
+                  activeCycle={activeCycle}
+                  activeCycleResolvedPath={activeCycleResolvedPath}
+                  workspaceSlug={workspaceSlug}
+                  projectId={projectId}
+                  handleFiltersUpdate={handleFiltersUpdate}
+                  cycleIssueDetails={cycleIssueDetails}
+                />
+              </Disclosure.Panel>
             </>
           )}
         </Disclosure>
       ) : (
-        <>{ActiveCyclesComponent}</>
+        <ActiveCyclesComponent
+          cycleId={cycleId}
+          activeCycle={activeCycle}
+          activeCycleResolvedPath={activeCycleResolvedPath}
+          workspaceSlug={workspaceSlug}
+          projectId={projectId}
+          handleFiltersUpdate={handleFiltersUpdate}
+          cycleIssueDetails={cycleIssueDetails}
+        />
       )}
     </>
   );
diff --git a/apps/web/ce/components/cycles/additional-actions.tsx b/apps/web/ce/components/cycles/additional-actions.tsx
index 0fd9efb314..96a4a004d1 100644
--- a/apps/web/ce/components/cycles/additional-actions.tsx
+++ b/apps/web/ce/components/cycles/additional-actions.tsx
@@ -4,4 +4,6 @@ type Props = {
   cycleId: string;
   projectId: string;
 };
-export const CycleAdditionalActions: FC<Props> = observer(() => <></>);
+export const CycleAdditionalActions = observer(function CycleAdditionalActions(_props: Props) {
+  return <></>;
+});
diff --git a/apps/web/ce/components/cycles/analytics-sidebar/base.tsx b/apps/web/ce/components/cycles/analytics-sidebar/base.tsx
index 9164281908..3bcf283217 100644
--- a/apps/web/ce/components/cycles/analytics-sidebar/base.tsx
+++ b/apps/web/ce/components/cycles/analytics-sidebar/base.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { Fragment } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -19,7 +17,7 @@ type ProgressChartProps = {
   projectId: string;
   cycleId: string;
 };
-export const SidebarChart = observer((props: ProgressChartProps) => {
+export const SidebarChart = observer(function SidebarChart(props: ProgressChartProps) {
   const { workspaceSlug, projectId, cycleId } = props;
 
   // hooks
diff --git a/apps/web/ce/components/cycles/analytics-sidebar/root.tsx b/apps/web/ce/components/cycles/analytics-sidebar/root.tsx
index 6be4361efa..947a8844cb 100644
--- a/apps/web/ce/components/cycles/analytics-sidebar/root.tsx
+++ b/apps/web/ce/components/cycles/analytics-sidebar/root.tsx
@@ -1,4 +1,3 @@
-"use client";
 import type { FC } from "react";
 import React from "react";
 // components
@@ -10,4 +9,6 @@ type Props = {
   cycleId: string;
 };
 
-export const SidebarChartRoot: FC<Props> = (props) => <SidebarChart {...props} />;
+export function SidebarChartRoot(props: Props) {
+  return <SidebarChart {...props} />;
+}
diff --git a/apps/web/ce/components/cycles/end-cycle/index.ts b/apps/web/ce/components/cycles/end-cycle/index.ts
index 2e60c45619..031608e25f 100644
--- a/apps/web/ce/components/cycles/end-cycle/index.ts
+++ b/apps/web/ce/components/cycles/end-cycle/index.ts
@@ -1,2 +1 @@
 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 754c84f9f4..87b4ded455 100644
--- a/apps/web/ce/components/cycles/end-cycle/modal.tsx
+++ b/apps/web/ce/components/cycles/end-cycle/modal.tsx
@@ -10,4 +10,6 @@ interface Props {
   cycleName: string;
 }
 
-export const EndCycleModal: React.FC<Props> = () => <></>;
+export function EndCycleModal(_props: Props) {
+  return <></>;
+}
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 c1bf626185..0000000000
--- 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/de-dupe/de-dupe-button.tsx b/apps/web/ce/components/de-dupe/de-dupe-button.tsx
index 94d800ca86..1575abac83 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,3 @@
-"use client";
 import type { FC } from "react";
 import React from "react";
 // local components
@@ -10,7 +9,7 @@ type TDeDupeButtonRoot = {
   label: string;
 };
 
-export const DeDupeButtonRoot: FC<TDeDupeButtonRoot> = (props) => {
+export function DeDupeButtonRoot(props: TDeDupeButtonRoot) {
   const { workspaceSlug, isDuplicateModalOpen, label, handleOnClick } = props;
   return <></>;
-};
+}
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 55eb084fd2..577152beee 100644
--- a/apps/web/ce/components/de-dupe/duplicate-modal/root.tsx
+++ b/apps/web/ce/components/de-dupe/duplicate-modal/root.tsx
@@ -1,5 +1,3 @@
-"use-client";
-
 import type { FC } from "react";
 // types
 import type { TDeDupeIssue } from "@plane/types";
@@ -10,7 +8,7 @@ type TDuplicateModalRootProps = {
   handleDuplicateIssueModal: (value: boolean) => void;
 };
 
-export const DuplicateModalRoot: FC<TDuplicateModalRootProps> = (props) => {
+export function DuplicateModalRoot(props: TDuplicateModalRootProps) {
   const { workspaceSlug, issues, handleDuplicateIssueModal } = props;
   return <></>;
-};
+}
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 3dd227cc80..957fb01f21 100644
--- a/apps/web/ce/components/de-dupe/duplicate-popover/root.tsx
+++ b/apps/web/ce/components/de-dupe/duplicate-popover/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
@@ -18,7 +16,7 @@ type TDeDupeIssuePopoverRootProps = {
   isIntakeIssue?: boolean;
 };
 
-export const DeDupeIssuePopoverRoot: FC<TDeDupeIssuePopoverRootProps> = observer((props) => {
+export const DeDupeIssuePopoverRoot = observer(function DeDupeIssuePopoverRoot(props: TDeDupeIssuePopoverRootProps) {
   const {} = props;
   return <></>;
 });
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 d6e363456b..2ec2b8caa6 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,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 
 type TDeDupeIssueButtonLabelProps = {
@@ -7,7 +5,7 @@ type TDeDupeIssueButtonLabelProps = {
   buttonLabel: string;
 };
 
-export const DeDupeIssueButtonLabel: FC<TDeDupeIssueButtonLabelProps> = (props) => {
+export function DeDupeIssueButtonLabel(props: TDeDupeIssueButtonLabelProps) {
   const { isOpen, buttonLabel } = props;
   return <></>;
-};
+}
diff --git a/apps/web/ce/components/desktop/helper.ts b/apps/web/ce/components/desktop/helper.ts
new file mode 100644
index 0000000000..2082e74ed8
--- /dev/null
+++ b/apps/web/ce/components/desktop/helper.ts
@@ -0,0 +1 @@
+export const isSidebarToggleVisible = () => true;
diff --git a/apps/web/ce/components/desktop/index.ts b/apps/web/ce/components/desktop/index.ts
new file mode 100644
index 0000000000..c562f81021
--- /dev/null
+++ b/apps/web/ce/components/desktop/index.ts
@@ -0,0 +1,2 @@
+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
new file mode 100644
index 0000000000..98ea7e961e
--- /dev/null
+++ b/apps/web/ce/components/desktop/sidebar-workspace-menu.tsx
@@ -0,0 +1,3 @@
+export function DesktopSidebarWorkspaceMenu() {
+  return null;
+}
diff --git a/apps/web/ce/components/editor/embeds/mentions/root.tsx b/apps/web/ce/components/editor/embeds/mentions/root.tsx
index e3d7cc49de..2f3f9a5b6a 100644
--- a/apps/web/ce/components/editor/embeds/mentions/root.tsx
+++ b/apps/web/ce/components/editor/embeds/mentions/root.tsx
@@ -3,4 +3,6 @@ import type { TCallbackMentionComponentProps } from "@plane/editor";
 
 export type TEditorMentionComponentProps = TCallbackMentionComponentProps;
 
-export const EditorAdditionalMentionsRoot: React.FC<TEditorMentionComponentProps> = () => null;
+export function EditorAdditionalMentionsRoot(_props: TEditorMentionComponentProps) {
+  return null;
+}
diff --git a/apps/web/ce/components/epics/epic-modal/modal.tsx b/apps/web/ce/components/epics/epic-modal/modal.tsx
index f1fec6ba84..f1dbe83d53 100644
--- a/apps/web/ce/components/epics/epic-modal/modal.tsx
+++ b/apps/web/ce/components/epics/epic-modal/modal.tsx
@@ -1,4 +1,3 @@
-"use client";
 import type { FC } from "react";
 import React from "react";
 import type { TIssue } from "@plane/types";
@@ -17,4 +16,6 @@ export interface EpicModalProps {
   isProjectSelectionDisabled?: boolean;
 }
 
-export const CreateUpdateEpicModal: FC<EpicModalProps> = (props) => <></>;
+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 936fdc622b..be1f209ad9 100644
--- a/apps/web/ce/components/estimates/estimate-list-item-buttons.tsx
+++ b/apps/web/ce/components/estimates/estimate-list-item-buttons.tsx
@@ -1,10 +1,6 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
-import { Pen, Trash } from "lucide-react";
+import { Trash } from "lucide-react";
 import { PROJECT_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
-import { Tooltip } from "@plane/propel/tooltip";
-// components
-import { ProIcon } from "@/components/common/pro-icon";
 
 type TEstimateListItem = {
   estimateId: string;
@@ -15,30 +11,14 @@ type TEstimateListItem = {
   onDeleteClick?: (estimateId: string) => void;
 };
 
-export const EstimateListItemButtons: FC<TEstimateListItem> = observer((props) => {
+export const EstimateListItemButtons = observer(function EstimateListItemButtons(props: TEstimateListItem) {
   const { estimateId, isAdmin, isEditable, onDeleteClick } = props;
 
   if (!isAdmin || !isEditable) return <></>;
   return (
     <div className="relative flex items-center gap-1">
-      <Tooltip
-        tooltipContent={
-          <div className="relative flex items-center gap-2">
-            <div>Upgrade</div>
-            <ProIcon className="w-3 h-3" />
-          </div>
-        }
-        position="top"
-      >
-        <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"
-          data-ph-element={PROJECT_SETTINGS_TRACKER_ELEMENTS.ESTIMATES_LIST_ITEM}
-        >
-          <Pen size={12} />
-        </button>
-      </Tooltip>
       <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-shrink-0 w-6 h-6 flex justify-center items-center rounded-sm cursor-pointer transition-colors overflow-hidden hover:bg-layer-1"
         onClick={() => onDeleteClick && onDeleteClick(estimateId)}
         data-ph-element={PROJECT_SETTINGS_TRACKER_ELEMENTS.ESTIMATES_LIST_ITEM}
       >
diff --git a/apps/web/ce/components/estimates/inputs/time-input.tsx b/apps/web/ce/components/estimates/inputs/time-input.tsx
index 39341ac3b9..17d6cec9df 100644
--- a/apps/web/ce/components/estimates/inputs/time-input.tsx
+++ b/apps/web/ce/components/estimates/inputs/time-input.tsx
@@ -5,4 +5,6 @@ export type TEstimateTimeInputProps = {
   handleEstimateInputValue: (value: string) => void;
 };
 
-export const EstimateTimeInput: FC<TEstimateTimeInputProps> = () => <></>;
+export function EstimateTimeInput(_props: TEstimateTimeInputProps) {
+  return <></>;
+}
diff --git a/apps/web/ce/components/estimates/points/delete.tsx b/apps/web/ce/components/estimates/points/delete.tsx
index 522a28c961..e59dae5547 100644
--- a/apps/web/ce/components/estimates/points/delete.tsx
+++ b/apps/web/ce/components/estimates/points/delete.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 
 import type { TEstimatePointsObject, TEstimateSystemKeys, TEstimateTypeErrorObject } from "@plane/types";
@@ -16,4 +14,6 @@ export type TEstimatePointDelete = {
   estimateSystem: TEstimateSystemKeys;
 };
 
-export const EstimatePointDelete: FC<TEstimatePointDelete> = () => <></>;
+export function EstimatePointDelete(_props: TEstimatePointDelete) {
+  return <></>;
+}
diff --git a/apps/web/ce/components/estimates/update/modal.tsx b/apps/web/ce/components/estimates/update/modal.tsx
index fd43171966..09c6e7649f 100644
--- a/apps/web/ce/components/estimates/update/modal.tsx
+++ b/apps/web/ce/components/estimates/update/modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { observer } from "mobx-react";
 
@@ -11,4 +9,6 @@ type TUpdateEstimateModal = {
   handleClose: () => void;
 };
 
-export const UpdateEstimateModal: FC<TUpdateEstimateModal> = observer(() => <></>);
+export const UpdateEstimateModal = observer(function UpdateEstimateModal(_props: TUpdateEstimateModal) {
+  return <></>;
+});
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 ecab672dde..8de8f722bb 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,3 @@
-import type { FC } from "react";
 // components
 import type { IBlockUpdateData, IGanttBlock } from "@plane/types";
 import RenderIfVisible from "@/components/core/render-if-visible-HOC";
@@ -18,7 +17,7 @@ export type GanttChartBlocksProps = {
   ganttContainerRef: React.RefObject<HTMLDivElement>;
 };
 
-export const GanttChartRowList: FC<GanttChartBlocksProps> = (props) => {
+export function GanttChartRowList(props: GanttChartBlocksProps) {
   const {
     blockIds,
     blockUpdateHandler,
@@ -56,4 +55,4 @@ export const GanttChartRowList: FC<GanttChartBlocksProps> = (props) => {
       ))}
     </div>
   );
-};
+}
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 593e805027..1a14dd2de3 100644
--- a/apps/web/ce/components/gantt-chart/blocks/blocks-list.tsx
+++ b/apps/web/ce/components/gantt-chart/blocks/blocks-list.tsx
@@ -15,7 +15,7 @@ export type GanttChartBlocksProps = {
   enableDependency: boolean | ((blockId: string) => boolean);
 };
 
-export const GanttChartBlocksList: FC<GanttChartBlocksProps> = (props) => {
+export function GanttChartBlocksList(props: GanttChartBlocksProps) {
   const {
     blockIds,
     blockToRender,
@@ -50,4 +50,4 @@ export const GanttChartBlocksList: FC<GanttChartBlocksProps> = (props) => {
       ))}
     </>
   );
-};
+}
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 a68118b6cb..5257bacece 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
@@ -6,4 +6,6 @@ type LeftDependencyDraggableProps = {
   ganttContainerRef: RefObject<HTMLDivElement>;
 };
 
-export const 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 7a36ec9b33..a8388d4f40 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
@@ -5,4 +5,6 @@ type RightDependencyDraggableProps = {
   block: IGanttBlock;
   ganttContainerRef: RefObject<HTMLDivElement>;
 };
-export const 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 e52805e178..d88f5206da 100644
--- a/apps/web/ce/components/gantt-chart/dependency/dependency-paths.tsx
+++ b/apps/web/ce/components/gantt-chart/dependency/dependency-paths.tsx
@@ -3,7 +3,7 @@ import type { FC } from "react";
 type Props = {
   isEpic?: boolean;
 };
-export const TimelineDependencyPaths: FC<Props> = (props) => {
+export function TimelineDependencyPaths(props: Props) {
   const { isEpic = false } = 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 3b4aa350d8..d37b2f5506 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 +1,3 @@
-export const TimelineDraggablePath = () => <></>;
+export function TimelineDraggablePath() {
+  return <></>;
+}
diff --git a/apps/web/ce/components/gantt-chart/index.ts b/apps/web/ce/components/gantt-chart/index.ts
index d08e0f7d61..d652e4bbce 100644
--- a/apps/web/ce/components/gantt-chart/index.ts
+++ b/apps/web/ce/components/gantt-chart/index.ts
@@ -1 +1,2 @@
 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 0000000000..5cc7c2ce5e
--- /dev/null
+++ b/apps/web/ce/components/gantt-chart/layers/additional-layers.tsx
@@ -0,0 +1,8 @@
+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 0000000000..fcd77a972c
--- /dev/null
+++ b/apps/web/ce/components/gantt-chart/layers/index.ts
@@ -0,0 +1 @@
+export { GanttAdditionalLayers } from "./additional-layers";
diff --git a/apps/web/ce/components/global/index.ts b/apps/web/ce/components/global/index.ts
index c87c8ae027..08b85c764c 100644
--- a/apps/web/ce/components/global/index.ts
+++ b/apps/web/ce/components/global/index.ts
@@ -1,2 +1 @@
 export * from "./version-number";
-export * from "./product-updates-header";
diff --git a/apps/web/ce/components/global/product-updates/changelog.tsx b/apps/web/ce/components/global/product-updates/changelog.tsx
new file mode 100644
index 0000000000..672b7490bc
--- /dev/null
+++ b/apps/web/ce/components/global/product-updates/changelog.tsx
@@ -0,0 +1,83 @@
+import { useState, useEffect, useRef } from "react";
+import { observer } from "mobx-react";
+// hooks
+import { Loader } from "@plane/ui";
+import { ProductUpdatesFallback } from "@/components/global/product-updates/fallback";
+import { useInstance } from "@/hooks/store/use-instance";
+
+export const ProductUpdatesChangelog = observer(function ProductUpdatesChangelog() {
+  // refs
+  const isLoadingRef = useRef(true);
+  // states
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+  // store hooks
+  const { config } = useInstance();
+  // derived values
+  const changeLogUrl = config?.instance_changelog_url;
+  const shouldShowFallback = !changeLogUrl || changeLogUrl === "" || hasError;
+
+  // timeout fallback - if iframe doesn't load within 15 seconds, show error
+  useEffect(() => {
+    if (!changeLogUrl || changeLogUrl === "") {
+      setIsLoading(false);
+      isLoadingRef.current = false;
+      return;
+    }
+
+    setIsLoading(true);
+    setHasError(false);
+    isLoadingRef.current = true;
+
+    const timeoutId = setTimeout(() => {
+      if (isLoadingRef.current) {
+        setHasError(true);
+        setIsLoading(false);
+        isLoadingRef.current = false;
+      }
+    }, 15000); // 15 second timeout
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [changeLogUrl]);
+
+  const handleIframeLoad = () => {
+    setTimeout(() => {
+      isLoadingRef.current = false;
+      setIsLoading(false);
+    }, 1000);
+  };
+
+  const handleIframeError = () => {
+    isLoadingRef.current = false;
+    setHasError(true);
+    setIsLoading(false);
+  };
+
+  // Show fallback if URL is missing, empty, or iframe failed to load
+  if (shouldShowFallback) {
+    return (
+      <ProductUpdatesFallback
+        description="We're having trouble fetching the updates. Please visit our changelog to view the latest updates."
+        variant={config?.is_self_managed ? "self-managed" : "cloud"}
+      />
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-[550px] vertical-scrollbar scrollbar-xs overflow-hidden overflow-y-scroll px-6 mx-0.5 relative">
+      {isLoading && (
+        <Loader className="flex flex-col gap-3 absolute inset-0 w-full h-full items-center justify-center">
+          <Loader.Item height="95%" width="95%" />
+        </Loader>
+      )}
+      <iframe
+        src={changeLogUrl}
+        className={`w-full h-full ${isLoading ? "opacity-0" : "opacity-100"} transition-opacity duration-200`}
+        onLoad={handleIframeLoad}
+        onError={handleIframeError}
+      />
+    </div>
+  );
+});
diff --git a/apps/web/ce/components/global/product-updates-header.tsx b/apps/web/ce/components/global/product-updates/header.tsx
similarity index 53%
rename from apps/web/ce/components/global/product-updates-header.tsx
rename to apps/web/ce/components/global/product-updates/header.tsx
index 26d4ebbdef..0f6d26e572 100644
--- a/apps/web/ce/components/global/product-updates-header.tsx
+++ b/apps/web/ce/components/global/product-updates/header.tsx
@@ -1,28 +1,23 @@
 import { observer } from "mobx-react";
+import packageJson from "package.json";
 import { useTranslation } from "@plane/i18n";
-import { PlaneLogo } from "@plane/propel/icons";
 // helpers
 import { cn } from "@plane/utils";
-// package.json
-import packageJson from "package.json";
 
-export const ProductUpdatesHeader = observer(() => {
+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="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"
+            "px-2 mx-2 py-0.5 text-center text-11 font-medium rounded-full bg-accent-primary/20 text-accent-primary"
           )}
         >
           {t("version")}: v{packageJson.version}
         </div>
       </div>
-      <div className="flex flex-shrink-0 items-center gap-8">
-        <PlaneLogo className="h-6 w-auto text-custom-text-100" />
-      </div>
     </div>
   );
 });
diff --git a/apps/web/ce/components/global/version-number.tsx b/apps/web/ce/components/global/version-number.tsx
index f75bb10b10..b04ae581ea 100644
--- a/apps/web/ce/components/global/version-number.tsx
+++ b/apps/web/ce/components/global/version-number.tsx
@@ -2,11 +2,11 @@
 import { useTranslation } from "@plane/i18n";
 import packageJson from "package.json";
 
-export const PlaneVersionNumber: React.FC = () => {
+export function PlaneVersionNumber() {
   const { t } = useTranslation();
   return (
     <span>
       {t("version")}: v{packageJson.version}
     </span>
   );
-};
+}
diff --git a/apps/web/ce/components/home/header.tsx b/apps/web/ce/components/home/header.tsx
index c95736c9eb..ac905596ee 100644
--- a/apps/web/ce/components/home/header.tsx
+++ b/apps/web/ce/components/home/header.tsx
@@ -1 +1,3 @@
-export const HomePageHeader = () => <></>;
+export function HomePageHeader() {
+  return <></>;
+}
diff --git a/apps/web/ce/components/home/peek-overviews.tsx b/apps/web/ce/components/home/peek-overviews.tsx
index 05544302d3..74d2d7d5a9 100644
--- a/apps/web/ce/components/home/peek-overviews.tsx
+++ b/apps/web/ce/components/home/peek-overviews.tsx
@@ -1,9 +1,9 @@
-"use client";
-
+import { observer } from "mobx-react";
 import { IssuePeekOverview } from "@/components/issues/peek-overview";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 
-export const HomePeekOverviewsRoot = () => (
-  <>
-    <IssuePeekOverview />
-  </>
-);
+export const HomePeekOverviewsRoot = observer(function HomePeekOverviewsRoot() {
+  const { peekIssue } = useIssueDetail();
+
+  return peekIssue ? <IssuePeekOverview /> : null;
+});
diff --git a/apps/web/ce/components/inbox/source-pill.tsx b/apps/web/ce/components/inbox/source-pill.tsx
index 77d3038cbc..1d8bc06eae 100644
--- a/apps/web/ce/components/inbox/source-pill.tsx
+++ b/apps/web/ce/components/inbox/source-pill.tsx
@@ -4,4 +4,6 @@ export type TInboxSourcePill = {
   source: EInboxIssueSource;
 };
 
-export const InboxSourcePill = (props: TInboxSourcePill) => <></>;
+export function InboxSourcePill(props: TInboxSourcePill) {
+  return <></>;
+}
diff --git a/apps/web/ce/components/instance/maintenance-message.tsx b/apps/web/ce/components/instance/maintenance-message.tsx
index 067c95f5ec..e8dc103529 100644
--- a/apps/web/ce/components/instance/maintenance-message.tsx
+++ b/apps/web/ce/components/instance/maintenance-message.tsx
@@ -1,4 +1,4 @@
-export const MaintenanceMessage = () => {
+export function MaintenanceMessage() {
   const linkMap = [
     {
       key: "mail_to",
@@ -10,10 +10,10 @@ export const 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-18 font-semibold text-primary text-left">
           &#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-14 font-medium text-secondary text-left">
           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>
@@ -25,7 +25,7 @@ export const MaintenanceMessage = () => {
               href={link.value}
               target="_blank"
               rel="noopener noreferrer"
-              className="text-custom-primary-100 hover:underline text-sm"
+              className="text-accent-primary hover:underline text-13"
             >
               {link.label}
             </a>
@@ -34,4 +34,4 @@ export const MaintenanceMessage = () => {
       </div>
     </>
   );
-};
+}
diff --git a/apps/web/ce/components/issues/bulk-operations/root.tsx b/apps/web/ce/components/issues/bulk-operations/root.tsx
index fe7fcfe1be..fef3b7220d 100644
--- a/apps/web/ce/components/issues/bulk-operations/root.tsx
+++ b/apps/web/ce/components/issues/bulk-operations/root.tsx
@@ -10,7 +10,7 @@ type Props = {
   selectionHelpers: TSelectionHelper;
 };
 
-export const IssueBulkOperationsRoot: React.FC<Props> = observer((props) => {
+export const IssueBulkOperationsRoot = observer(function IssueBulkOperationsRoot(props: Props) {
   const { className, selectionHelpers } = props;
   // store hooks
   const { isSelectionActive } = useMultipleSelectStore();
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 fd2daf9c82..21047074a9 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 
 type Props = {
@@ -8,4 +6,6 @@ type Props = {
   editable: boolean | undefined;
 };
 
-export const AppliedIssueTypeFilters: React.FC<Props> = observer(() => null);
+export const AppliedIssueTypeFilters = observer(function AppliedIssueTypeFilters(_props: Props) {
+  return null;
+});
diff --git a/apps/web/ce/components/issues/filters/issue-types.tsx b/apps/web/ce/components/issues/filters/issue-types.tsx
index 4d983bb7d4..dc3397e2cb 100644
--- a/apps/web/ce/components/issues/filters/issue-types.tsx
+++ b/apps/web/ce/components/issues/filters/issue-types.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type React from "react";
 import { observer } from "mobx-react";
 
@@ -9,4 +7,6 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterIssueTypes: React.FC<Props> = observer(() => null);
+export const FilterIssueTypes = observer(function FilterIssueTypes(_props: Props) {
+  return null;
+});
diff --git a/apps/web/ce/components/issues/filters/team-project.tsx b/apps/web/ce/components/issues/filters/team-project.tsx
index c8975deb47..dd82531901 100644
--- a/apps/web/ce/components/issues/filters/team-project.tsx
+++ b/apps/web/ce/components/issues/filters/team-project.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type React from "react";
 import { observer } from "mobx-react";
 
@@ -9,4 +7,6 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterTeamProjects: React.FC<Props> = observer(() => null);
+export const FilterTeamProjects = observer(function FilterTeamProjects(_props: Props) {
+  return null;
+});
diff --git a/apps/web/ce/components/issues/header.tsx b/apps/web/ce/components/issues/header.tsx
index 58f699be57..b10b8bf1dc 100644
--- a/apps/web/ce/components/issues/header.tsx
+++ b/apps/web/ce/components/issues/header.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // icons
@@ -11,14 +9,15 @@ import {
   SPACE_BASE_PATH,
   SPACE_BASE_URL,
   WORK_ITEM_TRACKER_ELEMENTS,
-  EProjectFeatureKey,
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
+import { WorkItemsIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { EIssuesStoreType } from "@plane/types";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { CountChip } from "@/components/common/count-chip";
 // constants
 import { HeaderFilters } from "@/components/issues/filters";
@@ -30,13 +29,13 @@ import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";
 import { useAppRouter } from "@/hooks/use-app-router";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-// plane web
-import { CommonProjectBreadcrumbs } from "../breadcrumbs/common";
+// plane web imports
+import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
 
-export const IssuesHeader = observer(() => {
+export const IssuesHeader = observer(function IssuesHeader() {
   // router
   const router = useAppRouter();
-  const { workspaceSlug, projectId } = useParams() as { workspaceSlug: string; projectId: string };
+  const { workspaceSlug, projectId } = useParams();
   // store hooks
   const {
     issues: { getGroupIssueCount },
@@ -64,10 +63,16 @@ export const IssuesHeader = observer(() => {
       <Header.LeftItem>
         <div className="flex items-center gap-2.5">
           <Breadcrumbs onBack={() => router.back()} isLoading={loader === "init-loader"} className="flex-grow-0">
-            <CommonProjectBreadcrumbs
-              workspaceSlug={workspaceSlug?.toString()}
-              projectId={projectId?.toString()}
-              featureKey={EProjectFeatureKey.WORK_ITEMS}
+            <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label="Work Items"
+                  href={`/${workspaceSlug}/projects/${projectId}/issues/`}
+                  icon={<WorkItemsIcon className="h-4 w-4 text-tertiary" />}
+                  isLast
+                />
+              }
               isLast
             />
           </Breadcrumbs>
@@ -84,11 +89,11 @@ export const IssuesHeader = observer(() => {
         {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} />
           </a>
@@ -97,7 +102,7 @@ export const IssuesHeader = observer(() => {
         )}
       </Header.LeftItem>
       <Header.RightItem>
-        <div className="hidden gap-3 md:flex">
+        <div className="hidden gap-2 md:flex">
           <HeaderFilters
             projectId={projectId}
             currentProjectDetails={currentProjectDetails}
@@ -105,19 +110,18 @@ export const IssuesHeader = observer(() => {
             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 b0f33932f4..bac610826e 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
@@ -11,4 +11,6 @@ export type TWorkItemAdditionalWidgetActionButtonsProps = {
   workspaceSlug: string;
 };
 
-export const WorkItemAdditionalWidgetActionButtons: FC<TWorkItemAdditionalWidgetActionButtonsProps> = () => null;
+export function WorkItemAdditionalWidgetActionButtons(_props: TWorkItemAdditionalWidgetActionButtonsProps) {
+  return null;
+}
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 2632987f84..092663d903 100644
--- a/apps/web/ce/components/issues/issue-detail-widgets/collapsibles.tsx
+++ b/apps/web/ce/components/issues/issue-detail-widgets/collapsibles.tsx
@@ -11,4 +11,6 @@ export type TWorkItemAdditionalWidgetCollapsiblesProps = {
   workspaceSlug: string;
 };
 
-export const WorkItemAdditionalWidgetCollapsibles: FC<TWorkItemAdditionalWidgetCollapsiblesProps> = () => null;
+export function WorkItemAdditionalWidgetCollapsibles(_props: TWorkItemAdditionalWidgetCollapsiblesProps) {
+  return null;
+}
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 b478cf8983..07327c44c1 100644
--- a/apps/web/ce/components/issues/issue-detail-widgets/modals.tsx
+++ b/apps/web/ce/components/issues/issue-detail-widgets/modals.tsx
@@ -10,4 +10,6 @@ export type TWorkItemAdditionalWidgetModalsProps = {
   workspaceSlug: string;
 };
 
-export const WorkItemAdditionalWidgetModals: FC<TWorkItemAdditionalWidgetModalsProps> = () => null;
+export function WorkItemAdditionalWidgetModals(_props: TWorkItemAdditionalWidgetModalsProps) {
+  return null;
+}
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 448deabc8e..1097356457 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,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { observer } from "mobx-react";
 
@@ -10,4 +8,6 @@ export type TAdditionalActivityRoot = {
   field: string | undefined;
 };
 
-export const AdditionalActivityRoot: FC<TAdditionalActivityRoot> = observer(() => <></>);
+export const AdditionalActivityRoot = observer(function AdditionalActivityRoot(_props: TAdditionalActivityRoot) {
+  return <></>;
+});
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 2e0a14707b..69602593e3 100644
--- a/apps/web/ce/components/issues/issue-details/additional-properties.tsx
+++ b/apps/web/ce/components/issues/issue-details/additional-properties.tsx
@@ -11,4 +11,6 @@ export type TWorkItemAdditionalSidebarProperties = {
   isPeekView?: boolean;
 };
 
-export const WorkItemAdditionalSidebarProperties: FC<TWorkItemAdditionalSidebarProperties> = () => <></>;
+export function WorkItemAdditionalSidebarProperties(_props: TWorkItemAdditionalSidebarProperties) {
+  return <></>;
+}
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 f3435e2888..f56de6be97 100644
--- a/apps/web/ce/components/issues/issue-details/issue-creator.tsx
+++ b/apps/web/ce/components/issues/issue-details/issue-creator.tsx
@@ -8,7 +8,7 @@ type TIssueUser = {
   customUserName?: string;
 };
 
-export const IssueCreatorDisplay: FC<TIssueUser> = (props) => {
+export function IssueCreatorDisplay(props: TIssueUser) {
   const { activityId, customUserName } = props;
   // hooks
   const {
@@ -22,15 +22,15 @@ export const IssueCreatorDisplay: FC<TIssueUser> = (props) => {
   return (
     <>
       {customUserName ? (
-        <span className="text-custom-text-100 font-medium">{customUserName || "Plane"}</span>
+        <span className="text-primary font-medium">{customUserName || "Plane"}</span>
       ) : (
         <Link
           href={`/${activity?.workspace_detail?.slug}/profile/${activity?.actor_detail?.id}`}
-          className="hover:underline text-custom-text-100 font-medium"
+          className="hover:underline text-primary font-medium"
         >
           {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 d734ddb70f..e4eaba42c2 100644
--- a/apps/web/ce/components/issues/issue-details/issue-identifier.tsx
+++ b/apps/web/ce/components/issues/issue-details/issue-identifier.tsx
@@ -1,83 +1,13 @@
-import type { FC } from "react";
 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";
+import { IdentifierText } from "@/components/issues/issue-detail/identifier-text";
 
-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: FC<TIssueTypeIdentifier> = observer((_props) => <></>);
-
-type TIdentifierTextProps = {
-  identifier: string;
-  enableClickToCopyIdentifier?: boolean;
-  textContainerClassName?: string;
-};
-
-export const IdentifierText: React.FC<TIdentifierTextProps> = (props) => {
-  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>
-  );
-};
-
-export const IssueIdentifier: React.FC<TIssueIdentifierProps> = observer((props) => {
-  const { projectId, textContainerClassName, displayProperties, enableClickToCopyIdentifier = false } = props;
+export const IssueIdentifier = observer(function IssueIdentifier(props: TIssueIdentifierProps) {
+  const { projectId, variant, size, displayProperties, enableClickToCopyIdentifier = false } = props;
   // store hooks
   const { getProjectIdentifierById } = useProject();
   const {
@@ -98,8 +28,13 @@ export const IssueIdentifier: React.FC<TIssueIdentifierProps> = observer((props)
       <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/root.tsx b/apps/web/ce/components/issues/issue-details/issue-properties-activity/root.tsx
index 6aeb6eda01..43ad4d3aae 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
@@ -5,4 +5,6 @@ type TIssueAdditionalPropertiesActivity = {
   ends: "top" | "bottom" | undefined;
 };
 
-export const IssueAdditionalPropertiesActivity: FC<TIssueAdditionalPropertiesActivity> = () => <></>;
+export function IssueAdditionalPropertiesActivity(_props: TIssueAdditionalPropertiesActivity) {
+  return <></>;
+}
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 5796555ce5..7eb04be1fc 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,8 +1,8 @@
-"use client";
-
 import type { FC } from "react";
 import { observer } from "mobx-react";
 
 export type TIssueTypeActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
 
-export const IssueTypeActivity: FC<TIssueTypeActivity> = observer(() => <></>);
+export const IssueTypeActivity = observer(function IssueTypeActivity(_props: TIssueTypeActivity) {
+  return <></>;
+});
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 09245289f4..b46ebe03d2 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
@@ -9,7 +9,7 @@ export type TIssueTypeSwitcherProps = {
   disabled: boolean;
 };
 
-export const IssueTypeSwitcher: React.FC<TIssueTypeSwitcherProps> = observer((props) => {
+export const IssueTypeSwitcher = observer(function IssueTypeSwitcher(props: TIssueTypeSwitcherProps) {
   const { issueId } = props;
   // store hooks
   const {
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 54ae11689b..d606dac816 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,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -20,7 +18,7 @@ type TIssueParentSelect = {
   workspaceSlug: string;
 };
 
-export const IssueParentSelectRoot: React.FC<TIssueParentSelect> = observer((props) => {
+export const IssueParentSelectRoot = observer(function IssueParentSelectRoot(props: TIssueParentSelect) {
   const { issueId, issueOperations, projectId, workspaceSlug } = props;
   const { t } = useTranslation();
   // store hooks
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 73%
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 930d459496..a0f3afed48 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
@@ -6,4 +6,6 @@ export type TDateAlertProps = {
   projectId: string;
 };
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const DateAlert = (props: TDateAlertProps) => <></>;
+export function DateAlert(props: TDateAlertProps) {
+  return <></>;
+}
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 581698e129..51f616680b 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,5 @@
 import type { TIssue } from "@plane/types";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const TransferHopInfo = ({ workItem }: { workItem: TIssue }) => <></>;
+export function TransferHopInfo({ workItem }: { workItem: TIssue }) {
+  return <></>;
+}
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 1c397c5721..2d10001ee6 100644
--- a/apps/web/ce/components/issues/issue-layouts/additional-properties.tsx
+++ b/apps/web/ce/components/issues/issue-layouts/additional-properties.tsx
@@ -7,4 +7,6 @@ export type TWorkItemLayoutAdditionalProperties = {
   issue: TIssue;
 };
 
-export const WorkItemLayoutAdditionalProperties: FC<TWorkItemLayoutAdditionalProperties> = (props) => <></>;
+export function WorkItemLayoutAdditionalProperties(props: TWorkItemLayoutAdditionalProperties) {
+  return <></>;
+}
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 1e05f40cbd..8f267503c4 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,5 @@
 import { observer } from "mobx-react";
 
-export const TeamEmptyState: React.FC = observer(() => <></>);
+export const TeamEmptyState = observer(function TeamEmptyState() {
+  return <></>;
+});
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 95adbf9a05..ab15463a0a 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,5 @@
 import { observer } from "mobx-react";
 
-export const TeamProjectWorkItemEmptyState: React.FC = observer(() => <></>);
+export const TeamProjectWorkItemEmptyState = observer(function TeamProjectWorkItemEmptyState() {
+  return <></>;
+});
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 03b546be53..c8e7412433 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,5 @@
 import { observer } from "mobx-react";
 
-export const TeamViewEmptyState: React.FC = observer(() => <></>);
+export const TeamViewEmptyState = observer(function TeamViewEmptyState() {
+  return <></>;
+});
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 b6e80910c5..11f34ac1b6 100644
--- a/apps/web/ce/components/issues/issue-layouts/issue-stats.tsx
+++ b/apps/web/ce/components/issues/issue-layouts/issue-stats.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import React from "react";
 
@@ -11,4 +9,6 @@ type Props = {
   showLabel?: boolean;
 };
 
-export const IssueStats: FC<Props> = (props) => <></>;
+export function IssueStats(props: Props) {
+  return <></>;
+}
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 761317a013..c186c77e3a 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
@@ -8,4 +8,6 @@ type TDuplicateWorkItemModalProps = {
   projectId: string;
 };
 
-export const DuplicateWorkItemModal: FC<TDuplicateWorkItemModalProps> = () => <></>;
+export function DuplicateWorkItemModal(_props: TDuplicateWorkItemModalProps) {
+  return <></>;
+}
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 ab73750ed6..2a02e13672 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
@@ -23,4 +23,6 @@ export type TIssueTypeSelectProps<T extends Partial<TIssueFields>> = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const IssueTypeSelect = <T extends Partial<TIssueFields>>(props: TIssueTypeSelectProps<T>) => <></>;
+export function IssueTypeSelect<T extends Partial<TIssueFields>>(props: TIssueTypeSelectProps<T>) {
+  return <></>;
+}
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 091d0c7ae2..c0011d51a1 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
@@ -7,4 +7,6 @@ export type TWorkItemModalAdditionalPropertiesProps = {
   workspaceSlug: string;
 };
 
-export const WorkItemModalAdditionalProperties: React.FC<TWorkItemModalAdditionalPropertiesProps> = () => null;
+export function WorkItemModalAdditionalProperties(_props: TWorkItemModalAdditionalPropertiesProps) {
+  return null;
+}
diff --git a/apps/web/ce/components/issues/issue-modal/provider.tsx b/apps/web/ce/components/issues/issue-modal/provider.tsx
index bd623cdda4..82763907f7 100644
--- a/apps/web/ce/components/issues/issue-modal/provider.tsx
+++ b/apps/web/ce/components/issues/issue-modal/provider.tsx
@@ -14,7 +14,7 @@ export type TIssueModalProviderProps = {
   children: React.ReactNode;
 };
 
-export const IssueModalProvider = observer((props: TIssueModalProviderProps) => {
+export const IssueModalProvider = observer(function IssueModalProvider(props: TIssueModalProviderProps) {
   const { children, allowedProjectIds } = props;
   // states
   const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | null>(null);
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 6d58bb33c9..7cad3debb0 100644
--- a/apps/web/ce/components/issues/issue-modal/template-select.tsx
+++ b/apps/web/ce/components/issues/issue-modal/template-select.tsx
@@ -13,4 +13,6 @@ export type TWorkItemTemplateSelect = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const WorkItemTemplateSelect = (props: TWorkItemTemplateSelect) => <></>;
+export function WorkItemTemplateSelect(props: TWorkItemTemplateSelect) {
+  return <></>;
+}
diff --git a/apps/web/ce/components/issues/quick-add/root.tsx b/apps/web/ce/components/issues/quick-add/root.tsx
index e01d4bd219..4857d8bb17 100644
--- a/apps/web/ce/components/issues/quick-add/root.tsx
+++ b/apps/web/ce/components/issues/quick-add/root.tsx
@@ -34,7 +34,7 @@ export type TQuickAddIssueFormRoot = {
   isEpic: boolean;
 };
 
-export const QuickAddIssueFormRoot: FC<TQuickAddIssueFormRoot> = observer((props) => {
+export const QuickAddIssueFormRoot = observer(function QuickAddIssueFormRoot(props: TQuickAddIssueFormRoot) {
   const { isOpen, layout, projectId, hasError = false, setFocus, register, onSubmit, onClose, isEpic } = props;
   // store hooks
   const { getProjectById } = useProject();
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 cbc4607fb2..27b109986c 100644
--- a/apps/web/ce/components/issues/worklog/activity/filter-root.tsx
+++ b/apps/web/ce/components/issues/worklog/activity/filter-root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 // plane imports
 import type { TActivityFilters, TActivityFilterOption } from "@plane/constants";
@@ -14,7 +12,7 @@ export type TActivityFilterRoot = {
   isIntakeIssue?: boolean;
 };
 
-export const ActivityFilterRoot: FC<TActivityFilterRoot> = (props) => {
+export function ActivityFilterRoot(props: TActivityFilterRoot) {
   const { selectedFilters, toggleFilter } = props;
 
   const filters: TActivityFilterOption[] = Object.entries(ACTIVITY_FILTER_TYPE_OPTIONS).map(([key, value]) => {
@@ -28,4 +26,4 @@ export const ActivityFilterRoot: FC<TActivityFilterRoot> = (props) => {
   });
 
   return <ActivityFilter selectedFilters={selectedFilters} filterOptions={filters} />;
-};
+}
diff --git a/apps/web/ce/components/issues/worklog/activity/root.tsx b/apps/web/ce/components/issues/worklog/activity/root.tsx
index 42a0a28eb6..7b5a8ca9ac 100644
--- a/apps/web/ce/components/issues/worklog/activity/root.tsx
+++ b/apps/web/ce/components/issues/worklog/activity/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import type { TIssueActivityComment } from "@plane/types";
 
@@ -11,4 +9,6 @@ type TIssueActivityWorklog = {
   ends?: "top" | "bottom";
 };
 
-export const IssueActivityWorklog: FC<TIssueActivityWorklog> = () => <></>;
+export function IssueActivityWorklog(_props: TIssueActivityWorklog) {
+  return <></>;
+}
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 17acfb2f47..8e9ac541b9 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,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 
 type TIssueActivityWorklogCreateButton = {
@@ -9,4 +7,6 @@ type TIssueActivityWorklogCreateButton = {
   disabled: boolean;
 };
 
-export const IssueActivityWorklogCreateButton: FC<TIssueActivityWorklogCreateButton> = () => <></>;
+export function IssueActivityWorklogCreateButton(_props: TIssueActivityWorklogCreateButton) {
+  return <></>;
+}
diff --git a/apps/web/ce/components/issues/worklog/property/root.tsx b/apps/web/ce/components/issues/worklog/property/root.tsx
index a0a4d28999..5ab77f3dd3 100644
--- a/apps/web/ce/components/issues/worklog/property/root.tsx
+++ b/apps/web/ce/components/issues/worklog/property/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 
 type TIssueWorklogProperty = {
@@ -9,4 +7,6 @@ type TIssueWorklogProperty = {
   disabled: boolean;
 };
 
-export const IssueWorklogProperty: FC<TIssueWorklogProperty> = () => <></>;
+export function IssueWorklogProperty(_props: TIssueWorklogProperty) {
+  return <></>;
+}
diff --git a/apps/web/ce/components/license/modal/upgrade-modal.tsx b/apps/web/ce/components/license/modal/upgrade-modal.tsx
index 5917fc7645..2fc439d690 100644
--- a/apps/web/ce/components/license/modal/upgrade-modal.tsx
+++ b/apps/web/ce/components/license/modal/upgrade-modal.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import {
@@ -21,14 +18,14 @@ 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;
   handleClose: () => void;
 };
 
-export const PaidPlanUpgradeModal: FC<PaidPlanUpgradeModalProps> = observer((props) => {
+export const PaidPlanUpgradeModal = observer(function PaidPlanUpgradeModal(props: PaidPlanUpgradeModalProps) {
   const { isOpen, handleClose } = props;
   // derived values
   const isSelfHosted = true;
@@ -50,9 +47,9 @@ export const PaidPlanUpgradeModal: FC<PaidPlanUpgradeModalProps> = observer((pro
         <div className="grid grid-cols-12 gap-6 h-full">
           {/* 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="text-24 font-bold leading-8 flex">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="text-13 mb-4 pr-8 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>
@@ -71,7 +68,7 @@ export const PaidPlanUpgradeModal: FC<PaidPlanUpgradeModalProps> = observer((pro
               verticalFeatureList
               extraFeatures={
                 <p className={COMMON_EXTRA_FEATURES_CLASSNAME}>
-                  <a href={SUBSCRIPTION_WEBPAGE_URLS[EProductSubscriptionEnum.PRO]} target="_blank">
+                  <a href={SUBSCRIPTION_WEBPAGE_URLS[EProductSubscriptionEnum.PRO]} target="_blank" rel="noreferrer">
                     See full features list
                   </a>
                 </p>
@@ -89,7 +86,11 @@ export const PaidPlanUpgradeModal: FC<PaidPlanUpgradeModalProps> = observer((pro
               verticalFeatureList
               extraFeatures={
                 <p className={COMMON_EXTRA_FEATURES_CLASSNAME}>
-                  <a href={SUBSCRIPTION_WEBPAGE_URLS[EProductSubscriptionEnum.BUSINESS]} target="_blank">
+                  <a
+                    href={SUBSCRIPTION_WEBPAGE_URLS[EProductSubscriptionEnum.BUSINESS]}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
                     See full features list
                   </a>
                 </p>
@@ -107,7 +108,11 @@ export const PaidPlanUpgradeModal: FC<PaidPlanUpgradeModalProps> = observer((pro
               verticalFeatureList
               extraFeatures={
                 <p className={COMMON_EXTRA_FEATURES_CLASSNAME}>
-                  <a href={SUBSCRIPTION_WEBPAGE_URLS[EProductSubscriptionEnum.ENTERPRISE]} target="_blank">
+                  <a
+                    href={SUBSCRIPTION_WEBPAGE_URLS[EProductSubscriptionEnum.ENTERPRISE]}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
                     See full features list
                   </a>
                 </p>
diff --git a/apps/web/ce/components/navigations/index.ts b/apps/web/ce/components/navigations/index.ts
new file mode 100644
index 0000000000..ed26407514
--- /dev/null
+++ b/apps/web/ce/components/navigations/index.ts
@@ -0,0 +1,2 @@
+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
new file mode 100644
index 0000000000..b853f05a43
--- /dev/null
+++ b/apps/web/ce/components/navigations/top-navigation-root.tsx
@@ -0,0 +1,82 @@
+// components
+import { observer } from "mobx-react";
+import { useParams, usePathname } from "next/navigation";
+import { cn } from "@plane/utils";
+import { TopNavPowerK } from "@/components/navigation";
+import { HelpMenuRoot } from "@/components/workspace/sidebar/help-section/root";
+import { UserMenuRoot } from "@/components/workspace/sidebar/user-menu-root";
+import { WorkspaceMenuRoot } from "@/components/workspace/sidebar/workspace-menu-root";
+import { useAppRailPreferences } from "@/hooks/use-navigation-preferences";
+import { Tooltip } from "@plane/propel/tooltip";
+import { AppSidebarItem } from "@/components/sidebar/sidebar-item";
+import { InboxIcon } from "@plane/propel/icons";
+import useSWR from "swr";
+import { useWorkspaceNotifications } from "@/hooks/store/notifications";
+// local imports
+import { StarUsOnGitHubLink } from "@/app/(all)/[workspaceSlug]/(projects)/star-us-link";
+
+export const TopNavigationRoot = observer(function TopNavigationRoot() {
+  // router
+  const { workspaceSlug } = useParams();
+  const pathname = usePathname();
+
+  // store hooks
+  const { unreadNotificationsCount, getUnreadNotificationsCount } = useWorkspaceNotifications();
+  const { preferences } = useAppRailPreferences();
+
+  const showLabel = preferences.displayMode === "icon_with_label";
+
+  // Fetch notification count
+  useSWR(
+    workspaceSlug ? "WORKSPACE_UNREAD_NOTIFICATION_COUNT" : null,
+    workspaceSlug ? () => getUnreadNotificationsCount(workspaceSlug.toString()) : null
+  );
+
+  // Calculate notification count
+  const isMentionsEnabled = unreadNotificationsCount.mention_unread_notifications_count > 0;
+  const totalNotifications = isMentionsEnabled
+    ? unreadNotificationsCount.mention_unread_notifications_count
+    : unreadNotificationsCount.total_unread_notifications_count;
+
+  return (
+    <div
+      className={cn("flex items-center min-h-10 w-full px-3.5 bg-canvas z-[27] transition-all duration-300", {
+        "px-2": !showLabel,
+      })}
+    >
+      {/* Workspace Menu */}
+      <div className="shrink-0 flex-1">
+        <WorkspaceMenuRoot variant="top-navigation" />
+      </div>
+      {/* Power K Search */}
+      <div className="shrink-0">
+        <TopNavPowerK />
+      </div>
+      {/* Additional Actions */}
+      <div className="shrink-0 flex-1 flex gap-1 items-center justify-end">
+        <Tooltip tooltipContent="Inbox" position="bottom">
+          <AppSidebarItem
+            variant="link"
+            item={{
+              href: `/${workspaceSlug?.toString()}/notifications/`,
+              icon: (
+                <div className="relative">
+                  <InboxIcon className="size-5" />
+                  {totalNotifications > 0 && (
+                    <span className="absolute -top-0 -right-0 size-2 rounded-full bg-red-500" />
+                  )}
+                </div>
+              ),
+              isActive: pathname?.includes("/notifications/"),
+            }}
+          />
+        </Tooltip>
+        <HelpMenuRoot />
+        <StarUsOnGitHubLink />
+        <div className="flex items-center justify-center size-8 hover:bg-layer-1-hover rounded-md">
+          <UserMenuRoot size="xs" />
+        </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
new file mode 100644
index 0000000000..db051cb631
--- /dev/null
+++ b/apps/web/ce/components/navigations/use-navigation-items.ts
@@ -0,0 +1,109 @@
+import { useMemo, useCallback } from "react";
+// plane imports
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { CycleIcon, IntakeIcon, ModuleIcon, PageIcon, ViewsIcon, WorkItemsIcon } from "@plane/propel/icons";
+import type { EUserProjectRoles, IPartialProject } from "@plane/types";
+import type { TNavigationItem } from "@/components/navigation/tab-navigation-root";
+
+type UseNavigationItemsProps = {
+  workspaceSlug: string;
+  projectId: string;
+  project?: IPartialProject;
+  allowPermissions: (
+    access: EUserPermissions[] | EUserProjectRoles[],
+    level: EUserPermissionsLevel,
+    workspaceSlug: string,
+    projectId: string
+  ) => boolean;
+};
+
+export const useNavigationItems = ({
+  workspaceSlug,
+  projectId,
+  project,
+  allowPermissions,
+}: UseNavigationItemsProps): TNavigationItem[] => {
+  // Base navigation items
+  const baseNavigation = useCallback(
+    (workspaceSlug: string, projectId: string): TNavigationItem[] => [
+      {
+        i18n_key: "sidebar.work_items",
+        key: "work_items",
+        name: "Work items",
+        href: `/${workspaceSlug}/projects/${projectId}/issues`,
+        icon: WorkItemsIcon,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+        shouldRender: true,
+        sortOrder: 1,
+      },
+      {
+        i18n_key: "sidebar.cycles",
+        key: "cycles",
+        name: "Cycles",
+        href: `/${workspaceSlug}/projects/${projectId}/cycles`,
+        icon: CycleIcon,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+        shouldRender: !!project?.cycle_view,
+        sortOrder: 2,
+      },
+      {
+        i18n_key: "sidebar.modules",
+        key: "modules",
+        name: "Modules",
+        href: `/${workspaceSlug}/projects/${projectId}/modules`,
+        icon: ModuleIcon,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+        shouldRender: !!project?.module_view,
+        sortOrder: 3,
+      },
+      {
+        i18n_key: "sidebar.views",
+        key: "views",
+        name: "Views",
+        href: `/${workspaceSlug}/projects/${projectId}/views`,
+        icon: ViewsIcon,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+        shouldRender: !!project?.issue_views_view,
+        sortOrder: 4,
+      },
+      {
+        i18n_key: "sidebar.pages",
+        key: "pages",
+        name: "Pages",
+        href: `/${workspaceSlug}/projects/${projectId}/pages`,
+        icon: PageIcon,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+        shouldRender: !!project?.page_view,
+        sortOrder: 5,
+      },
+      {
+        i18n_key: "sidebar.intake",
+        key: "intake",
+        name: "Intake",
+        href: `/${workspaceSlug}/projects/${projectId}/intake`,
+        icon: IntakeIcon,
+        access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
+        shouldRender: !!project?.inbox_view,
+        sortOrder: 6,
+      },
+    ],
+    [project]
+  );
+
+  // Combine, filter, and sort navigation items
+  const navigationItems = useMemo(() => {
+    const navItems = baseNavigation(workspaceSlug, projectId);
+
+    // Filter by permissions and shouldRender
+    const filteredItems = navItems.filter((item) => {
+      if (!item.shouldRender) return false;
+      const hasAccess = allowPermissions(item.access, EUserPermissionsLevel.PROJECT, workspaceSlug, project?.id ?? "");
+      return hasAccess;
+    });
+
+    // Sort by sortOrder
+    return filteredItems.sort((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0));
+  }, [workspaceSlug, projectId, baseNavigation, allowPermissions, project?.id]);
+
+  return navigationItems;
+};
diff --git a/apps/web/core/components/onboarding/tour/root.tsx b/apps/web/ce/components/onboarding/tour/root.tsx
similarity index 82%
rename from apps/web/core/components/onboarding/tour/root.tsx
rename to apps/web/ce/components/onboarding/tour/root.tsx
index cd074a1686..f5498b0468 100644
--- a/apps/web/core/components/onboarding/tour/root.tsx
+++ b/apps/web/ce/components/onboarding/tour/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -20,7 +18,7 @@ import { useUser } from "@/hooks/store/user";
 // local imports
 import { TourSidebar } from "./sidebar";
 
-type Props = {
+export type TOnboardingTourProps = {
   onComplete: () => void;
 };
 
@@ -30,7 +28,7 @@ const TOUR_STEPS: {
   key: TTourSteps;
   title: string;
   description: string;
-  image: any;
+  image: string;
   prevStep?: TTourSteps;
   nextStep?: TTourSteps;
 }[] = [
@@ -77,7 +75,7 @@ const TOUR_STEPS: {
   },
 ];
 
-export const TourRoot: React.FC<Props> = observer((props) => {
+export const TourRoot = observer(function TourRoot(props: TOnboardingTourProps) {
   const { onComplete } = props;
   // states
   const [step, setStep] = useState<TTourSteps>("welcome");
@@ -91,21 +89,21 @@ export const TourRoot: React.FC<Props> = observer((props) => {
   return (
     <>
       {step === "welcome" ? (
-        <div className="h-3/4 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-3/5 place-items-center bg-custom-primary-100">
-              <PlaneLockup className="h-10 w-auto text-custom-text-100" />
+            <div className="grid h-64 place-items-center bg-accent-primary">
+              <PlaneLockup className="h-10 w-auto text-on-color" />
             </div>
-            <div className="flex h-2/5 flex-col overflow-y-auto p-6">
-              <h3 className="font-semibold sm:text-xl">
+            <div className="flex flex-col overflow-y-auto p-6">
+              <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>
               <div className="flex h-full items-end">
-                <div className="mt-8 flex items-center gap-6">
+                <div className="mt-12 flex items-center gap-6">
                   <Button
                     variant="primary"
                     onClick={() => {
@@ -119,7 +117,7 @@ export const TourRoot: React.FC<Props> = observer((props) => {
                   </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,
@@ -135,30 +133,30 @@ export const TourRoot: React.FC<Props> = observer((props) => {
           </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 right-[9%] top-[19%] z-10 -translate-y-1/2 translate-x-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="h-3 w-3 text-primary border-strong-" />
           </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} />
             </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>
                   )}
diff --git a/apps/web/ce/components/onboarding/tour/sidebar.tsx b/apps/web/ce/components/onboarding/tour/sidebar.tsx
new file mode 100644
index 0000000000..2a41cd503b
--- /dev/null
+++ b/apps/web/ce/components/onboarding/tour/sidebar.tsx
@@ -0,0 +1,69 @@
+// plane imports
+import { CycleIcon, ModuleIcon, PageIcon, ViewsIcon, WorkItemsIcon } from "@plane/propel/icons";
+import type { ISvgIcons } from "@plane/propel/icons";
+// types
+import type { TTourSteps } from "./root";
+
+const sidebarOptions: {
+  key: TTourSteps;
+  label: string;
+  Icon: React.FC<ISvgIcons>;
+}[] = [
+  {
+    key: "work-items",
+    label: "Work items",
+    Icon: WorkItemsIcon,
+  },
+  {
+    key: "cycles",
+    label: "Cycles",
+    Icon: CycleIcon,
+  },
+  {
+    key: "modules",
+    label: "Modules",
+    Icon: ModuleIcon,
+  },
+  {
+    key: "views",
+    label: "Views",
+    Icon: ViewsIcon,
+  },
+  {
+    key: "pages",
+    label: "Pages",
+    Icon: PageIcon,
+  },
+];
+
+type Props = {
+  step: TTourSteps;
+  setStep: React.Dispatch<React.SetStateAction<TTourSteps>>;
+};
+
+export function TourSidebar({ step, setStep }: Props) {
+  return (
+    <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.
+      </h3>
+      <div className="mt-8 space-y-5">
+        {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-13 font-medium capitalize ${
+              step === option.key ? "border-accent-strong text-accent-primary" : "border-transparent text-secondary"
+            }`}
+            onClick={() => setStep(option.key)}
+            role="button"
+          >
+            <option.Icon className="h-4 w-4" aria-hidden="true" />
+            {option.label}
+          </h5>
+        ))}
+      </div>
+    </div>
+  );
+}
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 adeab2da94..21fe0185b8 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
@@ -17,7 +17,7 @@ type Props = {
   workspaceSlug: string;
 };
 
-export const AskPiMenu: React.FC<Props> = (props) => {
+export function AskPiMenu(props: Props) {
   const { handleInsertText, handleRegenerate, isRegenerating, response, workspaceSlug } = props;
   // states
   const [query, setQuery] = useState("");
@@ -33,7 +33,7 @@ export const AskPiMenu: React.FC<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="flex-shrink-0 size-7 grid place-items-center text-secondary rounded-full border border-subtle">
           <Sparkles className="size-3" />
         </span>
         {response ? (
@@ -53,7 +53,7 @@ export const AskPiMenu: React.FC<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="p-1 text-tertiary text-13 font-medium rounded-sm hover:bg-layer-1 outline-none"
                 onClick={() => handleInsertText(false)}
               >
                 Replace selection
@@ -61,16 +61,16 @@ export const AskPiMenu: React.FC<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="flex-shrink-0 size-6 grid place-items-center rounded-sm hover:bg-layer-1 outline-none"
                   onClick={() => handleInsertText(true)}
                 >
-                  <CornerDownRight className="text-custom-text-300 size-4" />
+                  <CornerDownRight className="text-tertiary size-4" />
                 </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="flex-shrink-0 size-6 grid place-items-center rounded-sm hover:bg-layer-1 outline-none"
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
@@ -79,7 +79,7 @@ export const AskPiMenu: React.FC<Props> = (props) => {
                   disabled={isRegenerating}
                 >
                   <RefreshCcw
-                    className={cn("text-custom-text-300 size-4", {
+                    className={cn("text-tertiary size-4", {
                       "animate-spin": isRegenerating,
                     })}
                   />
@@ -88,26 +88,26 @@ export const AskPiMenu: React.FC<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">
+        <div className="flex items-center gap-2 border border-subtle rounded-md p-2">
           <span className="flex-shrink-0 size-3 grid place-items-center">
-            <Sparkles className="size-3 text-custom-text-200" />
+            <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 bg-transparent border-none outline-none placeholder:text-placeholder text-13"
             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" />
+            <CircleArrowUp className="size-4 text-secondary" />
           </span>
         </div>
       </div>
     </>
   );
-};
+}
diff --git a/apps/web/ce/components/pages/editor/ai/menu.tsx b/apps/web/ce/components/pages/editor/ai/menu.tsx
index 033c8ff88e..448fbd07a9 100644
--- a/apps/web/ce/components/pages/editor/ai/menu.tsx
+++ b/apps/web/ce/components/pages/editor/ai/menu.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useEffect, useRef, useState } from "react";
 import type { LucideIcon } from "lucide-react";
 import { CornerDownRight, RefreshCcw, Sparkles, TriangleAlert } from "lucide-react";
@@ -60,7 +58,7 @@ const TONES_LIST = [
   },
 ];
 
-export const EditorAIMenu: React.FC<Props> = (props) => {
+export function EditorAIMenu(props: Props) {
   const { editorRef, isOpen, onClose, workspaceId, workspaceSlug } = props;
   // states
   const [activeTask, setActiveTask] = useState<AI_EDITOR_TASKS | null>(null);
@@ -140,7 +138,7 @@ export const EditorAIMenu: React.FC<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",
+        "w-[210px] flex flex-col rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200 transition-all",
         {
           "w-[700px]": activeTask,
         }
@@ -148,7 +146,7 @@ export const EditorAIMenu: React.FC<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">
@@ -160,9 +158,9 @@ export const EditorAIMenu: React.FC<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",
+                  "w-full flex items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-11 text-secondary hover:bg-layer-1 transition-colors",
                   {
-                    "bg-custom-background-80": isActiveTask,
+                    "bg-layer-1": isActiveTask,
                   }
                 )}
                 onClick={(e) => {
@@ -205,7 +203,7 @@ export const EditorAIMenu: React.FC<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="flex-shrink-0 size-7 grid place-items-center text-secondary rounded-full border border-subtle">
                   <Sparkles className="size-3" />
                 </span>
                 {response ? (
@@ -225,7 +223,7 @@ export const EditorAIMenu: React.FC<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="p-1 text-tertiary text-13 font-medium rounded-sm hover:bg-layer-1 outline-none"
                         onClick={() => handleInsertText(false)}
                       >
                         Replace selection
@@ -233,16 +231,16 @@ export const EditorAIMenu: React.FC<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="flex-shrink-0 size-6 grid place-items-center rounded-sm hover:bg-layer-1 outline-none"
                           onClick={() => handleInsertText(true)}
                         >
-                          <CornerDownRight className="text-custom-text-300 size-4" />
+                          <CornerDownRight className="text-tertiary size-4" />
                         </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="flex-shrink-0 size-6 grid place-items-center rounded-sm hover:bg-layer-1 outline-none"
                           onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
@@ -251,7 +249,7 @@ export const EditorAIMenu: React.FC<Props> = (props) => {
                           disabled={isRegenerating}
                         >
                           <RefreshCcw
-                            className={cn("text-custom-text-300 size-4", {
+                            className={cn("text-tertiary size-4", {
                               "animate-spin": isRegenerating,
                             })}
                           />
@@ -260,20 +258,20 @@ export const EditorAIMenu: React.FC<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 w-full bg-surface-1 pl-[54.8px] py-2 flex items-center gap-2">
                 {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",
+                      "p-1 text-11 text-secondary font-medium bg-layer-1 rounded-sm 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) => {
@@ -291,15 +289,15 @@ export const EditorAIMenu: React.FC<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">
+        <div className="bg-surface-2 rounded-b-md py-2 px-4 text-tertiary flex items-center gap-2 border-t border-subtle">
           <span className="flex-shrink-0 size-4 grid 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>
       )}
     </div>
   );
-};
+}
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 bd61ceaa81..331db5ec95 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
@@ -4,28 +4,30 @@ import { cn } from "@plane/utils";
 // components
 import { ProIcon } from "@/components/common/pro-icon";
 
-export const IssueEmbedUpgradeCard: React.FC<any> = (props) => (
-  <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",
-      {
-        "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">
-        Embed and access issues in pages seamlessly, upgrade to Plane Pro now.
-      </p>
-    </div>
-    <a
-      href="https://plane.so/pro"
-      target="_blank"
-      rel="noopener noreferrer"
-      className={cn(getButtonStyling("primary", "md"), "no-underline")}
+export function IssueEmbedUpgradeCard(props: any) {
+  return (
+    <div
+      className={cn(
+        "w-full bg-layer-1 rounded-md border-[0.5px] border-subtle shadow-raised-100 flex items-center justify-between gap-5 px-5 py-2 max-md:flex-wrap",
+        {
+          "border-2": props.selected,
+        }
+      )}
     >
-      Upgrade
-    </a>
-  </div>
-);
+      <div className="flex items-center gap-4">
+        <ProIcon className="flex-shrink-0 size-4" />
+        <p className="text-secondary !text-14">
+          Embed and access issues in pages seamlessly, upgrade to Plane Pro now.
+        </p>
+      </div>
+      <a
+        href="https://plane.so/pro"
+        target="_blank"
+        rel="noopener noreferrer"
+        className={cn(getButtonStyling("primary", "base"), "no-underline")}
+      >
+        Upgrade
+      </a>
+    </div>
+  );
+}
diff --git a/apps/web/ce/components/pages/extra-actions.tsx b/apps/web/ce/components/pages/extra-actions.tsx
index 9e70d8d87f..28ebe15371 100644
--- a/apps/web/ce/components/pages/extra-actions.tsx
+++ b/apps/web/ce/components/pages/extra-actions.tsx
@@ -7,4 +7,6 @@ export type TPageHeaderExtraActionsProps = {
   storeType: EPageStoreType;
 };
 
-export const PageDetailsHeaderExtraActions: React.FC<TPageHeaderExtraActionsProps> = () => null;
+export function PageDetailsHeaderExtraActions(_props: TPageHeaderExtraActionsProps) {
+  return null;
+}
diff --git a/apps/web/ce/components/pages/header/collaborators-list.tsx b/apps/web/ce/components/pages/header/collaborators-list.tsx
index eefc533e93..6dbd4cf811 100644
--- a/apps/web/ce/components/pages/header/collaborators-list.tsx
+++ b/apps/web/ce/components/pages/header/collaborators-list.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 // store
 import type { TPageInstance } from "@/store/pages/base-page";
 
@@ -7,4 +5,6 @@ export type TPageCollaboratorsListProps = {
   page: TPageInstance;
 };
 
-export const PageCollaboratorsList = ({}: TPageCollaboratorsListProps) => null;
+export function PageCollaboratorsList({}: TPageCollaboratorsListProps) {
+  return null;
+}
diff --git a/apps/web/ce/components/pages/header/lock-control.tsx b/apps/web/ce/components/pages/header/lock-control.tsx
index 2403b6889f..dddc7e6bf3 100644
--- a/apps/web/ce/components/pages/header/lock-control.tsx
+++ b/apps/web/ce/components/pages/header/lock-control.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState, useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import { LockKeyhole, LockKeyholeOpen } from "lucide-react";
@@ -20,7 +18,7 @@ type Props = {
   page: TPageInstance;
 };
 
-export const PageLockControl = observer(({ page }: Props) => {
+export const PageLockControl = observer(function PageLockControl({ page }: Props) {
   // Initial state: if locked, then "locked", otherwise default to "neutral"
   const [displayState, setDisplayState] = useState<LockDisplayState>(page.is_locked ? "locked" : "neutral");
   // derived values
@@ -82,7 +80,7 @@ export const PageLockControl = observer(({ page }: Props) => {
             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="flex-shrink-0 size-6 grid place-items-center rounded-sm text-secondary hover:text-primary hover:bg-layer-1 transition-colors"
             aria-label="Lock"
           >
             <LockKeyhole className="size-3.5" />
@@ -95,11 +93,11 @@ export const PageLockControl = observer(({ page }: Props) => {
           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="h-6 flex items-center gap-1 px-2 rounded-sm text-accent-primary bg-accent-primary/20 hover:bg-accent-primary/30 transition-colors"
           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">
+          <span className="text-11 font-medium whitespace-nowrap overflow-hidden transition-all duration-500 ease-out animate-text-slide-in">
             Locked
           </span>
         </button>
@@ -107,11 +105,11 @@ export const PageLockControl = observer(({ page }: Props) => {
 
       {displayState === "unlocked" && (
         <div
-          className="h-6 flex items-center gap-1 px-2 rounded text-custom-text-200 animate-fade-out"
+          className="h-6 flex items-center gap-1 px-2 rounded-sm text-secondary animate-fade-out"
           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">
+          <span className="text-11 font-medium whitespace-nowrap overflow-hidden transition-all duration-500 ease-out animate-text-slide-in animate-text-fade-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 40376d7e3b..dee6b88baf 100644
--- a/apps/web/ce/components/pages/header/move-control.tsx
+++ b/apps/web/ce/components/pages/header/move-control.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 // store
 import type { TPageInstance } from "@/store/pages/base-page";
 
@@ -7,4 +5,6 @@ export type TPageMoveControlProps = {
   page: TPageInstance;
 };
 
-export const PageMoveControl = ({}: TPageMoveControlProps) => null;
+export function PageMoveControl({}: TPageMoveControlProps) {
+  return null;
+}
diff --git a/apps/web/ce/components/pages/header/share-control.tsx b/apps/web/ce/components/pages/header/share-control.tsx
index 4a79e0397e..3b19105573 100644
--- a/apps/web/ce/components/pages/header/share-control.tsx
+++ b/apps/web/ce/components/pages/header/share-control.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { EPageStoreType } from "@/plane-web/hooks/store";
 // store
 import type { TPageInstance } from "@/store/pages/base-page";
@@ -9,4 +7,6 @@ export type TPageShareControlProps = {
   storeType: EPageStoreType;
 };
 
-export const PageShareControl = ({}: TPageShareControlProps) => null;
+export function PageShareControl({}: TPageShareControlProps) {
+  return null;
+}
diff --git a/apps/web/ce/components/pages/modals/modals.tsx b/apps/web/ce/components/pages/modals/modals.tsx
index d47dbae328..ddfe5f3d1c 100644
--- a/apps/web/ce/components/pages/modals/modals.tsx
+++ b/apps/web/ce/components/pages/modals/modals.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type React from "react";
 import { observer } from "mobx-react";
 // components
@@ -12,4 +10,6 @@ export type TPageModalsProps = {
   storeType: EPageStoreType;
 };
 
-export const PageModals: React.FC<TPageModalsProps> = observer((props) => null);
+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 b8726a421a..9abe0e4ec6 100644
--- a/apps/web/ce/components/pages/modals/move-page-modal.tsx
+++ b/apps/web/ce/components/pages/modals/move-page-modal.tsx
@@ -7,4 +7,6 @@ export type TMovePageModalProps = {
   page: TPageInstance;
 };
 
-export const MovePageModal: React.FC<TMovePageModalProps> = () => null;
+export function MovePageModal(_props: TMovePageModalProps) {
+  return null;
+}
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 0e3cc49c70..45d6062861 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
@@ -10,4 +10,6 @@ export type TAdditionalPageNavigationPaneAssetItemProps = {
   page: TPageInstance;
 };
 
-export const AdditionalPageNavigationPaneAssetItem: React.FC<TAdditionalPageNavigationPaneAssetItemProps> = () => null;
+export function AdditionalPageNavigationPaneAssetItem(_props: TAdditionalPageNavigationPaneAssetItemProps) {
+  return null;
+}
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 b5f3fd83f0..35c0773040 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
@@ -5,7 +5,7 @@ import { useTranslation } from "@plane/i18n";
 import darkAssetsAsset from "@/app/assets/empty-state/wiki/navigation-pane/assets-dark.webp?url";
 import lightAssetsAsset from "@/app/assets/empty-state/wiki/navigation-pane/assets-light.webp?url";
 
-export const PageNavigationPaneAssetsTabEmptyState = () => {
+export function PageNavigationPaneAssetsTabEmptyState() {
   // theme hook
   const { resolvedTheme } = useTheme();
   // asset resolved path
@@ -16,18 +16,14 @@ export const PageNavigationPaneAssetsTabEmptyState = () => {
   return (
     <div className="size-full grid 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 text-secondary font-medium">
             {t("page_navigation_pane.tabs.assets.empty_state.description")}
           </p>
         </div>
       </div>
     </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 d53843571f..f9b9e612ec 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
@@ -5,7 +5,7 @@ import { useTranslation } from "@plane/i18n";
 import darkOutlineAsset from "@/app/assets/empty-state/wiki/navigation-pane/outline-dark.webp?url";
 import lightOutlineAsset from "@/app/assets/empty-state/wiki/navigation-pane/outline-light.webp?url";
 
-export const PageNavigationPaneOutlineTabEmptyState = () => {
+export function PageNavigationPaneOutlineTabEmptyState() {
   // theme hook
   const { resolvedTheme } = useTheme();
   // asset resolved path
@@ -16,18 +16,14 @@ export const PageNavigationPaneOutlineTabEmptyState = () => {
   return (
     <div className="size-full grid 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 text-secondary font-medium">
             {t("page_navigation_pane.tabs.outline.empty_state.description")}
           </p>
         </div>
       </div>
     </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 1581b4948f..a12d26be41 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
@@ -8,6 +8,6 @@ export type TPageNavigationPaneAdditionalTabPanelsRootProps = {
   page: TPageInstance;
 };
 
-export const PageNavigationPaneAdditionalTabPanelsRoot: React.FC<
-  TPageNavigationPaneAdditionalTabPanelsRootProps
-> = () => null;
+export function PageNavigationPaneAdditionalTabPanelsRoot(_props: TPageNavigationPaneAdditionalTabPanelsRootProps) {
+  return null;
+}
diff --git a/apps/web/ce/components/preferences/theme-switcher.tsx b/apps/web/ce/components/preferences/theme-switcher.tsx
index 0460fbcaf7..d6e6dc252c 100644
--- a/apps/web/ce/components/preferences/theme-switcher.tsx
+++ b/apps/web/ce/components/preferences/theme-switcher.tsx
@@ -1,6 +1,4 @@
-"use client";
-
-import { useEffect, useState, useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
 // plane imports
@@ -8,8 +6,7 @@ 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";
@@ -18,90 +15,85 @@ import { PreferencesSection } from "@/components/preferences/section";
 // hooks
 import { useUserProfile } from "@/hooks/store/user";
 
-export const ThemeSwitcher = observer(
-  (props: {
-    option: {
-      id: string;
-      title: string;
-      description: string;
-    };
-  }) => {
-    // hooks
-    const { setTheme } = useTheme();
-    const { data: userProfile, updateUserTheme } = useUserProfile();
+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]);
 
-    // states
-    const [currentTheme, setCurrentTheme] = useState<I_THEME_OPTION | null>(null);
+  const handleThemeChange = useCallback(
+    async (themeOption: I_THEME_OPTION) => {
+      try {
+        setTheme(themeOption.value);
 
-    const { t } = useTranslation();
+        // 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"
+          );
+        }
 
-    // initialize theme
-    useEffect(() => {
-      if (!userProfile?.theme?.theme) return;
-
-      const userThemeOption = THEME_OPTIONS.find((t) => t.value === userProfile.theme.theme);
-
-      if (userThemeOption) {
-        setCurrentTheme(userThemeOption);
+        const updatePromise = updateUserTheme({ theme: themeOption.value });
+        setPromiseToast(updatePromise, {
+          loading: "Updating theme...",
+          success: {
+            title: "Theme updated",
+            message: () => "Reloading to apply changes...",
+          },
+          error: {
+            title: "Error!",
+            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);
       }
-    }, [userProfile?.theme?.theme]);
+    },
+    [setTheme, updateUserTheme, userProfile]
+  );
 
-    // handlers
-    const applyThemeChange = useCallback(
-      (theme: Partial<IUserTheme>) => {
-        const themeValue = theme?.theme || "system";
-        setTheme(themeValue);
+  if (!userProfile) return null;
 
-        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();
+  return (
+    <>
+      <PreferencesSection
+        title={t(props.option.title)}
+        description={t(props.option.description)}
+        control={
+          <div>
+            <ThemeSwitch
+              value={currentTheme}
+              onChange={(themeOption) => {
+                void handleThemeChange(themeOption);
+              }}
+            />
+          </div>
         }
-      },
-      [setTheme]
-    );
-
-    const handleThemeChange = useCallback(
-      async (themeOption: I_THEME_OPTION) => {
-        try {
-          applyThemeChange({ theme: 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);
-        }
-      },
-      [applyThemeChange, updateUserTheme]
-    );
-
-    if (!userProfile) return null;
-
-    return (
-      <>
-        <PreferencesSection
-          title={t(props.option.title)}
-          description={t(props.option.description)}
-          control={
-            <div className="">
-              <ThemeSwitch value={currentTheme} onChange={handleThemeChange} />
-            </div>
-          }
-        />
-        {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 e1119f0522..d86a381098 100644
--- a/apps/web/ce/components/projects/create/attributes.tsx
+++ b/apps/web/ce/components/projects/create/attributes.tsx
@@ -1,4 +1,3 @@
-"use client";
 import type { FC } from "react";
 import { Controller, useFormContext } from "react-hook-form";
 // plane imports
@@ -15,7 +14,7 @@ type Props = {
   isMobile?: boolean;
 };
 
-const ProjectAttributes: FC<Props> = (props) => {
+function ProjectAttributes(props: Props) {
   const { isMobile = false } = props;
   const { t } = useTranslation();
   const { control } = useFormContext<IProject>();
@@ -41,7 +40,7 @@ const ProjectAttributes: FC<Props> = (props) => {
                         {t(currentNetwork.i18n_label)}
                       </>
                     ) : (
-                      <span className="text-custom-text-400">{t("select_network")}</span>
+                      <span className="text-placeholder">{t("select_network")}</span>
                     )}
                   </div>
                 }
@@ -57,7 +56,7 @@ const ProjectAttributes: FC<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>
@@ -89,6 +88,8 @@ const ProjectAttributes: FC<Props> = (props) => {
       />
     </div>
   );
-};
+}
 
 export default ProjectAttributes;
+
+export { ProjectAttributes };
diff --git a/apps/web/ce/components/projects/create/root.tsx b/apps/web/ce/components/projects/create/root.tsx
index 27abe7aad4..dce8102940 100644
--- a/apps/web/ce/components/projects/create/root.tsx
+++ b/apps/web/ce/components/projects/create/root.tsx
@@ -1,24 +1,25 @@
-"use client";
-
-import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { FormProvider, useForm } from "react-hook-form";
-import { DEFAULT_PROJECT_FORM_VALUES, PROJECT_TRACKER_EVENTS } from "@plane/constants";
+import { PROJECT_TRACKER_EVENTS, RANDOM_EMOJI_CODES } from "@plane/constants";
 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
 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 { 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 { getProjectFormValues } from "./utils";
 
 export type TCreateProjectFormProps = {
   setToFavorite?: boolean;
@@ -30,16 +31,16 @@ export type TCreateProjectFormProps = {
   updateCoverImageStatus: (projectId: string, coverImage: string) => Promise<void>;
 };
 
-export const CreateProjectForm: FC<TCreateProjectFormProps> = observer((props) => {
+export const CreateProjectForm = observer(function CreateProjectForm(props: TCreateProjectFormProps) {
   const { setToFavorite, workspaceSlug, data, onClose, handleNextStep, updateCoverImageStatus } = props;
   // store
   const { t } = useTranslation();
-  const { addProjectToFavorites, createProject } = useProject();
+  const { addProjectToFavorites, createProject, updateProject } = useProject();
   // states
   const [isChangeInIdentifierRequired, setIsChangeInIdentifierRequired] = useState(true);
   // form info
   const methods = useForm<TProject>({
-    defaultValues: { ...DEFAULT_PROJECT_FORM_VALUES, ...data },
+    defaultValues: { ...getProjectFormValues(), ...data },
     reValidateMode: "onChange",
   });
   const { handleSubmit, reset, setValue } = methods;
@@ -60,16 +61,42 @@ export const CreateProjectForm: FC<TCreateProjectFormProps> = observer((props) =
     // Upper case identifier
     formData.identifier = formData.identifier?.toUpperCase();
     const coverImage = formData.cover_image_url;
-    // if unsplash or a pre-defined image is uploaded, delete the old uploaded asset
-    if (coverImage?.startsWith("http")) {
-      formData.cover_image = coverImage;
-      formData.cover_image_asset = null;
+    let uploadedAssetUrl: string | null = null;
+
+    if (coverImage) {
+      const imageType = getCoverImageType(coverImage);
+
+      if (imageType === "local_static") {
+        try {
+          uploadedAssetUrl = await uploadCoverImage(coverImage, {
+            workspaceSlug: workspaceSlug.toString(),
+            entityIdentifier: "",
+            entityType: EFileAssetType.PROJECT_COVER,
+            isUserAsset: false,
+          });
+        } catch (error) {
+          console.error("Error uploading cover image:", error);
+          setToast({
+            type: TOAST_TYPE.ERROR,
+            title: t("toast.error"),
+            message: error instanceof Error ? error.message : "Failed to upload cover image",
+          });
+          return Promise.reject(error);
+        }
+      } else {
+        formData.cover_image = coverImage;
+        formData.cover_image_asset = null;
+      }
     }
 
     return createProject(workspaceSlug.toString(), formData)
       .then(async (res) => {
-        if (coverImage) {
+        if (uploadedAssetUrl) {
+          await updateCoverImageStatus(res.id, uploadedAssetUrl);
+          await updateProject(workspaceSlug.toString(), res.id, { cover_image_url: uploadedAssetUrl });
+        } else if (coverImage && coverImage.startsWith("http")) {
           await updateCoverImageStatus(res.id, coverImage);
+          await updateProject(workspaceSlug.toString(), res.id, { cover_image_url: coverImage });
         }
         captureSuccess({
           eventName: PROJECT_TRACKER_EVENTS.create,
diff --git a/apps/web/ce/components/projects/create/template-select.tsx b/apps/web/ce/components/projects/create/template-select.tsx
index e304af8351..b41232852c 100644
--- a/apps/web/ce/components/projects/create/template-select.tsx
+++ b/apps/web/ce/components/projects/create/template-select.tsx
@@ -9,4 +9,6 @@ export type TProjectTemplateSelect = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const ProjectTemplateSelect = (props: TProjectTemplateSelect) => <></>;
+export function ProjectTemplateSelect(props: TProjectTemplateSelect) {
+  return <></>;
+}
diff --git a/apps/web/ce/components/projects/create/utils.ts b/apps/web/ce/components/projects/create/utils.ts
new file mode 100644
index 0000000000..4605fa2bf8
--- /dev/null
+++ b/apps/web/ce/components/projects/create/utils.ts
@@ -0,0 +1,18 @@
+import { RANDOM_EMOJI_CODES } from "@plane/constants";
+import type { IProject } from "@plane/types";
+import { getRandomCoverImage } from "@/helpers/cover-image.helper";
+
+export const getProjectFormValues = (): Partial<IProject> => ({
+  cover_image_url: getRandomCoverImage(),
+  description: "",
+  logo_props: {
+    in_use: "emoji",
+    emoji: {
+      value: RANDOM_EMOJI_CODES[Math.floor(Math.random() * RANDOM_EMOJI_CODES.length)],
+    },
+  },
+  identifier: "",
+  name: "",
+  network: 2,
+  project_lead: null,
+});
diff --git a/apps/web/ce/components/projects/header.tsx b/apps/web/ce/components/projects/header.tsx
index 08871ec9b6..81cde755f8 100644
--- a/apps/web/ce/components/projects/header.tsx
+++ b/apps/web/ce/components/projects/header.tsx
@@ -1,5 +1,5 @@
-"use client";
-
 import { ProjectsBaseHeader } from "@/components/project/header";
 
-export const ProjectsListHeader = () => <ProjectsBaseHeader />;
+export function ProjectsListHeader() {
+  return <ProjectsBaseHeader />;
+}
diff --git a/apps/web/ce/components/projects/mobile-header.tsx b/apps/web/ce/components/projects/mobile-header.tsx
index 855ea2d8f6..8eff30aaf0 100644
--- a/apps/web/ce/components/projects/mobile-header.tsx
+++ b/apps/web/ce/components/projects/mobile-header.tsx
@@ -1,4 +1,3 @@
-"use client";
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -16,7 +15,7 @@ import { ProjectOrderByDropdown } from "@/components/project/dropdowns/order-by"
 import { useMember } from "@/hooks/store/use-member";
 import { useProjectFilter } from "@/hooks/store/use-project-filter";
 
-export const ProjectsListMobileHeader = observer(() => {
+export const ProjectsListMobileHeader = observer(function ProjectsListMobileHeader() {
   // i18n
   const { t } = useTranslation();
   // router
@@ -53,7 +52,7 @@ export const ProjectsListMobileHeader = observer(() => {
   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 py-2 border-b border-subtle md:hidden bg-surface-1 w-full">
       <ProjectOrderByDropdown
         value={displayFilters?.order_by}
         onChange={(val) => {
@@ -64,13 +63,13 @@ export const ProjectsListMobileHeader = observer(() => {
         }}
         isMobile
       />
-      <div className="border-l border-custom-border-200 flex justify-around w-full">
+      <div className="border-l border-subtle flex justify-around w-full">
         <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 text-13 items-center gap-2 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/page.tsx b/apps/web/ce/components/projects/page.tsx
index 65151def4e..64ec67bbe0 100644
--- a/apps/web/ce/components/projects/page.tsx
+++ b/apps/web/ce/components/projects/page.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
@@ -9,7 +7,7 @@ import { ProjectRoot } from "@/components/project/root";
 import { useProject } from "@/hooks/store/use-project";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 
-export const ProjectPageRoot = observer(() => {
+export const ProjectPageRoot = observer(function ProjectPageRoot() {
   // router
   const { workspaceSlug } = useParams();
   // store
diff --git a/apps/web/ce/components/projects/settings/intake/header.tsx b/apps/web/ce/components/projects/settings/intake/header.tsx
index 692eecd141..aba1264d77 100644
--- a/apps/web/ce/components/projects/settings/intake/header.tsx
+++ b/apps/web/ce/components/projects/settings/intake/header.tsx
@@ -1,25 +1,24 @@
-"use client";
-
-import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { RefreshCcw } from "lucide-react";
 // ui
-import { EProjectFeatureKey, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
+import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
 import { InboxIssueCreateModalRoot } from "@/components/inbox/modals/create-modal";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
 import { useProjectInbox } from "@/hooks/store/use-project-inbox";
 import { useUserPermissions } from "@/hooks/store/user";
-// plane web
+// plane web imports
 import { CommonProjectBreadcrumbs } from "@/plane-web/components/breadcrumbs/common";
+import { IntakeIcon } from "@plane/propel/icons";
 
-export const ProjectInboxHeader: FC = observer(() => {
+export const ProjectInboxHeader = observer(function ProjectInboxHeader() {
   // states
   const [createIssueModal, setCreateIssueModal] = useState(false);
   // router
@@ -42,18 +41,24 @@ export const ProjectInboxHeader: FC = observer(() => {
       <Header.LeftItem>
         <div className="flex items-center gap-4 flex-grow">
           <Breadcrumbs isLoading={currentProjectDetailsLoader === "init-loader"}>
-            <CommonProjectBreadcrumbs
-              workspaceSlug={workspaceSlug?.toString() ?? ""}
-              projectId={projectId?.toString() ?? ""}
-              featureKey={EProjectFeatureKey.INTAKE}
+            <CommonProjectBreadcrumbs workspaceSlug={workspaceSlug?.toString()} projectId={projectId?.toString()} />
+            <Breadcrumbs.Item
+              component={
+                <BreadcrumbLink
+                  label="Intake"
+                  href={`/${workspaceSlug}/projects/${projectId}/intake/`}
+                  icon={<IntakeIcon className="h-4 w-4 text-tertiary" />}
+                  isLast
+                />
+              }
               isLast
             />
           </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>
@@ -67,8 +72,7 @@ export const ProjectInboxHeader: FC = observer(() => {
               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 43f8983c6e..378629e2cc 100644
--- a/apps/web/ce/components/projects/settings/useProjectColumns.tsx
+++ b/apps/web/ce/components/projects/settings/useProjectColumns.tsx
@@ -65,7 +65,7 @@ export const useProjectColumns = (props: TUseProjectColumnsProps) => {
       tdRender: (rowData: RowData) => (
         <NameColumn
           rowData={rowData}
-          workspaceSlug={workspaceSlug as string}
+          workspaceSlug={workspaceSlug}
           isAdmin={isAdmin}
           currentUser={currentUser}
           setRemoveMemberModal={setRemoveMemberModal}
@@ -94,7 +94,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",
@@ -110,8 +110,8 @@ export const useProjectColumns = (props: TUseProjectColumnsProps) => {
         <AccountTypeColumn
           rowData={rowData}
           currentProjectRole={currentProjectRole}
-          projectId={projectId as string}
-          workspaceSlug={workspaceSlug as string}
+          projectId={projectId}
+          workspaceSlug={workspaceSlug}
         />
       ),
     },
diff --git a/apps/web/ce/components/projects/teamspaces/teamspace-list.tsx b/apps/web/ce/components/projects/teamspaces/teamspace-list.tsx
index 05d401c576..137e962ace 100644
--- a/apps/web/ce/components/projects/teamspaces/teamspace-list.tsx
+++ b/apps/web/ce/components/projects/teamspaces/teamspace-list.tsx
@@ -3,4 +3,6 @@ export type TProjectTeamspaceList = {
   projectId: string;
 };
 
-export const ProjectTeamspaceList: React.FC<TProjectTeamspaceList> = () => null;
+export function ProjectTeamspaceList(_props: TProjectTeamspaceList) {
+  return null;
+}
diff --git a/apps/web/ce/components/relations/index.tsx b/apps/web/ce/components/relations/index.tsx
index f9d72944c2..9e833feb5d 100644
--- a/apps/web/ce/components/relations/index.tsx
+++ b/apps/web/ce/components/relations/index.tsx
@@ -9,29 +9,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" />,
+    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 f2ef9aba42..5119266dda 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
@@ -5,11 +5,14 @@ import type { TFilterValue, TFilterProperty } from "@plane/types";
 // local imports
 import type { TFilterValueInputProps } from "@/components/rich-filters/shared";
 
-export const AdditionalFilterValueInput = observer(
-  <P extends TFilterProperty, V extends TFilterValue>(_props: TFilterValueInputProps<P, V>) => (
+export const AdditionalFilterValueInput = observer(function AdditionalFilterValueInput<
+  P extends TFilterProperty,
+  V extends TFilterValue,
+>(_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="h-full flex items-center px-4 text-11 text-placeholder transition-opacity duration-200 cursor-not-allowed">
       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 1344211b0a..9bd2d21db4 100644
--- a/apps/web/ce/components/sidebar/app-switcher.tsx
+++ b/apps/web/ce/components/sidebar/app-switcher.tsx
@@ -1 +1,3 @@
-export const SidebarAppSwitcher = () => null;
+export function SidebarAppSwitcher() {
+  return null;
+}
diff --git a/apps/web/ce/components/sidebar/project-navigation-root.tsx b/apps/web/ce/components/sidebar/project-navigation-root.tsx
index d4ca7bc325..29f66fd8b7 100644
--- a/apps/web/ce/components/sidebar/project-navigation-root.tsx
+++ b/apps/web/ce/components/sidebar/project-navigation-root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 // components
 import { ProjectNavigation } from "@/components/workspace/sidebar/project-navigation";
@@ -9,7 +7,7 @@ type TProjectItemsRootProps = {
   projectId: string;
 };
 
-export const ProjectNavigationRoot: FC<TProjectItemsRootProps> = (props) => {
+export function ProjectNavigationRoot(props: TProjectItemsRootProps) {
   const { workspaceSlug, projectId } = props;
   return <ProjectNavigation workspaceSlug={workspaceSlug} projectId={projectId} />;
-};
+}
diff --git a/apps/web/ce/components/views/access-controller.tsx b/apps/web/ce/components/views/access-controller.tsx
index 8eefff0279..56b59a0215 100644
--- a/apps/web/ce/components/views/access-controller.tsx
+++ b/apps/web/ce/components/views/access-controller.tsx
@@ -1,2 +1,4 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const AccessController = (props: any) => <></>;
+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 8c3232d473..ebc8c3ef8d 100644
--- a/apps/web/ce/components/views/filters/access-filter.tsx
+++ b/apps/web/ce/components/views/filters/access-filter.tsx
@@ -1,2 +1,4 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const FilterByAccess = (props: any) => <></>;
+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 d2932ddac6..155249e2d1 100644
--- a/apps/web/ce/components/views/helper.tsx
+++ b/apps/web/ce/components/views/helper.tsx
@@ -1,7 +1,4 @@
-import { ExternalLink, Link, Pencil, Trash2 } from "lucide-react";
-import { useTranslation } from "@plane/i18n";
 import type { EIssueLayoutTypes, IProjectView } from "@plane/types";
-import type { TContextMenuItem } from "@plane/ui";
 import type { TWorkspaceLayoutProps } from "@/components/views/helper";
 
 export type TLayoutSelectionProps = {
@@ -10,71 +7,15 @@ export type TLayoutSelectionProps = {
   workspaceSlug: string;
 };
 
-export const GlobalViewLayoutSelection = (props: TLayoutSelectionProps) => <></>;
+export function GlobalViewLayoutSelection(props: TLayoutSelectionProps) {
+  return <></>;
+}
 
-export const WorkspaceAdditionalLayouts = (props: TWorkspaceLayoutProps) => <></>;
-
-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()];
-};
+export function WorkspaceAdditionalLayouts(props: TWorkspaceLayoutProps) {
+  return <></>;
+}
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const AdditionalHeaderItems = (view: IProjectView) => <></>;
+export function AdditionalHeaderItems(view: IProjectView) {
+  return <></>;
+}
diff --git a/apps/web/ce/components/views/publish/modal.tsx b/apps/web/ce/components/views/publish/modal.tsx
index f92b3138d4..241e356806 100644
--- a/apps/web/ce/components/views/publish/modal.tsx
+++ b/apps/web/ce/components/views/publish/modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { IProjectView } from "@plane/types";
 
 type Props = {
@@ -9,4 +7,6 @@ type Props = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const PublishViewModal = (props: Props) => <></>;
+export function PublishViewModal(props: Props) {
+  return <></>;
+}
diff --git a/apps/web/ce/components/workflow/state-option.tsx b/apps/web/ce/components/workflow/state-option.tsx
index d9d911a9cc..1c31e030f2 100644
--- a/apps/web/ce/components/workflow/state-option.tsx
+++ b/apps/web/ce/components/workflow/state-option.tsx
@@ -1,6 +1,7 @@
 import { observer } from "mobx-react";
 import { Check } from "lucide-react";
 import { Combobox } from "@headlessui/react";
+import { cn } from "@plane/utils";
 
 export type TStateOptionProps = {
   projectId: string | null | undefined;
@@ -16,7 +17,7 @@ export type TStateOptionProps = {
   alwaysAllowStateChange?: boolean;
 };
 
-export const StateOption = observer((props: TStateOptionProps) => {
+export const StateOption = observer(function StateOption(props: TStateOptionProps) {
   const { option, className = "" } = props;
 
   return (
@@ -24,7 +25,7 @@ export const StateOption = observer((props: TStateOptionProps) => {
       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 }) => (
diff --git a/apps/web/ce/components/workflow/workflow-disabled-message.tsx b/apps/web/ce/components/workflow/workflow-disabled-message.tsx
index af3489556e..87f2c04080 100644
--- a/apps/web/ce/components/workflow/workflow-disabled-message.tsx
+++ b/apps/web/ce/components/workflow/workflow-disabled-message.tsx
@@ -4,4 +4,6 @@ type Props = {
   className?: string;
 };
 
-export const WorkFlowDisabledMessage = (props: Props) => <></>;
+export function WorkFlowDisabledMessage(props: Props) {
+  return <></>;
+}
diff --git a/apps/web/ce/components/workflow/workflow-disabled-overlay.tsx b/apps/web/ce/components/workflow/workflow-disabled-overlay.tsx
index 5ec69f432c..197a808a22 100644
--- a/apps/web/ce/components/workflow/workflow-disabled-overlay.tsx
+++ b/apps/web/ce/components/workflow/workflow-disabled-overlay.tsx
@@ -7,4 +7,6 @@ export type TWorkflowDisabledOverlayProps = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const WorkFlowDisabledOverlay = observer((props: TWorkflowDisabledOverlayProps) => <></>);
+export const WorkFlowDisabledOverlay = observer(function WorkFlowDisabledOverlay(props: TWorkflowDisabledOverlayProps) {
+  return <></>;
+});
diff --git a/apps/web/ce/components/workflow/workflow-group-tree.tsx b/apps/web/ce/components/workflow/workflow-group-tree.tsx
index bc4cf9b1ca..3f0e7300a4 100644
--- a/apps/web/ce/components/workflow/workflow-group-tree.tsx
+++ b/apps/web/ce/components/workflow/workflow-group-tree.tsx
@@ -6,4 +6,6 @@ type Props = {
   groupId: string | undefined;
 };
 
-export const WorkFlowGroupTree = (props: Props) => <></>;
+export function WorkFlowGroupTree(props: Props) {
+  return <></>;
+}
diff --git a/apps/web/ce/components/workspace-notifications/list-root.tsx b/apps/web/ce/components/workspace-notifications/list-root.tsx
index 55fd68c3ff..cad9c438b8 100644
--- a/apps/web/ce/components/workspace-notifications/list-root.tsx
+++ b/apps/web/ce/components/workspace-notifications/list-root.tsx
@@ -5,4 +5,6 @@ export type TNotificationListRoot = {
   workspaceId: string;
 };
 
-export const NotificationListRoot = (props: TNotificationListRoot) => <NotificationCardListRoot {...props} />;
+export function NotificationListRoot(props: TNotificationListRoot) {
+  return <NotificationCardListRoot {...props} />;
+}
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 214b0fb9c4..aed7327667 100644
--- a/apps/web/ce/components/workspace-notifications/notification-card/root.tsx
+++ b/apps/web/ce/components/workspace-notifications/notification-card/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -15,7 +13,7 @@ type TNotificationCardListRoot = {
   workspaceId: string;
 };
 
-export const NotificationCardListRoot: FC<TNotificationCardListRoot> = observer((props) => {
+export const NotificationCardListRoot = observer(function NotificationCardListRoot(props: TNotificationCardListRoot) {
   const { workspaceSlug, workspaceId } = props;
   // hooks
   const { loader, paginationInfo, getNotifications, notificationIdsByWorkspaceId } = useWorkspaceNotifications();
@@ -41,12 +39,12 @@ export const NotificationCardListRoot: FC<TNotificationCardListRoot> = observer(
       {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="py-4 flex justify-center items-center 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="py-4 flex justify-center items-center text-13 font-medium" onClick={getNextNotifications}>
+              <div className="text-accent-secondary hover:text-accent-primary transition-all cursor-pointer">
                 {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 8650d2a56b..f4f5ce0ff3 100644
--- a/apps/web/ce/components/workspace/app-switcher.tsx
+++ b/apps/web/ce/components/workspace/app-switcher.tsx
@@ -1,5 +1,5 @@
-"use client";
-
 import React from "react";
 
-export const WorkspaceAppSwitcher = () => <></>;
+export function WorkspaceAppSwitcher() {
+  return <></>;
+}
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 b15d67b911..4460eeff39 100644
--- a/apps/web/ce/components/workspace/billing/billing-actions-button.tsx
+++ b/apps/web/ce/components/workspace/billing/billing-actions-button.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 
 export type TBillingActionsButtonProps = {
@@ -7,4 +5,6 @@ export type TBillingActionsButtonProps = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const BillingActionsButton = observer((props: TBillingActionsButtonProps) => <></>);
+export const BillingActionsButton = observer(function BillingActionsButton(props: TBillingActionsButtonProps) {
+  return <></>;
+});
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 2993f32926..50c5333982 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,6 @@
-import type { FC } from "react";
 // 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 = {
@@ -13,48 +11,43 @@ type TPlanFrequencyToggleProps = {
   setSelectedFrequency: (frequency: TBillingFrequency) => void;
 };
 
-export const PlanFrequencyToggle: FC<TPlanFrequencyToggleProps> = observer((props) => {
-  const { subscriptionType, monthlyPrice, yearlyPrice, selectedFrequency, setSelectedFrequency } = props;
+export const PlanFrequencyToggle = observer(function PlanFrequencyToggle(props: TPlanFrequencyToggleProps) {
+  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 items-center cursor-pointer py-1">
+      <div className="flex space-x-1 rounded-md bg-layer-3 p-0.5 w-full">
+        <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-caption-sm-medium leading-5 text-center",
             selectedFrequency === "month"
-              ? "bg-custom-background-100 text-custom-text-100 shadow"
-              : "text-custom-text-300 hover:text-custom-text-200"
+              ? "bg-layer-2 text-primary shadow-raised-100 border border-subtle-1"
+              : "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-caption-sm-medium leading-5 text-center",
             selectedFrequency === "year"
-              ? "bg-custom-background-100 text-custom-text-100 shadow"
-              : "text-custom-text-300 hover:text-custom-text-200"
+              ? "bg-layer-2 text-primary shadow-raised-100 border border-subtle-1"
+              : "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="bg-accent-primary text-on-color rounded-full px-1 py-0.5 ml-1.5 text-caption-xs-regular">
               -{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 03af2fa323..cdc170c446 100644
--- a/apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx
+++ b/apps/web/ce/components/workspace/billing/comparison/plan-detail.tsx
@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import {
@@ -9,11 +8,10 @@ import {
   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";
@@ -28,10 +26,7 @@ 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: FC<TPlanDetailProps> = observer((props) => {
+export const PlanDetail = observer(function PlanDetail(props: TPlanDetailProps) {
   const { subscriptionType, planDetail, billingFrequency, setBillingFrequency } = props;
   // plane hooks
   const { t } = useTranslation();
@@ -45,8 +40,6 @@ export const PlanDetail: FC<TPlanDetailProps> = observer((props) => {
     billingFrequency === "month"
       ? planDetail.monthlyPriceSecondaryDescription
       : planDetail.yearlyPriceSecondaryDescription;
-  // helper styles
-  const upgradeButtonStyle = getUpgradeButtonStyle(subscriptionType, false) ?? getButtonStyling("primary", "lg");
 
   const handleRedirection = () => {
     const frequency = billingFrequency ?? "year";
@@ -66,15 +59,17 @@ export const PlanDetail: FC<TPlanDetailProps> = observer((props) => {
     <div className="flex flex-col justify-between col-span-1 p-3 space-y-0.5">
       {/* 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 gap-2 items-center 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="px-2 py-0.5 rounded-sm text-on-color bg-accent-primary text-caption-sm-medium">
+              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 gap-x-2 items-start text-tertiary pb-1">
           {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 +80,9 @@ export const PlanDetail: FC<TPlanDetailProps> = observer((props) => {
             </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,10 +102,12 @@ export const PlanDetail: FC<TPlanDetailProps> = observer((props) => {
       )}
 
       {/* Subscription button */}
-      <div className={cn("flex flex-col gap-1 py-3 items-start transition-all duration-300")}>
-        <button
+      <div className="flex flex-col gap-1 py-3 items-start">
+        <Button
+          variant="primary"
+          size="lg"
           onClick={handleRedirection}
-          className={cn(upgradeButtonStyle, COMMON_BUTTON_STYLE)}
+          className="w-full"
           data-ph-element={
             isSubscriptionActive
               ? WORKSPACE_SETTINGS_TRACKER_ELEMENTS.BILLING_UPGRADE_BUTTON(subscriptionType)
@@ -120,7 +115,7 @@ export const PlanDetail: FC<TPlanDetailProps> = observer((props) => {
           }
         >
           {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 3c09582755..109667c219 100644
--- a/apps/web/ce/components/workspace/billing/comparison/root.tsx
+++ b/apps/web/ce/components/workspace/billing/comparison/root.tsx
@@ -15,7 +15,7 @@ type TPlansComparisonProps = {
   setIsCompareAllFeaturesSectionOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-export const PlansComparison = observer((props: TPlansComparisonProps) => {
+export const PlansComparison = observer(function PlansComparison(props: TPlansComparisonProps) {
   const {
     isCompareAllFeaturesSectionOpen,
     getBillingFrequency,
diff --git a/apps/web/ce/components/workspace/billing/root.tsx b/apps/web/ce/components/workspace/billing/root.tsx
index e9ac6e1892..2753887d17 100644
--- a/apps/web/ce/components/workspace/billing/root.tsx
+++ b/apps/web/ce/components/workspace/billing/root.tsx
@@ -5,14 +5,12 @@ 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 { SettingsHeading } from "@/components/settings/heading";
 // local imports
 import { PlansComparison } from "./comparison/root";
 
-export const BillingRoot = observer(() => {
+export const BillingRoot = observer(function BillingRoot() {
   const [isCompareAllFeaturesSectionOpen, setIsCompareAllFeaturesSectionOpen] = useState(false);
   const [productBillingFrequency, setProductBillingFrequency] = useState<TProductBillingFrequency>(
     DEFAULT_PRODUCT_BILLING_FREQUENCY
@@ -44,24 +42,20 @@ export const BillingRoot = observer(() => {
         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>
         <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="px-6 py-4 rounded-lg bg-layer-1">
+            <div className="flex gap-2 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">
+                <h4 className="text-h4-bold text-primary">Community</h4>
+                <div className="text-caption-md-medium text-secondary">
                   Unlimited projects, issues, cycles, modules, pages, and storage
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <div className="text-xl font-semibold mt-3">All plans</div>
+        <div className="text-h4-semibold mt-3">All plans</div>
       </div>
       <PlansComparison
         isCompareAllFeaturesSectionOpen={isCompareAllFeaturesSectionOpen}
diff --git a/apps/web/ce/components/workspace/content-wrapper.tsx b/apps/web/ce/components/workspace/content-wrapper.tsx
index 79a74f56fd..86e15689dd 100644
--- a/apps/web/ce/components/workspace/content-wrapper.tsx
+++ b/apps/web/ce/components/workspace/content-wrapper.tsx
@@ -1,9 +1,37 @@
-"use client";
 import React from "react";
 import { observer } from "mobx-react";
+// plane imports
+import { cn } from "@plane/utils";
+import { AppRailRoot } from "@/components/navigation";
+import { useAppRailVisibility } from "@/lib/app-rail";
+// local imports
+import { TopNavigationRoot } from "../navigations";
 
-export const WorkspaceContentWrapper = observer(({ children }: { children: React.ReactNode }) => (
-  <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">{children}</div>
-  </div>
-));
+export const WorkspaceContentWrapper = observer(function WorkspaceContentWrapper({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // Use the context to determine if app rail should render
+  const { shouldRenderAppRail } = useAppRailVisibility();
+
+  return (
+    <div className="flex flex-col relative size-full overflow-hidden bg-canvas transition-all ease-in-out duration-300">
+      <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",
+            {
+              "pl-0!": shouldRenderAppRail,
+            }
+          )}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/ce/components/workspace/delete-workspace-modal.tsx b/apps/web/ce/components/workspace/delete-workspace-modal.tsx
index cccee781fc..ae9fdec9a9 100644
--- a/apps/web/ce/components/workspace/delete-workspace-modal.tsx
+++ b/apps/web/ce/components/workspace/delete-workspace-modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 import type { IWorkspace } from "@plane/types";
@@ -16,7 +14,7 @@ type Props = {
   onClose: () => void;
 };
 
-export const DeleteWorkspaceModal: React.FC<Props> = observer((props) => {
+export const DeleteWorkspaceModal = observer(function DeleteWorkspaceModal(props: Props) {
   const { isOpen, data, onClose } = props;
 
   return (
diff --git a/apps/web/ce/components/workspace/delete-workspace-section.tsx b/apps/web/ce/components/workspace/delete-workspace-section.tsx
index a9975b8f59..8fb5999291 100644
--- a/apps/web/ce/components/workspace/delete-workspace-section.tsx
+++ b/apps/web/ce/components/workspace/delete-workspace-section.tsx
@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
 // types
@@ -16,7 +15,7 @@ type TDeleteWorkspace = {
   workspace: IWorkspace | null;
 };
 
-export const DeleteWorkspaceSection: FC<TDeleteWorkspace> = observer((props) => {
+export const DeleteWorkspaceSection = observer(function DeleteWorkspaceSection(props: TDeleteWorkspace) {
   const { workspace } = props;
   // states
   const [isOpen, setIsOpen] = useState(false);
@@ -30,7 +29,7 @@ export const DeleteWorkspaceSection: FC<TDeleteWorkspace> = observer((props) =>
         isOpen={deleteWorkspaceModal}
         onClose={() => setDeleteWorkspaceModal(false)}
       />
-      <div className="border-t border-custom-border-100">
+      <div className="border-t border-subtle">
         <div className="w-full">
           <Collapsible
             isOpen={isOpen}
@@ -39,7 +38,7 @@ export const DeleteWorkspaceSection: FC<TDeleteWorkspace> = observer((props) =>
             buttonClassName="flex w-full items-center justify-between py-4"
             title={
               <>
-                <span className="text-lg tracking-tight">
+                <span className="text-body-md-medium tracking-tight">
                   {t("workspace_settings.settings.general.delete_workspace")}
                 </span>
                 {isOpen ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronDownIcon className="h-5 w-5" />}
@@ -47,12 +46,13 @@ export const DeleteWorkspaceSection: FC<TDeleteWorkspace> = observer((props) =>
             }
           >
             <div className="flex flex-col gap-4">
-              <span className="text-base tracking-tight">
+              <span className="text-body-sm-regular tracking-tight">
                 {t("workspace_settings.settings.general.delete_workspace_description")}
               </span>
               <div>
                 <Button
-                  variant="danger"
+                  variant="error-fill"
+                  size="lg"
                   onClick={() => setDeleteWorkspaceModal(true)}
                   data-ph-element={WORKSPACE_TRACKER_ELEMENTS.DELETE_WORKSPACE_BUTTON}
                 >
diff --git a/apps/web/ce/components/workspace/edition-badge.tsx b/apps/web/ce/components/workspace/edition-badge.tsx
index bd846c9325..ec7f98675f 100644
--- a/apps/web/ce/components/workspace/edition-badge.tsx
+++ b/apps/web/ce/components/workspace/edition-badge.tsx
@@ -2,15 +2,15 @@ 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(() => {
+export const WorkspaceEditionBadge = observer(function WorkspaceEditionBadge() {
   // states
   const [isPaidPlanPurchaseModalOpen, setIsPaidPlanPurchaseModalOpen] = useState(false);
   // translation
@@ -26,9 +26,8 @@ export const WorkspaceEditionBadge = observer(() => {
       />
       <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 0000000000..8e7291706c
--- /dev/null
+++ b/apps/web/ce/components/workspace/members/index.ts
@@ -0,0 +1,2 @@
+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 f83234e217..a0b72caedd 100644
--- a/apps/web/ce/components/workspace/members/invite-modal.tsx
+++ b/apps/web/ce/components/workspace/members/invite-modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -20,7 +18,9 @@ export type TSendWorkspaceInvitationModalProps = {
   onSubmit: (data: IWorkspaceBulkInviteFormData) => Promise<void> | undefined;
 };
 
-export const SendWorkspaceInvitationModal: React.FC<TSendWorkspaceInvitationModalProps> = observer((props) => {
+export const SendWorkspaceInvitationModal = observer(function SendWorkspaceInvitationModal(
+  props: TSendWorkspaceInvitationModalProps
+) {
   const { isOpen, onClose, onSubmit } = props;
   // store hooks
   const { t } = useTranslation();
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 0000000000..bf3d333d89
--- /dev/null
+++ b/apps/web/ce/components/workspace/members/members-activity-button.tsx
@@ -0,0 +1,6 @@
+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/core/components/onboarding/tour/index.ts b/apps/web/ce/components/workspace/right-sidebar/index.ts
similarity index 100%
rename from apps/web/core/components/onboarding/tour/index.ts
rename to apps/web/ce/components/workspace/right-sidebar/index.ts
diff --git a/apps/web/ce/components/workspace/right-sidebar/root.tsx b/apps/web/ce/components/workspace/right-sidebar/root.tsx
new file mode 100644
index 0000000000..c98bb682a5
--- /dev/null
+++ b/apps/web/ce/components/workspace/right-sidebar/root.tsx
@@ -0,0 +1,10 @@
+import { observer } from "mobx-react";
+
+type TWorkspaceSettingsRightSidebarProps = { workspaceSlug: string };
+
+export const WorkspaceSettingsRightSidebar = observer(function WorkspaceSettingsRightSidebar(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  props: TWorkspaceSettingsRightSidebarProps
+) {
+  return <></>;
+});
diff --git a/apps/web/ce/components/workspace/settings/useMemberColumns.tsx b/apps/web/ce/components/workspace/settings/useMemberColumns.tsx
index 8f2286a6f5..f59ba65eb2 100644
--- a/apps/web/ce/components/workspace/settings/useMemberColumns.tsx
+++ b/apps/web/ce/components/workspace/settings/useMemberColumns.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useParams } from "next/navigation";
-import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { EUserPermissions, EUserPermissionsLevel, LOGIN_MEDIUM_LABELS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { renderFormattedDate } from "@plane/utils";
 import { MemberHeaderColumn } from "@/components/project/member-header-column";
@@ -29,6 +29,7 @@ export const useMemberColumns = () => {
   const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
 
   const isSuspended = (rowData: RowData) => rowData.is_active === false;
+
   // handlers
   const handleDisplayFilterUpdate = (filterUpdates: Partial<IMemberFilters>) => {
     updateFilters(filterUpdates);
@@ -49,7 +50,7 @@ export const useMemberColumns = () => {
       tdRender: (rowData: RowData) => (
         <NameColumn
           rowData={rowData}
-          workspaceSlug={workspaceSlug as string}
+          workspaceSlug={workspaceSlug}
           isAdmin={isAdmin}
           currentUser={currentUser}
           setRemoveMemberModal={setRemoveMemberModal}
@@ -61,9 +62,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
@@ -78,9 +77,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
@@ -101,16 +98,18 @@ export const useMemberColumns = () => {
           handleDisplayFilterUpdate={handleDisplayFilterUpdate}
         />
       ),
-      tdRender: (rowData: RowData) => <AccountTypeColumn rowData={rowData} workspaceSlug={workspaceSlug as string} />,
+      tdRender: (rowData: RowData) => <AccountTypeColumn rowData={rowData} workspaceSlug={workspaceSlug} />,
     },
 
     {
       key: "Authentication",
       content: t("workspace_settings.settings.members.details.authentication"),
-      tdRender: (rowData: RowData) =>
-        isSuspended(rowData) ? null : (
-          <div className="capitalize">{rowData.member.last_login_medium?.replace("-", " ")}</div>
-        ),
+      tdRender: (rowData: RowData) => {
+        if (isSuspended(rowData)) return null;
+        const loginMedium = rowData.member.last_login_medium;
+        if (!loginMedium) return null;
+        return <div>{LOGIN_MEDIUM_LABELS[loginMedium]}</div>;
+      },
     },
 
     {
diff --git a/apps/web/ce/components/workspace/sidebar/app-search.tsx b/apps/web/ce/components/workspace/sidebar/app-search.tsx
deleted file mode 100644
index 89d2607cf8..0000000000
--- a/apps/web/ce/components/workspace/sidebar/app-search.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { observer } from "mobx-react";
-// plane imports
-import { useTranslation } from "@plane/i18n";
-// components
-import { SidebarSearchButton } from "@/components/sidebar/search-button";
-// hooks
-import { usePowerK } from "@/hooks/store/use-power-k";
-
-export const AppSearch = observer(() => {
-  // store hooks
-  const { togglePowerKModal } = usePowerK();
-  // translation
-  const { t } = useTranslation();
-
-  return (
-    <button
-      type="button"
-      onClick={() => togglePowerKModal(true)}
-      aria-label={t("aria_labels.projects_sidebar.open_command_palette")}
-    >
-      <SidebarSearchButton isActive={false} />
-    </button>
-  );
-});
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 44b47c706b..c442aebf45 100644
--- a/apps/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
+++ b/apps/web/ce/components/workspace/sidebar/extended-sidebar-item.tsx
@@ -1,4 +1,3 @@
-import type { FC } from "react";
 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";
@@ -18,9 +17,8 @@ import { cn } from "@plane/utils";
 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, useUserPermissions } from "@/hooks/store/user";
-// plane web imports
+import { useWorkspaceNavigationPreferences } from "@/hooks/use-navigation-preferences";
 // local imports
 import { UpgradeBadge } from "../upgrade-badge";
 import { getSidebarNavigationItemIcon } from "./helper";
@@ -37,7 +35,7 @@ type TExtendedSidebarItemProps = {
   isLastChild: boolean;
 };
 
-export const ExtendedSidebarItem: FC<TExtendedSidebarItemProps> = observer((props) => {
+export const ExtendedSidebarItem = observer(function ExtendedSidebarItem(props: TExtendedSidebarItemProps) {
   const { item, handleOnNavigationItemDrop, disableDrag = false, disableDrop = false, isLastChild } = props;
   const { t } = useTranslation();
   // states
@@ -51,37 +49,16 @@ export const ExtendedSidebarItem: FC<TExtendedSidebarItemProps> = observer((prop
   const pathname = usePathname();
   const { workspaceSlug } = useParams();
   // store hooks
-  const { getNavigationPreferences, updateSidebarPreference } = useWorkspace();
   const { toggleExtendedSidebar } = useAppTheme();
   const { data } = useUser();
   const { allowPermissions } = useUserPermissions();
+  const { preferences: workspacePreferences, toggleWorkspaceItem } = useWorkspaceNavigationPreferences();
 
   // derived values
-  const sidebarPreference = getNavigationPreferences(workspaceSlug.toString());
-  const isPinned = sidebarPreference?.[item.key]?.is_pinned;
+  const isPinned = workspacePreferences.items[item.key]?.is_pinned ?? false;
 
   const handleLinkClick = () => toggleExtendedSidebar(true);
 
-  if (!allowPermissions(item.access as any, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString())) {
-    return null;
-  }
-
-  const itemHref =
-    item.key === "your_work"
-      ? `/${workspaceSlug.toString()}${item.href}${data?.id}`
-      : `/${workspaceSlug.toString()}${item.href}`;
-  const isActive = itemHref === pathname;
-
-  const pinNavigationItem = (workspaceSlug: string, key: string) => {
-    updateSidebarPreference(workspaceSlug, key, { is_pinned: true });
-  };
-
-  const unPinNavigationItem = (workspaceSlug: string, key: string) => {
-    updateSidebarPreference(workspaceSlug, key, { is_pinned: false });
-  };
-
-  const icon = getSidebarNavigationItemIcon(item.key);
-
   useEffect(() => {
     const element = navigationIemRef.current;
     const dragHandleElement = dragHandleRef.current;
@@ -151,16 +128,38 @@ export const ExtendedSidebarItem: FC<TExtendedSidebarItemProps> = observer((prop
     );
   }, [isLastChild, handleOnNavigationItemDrop, disableDrag, disableDrop, item.key]);
 
+  const itemHref =
+    item.key === "your_work"
+      ? `/${workspaceSlug.toString()}${item.href}${data?.id}`
+      : `/${workspaceSlug.toString()}${item.href}`;
+  const isActive = itemHref === pathname;
+
+  const pinNavigationItem = (key: string) => {
+    toggleWorkspaceItem(key, true);
+  };
+
+  const unPinNavigationItem = (key: string) => {
+    toggleWorkspaceItem(key, false);
+  };
+
+  const icon = getSidebarNavigationItemIcon(item.key);
+
+  if (!allowPermissions(item.access as any, EUserPermissionsLevel.WORKSPACE, workspaceSlug.toString())) {
+    return null;
+  }
+
   return (
     <div
       id={`sidebar-${item.key}`}
-      className={cn("relative", { "bg-custom-sidebar-background-80 opacity-60": isDragging })}
+      className={cn("relative", {
+        "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 w-full  flex items-center rounded-md text-primary hover:bg-surface-2"
         )}
         id={`${item.key}`}
       >
@@ -168,15 +167,16 @@ export const ExtendedSidebarItem: FC<TExtendedSidebarItemProps> = observer((prop
           <Tooltip
             // isMobile={isMobile}
             tooltipContent={t("drag_to_rearrange")}
-            position="top-end"
+            position="top-start"
             disabled={isDragging}
           >
             <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",
+                "flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded text-placeholder cursor-grab group-hover/project-item:opacity-100 opacity-0",
                 {
                   "cursor-grabbing": isDragging,
+                  "opacity-100": isDragging,
                 }
               )}
               ref={dragHandleRef}
@@ -189,7 +189,7 @@ export const ExtendedSidebarItem: FC<TExtendedSidebarItemProps> = observer((prop
           <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,15 +201,15 @@ export const ExtendedSidebarItem: FC<TExtendedSidebarItemProps> = observer((prop
             {isPinned ? (
               <Tooltip tooltipContent="Unpin">
                 <PinOff
-                  className="size-3.5 flex-shrink-0 hover:text-custom-text-300 outline-none text-custom-text-400"
-                  onClick={() => unPinNavigationItem(workspaceSlug.toString(), item.key)}
+                  className="size-3.5 flex-shrink-0 hover:text-tertiary outline-none text-placeholder"
+                  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"
-                  onClick={() => pinNavigationItem(workspaceSlug.toString(), item.key)}
+                  className="size-3.5 flex-shrink-0 hover:text-tertiary outline-none text-placeholder"
+                  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 316f77b5d7..50323f3202 100644
--- a/apps/web/ce/components/workspace/sidebar/helper.tsx
+++ b/apps/web/ce/components/workspace/sidebar/helper.tsx
@@ -5,6 +5,7 @@ import {
   DraftIcon,
   HomeIcon,
   InboxIcon,
+  MultipleStickyIcon,
   ProjectIcon,
   ViewsIcon,
   YourWorkIcon,
@@ -31,5 +32,7 @@ export const getSidebarNavigationItemIcon = (key: string, className: string = ""
       return <DraftIcon className={cn("size-4 flex-shrink-0", className)} />;
     case "archives":
       return <ArchiveIcon className={cn("size-4 flex-shrink-0", className)} />;
+    case "stickies":
+      return <MultipleStickyIcon className={cn("size-4 flex-shrink-0", className)} />;
   }
 };
diff --git a/apps/web/ce/components/workspace/sidebar/sidebar-item.tsx b/apps/web/ce/components/workspace/sidebar/sidebar-item.tsx
index 3fbc8d0a24..b497cb4586 100644
--- a/apps/web/ce/components/workspace/sidebar/sidebar-item.tsx
+++ b/apps/web/ce/components/workspace/sidebar/sidebar-item.tsx
@@ -6,4 +6,6 @@ type Props = {
   item: IWorkspaceSidebarNavigationItem;
 };
 
-export const SidebarItem: FC<Props> = ({ item }) => <SidebarItemBase item={item} />;
+export function SidebarItem({ item }: Props) {
+  return <SidebarItemBase item={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 92cbdfc5f5..fd8ca8be95 100644
--- a/apps/web/ce/components/workspace/sidebar/teams-sidebar-list.tsx
+++ b/apps/web/ce/components/workspace/sidebar/teams-sidebar-list.tsx
@@ -1 +1,3 @@
-export const SidebarTeamsList = () => null;
+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 17efeb0157..463ffedd35 100644
--- a/apps/web/ce/components/workspace/upgrade-badge.tsx
+++ b/apps/web/ce/components/workspace/upgrade-badge.tsx
@@ -8,7 +8,7 @@ type TUpgradeBadge = {
   size?: "sm" | "md";
 };
 
-export const UpgradeBadge: FC<TUpgradeBadge> = (props) => {
+export function UpgradeBadge(props: TUpgradeBadge) {
   const { className, size = "sm" } = props;
 
   const { t } = useTranslation();
@@ -16,10 +16,10 @@ export const UpgradeBadge: FC<TUpgradeBadge> = (props) => {
   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 text-accent-secondary bg-accent-primary/20 text-center font-medium outline-none",
         {
-          "text-sm px-3": size === "md",
-          "text-xs px-2": size === "sm",
+          "text-13 px-3": size === "md",
+          "text-11 px-2": size === "sm",
         },
         className
       )}
@@ -27,4 +27,4 @@ export const UpgradeBadge: FC<TUpgradeBadge> = (props) => {
       {t("sidebar.pro")}
     </div>
   );
-};
+}
diff --git a/apps/web/ce/constants/project/settings/features.tsx b/apps/web/ce/constants/project/settings/features.tsx
index 380272ea4a..0017d8cef1 100644
--- a/apps/web/ce/constants/project/settings/features.tsx
+++ b/apps/web/ce/constants/project/settings/features.tsx
@@ -1,5 +1,4 @@
 import type { ReactNode } from "react";
-import { Timer } from "lucide-react";
 // plane imports
 import { CycleIcon, IntakeIcon, ModuleIcon, PageIcon, ViewsIcon } from "@plane/propel/icons";
 import type { IProject } from "@plane/types";
@@ -17,7 +16,6 @@ export type TProperties = {
 };
 
 type TProjectBaseFeatureKeys = "cycles" | "modules" | "views" | "pages" | "inbox";
-type TProjectOtherFeatureKeys = "is_time_tracking_enabled";
 
 type TBaseFeatureList = {
   [key in TProjectBaseFeatureKeys]: TProperties;
@@ -29,7 +27,7 @@ export const PROJECT_BASE_FEATURES_LIST: TBaseFeatureList = {
     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" />,
+    icon: <CycleIcon className="h-5 w-5 flex-shrink-0 rotate-180 text-tertiary" />,
     isPro: false,
     isEnabled: true,
   },
@@ -38,7 +36,7 @@ export const PROJECT_BASE_FEATURES_LIST: TBaseFeatureList = {
     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" />,
+    icon: <ModuleIcon width={20} height={20} className="flex-shrink-0 text-tertiary" />,
     isPro: false,
     isEnabled: true,
   },
@@ -47,7 +45,7 @@ export const PROJECT_BASE_FEATURES_LIST: TBaseFeatureList = {
     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" />,
+    icon: <ViewsIcon className="h-5 w-5 flex-shrink-0 text-tertiary" />,
     isPro: false,
     isEnabled: true,
   },
@@ -56,7 +54,7 @@ export const PROJECT_BASE_FEATURES_LIST: TBaseFeatureList = {
     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" />,
+    icon: <PageIcon className="h-5 w-5 flex-shrink-0 text-tertiary" />,
     isPro: false,
     isEnabled: true,
   },
@@ -65,28 +63,12 @@ export const PROJECT_BASE_FEATURES_LIST: TBaseFeatureList = {
     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" />,
+    icon: <IntakeIcon className="h-5 w-5 flex-shrink-0 text-tertiary" />,
     isPro: false,
     isEnabled: true,
   },
 };
 
-type TOtherFeatureList = {
-  [key in TProjectOtherFeatureKeys]: TProperties;
-};
-
-export const PROJECT_OTHER_FEATURES_LIST: TOtherFeatureList = {
-  is_time_tracking_enabled: {
-    key: "time_tracking",
-    property: "is_time_tracking_enabled",
-    title: "Time Tracking",
-    description: "Log time, see timesheets, and download full CSVs for your entire workspace.",
-    icon: <Timer className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
-    isPro: true,
-    isEnabled: false,
-  },
-};
-
 type TProjectFeatures = {
   project_features: {
     key: string;
@@ -94,12 +76,6 @@ type TProjectFeatures = {
     description: string;
     featureList: TBaseFeatureList;
   };
-  project_others: {
-    key: string;
-    title: string;
-    description: string;
-    featureList: TOtherFeatureList;
-  };
 };
 
 export const PROJECT_FEATURES_LIST: TProjectFeatures = {
@@ -109,10 +85,4 @@ export const PROJECT_FEATURES_LIST: TProjectFeatures = {
     description: "Toggle these on or off this project.",
     featureList: PROJECT_BASE_FEATURES_LIST,
   },
-  project_others: {
-    key: "work_management",
-    title: "Work management",
-    description: "Available only on some plans as indicated by the label next to the feature below.",
-    featureList: PROJECT_OTHER_FEATURES_LIST,
-  },
 };
diff --git a/apps/web/ce/hooks/app-rail/index.ts b/apps/web/ce/hooks/app-rail/index.ts
new file mode 100644
index 0000000000..1a8f850f5f
--- /dev/null
+++ b/apps/web/ce/hooks/app-rail/index.ts
@@ -0,0 +1 @@
+export * from "./provider";
diff --git a/apps/web/ce/hooks/app-rail/provider.tsx b/apps/web/ce/hooks/app-rail/provider.tsx
new file mode 100644
index 0000000000..296ed3dc1a
--- /dev/null
+++ b/apps/web/ce/hooks/app-rail/provider.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { observer } from "mobx-react";
+import { AppRailVisibilityProvider as CoreProvider } from "@/lib/app-rail";
+
+interface AppRailVisibilityProviderProps {
+  children: React.ReactNode;
+}
+
+/**
+ * CE AppRailVisibilityProvider
+ * Wraps core provider with isEnabled hardcoded to false
+ */
+export const AppRailVisibilityProvider = observer(function AppRailVisibilityProvider({
+  children,
+}: AppRailVisibilityProviderProps) {
+  return <CoreProvider isEnabled={false}>{children}</CoreProvider>;
+});
diff --git a/apps/web/ce/hooks/use-editor-flagging.ts b/apps/web/ce/hooks/use-editor-flagging.ts
index 731c6715e7..2c8766c955 100644
--- a/apps/web/ce/hooks/use-editor-flagging.ts
+++ b/apps/web/ce/hooks/use-editor-flagging.ts
@@ -19,6 +19,7 @@ export type TEditorFlaggingHookReturnType = {
 
 export type TEditorFlaggingHookProps = {
   workspaceSlug: string;
+  projectId?: string;
   storeType?: EPageStoreType;
 };
 
diff --git a/apps/web/ce/hooks/use-timeline-chart.ts b/apps/web/ce/hooks/use-timeline-chart.ts
index afd329d760..b935a74034 100644
--- a/apps/web/ce/hooks/use-timeline-chart.ts
+++ b/apps/web/ce/hooks/use-timeline-chart.ts
@@ -17,10 +17,10 @@ export const getTimelineStore = (
     return timelineStore.modulesTimeLineStore as IBaseTimelineStore;
   }
   if (timelineType === GANTT_TIMELINE_TYPE.PROJECT) {
-    return timelineStore.projectTimeLineStore as IBaseTimelineStore;
+    return timelineStore.projectTimeLineStore;
   }
   if (timelineType === GANTT_TIMELINE_TYPE.GROUPED) {
-    return timelineStore.groupedTimeLineStore as IBaseTimelineStore;
+    return timelineStore.groupedTimeLineStore;
   }
   throw new Error(`Unknown timeline type: ${timelineType}`);
 };
diff --git a/apps/web/ce/layouts/project-wrapper.tsx b/apps/web/ce/layouts/project-wrapper.tsx
index d2e2b1a995..edfd3d41fd 100644
--- a/apps/web/ce/layouts/project-wrapper.tsx
+++ b/apps/web/ce/layouts/project-wrapper.tsx
@@ -1,15 +1,14 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // layouts
 import { ProjectAuthWrapper as CoreProjectAuthWrapper } from "@/layouts/auth-layout/project-wrapper";
 
 export type IProjectAuthWrapper = {
   workspaceSlug: string;
-  projectId?: string;
+  projectId: string;
   children: React.ReactNode;
 };
 
-export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
+export const ProjectAuthWrapper = observer(function ProjectAuthWrapper(props: IProjectAuthWrapper) {
   // props
   const { workspaceSlug, projectId, children } = props;
 
diff --git a/apps/web/ce/layouts/workspace-wrapper.tsx b/apps/web/ce/layouts/workspace-wrapper.tsx
index 47a272d63c..1eaba348de 100644
--- a/apps/web/ce/layouts/workspace-wrapper.tsx
+++ b/apps/web/ce/layouts/workspace-wrapper.tsx
@@ -7,7 +7,7 @@ export type IWorkspaceAuthWrapper = {
   children: React.ReactNode;
 };
 
-export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props) => {
+export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props: IWorkspaceAuthWrapper) {
   // props
   const { children } = props;
 
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 b9a70b7724..ab86bc1c1c 100644
--- a/apps/web/ce/store/issue/issue-details/activity.store.ts
+++ b/apps/web/ce/store/issue/issue-details/activity.store.ts
@@ -112,11 +112,10 @@ export class IssueActivityStore implements IIssueActivityStore {
     comments.forEach((commentId) => {
       const comment = currentStore.comment.getCommentById(commentId);
       if (!comment) return;
-      const commentTimestamp = comment.edited_at ?? comment.updated_at ?? comment.created_at;
       activityComments.push({
         id: comment.id,
         activity_type: EActivityFilterType.COMMENT,
-        created_at: commentTimestamp,
+        created_at: comment.created_at,
       });
     });
 
diff --git a/apps/web/ce/store/user/permission.store.ts b/apps/web/ce/store/user/permission.store.ts
index e5a27f5347..ea062133de 100644
--- a/apps/web/ce/store/user/permission.store.ts
+++ b/apps/web/ce/store/user/permission.store.ts
@@ -21,4 +21,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 0000000000..086063cb4d
--- /dev/null
+++ b/apps/web/ce/store/workspace/index.ts
@@ -0,0 +1,18 @@
+// 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/pages/pane-extensions.ts b/apps/web/ce/types/pages/pane-extensions.ts
index dcfae12e86..4d89005c1d 100644
--- a/apps/web/ce/types/pages/pane-extensions.ts
+++ b/apps/web/ce/types/pages/pane-extensions.ts
@@ -1,16 +1,7 @@
-import type {
-  INavigationPaneExtension as ICoreNavigationPaneExtension,
+// 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/core/components/account/auth-forms/auth-banner.tsx b/apps/web/core/components/account/auth-forms/auth-banner.tsx
index 555d179af0..6e7abe6bcb 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,33 @@
-import type { FC } from "react";
 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 const AuthBanner: FC<TAuthBanner> = (props) => {
-  const { bannerData, handleBannerData } = props;
+export function AuthBanner(props: TAuthBanner) {
+  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 p-2 rounded-md gap-2 border border-accent-strong/50 bg-accent-primary/10"
     >
       <div className="size-4 flex-shrink-0 grid place-items-center">
-        <Info size={16} className="text-custom-primary-100" />
+        <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 size-6 rounded-xs grid place-items-center transition-all hover:bg-accent-primary/20 text-accent-primary/80"
         onClick={() => handleBannerData?.(undefined)}
         aria-label={t("aria_labels.auth_forms.close_alert")}
       >
@@ -37,4 +35,4 @@ export const AuthBanner: FC<TAuthBanner> = (props) => {
       </button>
     </div>
   );
-};
+}
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 3ca9c38b6a..c6c4545ea7 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,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 import { useTranslation } from "@plane/i18n";
@@ -8,8 +7,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 "@/plane-web/services";
 
 type TAuthHeader = {
   workspaceSlug: string | undefined;
@@ -52,7 +51,7 @@ const Titles = {
 
 const workSpaceService = new WorkspaceService();
 
-export const AuthHeader: FC<TAuthHeader> = observer((props) => {
+export const AuthHeader = observer(function AuthHeader(props: TAuthHeader) {
   const { workspaceSlug, invitationId, invitationEmail, authMode, currentAuthStep } = props;
   // plane imports
   const { t } = useTranslation();
@@ -101,12 +100,19 @@ export const AuthHeader: FC<TAuthHeader> = observer((props) => {
       </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 ed4d00d804..8356961148 100644
--- a/apps/web/core/components/account/auth-forms/auth-root.tsx
+++ b/apps/web/core/components/account/auth-forms/auth-root.tsx
@@ -1,5 +1,4 @@
-import type { FC } from "react";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
 // plane imports
@@ -25,7 +24,7 @@ type TAuthRoot = {
   authMode: EAuthModes;
 };
 
-export const AuthRoot: FC<TAuthRoot> = observer((props) => {
+export const AuthRoot = observer(function AuthRoot(props: TAuthRoot) {
   //router
   const searchParams = useSearchParams();
   // query params
@@ -96,7 +95,7 @@ export const AuthRoot: FC<TAuthRoot> = observer((props) => {
     <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)} />
+          <AuthBanner message={errorInfo.message} handleBannerData={(value) => setErrorInfo(value)} />
         )}
         <AuthHeader
           workspaceSlug={workspaceSlug?.toString() || undefined}
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 ccdb3e52d0..8eff06f64e 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,7 @@
-"use client";
-
-export const FormContainer = ({ children }: { children: React.ReactNode }) => (
-  <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>
-);
+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>
+  );
+}
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 b8da31ddf8..6d7e68adaf 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,8 @@
-"use client";
-
-export const AuthFormHeader = ({ title, description }: { title: string; description: string }) => (
-  <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>
-  </div>
-);
+export function AuthFormHeader({ title, description }: { title: string; description: string }) {
+  return (
+    <div className="flex flex-col gap-1">
+      <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 97a01dfbaf..5cbcdfc2f5 100644
--- a/apps/web/core/components/account/auth-forms/email.tsx
+++ b/apps/web/core/components/account/auth-forms/email.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC, FormEvent } from "react";
 import { useMemo, useRef, useState } from "react";
 import { observer } from "mobx-react";
@@ -17,7 +15,7 @@ type TAuthEmailForm = {
   onSubmit: (data: IEmailCheckData) => Promise<void>;
 };
 
-export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
+export const AuthEmailForm = observer(function AuthEmailForm(props: TAuthEmailForm) {
   const { onSubmit, defaultEmail } = props;
   // states
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -47,13 +45,13 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
   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 text-tertiary font-medium">
           {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 bg-surface-1 border`,
+            !isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-strong`
           )}
           onFocus={() => {
             setIsFocused(true);
@@ -69,7 +67,7 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
             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`}
+            className={`disable-autofill-style h-10 w-full placeholder:text-placeholder autofill:bg-red-500 border-0 focus:bg-none active:bg-transparent`}
             autoComplete="on"
             autoFocus
             ref={inputRef}
@@ -85,18 +83,18 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
               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 text-11 text-red-600 px-0.5">
             <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 3e47dbe1c7..5b6c50d512 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
@@ -5,7 +5,7 @@ import { Popover } from "@headlessui/react";
 import { useTranslation } from "@plane/i18n";
 import { CloseIcon } from "@plane/propel/icons";
 
-export const ForgotPasswordPopover = () => {
+export function ForgotPasswordPopover() {
   // popper-js refs
   const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
@@ -30,7 +30,7 @@ export const 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,24 +38,24 @@ export const 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="border border-strong bg-surface-1 rounded-sm z-10 py-1 px-2 w-64 break-words flex items-start gap-3 text-left ml-3"
             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"
               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>
         )}
       </Popover.Panel>
     </Popover>
   );
-};
+}
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 018ff95145..49b1ec43d5 100644
--- a/apps/web/core/components/account/auth-forms/forgot-password.tsx
+++ b/apps/web/core/components/account/auth-forms/forgot-password.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
@@ -34,7 +32,7 @@ const defaultValues: TForgotPasswordFormValues = {
 // services
 const authService = new AuthService();
 
-export const ForgotPasswordForm = observer(() => {
+export const ForgotPasswordForm = observer(function ForgotPasswordForm() {
   // search params
   const searchParams = useSearchParams();
   const email = searchParams.get("email");
@@ -94,7 +92,7 @@ export const ForgotPasswordForm = observer(() => {
       <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
@@ -114,14 +112,14 @@ export const ForgotPasswordForm = observer(() => {
                 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"
+                className="h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
                 autoComplete="on"
                 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 items-start w-full gap-1 px-1 text-11 font-medium text-green-700">
               <CircleCheck height={12} width={12} className="mt-0.5" />
               {t("auth.forgot_password.email_sent")}
             </p>
@@ -131,7 +129,7 @@ export const ForgotPasswordForm = observer(() => {
           type="submit"
           variant="primary"
           className="w-full"
-          size="lg"
+          size="xl"
           disabled={!isValid}
           loading={isSubmitting || resendTimerCode > 0}
         >
@@ -139,7 +137,7 @@ export const ForgotPasswordForm = observer(() => {
             ? 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 4edbcc0458..35ad625cbb 100644
--- a/apps/web/core/components/account/auth-forms/form-root.tsx
+++ b/apps/web/core/components/account/auth-forms/form-root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
@@ -31,7 +29,7 @@ type TAuthFormRoot = {
 
 const authService = new AuthService();
 
-export const AuthFormRoot = observer((props: TAuthFormRoot) => {
+export const AuthFormRoot = observer(function AuthFormRoot(props: TAuthFormRoot) {
   const { authStep, authMode, email, setEmail, setAuthMode, setAuthStep, setErrorInfo, currentAuthMode } = props;
   // router
   const router = useAppRouter();
@@ -93,7 +91,7 @@ export const AuthFormRoot = observer((props: TAuthFormRoot) => {
       .generateUniqueCode(payload)
       .then(() => ({ code: "" }))
       .catch((error) => {
-        const errorhandler = authErrorHandler(error?.error_code.toString());
+        const errorhandler = authErrorHandler(error?.error_code?.toString());
         if (errorhandler?.type) setErrorInfo(errorhandler);
         throw error;
       });
diff --git a/apps/web/core/components/account/auth-forms/password.tsx b/apps/web/core/components/account/auth-forms/password.tsx
index 5fb6a4276d..9c71eb98b7 100644
--- a/apps/web/core/components/account/auth-forms/password.tsx
+++ b/apps/web/core/components/account/auth-forms/password.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -44,7 +42,7 @@ const defaultValues: TPasswordFormValues = {
 
 const authService = new AuthService();
 
-export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
+export const AuthPasswordForm = observer(function AuthPasswordForm(props: Props) {
   const { email, isSMTPConfigured, handleAuthStep, handleEmailClear, mode, nextPath } = props;
   // plane imports
   const { t } = useTranslation();
@@ -86,7 +84,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((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>
@@ -130,9 +128,9 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
           <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
             <Info size={16} className="text-red-500" />
           </div>
-          <div className="w-full text-sm font-medium text-red-500">{t("auth.sign_up.errors.password.strength")}</div>
+          <div className="w-full text-13 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"
+            className="relative ml-auto w-6 h-6 rounded-xs flex justify-center items-center transition-all cursor-pointer hover:bg-red-500/20 text-accent-primary/80"
             onClick={() => setBannerMessage(false)}
           >
             <CloseIcon className="w-4 h-4 flex-shrink-0 text-red-500" />
@@ -184,12 +182,10 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
         <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 bg-surface-1 border border-strong`}>
             <Input
               id="email"
               name="email"
@@ -197,7 +193,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((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={`disable-autofill-style h-10 w-full placeholder:text-placeholder border-0`}
               disabled
             />
             {passwordFormData.email.length > 0 && (
@@ -207,17 +203,17 @@ export const AuthPasswordForm: React.FC<Props> = observer((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 text-tertiary font-medium">
             {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"
@@ -225,7 +221,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((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="disable-autofill-style h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
               onFocus={() => setIsPasswordInputFocused(true)}
               onBlur={() => setIsPasswordInputFocused(false)}
               autoComplete="on"
@@ -240,9 +236,9 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
               )}
             >
               {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>
@@ -251,10 +247,10 @@ export const AuthPasswordForm: React.FC<Props> = observer((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 text-tertiary font-medium">
               {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"
@@ -262,7 +258,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((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="disable-autofill-style h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
                 onFocus={() => setIsRetryPasswordInputFocused(true)}
                 onBlur={() => setIsRetryPasswordInputFocused(false)}
               />
@@ -277,16 +273,16 @@ export const AuthPasswordForm: React.FC<Props> = observer((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-red-500">{t("auth.common.password.errors.match")}</span>
               )}
           </div>
         )}
@@ -294,7 +290,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((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 ? (
@@ -308,16 +304,16 @@ export const AuthPasswordForm: React.FC<Props> = observer((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 ffe40d7e6e..12c2a6c14d 100644
--- a/apps/web/core/components/account/auth-forms/reset-password.tsx
+++ b/apps/web/core/components/account/auth-forms/reset-password.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
@@ -36,7 +34,7 @@ const defaultValues: TResetPasswordFormValues = {
 // services
 const authService = new AuthService();
 
-export const ResetPasswordForm = observer(() => {
+export const ResetPasswordForm = observer(function ResetPasswordForm() {
   // search params
   const searchParams = useSearchParams();
   const uidb64 = searchParams.get("uidb64");
@@ -98,7 +96,7 @@ export const ResetPasswordForm = observer(() => {
       <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"
@@ -107,10 +105,10 @@ export const ResetPasswordForm = observer(() => {
       >
         <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 text-tertiary font-medium" 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"
@@ -118,17 +116,17 @@ export const ResetPasswordForm = observer(() => {
               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"
+              className="h-10 w-full border border-strong !bg-surface-1 pr-12 text-placeholder cursor-not-allowed"
               autoComplete="on"
               disabled
             />
           </div>
         </div>
         <div className="space-y-1">
-          <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
+          <label className="text-13 text-tertiary font-medium" 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"
@@ -136,7 +134,7 @@ export const ResetPasswordForm = observer(() => {
               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)}
@@ -145,12 +143,12 @@ export const ResetPasswordForm = observer(() => {
             />
             {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")}
               />
             )}
@@ -158,28 +156,28 @@ export const ResetPasswordForm = observer(() => {
           <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 text-tertiary font-medium" 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)}
             />
             {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")}
               />
             )}
@@ -187,10 +185,10 @@ export const ResetPasswordForm = observer(() => {
           {!!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-red-500">{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 a84ee913d7..15005caf62 100644
--- a/apps/web/core/components/account/auth-forms/set-password.tsx
+++ b/apps/web/core/components/account/auth-forms/set-password.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FormEvent } from "react";
 import { useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react";
@@ -39,7 +37,7 @@ const defaultValues: TResetPasswordFormValues = {
 // services
 const authService = new AuthService();
 
-export const SetPasswordForm = observer(() => {
+export const SetPasswordForm = observer(function SetPasswordForm() {
   // router
   const router = useAppRouter();
   // search params
@@ -124,10 +122,10 @@ export const SetPasswordForm = observer(() => {
       <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 text-tertiary font-medium" 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"
@@ -135,17 +133,17 @@ export const SetPasswordForm = observer(() => {
               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"
+              className="h-10 w-full border border-strong !bg-surface-1 pr-12 text-placeholder cursor-not-allowed"
               autoComplete="on"
               disabled
             />
           </div>
         </div>
         <div className="space-y-1">
-          <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
+          <label className="text-13 text-tertiary font-medium" 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"
@@ -153,7 +151,7 @@ export const SetPasswordForm = observer(() => {
               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)}
@@ -162,12 +160,12 @@ export const SetPasswordForm = observer(() => {
             />
             {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,28 +173,28 @@ export const SetPasswordForm = observer(() => {
           <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 text-tertiary font-medium" 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)}
             />
             {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")}
               />
             )}
@@ -204,10 +202,10 @@ export const SetPasswordForm = observer(() => {
           {!!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-red-500">{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 c009fdf17e..6d2b723371 100644
--- a/apps/web/core/components/account/auth-forms/unique-code.tsx
+++ b/apps/web/core/components/account/auth-forms/unique-code.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useEffect, useState } from "react";
 import { CircleCheck, XCircle } from "lucide-react";
 import { API_BASE_URL, AUTH_TRACKER_ELEMENTS, AUTH_TRACKER_EVENTS } from "@plane/constants";
@@ -37,7 +35,7 @@ const defaultValues: TUniqueCodeFormValues = {
   code: "",
 };
 
-export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
+export function AuthUniqueCodeForm(props: TAuthUniqueCodeForm) {
   const { mode, email, handleEmailClear, generateEmailUniqueCode, isExistingEmail, nextPath } = props;
   // derived values
   const defaultResetTimerValue = 5;
@@ -117,12 +115,10 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
       <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 bg-surface-1 border border-strong`}>
           <Input
             id="email"
             name="email"
@@ -130,7 +126,7 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
             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"
+            className="disable-autofill-style h-10 w-full placeholder:text-placeholder border-0"
             autoComplete="on"
             disabled
           />
@@ -141,14 +137,14 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
               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
@@ -157,10 +153,10 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
           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="disable-autofill-style h-10 w-full border border-strong !bg-surface-1 pr-12 placeholder:text-placeholder"
           autoFocus
         />
-        <div className="flex w-full items-center justify-between px-1 text-xs pt-1">
+        <div className="flex w-full items-center justify-between px-1 text-11 pt-1">
           <p className="flex items-center gap-1 font-medium text-green-700">
             <CircleCheck height={12} width={12} />
             {t("auth.common.unique_code.paste_code")}
@@ -171,8 +167,8 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
             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}
           >
@@ -190,7 +186,7 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
           type="submit"
           variant="primary"
           className="w-full"
-          size="lg"
+          size="xl"
           disabled={isButtonDisabled}
           data-ph-element={AUTH_TRACKER_ELEMENTS.VERIFY_CODE}
         >
@@ -205,4 +201,4 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
       </div>
     </form>
   );
-};
+}
diff --git a/apps/web/core/components/account/deactivate-account-modal.tsx b/apps/web/core/components/account/deactivate-account-modal.tsx
index 548434ddca..ae10f1c94e 100644
--- a/apps/web/core/components/account/deactivate-account-modal.tsx
+++ b/apps/web/core/components/account/deactivate-account-modal.tsx
@@ -1,13 +1,11 @@
-"use client";
-
-import React, { useState } from "react";
+import { useState } from "react";
 import { Trash2 } from "lucide-react";
-import { Dialog, Transition } from "@headlessui/react";
 import { PROFILE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // ui
 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 { useUser } from "@/hooks/store/user";
@@ -18,7 +16,7 @@ type Props = {
   onClose: () => void;
 };
 
-export const DeactivateAccountModal: React.FC<Props> = (props) => {
+export function DeactivateAccountModal(props: Props) {
   const router = useAppRouter();
   const { isOpen, onClose } = props;
   // hooks
@@ -49,6 +47,7 @@ export const DeactivateAccountModal: React.FC<Props> = (props) => {
         signOut();
         router.push("/");
         handleClose();
+        return;
       })
       .catch((err: any) => {
         captureError({
@@ -64,65 +63,30 @@ export const DeactivateAccountModal: React.FC<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 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>
+              <h3 className="my-4 text-20 font-medium leading-6 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 64bb0fa2a8..6a500df7dc 100644
--- a/apps/web/core/components/account/terms-and-conditions.tsx
+++ b/apps/web/core/components/account/terms-and-conditions.tsx
@@ -18,18 +18,22 @@ const MESSAGES = {
 } as const;
 
 // Reusable link component to reduce duplication
-const LegalLink: React.FC<{ href: string; children: React.ReactNode }> = ({ href, children }) => (
-  <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>
-);
+function LegalLink({ href, children }: { href: string; children: React.ReactNode }) {
+  return (
+    <Link href={href} className="text-secondary" target="_blank" rel="noopener noreferrer">
+      <span className="text-13 font-medium underline hover:cursor-pointer">{children}</span>
+    </Link>
+  );
+}
 
-export const TermsAndConditions: React.FC<TermsAndConditionsProps> = ({ authType = EAuthModes.SIGN_IN }) => (
-  <div className="flex items-center justify-center">
-    <p className="text-center text-sm text-custom-text-300 whitespace-pre-line">
-      {`${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>.
-    </p>
-  </div>
-);
+export function TermsAndConditions({ authType = EAuthModes.SIGN_IN }: TermsAndConditionsProps) {
+  return (
+    <div className="flex items-center justify-center">
+      <p className="text-center text-13 text-tertiary whitespace-pre-line">
+        {`${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>.
+      </p>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/analytics/analytics-filter-actions.tsx b/apps/web/core/components/analytics/analytics-filter-actions.tsx
index e2ed91f88d..2c10cf7eba 100644
--- a/apps/web/core/components/analytics/analytics-filter-actions.tsx
+++ b/apps/web/core/components/analytics/analytics-filter-actions.tsx
@@ -4,11 +4,10 @@ import { observer } from "mobx-react";
 import { useAnalytics } from "@/hooks/store/use-analytics";
 import { useProject } from "@/hooks/store/use-project";
 // components
-import DurationDropdown from "./select/duration";
 import { ProjectSelect } from "./select/project";
 
-const AnalyticsFilterActions = observer(() => {
-  const { selectedProjects, selectedDuration, updateSelectedProjects, updateSelectedDuration } = useAnalytics();
+const AnalyticsFilterActions = observer(function AnalyticsFilterActions() {
+  const { selectedProjects, updateSelectedProjects } = useAnalytics();
   const { joinedProjectIds } = useProject();
   return (
     <div className="flex items-center justify-end gap-2">
diff --git a/apps/web/core/components/analytics/analytics-section-wrapper.tsx b/apps/web/core/components/analytics/analytics-section-wrapper.tsx
index 2a3a17f6ae..637d684c4f 100644
--- a/apps/web/core/components/analytics/analytics-section-wrapper.tsx
+++ b/apps/web/core/components/analytics/analytics-section-wrapper.tsx
@@ -9,15 +9,15 @@ type Props = {
   headerClassName?: string;
 };
 
-const AnalyticsSectionWrapper: React.FC<Props> = (props) => {
+function AnalyticsSectionWrapper(props: Props) {
   const { title, children, className, subtitle, actions, headerClassName } = props;
   return (
     <div className={className}>
       <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>} */}
+            <h1 className={"text-16 font-medium"}>{title}</h1>
+            {/* {subtitle && <p className="text-16 text-tertiary"> • {subtitle}</p>} */}
           </div>
         )}
         {actions}
@@ -25,6 +25,6 @@ const AnalyticsSectionWrapper: React.FC<Props> = (props) => {
       {children}
     </div>
   );
-};
+}
 
 export default AnalyticsSectionWrapper;
diff --git a/apps/web/core/components/analytics/analytics-wrapper.tsx b/apps/web/core/components/analytics/analytics-wrapper.tsx
index c86edb950f..9f369b1a5c 100644
--- a/apps/web/core/components/analytics/analytics-wrapper.tsx
+++ b/apps/web/core/components/analytics/analytics-wrapper.tsx
@@ -9,15 +9,15 @@ type Props = {
   className?: string;
 };
 
-const AnalyticsWrapper: React.FC<Props> = (props) => {
+function AnalyticsWrapper(props: Props) {
   const { i18nTitle, children, className } = 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>
   );
-};
+}
 
 export default AnalyticsWrapper;
diff --git a/apps/web/core/components/analytics/empty-state.tsx b/apps/web/core/components/analytics/empty-state.tsx
index d2f0d2b435..7341b6f1d7 100644
--- a/apps/web/core/components/analytics/empty-state.tsx
+++ b/apps/web/core/components/analytics/empty-state.tsx
@@ -12,7 +12,7 @@ type Props = {
   className?: string;
 };
 
-const AnalyticsEmptyState = ({ title, description, assetPath, className }: Props) => {
+function AnalyticsEmptyState({ title, description, assetPath, className }: Props) {
   // theme hook
   const { resolvedTheme } = useTheme();
   const backgroundReolvedPath = resolvedTheme === "light" ? lightBackgroundAsset : darkBackgroundAsset;
@@ -20,7 +20,7 @@ const 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,11 +34,12 @@ const 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="text-13 text-tertiary max-w-[350px]">{description}</p>}
         </div>
       </div>
     </div>
   );
-};
+}
+
 export default AnalyticsEmptyState;
diff --git a/apps/web/core/components/analytics/insight-card.tsx b/apps/web/core/components/analytics/insight-card.tsx
index 115cdd2c68..b0b2f9ad9d 100644
--- a/apps/web/core/components/analytics/insight-card.tsx
+++ b/apps/web/core/components/analytics/insight-card.tsx
@@ -9,22 +9,22 @@ export type InsightCardProps = {
   isLoading?: boolean;
 };
 
-const InsightCard = (props: InsightCardProps) => {
+function InsightCard(props: InsightCardProps) {
   const { data, label, isLoading = false } = props;
   const count = data?.count ?? 0;
 
   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%" />
       )}
     </div>
   );
-};
+}
 
 export default InsightCard;
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 8c64687939..2711415a04 100644
--- a/apps/web/core/components/analytics/insight-table/data-table.tsx
+++ b/apps/web/core/components/analytics/insight-table/data-table.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import type {
   ColumnDef,
@@ -65,14 +63,14 @@ export function DataTable<TData, TValue>({ columns, data, searchPlaceholder, act
       <div className="flex w-full items-center justify-between">
         <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 whitespace-nowrap text-13 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();
@@ -83,16 +81,16 @@ export function DataTable<TData, TValue>({ columns, data, searchPlaceholder, act
           )}
           <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" />
             <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) => {
@@ -157,7 +155,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/loader.tsx b/apps/web/core/components/analytics/insight-table/loader.tsx
index 0ccff9a9b2..ff7ea7a19a 100644
--- a/apps/web/core/components/analytics/insight-table/loader.tsx
+++ b/apps/web/core/components/analytics/insight-table/loader.tsx
@@ -8,27 +8,29 @@ interface TableSkeletonProps {
   rows: number;
 }
 
-export const TableLoader: React.FC<TableSkeletonProps> = ({ columns, rows }) => (
-  <Table>
-    <TableHeader>
-      <TableRow>
-        {columns.map((column, index) => (
-          <TableHead key={column.header?.toString() ?? index}>
-            {typeof column.header === "string" ? column.header : ""}
-          </TableHead>
-        ))}
-      </TableRow>
-    </TableHeader>
-    <TableBody>
-      {Array.from({ length: rows }).map((_, rowIndex) => (
-        <TableRow key={rowIndex}>
-          {columns.map((_, colIndex) => (
-            <TableCell key={colIndex}>
-              <Loader.Item height="20px" width="100%" />
-            </TableCell>
+export function TableLoader({ columns, rows }: TableSkeletonProps) {
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          {columns.map((column, index) => (
+            <TableHead key={column.header?.toString() ?? index}>
+              {typeof column.header === "string" ? column.header : ""}
+            </TableHead>
           ))}
         </TableRow>
-      ))}
-    </TableBody>
-  </Table>
-);
+      </TableHeader>
+      <TableBody>
+        {Array.from({ length: rows }).map((_, rowIndex) => (
+          <TableRow key={rowIndex}>
+            {columns.map((_, colIndex) => (
+              <TableCell key={colIndex}>
+                <Loader.Item height="20px" width="100%" />
+              </TableCell>
+            ))}
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}
diff --git a/apps/web/core/components/analytics/insight-table/root.tsx b/apps/web/core/components/analytics/insight-table/root.tsx
index 4653534968..1c7b3cef17 100644
--- a/apps/web/core/components/analytics/insight-table/root.tsx
+++ b/apps/web/core/components/analytics/insight-table/root.tsx
@@ -15,9 +15,9 @@ interface InsightTableProps<T extends Exclude<TAnalyticsTabsBase, "overview">> {
   onExport?: (rows: Row<AnalyticsTableDataMap[T]>[]) => void;
 }
 
-export const InsightTable = <T extends Exclude<TAnalyticsTabsBase, "overview">>(
+export function InsightTable<T extends Exclude<TAnalyticsTabsBase, "overview">>(
   props: InsightTableProps<T>
-): React.ReactElement => {
+): React.ReactElement {
   const { data, isLoading, columns, headerText, onExport } = props;
   const { t } = useTranslation();
   if (isLoading) {
@@ -32,7 +32,7 @@ export const 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)}
           >
@@ -42,4 +42,4 @@ export const InsightTable = <T extends Exclude<TAnalyticsTabsBase, "overview">>(
       />
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/analytics/loaders.tsx b/apps/web/core/components/analytics/loaders.tsx
index e35d235cec..cd9f19f22c 100644
--- a/apps/web/core/components/analytics/loaders.tsx
+++ b/apps/web/core/components/analytics/loaders.tsx
@@ -1,23 +1,27 @@
 import { Loader } from "@plane/ui";
 
-export const ProjectInsightsLoader = () => (
-  <div className="flex h-[200px] gap-1">
-    <Loader className="h-full w-full">
-      <Loader.Item height="100%" width="100%" />
-    </Loader>
-    <div className="flex h-full w-full flex-col gap-1">
-      <Loader className="h-12 w-full">
-        <Loader.Item height="100%" width="100%" />
-      </Loader>
+export function ProjectInsightsLoader() {
+  return (
+    <div className="flex h-[200px] gap-1">
       <Loader className="h-full w-full">
         <Loader.Item height="100%" width="100%" />
       </Loader>
+      <div className="flex h-full w-full flex-col gap-1">
+        <Loader className="h-12 w-full">
+          <Loader.Item height="100%" width="100%" />
+        </Loader>
+        <Loader className="h-full w-full">
+          <Loader.Item height="100%" width="100%" />
+        </Loader>
+      </div>
     </div>
-  </div>
-);
+  );
+}
 
-export const ChartLoader = () => (
-  <Loader className="h-[350px] w-full">
-    <Loader.Item height="100%" width="100%" />
-  </Loader>
-);
+export function ChartLoader() {
+  return (
+    <Loader className="h-[350px] w-full">
+      <Loader.Item height="100%" width="100%" />
+    </Loader>
+  );
+}
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 4737a8d811..12ef53221e 100644
--- a/apps/web/core/components/analytics/overview/active-project-item.tsx
+++ b/apps/web/core/components/analytics/overview/active-project-item.tsx
@@ -1,6 +1,7 @@
 // plane package imports
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { ProjectIcon } from "@plane/propel/icons";
+import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
 // plane web hooks
 import { useProject } from "@/hooks/store/use-project";
@@ -13,16 +14,17 @@ type Props = {
   };
   isLoading?: boolean;
 };
-const CompletionPercentage = ({ percentage }: { percentage: number }) => {
+
+function CompletionPercentage({ percentage }: { percentage: number }) {
   const percentageColor = percentage > 50 ? "bg-green-500/30 text-green-500" : "bg-red-500/30 text-red-500";
   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>
   );
-};
+}
 
-const ActiveProjectItem = (props: Props) => {
+function ActiveProjectItem(props: Props) {
   const { project } = props;
   const { getProjectById } = useProject();
   const { id, completed_issues, total_issues } = project;
@@ -32,9 +34,9 @@ const ActiveProjectItem = (props: Props) => {
   if (!projectDetails) return null;
 
   return (
-    <div className="flex items-center justify-between gap-2  ">
-      <div className="flex items-center gap-2">
-        <div className="flex h-8  w-8 items-center justify-center rounded-xl bg-custom-background-80">
+    <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-layer-1 shrink-0">
           <span className="grid h-4 w-4 flex-shrink-0 place-items-center">
             {projectDetails?.logo_props ? (
               <Logo logo={projectDetails?.logo_props} size={16} />
@@ -45,13 +47,15 @@ const ActiveProjectItem = (props: Props) => {
             )}
           </span>
         </div>
-        <p className="text-sm font-medium">{projectDetails?.name}</p>
+        <Tooltip tooltipContent={projectDetails?.name} position="top-start">
+          <p className="text-13 font-medium truncate">{projectDetails?.name}</p>
+        </Tooltip>
       </div>
       <CompletionPercentage
         percentage={completed_issues && total_issues ? Math.round((completed_issues / total_issues) * 100) : 0}
       />
     </div>
   );
-};
+}
 
 export default ActiveProjectItem;
diff --git a/apps/web/core/components/analytics/overview/active-projects.tsx b/apps/web/core/components/analytics/overview/active-projects.tsx
index 3c7016d1d4..7796f0793b 100644
--- a/apps/web/core/components/analytics/overview/active-projects.tsx
+++ b/apps/web/core/components/analytics/overview/active-projects.tsx
@@ -12,7 +12,7 @@ import { useProject } from "@/hooks/store/use-project";
 import AnalyticsSectionWrapper from "../analytics-section-wrapper";
 import ActiveProjectItem from "./active-project-item";
 
-const ActiveProjects = observer(() => {
+const ActiveProjects = observer(function ActiveProjects() {
   const { t } = useTranslation();
   const { fetchProjectAnalyticsCount } = useProject();
   const { workspaceSlug } = useParams();
diff --git a/apps/web/core/components/analytics/overview/project-insights.tsx b/apps/web/core/components/analytics/overview/project-insights.tsx
index 56a87b5bec..c0fa6c6b1a 100644
--- a/apps/web/core/components/analytics/overview/project-insights.tsx
+++ b/apps/web/core/components/analytics/overview/project-insights.tsx
@@ -14,15 +14,15 @@ import { AnalyticsService } from "@/services/analytics.service";
 import AnalyticsSectionWrapper from "../analytics-section-wrapper";
 import { ProjectInsightsLoader } from "../loaders";
 
-const RadarChart = lazy(() =>
-  import("@plane/propel/charts/radar-chart").then((mod) => ({
+const RadarChart = lazy(function RadarChart() {
+  return import("@plane/propel/charts/radar-chart").then((mod) => ({
     default: mod.RadarChart,
-  }))
-);
+  }));
+});
 
 const analyticsService = new AnalyticsService();
 
-const ProjectInsights = observer(() => {
+const ProjectInsights = observer(function ProjectInsights() {
   const params = useParams();
   const { t } = useTranslation();
   const workspaceSlug = params.workspaceSlug.toString();
@@ -57,7 +57,7 @@ const ProjectInsights = observer(() => {
         <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 +65,15 @@ const ProjectInsights = observer(() => {
           {projectInsightsData && (
             <Suspense fallback={<ProjectInsightsLoader />}>
               <RadarChart
-                className="h-[350px] w-full lg:w-3/5"
+                className="h-[350px] w-full lg:w-3/5 text-accent-primary"
                 data={projectInsightsData}
                 dataKey="key"
                 radars={[
                   {
                     key: "count",
                     name: "Count",
-                    fill: "rgba(var(--color-primary-300))",
-                    stroke: "rgba(var(--color-primary-300))",
+                    fill: "var(--color-brand-default)",
+                    stroke: "var(--color-brand-default)",
                     fillOpacity: 0.6,
                     dot: {
                       r: 4,
@@ -90,19 +90,19 @@ const ProjectInsights = observer(() => {
             </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 b10bf32de7..7ebb4ed076 100644
--- a/apps/web/core/components/analytics/overview/root.tsx
+++ b/apps/web/core/components/analytics/overview/root.tsx
@@ -4,16 +4,18 @@ import TotalInsights from "../total-insights";
 import ActiveProjects from "./active-projects";
 import ProjectInsights from "./project-insights";
 
-const Overview: React.FC = () => (
-  <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 ">
-        <ProjectInsights />
-        <ActiveProjects />
+function Overview() {
+  return (
+    <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 ">
+          <ProjectInsights />
+          <ActiveProjects />
+        </div>
       </div>
-    </div>
-  </AnalyticsWrapper>
-);
+    </AnalyticsWrapper>
+  );
+}
 
 export { Overview };
diff --git a/apps/web/core/components/analytics/select/analytics-params.tsx b/apps/web/core/components/analytics/select/analytics-params.tsx
index 5e9535da23..7cd78abc1a 100644
--- a/apps/web/core/components/analytics/select/analytics-params.tsx
+++ b/apps/web/core/components/analytics/select/analytics-params.tsx
@@ -2,9 +2,10 @@ 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";
@@ -21,7 +22,7 @@ type Props = {
   isEpic?: boolean;
 };
 
-export const AnalyticsSelectParams: React.FC<Props> = observer((props) => {
+export const AnalyticsSelectParams = observer(function AnalyticsSelectParams(props: Props) {
   const { control, params, classNames, isEpic } = props;
   const xAxisOptions = useMemo(
     () => ANALYTICS_X_AXIS_VALUES.filter((option) => option.value !== params.group_by),
@@ -63,8 +64,8 @@ export const AnalyticsSelectParams: React.FC<Props> = observer((props) => {
               }}
               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 +86,7 @@ export const AnalyticsSelectParams: React.FC<Props> = observer((props) => {
               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/project.tsx b/apps/web/core/components/analytics/select/project.tsx
index b2f77d4ca2..2b657fdc9e 100644
--- a/apps/web/core/components/analytics/select/project.tsx
+++ b/apps/web/core/components/analytics/select/project.tsx
@@ -1,10 +1,10 @@
-"use client";
-
 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";
 
@@ -14,7 +14,7 @@ type Props = {
   projectIds: string[] | undefined;
 };
 
-export const ProjectSelect: React.FC<Props> = observer((props) => {
+export const ProjectSelect = observer(function ProjectSelect(props: Props) {
   const { value, onChange, projectIds } = props;
   const { getProjectById } = useProject();
 
@@ -42,8 +42,9 @@ export const ProjectSelect: React.FC<Props> = observer((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`
@@ -53,8 +54,10 @@ export const ProjectSelect: React.FC<Props> = observer((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 041fc8feec..56f944a915 100644
--- a/apps/web/core/components/analytics/select/select-x-axis.tsx
+++ b/apps/web/core/components/analytics/select/select-x-axis.tsx
@@ -1,4 +1,3 @@
-"use client";
 // plane package imports
 import type { ChartXAxisProperty } from "@plane/types";
 import { CustomSelect } from "@plane/ui";
@@ -13,7 +12,7 @@ type Props = {
   label?: string | React.ReactNode;
 };
 
-export const SelectXAxis: React.FC<Props> = (props) => {
+export function SelectXAxis(props: Props) {
   const { value, onChange, options, hiddenOptions, allowNoValue, label } = props;
   return (
     <CustomSelect value={value} label={label} onChange={onChange} maxHeight="lg">
@@ -28,4 +27,4 @@ export const SelectXAxis: React.FC<Props> = (props) => {
       })}
     </CustomSelect>
   );
-};
+}
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 2295f06322..83fd3b6590 100644
--- a/apps/web/core/components/analytics/select/select-y-axis.tsx
+++ b/apps/web/core/components/analytics/select/select-y-axis.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { EEstimateSystem } from "@plane/constants";
@@ -17,7 +15,7 @@ type Props = {
   options: { value: ChartYAxisMetric; label: string }[];
 };
 
-export const SelectYAxis: React.FC<Props> = observer(({ value, onChange, hiddenOptions, options }) => {
+export const SelectYAxis = observer(function SelectYAxis({ value, onChange, hiddenOptions, options }: Props) {
   // hooks
   const { projectId } = useParams();
   const { areEstimateEnabledByProjectId, currentActiveEstimateId, estimateById } = useProjectEstimates();
diff --git a/apps/web/core/components/analytics/total-insights.tsx b/apps/web/core/components/analytics/total-insights.tsx
index 5dfc6bb998..8dd996cd40 100644
--- a/apps/web/core/components/analytics/total-insights.tsx
+++ b/apps/web/core/components/analytics/total-insights.tsx
@@ -44,10 +44,13 @@ const getInsightLabel = (
   return `${prefix}${baseTranslation}${suffix}`;
 };
 
-const TotalInsights: React.FC<{
+const TotalInsights = observer(function TotalInsights({
+  analyticsType,
+  peekView,
+}: {
   analyticsType: TAnalyticsTabsBase;
   peekView?: boolean;
-}> = observer(({ analyticsType, peekView }) => {
+}) {
   const params = useParams();
   const workspaceSlug = params.workspaceSlug.toString();
   const { t } = useTranslation();
diff --git a/apps/web/core/components/analytics/trend-piece.tsx b/apps/web/core/components/analytics/trend-piece.tsx
index 60062222ab..e20f40e2e9 100644
--- a/apps/web/core/components/analytics/trend-piece.tsx
+++ b/apps/web/core/components/analytics/trend-piece.tsx
@@ -14,19 +14,19 @@ 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;
@@ -49,7 +49,7 @@ const variants: Record<NonNullable<Props["variant"]>, Record<"ontrack" | "offtra
   },
 } as const;
 
-const TrendPiece = (props: Props) => {
+function TrendPiece(props: Props) {
   const { percentage, className, trendIconVisible = true, size = "sm", variant = "simple" } = props;
   const isOnTrack = percentage >= 66;
   const isOffTrack = percentage >= 33 && percentage < 66;
@@ -75,6 +75,6 @@ const TrendPiece = (props: Props) => {
       {Math.round(Math.abs(percentage))}%
     </div>
   );
-};
+}
 
 export default TrendPiece;
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 f92c42d048..1a81567eaf 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
@@ -17,7 +17,7 @@ import AnalyticsSectionWrapper from "../analytics-section-wrapper";
 import { ChartLoader } from "../loaders";
 
 const analyticsService = new AnalyticsService();
-const CreatedVsResolved = observer(() => {
+const CreatedVsResolved = observer(function CreatedVsResolved() {
   const {
     selectedDuration,
     selectedDurationLabel,
@@ -122,7 +122,7 @@ const CreatedVsResolved = observer(() => {
         <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 22c698b0cc..6e8590fd5b 100644
--- a/apps/web/core/components/analytics/work-items/customized-insights.tsx
+++ b/apps/web/core/components/analytics/work-items/customized-insights.tsx
@@ -11,7 +11,13 @@ import AnalyticsSectionWrapper from "../analytics-section-wrapper";
 import { AnalyticsSelectParams } from "../select/analytics-params";
 import PriorityChart from "./priority-chart";
 
-const CustomizedInsights = observer(({ peekView, isEpic }: { peekView?: boolean; isEpic?: boolean }) => {
+const CustomizedInsights = observer(function CustomizedInsights({
+  peekView,
+  isEpic,
+}: {
+  peekView?: boolean;
+  isEpic?: boolean;
+}) {
   const { t } = useTranslation();
   const { workspaceSlug } = useParams();
   const { control, watch, setValue } = useForm<IAnalyticsParams>({
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 d13de2a782..082b9266d4 100644
--- a/apps/web/core/components/analytics/work-items/modal/content.tsx
+++ b/apps/web/core/components/analytics/work-items/modal/content.tsx
@@ -20,7 +20,7 @@ type Props = {
   isEpic?: boolean;
 };
 
-export const WorkItemsModalMainContent: React.FC<Props> = observer((props) => {
+export const WorkItemsModalMainContent = observer(function WorkItemsModalMainContent(props: Props) {
   const { projectDetails, cycleDetails, moduleDetails, fullScreen, isEpic } = props;
   const { updateSelectedProjects, updateSelectedCycle, updateSelectedModule, updateIsPeekView } = useAnalytics();
   const [isModalConfigured, setIsModalConfigured] = useState(false);
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 22f1a14c38..894ed88adf 100644
--- a/apps/web/core/components/analytics/work-items/modal/header.tsx
+++ b/apps/web/core/components/analytics/work-items/modal/header.tsx
@@ -14,25 +14,25 @@ type Props = {
   module?: IModule;
 };
 
-export const WorkItemsModalHeader: React.FC<Props> = observer((props) => {
+export const WorkItemsModalHeader = observer(function WorkItemsModalHeader(props: 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 129dd5f5e5..c750bc01a0 100644
--- a/apps/web/core/components/analytics/work-items/modal/index.tsx
+++ b/apps/web/core/components/analytics/work-items/modal/index.tsx
@@ -17,7 +17,7 @@ type Props = {
   isEpic?: boolean;
 };
 
-export const WorkItemsModal: React.FC<Props> = observer((props) => {
+export const WorkItemsModal = observer(function WorkItemsModal(props: Props) {
   const { isOpen, onClose, projectDetails, moduleDetails, cycleDetails, isEpic } = props;
   const { updateIsEpic, isPeekView } = useAnalytics();
   const [fullScreen, setFullScreen] = useState(false);
@@ -40,7 +40,7 @@ export const WorkItemsModal: React.FC<Props> = observer((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 4fb0304d69..fef9a810bb 100644
--- a/apps/web/core/components/analytics/work-items/priority-chart.tsx
+++ b/apps/web/core/components/analytics/work-items/priority-chart.tsx
@@ -42,7 +42,7 @@ interface Props {
 }
 
 const analyticsService = new AnalyticsService();
-const PriorityChart = observer((props: Props) => {
+const PriorityChart = observer(function PriorityChart(props: Props) {
   const { x_axis, y_axis, group_by } = props;
   const { t } = useTranslation();
   // store hooks
@@ -220,7 +220,7 @@ const PriorityChart = observer((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 +233,7 @@ const PriorityChart = observer((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 c30a36d594..94ddfbaceb 100644
--- a/apps/web/core/components/analytics/work-items/root.tsx
+++ b/apps/web/core/components/analytics/work-items/root.tsx
@@ -5,15 +5,17 @@ import CreatedVsResolved from "./created-vs-resolved";
 import CustomizedInsights from "./customized-insights";
 import WorkItemsInsightTable from "./workitems-insight-table";
 
-const WorkItems: React.FC = () => (
-  <AnalyticsWrapper i18nTitle="sidebar.work_items">
-    <div className="flex flex-col gap-14">
-      <TotalInsights analyticsType="work-items" />
-      <CreatedVsResolved />
-      <CustomizedInsights />
-      <WorkItemsInsightTable />
-    </div>
-  </AnalyticsWrapper>
-);
+function WorkItems() {
+  return (
+    <AnalyticsWrapper i18nTitle="sidebar.work_items">
+      <div className="flex flex-col gap-14">
+        <TotalInsights analyticsType="work-items" />
+        <CreatedVsResolved />
+        <CustomizedInsights />
+        <WorkItemsInsightTable />
+      </div>
+    </AnalyticsWrapper>
+  );
+}
 
 export { WorkItems };
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 5de0272683..d33ec72186 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
@@ -32,7 +32,7 @@ declare module "@tanstack/react-table" {
   }
 }
 
-const WorkItemsInsightTable = observer(() => {
+const WorkItemsInsightTable = observer(function WorkItemsInsightTable() {
   // router
   const params = useParams();
   const workspaceSlug = params.workspaceSlug.toString();
@@ -110,17 +110,15 @@ const WorkItemsInsightTable = observer(() => {
                       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 rounded-full bg-layer-1  capitalize overflow-hidden">
                       {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 22b5f5dd62..8989150ca6 100644
--- a/apps/web/core/components/api-token/delete-token-modal.tsx
+++ b/apps/web/core/components/api-token/delete-token-modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useState } from "react";
 import { mutate } from "swr";
@@ -23,7 +21,7 @@ type Props = {
 
 const apiTokenService = new APITokenService();
 
-export const DeleteApiTokenModal: FC<Props> = (props) => {
+export function DeleteApiTokenModal(props: Props) {
   const { isOpen, onClose, tokenId } = props;
   // states
   const [deleteLoading, setDeleteLoading] = useState<boolean>(false);
@@ -90,4 +88,4 @@ export const DeleteApiTokenModal: FC<Props> = (props) => {
       content={<>{t("workspace_settings.settings.api_tokens.delete.description")} </>}
     />
   );
-};
+}
diff --git a/apps/web/core/components/api-token/empty-state.tsx b/apps/web/core/components/api-token/empty-state.tsx
index 8efa264e7b..155c6a1afb 100644
--- a/apps/web/core/components/api-token/empty-state.tsx
+++ b/apps/web/core/components/api-token/empty-state.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 // ui
 import { Button } from "@plane/propel/button";
@@ -10,17 +8,17 @@ type Props = {
   onClick: () => void;
 };
 
-export const ApiTokenEmptyState: React.FC<Props> = (props) => {
+export function ApiTokenEmptyState(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={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">
+        <h6 className="mb-3 mt-6 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}>
@@ -29,4 +27,4 @@ export const ApiTokenEmptyState: React.FC<Props> = (props) => {
       </div>
     </div>
   );
-};
+}
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 ac27873e93..a87b18d71e 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,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import { mutate } from "swr";
 // plane imports
@@ -25,7 +23,7 @@ type Props = {
 // services
 const apiTokenService = new APITokenService();
 
-export const CreateApiTokenModal: React.FC<Props> = (props) => {
+export function CreateApiTokenModal(props: Props) {
   const { isOpen, onClose } = props;
   // states
   const [neverExpires, setNeverExpires] = useState<boolean>(false);
@@ -104,4 +102,4 @@ export const CreateApiTokenModal: React.FC<Props> = (props) => {
       )}
     </ModalCore>
   );
-};
+}
diff --git a/apps/web/core/components/api-token/modal/form.tsx b/apps/web/core/components/api-token/modal/form.tsx
index a39636e902..93f862811b 100644
--- a/apps/web/core/components/api-token/modal/form.tsx
+++ b/apps/web/core/components/api-token/modal/form.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { add } from "date-fns";
 import { Controller, useForm } from "react-hook-form";
@@ -66,7 +64,7 @@ const getFormattedDate = (date: Date): Date => {
   return add(date, { hours, minutes, seconds });
 };
 
-export const CreateApiTokenForm: React.FC<Props> = (props) => {
+export function CreateApiTokenForm(props: Props) {
   const { handleClose, neverExpires, toggleNeverExpires, onSubmit } = props;
   // states
   const [customDate, setCustomDate] = useState<Date | null>(null);
@@ -122,7 +120,7 @@ export const CreateApiTokenForm: React.FC<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">
@@ -145,11 +143,11 @@ export const CreateApiTokenForm: React.FC<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-red-500">{errors.label.message}</span>}
           </div>
           <Controller
             control={control}
@@ -160,7 +158,7 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
                 onChange={onChange}
                 hasError={Boolean(errors.description)}
                 placeholder={t("description")}
-                className="w-full text-base resize-none min-h-24"
+                className="w-full text-14 resize-none min-h-24"
               />
             )}
           />
@@ -177,9 +175,9 @@ export const CreateApiTokenForm: React.FC<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",
+                            "h-7 flex items-center gap-2 rounded-sm border-[0.5px] border-strong px-2 py-0.5",
                             {
-                              "text-custom-text-400": neverExpires,
+                              "text-placeholder": neverExpires,
                             }
                           )}
                         >
@@ -220,7 +218,7 @@ export const CreateApiTokenForm: React.FC<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 ?? "")}`
@@ -233,18 +231,18 @@ export const CreateApiTokenForm: React.FC<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="px-5 py-4 flex items-center justify-between gap-2 border-t-[0.5px] border-subtle">
         <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")}
@@ -253,4 +251,4 @@ export const CreateApiTokenForm: React.FC<Props> = (props) => {
       </div>
     </form>
   );
-};
+}
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 a2a4dff78e..05b40ba59b 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,5 +1,3 @@
-"use client";
-
 import { Copy } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
@@ -18,7 +16,7 @@ type Props = {
   tokenDetails: IApiToken;
 };
 
-export const GeneratedTokenDetails: React.FC<Props> = (props) => {
+export function GeneratedTokenDetails(props: Props) {
   const { handleClose, tokenDetails } = props;
   const { isMobile } = usePlatformOS();
   const { t } = useTranslation();
@@ -35,29 +33,29 @@ export const GeneratedTokenDetails: React.FC<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 font-medium leading-6 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 truncate w-full items-center justify-between 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" />
+          <Copy className="h-4 w-4 text-placeholder flex-shrink-0" />
         </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!)}`
+            ? `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>
     </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 46ad6d9f1f..4e0253bd8b 100644
--- a/apps/web/core/components/api-token/token-list-item.tsx
+++ b/apps/web/core/components/api-token/token-list-item.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { XCircle } from "lucide-react";
 // plane imports
@@ -16,7 +14,7 @@ type Props = {
   token: IApiToken;
 };
 
-export const ApiTokenListItem: React.FC<Props> = (props) => {
+export function ApiTokenListItem(props: Props) {
   const { token } = props;
   // states
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
@@ -26,7 +24,7 @@ export const ApiTokenListItem: React.FC<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)}
@@ -37,23 +35,23 @@ export const ApiTokenListItem: React.FC<Props> = (props) => {
           </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-green-500/10 text-green-500" : "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%] break-words text-13">{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!)}`
+                ? `Expires ${renderFormattedDate(token.expired_at)} at ${renderFormattedTime(token.expired_at)}`
                 : "Never expires"
               : `Expired ${calculateTimeAgo(token.expired_at)}`}
           </p>
@@ -61,4 +59,4 @@ export const ApiTokenListItem: React.FC<Props> = (props) => {
       </div>
     </>
   );
-};
+}
diff --git a/apps/web/core/components/archives/archive-tabs-list.tsx b/apps/web/core/components/archives/archive-tabs-list.tsx
index db94d191a8..f9cf3cb585 100644
--- a/apps/web/core/components/archives/archive-tabs-list.tsx
+++ b/apps/web/core/components/archives/archive-tabs-list.tsx
@@ -29,7 +29,7 @@ const ARCHIVES_TAB_LIST: {
   },
 ];
 
-export const ArchiveTabsList: FC = observer(() => {
+export const ArchiveTabsList = observer(function ArchiveTabsList() {
   // router
   const { workspaceSlug, projectId } = useParams();
   const pathname = usePathname();
@@ -48,10 +48,10 @@ export const ArchiveTabsList: FC = observer(() => {
           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 whitespace-nowrap border-b-2 py-4 px-4 text-13 font-medium 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 hover:border-subtle text-tertiary hover:text-placeholder"
                 }`}
               >
                 {tab.label}
diff --git a/apps/web/core/components/auth-screens/auth-base.tsx b/apps/web/core/components/auth-screens/auth-base.tsx
index a6bd3d6318..b3b5d361f8 100644
--- a/apps/web/core/components/auth-screens/auth-base.tsx
+++ b/apps/web/core/components/auth-screens/auth-base.tsx
@@ -1,4 +1,3 @@
-"use client";
 import React from "react";
 import { AuthRoot } from "@/components/account/auth-forms/auth-root";
 import type { EAuthModes } from "@/helpers/authentication.helper";
@@ -9,10 +8,12 @@ type AuthBaseProps = {
   authType: EAuthModes;
 };
 
-export const AuthBase = ({ authType }: AuthBaseProps) => (
-  <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">
-    <AuthHeader type={authType} />
-    <AuthRoot authMode={authType} />
-    <AuthFooter />
-  </div>
-);
+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">
+      <AuthHeader type={authType} />
+      <AuthRoot authMode={authType} />
+      <AuthFooter />
+    </div>
+  );
+}
diff --git a/apps/web/core/components/auth-screens/footer.tsx b/apps/web/core/components/auth-screens/footer.tsx
index fac043b3b3..8bfdd73ffb 100644
--- a/apps/web/core/components/auth-screens/footer.tsx
+++ b/apps/web/core/components/auth-screens/footer.tsx
@@ -1,4 +1,3 @@
-"use client";
 import React from "react";
 import { AccentureLogo, DolbyLogo, SonyLogo, ZerodhaLogo } from "@plane/propel/icons";
 
@@ -12,27 +11,29 @@ 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 const AuthFooter = () => (
-  <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">
-      {BRAND_LOGOS.map((brand) => (
-        <div className="flex items-center justify-center h-7 flex-1" key={brand.id}>
-          {brand.icon}
-        </div>
-      ))}
+export function AuthFooter() {
+  return (
+    <div className="flex flex-col items-center gap-6">
+      <span className="text-13 text-tertiary 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">
+        {BRAND_LOGOS.map((brand) => (
+          <div className="flex items-center justify-center h-7 flex-1" key={brand.id}>
+            {brand.icon}
+          </div>
+        ))}
+      </div>
     </div>
-  </div>
-);
+  );
+}
diff --git a/apps/web/core/components/auth-screens/header.tsx b/apps/web/core/components/auth-screens/header.tsx
index c55265235d..9d7a1e73a1 100644
--- a/apps/web/core/components/auth-screens/header.tsx
+++ b/apps/web/core/components/auth-screens/header.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -29,32 +27,50 @@ type AuthHeaderProps = {
   type: EAuthModes;
 };
 
-export const AuthHeader = observer(({ type }: AuthHeaderProps) => {
+export const AuthHeader = observer(function AuthHeader({ type }: AuthHeaderProps) {
   const { t } = useTranslation();
   // store
   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-13 font-medium text-center sm:items-center sm:gap-2 sm:flex-row text-tertiary">
+            <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="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
+        <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 bf1b115582..82d950a2b9 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,7 @@
 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";
@@ -14,7 +15,7 @@ type Props = {
   className?: string;
 };
 
-export const NotAuthorizedView: React.FC<Props> = observer((props) => {
+export const NotAuthorizedView = observer(function NotAuthorizedView(props: Props) {
   const { actionButton, section = "general", isProjectView = false, className } = props;
 
   // assets
@@ -22,12 +23,12 @@ export const NotAuthorizedView: React.FC<Props> = observer((props) => {
   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/join-project.tsx b/apps/web/core/components/auth-screens/project/join-project.tsx
deleted file mode 100644
index b9f52aa883..0000000000
--- a/apps/web/core/components/auth-screens/project/join-project.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-"use client";
-import { useState } from "react";
-import { useParams } from "next/navigation";
-import { ClipboardList } from "lucide-react";
-// plane imports
-import { Button } from "@plane/propel/button";
-// assets
-import Unauthorized from "@/app/assets/auth/unauthorized.svg?url";
-// hooks
-import { useProject } from "@/hooks/store/use-project";
-import { useUserPermissions } from "@/hooks/store/user";
-
-type Props = {
-  projectId?: string;
-  isPrivateProject?: boolean;
-};
-
-export const JoinProject: React.FC<Props> = (props) => {
-  const { projectId, isPrivateProject = false } = props;
-  // states
-  const [isJoiningProject, setIsJoiningProject] = useState(false);
-  // store hooks
-  const { joinProject } = useUserPermissions();
-  const { fetchProjectDetails } = useProject();
-
-  const { workspaceSlug } = useParams();
-
-  const handleJoin = () => {
-    if (!workspaceSlug || !projectId) return;
-
-    setIsJoiningProject(true);
-
-    joinProject(workspaceSlug.toString(), projectId.toString())
-      .then(() => fetchProjectDetails(workspaceSlug.toString(), projectId.toString()))
-      .finally(() => setIsJoiningProject(false));
-  };
-
-  return (
-    <div className="flex h-full w-full flex-col items-center justify-center gap-y-5 bg-custom-background-100 text-center">
-      <div className="h-44 w-72">
-        <img src={Unauthorized} className="h-[176px] w-[288px] object-contain" alt="JoinProject" />
-      </div>
-      <h1 className="text-xl font-medium text-custom-text-100">
-        {!isPrivateProject ? `You are not a member of this project yet.` : `You are not a member of this project.`}
-      </h1>
-
-      <div className="w-full max-w-md text-base text-custom-text-200">
-        <p className="mx-auto w-full text-sm md:w-3/4">
-          {!isPrivateProject
-            ? `Click the button below to join it.`
-            : `This is a private project. \n We can't tell you more about this project to protect confidentiality.`}
-        </p>
-      </div>
-      {!isPrivateProject && (
-        <div>
-          <Button
-            variant="primary"
-            prependIcon={<ClipboardList color="white" />}
-            loading={isJoiningProject}
-            onClick={handleJoin}
-          >
-            {isJoiningProject ? "Taking you in" : "Click to join"}
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-};
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
new file mode 100644
index 0000000000..8484a3c6a5
--- /dev/null
+++ b/apps/web/core/components/auth-screens/project/project-access-restriction.tsx
@@ -0,0 +1,70 @@
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+
+type TProps = {
+  isWorkspaceAdmin: boolean;
+  handleJoinProject: () => void;
+  isJoinButtonDisabled: boolean;
+  errorStatusCode: number | undefined;
+};
+
+export const ProjectAccessRestriction = observer(function ProjectAccessRestriction(props: TProps) {
+  const { isWorkspaceAdmin, handleJoinProject, isJoinButtonDisabled, errorStatusCode } = props;
+  // plane hooks
+  const { t } = useTranslation();
+
+  // Show join project screen if:
+  // - User lacks project membership (409 Conflict)
+  // - 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-surface-1">
+        <EmptyStateDetailed
+          title={t("project_empty_state.no_access.title")}
+          description={t("project_empty_state.no_access.join_description")}
+          assetKey="no-access"
+          assetClassName="size-40"
+          actions={[
+            {
+              label: isJoinButtonDisabled
+                ? t("project_empty_state.no_access.cta_loading")
+                : t("project_empty_state.no_access.cta_primary"),
+              onClick: handleJoinProject,
+              disabled: isJoinButtonDisabled,
+            },
+          ]}
+        />
+      </div>
+    );
+
+  // Show no access screen if:
+  // - 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-surface-1">
+        <EmptyStateDetailed
+          title={t("project_empty_state.no_access.title")}
+          description={t("project_empty_state.no_access.restricted_description")}
+          assetKey="no-access"
+          assetClassName="size-40"
+        />
+      </div>
+    );
+  }
+
+  // Show empty state screen if:
+  // - Project not found (404 Not Found)
+  // - Any other error status code
+  return (
+    <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")}
+        assetKey="project"
+        assetClassName="size-40"
+      />
+    </div>
+  );
+});
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 115718d750..6b80d64b8b 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,35 +1,35 @@
-"use client";
-
 import Link from "next/link";
 // ui
 import { Button } from "@plane/propel/button";
 // layouts
 import DefaultLayout from "@/layouts/default-layout";
 
-export const NotAWorkspaceMember = () => (
-  <DefaultLayout>
-    <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">
-            You{"'"}re not a member of this workspace. Please contact the workspace admin to get an invitation or check
-            your pending invitations.
-          </p>
-        </div>
-        <div className="flex items-center justify-center gap-2">
-          <Link href="/invitations">
-            <span>
-              <Button variant="neutral-primary">Check pending invites</Button>
-            </span>
-          </Link>
-          <Link href="/create-workspace">
-            <span>
-              <Button variant="primary">Create new workspace</Button>
-            </span>
-          </Link>
+export function NotAWorkspaceMember() {
+  return (
+    <DefaultLayout>
+      <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-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>
+          </div>
+          <div className="flex items-center justify-center gap-2">
+            <Link href="/invitations">
+              <span>
+                <Button variant="secondary">Check pending invites</Button>
+              </span>
+            </Link>
+            <Link href="/create-workspace">
+              <span>
+                <Button variant="primary">Create new workspace</Button>
+              </span>
+            </Link>
+          </div>
         </div>
       </div>
-    </div>
-  </DefaultLayout>
-);
+    </DefaultLayout>
+  );
+}
diff --git a/apps/web/core/components/automation/auto-archive-automation.tsx b/apps/web/core/components/automation/auto-archive-automation.tsx
index 445a9d8d0c..e27817bb3a 100644
--- a/apps/web/core/components/automation/auto-archive-automation.tsx
+++ b/apps/web/core/components/automation/auto-archive-automation.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -30,7 +28,7 @@ type Props = {
 
 const initialValues: Partial<IProject> = { archive_in: 1 };
 
-export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
+export const AutoArchiveAutomation = observer(function AutoArchiveAutomation(props: Props) {
   const { handleChange } = props;
   // router
   const { workspaceSlug } = useParams();
@@ -63,15 +61,15 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
         handleClose={() => setmonthModal(false)}
         handleChange={handleChange}
       />
-      <div className="flex flex-col gap-4 border-b border-custom-border-100 py-6">
+      <div className="flex flex-col gap-4 border-b border-subtle 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 className="flex items-center justify-center rounded-sm bg-layer-3 p-3">
+              <ArchiveRestore className="h-4 w-4 flex-shrink-0 text-primary" />
             </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">
+              <h4 className="text-13 font-medium">{t("project_settings.automations.auto-archive.title")}</h4>
+              <p className="text-13 tracking-tight text-tertiary">
                 {t("project_settings.automations.auto-archive.description")}
               </p>
             </div>
@@ -102,8 +100,8 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
         {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="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">
@@ -121,13 +119,13 @@ export const AutoArchiveAutomation: React.FC<Props> = observer((props) => {
                     <>
                       {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 select-none items-center rounded-sm px-1 py-1.5 text-13 text-secondary hover:bg-layer-1"
                         onClick={() => setmonthModal(true)}
                       >
                         {t("common.customize_time_range")}
diff --git a/apps/web/core/components/automation/auto-close-automation.tsx b/apps/web/core/components/automation/auto-close-automation.tsx
index 19e294a22d..54072fd893 100644
--- a/apps/web/core/components/automation/auto-close-automation.tsx
+++ b/apps/web/core/components/automation/auto-close-automation.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -32,7 +30,7 @@ type Props = {
   handleChange: (formData: Partial<IProject>) => Promise<void>;
 };
 
-export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
+export const AutoCloseAutomation = observer(function AutoCloseAutomation(props: Props) {
   const { handleChange } = props;
   // router
   const { workspaceSlug } = useParams();
@@ -95,12 +93,12 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
       <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">
+            <div className="flex items-center justify-center rounded-sm bg-layer-3 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">
+              <h4 className="text-13 font-medium">{t("project_settings.automations.auto-close.title")}</h4>
+              <p className="text-13 tracking-tight text-tertiary">
                 {t("project_settings.automations.auto-close.description")}
               </p>
             </div>
@@ -131,9 +129,9 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
         {currentProjectDetails ? (
           autoCloseStatus && (
             <div className="mx-6">
-              <div className="flex flex-col rounded border border-custom-border-200 bg-custom-background-90">
+              <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">
@@ -156,7 +154,7 @@ export const AutoCloseAutomation: React.FC<Props> = observer((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 select-none items-center rounded-sm px-1 py-1.5 text-secondary hover:bg-layer-1"
                           onClick={() => setmonthModal(true)}
                         >
                           {t("common.customize_time_range")}
@@ -167,10 +165,10 @@ export const AutoCloseAutomation: React.FC<Props> = observer((props) => {
                 </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="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={
@@ -188,11 +186,11 @@ export const AutoCloseAutomation: React.FC<Props> = observer((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) => {
diff --git a/apps/web/core/components/automation/select-month-modal.tsx b/apps/web/core/components/automation/select-month-modal.tsx
index 4ed121e10b..db7a2c5b8b 100644
--- a/apps/web/core/components/automation/select-month-modal.tsx
+++ b/apps/web/core/components/automation/select-month-modal.tsx
@@ -1,16 +1,10 @@
-"use client";
-
-import React from "react";
 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 = {
@@ -21,7 +15,7 @@ type Props = {
   handleChange: (formData: Partial<IProject>) => Promise<void>;
 };
 
-export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen, handleClose, handleChange }) => {
+export function SelectMonthModal({ type, initialValues, isOpen, handleClose, handleChange }: Props) {
   const { workspaceSlug, projectId } = useParams();
 
   const {
@@ -45,124 +39,92 @@ export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen,
   };
 
   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 font-medium leading-6 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 right-8 top-2.5 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-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-subtle"
+                          min={1}
+                          max={12}
+                        />
+                        <span className="absolute right-8 top-2.5 text-13 text-secondary">Months</span>
+                      </div>
+                    )}
+                  />
+                  {errors.archive_in && (
+                    <span className="px-1 text-13 text-red-500">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/gantt/layout.tsx b/apps/web/core/components/base-layouts/gantt/layout.tsx
index 0bc91fb9c1..b21510c46b 100644
--- a/apps/web/core/components/base-layouts/gantt/layout.tsx
+++ b/apps/web/core/components/base-layouts/gantt/layout.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 import { GANTT_TIMELINE_TYPE } from "@plane/types";
@@ -14,7 +12,9 @@ import { TimeLineTypeContext } from "@/components/gantt-chart/contexts";
 import { GanttChartRoot } from "@/components/gantt-chart/root";
 import { BaseGanttSidebar } from "./sidebar";
 
-export const BaseGanttLayout = observer(<T extends IBaseLayoutsGanttItem>(props: IBaseLayoutsGanttProps<T>) => {
+export const BaseGanttLayout = observer(function BaseGanttLayout<T extends IBaseLayoutsGanttItem>(
+  props: IBaseLayoutsGanttProps<T>
+) {
   const {
     items,
     groupedItemIds,
diff --git a/apps/web/core/components/base-layouts/gantt/sidebar.tsx b/apps/web/core/components/base-layouts/gantt/sidebar.tsx
index f26f59a410..7ab1446a14 100644
--- a/apps/web/core/components/base-layouts/gantt/sidebar.tsx
+++ b/apps/web/core/components/base-layouts/gantt/sidebar.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { RefObject } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
@@ -26,7 +24,7 @@ type Props<T extends IBaseLayoutsBaseItem> = {
   renderItem: (item: T) => React.ReactNode;
 };
 
-export const BaseGanttSidebar = observer(<T extends IBaseLayoutsBaseItem>(props: Props<T>) => {
+export const BaseGanttSidebar = observer(function BaseGanttSidebar<T extends IBaseLayoutsBaseItem>(props: Props<T>) {
   const {
     blockUpdateHandler,
     blockIds,
@@ -98,15 +96,18 @@ export const BaseGanttSidebar = observer(<T extends IBaseLayoutsBaseItem>(props:
                     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 w-full flex items-center gap-2 pr-4 bg-layer-transparent hover:bg-layer-transparent-hover",
+                            {
+                              "bg-layer-transparent-hover": isBlockHoveredOn,
+                            }
+                          )}
                           style={{
                             height: `${BLOCK_HEIGHT}px`,
                           }}
@@ -114,7 +115,7 @@ export const BaseGanttSidebar = observer(<T extends IBaseLayoutsBaseItem>(props:
                           <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>
@@ -131,7 +132,7 @@ export const BaseGanttSidebar = observer(<T extends IBaseLayoutsBaseItem>(props:
           })}
           {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 md:h-8 w-full items-center justify-between gap-1.5 rounded-sm md:px-1 px-4 py-1.5 bg-layer-1 animate-pulse" />
             </div>
           )}
         </>
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 be84879957..c8e3f6b146 100644
--- a/apps/web/core/components/base-layouts/kanban/group-header.tsx
+++ b/apps/web/core/components/base-layouts/kanban/group-header.tsx
@@ -1,14 +1,16 @@
 import type { IGroupHeaderProps } from "@plane/types";
 
-export const GroupHeader = ({ group, itemCount, onToggleGroup }: IGroupHeaderProps) => (
-  <button
-    onClick={() => onToggleGroup(group.id)}
-    className="flex w-full items-center gap-2 text-sm font-medium text-custom-text-200"
-  >
-    <div className="flex items-center gap-2">
-      {group.icon}
-      <span>{group.name}</span>
-    </div>
-    <span className="text-xs text-custom-text-300">{itemCount}</span>
-  </button>
-);
+export function GroupHeader({ group, itemCount, onToggleGroup }: IGroupHeaderProps) {
+  return (
+    <button
+      onClick={() => onToggleGroup(group.id)}
+      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-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 2cd291897f..39bd2c3ed9 100644
--- a/apps/web/core/components/base-layouts/kanban/group.tsx
+++ b/apps/web/core/components/base-layouts/kanban/group.tsx
@@ -6,7 +6,9 @@ import { useGroupDropTarget } from "../hooks/use-group-drop-target";
 import { GroupHeader } from "./group-header";
 import { BaseKanbanItem } from "./item";
 
-export const BaseKanbanGroup = observer(<T extends IBaseLayoutsKanbanItem>(props: IBaseLayoutsKanbanGroupProps<T>) => {
+export const BaseKanbanGroup = observer(function BaseKanbanGroup<T extends IBaseLayoutsKanbanItem>(
+  props: IBaseLayoutsKanbanGroupProps<T>
+) {
   const {
     group,
     itemIds,
@@ -33,15 +35,15 @@ export const BaseKanbanGroup = observer(<T extends IBaseLayoutsKanbanItem>(props
     <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 flex-shrink-0 flex-col w-[350px] border-[1px] border-transparent p-2 pt-0 max-h-full overflow-y-auto bg-layer-1 rounded-md",
         {
-          "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 px-1 py-2 cursor-pointer">
         {renderGroupHeader ? (
           renderGroupHeader({ group, itemCount: itemIds.length, isCollapsed, onToggleGroup })
         ) : (
@@ -77,7 +79,7 @@ export const BaseKanbanGroup = observer(<T extends IBaseLayoutsKanbanItem>(props
           })}
 
           {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>
           )}
@@ -85,8 +87,8 @@ export const BaseKanbanGroup = observer(<T extends IBaseLayoutsKanbanItem>(props
       )}
 
       {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 h-full w-full flex items-center justify-center text-13 font-medium text-tertiary rounded-sm bg-layer-1/85 border-[1px] border-strong z-[2]">
+          <div className="p-3 my-8 flex flex-col rounded-sm items-center 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 325e6f0d68..1bc5609430 100644
--- a/apps/web/core/components/base-layouts/kanban/item.tsx
+++ b/apps/web/core/components/base-layouts/kanban/item.tsx
@@ -4,7 +4,9 @@ import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-d
 import { observer } from "mobx-react";
 import type { IBaseLayoutsKanbanItem, IBaseLayoutsKanbanItemProps } from "@plane/types";
 
-export const BaseKanbanItem = observer(<T extends IBaseLayoutsKanbanItem>(props: IBaseLayoutsKanbanItemProps<T>) => {
+export const BaseKanbanItem = observer(function BaseKanbanItem<T extends IBaseLayoutsKanbanItem>(
+  props: IBaseLayoutsKanbanItemProps<T>
+) {
   const { item, groupId, renderItem, enableDragDrop, canDrag } = props;
 
   const itemRef = useRef<HTMLDivElement | null>(null);
diff --git a/apps/web/core/components/base-layouts/kanban/layout.tsx b/apps/web/core/components/base-layouts/kanban/layout.tsx
index 7ef47f811e..1006eb10b6 100644
--- a/apps/web/core/components/base-layouts/kanban/layout.tsx
+++ b/apps/web/core/components/base-layouts/kanban/layout.tsx
@@ -1,12 +1,12 @@
-"use client";
-
 import { observer } from "mobx-react";
 import type { IBaseLayoutsKanbanItem, IBaseLayoutsKanbanProps } from "@plane/types";
 import { cn } from "@plane/utils";
 import { useLayoutState } from "../hooks/use-layout-state";
 import { BaseKanbanGroup } from "./group";
 
-export const BaseKanbanLayout = observer(<T extends IBaseLayoutsKanbanItem>(props: IBaseLayoutsKanbanProps<T>) => {
+export const BaseKanbanLayout = observer(function BaseKanbanLayout<T extends IBaseLayoutsKanbanItem>(
+  props: IBaseLayoutsKanbanProps<T>
+) {
   const {
     items,
     groups,
diff --git a/apps/web/core/components/base-layouts/layout-switcher.tsx b/apps/web/core/components/base-layouts/layout-switcher.tsx
index 0f6d396269..45d30ac444 100644
--- a/apps/web/core/components/base-layouts/layout-switcher.tsx
+++ b/apps/web/core/components/base-layouts/layout-switcher.tsx
@@ -1,8 +1,7 @@
-"use client";
-
-import React from "react";
+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";
 
@@ -12,9 +11,10 @@ type Props = {
   selectedLayout: TBaseLayoutType;
 };
 
-export const LayoutSwitcher: React.FC<Props> = (props) => {
+export function LayoutSwitcher(props: Props) {
   const { layouts, onChange, selectedLayout } = props;
   const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
 
   const handleOnChange = (layoutKey: TBaseLayoutType) => {
     if (selectedLayout !== layoutKey) {
@@ -23,23 +23,29 @@ export const LayoutSwitcher: React.FC<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>
@@ -47,4 +53,4 @@ export const LayoutSwitcher: React.FC<Props> = (props) => {
       })}
     </div>
   );
-};
+}
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 cbdca7fade..ade7ecbfb3 100644
--- a/apps/web/core/components/base-layouts/list/group-header.tsx
+++ b/apps/web/core/components/base-layouts/list/group-header.tsx
@@ -1,12 +1,14 @@
 import type { IGroupHeaderProps } from "@plane/types";
 
-export const GroupHeader = ({ group, itemCount, onToggleGroup }: IGroupHeaderProps) => (
-  <button
-    onClick={() => onToggleGroup(group.id)}
-    className="flex w-full items-center gap-2 py-2 text-sm font-medium text-custom-text-200"
-  >
-    {group.icon}
-    <span>{group.name}</span>
-    <span className="text-xs text-custom-text-300">{itemCount}</span>
-  </button>
-);
+export function GroupHeader({ group, itemCount, onToggleGroup }: IGroupHeaderProps) {
+  return (
+    <button
+      onClick={() => onToggleGroup(group.id)}
+      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-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 15a8079aa2..ff50c11de8 100644
--- a/apps/web/core/components/base-layouts/list/group.tsx
+++ b/apps/web/core/components/base-layouts/list/group.tsx
@@ -1,12 +1,14 @@
 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";
 
-export const BaseListGroup = observer(<T extends IBaseLayoutsListItem>(props: IBaseLayoutsListGroupProps<T>) => {
+export const BaseListGroup = observer(function BaseListGroup<T extends IBaseLayoutsListItem>(
+  props: IBaseLayoutsListGroupProps<T>
+) {
   const {
     group,
     itemIds,
@@ -31,12 +33,12 @@ export const BaseListGroup = observer(<T extends IBaseLayoutsListItem>(props: IB
   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 w-full shrink-0 border-b border-subtle bg-layer-1 hover:bg-layer-1-hover py-1 px-6 cursor-pointer z-10">
         {renderGroupHeader ? (
           renderGroupHeader({ group, itemCount: itemIds.length, isCollapsed, onToggleGroup })
         ) : (
@@ -47,7 +49,7 @@ export const BaseListGroup = observer(<T extends IBaseLayoutsListItem>(props: IB
             onToggleGroup={onToggleGroup}
           />
         )}
-      </Row>
+      </div>
 
       {/* Group Items */}
       {!isCollapsed && (
@@ -74,8 +76,8 @@ export const BaseListGroup = observer(<T extends IBaseLayoutsListItem>(props: IB
       )}
 
       {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 h-full w-full flex items-center justify-center text-13 font-medium text-tertiary rounded-sm bg-layer-1/85 border-[1px] border-strong z-[2]">
+          <div className="p-3 my-8 flex flex-col rounded-sm items-center 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 cfaa745025..22f808b8cd 100644
--- a/apps/web/core/components/base-layouts/list/item.tsx
+++ b/apps/web/core/components/base-layouts/list/item.tsx
@@ -4,7 +4,9 @@ import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-d
 import { observer } from "mobx-react";
 import type { IBaseLayoutsListItem, IBaseLayoutsListItemProps } from "@plane/types";
 
-export const BaseListItem = observer(<T extends IBaseLayoutsListItem>(props: IBaseLayoutsListItemProps<T>) => {
+export const BaseListItem = observer(function BaseListItem<T extends IBaseLayoutsListItem>(
+  props: IBaseLayoutsListItemProps<T>
+) {
   const { item, groupId, renderItem, enableDragDrop, canDrag, isLast: _isLast, index: _index } = props;
   const itemRef = useRef<HTMLDivElement | null>(null);
 
diff --git a/apps/web/core/components/base-layouts/list/layout.tsx b/apps/web/core/components/base-layouts/list/layout.tsx
index 59a012007a..36e91ec301 100644
--- a/apps/web/core/components/base-layouts/list/layout.tsx
+++ b/apps/web/core/components/base-layouts/list/layout.tsx
@@ -1,12 +1,12 @@
-"use client";
-
 import { observer } from "mobx-react";
 import type { IBaseLayoutsListItem, IBaseLayoutsListProps } from "@plane/types";
 import { cn } from "@plane/ui";
 import { useLayoutState } from "../hooks/use-layout-state";
 import { BaseListGroup } from "./group";
 
-export const BaseListLayout = observer(<T extends IBaseLayoutsListItem>(props: IBaseLayoutsListProps<T>) => {
+export const BaseListLayout = observer(function BaseListLayout<T extends IBaseLayoutsListItem>(
+  props: IBaseLayoutsListProps<T>
+) {
   const {
     items,
     groupedItemIds,
@@ -37,7 +37,7 @@ export const BaseListLayout = observer(<T extends IBaseLayoutsListItem>(props: I
   );
 
   return (
-    <div ref={containerRef} className={cn("relative size-full overflow-auto bg-custom-background-90", className)}>
+    <div ref={containerRef} className={cn("relative size-full overflow-auto bg-surface-1", className)}>
       <div className="relative size-full flex flex-col">
         {groups.map((group) => {
           const itemIds = groupedItemIds[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 d81d6718d3..894c8cafd1 100644
--- a/apps/web/core/components/base-layouts/loaders/layout-loader.tsx
+++ b/apps/web/core/components/base-layouts/loaders/layout-loader.tsx
@@ -8,7 +8,7 @@ interface GenericLayoutLoaderProps {
   customLoaders?: Partial<Record<TBaseLayoutType, React.ComponentType>>;
 }
 
-export const GenericLayoutLoader = ({ layout, customLoaders }: GenericLayoutLoaderProps) => {
+export function GenericLayoutLoader({ layout, customLoaders }: GenericLayoutLoaderProps) {
   const CustomLoader = customLoaders?.[layout];
   if (CustomLoader) return <CustomLoader />;
 
@@ -21,4 +21,4 @@ export const GenericLayoutLoader = ({ layout, customLoaders }: GenericLayoutLoad
       console.warn(`Unknown layout: ${layout}`);
       return null;
   }
-};
+}
diff --git a/apps/web/core/components/comments/card/display.tsx b/apps/web/core/components/comments/card/display.tsx
index 16ea26378c..057c5dff04 100644
--- a/apps/web/core/components/comments/card/display.tsx
+++ b/apps/web/core/components/comments/card/display.tsx
@@ -1,4 +1,5 @@
-import { useEffect, useState } from "react";
+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";
@@ -7,24 +8,33 @@ import type { EditorRefApi } from "@plane/editor";
 import { useHashScroll } from "@plane/hooks";
 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: React.FC<Props> = observer((props) => {
+export const CommentCardDisplay = observer(function CommentCardDisplay(props: TCommentCardDisplayProps) {
   const {
     activityOperations,
     comment,
@@ -34,13 +44,34 @@ export const CommentCardDisplay: React.FC<Props> = observer((props) => {
     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 +80,7 @@ export const CommentCardDisplay: React.FC<Props> = observer((props) => {
 
   useEffect(() => {
     if (!isHashMatch) return;
-    setHighlightClassName("border-custom-primary-100");
+    setHighlightClassName("border-accent-strong");
     const timeout = setTimeout(() => {
       setHighlightClassName("");
     }, 8000);
@@ -57,10 +88,21 @@ export const CommentCardDisplay: React.FC<Props> = observer((props) => {
     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 right-2.5 top-2.5 z-[1] text-tertiary">
           {comment.access === EIssueCommentAccessSpecifier.INTERNAL ? (
             <Lock className="size-3" />
           ) : (
@@ -68,20 +110,74 @@ export const CommentCardDisplay: React.FC<Props> = observer((props) => {
           )}
         </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="flex relative w-full gap-2 items-center mb-3">
+        <Avatar size="sm" name={displayName} src={getFileURL(avatarUrl)} className="shrink-0" />
+        <div className="flex-1 flex 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 items-center gap-1 shrink-0">
+            <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 fcaa6b3525..8bd761d888 100644
--- a/apps/web/core/components/comments/card/edit-form.tsx
+++ b/apps/web/core/components/comments/card/edit-form.tsx
@@ -6,7 +6,7 @@ import type { EditorRefApi } from "@plane/editor";
 import { 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";
 
@@ -21,7 +21,7 @@ type Props = {
   workspaceSlug: string;
 };
 
-export const CommentCardEditForm: React.FC<Props> = observer((props) => {
+export const CommentCardEditForm = observer(function CommentCardEditForm(props: Props) {
   const {
     activityOperations,
     comment,
@@ -46,7 +46,7 @@ export const CommentCardEditForm: React.FC<Props> = observer((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;
@@ -94,37 +94,58 @@ export const CommentCardEditForm: React.FC<Props> = observer((props) => {
             const { asset_id } = await activityOperations.uploadCommentAsset(blockId, file, comment.id);
             return asset_id;
           }}
+          duplicateFile={async (assetId: string) => {
+            const { asset_id } = await activityOperations.duplicateCommentAsset(assetId, comment.id);
+            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 rounded-lg border size-7 flex items-center justify-center shadow-md duration-300",
+              isDisabled
+                ? "cursor-not-allowed border-green-500/50 bg-green-500/10"
+                : "border-green-500 bg-green-500/20 hover:bg-green-500"
+            )}
           >
             <Check
-              className={`h-3 w-3 text-green-500 duration-300 ${isEmpty ? "text-black" : "group-hover:text-white"}`}
+              className={cn(
+                "size-4 duration-300",
+                isDisabled ? "text-green-500/50" : "text-green-500 group-hover:text-on-color"
+              )}
             />
           </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 rounded-lg border size-7 flex items-center justify-center shadow-md duration-300",
+            isSubmitting
+              ? "cursor-not-allowed border-red-500/50 bg-red-500/10"
+              : "border-red-500 bg-red-500/20 hover:bg-red-500"
+          )}
           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={cn(
+              "size-5 duration-300",
+              isSubmitting ? "text-red-500/50" : "text-red-500 group-hover:text-on-color"
+            )}
+          />
         </button>
       </div>
     </form>
diff --git a/apps/web/core/components/comments/card/root.tsx b/apps/web/core/components/comments/card/root.tsx
index f55d3fd179..18666a42c2 100644
--- a/apps/web/core/components/comments/card/root.tsx
+++ b/apps/web/core/components/comments/card/root.tsx
@@ -1,32 +1,30 @@
-"use client";
-
-import type { FC } from "react";
 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;
 };
 
-export const CommentCard: FC<TCommentCard> = observer((props) => {
+export const CommentCard = observer(function CommentCard(props: TCommentCard) {
   const {
     workspaceSlug,
+    entityId,
     comment,
     activityOperations,
     ends,
@@ -45,10 +43,20 @@ export const CommentCard: FC<TCommentCard> = observer((props) => {
   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}
@@ -56,33 +64,8 @@ export const CommentCard: FC<TCommentCard> = observer((props) => {
             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 a9b2423f90..4038170511 100644
--- a/apps/web/core/components/comments/comment-create.tsx
+++ b/apps/web/core/components/comments/comment-create.tsx
@@ -26,7 +26,7 @@ type TCommentCreate = {
 // services
 const fileService = new FileService();
 
-export const CommentCreate: FC<TCommentCreate> = observer((props) => {
+export const CommentCreate = observer(function CommentCreate(props: TCommentCreate) {
   const {
     workspaceSlug,
     entityId,
@@ -42,7 +42,7 @@ export const CommentCreate: FC<TCommentCreate> = observer((props) => {
   // store hooks
   const workspaceStore = useWorkspace();
   // derived values
-  const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug as string)?.id as string;
+  const workspaceId = workspaceStore.getWorkspaceBySlug(workspaceSlug)?.id as string;
   // form info
   const {
     handleSubmit,
@@ -87,7 +87,7 @@ export const CommentCreate: FC<TCommentCreate> = observer((props) => {
 
   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" &&
@@ -133,6 +133,11 @@ export const CommentCreate: FC<TCommentCreate> = observer((props) => {
                   setUploadedAssetIds((prev) => [...prev, asset_id]);
                   return asset_id;
                 }}
+                duplicateFile={async (assetId: string) => {
+                  const { asset_id } = await activityOperations.duplicateCommentAsset(assetId);
+                  setUploadedAssetIds((prev) => [...prev, asset_id]);
+                  return asset_id;
+                }}
                 showToolbarInitially={showToolbarInitially}
                 parentClassName="p-2"
                 displayConfig={{
diff --git a/apps/web/core/components/comments/comment-reaction.tsx b/apps/web/core/components/comments/comment-reaction.tsx
index 181f7a072a..deb32bc92b 100644
--- a/apps/web/core/components/comments/comment-reaction.tsx
+++ b/apps/web/core/components/comments/comment-reaction.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
@@ -18,7 +16,7 @@ export type TProps = {
   activityOperations: TCommentsOperations;
 };
 
-export const CommentReactions: FC<TProps> = observer((props) => {
+export const CommentReactions = observer(function CommentReactions(props: TProps) {
   const { comment, activityOperations, disabled = false } = props;
   // state
   const [isPickerOpen, setIsPickerOpen] = useState(false);
@@ -63,6 +61,12 @@ export const CommentReactions: FC<TProps> = observer((props) => {
 
   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
@@ -74,7 +78,7 @@ export const CommentReactions: FC<TProps> = observer((props) => {
           <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 9f2cfc6c55..e370fcb1d0 100644
--- a/apps/web/core/components/comments/comments.tsx
+++ b/apps/web/core/components/comments/comments.tsx
@@ -1,7 +1,4 @@
-"use client";
-
-import type { FC } from "react";
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
@@ -21,9 +18,10 @@ type TCommentsWrapper = {
   getCommentById?: (activityId: string) => TIssueComment | undefined;
   showAccessSpecifier?: boolean;
   showCopyLinkOption?: boolean;
+  enableReplies?: boolean;
 };
 
-export const CommentsWrapper: FC<TCommentsWrapper> = observer((props) => {
+export const CommentsWrapper = observer(function CommentsWrapper(props: TCommentsWrapper) {
   const {
     entityId,
     activityOperations,
@@ -33,6 +31,7 @@ export const CommentsWrapper: FC<TCommentsWrapper> = observer((props) => {
     projectId,
     showAccessSpecifier = false,
     showCopyLinkOption = false,
+    enableReplies = false,
   } = props;
   // router
   const { workspaceSlug: routerWorkspaceSlug } = useParams();
@@ -67,13 +66,15 @@ export const CommentsWrapper: FC<TCommentsWrapper> = observer((props) => {
             <CommentCard
               key={comment.id}
               workspaceSlug={workspaceSlug}
-              comment={comment as TIssueComment}
+              entityId={entityId}
+              comment={comment}
               activityOperations={activityOperations}
               disabled={!isEditingAllowed}
               ends={index === 0 ? "top" : index === comments.length - 1 ? "bottom" : undefined}
               projectId={projectId}
               showAccessSpecifier={showAccessSpecifier}
               showCopyLinkOption={showCopyLinkOption}
+              enableReplies={enableReplies}
             />
           );
         })}
diff --git a/apps/web/core/components/comments/quick-actions.tsx b/apps/web/core/components/comments/quick-actions.tsx
index 32f176544c..60af778a8f 100644
--- a/apps/web/core/components/comments/quick-actions.tsx
+++ b/apps/web/core/components/comments/quick-actions.tsx
@@ -1,12 +1,10 @@
-"use client";
-
-import type { FC } from "react";
 import { useMemo } from "react";
 import { observer } from "mobx-react";
-import { Globe2, Link, Lock, Pencil, Trash2 } from "lucide-react";
+import { Globe2, Link, Lock, Pencil, Trash2, MoreHorizontal } from "lucide-react";
 // plane imports
 import { EIssueCommentAccessSpecifier } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
+import { IconButton } from "@plane/propel/icon-button";
 import type { TIssueComment, TCommentsOperations } from "@plane/types";
 import type { TContextMenuItem } from "@plane/ui";
 import { CustomMenu } from "@plane/ui";
@@ -22,7 +20,7 @@ type TCommentCard = {
   showCopyLinkOption: boolean;
 };
 
-export const CommentQuickActions: FC<TCommentCard> = observer((props) => {
+export const CommentQuickActions = observer(function CommentQuickActions(props: TCommentCard) {
   const { activityOperations, comment, setEditMode, showAccessSpecifier, showCopyLinkOption } = props;
   // store hooks
   const { data: currentUser } = useUser();
@@ -33,51 +31,53 @@ export const CommentQuickActions: FC<TCommentCard> = observer((props) => {
   // translation
   const { t } = useTranslation();
 
-  const MENU_ITEMS: TContextMenuItem[] = useMemo(
-    () => [
-      {
-        key: "edit",
-        action: setEditMode,
-        title: t("common.actions.edit"),
-        icon: Pencil,
-        shouldRender: canEdit,
-      },
-      {
-        key: "copy_link",
-        action: () => activityOperations.copyCommentLink(comment.id),
-        title: t("common.actions.copy_link"),
-        icon: Link,
-        shouldRender: showCopyLinkOption,
-      },
-      {
-        key: "access_specifier",
-        action: () =>
-          activityOperations.updateComment(comment.id, {
-            access:
-              comment.access === EIssueCommentAccessSpecifier.INTERNAL
-                ? EIssueCommentAccessSpecifier.EXTERNAL
-                : EIssueCommentAccessSpecifier.INTERNAL,
-          }),
-        title:
-          comment.access === EIssueCommentAccessSpecifier.INTERNAL
-            ? t("issue.comments.switch.public")
-            : t("issue.comments.switch.private"),
-        icon: comment.access === EIssueCommentAccessSpecifier.INTERNAL ? Globe2 : Lock,
-        shouldRender: showAccessSpecifier,
-      },
-      {
-        key: "delete",
-        action: () => activityOperations.removeComment(comment.id),
-        title: t("common.actions.delete"),
-        icon: Trash2,
-        shouldRender: canDelete,
-      },
-    ],
-    [activityOperations, canDelete, canEdit, comment, setEditMode, showAccessSpecifier, showCopyLinkOption]
+  const MENU_ITEMS = useMemo(
+    function MENU_ITEMS(): TContextMenuItem[] {
+      return [
+        {
+          key: "edit",
+          action: setEditMode,
+          title: t("common.actions.edit"),
+          icon: Pencil,
+          shouldRender: canEdit,
+        },
+        {
+          key: "copy_link",
+          action: () => activityOperations.copyCommentLink(comment.id),
+          title: t("common.actions.copy_link"),
+          icon: Link,
+          shouldRender: showCopyLinkOption,
+        },
+        {
+          key: "access_specifier",
+          action: () =>
+            activityOperations.updateComment(comment.id, {
+              access:
+                comment.access === EIssueCommentAccessSpecifier.INTERNAL
+                  ? EIssueCommentAccessSpecifier.EXTERNAL
+                  : EIssueCommentAccessSpecifier.INTERNAL,
+            }),
+          title:
+            comment.access === EIssueCommentAccessSpecifier.INTERNAL
+              ? t("issue.comments.switch.public")
+              : t("issue.comments.switch.private"),
+          icon: comment.access === EIssueCommentAccessSpecifier.INTERNAL ? Globe2 : Lock,
+          shouldRender: showAccessSpecifier,
+        },
+        {
+          key: "delete",
+          action: () => activityOperations.removeComment(comment.id),
+          title: t("common.actions.delete"),
+          icon: Trash2,
+          shouldRender: canDelete,
+        },
+      ];
+    },
+    [t, setEditMode, canEdit, showCopyLinkOption, activityOperations, comment, showAccessSpecifier, canDelete]
   );
 
   return (
-    <CustomMenu ellipsis closeOnSelect>
+    <CustomMenu customButton={<IconButton icon={MoreHorizontal} variant="ghost" size="sm" />} closeOnSelect>
       {MENU_ITEMS.map((item) => {
         if (item.shouldRender === false) return null;
 
@@ -88,7 +88,7 @@ export const CommentQuickActions: FC<TCommentCard> = observer((props) => {
             className={cn(
               "flex items-center gap-2",
               {
-                "text-custom-text-400": item.disabled,
+                "text-placeholder": item.disabled,
               },
               item.className
             )}
@@ -99,8 +99,8 @@ export const CommentQuickActions: FC<TCommentCard> = observer((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("text-tertiary whitespace-pre-line", {
+                    "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 42006e9f72..81c8f63273 100644
--- a/apps/web/core/components/common/access-field.tsx
+++ b/apps/web/core/components/common/access-field.tsx
@@ -18,12 +18,12 @@ type Props = {
 };
 
 // TODO: Remove label once i18n is done
-export const AccessField = (props: Props) => {
+export function AccessField(props: Props) {
   const { onChange, value, accessSpecifiers, isMobile = false } = 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 +32,13 @@ export const 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"
+                "flex-shrink-0 relative flex justify-center items-center w-5 h-5 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>
@@ -50,4 +47,4 @@ export const AccessField = (props: Props) => {
       })}
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/common/activity/activity-block.tsx b/apps/web/core/components/common/activity/activity-block.tsx
index caf48975f1..5ed9e17beb 100644
--- a/apps/web/core/components/common/activity/activity-block.tsx
+++ b/apps/web/core/components/common/activity/activity-block.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC, ReactNode } from "react";
 import { Network } from "lucide-react";
 // types
@@ -14,29 +12,29 @@ 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;
   customUserName?: string;
 };
 
-export const ActivityBlockComponent: FC<TActivityBlockComponent> = (props) => {
-  const { icon, activity, ends, children, customUserName } = props;
+export function ActivityBlockComponent(props: TActivityBlockComponent) {
+  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="shrink-0  w-7 h-7 rounded-lg overflow-hidden flex justify-center items-center mt-0.5 z-[4] text-secondary border border-subtle 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>
@@ -45,7 +43,7 @@ export const ActivityBlockComponent: FC<TActivityBlockComponent> = (props) => {
             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="whitespace-nowrap text-tertiary font-medium cursor-help">
               {calculateTimeAgo(activity.created_at)}
             </span>
           </Tooltip>
@@ -53,4 +51,4 @@ export const ActivityBlockComponent: FC<TActivityBlockComponent> = (props) => {
       </div>
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/common/activity/activity-item.tsx b/apps/web/core/components/common/activity/activity-item.tsx
index 6df28e1d88..cb4241887d 100644
--- a/apps/web/core/components/common/activity/activity-item.tsx
+++ b/apps/web/core/components/common/activity/activity-item.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { observer } from "mobx-react";
 
@@ -13,7 +11,7 @@ type TActivityItem = {
   ends?: "top" | "bottom" | undefined;
 };
 
-export const ActivityItem: FC<TActivityItem> = observer((props) => {
+export const ActivityItem = observer(function ActivityItem(props: TActivityItem) {
   const { activity, showProject = true, 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 8c656f33e2..f0f0cb0cb5 100644
--- a/apps/web/core/components/common/activity/helper.tsx
+++ b/apps/web/core/components/common/activity/helper.tsx
@@ -1,9 +1,8 @@
-import type { ReactNode } from "react";
+import type { FC, ReactNode } from "react";
 import {
   RotateCcw,
   Network,
   Link as LinkIcon,
-  Calendar,
   Inbox,
   AlignLeft,
   Paperclip,
@@ -13,7 +12,6 @@ import {
   Hash,
   Clock,
   Bell,
-  LayoutGrid,
   GitBranch,
   Timer,
   ListTodo,
@@ -24,54 +22,55 @@ import {
 import {
   ArchiveIcon,
   CycleIcon,
-  StatePropertyIcon,
+  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: Globe,
+  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 +91,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 +104,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 +118,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 +132,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 +144,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 +154,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 +162,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 +182,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 +199,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 +210,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 +223,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 +235,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 +243,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 5da5b305f3..c9fff9b849 100644
--- a/apps/web/core/components/common/activity/user.tsx
+++ b/apps/web/core/components/common/activity/user.tsx
@@ -12,7 +12,7 @@ type TUser = {
   customUserName?: string;
 };
 
-export const User: FC<TUser> = observer((props) => {
+export const User = observer(function User(props: TUser) {
   const { activity, customUserName } = props;
   // store hooks
   const { getUserDetails } = useMember();
@@ -24,11 +24,11 @@ export const User: FC<TUser> = observer((props) => {
   return (
     <>
       {customUserName || actorDetail?.display_name.includes("-intake") ? (
-        <span className="text-custom-text-100 font-medium">{customUserName || "Plane"}</span>
+        <span className="text-primary font-medium">{customUserName || "Plane"}</span>
       ) : (
         <Link
           href={`/${workspaceDetail?.slug}/profile/${actorDetail?.id}`}
-          className="hover:underline text-custom-text-100 font-medium"
+          className="hover:underline text-primary font-medium"
         >
           {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 3d8d94cf82..9ea7233330 100644
--- a/apps/web/core/components/common/applied-filters/date.tsx
+++ b/apps/web/core/components/common/applied-filters/date.tsx
@@ -11,7 +11,7 @@ type Props = {
   values: string[];
 };
 
-export const AppliedDateFilters: React.FC<Props> = observer((props) => {
+export const AppliedDateFilters = observer(function AppliedDateFilters(props: Props) {
   const { editable, handleRemove, values } = props;
 
   const getDateLabel = (value: string): string => {
@@ -36,12 +36,12 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
   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 py-1 px-1.5 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 a1823132f5..161103dac1 100644
--- a/apps/web/core/components/common/applied-filters/members.tsx
+++ b/apps/web/core/components/common/applied-filters/members.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { CloseIcon } from "@plane/propel/icons";
 // plane ui
@@ -15,7 +13,7 @@ type Props = {
   editable: boolean | undefined;
 };
 
-export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
+export const AppliedMembersFilters = observer(function AppliedMembersFilters(props: Props) {
   const { handleRemove, values, editable } = props;
   // store hooks
   const {
@@ -30,7 +28,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
         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 py-1 px-1.5 text-11">
             <Avatar
               name={memberDetails.display_name}
               src={getFileURL(memberDetails.avatar_url)}
@@ -41,7 +39,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((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(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 25ee4ee1c7..cff11e7626 100644
--- a/apps/web/core/components/common/breadcrumb-link.tsx
+++ b/apps/web/core/components/common/breadcrumb-link.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { ReactNode, FC } from "react";
 import React, { useMemo } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -15,19 +12,25 @@ type Props = {
   isLast?: boolean;
 };
 
-const IconWrapper = React.memo(({ icon }: { icon: React.ReactNode }) => (
-  <div className="flex size-4 items-center justify-center overflow-hidden !text-[1rem]">{icon}</div>
-));
+const IconWrapper = React.memo(function IconWrapper({ icon }: { icon: React.ReactNode }) {
+  return <div className="flex size-4 items-center justify-center overflow-hidden !text-16">{icon}</div>;
+});
 
 IconWrapper.displayName = "IconWrapper";
 
-const LabelWrapper = React.memo(({ label }: { label: ReactNode }) => (
-  <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate">{label}</div>
-));
+const LabelWrapper = React.memo(function LabelWrapper({ label }: { label: React.ReactNode }) {
+  return <div className="relative line-clamp-1 block max-w-[150px] overflow-hidden truncate text-primary">{label}</div>;
+});
 
 LabelWrapper.displayName = "LabelWrapper";
 
-const BreadcrumbContent = React.memo(({ icon, label }: { icon?: React.ReactNode; label?: ReactNode }) => {
+const BreadcrumbContent = React.memo(function BreadcrumbContent({
+  icon,
+  label,
+}: {
+  icon?: React.ReactNode;
+  label?: React.ReactNode;
+}) {
   if (!icon && !label) return null;
 
   return (
@@ -40,21 +43,24 @@ const BreadcrumbContent = React.memo(({ icon, label }: { icon?: React.ReactNode;
 
 BreadcrumbContent.displayName = "BreadcrumbContent";
 
-const ItemWrapper = React.memo(({ children, ...props }: React.ComponentProps<typeof Breadcrumbs.ItemWrapper>) => (
-  <Breadcrumbs.ItemWrapper {...props}>{children}</Breadcrumbs.ItemWrapper>
-));
+const ItemWrapper = React.memo(function ItemWrapper({
+  children,
+  ...props
+}: React.ComponentProps<typeof Breadcrumbs.ItemWrapper>) {
+  return <Breadcrumbs.ItemWrapper {...props}>{children}</Breadcrumbs.ItemWrapper>;
+});
 
 ItemWrapper.displayName = "ItemWrapper";
 
-export const BreadcrumbLink: FC<Props> = observer((props) => {
+export const BreadcrumbLink = observer(function BreadcrumbLink(props: Props) {
   const { href, label, icon, disableTooltip = false, isLast = false } = props;
   const { isMobile } = usePlatformOS();
 
   const itemWrapperProps = useMemo(
-    () => ({
+    (): Omit<React.ComponentProps<typeof ItemWrapper>, "children"> => ({
       label: label?.toString(),
       disableTooltip: isMobile || disableTooltip,
-      type: (href && href !== "" ? "link" : "text") as "link" | "text",
+      type: href && href !== "" ? "link" : "text",
       isLast,
     }),
     [href, label, isMobile, disableTooltip, isLast]
@@ -72,5 +78,3 @@ export const BreadcrumbLink: FC<Props> = observer((props) => {
 
   return <ItemWrapper {...itemWrapperProps}>{content}</ItemWrapper>;
 });
-
-BreadcrumbLink.displayName = "BreadcrumbLink";
diff --git a/apps/web/core/components/common/count-chip.tsx b/apps/web/core/components/common/count-chip.tsx
index ff15e5011d..255fe4e7e2 100644
--- a/apps/web/core/components/common/count-chip.tsx
+++ b/apps/web/core/components/common/count-chip.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 //
 import { cn } from "@plane/utils";
@@ -9,17 +7,17 @@ type TCountChip = {
   className?: string;
 };
 
-export const CountChip: FC<TCountChip> = (props) => {
+export function CountChip(props: TCountChip) {
   const { count, className = "" } = props;
 
   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 justify-center items-center px-2.5 py-0.5 flex-shrink-0 bg-accent-primary/20 text-accent-primary text-caption-sm-semibold rounded-xl",
         className
       )}
     >
       {count}
     </div>
   );
-};
+}
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 0000000000..d0b410bfc3
--- /dev/null
+++ b/apps/web/core/components/common/cover-image.tsx
@@ -0,0 +1,44 @@
+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("bg-layer-2 animate-pulse", 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 64a7ba7cbc..796aa7fbca 100644
--- a/apps/web/core/components/common/empty-state.tsx
+++ b/apps/web/core/components/common/empty-state.tsx
@@ -1,4 +1,3 @@
-"use client";
 import React from "react";
 
 // ui
@@ -17,32 +16,27 @@ type Props = {
   disabled?: boolean;
 };
 
-export const EmptyState: React.FC<Props> = ({
-  title,
-  description,
-  image,
-  primaryButton,
-  secondaryButton,
-  disabled = false,
-}) => (
-  <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>}
-      <div className="flex items-center gap-4">
-        {primaryButton && (
-          <Button
-            variant="primary"
-            prependIcon={primaryButton.icon}
-            onClick={primaryButton.onClick}
-            disabled={disabled}
-          >
-            {primaryButton.text}
-          </Button>
-        )}
-        {secondaryButton}
+export function EmptyState({ title, description, image, primaryButton, secondaryButton, disabled = false }: Props) {
+  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-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
+              variant="primary"
+              prependIcon={primaryButton.icon}
+              onClick={primaryButton.onClick}
+              disabled={disabled}
+            >
+              {primaryButton.text}
+            </Button>
+          )}
+          {secondaryButton}
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+}
diff --git a/apps/web/core/components/common/filters/created-at.tsx b/apps/web/core/components/common/filters/created-at.tsx
index 77bd3efbda..23082626fa 100644
--- a/apps/web/core/components/common/filters/created-at.tsx
+++ b/apps/web/core/components/common/filters/created-at.tsx
@@ -13,7 +13,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterCreatedDate: React.FC<Props> = observer((props) => {
+export const FilterCreatedDate = observer(function FilterCreatedDate(props: Props) {
   const { appliedFilters, handleUpdate, searchQuery } = props;
 
   const [previewEnabled, setPreviewEnabled] = useState(true);
@@ -67,7 +67,7 @@ export const FilterCreatedDate: React.FC<Props> = observer((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 italic text-placeholder">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 bd39056c80..c3ba0eaea7 100644
--- a/apps/web/core/components/common/filters/created-by.tsx
+++ b/apps/web/core/components/common/filters/created-by.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -20,7 +18,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterCreatedBy: React.FC<Props> = observer((props: Props) => {
+export const FilterCreatedBy = observer(function FilterCreatedBy(props: Props) {
   const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
   // states
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -87,7 +85,7 @@ export const FilterCreatedBy: React.FC<Props> = observer((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"}
@@ -95,7 +93,7 @@ export const FilterCreatedBy: React.FC<Props> = observer((props: Props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 italic text-placeholder">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 3f9eac4ea2..33dfc508ba 100644
--- a/apps/web/core/components/common/latest-feature-block.tsx
+++ b/apps/web/core/components/common/latest-feature-block.tsx
@@ -5,35 +5,33 @@ import { Lightbulb } from "lucide-react";
 // images
 import latestFeatures from "@/app/assets/onboarding/onboarding-pages.webp?url";
 
-export const LatestFeatureBlock = () => {
+export function LatestFeatureBlock() {
   const { resolvedTheme } = useTheme();
 
   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 0000000000..33b4d58a9b
--- /dev/null
+++ b/apps/web/core/components/common/layout/sidebar/property-list-item.tsx
@@ -0,0 +1,25 @@
+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 shrink-0 items-center gap-1.5 w-30 text-body-xs-regular text-tertiary h-7.5">
+        <Icon className="size-4 shrink-0" />
+        <span>{label}</span>
+        {appendElement}
+      </div>
+      <div className={cn("grow flex items-center flex-wrap 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 5a5393f4d1..0d08b77e59 100644
--- a/apps/web/core/components/common/logo-spinner.tsx
+++ b/apps/web/core/components/common/logo-spinner.tsx
@@ -3,7 +3,7 @@ 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";
 
-export const LogoSpinner = () => {
+export function LogoSpinner() {
   const { resolvedTheme } = useTheme();
 
   const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
@@ -13,4 +13,4 @@ export const LogoSpinner = () => {
       <img src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11 object-contain" />
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/common/new-empty-state.tsx b/apps/web/core/components/common/new-empty-state.tsx
index be7cbe9c71..2445a46c11 100644
--- a/apps/web/core/components/common/new-empty-state.tsx
+++ b/apps/web/core/components/common/new-empty-state.tsx
@@ -1,4 +1,3 @@
-"use client";
 import React, { useState } from "react";
 
 // ui
@@ -22,14 +21,7 @@ type Props = {
   disabled?: boolean;
 };
 
-export const NewEmptyState: React.FC<Props> = ({
-  title,
-  description,
-  image,
-  primaryButton,
-  disabled = false,
-  comicBox,
-}) => {
+export function NewEmptyState({ title, description, image, primaryButton, disabled = false, comicBox }: Props) {
   const [isHovered, setIsHovered] = useState(false);
 
   const handleMouseEnter = () => {
@@ -42,9 +34,9 @@ export const NewEmptyState: React.FC<Props> = ({
   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="m-5 flex max-w-6xl flex-col gap-5 rounded-xl border border-subtle px-10 py-7 shadow-sm 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"} />
           </div>
@@ -53,7 +45,7 @@ export const NewEmptyState: React.FC<Props> = ({
             {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}
@@ -81,25 +73,25 @@ export const NewEmptyState: React.FC<Props> = ({
                     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-b-[11px] border-r-[11px] border-t-[11px] border-subtle border-y-transparent">
+                    <div className="absolute right-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-r-[10px] border-t-[10px] border-surface-1 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="relative mt-5 h-0 w-0 border-b-[11px] border-l-[11px] border-t-[11px] border-subtle border-y-transparent">
+                    <div className="absolute left-[-12px] top-[-10px] h-0 w-0 border-b-[10px] border-l-[10px] border-t-[10px] border-surface-1 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>
@@ -109,4 +101,4 @@ export const NewEmptyState: React.FC<Props> = ({
       </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 bb61dc62bb..264938d8de 100644
--- a/apps/web/core/components/common/page-access-icon.tsx
+++ b/apps/web/core/components/common/page-access-icon.tsx
@@ -2,14 +2,16 @@ import { ArchiveIcon, Earth, Lock } from "lucide-react";
 import { EPageAccess } from "@plane/constants";
 import type { TPage } from "@plane/types";
 
-export const PageAccessIcon = (page: TPage) => (
-  <div>
-    {page.archived_at ? (
-      <ArchiveIcon className="h-2.5 w-2.5 text-custom-text-300" />
-    ) : page.access === EPageAccess.PUBLIC ? (
-      <Earth className="h-2.5 w-2.5 text-custom-text-300" />
-    ) : (
-      <Lock className="h-2.5 w-2.5 text-custom-text-300" />
-    )}
-  </div>
-);
+export function PageAccessIcon(page: TPage) {
+  return (
+    <div>
+      {page.archived_at ? (
+        <ArchiveIcon className="h-2.5 w-2.5 text-tertiary" />
+      ) : page.access === EPageAccess.PUBLIC ? (
+        <Earth className="h-2.5 w-2.5 text-tertiary" />
+      ) : (
+        <Lock 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 45f3a698c5..21fa05aed2 100644
--- a/apps/web/core/components/common/pro-icon.tsx
+++ b/apps/web/core/components/common/pro-icon.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { Crown } from "lucide-react";
 // helpers
@@ -9,8 +7,8 @@ type TProIcon = {
   className?: string;
 };
 
-export const ProIcon: FC<TProIcon> = (props) => {
+export function ProIcon(props: TProIcon) {
   const { className } = props;
 
   return <Crown className={cn("inline-block h-3.5 w-3.5 text-amber-400", 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 0000000000..52e6bfbd30
--- /dev/null
+++ b/apps/web/core/components/common/quick-actions-factory.tsx
@@ -0,0 +1,82 @@
+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 0000000000..eadb1a7062
--- /dev/null
+++ b/apps/web/core/components/common/quick-actions-helper.tsx
@@ -0,0 +1,145 @@
+// 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 0e9375da61..291cb3a8cd 100644
--- a/apps/web/core/components/common/switcher-label.tsx
+++ b/apps/web/core/components/common/switcher-label.tsx
@@ -12,13 +12,7 @@ type TSwitcherIconProps = {
   type?: "lucide" | "material";
 };
 
-export const SwitcherIcon: FC<TSwitcherIconProps> = ({
-  logo_props,
-  logo_url,
-  LabelIcon,
-  size = 12,
-  type = "lucide",
-}) => {
+export function SwitcherIcon({ logo_props, logo_url, LabelIcon, size = 12, type = "lucide" }: TSwitcherIconProps) {
   if (logo_props?.in_use) {
     return <Logo logo={logo_props} size={size} type={type} />;
   }
@@ -28,13 +22,13 @@ export const SwitcherIcon: FC<TSwitcherIconProps> = ({
       <img
         src={getFileURL(logo_url)}
         alt="logo"
-        className="rounded-sm object-cover"
+        className="rounded-xs object-cover"
         style={{ height: size, width: size }}
       />
     );
   }
   return <LabelIcon height={size} width={size} />;
-};
+}
 
 type TSwitcherLabelProps = {
   logo_props?: TLogoProps;
@@ -44,12 +38,12 @@ type TSwitcherLabelProps = {
   type?: "lucide" | "material";
 };
 
-export const SwitcherLabel: FC<TSwitcherLabelProps> = (props) => {
+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 d50a565e5d..e898578d97 100644
--- a/apps/web/core/components/core/activity.tsx
+++ b/apps/web/core/components/core/activity.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -37,7 +35,7 @@ import { useLabel } from "@/hooks/store/use-label";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // types
 
-export const IssueLink = ({ activity }: { activity: IIssueActivity }) => {
+export function IssueLink({ activity }: { activity: IIssueActivity }) {
   // router params
   const { workspaceSlug } = useParams();
   const { isMobile } = usePlatformOS();
@@ -61,21 +59,21 @@ export const 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 text-primary whitespace-nowrap">
           {" a work item"}{" "}
         </span>
       )}
     </Tooltip>
   );
-};
+}
 
-const UserLink = ({ activity }: { activity: IIssueActivity }) => {
+function UserLink({ activity }: { activity: IIssueActivity }) {
   // router params
   const { workspaceSlug } = useParams();
 
@@ -86,14 +84,14 @@ const 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>
   );
-};
+}
 
-const LabelPill = observer(({ labelId, workspaceSlug }: { labelId: string; workspaceSlug: string }) => {
+const LabelPill = observer(function LabelPill({ labelId, workspaceSlug }: { labelId: string; workspaceSlug: string }) {
   // store hooks
   const { workspaceLabels, fetchWorkspaceLabels } = useLabel();
 
@@ -179,7 +177,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) => {
@@ -196,7 +194,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) => {
@@ -225,7 +223,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) => (
@@ -239,7 +237,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) => {
@@ -268,7 +266,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) => {
@@ -291,7 +289,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) => {
@@ -314,7 +312,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) => {
@@ -322,11 +320,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="flex-shrink font-medium text-primary break-all line-clamp-1">{activity.new_value}</span>
             </span>
             {showIssue && (
               <span className="">
@@ -340,11 +336,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="flex-shrink font-medium text-primary break-all line-clamp-1">{activity.old_value}</span>
             </span>
             {showIssue && (
               <span>
@@ -355,7 +349,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) => {
@@ -367,7 +361,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>
@@ -387,7 +381,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>
@@ -407,7 +401,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>
@@ -420,7 +414,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) => {
@@ -435,7 +429,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>
@@ -449,7 +443,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>
@@ -463,14 +457,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) => {
@@ -482,7 +476,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>
@@ -496,7 +490,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>
@@ -510,14 +504,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) => (
@@ -531,15 +525,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 text-primary whitespace-nowrap">{activity.old_value}</span>
             {showIssue && (
               <>
                 {" "}
@@ -551,8 +544,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 text-primary whitespace-nowrap">{activity.new_value}</span>
             {showIssue && (
               <>
                 {" "}
@@ -562,13 +554,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 && (
@@ -579,7 +571,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) => {
@@ -587,18 +579,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 text-primary whitespace-nowrap">{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 text-primary whitespace-nowrap">{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) => {
@@ -606,18 +598,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 text-primary whitespace-nowrap">{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 text-primary whitespace-nowrap">{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) => {
@@ -625,18 +617,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 text-primary whitespace-nowrap">{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 text-primary whitespace-nowrap">{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) => {
@@ -644,23 +636,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 text-primary whitespace-nowrap">{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 text-primary whitespace-nowrap">{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 text-primary break-all">{activity.new_value}</span>
         {showIssue && (
           <>
             {" "}
@@ -669,7 +661,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) => {
@@ -689,7 +681,7 @@ const activityDetails: {
         return (
           <>
             set the start date to{" "}
-            <span className="font-medium text-custom-text-100 whitespace-nowrap">
+            <span className="font-medium text-primary whitespace-nowrap">
               {renderFormattedDate(activity.new_value)}
             </span>
             {showIssue && (
@@ -701,7 +693,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) => {
@@ -721,7 +713,7 @@ const activityDetails: {
         return (
           <>
             set the due date to{" "}
-            <span className="font-medium text-custom-text-100 whitespace-nowrap">
+            <span className="font-medium text-primary whitespace-nowrap">
               {renderFormattedDate(activity.new_value)}
             </span>
             {showIssue && (
@@ -732,7 +724,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) => (
@@ -747,20 +739,20 @@ 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" />,
   },
 };
 
-export const ActivityIcon = ({ activity }: { activity: IIssueActivity }) => (
-  <>{activityDetails[activity.field as keyof typeof activityDetails]?.icon}</>
-);
+export function ActivityIcon({ activity }: { activity: IIssueActivity }) {
+  return <>{activityDetails[activity.field as keyof typeof activityDetails]?.icon}</>;
+}
 
 type ActivityMessageProps = {
   activity: IIssueActivity;
   showIssue?: boolean;
 };
 
-export const ActivityMessage = ({ activity, showIssue = false }: ActivityMessageProps) => {
+export function ActivityMessage({ activity, showIssue = false }: ActivityMessageProps) {
   // router params
   const { workspaceSlug } = useParams();
   const activityField = activity.field ?? "issue";
@@ -774,4 +766,4 @@ export const ActivityMessage = ({ activity, showIssue = false }: ActivityMessage
       )}
     </>
   );
-};
+}
diff --git a/apps/web/core/components/core/app-header.tsx b/apps/web/core/components/core/app-header.tsx
index f5f7efab4f..f13fcd134c 100644
--- a/apps/web/core/components/core/app-header.tsx
+++ b/apps/web/core/components/core/app-header.tsx
@@ -1,23 +1,24 @@
-"use client";
-
 import type { ReactNode } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { Row } from "@plane/ui";
 // components
+import { cn } from "@plane/utils";
 import { ExtendedAppHeader } from "@/plane-web/components/common/extended-app-header";
 
 export interface AppHeaderProps {
   header: ReactNode;
   mobileHeader?: ReactNode;
+  className?: string;
+  rowClassName?: string;
 }
 
-export const AppHeader = observer((props: AppHeaderProps) => {
-  const { header, mobileHeader } = props;
+export const AppHeader = observer(function AppHeader(props: AppHeaderProps) {
+  const { header, mobileHeader, className, rowClassName } = props;
 
   return (
-    <div className="z-[18]">
-      <Row className="h-header flex gap-2 w-full items-center border-b border-custom-border-200 bg-custom-sidebar-background-100">
+    <div className={cn("z-[18]", className)}>
+      <Row className={cn("h-11 flex gap-2 w-full items-center 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 1bbd5896aa..cb60eaaee5 100644
--- a/apps/web/core/components/core/content-overflow-HOC.tsx
+++ b/apps/web/core/components/core/content-overflow-HOC.tsx
@@ -14,11 +14,11 @@ interface IContentOverflowWrapper {
   customButton?: ReactNode;
 }
 
-export const ContentOverflowWrapper = observer((props: IContentOverflowWrapper) => {
+export const ContentOverflowWrapper = observer(function ContentOverflowWrapper(props: IContentOverflowWrapper) {
   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,
@@ -77,19 +77,20 @@ export const ContentOverflowWrapper = observer((props: IContentOverflowWrapper)
       resizeObserver.disconnect();
       mutationObserver.disconnect();
     };
-  }, [contentRef?.current]);
+  }, []);
 
   useEffect(() => {
-    if (!containerRef.current) return;
+    const container = containerRef.current;
+    if (!container) return;
 
     const handleTransitionEnd = () => {
       setIsTransitioning(false);
     };
 
-    containerRef.current.addEventListener("transitionend", handleTransitionEnd);
+    container.addEventListener("transitionend", handleTransitionEnd);
 
     return () => {
-      containerRef.current?.removeEventListener("transitionend", handleTransitionEnd);
+      container.removeEventListener("transitionend", handleTransitionEnd);
     };
   }, []);
 
@@ -127,7 +128,7 @@ export const ContentOverflowWrapper = observer((props: IContentOverflowWrapper)
         <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`,
+            `bg-gradient-to-t from-surface-1 to-transparent flex flex-col items-center justify-end`,
             "text-center",
             {
               "absolute h-[100px] opacity-100": !showAll,
@@ -141,7 +142,7 @@ export const ContentOverflowWrapper = observer((props: IContentOverflowWrapper)
           {customButton || (
             <button
               className={cn(
-                "gap-1 w-full text-custom-primary-100 text-sm font-medium transition-opacity duration-300",
+                "gap-1 w-full text-accent-primary text-13 font-medium 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 6aa98c9db0..0d0d796be0 100644
--- a/apps/web/core/components/core/content-wrapper.tsx
+++ b/apps/web/core/components/core/content-wrapper.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { ReactNode } from "react";
 // helpers
 import { cn } from "@plane/utils";
@@ -9,8 +7,10 @@ export interface ContentWrapperProps {
   children: ReactNode;
 }
 
-export const ContentWrapper = ({ className, children }: ContentWrapperProps) => (
-  <div className="h-full w-full overflow-hidden">
-    <div className={cn("relative h-full w-full overflow-x-hidden overflow-y-scroll", className)}>{children}</div>
-  </div>
-);
+export function ContentWrapper({ className, children }: ContentWrapperProps) {
+  return (
+    <div className="h-full w-full overflow-hidden">
+      <div className={cn("relative h-full w-full overflow-x-hidden overflow-y-scroll", className)}>{children}</div>
+    </div>
+  );
+}
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 e94e36cf78..a4513c098c 100644
--- a/apps/web/core/components/core/description-versions/dropdown-item.tsx
+++ b/apps/web/core/components/core/description-versions/dropdown-item.tsx
@@ -12,7 +12,7 @@ type Props = {
   version: TDescriptionVersion;
 };
 
-export const DescriptionVersionsDropdownItem: React.FC<Props> = observer((props) => {
+export const DescriptionVersionsDropdownItem = observer(function DescriptionVersionsDropdownItem(props: Props) {
   const { onClick, version } = props;
   // store hooks
   const { getUserDetails } = useMember();
@@ -30,7 +30,7 @@ export const DescriptionVersionsDropdownItem: React.FC<Props> = observer((props)
           src={getFileURL(versionCreator?.avatar_url ?? "")}
         />
       </span>
-      <p className="text-xs text-custom-text-200 flex items-center gap-1.5">
+      <p className="text-11 text-secondary flex items-center gap-1.5">
         <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 dc54e47bee..d39fc49e38 100644
--- a/apps/web/core/components/core/description-versions/dropdown.tsx
+++ b/apps/web/core/components/core/description-versions/dropdown.tsx
@@ -18,7 +18,7 @@ type Props = {
   versions: TDescriptionVersion[] | undefined;
 };
 
-export const DescriptionVersionsDropdown: React.FC<Props> = observer((props) => {
+export const DescriptionVersionsDropdown = observer(function DescriptionVersionsDropdown(props: Props) {
   const { disabled, entityInformation, onVersionClick, versions } = props;
   // store hooks
   const { getUserDetails } = useMember();
@@ -34,11 +34,11 @@ export const DescriptionVersionsDropdown: React.FC<Props> = observer((props) =>
   return (
     <CustomMenu
       label={
-        <div className="flex items-center gap-1 text-custom-text-300">
+        <div className="flex items-center gap-1 text-tertiary">
           <span className="flex-shrink-0 size-4 grid 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 +52,7 @@ export const DescriptionVersionsDropdown: React.FC<Props> = observer((props) =>
       disabled={disabled}
       closeOnSelect
     >
-      <p className="text-xs text-custom-text-300 font-medium mb-1">{t("description_versions.previously_edited_by")}</p>
+      <p className="text-11 text-tertiary font-medium mb-1">{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/modal.tsx b/apps/web/core/components/core/description-versions/modal.tsx
index 15e2914942..713e056475 100644
--- a/apps/web/core/components/core/description-versions/modal.tsx
+++ b/apps/web/core/components/core/description-versions/modal.tsx
@@ -4,18 +4,19 @@ 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 { Button } from "@plane/propel/button";
 import { 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;
@@ -31,7 +32,7 @@ type Props = {
   workspaceSlug: string;
 };
 
-export const DescriptionVersionsModal: React.FC<Props> = observer((props) => {
+export const DescriptionVersionsModal = observer(function DescriptionVersionsModal(props: Props) {
   const {
     activeVersionDescription,
     activeVersionDetails,
@@ -59,13 +60,12 @@ export const DescriptionVersionsModal: React.FC<Props> = observer((props) => {
 
   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 +75,7 @@ export const DescriptionVersionsModal: React.FC<Props> = observer((props) => {
       <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-shrink-0 flex items-center gap-2 text-13">
             <p className="flex items-center gap-1">
               {t("description_versions.edited_by")}
               <span className="flex-shrink-0">
@@ -86,7 +86,7 @@ export const DescriptionVersionsModal: React.FC<Props> = observer((props) => {
                 />
               </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>
@@ -94,13 +94,10 @@ export const DescriptionVersionsModal: React.FC<Props> = observer((props) => {
             <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("size-6 text-secondary grid place-items-center rounded-sm outline-none transition-colors", {
+                "hover:bg-layer-1": !isPrevDisabled,
+                "opacity-50": isPrevDisabled,
+              })}
               disabled={isPrevDisabled}
             >
               <ChevronLeftIcon className="size-4" />
@@ -108,13 +105,10 @@ export const DescriptionVersionsModal: React.FC<Props> = observer((props) => {
             <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("size-6 text-secondary grid place-items-center rounded-sm outline-none transition-colors", {
+                "hover:bg-layer-1": !isNextDisabled,
+                "opacity-50": isNextDisabled,
+              })}
               disabled={isNextDisabled}
             >
               <ChevronRightIcon className="size-4" />
@@ -156,28 +150,18 @@ export const DescriptionVersionsModal: React.FC<Props> = observer((props) => {
         </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 pt-4 border-t-[0.5px] border-subtle">
           <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={Copy} />
           </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 6813508279..e465293512 100644
--- a/apps/web/core/components/core/description-versions/root.tsx
+++ b/apps/web/core/components/core/description-versions/root.tsx
@@ -27,7 +27,7 @@ type Props = {
   workspaceSlug: string;
 };
 
-export const DescriptionVersionsRoot: React.FC<Props> = observer((props) => {
+export const DescriptionVersionsRoot = observer(function DescriptionVersionsRoot(props: Props) {
   const { className, entityInformation, fetchHandlers, handleRestore, projectId, workspaceSlug } = props;
   // states
   const [isModalOpen, setIsModalOpen] = useState(false);
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 32a4074141..545dd3b77e 100644
--- a/apps/web/core/components/core/filters/date-filter-modal.tsx
+++ b/apps/web/core/components/core/filters/date-filter-modal.tsx
@@ -1,13 +1,8 @@
-"use client";
-import { Fragment } from "react";
 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 = {
@@ -29,7 +24,7 @@ const defaultValues: TFormValues = {
   date2: new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()),
 };
 
-export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, onSelect }) => {
+export function DateFilterModal({ title, handleClose, isOpen, onSelect }: Props) {
   const { handleSubmit, watch, control } = useForm<TFormValues>({
     defaultValues,
   });
@@ -50,118 +45,89 @@ export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, o
   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 b3955d4eaf..44a838feba 100644
--- a/apps/web/core/components/core/filters/date-filter-select.tsx
+++ b/apps/web/core/components/core/filters/date-filter-select.tsx
@@ -1,4 +1,3 @@
-"use client";
 import React from "react";
 import { CalendarDays } from "lucide-react";
 // ui
@@ -35,26 +34,28 @@ const dueDateRange: DueDate[] = [
   },
 ];
 
-export const DateFilterSelect: React.FC<Props> = ({ title, value, onChange }) => (
-  <CustomSelect
-    value={value}
-    label={
-      <div className="flex items-center gap-2 text-xs">
-        {dueDateRange.find((item) => item.value === value)?.icon}
-        <span>
-          {title} {dueDateRange.find((item) => item.value === value)?.name}
-        </span>
-      </div>
-    }
-    onChange={onChange}
-  >
-    {dueDateRange.map((option, index) => (
-      <CustomSelect.Option key={index} value={option.value}>
-        <div className="flex items-center gap-2">
-          <span>{option.icon}</span>
-          {title} {option.name}
+export function DateFilterSelect({ title, value, onChange }: Props) {
+  return (
+    <CustomSelect
+      value={value}
+      label={
+        <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}
+          </span>
         </div>
-      </CustomSelect.Option>
-    ))}
-  </CustomSelect>
-);
+      }
+      onChange={onChange}
+    >
+      {dueDateRange.map((option, index) => (
+        <CustomSelect.Option key={index} value={option.value}>
+          <div className="flex items-center gap-2">
+            <span>{option.icon}</span>
+            {title} {option.name}
+          </div>
+        </CustomSelect.Option>
+      ))}
+    </CustomSelect>
+  );
+}
diff --git a/apps/web/core/components/core/image-picker-popover.tsx b/apps/web/core/components/core/image-picker-popover.tsx
index 2c5f8a820d..e4f3dedf09 100644
--- a/apps/web/core/components/core/image-picker-popover.tsx
+++ b/apps/web/core/components/core/image-picker-popover.tsx
@@ -1,6 +1,4 @@
-"use client";
-
-import React, { useState, useRef, useCallback } from "react";
+import React, { useState, useRef, useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { useDropzone } from "react-dropzone";
@@ -11,31 +9,23 @@ import { Tab, 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 { 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";
 // helpers
-import { getFileURL } from "@plane/utils";
+import { STATIC_COVER_IMAGES, getCoverImageDisplayURL } from "@/helpers/cover-image.helper";
 // hooks
+import { useInstance } from "@/hooks/store/use-instance";
 import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
 // services
 import { FileService } from "@/services/file.service";
 
-const tabOptions = [
-  {
-    key: "unsplash",
-    title: "Unsplash",
-  },
-  {
-    key: "images",
-    title: "Images",
-  },
-  {
-    key: "upload",
-    title: "Upload",
-  },
-];
+type TTabOption = {
+  key: string;
+  title: string;
+  isEnabled: boolean;
+};
 
 type Props = {
   label: string | React.ReactNode;
@@ -51,7 +41,7 @@ type Props = {
 // services
 const fileService = new FileService();
 
-export const ImagePickerPopover: React.FC<Props> = observer((props) => {
+export const ImagePickerPopover = observer(function ImagePickerPopover(props: Props) {
   const { label, value, control, onChange, disabled = false, tabIndex, isProfileCover = false, projectId } = props;
   // states
   const [image, setImage] = useState<File | null>(null);
@@ -65,6 +55,30 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
   const ref = useRef<HTMLDivElement>(null);
   // router params
   const { workspaceSlug } = useParams();
+  // store hooks
+  const { config } = useInstance();
+  // derived values
+  const hasUnsplashConfigured = config?.has_unsplash_configured || false;
+  const tabOptions: TTabOption[] = useMemo(
+    () => [
+      {
+        key: "unsplash",
+        title: "Unsplash",
+        isEnabled: hasUnsplashConfigured,
+      },
+      {
+        key: "images",
+        title: "Images",
+        isEnabled: true,
+      },
+      {
+        key: "upload",
+        title: "Upload",
+        isEnabled: true,
+      },
+    ],
+    [hasUnsplashConfigured]
+  );
 
   const { data: unsplashImages, error: unsplashError } = useSWR(
     `UNSPLASH_IMAGES_${searchParams}`,
@@ -75,11 +89,6 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
     }
   );
 
-  const { data: projectCoverImages } = useSWR(`PROJECT_COVER_IMAGES`, () => fileService.getProjectCoverImages(), {
-    revalidateOnFocus: false,
-    revalidateOnReconnect: false,
-  });
-
   const imagePickerRef = useRef<HTMLDivElement>(null);
 
   const onDrop = useCallback((acceptedFiles: File[]) => {
@@ -92,6 +101,11 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
     maxSize: MAX_FILE_SIZE,
   });
 
+  const handleStaticImageSelect = (imageUrl: string) => {
+    onChange(imageUrl);
+    setIsOpen(false);
+  };
+
   const handleSubmit = async () => {
     if (!image) return;
     setIsImageUploading(true);
@@ -166,177 +180,148 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
 
   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-sm border border-strong bg-surface-1 p-3 shadow-2xl md:h-[28rem] md:w-[36rem]"
           >
             <Tab.Group>
-              <Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1">
-                {tabOptions.map((tab) => {
-                  if (!unsplashImages && unsplashError && tab.key === "unsplash") return null;
-                  if (projectCoverImages && projectCoverImages.length === 0 && tab.key === "images") return null;
-
-                  return (
-                    <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"
-                        }`
-                      }
-                    >
-                      {tab.title}
-                    </Tab>
-                  );
-                })}
+              <Tab.List as="span" className="inline-block rounded-sm bg-layer-1 p-1">
+                {tabOptions.map((tab) => (
+                  <Tab
+                    key={tab.key}
+                    className={({ selected }) =>
+                      `rounded-sm px-4 py-1 text-center text-13 outline-none transition-colors ${
+                        selected ? "bg-accent-primary text-on-color" : "text-primary"
+                      }`
+                    }
+                  >
+                    {tab.title}
+                  </Tab>
+                ))}
               </Tab.List>
               <Tab.Panels className="vertical-scrollbar scrollbar-md h-full w-full flex-1 overflow-y-auto overflow-x-hidden">
-                {(unsplashImages || !unsplashError) && (
-                  <Tab.Panel className="mt-4 h-full w-full space-y-4">
-                    <div className="flex gap-x-2">
-                      <Controller
-                        control={control}
-                        name="search"
-                        render={({ field: { value, ref } }) => (
-                          <Input
-                            id="search"
-                            name="search"
-                            type="text"
-                            onKeyDown={(e) => {
-                              if (e.key === "Enter") {
-                                e.preventDefault();
-                                setSearchParams(formData.search);
-                              }
-                            }}
-                            value={value}
-                            onChange={(e) => setFormData({ ...formData, search: e.target.value })}
-                            ref={ref}
-                            placeholder="Search for images"
-                            className="w-full text-sm"
-                          />
-                        )}
-                      />
-                      <Button variant="primary" onClick={() => setSearchParams(formData.search)} size="sm">
-                        Search
-                      </Button>
-                    </div>
-                    {unsplashImages ? (
-                      unsplashImages.length > 0 ? (
-                        <div className="grid grid-cols-4 gap-4">
-                          {unsplashImages.map((image) => (
-                            <div
-                              key={image.id}
-                              className="relative col-span-2 aspect-video md:col-span-1"
-                              onClick={() => {
-                                setIsOpen(false);
-                                onChange(image.urls.regular);
+                <Tab.Panel className="mt-4 h-full w-full space-y-4">
+                  {(unsplashImages || !unsplashError) && (
+                    <>
+                      <div className="flex items-center gap-x-2">
+                        <Controller
+                          control={control}
+                          name="search"
+                          render={({ field: { value, ref } }) => (
+                            <Input
+                              id="search"
+                              name="search"
+                              type="text"
+                              onKeyDown={(e) => {
+                                if (e.key === "Enter") {
+                                  e.preventDefault();
+                                  setSearchParams(formData.search);
+                                }
                               }}
-                            >
-                              <img
-                                src={image.urls.small}
-                                alt={image.alt_description}
-                                className="absolute left-0 top-0 h-full w-full cursor-pointer rounded object-cover"
-                              />
-                            </div>
-                          ))}
-                        </div>
+                              value={value}
+                              onChange={(e) => setFormData({ ...formData, search: e.target.value })}
+                              ref={ref}
+                              placeholder="Search for images"
+                              className="w-full text-13"
+                            />
+                          )}
+                        />
+                        <Button variant="primary" size="xl" onClick={() => setSearchParams(formData.search)}>
+                          Search
+                        </Button>
+                      </div>
+                      {unsplashImages ? (
+                        unsplashImages.length > 0 ? (
+                          <div className="grid grid-cols-4 gap-4">
+                            {unsplashImages.map((image) => (
+                              <div
+                                key={image.id}
+                                className="relative col-span-2 aspect-video md:col-span-1"
+                                onClick={() => {
+                                  setIsOpen(false);
+                                  onChange(image.urls.regular);
+                                }}
+                              >
+                                <img
+                                  src={image.urls.small}
+                                  alt={image.alt_description}
+                                  className="absolute left-0 top-0 h-full w-full cursor-pointer rounded-sm object-cover"
+                                />
+                              </div>
+                            ))}
+                          </div>
+                        ) : (
+                          <p className="pt-7 text-center text-11 text-secondary">No images found.</p>
+                        )
                       ) : (
-                        <p className="pt-7 text-center text-xs text-custom-text-300">No images found.</p>
-                      )
-                    ) : (
-                      <Loader className="grid grid-cols-4 gap-4">
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                      </Loader>
-                    )}
-                  </Tab.Panel>
-                )}
-                {(!projectCoverImages || projectCoverImages.length !== 0) && (
-                  <Tab.Panel className="mt-4 h-full w-full space-y-4">
-                    {projectCoverImages ? (
-                      projectCoverImages.length > 0 ? (
-                        <div className="grid grid-cols-4 gap-4">
-                          {projectCoverImages.map((image, index) => (
-                            <div
-                              key={image}
-                              className="relative col-span-2 aspect-video md:col-span-1"
-                              onClick={() => {
-                                setIsOpen(false);
-                                onChange(image);
-                              }}
-                            >
-                              <img
-                                src={image}
-                                alt={`Default project cover image- ${index}`}
-                                className="absolute left-0 top-0 h-full w-full cursor-pointer rounded object-cover"
-                              />
-                            </div>
-                          ))}
-                        </div>
-                      ) : (
-                        <p className="pt-7 text-center text-xs text-custom-text-300">No images found.</p>
-                      )
-                    ) : (
-                      <Loader className="grid grid-cols-4 gap-4 pt-4">
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                        <Loader.Item height="80px" width="100%" />
-                      </Loader>
-                    )}
-                  </Tab.Panel>
-                )}
+                        <Loader className="grid grid-cols-4 gap-4">
+                          <Loader.Item height="80px" width="100%" />
+                          <Loader.Item height="80px" width="100%" />
+                          <Loader.Item height="80px" width="100%" />
+                          <Loader.Item height="80px" width="100%" />
+                          <Loader.Item height="80px" width="100%" />
+                          <Loader.Item height="80px" width="100%" />
+                          <Loader.Item height="80px" width="100%" />
+                          <Loader.Item height="80px" width="100%" />
+                        </Loader>
+                      )}
+                    </>
+                  )}
+                </Tab.Panel>
+                <Tab.Panel className="mt-4 h-full w-full space-y-4">
+                  <div className="grid grid-cols-4 gap-4">
+                    {Object.values(STATIC_COVER_IMAGES).map((imageUrl, index) => (
+                      <div
+                        key={imageUrl}
+                        className="relative col-span-2 aspect-video md:col-span-1"
+                        onClick={() => handleStaticImageSelect(imageUrl)}
+                      >
+                        <img
+                          src={imageUrl}
+                          alt={`Cover image ${index + 1}`}
+                          className="absolute left-0 top-0 h-full w-full cursor-pointer rounded-sm object-cover hover:opacity-80 transition-opacity"
+                        />
+                      </div>
+                    ))}
+                  </div>
+                </Tab.Panel>
                 <Tab.Panel className="mt-4 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:outline-none focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 ${
                           (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 right-0 top-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>
                         {image !== null || (value && value !== "") ? (
                           <>
                             <img
-                              src={image ? URL.createObjectURL(image) : value ? (getFileURL(value) ?? "") : ""}
+                              src={image ? URL.createObjectURL(image) : getCoverImageDisplayURL(value, "")}
                               alt="image"
                               className="rounded-lg h-full w-full 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>
@@ -346,18 +331,18 @@ export const ImagePickerPopover: React.FC<Props> = observer((props) => {
                       </div>
                     </div>
                     {fileRejections.length > 0 && (
-                      <p className="text-sm text-red-500">
+                      <p className="text-13 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>
                     )}
 
-                    <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);
diff --git a/apps/web/core/components/core/list/list-item.tsx b/apps/web/core/components/core/list/list-item.tsx
index f8c1717dc3..ce68d6fba0 100644
--- a/apps/web/core/components/core/list/list-item.tsx
+++ b/apps/web/core/components/core/list/list-item.tsx
@@ -1,5 +1,3 @@
-"use client";
-import type { FC } from "react";
 import React from "react";
 // ui
 import { Tooltip } from "@plane/propel/tooltip";
@@ -30,7 +28,7 @@ interface IListItemProps {
   rightElementClassName?: string;
 }
 
-export const ListItem: FC<IListItemProps> = (props) => {
+export function ListItem(props: IListItemProps) {
   const {
     id,
     title,
@@ -65,7 +63,7 @@ export const ListItem: FC<IListItemProps> = (props) => {
     <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 ",
+          "group min-h-[52px] flex w-full flex-col items-center justify-between gap-3 py-4 text-13 border-b border-subtle bg-layer-transparent hover:bg-layer-transparent-hover",
           { "xl:gap-5 xl:py-0 xl:flex-row": isSidebarOpen, "lg:gap-5 lg:py-0 lg:flex-row": !isSidebarOpen },
           className
         )}
@@ -83,7 +81,7 @@ export const ListItem: FC<IListItemProps> = (props) => {
             <div className={cn("flex items-center gap-4 truncate", leftElementClassName)}>
               {prependTitleElement && <span className="flex items-center flex-shrink-0">{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 && (
@@ -109,4 +107,4 @@ export const ListItem: FC<IListItemProps> = (props) => {
       </Row>
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/core/list/list-root.tsx b/apps/web/core/components/core/list/list-root.tsx
index f8ee3a5f83..391ca29648 100644
--- a/apps/web/core/components/core/list/list-root.tsx
+++ b/apps/web/core/components/core/list/list-root.tsx
@@ -6,7 +6,7 @@ interface IListContainer {
   children: React.ReactNode;
 }
 
-export const ListLayout: FC<IListContainer> = (props) => {
+export function ListLayout(props: IListContainer) {
   const { children } = props;
   return (
     <Row
@@ -16,4 +16,4 @@ export const ListLayout: FC<IListContainer> = (props) => {
       {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 8874c97b94..589959c623 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
@@ -10,7 +10,7 @@ interface Props {
   canDeleteIssueIds: boolean;
 }
 
-export const BulkDeleteIssuesModalItem: React.FC<Props> = observer((props: Props) => {
+export const BulkDeleteIssuesModalItem = observer(function BulkDeleteIssuesModalItem(props: Props) {
   const { issue, canDeleteIssueIds } = props;
 
   const color = issue.state__color;
@@ -22,7 +22,7 @@ export const BulkDeleteIssuesModalItem: React.FC<Props> = observer((props: Props
       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" : ""
+          active ? "bg-layer-1 text-primary" : ""
         }`
       }
     >
@@ -39,7 +39,7 @@ export const BulkDeleteIssuesModalItem: React.FC<Props> = observer((props: Props
           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 3a9420105b..96d5b075f7 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,20 +1,18 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
+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 { 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";
@@ -42,7 +40,7 @@ type Props = {
 
 const projectService = new ProjectService();
 
-export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
+export const BulkDeleteIssuesModal = observer(function BulkDeleteIssuesModal(props: Props) {
   const { isOpen, onClose } = props;
   // router params
   const { workspaceSlug, projectId } = useParams();
@@ -107,7 +105,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
 
     if (!Array.isArray(data.delete_issue_ids)) data.delete_issue_ids = [data.delete_issue_ids];
 
-    await removeBulkIssues(workspaceSlug as string, projectId as string, data.delete_issue_ids)
+    await removeBulkIssues(workspaceSlug, projectId, data.delete_issue_ids)
       .then(() => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
@@ -129,9 +127,9 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
     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="mb-2 mt-4 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}
@@ -152,78 +150,57 @@ export const BulkDeleteIssuesModal: React.FC<Props> = observer((props) => {
     );
 
   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">
+            <Search
+              className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-primary text-opacity-40"
+              aria-hidden="true"
+            />
+            <input
+              type="text"
+              className="h-12 w-full border-0 bg-transparent pl-11 pr-4 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
new file mode 100644
index 0000000000..46d79e3a55
--- /dev/null
+++ b/apps/web/core/components/core/modals/change-email-modal.tsx
@@ -0,0 +1,207 @@
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Input, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+import { cn } from "@plane/utils";
+// 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";
+import userService from "@/services/user.service";
+
+type Props = { isOpen: boolean; onClose: () => void };
+
+type TModalStep = "EMAIL" | "UNIQUE_CODE";
+type TUniqueCodeValuesForm = { email: string; code: string };
+
+const defaultValues: TUniqueCodeValuesForm = { email: "", code: "" };
+
+// service initialization
+const authService = new AuthService();
+
+export const ChangeEmailModal = observer(function ChangeEmailModal(props: Props) {
+  const { isOpen, onClose } = props;
+  // states
+  const [currentStep, setCurrentStep] = useState<TModalStep>("EMAIL");
+  // store hooks
+  const { signOut } = useUser();
+  const { t } = useTranslation();
+  const changeEmailT = (path: string) => t(`account_settings.profile.change_email_modal.${path}`);
+  // form info
+  const {
+    handleSubmit,
+    control,
+    setError,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<TUniqueCodeValuesForm>({ defaultValues });
+
+  const secondStep = currentStep === "UNIQUE_CODE";
+
+  const handleClose = () => {
+    reset({ ...defaultValues });
+    setCurrentStep("EMAIL");
+    onClose();
+  };
+
+  const handleSignOut = async () => {
+    await signOut().catch(() =>
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("sign_out.toast.error.title"),
+        message: t("sign_out.toast.error.message"),
+      })
+    );
+  };
+
+  const onSubmit = async (formData: TUniqueCodeValuesForm) => {
+    if (currentStep === "UNIQUE_CODE") {
+      // Step 2: Verify the code and update email
+      try {
+        await userService.verifyEmailCode({ email: formData.email, code: formData.code });
+
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: changeEmailT("toasts.success_title"),
+          message: changeEmailT("toasts.success_message"),
+        });
+
+        // Sign out the user after successful email update
+        await handleSignOut();
+        handleClose();
+      } catch (error: unknown) {
+        const errorMessage =
+          (error as { error?: string; message?: string })?.error ||
+          (error as { error?: string; message?: string })?.message ||
+          changeEmailT("form.code.errors.invalid");
+        setError("code", { type: "custom", message: errorMessage });
+      }
+      return;
+    }
+
+    // Step 1: Check email and generate verification code
+    try {
+      // Get CSRF token
+      const csrfToken = await authService.requestCSRFToken().then((data) => data?.csrf_token);
+      if (!csrfToken) throw new Error("CSRF token not found");
+
+      // Check if email is available
+      const emailCheckResponse = await userService.checkEmail(csrfToken, formData.email);
+
+      // Check if email already exists
+      if (emailCheckResponse?.existing === true) {
+        setError("email", { type: "custom", message: changeEmailT("form.email.errors.exists") });
+        return;
+      }
+
+      // Generate verification code and send to new email
+      await userService.generateEmailCode({ email: formData.email });
+
+      // Move to verification code step
+      setCurrentStep("UNIQUE_CODE");
+    } catch (error: unknown) {
+      // Extract error code and message from backend response
+      const err = error as { error_code?: number | string; error_message?: string };
+      const errorCode = err?.error_code?.toString();
+
+      // Use authErrorHandler to get user-friendly error message
+      const errorInfo = errorCode ? authErrorHandler(errorCode as EAuthenticationErrorCodes) : undefined;
+
+      // Get error message from handler or fallback
+      const errorMessage = errorInfo
+        ? typeof errorInfo.message === "string"
+          ? errorInfo.message
+          : String(errorInfo.message)
+        : err?.error_message || changeEmailT("form.email.errors.validation_failed");
+
+      setError("email", { type: "custom", message: errorMessage });
+    }
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <div className="py-4 space-y-0 px-4">
+        <h3 className="text-16 font-medium leading-6 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-red-500": errors.email }, { "cursor-not-allowed !bg-surface-2": secondStep })}
+                disabled={secondStep}
+              />
+            )}
+          />
+          {errors?.email && <span className="text-11 text-red-500">{errors?.email?.message}</span>}
+        </div>
+
+        {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-red-500": errors.code })}
+                  autoFocus
+                />
+              )}
+            />
+            {errors?.code ? (
+              <span className="text-11 text-red-500">{errors?.code?.message}</span>
+            ) : (
+              <span className="text-11 text-green-700">{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 09e12fb16e..5148c5eced 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,8 +1,6 @@
-"use client";
-
-import React, { useEffect, useState, useRef } from "react";
+import { useEffect, useState, useRef } from "react";
 import { Rocket, Search } from "lucide-react";
-import { Combobox, Dialog, Transition } from "@headlessui/react";
+import { Combobox } from "@headlessui/react";
 // i18n
 import { useTranslation } from "@plane/i18n";
 // types
@@ -12,7 +10,7 @@ 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
@@ -40,7 +38,7 @@ type Props = {
 
 const projectService = new ProjectService();
 
-export const ExistingIssuesListModal: React.FC<Props> = (props) => {
+export function ExistingIssuesListModal(props: Props) {
   const { t } = useTranslation();
 
   const {
@@ -133,232 +131,195 @@ export const ExistingIssuesListModal: React.FC<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">
+          <Search
+            className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-primary text-opacity-40"
+            aria-hidden="true"
+          />
+          <Combobox.Input
+            className="h-12 w-full border-0 bg-transparent pl-11 pr-4 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 whitespace-nowrap rounded-md border border-subtle bg-layer-1 py-1 pl-2 text-11 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 whitespace-nowrap rounded-md border border-subtle bg-layer-1 p-2 text-11">
+              {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 flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 my-0.5 text-secondary ${
+                            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="z-1 relative hidden flex-shrink-0 text-secondary hover:text-primary 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"
+          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 d157be3d76..df68c08aa2 100644
--- a/apps/web/core/components/core/modals/gpt-assistant-popover.tsx
+++ b/apps/web/core/components/core/modals/gpt-assistant-popover.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { Ref } from "react";
 import React, { useEffect, useState, useRef, Fragment } from "react";
 import type { Placement } from "@popperjs/core";
@@ -37,7 +35,7 @@ type FormData = {
   task: string;
 };
 
-export const GptAssistantPopover: React.FC<Props> = (props) => {
+export function GptAssistantPopover(props: Props) {
   const {
     isOpen,
     handleClose,
@@ -210,14 +208,14 @@ export const GptAssistantPopover: React.FC<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={`fixed z-10 flex w-full min-w-[50rem] max-w-full flex-col space-y-4 overflow-hidden rounded-[10px] border border-subtle bg-surface-1 p-4 shadow ${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}
@@ -232,7 +230,7 @@ export const GptAssistantPopover: React.FC<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}
@@ -246,7 +244,7 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
               </div>
             )}
             {invalidResponse && (
-              <div className="text-sm text-red-500">
+              <div className="text-13 text-red-500">
                 No response could be generated. This may be due to insufficient content or task information. Please try
                 again.
               </div>
@@ -276,17 +274,17 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
               <>{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>
@@ -295,4 +293,4 @@ export const GptAssistantPopover: React.FC<Props> = (props) => {
       </Transition>
     </Popover>
   );
-};
+}
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 ede002b531..b3269fdbf2 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
@@ -18,12 +18,7 @@ interface EmptyStateProps {
   isSearching: boolean;
 }
 
-export const IssueSearchModalEmptyState: React.FC<EmptyStateProps> = ({
-  issues,
-  searchTerm,
-  debouncedSearchTerm,
-  isSearching,
-}) => {
+export function IssueSearchModalEmptyState({ issues, searchTerm, debouncedSearchTerm, isSearching }: EmptyStateProps) {
   // theme hook
   const { resolvedTheme } = useTheme();
   // plane hooks
@@ -32,9 +27,9 @@ export const IssueSearchModalEmptyState: React.FC<EmptyStateProps> = ({
   const searchResolvedPath = resolvedTheme === "light" ? lightSearchAsset : darkSearchAsset;
   const issuesResolvedPath = resolvedTheme === "light" ? lightIssuesAsset : darkIssuesAsset;
 
-  const EmptyStateContainer = ({ children }: { children: React.ReactNode }) => (
-    <div className="flex flex-col items-center justify-center px-3 py-8 text-center">{children}</div>
-  );
+  function EmptyStateContainer({ children }: { children: React.ReactNode }) {
+    return <div className="flex flex-col items-center justify-center px-3 py-8 text-center">{children}</div>;
+  }
 
   if (issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && !isSearching) {
     return (
@@ -50,4 +45,4 @@ export const IssueSearchModalEmptyState: React.FC<EmptyStateProps> = ({
     );
   }
   return null;
-};
+}
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 e12ca566e0..899992107d 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,15 +1,13 @@
-"use client";
-
-import React, { useState } from "react";
+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";
@@ -23,7 +21,7 @@ type Props = {
   value: string | null;
 };
 
-export const UserImageUploadModal: React.FC<Props> = observer((props) => {
+export const UserImageUploadModal = observer(function UserImageUploadModal(props: Props) {
   const { handleRemove, isOpen, onClose, onSuccess, value } = props;
   // states
   const [image, setImage] = useState<File | null>(null);
@@ -90,106 +88,68 @@ export const UserImageUploadModal: React.FC<Props> = observer((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 font-medium leading-6 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:outline-none focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 ${
+                (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 right-0 top-0 z-40 -translate-y-1/2 translate-x-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 left-0 top-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-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>
+        <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 decf804700..0818406935 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,15 +1,14 @@
-"use client";
-import React, { useState } from "react";
+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";
@@ -27,7 +26,7 @@ type Props = {
 // services
 const fileService = new FileService();
 
-export const WorkspaceImageUploadModal: React.FC<Props> = observer((props) => {
+export const WorkspaceImageUploadModal = observer(function WorkspaceImageUploadModal(props: Props) {
   const { handleRemove, isOpen, onClose, onSuccess, value } = props;
   // states
   const [image, setImage] = useState<File | null>(null);
@@ -102,106 +101,68 @@ export const WorkspaceImageUploadModal: React.FC<Props> = observer((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 font-medium leading-6 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:outline-none focus:ring-2 focus:ring-accent-strong focus:ring-offset-2 ${
+                (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 right-0 top-0 z-40 -translate-y-1/2 translate-x-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 left-0 top-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-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>
+        <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 9fc45cc504..31f59e6e23 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // ui
 import { Checkbox } from "@plane/ui";
@@ -16,7 +14,7 @@ type Props = {
   selectionHelpers: TSelectionHelper;
 };
 
-export const MultipleSelectEntityAction: React.FC<Props> = observer((props) => {
+export const MultipleSelectEntityAction = observer(function MultipleSelectEntityAction(props: Props) {
   const { className, disabled = false, groupId, id, selectionHelpers } = props;
   // derived values
   const isSelected = selectionHelpers.getIsEntitySelected(id);
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 78b106d0fd..ec67bbac66 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,4 +1,3 @@
-"use client";
 // ui
 import { Checkbox } from "@plane/ui";
 // helpers
@@ -13,7 +12,7 @@ type Props = {
   selectionHelpers: TSelectionHelper;
 };
 
-export const MultipleSelectGroupAction: React.FC<Props> = (props) => {
+export function MultipleSelectGroupAction(props: Props) {
   const { className, disabled = false, groupID, selectionHelpers } = props;
   // derived values
   const groupSelectionStatus = selectionHelpers.isGroupSelected(groupID);
@@ -30,4 +29,4 @@ export const MultipleSelectGroupAction: React.FC<Props> = (props) => {
       disabled={disabled}
     />
   );
-};
+}
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 7f3aec71e7..c23ee07ee3 100644
--- a/apps/web/core/components/core/multiple-select/select-group.tsx
+++ b/apps/web/core/components/core/multiple-select/select-group.tsx
@@ -10,7 +10,7 @@ type Props = {
   entities: Record<string, string[]>; // { groupID: entityIds[] }
 };
 
-export const MultipleSelectGroup: React.FC<Props> = observer((props) => {
+export const MultipleSelectGroup = observer(function MultipleSelectGroup(props: Props) {
   const { children, containerRef, disabled = false, entities } = props;
 
   const helpers = useMultipleSelect({
@@ -21,5 +21,3 @@ export const MultipleSelectGroup: React.FC<Props> = observer((props) => {
 
   return <>{children(helpers)}</>;
 });
-
-MultipleSelectGroup.displayName = "MultipleSelectGroup";
diff --git a/apps/web/core/components/core/page-title.tsx b/apps/web/core/components/core/page-title.tsx
index fe0a05f7d1..cd51986451 100644
--- a/apps/web/core/components/core/page-title.tsx
+++ b/apps/web/core/components/core/page-title.tsx
@@ -5,7 +5,7 @@ type PageHeadTitleProps = {
   description?: string;
 };
 
-export const PageHead: React.FC<PageHeadTitleProps> = (props) => {
+export function PageHead(props: PageHeadTitleProps) {
   const { title } = props;
 
   useEffect(() => {
@@ -15,4 +15,4 @@ export const PageHead: React.FC<PageHeadTitleProps> = (props) => {
   }, [title]);
 
   return null;
-};
+}
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 9e77113a8e..07962bdd35 100644
--- a/apps/web/core/components/core/render-if-visible-HOC.tsx
+++ b/apps/web/core/components/core/render-if-visible-HOC.tsx
@@ -17,7 +17,7 @@ type Props = {
   forceRender?: boolean;
 };
 
-const RenderIfVisible: React.FC<Props> = (props) => {
+function RenderIfVisible(props: Props) {
   const {
     defaultHeight = "300px",
     root,
@@ -79,9 +79,9 @@ const RenderIfVisible: React.FC<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);
-};
+}
 
 export default RenderIfVisible;
diff --git a/apps/web/core/components/core/sidebar/progress-chart.tsx b/apps/web/core/components/core/sidebar/progress-chart.tsx
index 135454cf4e..190a8cc8ca 100644
--- a/apps/web/core/components/core/sidebar/progress-chart.tsx
+++ b/apps/web/core/components/core/sidebar/progress-chart.tsx
@@ -11,7 +11,7 @@ type Props = {
   plotTitle?: string;
 };
 
-const ProgressChart: React.FC<Props> = ({ distribution, totalIssues, className = "", plotTitle = "work items" }) => {
+function ProgressChart({ distribution, totalIssues, className = "", plotTitle = "work items" }: Props) {
   const chartData: TChartData<string, string>[] = Object.keys(distribution ?? []).map((key, index) => ({
     name: renderFormattedDateWithoutYear(key),
     current: distribution[key] ?? 0,
@@ -65,6 +65,6 @@ const ProgressChart: React.FC<Props> = ({ distribution, totalIssues, className =
       />
     </div>
   );
-};
+}
 
 export default ProgressChart;
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 af36fd2c01..6410cca287 100644
--- a/apps/web/core/components/core/sidebar/progress-stats/assignee.tsx
+++ b/apps/web/core/components/core/sidebar/progress-stats/assignee.tsx
@@ -24,7 +24,7 @@ type TAssigneeStatComponent = {
   isEditable?: boolean;
 };
 
-export const AssigneeStatComponent = observer((props: TAssigneeStatComponent) => {
+export const AssigneeStatComponent = observer(function AssigneeStatComponent(props: TAssigneeStatComponent) {
   const { distribution, isEditable, selectedAssigneeIds, handleAssigneeFiltersUpdate } = props;
   const { t } = useTranslation();
   return (
@@ -55,7 +55,7 @@ export const AssigneeStatComponent = observer((props: TAssigneeStatComponent) =>
                 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">
+                    <div className="h-4 w-4 rounded-full border-2 border-subtle bg-layer-1">
                       <img src={userImage} className="rounded-full w-full h-full object-cover" alt="User" />
                     </div>
                     <span>{t("no_assignee")}</span>
@@ -68,10 +68,10 @@ export const AssigneeStatComponent = observer((props: TAssigneeStatComponent) =>
         })
       ) : (
         <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 89a30ed4ba..7472ac4523 100644
--- a/apps/web/core/components/core/sidebar/progress-stats/label.tsx
+++ b/apps/web/core/components/core/sidebar/progress-stats/label.tsx
@@ -21,7 +21,7 @@ type TLabelStatComponent = {
   isEditable?: boolean;
 };
 
-export const LabelStatComponent = observer((props: TLabelStatComponent) => {
+export const LabelStatComponent = observer(function LabelStatComponent(props: TLabelStatComponent) {
   const { distribution, isEditable, selectedLabelIds, handleLabelFiltersUpdate } = props;
   const { t } = useTranslation();
   return (
@@ -40,7 +40,7 @@ export const LabelStatComponent = observer((props: TLabelStatComponent) => {
                         backgroundColor: label.color ?? "transparent",
                       }}
                     />
-                    <span className="text-xs text-ellipsis truncate">{label.title ?? t("no_labels_yet")}</span>
+                    <span className="text-11 text-ellipsis truncate">{label.title ?? t("no_labels_yet")}</span>
                   </div>
                 }
                 completed={label.completed}
@@ -63,7 +63,7 @@ export const LabelStatComponent = observer((props: TLabelStatComponent) => {
                         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 +74,10 @@ export const LabelStatComponent = observer((props: TLabelStatComponent) => {
         })
       ) : (
         <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/state_group.tsx b/apps/web/core/components/core/sidebar/progress-stats/state_group.tsx
index 317d426d6b..7391ac63a6 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
@@ -19,7 +19,7 @@ type TStateGroupStatComponent = {
   isEditable?: boolean;
 };
 
-export const StateGroupStatComponent = observer((props: TStateGroupStatComponent) => {
+export const StateGroupStatComponent = observer(function StateGroupStatComponent(props: TStateGroupStatComponent) {
   const { distribution, isEditable, totalIssuesCount, selectedStateGroups, handleStateGroupFiltersUpdate } = props;
 
   return (
@@ -30,7 +30,7 @@ export const StateGroupStatComponent = observer((props: TStateGroupStatComponent
           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 6b0a564ad3..dc61ea8b1f 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,10 +1,8 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { PanelRight } from "lucide-react";
 import { useAppTheme } from "@/hooks/store/use-app-theme";
 
-export const SidebarHamburgerToggle = observer(() => {
+export const SidebarHamburgerToggle = observer(function SidebarHamburgerToggle() {
   // store hooks
   const { toggleSidebar } = useAppTheme();
 
@@ -17,10 +15,10 @@ export const SidebarHamburgerToggle = observer(() => {
   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 flex-shrink-0 size-7 grid place-items-center rounded-sm hover:bg-layer-1 transition-all bg-surface-2"
       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 a0443f06e4..ecb453b9b5 100644
--- a/apps/web/core/components/core/sidebar/single-progress-stats.tsx
+++ b/apps/web/core/components/core/sidebar/single-progress-stats.tsx
@@ -8,27 +8,23 @@ type TSingleProgressStatsProps = {
   selected?: boolean;
 };
 
-export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
-  title,
-  completed,
-  total,
-  onClick,
-  selected = false,
-}) => (
-  <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" : ""}`}
-    onClick={onClick}
-  >
-    <div className="w-4/6">{title}</div>
-    <div className="flex w-2/6 items-center justify-end gap-1 px-2">
-      <div className="flex h-5 items-center justify-center gap-1">
-        <span className="w-8 text-right">
-          {isNaN(Math.round((completed / total) * 100)) ? "0" : Math.round((completed / total) * 100)}%
-        </span>
+export function SingleProgressStats({ title, completed, total, onClick, selected = false }: TSingleProgressStatsProps) {
+  return (
+    <div
+      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>
+      <div className="flex w-2/6 items-center justify-end gap-1 px-2">
+        <div className="flex h-5 items-center justify-center gap-1">
+          <span className="w-8 text-right">
+            {isNaN(Math.round((completed / total) * 100)) ? "0" : Math.round((completed / total) * 100)}%
+          </span>
+        </div>
+        <span>of {total}</span>
       </div>
-      <span>of {total}</span>
     </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 be9bab9d59..0000000000
--- a/apps/web/core/components/core/theme/color-picker-input.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-"use client";
-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 const ColorPickerInput: FC<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/config-handler.tsx b/apps/web/core/components/core/theme/config-handler.tsx
new file mode 100644
index 0000000000..a426c75079
--- /dev/null
+++ b/apps/web/core/components/core/theme/config-handler.tsx
@@ -0,0 +1,135 @@
+import { useRef } from "react";
+import { observer } from "mobx-react";
+import type { UseFormGetValues, 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 = {
+  getValues: UseFormGetValues<IUserTheme>;
+  handleUpdateTheme: (formData: IUserTheme) => Promise<void>;
+  setValue: UseFormSetValue<IUserTheme>;
+};
+
+export const CustomThemeConfigHandler = observer(function CustomThemeConfigHandler(props: Props) {
+  const { getValues, handleUpdateTheme, setValue } = props;
+  // refs
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  // 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.",
+      });
+    }
+  };
+
+  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 (
+    <div className="flex gap-2">
+      <input ref={fileInputRef} type="file" accept=".json" onChange={handleUploadConfig} className="hidden" />
+      <Button variant="secondary" type="button" onClick={() => fileInputRef.current?.click()}>
+        Import config
+      </Button>
+      <Button variant="secondary" type="button" onClick={handleDownloadConfig}>
+        Download config
+      </Button>
+    </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 c9284755ea..1091966e1c 100644
--- a/apps/web/core/components/core/theme/custom-theme-selector.tsx
+++ b/apps/web/core/components/core/theme/custom-theme-selector.tsx
@@ -1,275 +1,198 @@
-"use client";
-
-import { useMemo } from "react";
+import { 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";
+// 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 { InputColorPicker, ToggleSwitch } from "@plane/ui";
+import { applyCustomTheme } from "@plane/utils";
 // hooks
-import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
 import { useUserProfile } from "@/hooks/store/user";
+// local imports
+import { CustomThemeConfigHandler } from "./config-handler";
 
-type TCustomThemeSelector = {
-  applyThemeChange: (theme: Partial<IUserTheme>) => void;
-};
-
-export const CustomThemeSelector: React.FC<TCustomThemeSelector> = observer((props) => {
-  const { applyThemeChange } = props;
-  // hooks
+export const CustomThemeSelector = observer(function CustomThemeSelector() {
+  // store hooks
   const { data: userProfile, updateUserTheme } = useUserProfile();
+  // translation
   const { t } = useTranslation();
-  const {
-    control,
-    formState: { errors, isSubmitting },
-    handleSubmit,
-    watch,
-  } = 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 : "",
-    },
-  });
 
-  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
-  );
+  // Loading state for async palette generation
+  const [isLoadingPalette, setIsLoadingPalette] = useState(false);
 
-  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}`,
+  // Load saved theme from userProfile (fallback to defaults)
+  const getSavedTheme = (): IUserTheme => {
+    if (userProfile?.theme) {
+      const theme = userProfile.theme;
+      if (theme.primary && theme.background && theme.darkPalette !== undefined) {
+        return {
+          theme: "custom",
+          primary: theme.primary,
+          background: theme.background,
+          darkPalette: theme.darkPalette,
+        };
+      }
+    }
+    // Fallback to defaults
+    return {
       theme: "custom",
+      primary: "#3f76ff",
+      background: "#1a1a1a",
+      darkPalette: false,
     };
-    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",
-          },
-        });
-      });
-
-    return;
   };
 
-  const handleValueChange = (val: string | undefined, onChange: any) => {
+  const {
+    control,
+    formState: { isSubmitting },
+    handleSubmit,
+    getValues,
+    watch,
+    setValue,
+  } = useForm<IUserTheme>({
+    defaultValues: getSavedTheme(),
+  });
+
+  const handleUpdateTheme = async (formData: IUserTheme) => {
+    if (!formData.primary || !formData.background || formData.darkPalette === undefined) return;
+
+    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,
+      });
+
+      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);
+    }
+  };
+
+  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 (
     <form onSubmit={handleSubmit(handleUpdateTheme)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-semibold text-custom-text-100">{t("customize_your_theme")}</h3>
+        <h3 className="text-16 font-semibold text-primary">{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">
+          {/* Color Inputs */}
+          <div className="grid grid-cols-1 gap-x-8 gap-y-4 sm:grid-cols-2">
+            {/* Brand Color */}
             <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>
+              <h3 className="text-left text-13 font-medium text-secondary">Brand color</h3>
               <div className="w-full">
                 <Controller
                   control={control}
                   name="primary"
-                  rules={{ ...inputRules, required: t("primary_color_is_required") }}
+                  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-custom-text-400/60"
+                      className="w-full placeholder:text-placeholder"
                       style={{
-                        backgroundColor: watch("primary"),
-                        color: watch("text"),
+                        backgroundColor: value,
+                        color: "#ffffff",
                       }}
-                      hasError={Boolean(errors?.primary)}
+                      hasError={false}
                     />
                   )}
                 />
-                {errors.primary && <p className="mt-1 text-xs text-red-500">{errors.primary.message}</p>}
               </div>
             </div>
 
+            {/* Neutral Color */}
             <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>
+              <h3 className="text-left text-13 font-medium text-secondary">Neutral color</h3>
               <div className="w-full">
                 <Controller
                   control={control}
-                  name="sidebarBackground"
-                  rules={{ ...inputRules, required: t("sidebar_background_color_is_required") }}
+                  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="sidebarBackground"
+                      name="background"
                       value={value}
                       onChange={(val) => handleValueChange(val, onChange)}
-                      placeholder="#0d101b"
-                      className="w-full placeholder:text-custom-text-400/60"
+                      placeholder="#1a1a1a"
+                      className="w-full placeholder:text-placeholder"
                       style={{
-                        backgroundColor: watch("sidebarBackground"),
-                        color: watch("sidebarText"),
+                        backgroundColor: value,
+                        color: "#ffffff",
                       }}
-                      hasError={Boolean(errors?.sidebarBackground)}
+                      hasError={false}
                     />
                   )}
                 />
-                {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>
       </div>
-      <div className="mt-5 flex justify-end gap-2">
-        <Button variant="primary" type="submit" loading={isSubmitting}>
-          {isSubmitting ? t("creating_theme") : t("set_theme")}
-        </Button>
+
+      <div className="mt-5 flex flex-col gap-4 sm:flex-row sm:justify-between sm:items-center">
+        {/* Import/Export Section */}
+        <CustomThemeConfigHandler getValues={getValues} handleUpdateTheme={handleUpdateTheme} setValue={setValue} />
+
+        <div className="flex items-center gap-4">
+          {/* Theme Mode Toggle */}
+          <div className="flex items-center gap-2">
+            <Controller
+              control={control}
+              name="darkPalette"
+              render={({ field: { value, onChange } }) => (
+                <ToggleSwitch value={!!value} onChange={onChange} size="sm" />
+              )}
+            />
+            <span className="text-12 text-tertiary">{watch("darkPalette") ? "Dark mode" : "Light mode"}</span>
+          </div>
+          {/* Save Theme Button */}
+          <Button variant="primary" size="lg" type="submit" loading={isSubmitting || isLoadingPalette}>
+            {isSubmitting ? t("creating_theme") : isLoadingPalette ? "Generating..." : t("set_theme")}
+          </Button>
+        </div>
       </div>
     </form>
   );
diff --git a/apps/web/core/components/core/theme/theme-switch.tsx b/apps/web/core/components/core/theme/theme-switch.tsx
index 29a2efe968..a6cd5cb41f 100644
--- a/apps/web/core/components/core/theme/theme-switch.tsx
+++ b/apps/web/core/components/core/theme/theme-switch.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 // plane imports
 import type { I_THEME_OPTION } from "@plane/constants";
@@ -14,9 +12,11 @@ type Props = {
   onChange: (value: I_THEME_OPTION) => void;
 };
 
-export const ThemeSwitch: FC<Props> = (props) => {
+export function ThemeSwitch(props: Props) {
   const { value, onChange } = props;
+  // translation
   const { t } = useTranslation();
+
   return (
     <CustomSelect
       value={value}
@@ -24,7 +24,7 @@ export const ThemeSwitch: FC<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="border-1 relative flex h-4 w-4 rotate-45 transform items-center justify-center rounded-full"
               style={{
                 borderColor: value.icon.border,
               }}
@@ -50,6 +50,7 @@ export const ThemeSwitch: FC<Props> = (props) => {
         )
       }
       onChange={onChange}
+      placement="bottom-end"
       input
     >
       {THEME_OPTIONS.map((themeOption) => (
@@ -81,4 +82,4 @@ export const ThemeSwitch: FC<Props> = (props) => {
       ))}
     </CustomSelect>
   );
-};
+}
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 4f6ffe7251..ec2668323e 100644
--- a/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
+++ b/apps/web/core/components/cycles/active-cycle/cycle-stats.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { Fragment, useCallback, useRef, useState } from "react";
 import { isEmpty } from "lodash-es";
@@ -46,10 +44,10 @@ export type ActiveCycleStatsProps = {
   cycle: ICycle | null;
   cycleId?: string | null;
   handleFiltersUpdate: (conditions: TWorkItemFilterCondition[]) => void;
-  cycleIssueDetails: ActiveCycleIssueDetails;
+  cycleIssueDetails?: ActiveCycleIssueDetails | { nextPageResults: boolean };
 };
 
-export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
+export const ActiveCycleStats = observer(function ActiveCycleStats(props: ActiveCycleStatsProps) {
   const { workspaceSlug, projectId, cycle, cycleId, handleFiltersUpdate, cycleIssueDetails } = props;
   // local storage
   const { storedValue: tab, setValue: setTab } = useLocalStorage("activeCycleTab", "Assignees");
@@ -102,7 +100,7 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
   );
 
   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="flex flex-col gap-4 p-4 min-h-[17rem] overflow-hidden bg-surface-1 col-span-1 lg:col-span-2 xl:col-span-1 border border-subtle rounded-lg">
       <Tab.Group
         as={Fragment}
         defaultIndex={currentValue(tab)}
@@ -122,7 +120,7 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
       >
         <Tab.List
           as="div"
-          className="relative border-[0.5px] border-custom-border-200 rounded bg-custom-background-80 p-[1px] grid"
+          className="relative border-[0.5px] border-subtle rounded-sm bg-layer-1 p-[1px] grid"
           style={{
             gridTemplateColumns: `repeat(3, 1fr)`,
           }}
@@ -130,10 +128,10 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
           <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] font-semibold text-11 rounded-[3px] py-1.5 text-placeholder focus:outline-none transition duration-500",
                 {
-                  "text-custom-text-300 bg-custom-background-100": selected,
-                  "hover:text-custom-text-300": !selected,
+                  "text-tertiary bg-surface-1": selected,
+                  "hover:text-tertiary": !selected,
                 }
               )
             }
@@ -143,10 +141,10 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
           <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] font-semibold text-11 rounded-[3px] py-1.5 text-placeholder focus:outline-none transition duration-500",
                 {
-                  "text-custom-text-300 bg-custom-background-100": selected,
-                  "hover:text-custom-text-300": !selected,
+                  "text-tertiary bg-surface-1": selected,
+                  "hover:text-tertiary": !selected,
                 }
               )
             }
@@ -156,10 +154,10 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
           <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] font-semibold text-11 rounded-[3px] py-1.5 text-placeholder focus:outline-none transition duration-500",
                 {
-                  "text-custom-text-300 bg-custom-background-100": selected,
-                  "hover:text-custom-text-300": !selected,
+                  "text-tertiary bg-surface-1": selected,
+                  "hover:text-tertiary": !selected,
                 }
               )
             }
@@ -171,7 +169,7 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
         <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="flex h-52 w-full flex-col gap-1 overflow-y-auto  text-secondary vertical-scrollbar scrollbar-sm"
           >
             <div
               ref={issuesContainerRef}
@@ -188,7 +186,7 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
                       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 hover:bg-surface-2 p-1"
                           onClick={() => {
                             if (issue.id) {
                               setPeekIssue({
@@ -204,13 +202,9 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
                           }}
                         >
                           <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"
-                            />
+                            <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="text-13 text-primary truncate">{issue.name}</span>
                             </Tooltip>
                           </div>
                           <PriorityIcon priority={issue.priority} withContainer size={12} />
@@ -229,9 +223,9 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
                                 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="h-full flex truncate items-center gap-1.5 rounded-sm text-11 px-2 py-0.5 bg-layer-1 group-hover:bg-surface-1 cursor-pointer">
                                   <CalendarCheck className="h-3 w-3 flex-shrink-0" />
-                                  <span className="text-xs truncate">
+                                  <span className="text-11 truncate">
                                     {renderFormattedDateWithoutYear(issue.target_date)}
                                   </span>
                                 </div>
@@ -245,7 +239,7 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
                       <div
                         ref={setIssueLoaderElement}
                         className={
-                          "h-11 relative flex items-center gap-3 bg-custom-background-80 p-3 text-sm cursor-pointer animate-pulse"
+                          "h-11 relative flex items-center gap-3 bg-layer-1 p-3 text-13 cursor-pointer animate-pulse"
                         }
                       />
                     )}
@@ -266,7 +260,7 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
 
           <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="flex h-52 w-full flex-col gap-1 overflow-y-auto text-secondary vertical-scrollbar scrollbar-sm"
           >
             {cycle && !isEmpty(cycle.distribution) ? (
               cycle?.distribution?.assignees && cycle.distribution.assignees.length > 0 ? (
@@ -302,7 +296,7 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
                         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>
@@ -328,7 +322,7 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
 
           <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="flex h-52 w-full flex-col gap-1 overflow-y-auto  text-secondary vertical-scrollbar scrollbar-sm"
           >
             {cycle && !isEmpty(cycle.distribution) ? (
               cycle?.distribution?.labels && cycle.distribution.labels.length > 0 ? (
@@ -343,7 +337,7 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
                             backgroundColor: label.color ?? "#000000",
                           }}
                         />
-                        <span className="text-xs text-ellipsis truncate">{label.label_name ?? "No labels"}</span>
+                        <span className="text-11 text-ellipsis truncate">{label.label_name ?? "No labels"}</span>
                       </div>
                     }
                     completed={label.completed_issues}
@@ -372,7 +366,7 @@ export const ActiveCycleStats: FC<ActiveCycleStatsProps> = observer((props) => {
       </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="flex flex-col gap-4 min-h-[17rem] overflow-hidden bg-surface-1 col-span-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 5663ff9e6c..f34153b64c 100644
--- a/apps/web/core/components/cycles/active-cycle/productivity.tsx
+++ b/apps/web/core/components/cycles/active-cycle/productivity.tsx
@@ -23,7 +23,7 @@ export type ActiveCycleProductivityProps = {
   cycle: ICycle | null;
 };
 
-export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = observer((props) => {
+export const ActiveCycleProductivity = observer(function ActiveCycleProductivity(props: ActiveCycleProductivityProps) {
   const { workspaceSlug, projectId, cycle } = props;
   // theme hook
   const { resolvedTheme } = useTheme();
@@ -45,12 +45,10 @@ export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = observe
   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 flex-col min-h-[17rem] gap-5 px-3.5 py-4 bg-surface-1 border border-subtle rounded-lg">
       <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 text-tertiary font-semibold">{t("project_cycles.active_cycle.issue_burndown")}</h3>
         </Link>
         <EstimateTypeDropdown value={estimateType} onChange={onChange} cycleId={cycle.id} projectId={projectId} />
       </div>
@@ -59,7 +57,7 @@ export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = observe
         {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>
                 ) : (
@@ -98,7 +96,7 @@ export const ActiveCycleProductivity: FC<ActiveCycleProductivityProps> = observe
       </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 flex-col min-h-[17rem] gap-5 bg-surface-1 border border-subtle rounded-lg">
       <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 1e2812d606..b0d5ac74e8 100644
--- a/apps/web/core/components/cycles/active-cycle/progress.tsx
+++ b/apps/web/core/components/cycles/active-cycle/progress.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { observer } from "mobx-react";
 import { useTheme } from "next-themes";
@@ -22,7 +20,7 @@ export type ActiveCycleProgressProps = {
   handleFiltersUpdate: (conditions: TWorkItemFilterCondition[]) => void;
 };
 
-export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = observer((props) => {
+export const ActiveCycleProgress = observer(function ActiveCycleProgress(props: ActiveCycleProgressProps) {
   const { handleFiltersUpdate, cycle } = props;
   // theme hook
   const { resolvedTheme } = useTheme();
@@ -46,12 +44,12 @@ export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = observer((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 flex-col min-h-[17rem] gap-5 py-4 px-3.5 bg-surface-1 border border-subtle rounded-lg">
       <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 text-tertiary font-semibold">{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 text-13 text-placeholder font-medium whitespace-nowrap rounded-xs px-3 py-1 ">
               {`${cycle.completed_issues + cycle.cancelled_issues}/${cycle.total_issues - cycle.cancelled_issues} ${
                 cycle.completed_issues + cycle.cancelled_issues > 1 ? "Work items" : "Work item"
               } closed`}
@@ -68,7 +66,7 @@ export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = observer((props
               {groupedIssues[group] > 0 && (
                 <div key={index}>
                   <div
-                    className="flex items-center justify-between gap-2 text-sm cursor-pointer"
+                    className="flex items-center justify-between gap-2 text-13 cursor-pointer"
                     onClick={() => {
                       handleFiltersUpdate([{ property: "state_group", operator: "in", value: [group] }]);
                     }}
@@ -80,9 +78,9 @@ export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = observer((props
                           backgroundColor: PROGRESS_STATE_GROUPS_DETAILS[index].color,
                         }}
                       />
-                      <span className="text-custom-text-300 capitalize font-medium w-16">{group}</span>
+                      <span className="text-tertiary capitalize font-medium w-16">{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>
@@ -91,7 +89,7 @@ export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = observer((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"
@@ -107,7 +105,7 @@ export const ActiveCycleProgress: FC<ActiveCycleProgressProps> = observer((props
       )}
     </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 flex-col min-h-[17rem] gap-5 bg-surface-1 border border-subtle rounded-lg">
       <Loader.Item width="100%" height="100%" />
     </Loader>
   );
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 100311e78a..711bfc66a2 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/issue-progress.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useMemo } from "react";
 import { isEmpty } from "lodash-es";
@@ -54,7 +52,7 @@ export const validateCycleSnapshot = (cycleDetails: ICycle | null): ICycle | nul
   return updatedCycleDetails;
 };
 
-export const CycleAnalyticsProgress: FC<TCycleAnalyticsProgress> = observer((props) => {
+export const CycleAnalyticsProgress = observer(function CycleAnalyticsProgress(props: TCycleAnalyticsProgress) {
   // props
   const { workspaceSlug, projectId, cycleId } = props;
   // router
@@ -100,7 +98,7 @@ export const CycleAnalyticsProgress: FC<TCycleAnalyticsProgress> = observer((pro
 
   if (!cycleDetails) return <></>;
   return (
-    <div className="border-t border-custom-border-200 space-y-4 py-5">
+    <div className="border-t border-subtle space-y-4 py-5">
       <Disclosure defaultOpen>
         {({ open }) => (
           <div className="flex flex-col">
@@ -108,9 +106,7 @@ export const CycleAnalyticsProgress: FC<TCycleAnalyticsProgress> = observer((pro
             {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="font-medium text-secondary text-13">{t("project_cycles.active_cycle.progress")}</div>
                 </Disclosure.Button>
                 <Disclosure.Button className="ml-auto">
                   {open ? (
@@ -122,13 +118,11 @@ export const CycleAnalyticsProgress: FC<TCycleAnalyticsProgress> = observer((pro
               </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="font-medium text-secondary text-13">{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 && (
@@ -162,7 +156,7 @@ export const CycleAnalyticsProgress: FC<TCycleAnalyticsProgress> = observer((pro
                     )}
                   </>
                 ) : (
-                  <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 py-2 text-13 text-tertiary  bg-surface-2 rounded-md px-2 w-full">
                     {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 2072a30df2..79db497626 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/progress-stats.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/progress-stats.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { Tab } from "@headlessui/react";
 // plane imports
@@ -35,7 +32,7 @@ type TCycleProgressStats = {
   totalIssuesCount: number;
 };
 
-export const CycleProgressStats: FC<TCycleProgressStats> = observer((props) => {
+export const CycleProgressStats = observer(function CycleProgressStats(props: TCycleProgressStats) {
   const {
     cycleId,
     distribution,
@@ -124,18 +121,18 @@ export const CycleProgressStats: FC<TCycleProgressStats> = observer((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`,
+                `p-1 w-full text-primary outline-none focus:outline-none cursor-pointer transition-all`,
+                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)}
@@ -144,7 +141,7 @@ export const CycleProgressStats: FC<TCycleProgressStats> = observer((props) => {
             </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 ebe3711f21..af1fd07a19 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/root.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -18,7 +16,7 @@ type Props = {
   workspaceSlug: string;
 };
 
-export const CycleDetailsSidebar: React.FC<Props> = observer((props) => {
+export const CycleDetailsSidebar = observer(function CycleDetailsSidebar(props: Props) {
   const { handleClose, isArchived, projectId, workspaceSlug, cycleId } = props;
 
   // store hooks
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 7c6e6b4edb..2f33d3364e 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,3 @@
-"use client";
 import type { FC } from "react";
 import React from "react";
 import { isEmpty } from "lodash-es";
@@ -23,7 +22,7 @@ type Props = {
   cycleDetails: ICycle;
 };
 
-export const CycleSidebarDetails: FC<Props> = observer((props) => {
+export const CycleSidebarDetails = observer(function CycleSidebarDetails(props: Props) {
   const { projectId, cycleDetails } = props;
   // hooks
   const { getUserDetails } = useMember();
@@ -65,7 +64,7 @@ export const CycleSidebarDetails: FC<Props> = observer((props) => {
     <div className="flex flex-col gap-5 w-full">
       {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="outline-none ring-none w-full max-h-max bg-transparent !p-0 !m-0 !border-0 resize-none text-13 leading-5 text-secondary"
           value={cycleDetails.description}
           disabled
         />
@@ -73,24 +72,24 @@ export const CycleSidebarDetails: FC<Props> = observer((props) => {
 
       <div className="flex flex-col gap-5 pb-6 pt-2.5">
         <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 ? (
                 <>
@@ -109,19 +108,19 @@ export const CycleSidebarDetails: FC<Props> = observer((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>
 
@@ -130,12 +129,12 @@ export const CycleSidebarDetails: FC<Props> = observer((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 41129e9c07..f89f7b9750 100644
--- a/apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
+++ b/apps/web/core/components/cycles/analytics-sidebar/sidebar-header.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import React, { useEffect } from "react";
 import { observer } from "mobx-react";
@@ -43,7 +41,7 @@ const defaultValues: Partial<ICycle> = {
 
 const cycleService = new CycleService();
 
-export const CycleSidebarHeader: FC<Props> = observer((props) => {
+export const CycleSidebarHeader = observer(function CycleSidebarHeader(props: Props) {
   const { workspaceSlug, projectId, cycleDetails, handleClose, isArchived = false } = props;
   // hooks
   const { allowPermissions } = useUserPermissions();
@@ -108,7 +106,7 @@ export const CycleSidebarHeader: FC<Props> = observer((props) => {
 
   const dateChecker = async (payload: any) => {
     try {
-      const res = await cycleService.cycleDateCheck(workspaceSlug as string, projectId as string, payload);
+      const res = await cycleService.cycleDateCheck(workspaceSlug, projectId, payload);
       return res.status;
     } catch (err) {
       return false;
@@ -155,22 +153,22 @@ export const CycleSidebarHeader: FC<Props> = observer((props) => {
 
   return (
     <>
-      <div className="sticky z-10 top-0 pt-2 flex items-center justify-between bg-custom-sidebar-background-100">
+      <div className="sticky z-10 top-0 pt-2 flex items-center justify-between bg-surface-1">
         <div className="flex items-center justify-center size-5">
           <button
-            className="flex size-4 items-center justify-center rounded-full bg-custom-border-200"
+            className="flex size-6 items-center justify-center rounded-full bg-layer-3 hover:bg-layer-3-hover flex-shrink-0"
             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 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 break-words text-18 font-semibold 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 px-3 items-center justify-center rounded-sm text-center text-11 font-medium whitespace-nowrap truncate"
               style={{
                 color: currentCycle.color,
                 backgroundColor: `${currentCycle.color}20`,
@@ -225,7 +223,7 @@ export const CycleSidebarHeader: FC<Props> = observer((props) => {
                 )}
               />
               {projectUTCOffset && (
-                <span className="rounded-md text-xs px-2 cursor-default  py-1 bg-custom-background-80 text-custom-text-300">
+                <span className="rounded-md text-11 px-2 cursor-default  py-1 bg-layer-1 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 e8156fafc6..cadb83e6e8 100644
--- a/apps/web/core/components/cycles/applied-filters/date.tsx
+++ b/apps/web/core/components/cycles/applied-filters/date.tsx
@@ -11,7 +11,7 @@ type Props = {
   values: string[];
 };
 
-export const AppliedDateFilters: React.FC<Props> = observer((props) => {
+export const AppliedDateFilters = observer(function AppliedDateFilters(props: Props) {
   const { editable, handleRemove, values } = props;
 
   const getDateLabel = (value: string): string => {
@@ -36,12 +36,12 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
   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 py-1 px-1.5 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/root.tsx b/apps/web/core/components/cycles/applied-filters/root.tsx
index 59ebf55cb0..7dcad6dd2f 100644
--- a/apps/web/core/components/cycles/applied-filters/root.tsx
+++ b/apps/web/core/components/cycles/applied-filters/root.tsx
@@ -21,7 +21,7 @@ type Props = {
 
 const DATE_FILTERS = ["start_date", "end_date"];
 
-export const CycleAppliedFiltersList: React.FC<Props> = observer((props) => {
+export const CycleAppliedFiltersList = observer(function CycleAppliedFiltersList(props: Props) {
   const { appliedFilters, handleClearAllFilters, handleRemoveFilter, alwaysAllowEditing } = props;
   // store hooks
   const { allowPermissions } = useUserPermissions();
@@ -36,7 +36,7 @@ export const CycleAppliedFiltersList: React.FC<Props> = observer((props) => {
     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 +45,7 @@ export const CycleAppliedFiltersList: React.FC<Props> = observer((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>
             <div className="flex flex-wrap items-center gap-1">
               {filterKey === "status" && (
                 <AppliedStatusFilters
@@ -64,7 +64,7 @@ export const CycleAppliedFiltersList: React.FC<Props> = observer((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/cycles/applied-filters/status.tsx b/apps/web/core/components/cycles/applied-filters/status.tsx
index e54edf6b70..c0bfb956b8 100644
--- a/apps/web/core/components/cycles/applied-filters/status.tsx
+++ b/apps/web/core/components/cycles/applied-filters/status.tsx
@@ -1,4 +1,5 @@
 import { observer } from "mobx-react";
+// plane imports
 import { CYCLE_STATUS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { CloseIcon } from "@plane/propel/icons";
@@ -10,7 +11,7 @@ type Props = {
   editable: boolean | undefined;
 };
 
-export const AppliedStatusFilters: React.FC<Props> = observer((props) => {
+export const AppliedStatusFilters = observer(function AppliedStatusFilters(props: Props) {
   const { handleRemove, values, editable } = props;
   const { t } = useTranslation();
 
@@ -22,7 +23,7 @@ export const AppliedStatusFilters: React.FC<Props> = observer((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 py-1 px-1.5 text-11",
               statusDetails?.bgColor,
               statusDetails?.textColor
             )}
@@ -31,7 +32,7 @@ export const AppliedStatusFilters: React.FC<Props> = observer((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 50e8fd67a4..febfabdd31 100644
--- a/apps/web/core/components/cycles/archived-cycles/header.tsx
+++ b/apps/web/core/components/cycles/archived-cycles/header.tsx
@@ -18,7 +18,7 @@ import { useCycleFilter } from "@/hooks/store/use-cycle-filter";
 // local imports
 import { CycleFiltersSelection } from "../dropdowns";
 
-export const ArchivedCyclesHeader: FC = observer(() => {
+export const ArchivedCyclesHeader = observer(function ArchivedCyclesHeader() {
   // router
   const { projectId } = useParams();
   // refs
@@ -66,7 +66,7 @@ export const ArchivedCyclesHeader: FC = observer(() => {
   const isFiltersApplied = calculateTotalFilters(currentProjectArchivedFilters ?? {}) !== 0;
 
   return (
-    <div className="group relative flex border-b border-custom-border-200">
+    <div className="group relative flex border-b border-subtle">
       <div className="flex w-full items-center overflow-x-auto px-4 gap-2 horizontal-scrollbar scrollbar-sm">
         <ArchiveTabsList />
       </div>
@@ -75,7 +75,7 @@ export const ArchivedCyclesHeader: FC = observer(() => {
         {!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 p-2 hover:bg-layer-1 rounded-sm text-placeholder grid place-items-center"
             onClick={() => {
               setIsSearchOpen(true);
               inputRef.current?.focus();
@@ -86,16 +86,16 @@ export const ArchivedCyclesHeader: FC = observer(() => {
         )}
         <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 items-center justify-start gap-1 rounded-md border border-transparent bg-surface-1 text-placeholder 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,
+              "w-64 px-2.5 py-1.5 border-subtle 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"
+            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/modal.tsx b/apps/web/core/components/cycles/archived-cycles/modal.tsx
index 3f83ad540b..5d7b35560a 100644
--- a/apps/web/core/components/cycles/archived-cycles/modal.tsx
+++ b/apps/web/core/components/cycles/archived-cycles/modal.tsx
@@ -1,11 +1,9 @@
-"use client";
-
-import { useState, Fragment } from "react";
-import { Dialog, Transition } from "@headlessui/react";
+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";
@@ -20,7 +18,7 @@ type Props = {
   onSubmit?: () => Promise<void>;
 };
 
-export const ArchiveCycleModal: React.FC<Props> = (props) => {
+export function ArchiveCycleModal(props: Props) {
   const { workspaceSlug, projectId, cycleId, isOpen, handleClose } = props;
   // router
   const router = useAppRouter();
@@ -53,6 +51,7 @@ export const ArchiveCycleModal: React.FC<Props> = (props) => {
         });
         onClose();
         router.push(`/${workspaceSlug}/projects/${projectId}/cycles`);
+        return;
       })
       .catch(() => {
         setToast({
@@ -71,51 +70,21 @@ export const ArchiveCycleModal: React.FC<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 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 a171b9aa52..f14c153ca3 100644
--- a/apps/web/core/components/cycles/archived-cycles/root.tsx
+++ b/apps/web/core/components/cycles/archived-cycles/root.tsx
@@ -16,7 +16,7 @@ import { useCycleFilter } from "@/hooks/store/use-cycle-filter";
 import { CycleAppliedFiltersList } from "../applied-filters";
 import { ArchivedCyclesView } from "./view";
 
-export const ArchivedCycleLayoutRoot: React.FC = observer(() => {
+export const ArchivedCycleLayoutRoot = observer(function ArchivedCycleLayoutRoot() {
   // router
   const { workspaceSlug, projectId } = useParams();
   // plane hooks
@@ -57,7 +57,7 @@ export const ArchivedCycleLayoutRoot: React.FC = observer(() => {
   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 db6dc8327b..6e99016e22 100644
--- a/apps/web/core/components/cycles/archived-cycles/view.tsx
+++ b/apps/web/core/components/cycles/archived-cycles/view.tsx
@@ -16,7 +16,7 @@ export interface IArchivedCyclesView {
   projectId: string;
 }
 
-export const ArchivedCyclesView: FC<IArchivedCyclesView> = observer((props) => {
+export const ArchivedCyclesView = observer(function ArchivedCyclesView(props: IArchivedCyclesView) {
   const { workspaceSlug, projectId } = props;
   // store hooks
   const { getFilteredArchivedCycleIds, loader } = useCycle();
@@ -35,8 +35,8 @@ export const ArchivedCyclesView: FC<IArchivedCyclesView> = observer((props) => {
             className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
             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="text-18 font-medium mt-7 mb-1">No matching cycles</h5>
+          <p className="text-placeholder text-14">
             {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 817a6a283e..a604958a5a 100644
--- a/apps/web/core/components/cycles/cycle-peek-overview.tsx
+++ b/apps/web/core/components/cycles/cycle-peek-overview.tsx
@@ -14,7 +14,7 @@ type Props = {
   isArchived?: boolean;
 };
 
-export const CyclePeekOverview: React.FC<Props> = observer((props) => {
+export const CyclePeekOverview = observer(function CyclePeekOverview(props: Props) {
   const { projectId: propsProjectId, workspaceSlug, isArchived } = props;
   // router
   const router = useAppRouter();
@@ -45,7 +45,7 @@ export const CyclePeekOverview: React.FC<Props> = observer((props) => {
       {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="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 fixed md:relative right-0 z-[9]"
           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 1cc782f59c..b99b7881da 100644
--- a/apps/web/core/components/cycles/cycles-view-header.tsx
+++ b/apps/web/core/components/cycles/cycles-view-header.tsx
@@ -1,10 +1,9 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
-// icons
 import { ListFilter, Search } from "lucide-react";
-// plane helpers
+// 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 type { TCycleFilters } from "@plane/types";
@@ -20,7 +19,7 @@ type Props = {
   projectId: string;
 };
 
-export const CyclesViewHeader: React.FC<Props> = observer((props) => {
+export const CyclesViewHeader = observer(function CyclesViewHeader(props: Props) {
   const { projectId } = props;
   // refs
   const inputRef = useRef<HTMLInputElement>(null);
@@ -71,49 +70,50 @@ export const CyclesViewHeader: React.FC<Props> = observer((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();
           }}
+          icon={Search}
+        />
+      ) : (
+        <div
+          className={cn(
+            "ml-auto flex items-center justify-start gap-1 rounded-md border border-transparent bg-surface-1 text-placeholder w-0 transition-[width] ease-linear overflow-hidden opacity-0",
+            {
+              "w-64 px-2.5 py-1.5 border-subtle opacity-100": isSearchOpen,
+            }
+          )}
         >
           <Search className="h-3.5 w-3.5" />
-        </button>
+          <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>
       )}
-      <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}
-        />
-        {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 17fff9dcd3..13fce57436 100644
--- a/apps/web/core/components/cycles/cycles-view.tsx
+++ b/apps/web/core/components/cycles/cycles-view.tsx
@@ -17,7 +17,7 @@ export interface ICyclesView {
   projectId: string;
 }
 
-export const CyclesView: FC<ICyclesView> = observer((props) => {
+export const CyclesView = observer(function CyclesView(props: ICyclesView) {
   const { workspaceSlug, projectId } = props;
   // store hooks
   const { getFilteredCycleIds, getFilteredCompletedCycleIds, loader, currentProjectActiveCycleId } = useCycle();
@@ -41,8 +41,8 @@ export const CyclesView: FC<ICyclesView> = observer((props) => {
             className="mx-auto h-36 w-36 sm:h-48 sm:w-48 object-contain"
             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="mb-1 mt-7 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 2a4067252d..ea485f9810 100644
--- a/apps/web/core/components/cycles/delete-modal.tsx
+++ b/apps/web/core/components/cycles/delete-modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, useSearchParams } from "next/navigation";
@@ -24,7 +22,7 @@ interface ICycleDelete {
   projectId: string;
 }
 
-export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
+export const CycleDeleteModal = observer(function CycleDeleteModal(props: ICycleDelete) {
   const { isOpen, handleClose, cycle, workspaceSlug, projectId } = props;
   // states
   const [loader, setLoader] = useState(false);
@@ -97,7 +95,7 @@ export const CycleDeleteModal: React.FC<ICycleDelete> = observer((props) => {
       content={
         <>
           Are you sure you want to delete cycle{' "'}
-          <span className="break-words font-medium text-custom-text-100">{cycle?.name}</span>
+          <span className="break-words font-medium 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 56761b3ee1..e1c371c50d 100644
--- a/apps/web/core/components/cycles/dropdowns/estimate-type-dropdown.tsx
+++ b/apps/web/core/components/cycles/dropdowns/estimate-type-dropdown.tsx
@@ -16,7 +16,7 @@ type TProps = {
   cycleId: string;
 };
 
-export const EstimateTypeDropdown = observer((props: TProps) => {
+export const EstimateTypeDropdown = observer(function EstimateTypeDropdown(props: TProps) {
   const { value, onChange, projectId, cycleId, showDefault = false } = props;
   const { getIsPointsDataAvailable } = useCycle();
   const { areEstimateEnabledByProjectId, currentProjectEstimateType } = useProjectEstimates();
@@ -29,7 +29,7 @@ export const EstimateTypeDropdown = observer((props: TProps) => {
         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 1dbf1a3d93..a34aef8486 100644
--- a/apps/web/core/components/cycles/dropdowns/filters/end-date.tsx
+++ b/apps/web/core/components/cycles/dropdowns/filters/end-date.tsx
@@ -13,7 +13,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterEndDate: React.FC<Props> = observer((props) => {
+export const FilterEndDate = observer(function FilterEndDate(props: Props) {
   const { appliedFilters, handleUpdate, searchQuery } = props;
 
   const [previewEnabled, setPreviewEnabled] = useState(true);
@@ -67,7 +67,7 @@ export const FilterEndDate: React.FC<Props> = observer((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 italic text-placeholder">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/cycles/dropdowns/filters/root.tsx b/apps/web/core/components/cycles/dropdowns/filters/root.tsx
index 148de99463..dd527693bb 100644
--- a/apps/web/core/components/cycles/dropdowns/filters/root.tsx
+++ b/apps/web/core/components/cycles/dropdowns/filters/root.tsx
@@ -17,7 +17,7 @@ type Props = {
   isArchived?: boolean;
 };
 
-export const CycleFiltersSelection: React.FC<Props> = observer((props) => {
+export const CycleFiltersSelection = observer(function CycleFiltersSelection(props: Props) {
   const { filters, handleFiltersUpdate, isArchived = false } = props;
   // states
   const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
@@ -26,12 +26,12 @@ export const CycleFiltersSelection: React.FC<Props> = observer((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">
+          <Search className="text-placeholder" size={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 +39,12 @@ export const CycleFiltersSelection: React.FC<Props> = observer((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="h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
         {/* 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 8ac3aa6765..922a4c1c16 100644
--- a/apps/web/core/components/cycles/dropdowns/filters/start-date.tsx
+++ b/apps/web/core/components/cycles/dropdowns/filters/start-date.tsx
@@ -15,7 +15,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterStartDate: React.FC<Props> = observer((props) => {
+export const FilterStartDate = observer(function FilterStartDate(props: Props) {
   const { appliedFilters, handleUpdate, searchQuery } = props;
   const [previewEnabled, setPreviewEnabled] = useState(true);
   const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
@@ -68,7 +68,7 @@ export const FilterStartDate: React.FC<Props> = observer((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 italic text-placeholder">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 482aaabd64..b0abe13352 100644
--- a/apps/web/core/components/cycles/dropdowns/filters/status.tsx
+++ b/apps/web/core/components/cycles/dropdowns/filters/status.tsx
@@ -14,7 +14,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterStatus: React.FC<Props> = observer((props) => {
+export const FilterStatus = observer(function FilterStatus(props: Props) {
   const { appliedFilters, handleUpdate, searchQuery } = props;
   // states
   const [previewEnabled, setPreviewEnabled] = useState(true);
@@ -42,7 +42,7 @@ export const FilterStatus: React.FC<Props> = observer((props) => {
               />
             ))
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-11 italic text-placeholder">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/cycles/form.tsx b/apps/web/core/components/cycles/form.tsx
index 8206501c94..289bfbf8a9 100644
--- a/apps/web/core/components/cycles/form.tsx
+++ b/apps/web/core/components/cycles/form.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 // plane imports
@@ -34,7 +32,7 @@ const defaultValues: Partial<ICycle> = {
   end_date: null,
 };
 
-export const CycleForm: React.FC<Props> = (props) => {
+export function CycleForm(props: Props) {
   const { handleFormSubmit, handleClose, status, projectId, setActiveProject, data, isMobile = false } = props;
   // plane hooks
   const { t } = useTranslation();
@@ -92,7 +90,7 @@ export const CycleForm: React.FC<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>
@@ -113,7 +111,7 @@ export const CycleForm: React.FC<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}
@@ -123,7 +121,7 @@ export const CycleForm: React.FC<Props> = (props) => {
                 />
               )}
             />
-            <span className="text-xs text-red-500">{errors?.name?.message}</span>
+            <span className="text-11 text-red-500">{errors?.name?.message}</span>
           </div>
           <div>
             <Controller
@@ -133,7 +131,7 @@ export const CycleForm: React.FC<Props> = (props) => {
                 <TextArea
                   name="description"
                   placeholder={t("description")}
-                  className="w-full text-base resize-none min-h-24"
+                  className="w-full text-14 resize-none min-h-24"
                   hasError={Boolean(errors?.description)}
                   value={value}
                   onChange={onChange}
@@ -179,11 +177,11 @@ export const CycleForm: React.FC<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="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
+        <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")
@@ -195,4 +193,4 @@ export const CycleForm: React.FC<Props> = (props) => {
       </div>
     </form>
   );
-};
+}
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 074bc500ce..2dfd4867dc 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,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import React from "react";
 // types
@@ -18,25 +16,25 @@ type Props = {
   isExpanded?: boolean;
 };
 
-export const CycleListGroupHeader: FC<Props> = (props) => {
+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 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="inline-block line-clamp-1 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("shrink-0 size-4 text-tertiary transition-transform", {
           "rotate-180": isExpanded,
         })}
       />
     </Row>
   );
-};
+}
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 8b78e5790a..c0021d362f 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,5 +1,3 @@
-"use client";
-
 import type { FC, MouseEvent } from "react";
 import React, { useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react";
@@ -54,7 +52,7 @@ const defaultValues: Partial<ICycle> = {
   end_date: null,
 };
 
-export const CycleListItemAction: FC<Props> = observer((props) => {
+export const CycleListItemAction = observer(function CycleListItemAction(props: Props) {
   const { workspaceSlug, projectId, cycleId, cycleDetails, parentRef, isActive = false } = props;
   // router
   const { projectId: routerProjectId } = useParams();
@@ -211,26 +209,26 @@ export const CycleListItemAction: FC<Props> = observer((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 text-accent-secondary text-11 gap-1 flex-shrink-0 ${isMobile || (isActive && !searchParams.has("peekCycle")) ? "flex" : "hidden group-hover:flex"}`}
       >
-        <Eye className="h-4 w-4 my-auto  text-custom-primary-200" />
+        <Eye className="h-4 w-4 my-auto  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="px-2 h-6  text-accent-secondary flex items-center gap-1 cursor-pointer"
           onClick={() => {
             setTransferIssuesModal(true);
           }}
         >
-          <TransferIcon className="fill-custom-primary-200 w-4" />
+          <TransferIcon className="fill-accent-primary w-4" />
           <span>{t("project_cycles.transfer_work_items", { count: transferableIssuesCount })}</span>
         </div>
       )}
@@ -249,13 +247,13 @@ export const CycleListItemAction: FC<Props> = observer((props) => {
               disabled={!isProjectTimeZoneDifferent()}
               tooltipHeading={t("project_cycles.in_your_timezone")}
             >
-              <div className="flex gap-1 text-xs text-custom-text-300 font-medium items-center">
+              <div className="flex gap-1 text-11 text-tertiary font-medium items-center">
                 <CalendarDays className="h-3 w-3 flex-shrink-0 my-auto" />
                 <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="rounded-md text-11 px-2 cursor-default  py-1 bg-layer-1 text-tertiary">
                 {projectUTCOffset}
               </span>
             )}
@@ -268,7 +266,7 @@ export const CycleListItemAction: FC<Props> = observer((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={{
@@ -303,7 +301,7 @@ export const CycleListItemAction: FC<Props> = observer((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) => {
@@ -314,7 +312,7 @@ export const CycleListItemAction: FC<Props> = observer((props) => {
                 })}
               </AvatarGroup>
             ) : (
-              <MembersPropertyIcon className="h-4 w-4 text-custom-text-300" />
+              <MembersPropertyIcon className="h-4 w-4 text-tertiary" />
             )}
           </div>
         </Tooltip>
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 eddfee5820..401a555330 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,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
@@ -18,7 +16,7 @@ type Props = {
   isExpanded?: boolean;
 };
 
-export const CycleListProjectGroupHeader: FC<Props> = observer((props) => {
+export const CycleListProjectGroupHeader = observer(function CycleListProjectGroupHeader(props: Props) {
   const { projectId, count, showCount = false, isExpanded = false } = props;
   // store hooks
   const { getProjectById } = useProject();
@@ -29,7 +27,7 @@ export const CycleListProjectGroupHeader: FC<Props> = observer((props) => {
   return (
     <Row className="flex items-center gap-2 flex-shrink-0 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}
@@ -38,8 +36,8 @@ export const CycleListProjectGroupHeader: FC<Props> = observer((props) => {
         <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="inline-block line-clamp-1 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 2b1f827fb9..9ef0e1ba18 100644
--- a/apps/web/core/components/cycles/list/cycles-list-item.tsx
+++ b/apps/web/core/components/cycles/list/cycles-list-item.tsx
@@ -1,5 +1,4 @@
-"use client";
-import type { FC, MouseEvent } from "react";
+import type { MouseEvent } from "react";
 import { useRef } from "react";
 import { observer } from "mobx-react";
 import { usePathname, useSearchParams } from "next/navigation";
@@ -29,7 +28,7 @@ type TCyclesListItem = {
   className?: string;
 };
 
-export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
+export const CyclesListItem = observer(function CyclesListItem(props: TCyclesListItem) {
   const { cycleId, workspaceSlug, projectId, className = "" } = props;
   // refs
   const parentRef = useRef(null);
@@ -83,9 +82,9 @@ export const CyclesListItem: FC<TCyclesListItem> = observer((props) => {
       prependTitleElement={
         <CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}>
           {progress === 100 ? (
-            <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+            <Check 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 52954b2bbc..887f026c8c 100644
--- a/apps/web/core/components/cycles/list/cycles-list-map.tsx
+++ b/apps/web/core/components/cycles/list/cycles-list-map.tsx
@@ -7,7 +7,7 @@ type Props = {
   workspaceSlug: string;
 };
 
-export const CyclesListMap: React.FC<Props> = (props) => {
+export function CyclesListMap(props: Props) {
   const { cycleIds, projectId, workspaceSlug } = props;
 
   return (
@@ -17,4 +17,4 @@ export const CyclesListMap: React.FC<Props> = (props) => {
       ))}
     </>
   );
-};
+}
diff --git a/apps/web/core/components/cycles/list/root.tsx b/apps/web/core/components/cycles/list/root.tsx
index f50363e245..92278ffb46 100644
--- a/apps/web/core/components/cycles/list/root.tsx
+++ b/apps/web/core/components/cycles/list/root.tsx
@@ -21,7 +21,7 @@ export interface ICyclesList {
   isArchived?: boolean;
 }
 
-export const CyclesList: FC<ICyclesList> = observer((props) => {
+export const CyclesList = observer(function CyclesList(props: ICyclesList) {
   const { completedCycleIds, upcomingCycleIds, cycleIds, workspaceSlug, projectId, isArchived = false } = props;
   const { t } = useTranslation();
 
@@ -40,7 +40,7 @@ export const CyclesList: FC<ICyclesList> = observer((props) => {
               <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 border-b border-subtle bg-layer-1 cursor-pointer">
                       <CycleListGroupHeader
                         title={t("project_cycles.upcoming_cycle.label")}
                         type="upcoming"
@@ -59,7 +59,7 @@ export const CyclesList: FC<ICyclesList> = observer((props) => {
             <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 border-b border-subtle bg-layer-1 cursor-pointer">
                     <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 4a6d3cbe24..3aeb9e5925 100644
--- a/apps/web/core/components/cycles/modal.tsx
+++ b/apps/web/core/components/cycles/modal.tsx
@@ -1,4 +1,3 @@
-"use client";
 import React, { useEffect, useState } from "react";
 import { mutate } from "swr";
 // types
@@ -31,7 +30,7 @@ type CycleModalProps = {
 // services
 const cycleService = new CycleService();
 
-export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
+export function CycleCreateUpdateModal(props: CycleModalProps) {
   const { isOpen, handleClose, data, workspaceSlug, projectId } = props;
   // states
   const [activeProject, setActiveProject] = useState<string | null>(null);
@@ -137,14 +136,20 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
 
     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,
@@ -206,4 +211,4 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
       />
     </ModalCore>
   );
-};
+}
diff --git a/apps/web/core/components/cycles/quick-actions.tsx b/apps/web/core/components/cycles/quick-actions.tsx
index 242e91eca1..d0e5c74c70 100644
--- a/apps/web/core/components/cycles/quick-actions.tsx
+++ b/apps/web/core/components/cycles/quick-actions.tsx
@@ -1,10 +1,7 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
+import { MoreHorizontal } from "lucide-react";
 
-// icons
-import { ArchiveRestoreIcon, ExternalLink, LinkIcon, Pencil, Trash2 } from "lucide-react";
 // ui
 import {
   CYCLE_TRACKER_EVENTS,
@@ -13,18 +10,18 @@ import {
   CYCLE_TRACKER_ELEMENTS,
 } 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 { useCycleMenuItems } from "@/components/common/quick-actions-helper";
 import { captureClick, captureError, captureSuccess } from "@/helpers/event-tracker.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";
@@ -38,7 +35,7 @@ type Props = {
   customClassName?: string;
 };
 
-export const CycleQuickActions: React.FC<Props> = observer((props) => {
+export const CycleQuickActions = observer(function CycleQuickActions(props: Props) {
   const { parentRef, cycleId, projectId, workspaceSlug, customClassName } = props;
   // router
   const router = useAppRouter();
@@ -52,12 +49,6 @@ export const CycleQuickActions: React.FC<Props> = observer((props) => {
   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],
@@ -66,8 +57,6 @@ export const CycleQuickActions: React.FC<Props> = observer((props) => {
     projectId
   );
 
-  const { isEndCycleModalOpen, setEndCycleModalOpen, endCycleContextMenu } = useEndCycle(isCurrentCycle);
-
   const cycleLink = `${workspaceSlug}/projects/${projectId}/cycles/${cycleId}`;
   const handleCopyText = () =>
     copyUrlToClipboard(cycleLink).then(() => {
@@ -79,12 +68,6 @@ export const CycleQuickActions: React.FC<Props> = observer((props) => {
     });
   const handleOpenInNewTab = () => window.open(`/${cycleLink}`, "_blank");
 
-  const handleEditCycle = () => {
-    setUpdateModal(true);
-  };
-
-  const handleArchiveCycle = () => setArchiveCycleModal(true);
-
   const handleRestoreCycle = async () =>
     await restoreCycle(workspaceSlug, projectId, cycleId)
       .then(() => {
@@ -115,70 +98,35 @@ export const CycleQuickActions: React.FC<Props> = observer((props) => {
         });
       });
 
-  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,
-    },
-  ];
+  const MENU_ITEMS: TContextMenuItem[] = Array.isArray(menuResult) ? menuResult : menuResult.items;
+  const additionalModals = Array.isArray(menuResult) ? null : menuResult.modals;
 
-  if (endCycleContextMenu) MENU_ITEMS.splice(3, 0, endCycleContextMenu);
+  const CONTEXT_MENU_ITEMS = MENU_ITEMS.map(function CONTEXT_MENU_ITEMS(item) {
+    return {
+      ...item,
 
-  const CONTEXT_MENU_ITEMS = MENU_ITEMS.map((item) => ({
-    ...item,
-    action: () => {
-      captureClick({
-        elementName: CYCLE_TRACKER_ELEMENTS.CONTEXT_MENU,
-      });
-      item.action();
-    },
-  }));
+      action: () => {
+        captureClick({
+          elementName: CYCLE_TRACKER_ELEMENTS.CONTEXT_MENU,
+        });
+        item.action();
+      },
+    };
+  });
 
   return (
     <>
@@ -205,21 +153,17 @@ export const CycleQuickActions: React.FC<Props> = observer((props) => {
             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 (
@@ -234,19 +178,19 @@ export const CycleQuickActions: React.FC<Props> = observer((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("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("text-tertiary whitespace-pre-line", {
+                      "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 71e93237dc..32a5c2c5e8 100644
--- a/apps/web/core/components/cycles/transfer-issues-modal.tsx
+++ b/apps/web/core/components/cycles/transfer-issues-modal.tsx
@@ -1,17 +1,13 @@
-"use client";
-
-import React, { useState } from "react";
+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 { 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;
@@ -19,7 +15,7 @@ type Props = {
   cycleId: string;
 };
 
-export const TransferIssuesModal: React.FC<Props> = observer((props) => {
+export const TransferIssuesModal = observer(function TransferIssuesModal(props: Props) {
   const { isOpen, handleClose, cycleId } = props;
   // states
   const [query, setQuery] = useState("");
@@ -74,109 +70,71 @@ export const TransferIssuesModal: React.FC<Props> = observer((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">
+          <Search className="h-4 w-4 text-secondary" />
+          <input
+            className="outline-none text-13"
+            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-shrink-0 flex 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 bcc1b76159..666a98c117 100644
--- a/apps/web/core/components/cycles/transfer-issues.tsx
+++ b/apps/web/core/components/cycles/transfer-issues.tsx
@@ -1,4 +1,3 @@
-"use client";
 import React from "react";
 import { AlertCircle } from "lucide-react";
 // ui
@@ -11,27 +10,22 @@ type Props = {
   disabled?: boolean;
 };
 
-export const TransferIssues: React.FC<Props> = (props) => {
+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>
       )}
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/dropdowns/buttons.tsx b/apps/web/core/components/dropdowns/buttons.tsx
index b3d5355bd8..b7e04a3673 100644
--- a/apps/web/core/components/dropdowns/buttons.tsx
+++ b/apps/web/core/components/dropdowns/buttons.tsx
@@ -1,6 +1,6 @@
-"use client";
 import React from "react";
 // helpers
+import { Button } from "@plane/propel/button";
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";
 // types
@@ -29,7 +29,7 @@ type ButtonProps = {
   renderToolTipByDefault?: boolean;
 };
 
-export const DropdownButton: React.FC<DropdownButtonProps> = (props) => {
+export function DropdownButton(props: DropdownButtonProps) {
   const {
     children,
     className,
@@ -58,9 +58,9 @@ export const DropdownButton: React.FC<DropdownButtonProps> = (props) => {
       {children}
     </ButtonToRender>
   );
-};
+}
 
-const BorderButton: React.FC<ButtonProps> = (props) => {
+function BorderButton(props: ButtonProps) {
   const { children, className, isActive, tooltipContent, renderToolTipByDefault, tooltipHeading, showTooltip } = props;
   const { isMobile } = usePlatformOS();
 
@@ -72,20 +72,24 @@ const BorderButton: React.FC<ButtonProps> = (props) => {
       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 },
+          "h-full w-full flex items-center justify-start gap-1.5 border-[0.5px] border-strong",
+          {
+            "bg-layer-transparent-active": isActive,
+          },
           className
         )}
       >
         {children}
-      </div>
+      </Button>
     </Tooltip>
   );
-};
+}
 
-const BackgroundButton: React.FC<ButtonProps> = (props) => {
+function BackgroundButton(props: ButtonProps) {
   const { children, className, tooltipContent, tooltipHeading, renderToolTipByDefault, showTooltip } = props;
   const { isMobile } = usePlatformOS();
   return (
@@ -96,19 +100,21 @@ const BackgroundButton: React.FC<ButtonProps> = (props) => {
       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",
+          "h-full w-full flex items-center justify-between gap-1.5 bg-layer-3 hover:bg-layer-1-hover",
           className
         )}
       >
         {children}
-      </div>
+      </Button>
     </Tooltip>
   );
-};
+}
 
-const TransparentButton: React.FC<ButtonProps> = (props) => {
+function TransparentButton(props: ButtonProps) {
   const { children, className, isActive, tooltipContent, tooltipHeading, renderToolTipByDefault, showTooltip } = props;
   const { isMobile } = usePlatformOS();
   return (
@@ -119,15 +125,19 @@ const TransparentButton: React.FC<ButtonProps> = (props) => {
       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 },
+          "h-full w-full flex 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/cycle/cycle-options.tsx b/apps/web/core/components/dropdowns/cycle/cycle-options.tsx
index 3bde0dfca1..aedbd75ab2 100644
--- a/apps/web/core/components/dropdowns/cycle/cycle-options.tsx
+++ b/apps/web/core/components/dropdowns/cycle/cycle-options.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useEffect, useRef, useState } from "react";
 import type { Placement } from "@popperjs/core";
@@ -37,7 +35,7 @@ type CycleOptionsProps = {
   currentCycleId?: string;
 };
 
-export const CycleOptions: FC<CycleOptionsProps> = observer((props) => {
+export const CycleOptions = observer(function CycleOptions(props: CycleOptionsProps) {
   const { projectId, isOpen, referenceElement, placement, canRemoveCycle, currentCycleId } = props;
   // i18n
   const { t } = useTranslation();
@@ -124,17 +122,17 @@ export const CycleOptions: FC<CycleOptionsProps> = observer((props) => {
   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">
+          <Search 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")}
@@ -150,9 +148,9 @@ export const CycleOptions: FC<CycleOptionsProps> = observer((props) => {
                   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 select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 ${
+                      active ? "bg-layer-transparent-hover" : ""
+                    } ${selected ? "text-primary" : "text-secondary"}`
                   }
                 >
                   {({ selected }) => (
@@ -164,10 +162,10 @@ export const CycleOptions: FC<CycleOptionsProps> = observer((props) => {
                 </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 italic text-placeholder">{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 italic text-placeholder">{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 cb2df46835..f5d8d7adb1 100644
--- a/apps/web/core/components/dropdowns/cycle/index.tsx
+++ b/apps/web/core/components/dropdowns/cycle/index.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { ReactNode } from "react";
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
@@ -31,7 +29,7 @@ type Props = TDropdownProps & {
   currentCycleId?: string;
 };
 
-export const CycleDropdown: React.FC<Props> = observer((props) => {
+export const CycleDropdown = observer(function CycleDropdown(props: Props) {
   const {
     button,
     buttonClassName,
@@ -85,10 +83,7 @@ export const CycleDropdown: React.FC<Props> = observer((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}
@@ -100,9 +95,9 @@ export const CycleDropdown: React.FC<Props> = observer((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
@@ -122,7 +117,7 @@ export const CycleDropdown: React.FC<Props> = observer((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 2226980420..1ffb264311 100644
--- a/apps/web/core/components/dropdowns/date-range.tsx
+++ b/apps/web/core/components/dropdowns/date-range.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useEffect, useRef, useState } from "react";
 import type { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
@@ -66,7 +64,7 @@ type Props = {
   renderInPortal?: boolean;
 };
 
-export const DateRangeDropdown: React.FC<Props> = observer((props) => {
+export const DateRangeDropdown = observer(function DateRangeDropdown(props: Props) {
   const { t } = useTranslation();
   const {
     buttonClassName,
@@ -159,7 +157,7 @@ export const DateRangeDropdown: React.FC<Props> = observer((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
@@ -194,16 +192,16 @@ export const DateRangeDropdown: React.FC<Props> = observer((props) => {
               <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>
                 </>
               )
             )}
@@ -223,7 +221,7 @@ export const DateRangeDropdown: React.FC<Props> = observer((props) => {
           <>
             <span
               className={cn(
-                "h-full flex items-center justify-center gap-1 rounded-sm flex-grow",
+                "h-full flex items-center justify-center gap-1 rounded-xs flex-grow",
                 buttonFromDateClassName
               )}
             >
@@ -233,7 +231,7 @@ export const DateRangeDropdown: React.FC<Props> = observer((props) => {
             <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",
+                "h-full flex items-center justify-center gap-1 rounded-xs flex-grow",
                 buttonToDateClassName
               )}
             >
@@ -259,13 +257,13 @@ export const DateRangeDropdown: React.FC<Props> = observer((props) => {
   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="my-1 bg-surface-1 border-[0.5px] border-subtle-1 rounded-md overflow-hidden z-30"
         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 a8272dd4bb..d1185c3a9a 100644
--- a/apps/web/core/components/dropdowns/date.tsx
+++ b/apps/web/core/components/dropdowns/date.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { createPortal } from "react-dom";
@@ -37,9 +35,10 @@ type Props = TDropdownProps & {
   closeOnSelect?: boolean;
   formatToken?: string;
   renderByDefault?: boolean;
+  labelClassName?: string;
 };
 
-export const DateDropdown: React.FC<Props> = observer((props) => {
+export const DateDropdown = observer(function DateDropdown(props: Props) {
   const {
     buttonClassName = "",
     buttonContainerClassName,
@@ -64,6 +63,7 @@ export const DateDropdown: React.FC<Props> = observer((props) => {
     value,
     formatToken,
     renderByDefault = true,
+    labelClassName = "",
   } = props;
   // states
   const [isOpen, setIsOpen] = useState(defaultOpen);
@@ -120,7 +120,7 @@ export const DateDropdown: React.FC<Props> = observer((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
@@ -140,7 +140,9 @@ export const DateDropdown: React.FC<Props> = observer((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
@@ -176,7 +178,7 @@ export const DateDropdown: React.FC<Props> = observer((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",
+                "my-1 bg-surface-1 shadow-raised-200 border-[0.5px] border-strong rounded-md overflow-hidden z-30",
                 optionsClassName
               )}
               ref={setPopperElement}
@@ -184,7 +186,7 @@ export const DateDropdown: React.FC<Props> = observer((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 ea7c59b6e5..0f765b2430 100644
--- a/apps/web/core/components/dropdowns/estimate.tsx
+++ b/apps/web/core/components/dropdowns/estimate.tsx
@@ -40,7 +40,7 @@ type DropdownOptions =
     }[]
   | undefined;
 
-export const EstimateDropdown: React.FC<Props> = observer((props) => {
+export const EstimateDropdown = observer(function EstimateDropdown(props: Props) {
   const {
     button,
     buttonClassName,
@@ -173,7 +173,7 @@ export const EstimateDropdown: React.FC<Props> = observer((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 +192,16 @@ export const EstimateDropdown: React.FC<Props> = observer((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 +229,17 @@ export const EstimateDropdown: React.FC<Props> = observer((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">
+              <Search 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,7 +250,7 @@ export const EstimateDropdown: React.FC<Props> = observer((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 select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 text-secondary`}
                 >
                   {/* NOTE: This condition renders when estimates are not enabled for the project */}
                   <div className="flex-grow flex items-center gap-2">
@@ -263,11 +267,11 @@ export const EstimateDropdown: React.FC<Props> = observer((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 select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5",
                                 {
-                                  "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,
                                 }
                               )}
                             >
@@ -278,12 +282,10 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
                         </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 italic text-placeholder">{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 italic text-placeholder">{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
new file mode 100644
index 0000000000..6b0e9d7d91
--- /dev/null
+++ b/apps/web/core/components/dropdowns/intake-state/base.tsx
@@ -0,0 +1,256 @@
+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 type { IIntakeState } from "@plane/types";
+import { ComboDropDown, Spinner } from "@plane/ui";
+import { cn } from "@plane/utils";
+// components
+import { DropdownButton } from "@/components/dropdowns/buttons";
+import { BUTTON_VARIANTS_WITH_TEXT } from "@/components/dropdowns/constants";
+import type { TDropdownProps } from "@/components/dropdowns/types";
+// hooks
+import { useDropdown } from "@/hooks/use-dropdown";
+// plane web imports
+import { StateOption } from "@/plane-web/components/workflow";
+
+export type TWorkItemStateDropdownBaseProps = TDropdownProps & {
+  alwaysAllowStateChange?: boolean;
+  button?: ReactNode;
+  dropdownArrow?: boolean;
+  dropdownArrowClassName?: string;
+  filterAvailableStateIds?: boolean;
+  getStateById: (stateId: string | null | undefined) => IIntakeState | undefined;
+  iconSize?: string;
+  isForWorkItemCreation?: boolean;
+  isInitializing?: boolean;
+  onChange: (val: string) => void;
+  onClose?: () => void;
+  onDropdownOpen?: () => void;
+  projectId: string | undefined;
+  renderByDefault?: boolean;
+  showDefaultState?: boolean;
+  stateIds: string[];
+  value: string | undefined | null;
+};
+
+export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdownBase(
+  props: TWorkItemStateDropdownBaseProps
+) {
+  const {
+    button,
+    buttonClassName,
+    buttonContainerClassName,
+    buttonVariant,
+    className = "",
+    disabled = false,
+    dropdownArrow = false,
+    dropdownArrowClassName = "",
+    getStateById,
+    hideIcon = false,
+    iconSize = "size-4",
+    isInitializing = false,
+    onChange,
+    onClose,
+    onDropdownOpen,
+    placement,
+    renderByDefault = true,
+    showDefaultState = true,
+    showTooltip = false,
+    stateIds,
+    tabIndex,
+    value,
+  } = props;
+  // refs
+  const dropdownRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  // popper-js refs
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  // states
+  const [query, setQuery] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  // store hooks
+  const { t } = useTranslation();
+  const statesList = stateIds.map((stateId) => getStateById(stateId)).filter((state) => !!state);
+  const defaultState = statesList?.find((state) => state?.default) || statesList[0];
+  const stateValue = value ? value : showDefaultState ? defaultState?.id : undefined;
+  // popper-js init
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: placement ?? "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+  // dropdown init
+  const { handleClose, handleKeyDown, handleOnClick, searchInputKeyDown } = useDropdown({
+    dropdownRef,
+    inputRef,
+    isOpen,
+    onClose,
+    onOpen: onDropdownOpen,
+    query,
+    setIsOpen,
+    setQuery,
+  });
+
+  // derived values
+  const options = statesList?.map((state) => ({
+    value: state?.id,
+    query: `${state?.name}`,
+    content: (
+      <div className="flex items-center gap-2">
+        <IntakeStateGroupIcon
+          stateGroup={state?.group ?? "triage"}
+          color={state?.color}
+          className={cn("flex-shrink-0", iconSize)}
+        />
+        <span className="flex-grow truncate text-left">{state?.name}</span>
+      </div>
+    ),
+  }));
+
+  const filteredOptions =
+    query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
+
+  const selectedState = stateValue ? getStateById(stateValue) : undefined;
+
+  const dropdownOnChange = (val: string) => {
+    onChange(val);
+    handleClose();
+  };
+
+  const comboButton = (
+    <>
+      {button ? (
+        <button
+          ref={setReferenceElement}
+          type="button"
+          className={cn("clickable block h-full w-full outline-none", buttonContainerClassName)}
+          onClick={handleOnClick}
+          disabled={disabled}
+          tabIndex={tabIndex}
+        >
+          {button}
+        </button>
+      ) : (
+        <button
+          tabIndex={tabIndex}
+          ref={setReferenceElement}
+          type="button"
+          className={cn(
+            "clickable block h-full max-w-full outline-none",
+            {
+              "cursor-not-allowed text-secondary": disabled,
+              "cursor-pointer": !disabled,
+            },
+            buttonContainerClassName
+          )}
+          onClick={handleOnClick}
+          disabled={disabled}
+        >
+          <DropdownButton
+            className={buttonClassName}
+            isActive={isOpen}
+            tooltipHeading={t("state")}
+            tooltipContent={selectedState?.name ?? t("state")}
+            showTooltip={showTooltip}
+            variant={buttonVariant}
+            renderToolTipByDefault={renderByDefault}
+          >
+            {isInitializing ? (
+              <Spinner className="h-3.5 w-3.5" />
+            ) : (
+              <>
+                {!hideIcon && (
+                  <IntakeStateGroupIcon
+                    stateGroup={selectedState?.group ?? "triage"}
+                    color={selectedState?.color ?? "var(--text-color-tertiary)"}
+                    className={cn("flex-shrink-0", iconSize)}
+                  />
+                )}
+                {BUTTON_VARIANTS_WITH_TEXT.includes(buttonVariant) && (
+                  <span className="flex-grow truncate text-left">{selectedState?.name ?? t("state")}</span>
+                )}
+                {dropdownArrow && (
+                  <ChevronDownIcon
+                    className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)}
+                    aria-hidden="true"
+                  />
+                )}
+              </>
+            )}
+          </DropdownButton>
+        </button>
+      )}
+    </>
+  );
+
+  return (
+    <ComboDropDown
+      as="div"
+      ref={dropdownRef}
+      className={cn("h-full", className)}
+      value={stateValue}
+      onChange={dropdownOnChange}
+      disabled={disabled}
+      onKeyDown={handleKeyDown}
+      button={comboButton}
+      renderByDefault={renderByDefault}
+    >
+      {isOpen && (
+        <Combobox.Options className="fixed z-10" static>
+          <div
+            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-sm border border-subtle bg-surface-2 px-2">
+              <Search 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-11 text-secondary placeholder:text-placeholder focus:outline-none"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder={t("common.search.label")}
+                displayValue={(assigned: any) => assigned?.name}
+                onKeyDown={searchInputKeyDown}
+              />
+            </div>
+            <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+              {filteredOptions ? (
+                filteredOptions.length > 0 ? (
+                  filteredOptions.map((option) => (
+                    <StateOption
+                      {...props}
+                      key={option.value}
+                      option={option}
+                      selectedValue={value}
+                      className="flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5"
+                    />
+                  ))
+                ) : (
+                  <p className="px-1.5 py-1 italic text-placeholder">{t("no_matching_results")}</p>
+                )
+              ) : (
+                <p className="px-1.5 py-1 italic text-placeholder">{t("loading")}</p>
+              )}
+            </div>
+          </div>
+        </Combobox.Options>
+      )}
+    </ComboDropDown>
+  );
+});
diff --git a/apps/web/core/components/dropdowns/intake-state/dropdown.tsx b/apps/web/core/components/dropdowns/intake-state/dropdown.tsx
new file mode 100644
index 0000000000..2a0e419885
--- /dev/null
+++ b/apps/web/core/components/dropdowns/intake-state/dropdown.tsx
@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// hooks
+import { useProjectState } from "@/hooks/store/use-project-state";
+// local imports
+import type { TWorkItemStateDropdownBaseProps } from "./base";
+import { WorkItemStateDropdownBase } from "./base";
+
+type TWorkItemStateDropdownProps = Omit<
+  TWorkItemStateDropdownBaseProps,
+  "stateIds" | "getStateById" | "onDropdownOpen" | "isInitializing"
+> & {
+  stateIds?: string[];
+};
+
+export const IntakeStateDropdown = observer(function IntakeStateDropdown(props: TWorkItemStateDropdownProps) {
+  const { projectId, stateIds: propsStateIds } = props;
+  // router params
+  const { workspaceSlug } = useParams();
+  // states
+  const [stateLoader, setStateLoader] = useState(false);
+  // store hooks
+  const { fetchProjectIntakeState, getProjectIntakeStateIds, getIntakeStateById } = useProjectState();
+  // derived values
+  const stateIds = propsStateIds ?? getProjectIntakeStateIds(projectId);
+
+  // fetch states if not provided
+  const onDropdownOpen = async () => {
+    if ((stateIds === undefined || stateIds.length === 0) && workspaceSlug && projectId) {
+      setStateLoader(true);
+      await fetchProjectIntakeState(workspaceSlug.toString(), projectId);
+      setStateLoader(false);
+    }
+  };
+
+  return (
+    <WorkItemStateDropdownBase
+      {...props}
+      getStateById={getIntakeStateById}
+      isInitializing={stateLoader}
+      stateIds={stateIds ?? []}
+      onDropdownOpen={onDropdownOpen}
+    />
+  );
+});
diff --git a/apps/web/core/components/dropdowns/layout.tsx b/apps/web/core/components/dropdowns/layout.tsx
index 56a8a7a94c..6d246b39fd 100644
--- a/apps/web/core/components/dropdowns/layout.tsx
+++ b/apps/web/core/components/dropdowns/layout.tsx
@@ -9,6 +9,7 @@ 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;
@@ -16,7 +17,7 @@ type TLayoutDropDown = {
   disabledLayouts?: EIssueLayoutTypes[];
 };
 
-export const LayoutDropDown = observer((props: TLayoutDropDown) => {
+export const LayoutDropDown = observer(function LayoutDropDown(props: TLayoutDropDown) {
   const { onChange, value = EIssueLayoutTypes.LIST, disabledLayouts = [] } = props;
   // plane i18n
   const { t } = useTranslation();
@@ -38,9 +39,9 @@ export const LayoutDropDown = observer((props: TLayoutDropDown) => {
   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 gap-2 items-center text-secondary">
+        <IssueLayoutIcon layout={dropdownValue.key} strokeWidth={2} className={`size-3.5 text-secondary`} />
+        <span className="font-medium text-11">{t(dropdownValue.i18n_label)}</span>
       </div>
     );
   }, []);
@@ -49,10 +50,10 @@ export const LayoutDropDown = observer((props: TLayoutDropDown) => {
     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={cn("flex gap-2 items-center text-secondary 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>
+          <IssueLayoutIcon layout={dropdownValue.key} strokeWidth={2} className={`size-3 text-secondary`} />
+          <span className="font-medium text-11">{t(dropdownValue.i18n_label)}</span>
         </div>
         {props.selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
       </div>
@@ -67,7 +68,7 @@ export const LayoutDropDown = observer((props: TLayoutDropDown) => {
       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 826369abb7..3ca658c814 100644
--- a/apps/web/core/components/dropdowns/member/avatar.tsx
+++ b/apps/web/core/components/dropdowns/member/avatar.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import type { LucideIcon } from "lucide-react";
 import { MembersPropertyIcon } from "@plane/propel/icons";
@@ -18,7 +16,7 @@ type AvatarProps = {
   size?: "sm" | "md" | "base" | "lg" | number;
 };
 
-export const ButtonAvatars: React.FC<AvatarProps> = observer((props) => {
+export const ButtonAvatars = observer(function ButtonAvatars(props: AvatarProps) {
   const { showTooltip, userIds, icon: Icon, size = "md" } = props;
   // store hooks
   const { getUserDetails } = useMember();
diff --git a/apps/web/core/components/dropdowns/member/base.tsx b/apps/web/core/components/dropdowns/member/base.tsx
index 779b893100..73190676b1 100644
--- a/apps/web/core/components/dropdowns/member/base.tsx
+++ b/apps/web/core/components/dropdowns/member/base.tsx
@@ -27,7 +27,7 @@ type TMemberDropdownBaseProps = {
   renderByDefault?: boolean;
 } & MemberDropdownProps;
 
-export const MemberDropdownBase: React.FC<TMemberDropdownBaseProps> = observer((props) => {
+export const MemberDropdownBase = observer(function MemberDropdownBase(props: TMemberDropdownBaseProps) {
   const { t } = useTranslation();
   const {
     button,
@@ -122,7 +122,7 @@ export const MemberDropdownBase: React.FC<TMemberDropdownBaseProps> = observer((
           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 +132,7 @@ export const MemberDropdownBase: React.FC<TMemberDropdownBaseProps> = observer((
           tabIndex={tabIndex}
         >
           <DropdownButton
-            className={cn("text-xs", buttonClassName)}
+            className={cn("text-11", buttonClassName)}
             isActive={isOpen}
             tooltipHeading={placeholder}
             tooltipContent={
@@ -144,7 +144,7 @@ export const MemberDropdownBase: React.FC<TMemberDropdownBaseProps> = observer((
           >
             {!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 leading-5 text-left text-body-xs-medium">
                 {getDisplayName(value, showUserDetails, placeholder)}
               </span>
             )}
diff --git a/apps/web/core/components/dropdowns/member/dropdown.tsx b/apps/web/core/components/dropdowns/member/dropdown.tsx
index 8708b880c5..b573bc074a 100644
--- a/apps/web/core/components/dropdowns/member/dropdown.tsx
+++ b/apps/web/core/components/dropdowns/member/dropdown.tsx
@@ -16,7 +16,7 @@ type TMemberDropdownProps = {
   renderByDefault?: boolean;
 } & MemberDropdownProps;
 
-export const MemberDropdown: React.FC<TMemberDropdownProps> = observer((props) => {
+export const MemberDropdown = observer(function MemberDropdown(props: TMemberDropdownProps) {
   const { memberIds: propsMemberIds, projectId } = props;
   // router params
   const { workspaceSlug } = useParams();
diff --git a/apps/web/core/components/dropdowns/member/member-options.tsx b/apps/web/core/components/dropdowns/member/member-options.tsx
index f89396225c..d45f839877 100644
--- a/apps/web/core/components/dropdowns/member/member-options.tsx
+++ b/apps/web/core/components/dropdowns/member/member-options.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useRef, useState } from "react";
 import type { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
@@ -31,7 +29,7 @@ interface Props {
   referenceElement: HTMLButtonElement | null;
 }
 
-export const MemberOptions: React.FC<Props> = observer((props: Props) => {
+export const MemberOptions = observer(function MemberOptions(props: Props) {
   const {
     getUserDetails,
     isOpen,
@@ -95,7 +93,7 @@ export const MemberOptions: React.FC<Props> = observer((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 ?? "")} />
               )}
@@ -103,7 +101,7 @@ export const MemberOptions: React.FC<Props> = observer((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}
@@ -121,7 +119,7 @@ export const MemberOptions: React.FC<Props> = observer((props: Props) => {
     <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",
+          "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 z-30",
           optionsClassName
         )}
         ref={setPopperElement}
@@ -130,12 +128,12 @@ export const MemberOptions: React.FC<Props> = observer((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">
+          <Search 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")}
@@ -154,9 +152,9 @@ export const MemberOptions: React.FC<Props> = observer((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 select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5",
+                          active && "bg-layer-transparent-hover",
+                          selected ? "text-primary" : "text-secondary",
                           isUserSuspended(option.value, workspaceSlug?.toString())
                             ? "cursor-not-allowed"
                             : "cursor-pointer"
@@ -179,10 +177,10 @@ export const MemberOptions: React.FC<Props> = observer((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 italic text-placeholder">{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 italic text-placeholder">{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 92a3d1e82a..bbf337ac78 100644
--- a/apps/web/core/components/dropdowns/merged-date.tsx
+++ b/apps/web/core/components/dropdowns/merged-date.tsx
@@ -16,7 +16,7 @@ type Props = {
  * - Same year, different month: "Jan 24 - Feb 6, 2025"
  * - Different year: "Dec 28, 2024 - Jan 4, 2025"
  */
-export const MergedDateDisplay: React.FC<Props> = observer((props) => {
+export const MergedDateDisplay = observer(function MergedDateDisplay(props: Props) {
   const { startDate, endDate, className = "" } = props;
 
   // Parse dates
diff --git a/apps/web/core/components/dropdowns/module/base.tsx b/apps/web/core/components/dropdowns/module/base.tsx
index 7743c28eab..83459d17d5 100644
--- a/apps/web/core/components/dropdowns/module/base.tsx
+++ b/apps/web/core/components/dropdowns/module/base.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { ReactNode } from "react";
 import { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
@@ -43,7 +41,7 @@ type TModuleDropdownBaseProps = TDropdownProps & {
       }
   );
 
-export const ModuleDropdownBase: React.FC<TModuleDropdownBaseProps> = observer((props) => {
+export const ModuleDropdownBase = observer(function ModuleDropdownBase(props: TModuleDropdownBaseProps) {
   const {
     button,
     buttonClassName,
@@ -113,10 +111,7 @@ export const ModuleDropdownBase: React.FC<TModuleDropdownBaseProps> = observer((
         <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}
@@ -128,9 +123,9 @@ export const ModuleDropdownBase: React.FC<TModuleDropdownBaseProps> = observer((
           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
diff --git a/apps/web/core/components/dropdowns/module/button-content.tsx b/apps/web/core/components/dropdowns/module/button-content.tsx
index 0aa2940d8f..a2ea4561d7 100644
--- a/apps/web/core/components/dropdowns/module/button-content.tsx
+++ b/apps/web/core/components/dropdowns/module/button-content.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 // plane imports
 import { CloseIcon, ModuleIcon, ChevronDownIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -22,7 +20,7 @@ type ModuleButtonContentProps = {
   className?: string;
 };
 
-export const ModuleButtonContent: React.FC<ModuleButtonContentProps> = (props) => {
+export function ModuleButtonContent(props: ModuleButtonContentProps) {
   const {
     disabled,
     dropdownArrow,
@@ -47,7 +45,7 @@ export const ModuleButtonContent: React.FC<ModuleButtonContentProps> = (props) =
           <div className="relative flex items-center max-w-full 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"}`
@@ -64,7 +62,7 @@ export const ModuleButtonContent: React.FC<ModuleButtonContentProps> = (props) =
                 <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
                   )}
                 >
@@ -77,7 +75,7 @@ export const ModuleButtonContent: React.FC<ModuleButtonContentProps> = (props) =
                       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 && (
@@ -95,7 +93,7 @@ export const ModuleButtonContent: React.FC<ModuleButtonContentProps> = (props) =
                           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-red-500" />
                       </button>
                     </Tooltip>
                   )}
@@ -126,4 +124,4 @@ export const ModuleButtonContent: React.FC<ModuleButtonContentProps> = (props) =
         )}
       </>
     );
-};
+}
diff --git a/apps/web/core/components/dropdowns/module/dropdown.tsx b/apps/web/core/components/dropdowns/module/dropdown.tsx
index 8465765a07..40fad645d8 100644
--- a/apps/web/core/components/dropdowns/module/dropdown.tsx
+++ b/apps/web/core/components/dropdowns/module/dropdown.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { ReactNode } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -32,7 +30,7 @@ type TModuleDropdownProps = TDropdownProps & {
       }
   );
 
-export const ModuleDropdown: React.FC<TModuleDropdownProps> = observer((props) => {
+export const ModuleDropdown = observer(function ModuleDropdown(props: TModuleDropdownProps) {
   const { projectId } = props;
   // router
   const { workspaceSlug } = useParams();
diff --git a/apps/web/core/components/dropdowns/module/module-options.tsx b/apps/web/core/components/dropdowns/module/module-options.tsx
index 6cc6290129..afbb130694 100644
--- a/apps/web/core/components/dropdowns/module/module-options.tsx
+++ b/apps/web/core/components/dropdowns/module/module-options.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useRef, useState } from "react";
 import type { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
@@ -32,7 +30,7 @@ interface Props {
   referenceElement: HTMLButtonElement | null;
 }
 
-export const ModuleOptions = observer((props: Props) => {
+export const ModuleOptions = observer(function ModuleOptions(props: Props) {
   const { getModuleById, isOpen, moduleIds, multiple, onDropdownOpen, placement, referenceElement } = props;
   // refs
   const inputRef = useRef<HTMLInputElement | null>(null);
@@ -109,17 +107,17 @@ export const ModuleOptions = observer((props: Props) => {
   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">
+          <Search 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")}
@@ -136,11 +134,11 @@ export const ModuleOptions = observer((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 select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5",
                       {
-                        "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,
                       }
                     )
                   }
@@ -154,10 +152,10 @@ export const ModuleOptions = observer((props: Props) => {
                 </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 italic text-placeholder">{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 italic text-placeholder">{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 e987821fdf..0932320c1c 100644
--- a/apps/web/core/components/dropdowns/priority.tsx
+++ b/apps/web/core/components/dropdowns/priority.tsx
@@ -1,8 +1,5 @@
-"use client";
-
 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 { Combobox } from "@headlessui/react";
@@ -49,7 +46,7 @@ type ButtonProps = {
   renderToolTipByDefault?: boolean;
 };
 
-const BorderButton = (props: ButtonProps) => {
+function BorderButton(props: ButtonProps) {
   const {
     className,
     dropdownArrow,
@@ -66,11 +63,11 @@ const 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();
@@ -86,13 +83,13 @@ const 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",
+          "h-full flex items-center gap-1.5 border-[0.5px] 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
         )}
@@ -102,91 +99,7 @@ const 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,
-              })}
-            >
-              <PriorityIcon
-                priority={priority}
-                size={12}
-                className={cn("flex-shrink-0", {
-                  // increase the icon size if text is hidden
-                  "h-3.5 w-3.5": hideText,
-                  // centre align the icons if text is hidden
-                  "translate-x-[0.0625rem]": hideText && priority === "high",
-                  "translate-x-0.5": hideText && priority === "medium",
-                  "translate-x-1": hideText && priority === "low",
-                  // highlight the icon if priority is urgent
-                })}
-              />
-            </div>
-          ) : (
-            <SignalHigh className="size-3" />
-          ))}
-        {!hideText && <span className="flex-grow truncate">{priorityDetails?.title ?? placeholder}</span>}
-        {dropdownArrow && (
-          <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
-        )}
-      </div>
-    </Tooltip>
-  );
-};
-
-const BackgroundButton = (props: ButtonProps) => {
-  const {
-    className,
-    dropdownArrow,
-    dropdownArrowClassName,
-    hideIcon = false,
-    hideText = false,
-    highlightUrgent,
-    placeholder,
-    priority,
-    showTooltip,
-    renderToolTipByDefault = true,
-  } = props;
-
-  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",
-  };
-
-  const { isMobile } = usePlatformOS();
-  const { t } = useTranslation();
-
-  return (
-    <Tooltip
-      tooltipHeading={t("priority")}
-      tooltipContent={t(priorityDetails?.key ?? "none")}
-      disabled={!showTooltip}
-      isMobile={isMobile}
-      renderByDefault={renderToolTipByDefault}
-    >
-      <div
-        className={cn(
-          "h-full flex items-center gap-1.5 rounded text-xs 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,
-          },
-          className
-        )}
-      >
-        {!hideIcon &&
-          (priority ? (
-            <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,
+                "p-0.5 rounded-sm border border-priority-urgent": priority === "urgent" && !hideText && highlightUrgent,
               })}
             >
               <PriorityIcon
@@ -207,7 +120,14 @@ const 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 ?? placeholder}
+          </span>
         )}
         {dropdownArrow && (
           <ChevronDownIcon className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
@@ -215,9 +135,100 @@ const BackgroundButton = (props: ButtonProps) => {
       </div>
     </Tooltip>
   );
-};
+}
 
-const TransparentButton = (props: ButtonProps) => {
+function BackgroundButton(props: ButtonProps) {
+  const {
+    className,
+    dropdownArrow,
+    dropdownArrowClassName,
+    hideIcon = false,
+    hideText = false,
+    highlightUrgent,
+    placeholder,
+    priority,
+    showTooltip,
+    renderToolTipByDefault = true,
+  } = props;
+
+  const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
+
+  const priorityClasses = {
+    urgent: "bg-layer-2",
+    high: "bg-layer-2",
+    medium: "bg-layer-2",
+    low: "bg-layer-2",
+    none: "bg-layer-2",
+  };
+
+  const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip
+      tooltipHeading={t("priority")}
+      tooltipContent={t(priorityDetails?.key ?? "none")}
+      disabled={!showTooltip}
+      isMobile={isMobile}
+      renderByDefault={renderToolTipByDefault}
+    >
+      <div
+        className={cn(
+          "h-full flex 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
+            "border-priority-urgent": priority === "urgent" && hideText && highlightUrgent,
+          },
+          className
+        )}
+      >
+        {!hideIcon &&
+          (priority ? (
+            <div
+              className={cn({
+                // highlight just the icon if text is visible and priority is urgent
+                "p-0.5 rounded-sm border border-priority-urgent": priority === "urgent" && !hideText && highlightUrgent,
+              })}
+            >
+              <PriorityIcon
+                priority={priority}
+                size={12}
+                className={cn("flex-shrink-0", {
+                  // increase the icon size if text is hidden
+                  "h-3.5 w-3.5": hideText,
+                  // centre align the icons if text is hidden
+                  "translate-x-[0.0625rem]": hideText && priority === "high",
+                  "translate-x-0.5": hideText && priority === "medium",
+                  "translate-x-1": hideText && priority === "low",
+                  // highlight the icon if priority is urgent
+                })}
+              />
+            </div>
+          ) : (
+            <SignalHigh className="size-3" />
+          ))}
+        {!hideText && (
+          <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" />
+        )}
+      </div>
+    </Tooltip>
+  );
+}
+
+function TransparentButton(props: ButtonProps) {
   const {
     className,
     dropdownArrow,
@@ -234,14 +245,6 @@ const 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();
 
@@ -255,14 +258,13 @@ const 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"],
+          "h-full w-full flex items-center gap-1.5 rounded-sm hover:bg-layer-transparent-hover px-2",
           {
             // 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
         )}
@@ -272,8 +274,7 @@ const 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,
+                "p-0.5 rounded-sm border border-priority-urgent": priority === "urgent" && !hideText && highlightUrgent,
               })}
             >
               <PriorityIcon
@@ -294,7 +295,14 @@ const 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" />
@@ -302,9 +310,9 @@ const TransparentButton = (props: ButtonProps) => {
       </div>
     </Tooltip>
   );
-};
+}
 
-export const PriorityDropdown: React.FC<Props> = (props) => {
+export function PriorityDropdown(props: Props) {
   //hooks
   const { t } = useTranslation();
   const {
@@ -349,10 +357,6 @@ export const PriorityDropdown: React.FC<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,
@@ -408,7 +412,7 @@ export const PriorityDropdown: React.FC<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
@@ -419,9 +423,7 @@ export const PriorityDropdown: React.FC<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}
@@ -443,7 +445,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
       className={cn(
         "h-full",
         {
-          "bg-custom-background-80": isOpen,
+          "bg-layer-1": isOpen,
         },
         className
       )}
@@ -457,17 +459,17 @@ export const PriorityDropdown: React.FC<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">
+              <Search 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")}
@@ -482,9 +484,11 @@ export const PriorityDropdown: React.FC<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(
+                        `w-full truncate flex items-center justify-between gap-2 rounded-sm px-1 py-1.5 cursor-pointer select-none ${
+                          active ? "bg-layer-transparent-hover" : ""
+                        } ${selected ? "text-primary" : "text-secondary"}`
+                      )
                     }
                   >
                     {({ selected }) => (
@@ -496,7 +500,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
                   </Combobox.Option>
                 ))
               ) : (
-                <p className="text-custom-text-400 italic py-1 px-1.5">{t("no_matching_results")}</p>
+                <p className="text-placeholder italic py-1 px-1.5">{t("no_matching_results")}</p>
               )}
             </div>
           </div>
@@ -504,4 +508,4 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
       )}
     </ComboDropDown>
   );
-};
+}
diff --git a/apps/web/core/components/dropdowns/project/base.tsx b/apps/web/core/components/dropdowns/project/base.tsx
index 2027f22fc4..9da40e181f 100644
--- a/apps/web/core/components/dropdowns/project/base.tsx
+++ b/apps/web/core/components/dropdowns/project/base.tsx
@@ -43,7 +43,7 @@ type Props = TDropdownProps & {
       }
   );
 
-export const ProjectDropdownBase: React.FC<Props> = observer((props) => {
+export const ProjectDropdownBase = observer(function ProjectDropdownBase(props: Props) {
   const {
     button,
     buttonClassName,
@@ -156,7 +156,7 @@ export const ProjectDropdownBase: React.FC<Props> = observer((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 +185,7 @@ export const ProjectDropdownBase: React.FC<Props> = observer((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
@@ -232,17 +232,17 @@ export const ProjectDropdownBase: React.FC<Props> = observer((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">
+              <Search 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,9 +260,9 @@ export const ProjectDropdownBase: React.FC<Props> = observer((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"}`
+                          `w-full truncate flex items-center justify-between gap-2 rounded-sm px-1 py-1.5 cursor-pointer select-none ${
+                            active ? "bg-layer-transparent-hover" : ""
+                          } ${selected ? "text-primary" : "text-secondary"}`
                         }
                       >
                         {({ selected }) => (
@@ -275,10 +275,10 @@ export const ProjectDropdownBase: React.FC<Props> = observer((props) => {
                     );
                   })
                 ) : (
-                  <p className="text-custom-text-400 italic py-1 px-1.5">{t("no_matching_results")}</p>
+                  <p className="text-placeholder italic py-1 px-1.5">{t("no_matching_results")}</p>
                 )
               ) : (
-                <p className="text-custom-text-400 italic py-1 px-1.5">{t("loading")}</p>
+                <p className="text-placeholder italic py-1 px-1.5">{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 61a6d58a8a..1d59330526 100644
--- a/apps/web/core/components/dropdowns/project/dropdown.tsx
+++ b/apps/web/core/components/dropdowns/project/dropdown.tsx
@@ -27,7 +27,7 @@ type Props = TDropdownProps & {
       }
   );
 
-export const ProjectDropdown: React.FC<Props> = observer((props) => {
+export const ProjectDropdown = observer(function ProjectDropdown(props: Props) {
   // store hooks
   const { joinedProjectIds, getProjectById } = useProject();
 
diff --git a/apps/web/core/components/dropdowns/state/base.tsx b/apps/web/core/components/dropdowns/state/base.tsx
index d7ab1f8087..fcd16056e6 100644
--- a/apps/web/core/components/dropdowns/state/base.tsx
+++ b/apps/web/core/components/dropdowns/state/base.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { ReactNode } from "react";
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
@@ -41,7 +39,9 @@ export type TWorkItemStateDropdownBaseProps = TDropdownProps & {
   value: string | undefined | null;
 };
 
-export const WorkItemStateDropdownBase: React.FC<TWorkItemStateDropdownBaseProps> = observer((props) => {
+export const WorkItemStateDropdownBase = observer(function WorkItemStateDropdownBase(
+  props: TWorkItemStateDropdownBaseProps
+) {
   const {
     button,
     buttonClassName,
@@ -79,7 +79,7 @@ export const WorkItemStateDropdownBase: React.FC<TWorkItemStateDropdownBaseProps
   const { t } = useTranslation();
   const statesList = stateIds.map((stateId) => getStateById(stateId)).filter((state) => !!state);
   const defaultState = statesList?.find((state) => state?.default);
-  const stateValue = !!value ? value : showDefaultState ? defaultState?.id : undefined;
+  const stateValue = value ? value : showDefaultState ? defaultState?.id : undefined;
   // popper-js init
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
     placement: placement ?? "bottom-start",
@@ -152,7 +152,7 @@ export const WorkItemStateDropdownBase: React.FC<TWorkItemStateDropdownBaseProps
           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 +176,7 @@ export const WorkItemStateDropdownBase: React.FC<TWorkItemStateDropdownBaseProps
                 {!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 +213,17 @@ export const WorkItemStateDropdownBase: React.FC<TWorkItemStateDropdownBaseProps
       {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">
+              <Search 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 +240,14 @@ export const WorkItemStateDropdownBase: React.FC<TWorkItemStateDropdownBaseProps
                       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 select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5"
                     />
                   ))
                 ) : (
-                  <p className="px-1.5 py-1 italic text-custom-text-400">{t("no_matching_results")}</p>
+                  <p className="px-1.5 py-1 italic text-placeholder">{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 italic text-placeholder">{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 b119a20ad1..d7fe55fe1f 100644
--- a/apps/web/core/components/dropdowns/state/dropdown.tsx
+++ b/apps/web/core/components/dropdowns/state/dropdown.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -16,7 +14,7 @@ type TWorkItemStateDropdownProps = Omit<
   stateIds?: string[];
 };
 
-export const StateDropdown: React.FC<TWorkItemStateDropdownProps> = observer((props) => {
+export const StateDropdown = observer(function StateDropdown(props: TWorkItemStateDropdownProps) {
   const { projectId, stateIds: propsStateIds } = props;
   // router params
   const { workspaceSlug } = useParams();
diff --git a/apps/web/core/components/editor/document/editor.tsx b/apps/web/core/components/editor/document/editor.tsx
index 573d96d3d6..383325c518 100644
--- a/apps/web/core/components/editor/document/editor.tsx
+++ b/apps/web/core/components/editor/document/editor.tsx
@@ -7,6 +7,7 @@ import { cn } from "@plane/utils";
 // hooks
 import { useEditorConfig, useEditorMention } from "@/hooks/editor";
 import { useMember } from "@/hooks/store/use-member";
+import { useParseEditorContent } from "@/hooks/use-parse-editor-content";
 // plane web hooks
 import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
 // local imports
@@ -14,7 +15,7 @@ import { EditorMentionsRoot } from "../embeds/mentions";
 
 type DocumentEditorWrapperProps = MakeOptional<
   Omit<IDocumentEditorProps, "fileHandler" | "mentionHandler" | "user" | "extendedEditorProps">,
-  "disabledExtensions" | "editable" | "flaggedExtensions"
+  "disabledExtensions" | "editable" | "flaggedExtensions" | "getEditorMetaData"
 > & {
   extendedEditorProps?: Partial<IEditorPropsExtended>;
   workspaceSlug: string;
@@ -28,10 +29,14 @@ type DocumentEditorWrapperProps = MakeOptional<
         editable: true;
         searchMentionCallback: (payload: TSearchEntityRequestPayload) => Promise<TSearchResponse>;
         uploadFile: TFileHandler["upload"];
+        duplicateFile: TFileHandler["duplicate"];
       }
   );
 
-export const DocumentEditor = forwardRef<EditorRefApi, DocumentEditorWrapperProps>((props, ref) => {
+export const DocumentEditor = forwardRef(function DocumentEditor(
+  props: DocumentEditorWrapperProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
   const {
     containerClassName,
     editable,
@@ -44,9 +49,15 @@ export const DocumentEditor = forwardRef<EditorRefApi, DocumentEditorWrapperProp
   } = props;
   // store hooks
   const { getUserDetails } = useMember();
+  // parse content
+  const { getEditorMetaData } = useParseEditorContent({
+    projectId,
+    workspaceSlug,
+  });
   // editor flaggings
   const { document: documentEditorExtensions } = useEditorFlagging({
-    workspaceSlug: workspaceSlug?.toString() ?? "",
+    workspaceSlug,
+    projectId,
   });
   // use editor mention
   const { fetchMentions } = useEditorMention({
@@ -65,9 +76,11 @@ export const DocumentEditor = forwardRef<EditorRefApi, DocumentEditorWrapperProp
       fileHandler={getEditorFileHandlers({
         projectId,
         uploadFile: editable ? props.uploadFile : async () => "",
+        duplicateFile: editable ? props.duplicateFile : async () => "",
         workspaceId,
         workspaceSlug,
       })}
+      getEditorMetaData={getEditorMetaData}
       mentionHandler={{
         searchCallback: async (query) => {
           const res = await fetchMentions(query);
diff --git a/apps/web/core/components/editor/embeds/mentions/root.tsx b/apps/web/core/components/editor/embeds/mentions/root.tsx
index bc27dd82f9..6f83f064fb 100644
--- a/apps/web/core/components/editor/embeds/mentions/root.tsx
+++ b/apps/web/core/components/editor/embeds/mentions/root.tsx
@@ -4,7 +4,7 @@ import { EditorAdditionalMentionsRoot } from "@/plane-web/components/editor/embe
 // local imports
 import { EditorUserMention } from "./user";
 
-export const EditorMentionsRoot: React.FC<TEditorMentionComponentProps> = (props) => {
+export function EditorMentionsRoot(props: TEditorMentionComponentProps) {
   const { entity_identifier, entity_name } = props;
 
   switch (entity_name) {
@@ -13,4 +13,4 @@ export const EditorMentionsRoot: React.FC<TEditorMentionComponentProps> = (props
     default:
       return <EditorAdditionalMentionsRoot {...props} />;
   }
-};
+}
diff --git a/apps/web/core/components/editor/embeds/mentions/user.tsx b/apps/web/core/components/editor/embeds/mentions/user.tsx
index 206682fba5..7d47857f0f 100644
--- a/apps/web/core/components/editor/embeds/mentions/user.tsx
+++ b/apps/web/core/components/editor/embeds/mentions/user.tsx
@@ -14,7 +14,7 @@ type Props = {
   id: string;
 };
 
-export const EditorUserMention: React.FC<Props> = observer((props) => {
+export const EditorUserMention = observer(function EditorUserMention(props: Props) {
   const { id } = props;
   // router
   const { projectId } = useParams();
@@ -33,7 +33,7 @@ export const EditorUserMention: React.FC<Props> = observer((props) => {
 
   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 px-1 py-0.5 rounded-sm bg-layer-1 text-tertiary no-underline">
         @suspended user
       </div>
     );
@@ -42,9 +42,9 @@ export const EditorUserMention: React.FC<Props> = observer((props) => {
   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 px-1 py-0.5 rounded-sm bg-accent-subtle-active 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 +53,22 @@ export const EditorUserMention: React.FC<Props> = observer((props) => {
           <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 bg-surface-1 shadow-raised-200 rounded-lg p-3 border-[0.5px] border-strong">
             <div className="flex items-center gap-3">
               <div className="flex-shrink-0 size-10 grid 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 font-medium text-primary text-13 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-secondary text-11">{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 82e5315065..6cae6fed8d 100644
--- a/apps/web/core/components/editor/lite-text/editor.tsx
+++ b/apps/web/core/components/editor/lite-text/editor.tsx
@@ -13,6 +13,7 @@ import { IssueCommentToolbar } from "@/components/editor/lite-text/toolbar";
 // hooks
 import { useEditorConfig, useEditorMention } from "@/hooks/editor";
 import { useMember } from "@/hooks/store/use-member";
+import { useParseEditorContent } from "@/hooks/use-parse-editor-content";
 // plane web hooks
 import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
 // plane web service
@@ -22,7 +23,7 @@ const workspaceService = new WorkspaceService();
 
 type LiteTextEditorWrapperProps = MakeOptional<
   Omit<ILiteTextEditorProps, "fileHandler" | "mentionHandler" | "extendedEditorProps">,
-  "disabledExtensions" | "flaggedExtensions"
+  "disabledExtensions" | "flaggedExtensions" | "getEditorMetaData"
 > & {
   workspaceSlug: string;
   workspaceId: string;
@@ -37,6 +38,7 @@ type LiteTextEditorWrapperProps = MakeOptional<
   issue_id?: string;
   parentClassName?: string;
   editorClassName?: string;
+  submitButtonText?: string;
 } & (
     | {
         editable: false;
@@ -44,10 +46,14 @@ type LiteTextEditorWrapperProps = MakeOptional<
     | {
         editable: true;
         uploadFile: TFileHandler["upload"];
+        duplicateFile: TFileHandler["duplicate"];
       }
   );
 
-export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapperProps>((props, ref) => {
+export const LiteTextEditor = React.forwardRef(function LiteTextEditor(
+  props: LiteTextEditorWrapperProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
   const { t } = useTranslation();
   const {
     containerClassName,
@@ -67,6 +73,8 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
     placeholder = t("issue.comments.placeholder"),
     disabledExtensions: additionalDisabledExtensions = [],
     editorClassName = "",
+    showPlaceholderOnEmpty = true,
+    submitButtonText = "common.comment",
     ...rest
   } = props;
   // states
@@ -76,10 +84,16 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
   const [editorRef, setEditorRef] = useState<EditorRefApi | null>(null);
   // editor flaggings
   const { liteText: liteTextEditorExtensions } = useEditorFlagging({
-    workspaceSlug: workspaceSlug?.toString() ?? "",
+    workspaceSlug,
+    projectId,
   });
   // store hooks
   const { getUserDetails } = useMember();
+  // parse content
+  const { getEditorMetaData } = useParseEditorContent({
+    projectId,
+    workspaceSlug,
+  });
   // use editor mention
   const { fetchMentions } = useEditorMention({
     searchEntity: async (payload) =>
@@ -100,7 +114,7 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
   return (
     <div
       className={cn(
-        "relative border border-custom-border-200 rounded",
+        "relative border border-subtle rounded-sm",
         {
           "p-3": editable && !isLiteVariant,
         },
@@ -121,9 +135,11 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
             fileHandler={getEditorFileHandlers({
               projectId,
               uploadFile: editable ? props.uploadFile : async () => "",
+              duplicateFile: editable ? props.duplicateFile : async () => "",
               workspaceId,
               workspaceSlug,
             })}
+            getEditorMetaData={getEditorMetaData}
             handleEditorReady={(ready) => {
               if (ready) {
                 setEditorRef(isMutableRefObject<EditorRefApi>(ref) ? ref.current : null);
@@ -141,6 +157,7 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
               }),
             }}
             placeholder={placeholder}
+            showPlaceholderOnEmpty={showPlaceholderOnEmpty}
             containerClassName={cn(containerClassName, "relative", {
               "p-2": !editable,
             })}
@@ -193,6 +210,7 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
             showAccessSpecifier={showAccessSpecifier}
             editorRef={editorRef}
             showSubmitButton={showSubmitButton}
+            submitButtonText={submitButtonText}
           />
         </div>
       )}
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 970a7f4f48..4eee50976d 100644
--- a/apps/web/core/components/editor/lite-text/lite-toolbar.tsx
+++ b/apps/web/core/components/editor/lite-text/lite-toolbar.tsx
@@ -11,24 +11,26 @@ type LiteToolbarProps = {
   executeCommand: (item: ToolbarMenuItem) => void;
 };
 
-export const LiteToolbar = ({ onSubmit, isSubmitting, isEmpty, executeCommand }: LiteToolbarProps) => (
-  <div className="flex items-center gap-2 pb-1">
-    <button
-      onClick={() => executeCommand(IMAGE_ITEM)}
-      type="button"
-      className="p-1 text-custom-text-300 hover:text-custom-text-200 transition-colors"
-    >
-      <Paperclip className="size-3" />
-    </button>
-    <button
-      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"
-    >
-      <ArrowUp className="size-3" />
-    </button>
-  </div>
-);
+export function LiteToolbar({ onSubmit, isSubmitting, isEmpty, executeCommand }: LiteToolbarProps) {
+  return (
+    <div className="flex items-center gap-2 pb-1">
+      <button
+        onClick={() => executeCommand(IMAGE_ITEM)}
+        type="button"
+        className="p-1 text-tertiary hover:text-secondary transition-colors"
+      >
+        <Paperclip className="size-3" />
+      </button>
+      <button
+        type="button"
+        onClick={(e) => onSubmit(e)}
+        disabled={isEmpty || isSubmitting}
+        className="p-1 bg-accent-primary hover:bg-accent-primary/80 disabled:bg-layer-1 disabled:text-secondary text-primary rounded-sm transition-colors"
+      >
+        <ArrowUp className="size-3" />
+      </button>
+    </div>
+  );
+}
 
 export type { LiteToolbarProps };
diff --git a/apps/web/core/components/editor/lite-text/toolbar.tsx b/apps/web/core/components/editor/lite-text/toolbar.tsx
index 3d1b11df7b..6aa292da10 100644
--- a/apps/web/core/components/editor/lite-text/toolbar.tsx
+++ b/apps/web/core/components/editor/lite-text/toolbar.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useEffect, useState, useCallback } from "react";
 import type { LucideIcon } from "lucide-react";
 import { Globe2, Lock } from "lucide-react";
@@ -27,6 +25,7 @@ type Props = {
   showAccessSpecifier: boolean;
   showSubmitButton: boolean;
   editorRef: EditorRefApi | null;
+  submitButtonText?: string;
 };
 
 type TCommentAccessType = {
@@ -50,7 +49,7 @@ const COMMENT_ACCESS_SPECIFIERS: TCommentAccessType[] = [
 
 const toolbarItems = TOOLBAR_ITEMS.lite;
 
-export const IssueCommentToolbar: React.FC<Props> = (props) => {
+export function IssueCommentToolbar(props: Props) {
   const { t } = useTranslation();
   const {
     accessSpecifier,
@@ -62,6 +61,7 @@ export const IssueCommentToolbar: React.FC<Props> = (props) => {
     showAccessSpecifier,
     showSubmitButton,
     editorRef,
+    submitButtonText = "common.comment",
   } = props;
   // State to manage active states of toolbar items
   const [activeStates, setActiveStates] = useState<Record<string, boolean>>({});
@@ -95,9 +95,9 @@ export const IssueCommentToolbar: React.FC<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 bg-surface-2 overflow-x-scroll">
       {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;
 
@@ -106,13 +106,13 @@ export const IssueCommentToolbar: React.FC<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 place-items-center aspect-square 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}
                   />
@@ -122,12 +122,12 @@ export const IssueCommentToolbar: React.FC<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,
               })}
             >
@@ -138,9 +138,9 @@ export const IssueCommentToolbar: React.FC<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>
                     }
                   >
@@ -148,15 +148,15 @@ export const IssueCommentToolbar: React.FC<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 place-items-center aspect-square 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}
                       />
@@ -172,16 +172,16 @@ export const IssueCommentToolbar: React.FC<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>
         )}
       </div>
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/editor/pdf/document.tsx b/apps/web/core/components/editor/pdf/document.tsx
index 6887c3f63d..a1d5b12ad2 100644
--- a/apps/web/core/components/editor/pdf/document.tsx
+++ b/apps/web/core/components/editor/pdf/document.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { PageProps } from "@react-pdf/renderer";
 import { Document, Font, Page } from "@react-pdf/renderer";
 import { Html } from "react-pdf-html";
@@ -45,7 +43,7 @@ type Props = {
   pageFormat: PageProps["size"];
 };
 
-export const PDFDocument: React.FC<Props> = (props) => {
+export function PDFDocument(props: Props) {
   const { content, pageFormat } = props;
 
   return (
@@ -61,4 +59,4 @@ export const PDFDocument: React.FC<Props> = (props) => {
       </Page>
     </Document>
   );
-};
+}
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 47bd597e3e..2d3a068ee4 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
@@ -6,7 +6,7 @@ type Props = {
   className?: string;
 };
 
-export const DescriptionInputLoader: React.FC<Props> = (props) => {
+export function DescriptionInputLoader(props: Props) {
   const { className } = props;
 
   return (
@@ -30,4 +30,4 @@ export const DescriptionInputLoader: React.FC<Props> = (props) => {
       </div>
     </Loader>
   );
-};
+}
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 13e05dc711..7c95e1ace5 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,5 +1,3 @@
-"use client";
-
 import { useCallback, useEffect, useState, useRef } from "react";
 import { debounce } from "lodash-es";
 import { observer } from "mobx-react";
@@ -24,6 +22,7 @@ const workspaceService = new WorkspaceService();
 type TFormData = {
   id: string;
   description_html: string;
+  isMigrationUpdate: boolean;
 };
 
 type Props = {
@@ -58,7 +57,7 @@ type Props = {
   /**
    * @description Submit handler, the actual function which will be called when the form is submitted
    */
-  onSubmit: (value: string) => Promise<void>;
+  onSubmit: (value: string, isMigrationUpdate?: boolean) => Promise<void>;
   /**
    * @description Placeholder, if not provided, the placeholder will be the default placeholder
    */
@@ -89,7 +88,7 @@ type Props = {
  * @description DescriptionInput component for rich text editor with autosave functionality using debounce
  * The component also makes an API call to save the description on unmount
  */
-export const DescriptionInput: React.FC<Props> = observer((props) => {
+export const DescriptionInput = observer(function DescriptionInput(props: Props) {
   const {
     containerClassName,
     disabled,
@@ -110,28 +109,30 @@ export const DescriptionInput: React.FC<Props> = observer((props) => {
   const [localDescription, setLocalDescription] = useState<TFormData>({
     id: entityId,
     description_html: initialValue?.trim() ?? "",
+    isMigrationUpdate: false,
   });
   // ref to track if there are unsaved changes
   const hasUnsavedChanges = useRef(false);
   // store hooks
   const { getWorkspaceBySlug } = useWorkspace();
-  const { uploadEditorAsset } = useEditorAsset();
+  const { uploadEditorAsset, duplicateEditorAsset } = useEditorAsset();
   // derived values
   const workspaceDetails = getWorkspaceBySlug(workspaceSlug);
   // translation
   const { t } = useTranslation();
   // form info
-  const { handleSubmit, reset, control } = useForm<TFormData>({
+  const { handleSubmit, reset, control, setValue } = useForm<TFormData>({
     defaultValues: {
       id: entityId,
       description_html: initialValue?.trim() ?? "",
+      isMigrationUpdate: false,
     },
   });
 
   // submit handler
   const handleDescriptionFormSubmit = useCallback(
     async (formData: TFormData) => {
-      await onSubmit(formData.description_html);
+      await onSubmit(formData.description_html, formData.isMigrationUpdate);
     },
     [onSubmit]
   );
@@ -142,10 +143,12 @@ export const DescriptionInput: React.FC<Props> = observer((props) => {
     reset({
       id: entityId,
       description_html: initialValue?.trim() === "" ? "<p></p>" : (initialValue ?? "<p></p>"),
+      isMigrationUpdate: false,
     });
     setLocalDescription({
       id: entityId,
       description_html: initialValue?.trim() === "" ? "<p></p>" : (initialValue ?? "<p></p>"),
+      isMigrationUpdate: false,
     });
     // Reset unsaved changes flag when form is reset
     hasUnsavedChanges.current = false;
@@ -208,9 +211,10 @@ export const DescriptionInput: React.FC<Props> = observer((props) => {
               workspaceId={workspaceDetails.id}
               projectId={projectId}
               dragDropEnabled
-              onChange={(_description, description_html) => {
+              onChange={(_description, description_html, options) => {
                 setIsSubmitting("submitting");
                 onChange(description_html);
+                setValue("isMigrationUpdate", options?.isMigrationUpdate ?? false);
                 hasUnsavedChanges.current = true;
                 debouncedFormSave();
               }}
@@ -240,6 +244,19 @@ export const DescriptionInput: React.FC<Props> = observer((props) => {
                   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.");
+                }
+              }}
             />
           )}
         />
diff --git a/apps/web/core/components/editor/rich-text/editor.tsx b/apps/web/core/components/editor/rich-text/editor.tsx
index 8595aa58ec..e3cb6ba613 100644
--- a/apps/web/core/components/editor/rich-text/editor.tsx
+++ b/apps/web/core/components/editor/rich-text/editor.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 // plane imports
 import { RichTextEditorWithRef } from "@plane/editor";
 import type { EditorRefApi, IRichTextEditorProps, TFileHandler } from "@plane/editor";
@@ -9,12 +9,13 @@ import { EditorMentionsRoot } from "@/components/editor/embeds/mentions";
 // hooks
 import { useEditorConfig, useEditorMention } from "@/hooks/editor";
 import { useMember } from "@/hooks/store/use-member";
+import { useParseEditorContent } from "@/hooks/use-parse-editor-content";
 // plane web hooks
 import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
 
 type RichTextEditorWrapperProps = MakeOptional<
   Omit<IRichTextEditorProps, "fileHandler" | "mentionHandler" | "extendedEditorProps">,
-  "disabledExtensions" | "editable" | "flaggedExtensions"
+  "disabledExtensions" | "editable" | "flaggedExtensions" | "getEditorMetaData"
 > & {
   workspaceSlug: string;
   workspaceId: string;
@@ -28,10 +29,14 @@ type RichTextEditorWrapperProps = MakeOptional<
         editable: true;
         searchMentionCallback: (payload: TSearchEntityRequestPayload) => Promise<TSearchResponse>;
         uploadFile: TFileHandler["upload"];
+        duplicateFile: TFileHandler["duplicate"];
       }
   );
 
-export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProps>((props, ref) => {
+export const RichTextEditor = forwardRef(function RichTextEditor(
+  props: RichTextEditorWrapperProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
   const {
     containerClassName,
     editable,
@@ -45,7 +50,8 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
   const { getUserDetails } = useMember();
   // editor flaggings
   const { richText: richTextEditorExtensions } = useEditorFlagging({
-    workspaceSlug: workspaceSlug?.toString() ?? "",
+    workspaceSlug,
+    projectId,
   });
   // use editor mention
   const { fetchMentions } = useEditorMention({
@@ -53,6 +59,11 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
   });
   // editor config
   const { getEditorFileHandlers } = useEditorConfig();
+  // parse content
+  const { getEditorMetaData } = useParseEditorContent({
+    projectId,
+    workspaceSlug,
+  });
 
   return (
     <RichTextEditorWithRef
@@ -63,9 +74,11 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
       fileHandler={getEditorFileHandlers({
         projectId,
         uploadFile: editable ? props.uploadFile : async () => "",
+        duplicateFile: editable ? props.duplicateFile : async () => "",
         workspaceId,
         workspaceSlug,
       })}
+      getEditorMetaData={getEditorMetaData}
       mentionHandler={{
         searchCallback: async (query) => {
           const res = await fetchMentions(query);
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 0403d41b59..09f7f16e55 100644
--- a/apps/web/core/components/editor/sticky-editor/color-palette.tsx
+++ b/apps/web/core/components/editor/sticky-editor/color-palette.tsx
@@ -8,7 +8,7 @@ export const STICKY_COLORS_LIST: {
   {
     key: "gray",
     label: "Gray",
-    backgroundColor: "rgba(var(--color-background-90))",
+    backgroundColor: "var(--editor-colors-gray-background)",
   },
   {
     key: "peach",
@@ -51,11 +51,11 @@ type TProps = {
   handleUpdate: (data: Partial<TSticky>) => Promise<void>;
 };
 
-export const ColorPalette = (props: 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="absolute z-10 bottom-5 left-0 w-56 shadow p-2 rounded-md bg-surface-1 mb-2">
+      <div className="text-13 font-semibold text-placeholder mb-2">Background colors</div>
       <div className="flex flex-wrap gap-2">
         {STICKY_COLORS_LIST.map((color) => (
           <button
@@ -66,7 +66,7 @@ export const 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 hover:ring-2 hover:ring-accent-strong focus:outline-none focus:ring-2 focus:ring-accent-strong transition-all"
             style={{
               backgroundColor: color.backgroundColor,
             }}
@@ -75,4 +75,4 @@ export const ColorPalette = (props: TProps) => {
       </div>
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/editor/sticky-editor/editor.tsx b/apps/web/core/components/editor/sticky-editor/editor.tsx
index 7a6d526149..999c047a4d 100644
--- a/apps/web/core/components/editor/sticky-editor/editor.tsx
+++ b/apps/web/core/components/editor/sticky-editor/editor.tsx
@@ -10,15 +10,15 @@ import type { TSticky } from "@plane/types";
 import { cn } from "@plane/utils";
 // hooks
 import { useEditorConfig } from "@/hooks/editor";
+import { useParseEditorContent } from "@/hooks/use-parse-editor-content";
 // plane web hooks
 import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
 import { StickyEditorToolbar } from "./toolbar";
 
-interface StickyEditorWrapperProps
-  extends Omit<
-    Omit<ILiteTextEditorProps, "extendedEditorProps">,
-    "disabledExtensions" | "editable" | "flaggedExtensions" | "fileHandler" | "mentionHandler"
-  > {
+interface StickyEditorWrapperProps extends Omit<
+  Omit<ILiteTextEditorProps, "extendedEditorProps">,
+  "disabledExtensions" | "editable" | "flaggedExtensions" | "fileHandler" | "mentionHandler" | "getEditorMetaData"
+> {
   workspaceSlug: string;
   workspaceId: string;
   projectId?: string;
@@ -30,12 +30,16 @@ interface StickyEditorWrapperProps
   showToolbarInitially?: boolean;
   showToolbar?: boolean;
   uploadFile: TFileHandler["upload"];
+  duplicateFile: TFileHandler["duplicate"];
   parentClassName?: string;
   handleColorChange: (data: Partial<TSticky>) => Promise<void>;
   handleDelete: () => void;
 }
 
-export const StickyEditor = React.forwardRef<EditorRefApi, StickyEditorWrapperProps>((props, ref) => {
+export const StickyEditor = React.forwardRef(function StickyEditor(
+  props: StickyEditorWrapperProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
   const {
     containerClassName,
     workspaceSlug,
@@ -47,13 +51,20 @@ export const StickyEditor = React.forwardRef<EditorRefApi, StickyEditorWrapperPr
     showToolbar = true,
     parentClassName = "",
     uploadFile,
+    duplicateFile,
     ...rest
   } = props;
   // states
   const [isFocused, setIsFocused] = useState(showToolbarInitially);
   // editor flaggings
   const { liteText: liteTextEditorExtensions } = useEditorFlagging({
-    workspaceSlug: workspaceSlug?.toString() ?? "",
+    workspaceSlug,
+    projectId,
+  });
+  // parse content
+  const { getEditorMetaData } = useParseEditorContent({
+    projectId,
+    workspaceSlug,
   });
   // editor config
   const { getEditorFileHandlers } = useEditorConfig();
@@ -62,9 +73,10 @@ export const StickyEditor = React.forwardRef<EditorRefApi, StickyEditorWrapperPr
   }
   // derived values
   const editorRef = isMutableRefObject<EditorRefApi>(ref) ? ref.current : null;
+
   return (
     <div
-      className={cn("relative border border-custom-border-200 rounded", parentClassName)}
+      className={cn("relative border border-subtle rounded-sm", parentClassName)}
       onFocus={() => !showToolbarInitially && setIsFocused(true)}
       onBlur={() => !showToolbarInitially && setIsFocused(false)}
     >
@@ -76,9 +88,11 @@ export const StickyEditor = React.forwardRef<EditorRefApi, StickyEditorWrapperPr
         fileHandler={getEditorFileHandlers({
           projectId,
           uploadFile,
+          duplicateFile,
           workspaceId,
           workspaceSlug,
         })}
+        getEditorMetaData={getEditorMetaData}
         mentionHandler={{
           renderComponent: () => <></>,
         }}
diff --git a/apps/web/core/components/editor/sticky-editor/toolbar.tsx b/apps/web/core/components/editor/sticky-editor/toolbar.tsx
index 0a41515a0a..29f5cb72b0 100644
--- a/apps/web/core/components/editor/sticky-editor/toolbar.tsx
+++ b/apps/web/core/components/editor/sticky-editor/toolbar.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useEffect, useState, useCallback } from "react";
 import { Palette, Trash2 } from "lucide-react";
 // editor
@@ -24,7 +22,7 @@ type Props = {
 
 const toolbarItems = TOOLBAR_ITEMS.sticky;
 
-export const StickyEditorToolbar: React.FC<Props> = (props) => {
+export function StickyEditorToolbar(props: Props) {
   const { executeCommand, editorRef, handleColorChange, handleDelete } = props;
 
   // State to manage active states of toolbar items
@@ -65,21 +63,17 @@ export const StickyEditorToolbar: React.FC<Props> = (props) => {
         {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"
-          >
+          <button type="button" onClick={() => setShowColorPalette(!showColorPalette)} className="flex text-primary/50">
             <Palette className="size-4 my-auto" />
           </button>
         </Tooltip>
 
-        <div className="flex w-fit items-stretch justify-between gap-4 rounded p-1 my-auto">
+        <div className="flex w-fit items-stretch justify-between gap-4 rounded-sm p-1 my-auto">
           <div className="flex items-stretch my-auto gap-4">
             {Object.keys(toolbarItems).map((key) => (
               <div key={key} className={cn("flex items-stretch gap-4", {})}>
@@ -90,23 +84,20 @@ export const StickyEditorToolbar: React.FC<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 place-items-center aspect-square 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}
                         />
@@ -122,15 +113,15 @@ export const StickyEditorToolbar: React.FC<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">
+        <button type="button" onClick={handleDelete} className="my-auto text-primary/50">
           <Trash2 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 1ef4ef312f..c4a8d23fd2 100644
--- a/apps/web/core/components/empty-state/comic-box-button.tsx
+++ b/apps/web/core/components/empty-state/comic-box-button.tsx
@@ -1,12 +1,9 @@
-"use client";
-
 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;
@@ -17,7 +14,7 @@ type Props = {
   disabled?: boolean;
 };
 
-export const ComicBoxButton: React.FC<Props> = (props) => {
+export function ComicBoxButton(props: Props) {
   const { label, icon, title, description, onClick, disabled = false } = props;
   const [isHovered, setIsHovered] = useState(false);
 
@@ -46,35 +43,33 @@ export const ComicBoxButton: React.FC<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={`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>
+        </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="flex flex-col rounded-sm border border-subtle bg-layer-1 hover:bg-layer-1-hover rounded-xl overflow-hidden p-5 relative w-52 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="absolute w-2 h-2 bg-surface-1 border rounded-lb-sm  border-subtle border-r-0 border-t-0 transform rotate-45 bottom-2 -left-[5px]" />
+            <h3 className="text-16 font-semibold w-full">{title}</h3>
+            <h4 className="mt-1 text-13">{description}</h4>
           </div>
         </Popover.Panel>
       )}
     </Popover>
   );
-};
+}
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 69252650f7..6f26f321e6 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,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 // ui
@@ -7,12 +5,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;
 };
@@ -31,32 +29,34 @@ 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;
 
-const CustomButton = ({
+function CustomButton({
   config,
   variant,
   size,
 }: {
   config: ButtonConfig;
-  variant: "primary" | "neutral-primary";
+  variant: "primary" | "secondary";
   size: EmptyStateSize;
-}) => (
-  <Button
-    variant={variant}
-    size={size}
-    onClick={config.onClick}
-    prependIcon={config.prependIcon}
-    appendIcon={config.appendIcon}
-    disabled={config.disabled}
-  >
-    {config.text}
-  </Button>
-);
+}) {
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      onClick={config.onClick}
+      prependIcon={config.prependIcon}
+      appendIcon={config.appendIcon}
+      disabled={config.disabled}
+    >
+      {config.text}
+    </Button>
+  );
+}
 
-export const DetailedEmptyState: React.FC<Props> = observer((props) => {
+export const DetailedEmptyState = observer(function DetailedEmptyState(props: Props) {
   const {
     title,
     description,
@@ -79,9 +79,9 @@ export const DetailedEmptyState: React.FC<Props> = observer((props) => {
       )}
     >
       <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 flex-col gap-1.5 shrink-0">
+          <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" />}
@@ -93,9 +93,7 @@ export const DetailedEmptyState: React.FC<Props> = observer((props) => {
               (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/section-empty-state-root.tsx b/apps/web/core/components/empty-state/section-empty-state-root.tsx
index 164663f075..50227504f0 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,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { cn } from "@plane/utils";
 
@@ -11,21 +9,21 @@ type Props = {
   customClassName?: string;
 };
 
-export const SectionEmptyState: FC<Props> = (props) => {
+export function SectionEmptyState(props: Props) {
   const { title, description, icon, actionElement, customClassName } = 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 gap-4 items-center justify-center 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 items-center justify-center size-8 bg-layer-1 rounded-sm">{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 03fc838cf1..fc92cfdf0c 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // utils
 import { cn } from "@plane/utils";
@@ -26,11 +24,11 @@ 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((props: Props) => {
+export const SimpleEmptyState = observer(function SimpleEmptyState(props: Props) {
   const { title, description, size = "sm", assetPath } = props;
 
   return (
@@ -43,7 +41,7 @@ export const SimpleEmptyState = observer((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 text-placeholder whitespace-pre-line">{description}</p>}
     </div>
   );
 });
diff --git a/apps/web/core/components/estimates/create/modal.tsx b/apps/web/core/components/estimates/create/modal.tsx
index aac52c1f7a..830c35fad8 100644
--- a/apps/web/core/components/estimates/create/modal.tsx
+++ b/apps/web/core/components/estimates/create/modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react";
@@ -24,7 +22,7 @@ type TCreateEstimateModal = {
   handleClose: () => void;
 };
 
-export const CreateEstimateModal: FC<TCreateEstimateModal> = observer((props) => {
+export const CreateEstimateModal = observer(function CreateEstimateModal(props: TCreateEstimateModal) {
   // props
   const { workspaceSlug, projectId, isOpen, handleClose } = props;
   // hooks
@@ -155,9 +153,9 @@ export const CreateEstimateModal: FC<TCreateEstimateModal> = observer((props) =>
                 <ChevronLeftIcon className="w-4 h-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-11 text-gray-400">
             {t("project_settings.estimates.create.step", {
               step: renderEstimateStepsCount,
               total: 2,
@@ -189,19 +187,19 @@ export const CreateEstimateModal: FC<TCreateEstimateModal> = observer((props) =>
             />
           )}
           {/* {isEstimatePointError && (
-            <div className="pt-5 text-sm text-red-500">
+            <div className="pt-5 text-13 text-red-500">
               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 justify-end items-center gap-3 px-5 pt-5 border-t border-subtle">
+          <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 94fc26463c..3013a56655 100644
--- a/apps/web/core/components/estimates/create/stage-one.tsx
+++ b/apps/web/core/components/estimates/create/stage-one.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { Info } from "lucide-react";
 // plane imports
 import { EEstimateSystem, ESTIMATE_SYSTEMS } from "@plane/constants";
@@ -21,7 +18,7 @@ type TEstimateCreateStageOne = {
   handleEstimatePoints: (value: string) => void;
 };
 
-export const EstimateCreateStageOne: FC<TEstimateCreateStageOne> = (props) => {
+export function EstimateCreateStageOne(props: TEstimateCreateStageOne) {
   const { estimateSystem, handleEstimateSystem, handleEstimatePoints } = props;
 
   // i18n
@@ -34,32 +31,35 @@ export const EstimateCreateStageOne: FC<TEstimateCreateStageOne> = (props) => {
     <div className="space-y-6">
       <div className="sm:flex sm:items-center sm:space-x-10 sm:space-y-0 gap-2 mb-2">
         <RadioInput
-          options={Object.keys(ESTIMATE_SYSTEMS).map((system) => {
-            const currentSystem = system as TEstimateSystemKeys;
-            const isEnabled = isEstimateSystemEnabled(currentSystem);
-            return {
-              label: !ESTIMATE_SYSTEMS[currentSystem]?.is_available ? (
-                <div className="relative flex items-center gap-2 cursor-no-drop text-custom-text-300">
-                  {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">
-                  {t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}
-                  <UpgradeBadge />
-                </div>
-              ) : (
-                <div>{t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}</div>
-              ),
-              value: system,
-              disabled: !isEnabled,
-            };
-          })}
+          options={Object.keys(ESTIMATE_SYSTEMS)
+            .map((system) => {
+              const currentSystem = system as TEstimateSystemKeys;
+              const isEnabled = isEstimateSystemEnabled(currentSystem);
+              if (!isEnabled) return null;
+              return {
+                label: !ESTIMATE_SYSTEMS[currentSystem]?.is_available ? (
+                  <div className="relative flex items-center gap-2 cursor-no-drop 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-tertiary">
+                    {t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}
+                    <UpgradeBadge />
+                  </div>
+                ) : (
+                  <div>{t(ESTIMATE_SYSTEMS[currentSystem]?.i18n_name)}</div>
+                ),
+                value: system,
+                disabled: !isEnabled,
+              };
+            })
+            .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 +70,15 @@ export const EstimateCreateStageOne: FC<TEstimateCreateStageOne> = (props) => {
       {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="border border-subtle rounded-md p-3 py-2.5 text-left space-y-1 w-full block 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,7 +86,7 @@ export const EstimateCreateStageOne: FC<TEstimateCreateStageOne> = (props) => {
           </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">
@@ -94,14 +94,14 @@ export const EstimateCreateStageOne: FC<TEstimateCreateStageOne> = (props) => {
                 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="border border-subtle rounded-md p-3 py-2.5 text-left space-y-1 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
+                          estimateSystem === (EEstimateSystem.TIME as TEstimateSystemKeys)
                             ? convertMinutesToHoursMinutesString(Number(template.value)).trim()
                             : template.value
                         )
@@ -116,6 +116,6 @@ export const EstimateCreateStageOne: FC<TEstimateCreateStageOne> = (props) => {
       )}
     </div>
   );
-};
+}
 
 //
diff --git a/apps/web/core/components/estimates/delete/modal.tsx b/apps/web/core/components/estimates/delete/modal.tsx
index ea38b3f36e..e348495bf6 100644
--- a/apps/web/core/components/estimates/delete/modal.tsx
+++ b/apps/web/core/components/estimates/delete/modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
@@ -22,7 +20,7 @@ type TDeleteEstimateModal = {
   handleClose: () => void;
 };
 
-export const DeleteEstimateModal: FC<TDeleteEstimateModal> = observer((props) => {
+export const DeleteEstimateModal = observer(function DeleteEstimateModal(props: TDeleteEstimateModal) {
   // props
   const { workspaceSlug, projectId, estimateId, isOpen, handleClose } = props;
   // hooks
@@ -75,23 +73,23 @@ export const DeleteEstimateModal: FC<TDeleteEstimateModal> = observer((props) =>
       <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="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 justify-end items-center gap-3 px-5 pt-5 border-t border-subtle">
+          <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 706888ce09..b7f4764a8e 100644
--- a/apps/web/core/components/estimates/empty-screen.tsx
+++ b/apps/web/core/components/estimates/empty-screen.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useTheme } from "next-themes";
 import { PROJECT_SETTINGS_TRACKER_ELEMENTS, PROJECT_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
@@ -14,7 +12,7 @@ type TEstimateEmptyScreen = {
   onButtonClick: () => void;
 };
 
-export const EstimateEmptyScreen: FC<TEstimateEmptyScreen> = (props) => {
+export function EstimateEmptyScreen(props: TEstimateEmptyScreen) {
   // props
   const { onButtonClick } = props;
   const { resolvedTheme } = useTheme();
@@ -27,7 +25,7 @@ export const EstimateEmptyScreen: FC<TEstimateEmptyScreen> = (props) => {
       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: () => {
@@ -45,4 +43,4 @@ export const EstimateEmptyScreen: FC<TEstimateEmptyScreen> = (props) => {
       }}
     />
   );
-};
+}
diff --git a/apps/web/core/components/estimates/estimate-disable-switch.tsx b/apps/web/core/components/estimates/estimate-disable-switch.tsx
index 31bcb369c6..705ecfcb4f 100644
--- a/apps/web/core/components/estimates/estimate-disable-switch.tsx
+++ b/apps/web/core/components/estimates/estimate-disable-switch.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { observer } from "mobx-react";
 import { PROJECT_SETTINGS_TRACKER_ELEMENTS, PROJECT_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
@@ -17,7 +15,7 @@ type TEstimateDisableSwitch = {
   isAdmin: boolean;
 };
 
-export const EstimateDisableSwitch: FC<TEstimateDisableSwitch> = observer((props) => {
+export const EstimateDisableSwitch = observer(function EstimateDisableSwitch(props: TEstimateDisableSwitch) {
   const { workspaceSlug, projectId, isAdmin } = props;
   // i18n
   const { t } = useTranslation();
diff --git a/apps/web/core/components/estimates/estimate-list-item.tsx b/apps/web/core/components/estimates/estimate-list-item.tsx
index aa8c06a694..b8f951192b 100644
--- a/apps/web/core/components/estimates/estimate-list-item.tsx
+++ b/apps/web/core/components/estimates/estimate-list-item.tsx
@@ -18,7 +18,7 @@ type TEstimateListItem = {
   onDeleteClick?: (estimateId: string) => void;
 };
 
-export const EstimateListItem: FC<TEstimateListItem> = observer((props) => {
+export const EstimateListItem = observer(function EstimateListItem(props: TEstimateListItem) {
   const { estimateId, isAdmin, isEstimateEnabled, isEditable } = props;
   // hooks
   const { estimateById } = useProjectEstimates();
@@ -35,13 +35,13 @@ export const EstimateListItem: FC<TEstimateListItem> = observer((props) => {
   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`
+        "relative border-b border-subtle flex justify-between items-center gap-3 py-3.5",
+        isAdmin && isEditable && isEstimateEnabled ? `text-primary` : `text-secondary`
       )}
     >
       <div className="space-y-1">
-        <h3 className="font-medium text-base">{currentEstimate?.name}</h3>
-        <p className="text-xs">
+        <h3 className="font-medium text-14">{currentEstimate?.name}</h3>
+        <p className="text-11">
           {estimatePointValues
             ?.map((estimatePointValue) => {
               if (currentEstimate?.type === EEstimateSystem.TIME) {
diff --git a/apps/web/core/components/estimates/estimate-list.tsx b/apps/web/core/components/estimates/estimate-list.tsx
index 699e6a685f..f52055e766 100644
--- a/apps/web/core/components/estimates/estimate-list.tsx
+++ b/apps/web/core/components/estimates/estimate-list.tsx
@@ -12,7 +12,7 @@ type TEstimateList = {
   onDeleteClick?: (estimateId: string) => void;
 };
 
-export const EstimateList: FC<TEstimateList> = observer((props) => {
+export const EstimateList = observer(function EstimateList(props: TEstimateList) {
   const { estimateIds, isAdmin, isEstimateEnabled = false, isEditable = false, onEditClick, onDeleteClick } = props;
 
   if (!estimateIds || estimateIds?.length <= 0) return <></>;
diff --git a/apps/web/core/components/estimates/estimate-search.tsx b/apps/web/core/components/estimates/estimate-search.tsx
index 78e22237fe..d67403c9db 100644
--- a/apps/web/core/components/estimates/estimate-search.tsx
+++ b/apps/web/core/components/estimates/estimate-search.tsx
@@ -1,7 +1,7 @@
 import type { FC } from "react";
 import { observer } from "mobx-react";
 
-export const EstimateSearch: FC = observer(() => {
+export const EstimateSearch = observer(function EstimateSearch() {
   // hooks
   const {} = {};
 
diff --git a/apps/web/core/components/estimates/inputs/number-input.tsx b/apps/web/core/components/estimates/inputs/number-input.tsx
index 63f4d2118d..4b4db415bb 100644
--- a/apps/web/core/components/estimates/inputs/number-input.tsx
+++ b/apps/web/core/components/estimates/inputs/number-input.tsx
@@ -5,7 +5,7 @@ type TEstimateNumberInputProps = {
   handleEstimateInputValue: (value: string) => void;
 };
 
-export const EstimateNumberInput: FC<TEstimateNumberInputProps> = (props) => {
+export function EstimateNumberInput(props: TEstimateNumberInputProps) {
   const { value, handleEstimateInputValue } = props;
 
   // i18n
@@ -15,10 +15,10 @@ export const EstimateNumberInput: FC<TEstimateNumberInputProps> = (props) => {
     <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="border-none focus:ring-0 focus:border-0 focus:outline-none px-2 py-2 w-full bg-transparent text-13"
       placeholder={t("project_settings.estimates.create.enter_estimate_point")}
       autoFocus
       type="number"
     />
   );
-};
+}
diff --git a/apps/web/core/components/estimates/inputs/root.tsx b/apps/web/core/components/estimates/inputs/root.tsx
index bd32c2e29d..117f68fe77 100644
--- a/apps/web/core/components/estimates/inputs/root.tsx
+++ b/apps/web/core/components/estimates/inputs/root.tsx
@@ -14,7 +14,7 @@ type TEstimateInputRootProps = {
   value?: string;
 };
 
-export const EstimateInputRoot: FC<TEstimateInputRootProps> = (props) => {
+export function EstimateInputRoot(props: TEstimateInputRootProps) {
   const { estimateType, handleEstimateInputValue, value } = props;
 
   switch (estimateType) {
@@ -37,4 +37,4 @@ export const EstimateInputRoot: FC<TEstimateInputRootProps> = (props) => {
     default:
       return null;
   }
-};
+}
diff --git a/apps/web/core/components/estimates/inputs/text-input.tsx b/apps/web/core/components/estimates/inputs/text-input.tsx
index 989798ea4e..477d0b5fd9 100644
--- a/apps/web/core/components/estimates/inputs/text-input.tsx
+++ b/apps/web/core/components/estimates/inputs/text-input.tsx
@@ -5,7 +5,7 @@ type TEstimateTextInputProps = {
   handleEstimateInputValue: (value: string) => void;
 };
 
-export const EstimateTextInput: FC<TEstimateTextInputProps> = (props) => {
+export function EstimateTextInput(props: TEstimateTextInputProps) {
   const { value, handleEstimateInputValue } = props;
 
   // i18n
@@ -15,10 +15,10 @@ export const EstimateTextInput: FC<TEstimateTextInputProps> = (props) => {
     <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="border-none focus:ring-0 focus:border-0 focus:outline-none px-3 py-2 w-full bg-transparent text-13"
       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 6e1fc5c21b..29474b9c96 100644
--- a/apps/web/core/components/estimates/loader-screen.tsx
+++ b/apps/web/core/components/estimates/loader-screen.tsx
@@ -1,13 +1,13 @@
-"use client";
-
 import type { FC } from "react";
 import { Loader } from "@plane/ui";
 
-export const EstimateLoaderScreen: FC = () => (
-  <Loader className="mt-5 space-y-5">
-    <Loader.Item height="40px" />
-    <Loader.Item height="40px" />
-    <Loader.Item height="40px" />
-    <Loader.Item height="40px" />
-  </Loader>
-);
+export function EstimateLoaderScreen() {
+  return (
+    <Loader className="mt-5 space-y-5">
+      <Loader.Item height="40px" />
+      <Loader.Item height="40px" />
+      <Loader.Item height="40px" />
+      <Loader.Item height="40px" />
+    </Loader>
+  );
+}
diff --git a/apps/web/core/components/estimates/points/create-root.tsx b/apps/web/core/components/estimates/points/create-root.tsx
index 99958c8d1d..fa12000b2c 100644
--- a/apps/web/core/components/estimates/points/create-root.tsx
+++ b/apps/web/core/components/estimates/points/create-root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { Dispatch, FC, SetStateAction } from "react";
 import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
@@ -30,7 +28,7 @@ type TEstimatePointCreateRoot = {
   ) => void;
 };
 
-export const EstimatePointCreateRoot: FC<TEstimatePointCreateRoot> = observer((props) => {
+export const EstimatePointCreateRoot = observer(function EstimatePointCreateRoot(props: TEstimatePointCreateRoot) {
   // props
   const {
     workspaceSlug,
@@ -112,7 +110,7 @@ export const EstimatePointCreateRoot: FC<TEstimatePointCreateRoot> = observer((p
   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
@@ -167,7 +165,7 @@ export const EstimatePointCreateRoot: FC<TEstimatePointCreateRoot> = observer((p
           />
         ))}
       {estimatePoints && estimatePoints.length + (estimatePointCreate?.length || 0) <= estimateCount.max - 1 && (
-        <Button variant="link-primary" size="sm" prependIcon={<Plus />} onClick={handleCreate}>
+        <Button variant="link" prependIcon={<Plus />} 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 0ab88fc9d0..0072169ee5 100644
--- a/apps/web/core/components/estimates/points/create.tsx
+++ b/apps/web/core/components/estimates/points/create.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC, FormEvent } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
@@ -31,7 +29,7 @@ type TEstimatePointCreate = {
   handleEstimatePointError?: (newValue: string, message: string | undefined, mode?: "add" | "delete") => void;
 };
 
-export const EstimatePointCreate: FC<TEstimatePointCreate> = observer((props) => {
+export const EstimatePointCreate = observer(function EstimatePointCreate(props: TEstimatePointCreate) {
   const {
     workspaceSlug,
     projectId,
@@ -84,7 +82,7 @@ export const EstimatePointCreate: FC<TEstimatePointCreate> = observer((props) =>
 
       const currentEstimatePointValues = estimatePoints
         .map((point) => point?.value || undefined)
-        .filter((value) => value != undefined) as string[];
+        .filter((value) => value != undefined);
       const isRepeated =
         (estimateType && isEstimatePointValuesRepeated(currentEstimatePointValues, estimateType, estimateInputValue)) ||
         false;
@@ -169,11 +167,11 @@ export const EstimatePointCreate: FC<TEstimatePointCreate> = observer((props) =>
   };
 
   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 text-14 pr-2.5">
       <div
         className={cn(
-          "relative w-full border rounded flex items-center my-1",
-          estimatePointError?.message ? `border-red-500` : `border-custom-border-200`
+          "relative w-full border rounded-sm flex items-center my-1",
+          estimatePointError?.message ? `border-red-500` : `border-subtle`
         )}
       >
         <EstimateInputRoot
@@ -193,7 +191,7 @@ export const EstimatePointCreate: FC<TEstimatePointCreate> = observer((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="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer text-green-500"
           disabled={loader}
         >
           {loader ? <Spinner className="w-4 h-4" /> : <Check size={14} />}
@@ -201,11 +199,11 @@ export const EstimatePointCreate: FC<TEstimatePointCreate> = observer((props) =>
       )}
       <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="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer"
         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/preview.tsx b/apps/web/core/components/estimates/points/preview.tsx
index 6c21bea057..926a57a031 100644
--- a/apps/web/core/components/estimates/points/preview.tsx
+++ b/apps/web/core/components/estimates/points/preview.tsx
@@ -26,7 +26,7 @@ type TEstimatePointItemPreview = {
   handleEstimatePointError?: (newValue: string, message: string | undefined) => void;
 };
 
-export const EstimatePointItemPreview: FC<TEstimatePointItemPreview> = observer((props) => {
+export const EstimatePointItemPreview = observer(function EstimatePointItemPreview(props: TEstimatePointItemPreview) {
   const {
     workspaceSlug,
     projectId,
@@ -56,35 +56,33 @@ export const EstimatePointItemPreview: FC<TEstimatePointItemPreview> = observer(
   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="border border-subtle rounded-sm relative flex items-center px-1 gap-2 text-14 my-1">
+          <div className="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer">
+            <GripVertical size={14} className="text-secondary" />
           </div>
-          <div ref={EstimatePointValueRef} className="py-2 w-full text-sm">
+          <div ref={EstimatePointValueRef} className="py-2 w-full 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="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer"
             onClick={() => setEstimatePointEditToggle(true)}
           >
-            <Pencil size={14} className="text-custom-text-200" />
+            <Pencil size={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="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer"
               onClick={() =>
                 estimateId && estimatePointId
                   ? setEstimatePointDeleteToggle(true)
                   : handleEstimatePointValueRemove && handleEstimatePointValueRemove()
               }
             >
-              <Trash2 size={14} className="text-custom-text-200" />
+              <Trash2 size={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 381969fa1e..abcfa2cd63 100644
--- a/apps/web/core/components/estimates/points/update.tsx
+++ b/apps/web/core/components/estimates/points/update.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC, FormEvent } from "react";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
@@ -32,7 +30,7 @@ type TEstimatePointUpdate = {
   handleEstimatePointError?: (newValue: string, message: string | undefined, mode?: "add" | "delete") => void;
 };
 
-export const EstimatePointUpdate: FC<TEstimatePointUpdate> = observer((props) => {
+export const EstimatePointUpdate = observer(function EstimatePointUpdate(props: TEstimatePointUpdate) {
   const {
     workspaceSlug,
     projectId,
@@ -89,7 +87,7 @@ export const EstimatePointUpdate: FC<TEstimatePointUpdate> = observer((props) =>
 
       const currentEstimatePointValues = estimatePoints
         .map((point) => (point?.key != estimatePoint?.key ? point?.value : undefined))
-        .filter((value) => value != undefined) as string[];
+        .filter((value) => value != undefined);
       const isRepeated =
         (estimateType && isEstimatePointValuesRepeated(currentEstimatePointValues, estimateType, estimateInputValue)) ||
         false;
@@ -168,11 +166,11 @@ export const EstimatePointUpdate: FC<TEstimatePointUpdate> = observer((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 text-14 pr-2.5">
       <div
         className={cn(
-          "relative w-full border rounded flex items-center my-1",
-          estimatePointError?.message ? `border-red-500` : `border-custom-border-200`
+          "relative w-full border rounded-sm flex items-center my-1",
+          estimatePointError?.message ? `border-red-500` : `border-subtle`
         )}
       >
         <EstimateInputRoot
@@ -201,7 +199,7 @@ export const EstimatePointUpdate: FC<TEstimatePointUpdate> = observer((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="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer text-green-500"
           disabled={loader}
         >
           {loader ? <Spinner className="w-4 h-4" /> : <Check size={14} />}
@@ -209,11 +207,11 @@ export const EstimatePointUpdate: FC<TEstimatePointUpdate> = observer((props) =>
       )}
       <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="rounded-xs w-6 h-6 flex-shrink-0 relative flex justify-center items-center hover:bg-layer-1 transition-colors cursor-pointer"
         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 ffc36a6b66..1401357239 100644
--- a/apps/web/core/components/estimates/radio-select.tsx
+++ b/apps/web/core/components/estimates/radio-select.tsx
@@ -17,7 +17,7 @@ type RadioInputProps = {
   className?: string;
 };
 
-export const RadioInput = ({
+export function RadioInput({
   name = "radio-input",
   label: inputLabel,
   labelClassName: inputLabelClassName = "",
@@ -30,7 +30,7 @@ export const RadioInput = ({
   ariaLabel,
   onChange,
   className,
-}: RadioInputProps) => {
+}: RadioInputProps) {
   const wrapperClass = vertical ? "flex flex-col gap-1" : "flex gap-2";
 
   const setSelected = (value: string) => {
@@ -53,8 +53,8 @@ export const 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 ? `bg-layer-1 border-subtle cursor-not-allowed` : ``,
               inputFieldClassName
             )}
           >
@@ -62,9 +62,9 @@ export const 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 flex-shrink-0 size-5 items-center justify-center rounded-full border border-strong-1 bg-layer-2 cursor-pointer`,
+                selected === value ? `bg-accent-primary/80 border-accent-strong ` : ``,
+                disabled ? `bg-layer-1 border-subtle cursor-not-allowed` : ``,
                 inputButtonClassName
               )}
               type="radio"
@@ -80,4 +80,4 @@ export const RadioInput = ({
       </div>
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/estimates/root.tsx b/apps/web/core/components/estimates/root.tsx
index 9e6f9bd7b9..3a2310b581 100644
--- a/apps/web/core/components/estimates/root.tsx
+++ b/apps/web/core/components/estimates/root.tsx
@@ -24,7 +24,7 @@ type TEstimateRoot = {
   isAdmin: boolean;
 };
 
-export const EstimateRoot: FC<TEstimateRoot> = observer((props) => {
+export const EstimateRoot = observer(function EstimateRoot(props: TEstimateRoot) {
   const { workspaceSlug, projectId, isAdmin } = props;
   // hooks
   const { currentProjectDetails } = useProject();
@@ -58,10 +58,10 @@ export const EstimateRoot: FC<TEstimateRoot> = observer((props) => {
           {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="relative border-b border-subtle 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>
+                  <h3 className="text-16 font-medium text-primary">{t("project_settings.estimates.title")}</h3>
+                  <p className="text-13 text-secondary">{t("project_settings.estimates.enable_description")}</p>
                 </div>
                 <EstimateDisableSwitch workspaceSlug={workspaceSlug} projectId={projectId} isAdmin={isAdmin} />
               </div>
@@ -95,15 +95,16 @@ export const EstimateRoot: FC<TEstimateRoot> = observer((props) => {
           {/* 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">
+              <div className="border-b border-subtle space-y-1 pb-4">
+                <h3 className="text-16 font-medium text-primary">Archived estimates</h3>
+                <p className="text-13 text-secondary">
                   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"
+                    className="text-accent-primary/80 hover:text-accent-primary"
+                    rel="noreferrer"
                   >
                     here.
                   </a>
diff --git a/apps/web/core/components/exporter/column.tsx b/apps/web/core/components/exporter/column.tsx
index 429d0bb297..154306dbe2 100644
--- a/apps/web/core/components/exporter/column.tsx
+++ b/apps/web/core/components/exporter/column.tsx
@@ -21,7 +21,7 @@ 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 capitalize text-on-color">
                   <img
                     src={getFileURL(avatar_url)}
                     className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
@@ -29,7 +29,7 @@ export const useExportColumns = () => {
                   />
                 </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="relative flex h-4 w-4 items-center justify-center rounded-full bg-gray-700 capitalize text-on-color text-11">
                   {(email ?? display_name ?? "?")[0]}
                 </span>
               )}
@@ -48,13 +48,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,7 +70,7 @@ export const useExportColumns = () => {
       content: "Status",
       tdRender: (rowData: RowData) => (
         <span
-          className={`rounded text-xs px-2 py-1 capitalize ${
+          className={`rounded-sm text-11 px-2 py-1 capitalize ${
             rowData.status === "completed"
               ? "bg-green-500/20 text-green-500"
               : rowData.status === "processing"
@@ -94,7 +94,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="w-full flex items-center gap-1 text-accent-primary font-medium">
                   <Download className="h-4 w-4" />
                   <div>Download</div>
                 </button>
@@ -104,7 +104,7 @@ export const useExportColumns = () => {
             )}
           </>
         ) : (
-          <div className="text-xs text-red-500">Expired</div>
+          <div className="text-11 text-red-500">Expired</div>
         ),
     },
   ];
diff --git a/apps/web/core/components/exporter/export-form.tsx b/apps/web/core/components/exporter/export-form.tsx
index ecb88e9a57..74f947316a 100644
--- a/apps/web/core/components/exporter/export-form.tsx
+++ b/apps/web/core/components/exporter/export-form.tsx
@@ -2,24 +2,24 @@ import { useState } from "react";
 import { intersection } from "lodash-es";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
-import { Info } from "lucide-react";
+// import { Info } from "lucide-react";
 import {
   EUserPermissions,
   EUserPermissionsLevel,
   EXPORTERS_LIST,
-  ISSUE_DISPLAY_FILTERS_BY_PAGE,
+  // 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";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { Tooltip } from "@plane/propel/tooltip";
-import { EIssuesStoreType } from "@plane/types";
+// import { Tooltip } from "@plane/propel/tooltip";
+// import { EIssuesStoreType } from "@plane/types";
 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 { 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";
@@ -37,19 +37,19 @@ type FormData = {
   filters: TWorkItemFilterExpression;
 };
 
-const initialWorkItemFilters = {
-  richFilters: {},
-  displayFilters: {},
-  displayProperties: {},
-  kanbanFilters: {
-    group_by: [],
-    sub_group_by: [],
-  },
-};
+// const initialWorkItemFilters = {
+//   richFilters: {},
+//   displayFilters: {},
+//   displayProperties: {},
+//   kanbanFilters: {
+//     group_by: [],
+//     sub_group_by: [],
+//   },
+// };
 
 const projectExportService = new ProjectExportService();
 
-export const ExportForm = observer((props: Props) => {
+export const ExportForm = observer(function ExportForm(props: Props) {
   // props
   const { workspaceSlug, mutateServices } = props;
   // states
@@ -84,7 +84,7 @@ export const ExportForm = observer((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="text-10 text-secondary flex-shrink-0">{projectDetails?.identifier}</span>
           <span className="truncate">{projectDetails?.name}</span>
         </div>
       ),
@@ -92,7 +92,7 @@ export const ExportForm = observer((props: Props) => {
   });
 
   // handlers
-  const ExportCSVToMail = async (formData: FormData) => {
+  async function ExportCSVToMail(formData: FormData) {
     setExportLoading(true);
     if (workspaceSlug && user) {
       const payload = {
@@ -101,55 +101,61 @@ export const ExportForm = observer((props: Props) => {
         multiple: formData.project.length > 1,
         rich_filters: formData.filters,
       };
-      await projectExportService
-        .csvExport(workspaceSlug as string, payload)
-        .then(() => {
-          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"),
-            message: t("workspace_settings.settings.exports.modal.toasts.success.message", {
-              entity:
-                formData.provider.provider === "csv"
-                  ? "CSV"
-                  : formData.provider.provider === "xlsx"
-                    ? "Excel"
-                    : formData.provider.provider === "json"
-                      ? "JSON"
-                      : "",
-            }),
-          });
-        })
-        .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"),
-            message: t("workspace_settings.settings.exports.modal.toasts.error.message"),
-          });
+      try {
+        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"),
+          message: t("workspace_settings.settings.exports.modal.toasts.success.message", {
+            entity:
+              formData.provider.provider === "csv"
+                ? "CSV"
+                : formData.provider.provider === "xlsx"
+                  ? "Excel"
+                  : formData.provider.provider === "json"
+                    ? "JSON"
+                    : "",
+          }),
+        });
+      } 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"),
+          message: t("workspace_settings.settings.exports.modal.toasts.error.message"),
+        });
+      }
+    } else {
+      setExportLoading(false);
     }
-  };
+  }
+
   return (
-    <form onSubmit={handleSubmit(ExportCSVToMail)} className="flex flex-col gap-4 mt-4">
+    <form
+      onSubmit={(e) => {
+        void handleSubmit(ExportCSVToMail)(e);
+      }}
+      className="flex flex-col gap-4 mt-4"
+    >
       <div className="flex gap-4">
         {/* Project Selector */}
         <div className="w-1/2">
-          <div className="text-sm font-medium text-custom-text-200 mb-2">
+          <div className="text-13 font-medium text-secondary mb-2">
             {t("workspace_settings.settings.exports.exporting_projects")}
           </div>
           <Controller
@@ -182,7 +188,7 @@ export const ExportForm = observer((props: Props) => {
         </div>
         {/* Format Selector */}
         <div className="w-1/2">
-          <div className="text-sm font-medium text-custom-text-200 mb-2">
+          <div className="text-13 font-medium text-secondary mb-2">
             {t("workspace_settings.settings.exports.format")}
           </div>
           <Controller
@@ -196,7 +202,7 @@ export const ExportForm = observer((props: Props) => {
                 label={t(value.i18n_title)}
                 optionsClassName="max-w-48 sm:max-w-[532px]"
                 placement="bottom-end"
-                buttonClassName="py-2 text-sm"
+                buttonClassName="py-2 text-13"
               >
                 {EXPORTERS_LIST.map((service) => (
                   <CustomSelect.Option key={service.provider} className="flex items-center gap-2" value={service}>
@@ -209,13 +215,13 @@ export const ExportForm = observer((props: Props) => {
         </div>
       </div>
       {/* Rich Filters */}
-      <div className="w-full">
+      {/* <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")}
@@ -224,7 +230,7 @@ export const ExportForm = observer((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>
@@ -250,7 +256,7 @@ export const ExportForm = observer((props: Props) => {
             </WorkspaceLevelWorkItemFiltersHOC>
           )}
         />
-      </div>
+      </div> */}
       <div className="flex items-center justify-between">
         <Button
           variant="primary"
diff --git a/apps/web/core/components/exporter/export-modal.tsx b/apps/web/core/components/exporter/export-modal.tsx
index 73cb92ad87..309e842ccb 100644
--- a/apps/web/core/components/exporter/export-modal.tsx
+++ b/apps/web/core/components/exporter/export-modal.tsx
@@ -1,17 +1,14 @@
-"use client";
-
 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";
@@ -29,7 +26,7 @@ type Props = {
 
 const projectExportService = new ProjectExportService();
 
-export const Exporter: React.FC<Props> = observer((props) => {
+export const Exporter = observer(function Exporter(props: Props) {
   const { isOpen, handleClose, user, provider, mutateServices } = props;
   // states
   const [exportLoading, setExportLoading] = useState(false);
@@ -54,7 +51,7 @@ export const Exporter: React.FC<Props> = observer((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="text-10 text-secondary flex-shrink-0">{projectDetails?.identifier}</span>
           <span className="truncate">{projectDetails?.name}</span>
         </div>
       ),
@@ -66,7 +63,8 @@ export const Exporter: React.FC<Props> = observer((props) => {
   const onChange = (val: any) => {
     setValue(val);
   };
-  const ExportCSVToMail = async () => {
+
+  async function ExportCSVToMail() {
     setExportLoading(true);
     if (workspaceSlug && user && typeof provider === "string") {
       const payload = {
@@ -75,7 +73,7 @@ export const Exporter: React.FC<Props> = observer((props) => {
         multiple: multiple,
       };
       await projectExportService
-        .csvExport(workspaceSlug as string, payload)
+        .csvExport(workspaceSlug, payload)
         .then(() => {
           mutateServices();
           router.push(`/${workspaceSlug}/settings/exports`);
@@ -97,105 +95,67 @@ export const Exporter: React.FC<Props> = observer((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="whitespace-nowrap text-13">
+            {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 024cd059eb..b35a9125f0 100644
--- a/apps/web/core/components/exporter/guide.tsx
+++ b/apps/web/core/components/exporter/guide.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, useSearchParams } from "next/navigation";
@@ -8,7 +6,7 @@ import { EXPORT_SERVICES_LIST } from "@/constants/fetch-keys";
 import { ExportForm } from "./export-form";
 import { PrevExports } from "./prev-exports";
 
-const IntegrationGuide = observer(() => {
+const IntegrationGuide = observer(function IntegrationGuide() {
   // router
   const { workspaceSlug } = useParams();
   const searchParams = useSearchParams();
@@ -22,16 +20,11 @@ const IntegrationGuide = observer(() => {
       <div className="h-full w-full">
         <>
           <ExportForm
-            workspaceSlug={workspaceSlug as string}
+            workspaceSlug={workspaceSlug}
             provider={provider}
-            mutateServices={() => mutate(EXPORT_SERVICES_LIST(workspaceSlug as string, `${cursor}`, `${per_page}`))}
-          />
-          <PrevExports
-            workspaceSlug={workspaceSlug as string}
-            cursor={cursor}
-            per_page={per_page}
-            setCursor={setCursor}
+            mutateServices={() => mutate(EXPORT_SERVICES_LIST(workspaceSlug, `${cursor}`, `${per_page}`))}
           />
+          <PrevExports workspaceSlug={workspaceSlug} cursor={cursor} per_page={per_page} setCursor={setCursor} />
         </>
       </div>
     </>
diff --git a/apps/web/core/components/exporter/prev-exports.tsx b/apps/web/core/components/exporter/prev-exports.tsx
index c7a7b3bee7..dbb8dbb73a 100644
--- a/apps/web/core/components/exporter/prev-exports.tsx
+++ b/apps/web/core/components/exporter/prev-exports.tsx
@@ -4,6 +4,7 @@ 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";
@@ -25,7 +26,7 @@ type Props = {
   setCursor: (cursor: string) => void;
 };
 type RowData = IExportData;
-export const PrevExports = observer((props: Props) => {
+export const PrevExports = observer(function PrevExports(props: Props) {
   // props
   const { workspaceSlug, cursor, per_page, setCursor } = props;
   // state
@@ -35,15 +36,13 @@ export const PrevExports = observer((props: Props) => {
   const columns = useExportColumns();
 
   const { data: exporterServices } = useSWR(
-    workspaceSlug && cursor ? EXPORT_SERVICES_LIST(workspaceSlug as string, cursor, `${per_page}`) : null,
-    workspaceSlug && cursor
-      ? () => integrationService.getExportsServicesList(workspaceSlug as string, cursor, per_page)
-      : null
+    workspaceSlug && cursor ? EXPORT_SERVICES_LIST(workspaceSlug, cursor, `${per_page}`) : null,
+    workspaceSlug && cursor ? () => integrationService.getExportsServicesList(workspaceSlug, cursor, per_page) : null
   );
 
   const handleRefresh = () => {
     setRefreshing(true);
-    mutate(EXPORT_SERVICES_LIST(workspaceSlug as string, `${cursor}`, `${per_page}`)).then(() => setRefreshing(false));
+    mutate(EXPORT_SERVICES_LIST(workspaceSlug, `${cursor}`, `${per_page}`)).then(() => setRefreshing(false));
   };
 
   useEffect(() => {
@@ -60,62 +59,53 @@ export const PrevExports = observer((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 pt-7">
         <div className="flex items-center gap-2">
-          <h3 className="flex gap-2 text-xl font-medium">
+          <h3 className="flex gap-2 text-18 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>
+          <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 0731bc47a7..fc80b1a0d7 100644
--- a/apps/web/core/components/exporter/single-export.tsx
+++ b/apps/web/core/components/exporter/single-export.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useState } from "react";
 // ui
@@ -14,9 +12,9 @@ type Props = {
   refreshing: boolean;
 };
 
-export const SingleExport: FC<Props> = ({ service, refreshing }) => {
+export function SingleExport({ service, refreshing }: Props) {
   const provider = service.provider;
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
   const [isLoading] = useState(false);
 
   const checkExpiry = (inputDateString: string) => {
@@ -30,7 +28,7 @@ export const SingleExport: FC<Props> = ({ service, refreshing }) => {
   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">
@@ -38,7 +36,7 @@ export const SingleExport: FC<Props> = ({ service, refreshing }) => {
             </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"
                 : service.status === "processing"
@@ -53,7 +51,7 @@ export const SingleExport: FC<Props> = ({ service, refreshing }) => {
             {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>
@@ -71,8 +69,8 @@ export const SingleExport: FC<Props> = ({ service, refreshing }) => {
           )}
         </>
       ) : (
-        <div className="text-xs text-red-500">Expired</div>
+        <div className="text-11 text-red-500">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 d281c062fc..6f37d6805e 100644
--- a/apps/web/core/components/gantt-chart/blocks/block-row.tsx
+++ b/apps/web/core/components/gantt-chart/blocks/block-row.tsx
@@ -22,7 +22,7 @@ type Props = {
   ganttContainerRef: React.RefObject<HTMLDivElement>;
 };
 
-export const BlockRow: React.FC<Props> = observer((props) => {
+export const BlockRow = observer(function BlockRow(props: Props) {
   const { blockId, showAllBlocks, blockUpdateHandler, handleScrollToBlock, enableAddBlock, selectionHelpers } = props;
   // states
   const [isHidden, setIsHidden] = useState(false);
@@ -83,19 +83,19 @@ export const BlockRow: React.FC<Props> = observer((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 7be9e9c277..4e5e52988d 100644
--- a/apps/web/core/components/gantt-chart/blocks/block.tsx
+++ b/apps/web/core/components/gantt-chart/blocks/block.tsx
@@ -26,7 +26,7 @@ type Props = {
   updateBlockDates?: (updates: IBlockUpdateDependencyData[]) => Promise<void>;
 };
 
-export const GanttChartBlock: React.FC<Props> = observer((props) => {
+export const GanttChartBlock = observer(function GanttChartBlock(props: Props) {
   const {
     blockId,
     showAllBlocks,
@@ -77,7 +77,7 @@ export const GanttChartBlock: React.FC<Props> = observer((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 bg-layer-1 rounded-sm" />}
           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 cc5bd9a3bd..6ad34b6002 100644
--- a/apps/web/core/components/gantt-chart/chart/header.tsx
+++ b/apps/web/core/components/gantt-chart/chart/header.tsx
@@ -23,7 +23,7 @@ type Props = {
   showToday: boolean;
 };
 
-export const GanttChartHeader: React.FC<Props> = observer((props) => {
+export const GanttChartHeader = observer(function GanttChartHeader(props: Props) {
   const { t } = useTranslation();
   const { blockIds, fullScreenMode, handleChartView, handleToday, loaderTitle, toggleFullScreenMode, showToday } =
     props;
@@ -32,11 +32,11 @@ export const GanttChartHeader: React.FC<Props> = observer((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 whitespace-nowrap py-2 bg-surface-1"
       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 +45,12 @@ export const GanttChartHeader: React.FC<Props> = observer((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 p-1 px-2 text-11 bg-layer-transparent hover:bg-layer-transparent-hover",
+              {
+                "bg-layer-transparent-selected": currentView === chartView?.key,
+              }
+            )}
             onClick={() => handleChartView(chartView?.key)}
           >
             {t(chartView?.i18n_title)}
@@ -59,7 +61,7 @@ export const GanttChartHeader: React.FC<Props> = observer((props) => {
       {showToday && (
         <button
           type="button"
-          className="rounded-sm p-1 px-2 text-xs hover:bg-custom-background-80"
+          className="rounded-md p-1 px-2 text-11 bg-layer-transparent hover:bg-layer-transparent-hover"
           onClick={handleToday}
         >
           {t("common.today")}
@@ -68,7 +70,7 @@ export const GanttChartHeader: React.FC<Props> = observer((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 p-1 transition-all bg-layer-transparent 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/main-content.tsx b/apps/web/core/components/gantt-chart/chart/main-content.tsx
index e95e4b0eb7..4a3047f3a9 100644
--- a/apps/web/core/components/gantt-chart/chart/main-content.tsx
+++ b/apps/web/core/components/gantt-chart/chart/main-content.tsx
@@ -17,7 +17,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";
@@ -56,7 +60,7 @@ type Props = {
   isEpic?: boolean;
 };
 
-export const GanttChartMainContent: React.FC<Props> = observer((props) => {
+export const GanttChartMainContent = observer(function GanttChartMainContent(props: Props) {
   const {
     blockIds,
     loadMoreBlocks,
@@ -167,7 +171,7 @@ export const GanttChartMainContent: React.FC<Props> = observer((props) => {
               // 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",
+                "h-full w-full overflow-auto vertical-scrollbar horizontal-scrollbar scrollbar-lg flex border-t-[0.5px] border-subtle",
                 {
                   "mb-8": bottomSpacing,
                 }
@@ -185,7 +189,6 @@ export const GanttChartMainContent: React.FC<Props> = observer((props) => {
                 enableSelection={enableSelection}
                 sidebarToRender={sidebarToRender}
                 title={title}
-                quickAdd={quickAdd}
                 selectionHelpers={helpers}
                 showAllBlocks={showAllBlocks}
                 isEpic={isEpic}
@@ -212,6 +215,7 @@ export const GanttChartMainContent: React.FC<Props> = observer((props) => {
                     />
                     <TimelineDependencyPaths isEpic={isEpic} />
                     <TimelineDraggablePath />
+                    <GanttAdditionalLayers itemsContainerWidth={itemsContainerWidth} blockCount={blockIds.length} />
                     <GanttChartBlocksList
                       blockIds={blockIds}
                       blockToRender={blockToRender}
@@ -227,6 +231,7 @@ export const GanttChartMainContent: React.FC<Props> = observer((props) => {
                 )}
               </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 8231507d59..2eae619e47 100644
--- a/apps/web/core/components/gantt-chart/chart/root.tsx
+++ b/apps/web/core/components/gantt-chart/chart/root.tsx
@@ -48,7 +48,7 @@ const timelineViewHelpers = {
   quarter: quarterView,
 };
 
-export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
+export const ChartViewRoot = observer(function ChartViewRoot(props: ChartViewRootProps) {
   const {
     border,
     title,
@@ -175,9 +175,9 @@ export const ChartViewRoot: FC<ChartViewRootProps> = observer((props) => {
 
   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("relative flex flex-col h-full select-none rounded-xs bg-surface-1 shadow", {
+        "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 68e77741d2..12441f9240 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
@@ -9,7 +9,7 @@ import { HEADER_HEIGHT, SIDEBAR_WIDTH } from "../constants";
 type Props = {
   ganttContainerRef: RefObject<HTMLDivElement>;
 };
-export const TimelineDragHelper = observer((props: Props) => {
+export const TimelineDragHelper = observer(function TimelineDragHelper(props: Props) {
   const { ganttContainerRef } = props;
   const { isDragging } = useTimeLineChartStore();
 
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 ad87337fb5..7c2c7bdc65 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,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // components
 import { cn } from "@plane/utils";
@@ -10,7 +9,7 @@ import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
 import type { IMonthView } from "../../views";
 import { getNumberOfDaysBetweenTwoDates } from "../../views/helpers";
 
-export const MonthChartView: FC<any> = observer(() => {
+export const MonthChartView = observer(function MonthChartView(_props: any) {
   // chart hook
   const { currentViewData, renderView } = useTimeLineChartStore();
   const monthView: IMonthView = renderView;
@@ -25,12 +24,12 @@ export const MonthChartView: FC<any> = observer(() => {
   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 min-h-full h-max w-max flex">
       {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="w-full sticky top-0 z-[5] bg-surface-1 flex-shrink-0"
             style={{
               height: `${HEADER_HEIGHT}px`,
             }}
@@ -40,18 +39,18 @@ export const MonthChartView: FC<any> = observer(() => {
               {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 flex items-center font-regular z-[1] m-1 whitespace-nowrap px-3 py-1 text-14 capitalize bg-surface-1 text-secondary"
                     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("rounded-sm ml-2 font-medium bg-accent-primary px-1 text-9 text-on-color")}>
                         Current
                       </span>
                     )}
@@ -63,25 +62,25 @@ export const MonthChartView: FC<any> = observer(() => {
             <div className="h-5 w-full flex">
               {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 py-1 px-2 text-center capitalize justify-between 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>
@@ -90,9 +89,9 @@ export const MonthChartView: FC<any> = observer(() => {
           <div className="h-full w-full flex-grow flex">
             {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 aed12a74aa..02d746c059 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,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // plane utils
 import { cn } from "@plane/utils";
@@ -9,7 +8,7 @@ import { HEADER_HEIGHT, SIDEBAR_WIDTH } from "../../constants";
 import type { IMonthBlock, IQuarterMonthBlock } from "../../views";
 import { groupMonthsToQuarters } from "../../views";
 
-export const QuarterChartView: FC<any> = observer(() => {
+export const QuarterChartView = observer(function QuarterChartView(_props: any) {
   const { currentViewData, renderView } = useTimeLineChartStore();
   const monthBlocks: IMonthBlock[] = renderView;
 
@@ -21,11 +20,11 @@ export const QuarterChartView: FC<any> = observer(() => {
         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="w-full sticky top-0 z-[5] bg-surface-1 flex-shrink-0 outline-[1px] outline-subtle-1"
               style={{
                 height: `${HEADER_HEIGHT}px`,
               }}
@@ -33,19 +32,19 @@ export const QuarterChartView: FC<any> = observer(() => {
               {/** Main Quarter Title */}
               <div className="w-full inline-flex h-7 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 flex items-center font-regular z-[1] my-1 whitespace-nowrap px-3 py-1 text-14 capitalize bg-surface-1 text-secondary"
                   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("rounded-sm ml-2 font-medium  bg-accent-primary px-1 text-9 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 whitespace-nowrap px-3 py-2 text-11 capitalize text-placeholder">
                   {quarterBlock.shortTitle}
                 </div>
               </div>
@@ -55,17 +54,17 @@ export const QuarterChartView: FC<any> = observer(() => {
                   <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 text-center capitalize justify-center 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="space-x-1 flex items-center justify-center text-11 font-medium h-full">
                       <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}
@@ -80,8 +79,8 @@ export const QuarterChartView: FC<any> = observer(() => {
               {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 2a6e64ba02..976ea717e4 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,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // plane utils
 import { cn } from "@plane/utils";
@@ -8,7 +7,7 @@ import { useTimeLineChartStore } from "@/hooks/use-timeline-chart";
 import { HEADER_HEIGHT, SIDEBAR_WIDTH } from "../../constants";
 import type { IWeekBlock } from "../../views";
 
-export const WeekChartView: FC<any> = observer(() => {
+export const WeekChartView = observer(function WeekChartView(_props: any) {
   const { currentViewData, renderView } = useTimeLineChartStore();
   const weekBlocks: IWeekBlock[] = renderView;
 
@@ -17,12 +16,12 @@ export const WeekChartView: FC<any> = observer(() => {
       {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="w-full sticky top-0 z-[5] bg-surface-1 flex-shrink-0 outline-[1px] outline-subtle-1"
               style={{
                 height: `${HEADER_HEIGHT}px`,
               }}
@@ -30,14 +29,14 @@ export const WeekChartView: FC<any> = observer(() => {
               {/** Main Months Title */}
               <div className="w-full inline-flex h-7 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 flex items-center font-regular z-[1] m-1 whitespace-nowrap px-3 py-1 text-13 capitalize bg-surface-1 text-secondary"
                   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 whitespace-nowrap px-3 py-2 text-11 capitalize text-placeholder">
                   {block?.weekData?.title}
                 </div>
               </div>
@@ -47,20 +46,18 @@ export const WeekChartView: FC<any> = observer(() => {
                   <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 p-1 text-center capitalize justify-between 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 +68,17 @@ export const WeekChartView: FC<any> = observer(() => {
               </div>
             </div>
             {/** Day Columns */}
-            <div className="h-full w-full flex-grow flex bg-custom-background-100">
+            <div className="h-full w-full flex-grow flex 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/data/index.ts b/apps/web/core/components/gantt-chart/data/index.ts
index 4c11b865e4..50cc76ec5a 100644
--- a/apps/web/core/components/gantt-chart/data/index.ts
+++ b/apps/web/core/components/gantt-chart/data/index.ts
@@ -59,7 +59,7 @@ export const timePreview = (date: Date) => {
 export const datePreview = (date: Date, includeTime: boolean = false) => {
   const day = date.getDate();
   let month: number | WeekMonthDataType = date.getMonth();
-  month = months[month as number] as WeekMonthDataType;
+  month = months[month];
   const year = date.getFullYear();
 
   return `${charCapitalize(month?.shortTitle)} ${day}, ${year}${includeTime ? `, ${timePreview(date)}` : ``}`;
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 841a0ab6dc..251a99e0e8 100644
--- a/apps/web/core/components/gantt-chart/helpers/add-block.tsx
+++ b/apps/web/core/components/gantt-chart/helpers/add-block.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useRef, useState } from "react";
 import { addDays } from "date-fns";
 import { observer } from "mobx-react";
@@ -19,7 +17,7 @@ type Props = {
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void;
 };
 
-export const ChartAddBlock: React.FC<Props> = observer((props) => {
+export const ChartAddBlock = observer(function ChartAddBlock(props: Props) {
   const { block, blockUpdateHandler } = props;
   // states
   const [isButtonVisible, setIsButtonVisible] = useState(false);
@@ -87,7 +85,7 @@ export const ChartAddBlock: React.FC<Props> = observer((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 -translate-x-1/2 -translate-y-1/2 h-8 w-8 bg-layer-1 p-1.5 rounded-sm border border-strong grid place-items-center text-secondary hover:text-primary"
             style={{
               marginLeft: `${buttonXPosition}px`,
             }}
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 48e7277c3b..a2a1d7dd26 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
@@ -16,7 +16,7 @@ type LeftResizableProps = {
     width: number;
   };
 };
-export const LeftResizable = observer((props: LeftResizableProps) => {
+export const LeftResizable = observer(function LeftResizable(props: LeftResizableProps) {
   const { enableBlockLeftResize, isMoving, handleBlockDrag, position } = props;
   const [isHovering, setIsHovering] = useState(false);
 
@@ -32,8 +32,8 @@ export const LeftResizable = observer((props: LeftResizableProps) => {
   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 flex text-11 font-regular text-tertiary h-full w-32 -left-36 justify-end items-center">
+          <div className="px-2 py-1 bg-accent-subtle rounded-sm">{dateString}</div>
         </div>
       )}
       <div
@@ -50,7 +50,7 @@ export const LeftResizable = observer((props: LeftResizableProps) => {
       />
       <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 left-1 top-1/2 -translate-y-1/2 h-7 w-1 z-[5] rounded-xs bg-surface-1 transition-all duration-300 opacity-0 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 8b4f0ea49b..b6c1c689da 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
@@ -16,7 +16,7 @@ type RightResizableProps = {
     width: number;
   };
 };
-export const RightResizable = observer((props: RightResizableProps) => {
+export const RightResizable = observer(function RightResizable(props: RightResizableProps) {
   const { enableBlockRightResize, handleBlockDrag, isMoving, position } = props;
   const [isHovering, setIsHovering] = useState(false);
 
@@ -32,8 +32,8 @@ export const RightResizable = observer((props: RightResizableProps) => {
   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="z-[10] absolute flex text-11 font-regular text-tertiary h-full w-32 -right-36 justify-start items-center">
+          <div className="px-2 py-1 bg-accent-subtle rounded-sm">{dateString}</div>
         </div>
       )}
       <div
@@ -48,7 +48,7 @@ export const RightResizable = observer((props: RightResizableProps) => {
       />
       <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 right-1 top-1/2 -translate-y-1/2 h-7 w-1 z-[5] rounded-xs bg-surface-1 transition-all duration-300 opacity-0 group-hover:opacity-100",
           {
             "-right-1.5 opacity-100": isRightResizing,
           }
diff --git a/apps/web/core/components/gantt-chart/helpers/draggable.tsx b/apps/web/core/components/gantt-chart/helpers/draggable.tsx
index f365903e00..9ea0e71b3d 100644
--- a/apps/web/core/components/gantt-chart/helpers/draggable.tsx
+++ b/apps/web/core/components/gantt-chart/helpers/draggable.tsx
@@ -23,7 +23,7 @@ type Props = {
   ganttContainerRef: RefObject<HTMLDivElement>;
 };
 
-export const ChartDraggable: React.FC<Props> = observer((props) => {
+export const ChartDraggable = observer(function ChartDraggable(props: Props) {
   const {
     block,
     blockToRender,
@@ -49,7 +49,7 @@ export const ChartDraggable: React.FC<Props> = observer((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/root.tsx b/apps/web/core/components/gantt-chart/root.tsx
index e59edfedea..18bedc87f7 100644
--- a/apps/web/core/components/gantt-chart/root.tsx
+++ b/apps/web/core/components/gantt-chart/root.tsx
@@ -32,7 +32,7 @@ type GanttChartRootProps = {
   isEpic?: boolean;
 };
 
-export const GanttChartRoot: FC<GanttChartRootProps> = observer((props) => {
+export const GanttChartRoot = observer(function GanttChartRoot(props: GanttChartRootProps) {
   const {
     border = true,
     title,
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 a83c078501..5d09cf507c 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,5 +1,3 @@
-"use client";
-
 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";
@@ -18,7 +16,7 @@ type Props = {
   onDrop: (draggingBlockId: string | undefined, droppedBlockId: string | undefined, dropAtEndOfList: boolean) => void;
 };
 
-export const GanttDnDHOC = observer((props: Props) => {
+export const GanttDnDHOC = observer(function GanttDnDHOC(props: Props) {
   const { id, isLastChild, children, onDrop, isDragEnabled } = props;
   // states
   const [isDragging, setIsDragging] = useState(false);
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 b5e3a11eae..cdefcc39cd 100644
--- a/apps/web/core/components/gantt-chart/sidebar/issues/block.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/issues/block.tsx
@@ -21,7 +21,7 @@ type Props = {
   isEpic?: boolean;
 };
 
-export const IssuesSidebarBlock = observer((props: Props) => {
+export const IssuesSidebarBlock = observer(function IssuesSidebarBlock(props: Props) {
   const { block, enableSelection, isDragging, selectionHelpers, isEpic = false } = props;
   // store hooks
   const { updateActiveBlockId, isBlockActive, getNumberOfDaysFromPosition } = useTimeLineChartStore();
@@ -39,19 +39,22 @@ export const IssuesSidebarBlock = observer((props: Props) => {
   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 w-full flex items-center gap-2 pr-4 bg-layer-transparent 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`,
         }}
@@ -76,7 +79,7 @@ export const IssuesSidebarBlock = observer((props: Props) => {
             <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/sidebar.tsx b/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
index ca5686ffd4..a210c40016 100644
--- a/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/issues/sidebar.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { RefObject } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
@@ -33,7 +31,7 @@ type Props = {
   isEpic?: boolean;
 };
 
-export const IssueGanttSidebar: React.FC<Props> = observer((props) => {
+export const IssueGanttSidebar = observer(function IssueGanttSidebar(props: Props) {
   const {
     blockUpdateHandler,
     blockIds,
@@ -113,7 +111,7 @@ export const IssueGanttSidebar: React.FC<Props> = observer((props) => {
           })}
           {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 md:h-8 w-full items-center justify-between gap-1.5 rounded-sm md:px-1 px-4 py-1.5 bg-layer-1 animate-pulse" />
             </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 04563db613..0afffda566 100644
--- a/apps/web/core/components/gantt-chart/sidebar/modules/block.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/modules/block.tsx
@@ -14,7 +14,7 @@ type Props = {
   isDragging: boolean;
 };
 
-export const ModulesSidebarBlock: React.FC<Props> = observer((props) => {
+export const ModulesSidebarBlock = observer(function ModulesSidebarBlock(props: Props) {
   const { blockId, isDragging } = props;
   // store hooks
   const { getBlockById, updateActiveBlockId, isBlockActive, getNumberOfDaysFromPosition } = useTimeLineChartStore();
@@ -28,16 +28,19 @@ export const ModulesSidebarBlock: React.FC<Props> = observer((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 w-full flex items-center gap-2 pr-4 bg-layer-transparent hover:bg-layer-transparent-hover",
+          {
+            "bg-transparent-hover": isBlockActive(block.id),
+          }
+        )}
         style={{
           height: `${BLOCK_HEIGHT}px`,
         }}
@@ -47,7 +50,7 @@ export const ModulesSidebarBlock: React.FC<Props> = observer((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/sidebar.tsx b/apps/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
index e3adf776ba..1e8373f57c 100644
--- a/apps/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/modules/sidebar.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // ui
 import { GANTT_TIMELINE_TYPE } from "@plane/types";
@@ -20,7 +18,7 @@ type Props = {
   enableReorder: boolean;
 };
 
-export const ModuleGanttSidebar: React.FC<Props> = observer((props) => {
+export const ModuleGanttSidebar = observer(function ModuleGanttSidebar(props: Props) {
   const { blockUpdateHandler, blockIds, enableReorder } = props;
 
   const { getBlockById } = useTimeLineChart(GANTT_TIMELINE_TYPE.MODULE);
diff --git a/apps/web/core/components/gantt-chart/sidebar/root.tsx b/apps/web/core/components/gantt-chart/sidebar/root.tsx
index 15af6287df..4235db09f9 100644
--- a/apps/web/core/components/gantt-chart/sidebar/root.tsx
+++ b/apps/web/core/components/gantt-chart/sidebar/root.tsx
@@ -22,13 +22,12 @@ type Props = {
   enableSelection: boolean | ((blockId: string) => boolean);
   sidebarToRender: (props: any) => React.ReactNode;
   title: string;
-  quickAdd?: React.ReactNode | undefined;
   selectionHelpers: TSelectionHelper;
   showAllBlocks?: boolean;
   isEpic?: boolean;
 };
 
-export const GanttChartSidebar: React.FC<Props> = observer((props) => {
+export const GanttChartSidebar = observer(function GanttChartSidebar(props: Props) {
   const { t } = useTranslation();
   const {
     blockIds,
@@ -40,7 +39,6 @@ export const GanttChartSidebar: React.FC<Props> = observer((props) => {
     canLoadMoreBlocks,
     ganttContainerRef,
     title,
-    quickAdd,
     selectionHelpers,
     showAllBlocks = false,
     isEpic = false,
@@ -52,14 +50,14 @@ export const GanttChartSidebar: React.FC<Props> = observer((props) => {
     <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 min-h-full h-max 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 box-border flex-shrink-0 flex items-end justify-between gap-2 border-b-[0.5px] border-subtle-1 pb-2 pr-4 text-13 font-medium text-tertiary sticky top-0 z-10 bg-surface-1"
         style={{
           height: `${HEADER_HEIGHT}px`,
         }}
@@ -84,7 +82,7 @@ export const GanttChartSidebar: React.FC<Props> = observer((props) => {
         <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="min-h-full h-max bg-surface-1">
         {sidebarToRender &&
           sidebarToRender({
             title,
@@ -100,7 +98,6 @@ export const GanttChartSidebar: React.FC<Props> = observer((props) => {
             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 28590e3486..1130fd389d 100644
--- a/apps/web/core/components/gantt-chart/sidebar/utils.ts
+++ b/apps/web/core/components/gantt-chart/sidebar/utils.ts
@@ -5,7 +5,7 @@ export const handleOrderChange = (
   droppedBlockId: string | undefined,
   dropAtEndOfList: boolean,
   blockIds: string[] | null,
-  getBlockById: (id: string, currentViewData?: ChartDataType | undefined) => IGanttBlock,
+  getBlockById: (id: string, currentViewData?: ChartDataType) => IGanttBlock,
   blockUpdateHandler: (block: any, payload: IBlockUpdateData) => void
 ) => {
   if (!blockIds || !draggingBlockId || !droppedBlockId) return;
diff --git a/apps/web/core/components/global/chat-support-modal.tsx b/apps/web/core/components/global/chat-support-modal.tsx
new file mode 100644
index 0000000000..75c6c10ad1
--- /dev/null
+++ b/apps/web/core/components/global/chat-support-modal.tsx
@@ -0,0 +1,43 @@
+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/product-updates/fallback.tsx b/apps/web/core/components/global/product-updates/fallback.tsx
new file mode 100644
index 0000000000..ac865f437e
--- /dev/null
+++ b/apps/web/core/components/global/product-updates/fallback.tsx
@@ -0,0 +1,32 @@
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+
+type TProductUpdatesFallbackProps = {
+  description: string;
+  variant: "cloud" | "self-managed";
+};
+
+export function ProductUpdatesFallback(props: TProductUpdatesFallbackProps) {
+  const { description, variant } = props;
+  // derived values
+  const changelogUrl =
+    variant === "cloud"
+      ? "https://plane.so/changelog?category=cloud"
+      : "https://plane.so/changelog?category=self-hosted";
+
+  return (
+    <div className="py-8">
+      <EmptyStateDetailed
+        assetKey="changelog"
+        description={description}
+        align="center"
+        actions={[
+          {
+            label: "Go to changelog",
+            variant: "primary",
+            onClick: () => window.open(changelogUrl, "_blank"),
+          },
+        ]}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/core/components/global/product-updates/footer.tsx b/apps/web/core/components/global/product-updates/footer.tsx
index 9c21ea7857..2e88607a95 100644
--- a/apps/web/core/components/global/product-updates/footer.tsx
+++ b/apps/web/core/components/global/product-updates/footer.tsx
@@ -6,7 +6,7 @@ import { PlaneLogo } from "@plane/propel/icons";
 // helpers
 import { cn } from "@plane/utils";
 
-export const ProductUpdatesFooter = () => {
+export function ProductUpdatesFooter() {
   const { t } = useTranslation();
   return (
     <div className="flex items-center justify-between flex-shrink-0 gap-4 m-6 mb-4">
@@ -14,7 +14,8 @@ export const ProductUpdatesFooter = () => {
         <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 hover:text-primary hover:underline underline-offset-1 outline-none"
+          rel="noreferrer"
         >
           {t("docs")}
         </a>
@@ -25,7 +26,8 @@ export const 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 hover:text-primary hover:underline underline-offset-1 outline-none"
+          rel="noreferrer"
         >
           {t("full_changelog")}
         </a>
@@ -35,7 +37,8 @@ export const 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 hover:text-primary hover:underline underline-offset-1 outline-none"
+          rel="noreferrer"
         >
           {t("support")}
         </a>
@@ -45,7 +48,8 @@ export const ProductUpdatesFooter = () => {
         <a
           href="https://go.plane.so/p-discord"
           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 hover:text-primary hover:underline underline-offset-1 outline-none"
+          rel="noreferrer"
         >
           Discord
         </a>
@@ -54,13 +58,14 @@ export const ProductUpdatesFooter = () => {
         href="https://plane.so/pages"
         target="_blank"
         className={cn(
-          getButtonStyling("accent-primary", "sm"),
+          getButtonStyling("secondary", "base"),
           "flex gap-1.5 items-center text-center font-medium hover:underline underline-offset-2 outline-none"
         )}
+        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/modal.tsx b/apps/web/core/components/global/product-updates/modal.tsx
index 45b2781e1b..87ac429c2e 100644
--- a/apps/web/core/components/global/product-updates/modal.tsx
+++ b/apps/web/core/components/global/product-updates/modal.tsx
@@ -1,28 +1,23 @@
-import type { FC } from "react";
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { USER_TRACKER_ELEMENTS } from "@plane/constants";
-import { useTranslation } from "@plane/i18n";
 // ui
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // components
 import { ProductUpdatesFooter } from "@/components/global";
 // helpers
 import { captureView } from "@/helpers/event-tracker.helper";
-// hooks
-import { useInstance } from "@/hooks/store/use-instance";
 // plane web components
-import { ProductUpdatesHeader } from "@/plane-web/components/global";
+import { ProductUpdatesChangelog } from "@/plane-web/components/global/product-updates/changelog";
+import { ProductUpdatesHeader } from "@/plane-web/components/global/product-updates/header";
 
 export type ProductUpdatesModalProps = {
   isOpen: boolean;
   handleClose: () => void;
 };
 
-export const ProductUpdatesModal: FC<ProductUpdatesModalProps> = observer((props) => {
+export const ProductUpdatesModal = observer(function ProductUpdatesModal(props: ProductUpdatesModalProps) {
   const { isOpen, handleClose } = props;
-  const { t } = useTranslation();
-  const { config } = useInstance();
 
   useEffect(() => {
     if (isOpen) {
@@ -33,27 +28,7 @@ export const ProductUpdatesModal: FC<ProductUpdatesModalProps> = observer((props
   return (
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXXXL}>
       <ProductUpdatesHeader />
-      <div className="flex flex-col h-[60vh] vertical-scrollbar scrollbar-xs overflow-hidden overflow-y-scroll px-6 mx-0.5">
-        {config?.instance_changelog_url && config?.instance_changelog_url !== "" ? (
-          <iframe src={config?.instance_changelog_url} className="w-full h-full" />
-        ) : (
-          <div className="flex flex-col items-center justify-center w-full h-full mb-8">
-            <div className="text-lg font-medium">{t("we_are_having_trouble_fetching_the_updates")}</div>
-            <div className="text-sm text-custom-text-200">
-              {t("please_visit")}
-              <a
-                data-ph-element={USER_TRACKER_ELEMENTS.CHANGELOG_REDIRECTED}
-                href="https://go.plane.so/p-changelog"
-                target="_blank"
-                className="text-sm text-custom-primary-100 font-medium hover:text-custom-primary-200 underline underline-offset-1 outline-none"
-              >
-                {t("our_changelogs")}
-              </a>{" "}
-              {t("for_the_latest_updates")}.
-            </div>
-          </div>
-        )}
-      </div>
+      <ProductUpdatesChangelog />
       <ProductUpdatesFooter />
     </ModalCore>
   );
diff --git a/apps/web/core/components/global/timezone-select.tsx b/apps/web/core/components/global/timezone-select.tsx
index 73817cc0d5..61688c8419 100644
--- a/apps/web/core/components/global/timezone-select.tsx
+++ b/apps/web/core/components/global/timezone-select.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { observer } from "mobx-react";
 import { CustomSearchSelect } from "@plane/ui";
@@ -18,7 +16,7 @@ type TTimezoneSelect = {
   disabled?: boolean;
 };
 
-export const TimezoneSelect: FC<TTimezoneSelect> = observer((props) => {
+export const TimezoneSelect = observer(function TimezoneSelect(props: TTimezoneSelect) {
   // props
   const {
     value,
@@ -43,7 +41,7 @@ export const TimezoneSelect: FC<TTimezoneSelect> = observer((props) => {
         buttonClassName={cn(buttonClassName, {
           "border-red-500": error,
         })}
-        className={cn("rounded-md border-[0.5px] !border-custom-border-200", className)}
+        className={cn("rounded-md border-[0.5px] !border-subtle", className)}
         optionsClassName={cn("w-72", optionsClassName)}
         input
         disabled={isDisabled || disabled}
diff --git a/apps/web/core/components/home/home-dashboard-widgets.tsx b/apps/web/core/components/home/home-dashboard-widgets.tsx
index 362c64d11a..40f3f59da2 100644
--- a/apps/web/core/components/home/home-dashboard-widgets.tsx
+++ b/apps/web/core/components/home/home-dashboard-widgets.tsx
@@ -54,7 +54,7 @@ export const HOME_WIDGETS_LIST: {
   },
 };
 
-export const DashboardWidgets = observer(() => {
+export const DashboardWidgets = observer(function DashboardWidgets() {
   // router
   const { workspaceSlug } = useParams();
   // navigation
@@ -86,7 +86,7 @@ export const DashboardWidgets = observer(() => {
       {!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;
diff --git a/apps/web/core/components/home/root.tsx b/apps/web/core/components/home/root.tsx
index 5a0e6188f8..d38e71410e 100644
--- a/apps/web/core/components/home/root.tsx
+++ b/apps/web/core/components/home/root.tsx
@@ -4,21 +4,19 @@ import useSWR from "swr";
 // plane imports
 import { PRODUCT_TOUR_TRACKER_EVENTS } from "@plane/constants";
 import { ContentWrapper } from "@plane/ui";
-import { cn } from "@plane/utils";
-// components
-import { TourRoot } from "@/components/onboarding/tour";
 // helpers
 import { captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import { useHome } from "@/hooks/store/use-home";
 import { useUserProfile, useUser } from "@/hooks/store/user";
-// plane web components
+// plane web imports
 import { HomePeekOverviewsRoot } from "@/plane-web/components/home";
+import { TourRoot } from "@/plane-web/components/onboarding/tour/root";
 // local imports
 import { DashboardWidgets } from "./home-dashboard-widgets";
 import { UserGreetingsView } from "./user-greetings";
 
-export const WorkspaceHomeView = observer(() => {
+export const WorkspaceHomeView = observer(function WorkspaceHomeView() {
   // store hooks
   const { workspaceSlug } = useParams();
   const { data: currentUser } = useUser();
@@ -54,13 +52,13 @@ export const WorkspaceHomeView = observer(() => {
   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">
+        <div className="fixed left-0 top-0 z-20 grid h-full w-full place-items-center bg-backdrop bg-opacity-50 transition-opacity overflow-y-auto">
           <TourRoot onComplete={handleTourCompleted} />
         </div>
       )}
       <>
         <HomePeekOverviewsRoot />
-        <ContentWrapper className={cn("gap-6 bg-custom-background-100 mx-auto scrollbar-hide px-page-x lg:px-0")}>
+        <ContentWrapper className="gap-6 bg-surface-1 mx-auto scrollbar-hide px-page-x">
           <div className="max-w-[800px] mx-auto w-full">
             {currentUser && <UserGreetingsView user={currentUser} />}
             <DashboardWidgets />
diff --git a/apps/web/core/components/home/user-greetings.tsx b/apps/web/core/components/home/user-greetings.tsx
index de935ea98c..5c46d7e1d9 100644
--- a/apps/web/core/components/home/user-greetings.tsx
+++ b/apps/web/core/components/home/user-greetings.tsx
@@ -10,7 +10,7 @@ export interface IUserGreetingsView {
   user: IUser;
 }
 
-export const UserGreetingsView: FC<IUserGreetingsView> = (props) => {
+export function UserGreetingsView(props: IUserGreetingsView) {
   const { user } = props;
   // current time hook
   const { currentTime } = useCurrentTime();
@@ -42,10 +42,10 @@ export const UserGreetingsView: FC<IUserGreetingsView> = (props) => {
 
   return (
     <div className="flex flex-col items-center my-6">
-      <h2 className="text-2xl font-semibold text-center">
+      <h2 className="text-20 font-semibold text-center">
         {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}
@@ -53,4 +53,4 @@ export const UserGreetingsView: FC<IUserGreetingsView> = (props) => {
       </h5>
     </div>
   );
-};
+}
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 d375d5d87c..05e93db936 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,10 @@
 import { useTranslation } from "@plane/i18n";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 
-export const LinksEmptyState = () => {
+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 items-center justify-center py-10 bg-layer-1 w-full rounded-lg">
       <EmptyStateCompact
         assetKey="link"
         assetClassName="w-20 h-20"
@@ -12,4 +12,4 @@ export const LinksEmptyState = () => {
       />
     </div>
   );
-};
+}
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 e6f59952bc..84e8dd1624 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
@@ -3,12 +3,12 @@ import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { Check, Hotel, Users } from "lucide-react";
+import { Check, Hotel } from "lucide-react";
 // plane ui
 import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
 import { useLocalStorage } from "@plane/hooks";
 import { useTranslation } from "@plane/i18n";
-import { ProjectIcon, CloseIcon } from "@plane/propel/icons";
+import { MembersPropertyIcon, ProjectIcon, CloseIcon } from "@plane/propel/icons";
 import { cn, getFileURL } from "@plane/utils";
 // helpers
 // hooks
@@ -19,7 +19,7 @@ import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUser, useUserPermissions } from "@/hooks/store/user";
 // plane web constants
 
-export const NoProjectsEmptyState = observer(() => {
+export const NoProjectsEmptyState = observer(function NoProjectsEmptyState() {
   // navigation
   const { workspaceSlug } = useParams();
   // store hooks
@@ -66,7 +66,7 @@ export const NoProjectsEmptyState = observer(() => {
       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,7 +93,7 @@ export const NoProjectsEmptyState = observer(() => {
       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 capitalize text-on-color">
               <img
                 src={getFileURL(currentUser?.avatar_url)}
                 className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
@@ -103,7 +103,7 @@ export const NoProjectsEmptyState = observer(() => {
           </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 capitalize text-on-color text-13">
               {(currentUser?.email ?? currentUser?.display_name ?? "?")[0]}
             </span>
           </Link>
@@ -134,9 +134,9 @@ export const NoProjectsEmptyState = observer(() => {
   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="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="text-tertiary font-medium text-13 flex items-center gap-1"
           onClick={() => {
             if (!storedValue) return;
             setValue({ ...storedValue, hide: true });
@@ -150,25 +150,19 @@ export const NoProjectsEmptyState = observer(() => {
         {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 p-4 bg-layer-2 rounded-xl border border-subtle">
               <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("grid place-items-center bg-surface-2 rounded-full size-9 mb-3 text-placeholder", {
+                  "text-accent-primary bg-accent-primary/10": !isStateComplete,
+                })}
               >
-                <span className="text-3xl my-auto">{item.icon}</span>
+                <span className="text-24 my-auto">{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="text-13 font-medium text-primary mb-2">{t(item.title)}</h3>
+              <p className="text-11 text-tertiary mb-2">{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" />
+                  <Check className="size-3 text-accent-primary text-on-color" />
                 </div>
               ) : (
                 !item.cta.disabled &&
@@ -186,14 +180,14 @@ export const NoProjectsEmptyState = observer(() => {
                         [item.flag]: true,
                       });
                     }}
-                    className={cn("text-custom-primary-100 hover:text-custom-primary-200 text-sm font-medium", {})}
+                    className={cn("text-accent-primary hover:text-accent-secondary text-13 font-medium", {})}
                   >
                     {t(item.cta.text)}
                   </Link>
                 ) : (
                   <button
                     type="button"
-                    className="text-custom-primary-100 hover:text-custom-primary-200 text-sm font-medium"
+                    className="text-accent-primary hover:text-accent-secondary text-13 font-medium text-left"
                     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 bca5bf603c..02cb744fb8 100644
--- a/apps/web/core/components/home/widgets/empty-states/recents.tsx
+++ b/apps/web/core/components/home/widgets/empty-states/recents.tsx
@@ -27,14 +27,14 @@ const getDisplayContent = (type: string): { assetKey: CompactAssetType; text: st
   }
 };
 
-export const RecentsEmptyState = ({ type }: { type: string }) => {
+export function RecentsEmptyState({ type }: { type: string }) {
   const { t } = useTranslation();
 
   const { assetKey, text } = getDisplayContent(type);
 
   return (
-    <div className="flex items-center justify-center py-10 bg-custom-background-90 w-full">
+    <div className="flex items-center justify-center py-10 bg-layer-1 w-full rounded-lg">
       <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 37a3299dac..d6b2e1d186 100644
--- a/apps/web/core/components/home/widgets/empty-states/stickies.tsx
+++ b/apps/web/core/components/home/widgets/empty-states/stickies.tsx
@@ -1,11 +1,11 @@
 import { useTranslation } from "@plane/i18n";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 
-export const StickiesEmptyState = () => {
+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 items-center justify-center py-10 bg-layer-1 w-full rounded-lg">
       <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 19d9aba92f..038e42ff1b 100644
--- a/apps/web/core/components/home/widgets/index.ts
+++ b/apps/web/core/components/home/widgets/index.ts
@@ -1,4 +1,3 @@
 export * from "./empty-states";
 export * from "./loaders";
 export * from "./recents";
-export * from "./empty-states";
diff --git a/apps/web/core/components/home/widgets/links/action.tsx b/apps/web/core/components/home/widgets/links/action.tsx
index 5199b7d4dc..2144267ff8 100644
--- a/apps/web/core/components/home/widgets/links/action.tsx
+++ b/apps/web/core/components/home/widgets/links/action.tsx
@@ -4,19 +4,19 @@ import { useTranslation } from "@plane/i18n";
 type TProps = {
   onClick: () => void;
 };
-export const AddLink = (props: TProps) => {
+export function AddLink(props: TProps) {
   const { onClick } = props;
   const { t } = useTranslation();
 
   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 bg-surface-1 px-4 w-[230px] h-[56px] border-[0.5px] border-subtle rounded-md gap-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="rounded-sm p-2 bg-layer-1/40 w-8 h-8 my-auto">
+        <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="text-13 font-medium my-auto">{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 bdebc8c937..3310dd9d71 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,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useEffect } from "react";
 import { observer } from "mobx-react";
@@ -30,7 +28,7 @@ const defaultValues: TLinkCreateFormFieldOptions = {
   url: "",
 };
 
-export const LinkCreateUpdateModal: FC<TLinkCreateEditModal> = observer((props) => {
+export const LinkCreateUpdateModal = observer(function LinkCreateUpdateModal(props: TLinkCreateEditModal) {
   // props
   const { isModalOpen, handleOnClose, linkOperations, preloadedData } = props;
   // react hook form
@@ -68,14 +66,14 @@ export const LinkCreateUpdateModal: FC<TLinkCreateEditModal> = observer((props)
     <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-secondary text-14 font-medium">
                 {t("link.modal.url.text")}
-                <span className="text-[10px] block">{t("required")}</span>
+                <span className="text-10 block">{t("required")}</span>
               </label>
               <Controller
                 control={control}
@@ -96,12 +94,12 @@ export const LinkCreateUpdateModal: FC<TLinkCreateEditModal> = observer((props)
                   />
                 )}
               />
-              {errors.url && <span className="text-xs text-red-500">{t("link.modal.url.required")}</span>}
+              {errors.url && <span className="text-11 text-red-500">{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-secondary text-14 font-medium">
                 {t("link.modal.title.text")}
-                <span className="text-[10px] block">{t("optional")}</span>
+                <span className="text-10 block">{t("optional")}</span>
               </label>
               <Controller
                 control={control}
@@ -122,11 +120,11 @@ export const LinkCreateUpdateModal: FC<TLinkCreateEditModal> = observer((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="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
+          <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/link-detail.tsx b/apps/web/core/components/home/widgets/links/link-detail.tsx
index 2a47a12d2b..bc94493e32 100644
--- a/apps/web/core/components/home/widgets/links/link-detail.tsx
+++ b/apps/web/core/components/home/widgets/links/link-detail.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 import { Pencil, ExternalLink, Link, Trash2 } from "lucide-react";
@@ -20,7 +17,7 @@ export type TProjectLinkDetail = {
   linkOperations: TLinkOperations;
 };
 
-export const ProjectLinkDetail: FC<TProjectLinkDetail> = observer((props) => {
+export const ProjectLinkDetail = observer(function ProjectLinkDetail(props: TProjectLinkDetail) {
   // props
   const { linkId, linkOperations } = props;
   // hooks
@@ -30,8 +27,7 @@ export const ProjectLinkDetail: FC<TProjectLinkDetail> = observer((props) => {
   const { t } = useTranslation();
   // derived values
   const linkDetail = getLinkById(linkId);
-
-  if (!linkDetail) return null;
+  const linkUrl = linkDetail?.url;
 
   // handlers
   const handleEdit = useCallback(
@@ -43,18 +39,19 @@ export const ProjectLinkDetail: FC<TProjectLinkDetail> = observer((props) => {
   );
 
   const handleCopyText = useCallback(() => {
-    copyTextToClipboard(linkDetail.url).then(() => {
+    if (!linkUrl) return;
+    copyTextToClipboard(linkUrl).then(() => {
       setToast({
         type: TOAST_TYPE.SUCCESS,
         title: t("link_copied"),
         message: t("view_link_copied_to_clipboard"),
       });
     });
-  }, [linkDetail.url, t]);
+  }, [linkUrl, t]);
 
   const handleOpenInNewTab = useCallback(() => {
-    window.open(linkDetail.url, "_blank", "noopener,noreferrer");
-  }, [linkDetail.url]);
+    window.open(linkUrl, "_blank", "noopener,noreferrer");
+  }, [linkUrl]);
 
   const handleDelete = useCallback(() => {
     linkOperations.remove(linkId);
@@ -91,6 +88,8 @@ export const ProjectLinkDetail: FC<TProjectLinkDetail> = observer((props) => {
     [handleEdit, handleOpenInNewTab, handleCopyText, handleDelete, t]
   );
 
+  if (!linkDetail) return null;
+
   return (
     <LinkItemBlock
       title={linkDetail.title || linkDetail.url}
diff --git a/apps/web/core/components/home/widgets/links/links.tsx b/apps/web/core/components/home/widgets/links/links.tsx
index 1abeba10f6..e0a533a6a5 100644
--- a/apps/web/core/components/home/widgets/links/links.tsx
+++ b/apps/web/core/components/home/widgets/links/links.tsx
@@ -15,7 +15,7 @@ export type TProjectLinkList = {
   workspaceSlug: string;
 };
 
-export const ProjectLinkList: FC<TProjectLinkList> = observer((props) => {
+export const ProjectLinkList = observer(function ProjectLinkList(props: TProjectLinkList) {
   // props
   const { linkOperations, workspaceSlug } = props;
   // hooks
@@ -35,7 +35,7 @@ export const ProjectLinkList: FC<TProjectLinkList> = observer((props) => {
         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">
           {links.map((linkId) => (
diff --git a/apps/web/core/components/home/widgets/links/root.tsx b/apps/web/core/components/home/widgets/links/root.tsx
index de8f6e6128..d2a95c3802 100644
--- a/apps/web/core/components/home/widgets/links/root.tsx
+++ b/apps/web/core/components/home/widgets/links/root.tsx
@@ -9,7 +9,7 @@ import { LinkCreateUpdateModal } from "./create-update-link-modal";
 import { ProjectLinkList } from "./links";
 import { useLinks } from "./use-links";
 
-export const DashboardQuickLinks = observer((props: THomeWidgetProps) => {
+export const DashboardQuickLinks = observer(function DashboardQuickLinks(props: THomeWidgetProps) {
   const { workspaceSlug } = props;
   const { linkOperations } = useLinks(workspaceSlug);
   const {
@@ -20,7 +20,7 @@ export const DashboardQuickLinks = observer((props: THomeWidgetProps) => {
   const handleCreateLinkModal = useCallback(() => {
     toggleLinkModal(true);
     setLinkData(undefined);
-  }, []);
+  }, [toggleLinkModal, setLinkData]);
 
   useSWR(
     workspaceSlug ? `HOME_LINKS_${workspaceSlug}` : null,
@@ -41,10 +41,10 @@ export const DashboardQuickLinks = observer((props: THomeWidgetProps) => {
       />
       <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="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="flex gap-1 text-13 font-medium text-accent-primary my-auto"
           >
             <Plus className="size-4 my-auto" /> <span>{t("home.quick_links.add")}</span>
           </button>
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 579d7497fc..220f3c2f3c 100644
--- a/apps/web/core/components/home/widgets/loaders/home-loader.tsx
+++ b/apps/web/core/components/home/widgets/loaders/home-loader.tsx
@@ -1,22 +1,22 @@
-"use client";
-
 import { range } from "lodash-es";
 // ui
 import { Loader } from "@plane/ui";
 
-export const HomeLoader = () => (
-  <>
-    {range(3).map((index) => (
-      <div key={index}>
-        <div className="mb-2">
-          <div className="text-base font-semibold text-custom-text-350 mb-4">
-            <Loader.Item height="20px" width="100px" />
+export function HomeLoader() {
+  return (
+    <>
+      {range(3).map((index) => (
+        <div key={index}>
+          <div className="mb-2">
+            <div className="text-14 font-semibold text-tertiary mb-4">
+              <Loader.Item height="20px" width="100px" />
+            </div>
+            <Loader className="h-[110px] w-full flex items-center justify-center gap-2 text-placeholder rounded-sm">
+              <Loader.Item height="100%" width="100%" />
+            </Loader>
           </div>
-          <Loader className="h-[110px] w-full flex items-center justify-center gap-2 text-custom-text-400 rounded">
-            <Loader.Item height="100%" width="100%" />
-          </Loader>
         </div>
-      </div>
-    ))}
-  </>
-);
+      ))}
+    </>
+  );
+}
diff --git a/apps/web/core/components/home/widgets/loaders/loader.tsx b/apps/web/core/components/home/widgets/loaders/loader.tsx
index 9fed9cafaa..75b87daf00 100644
--- a/apps/web/core/components/home/widgets/loaders/loader.tsx
+++ b/apps/web/core/components/home/widgets/loaders/loader.tsx
@@ -13,7 +13,7 @@ export enum EWidgetKeys {
   QUICK_LINKS = "quick_links",
 }
 
-export const WidgetLoader: React.FC<Props> = (props) => {
+export function WidgetLoader(props: Props) {
   const { widgetKey } = props;
 
   const loaders = {
@@ -22,4 +22,4 @@ export const WidgetLoader: React.FC<Props> = (props) => {
   };
 
   return loaders[widgetKey];
-};
+}
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 67e4b4cf6f..08915ce6b5 100644
--- a/apps/web/core/components/home/widgets/loaders/quick-links.tsx
+++ b/apps/web/core/components/home/widgets/loaders/quick-links.tsx
@@ -1,13 +1,13 @@
-"use client";
-
 import { range } from "lodash-es";
 // ui
 import { Loader } from "@plane/ui";
 
-export const QuickLinksWidgetLoader = () => (
-  <Loader className="bg-custom-background-100 rounded-xl gap-2 flex flex-wrap">
-    {range(4).map((index) => (
-      <Loader.Item key={index} height="56px" width="230px" />
-    ))}
-  </Loader>
-);
+export function QuickLinksWidgetLoader() {
+  return (
+    <Loader className="bg-surface-1 rounded-xl gap-2 flex flex-wrap">
+      {range(4).map((index) => (
+        <Loader.Item key={index} height="56px" width="230px" />
+      ))}
+    </Loader>
+  );
+}
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 9dc7a6fa0d..96a73679bc 100644
--- a/apps/web/core/components/home/widgets/loaders/recent-activity.tsx
+++ b/apps/web/core/components/home/widgets/loaders/recent-activity.tsx
@@ -1,20 +1,20 @@
-"use client";
-
 import { range } from "lodash-es";
 // ui
 import { Loader } from "@plane/ui";
 
-export const RecentActivityWidgetLoader = () => (
-  <Loader className="bg-custom-background-100 rounded-xl px-2 space-y-6">
-    {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" />
+export function RecentActivityWidgetLoader() {
+  return (
+    <Loader className="rounded-xl px-2 space-y-6">
+      {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">
+            <Loader.Item height="15px" width="70%" />
+          </div>
         </div>
-        <div className="space-y-3 flex-shrink-0 w-full my-auto">
-          <Loader.Item height="15px" width="70%" />
-        </div>
-      </div>
-    ))}
-  </Loader>
-);
+      ))}
+    </Loader>
+  );
+}
diff --git a/apps/web/core/components/home/widgets/manage/index.tsx b/apps/web/core/components/home/widgets/manage/index.tsx
index 1c4eb4543a..b0b2939460 100644
--- a/apps/web/core/components/home/widgets/manage/index.tsx
+++ b/apps/web/core/components/home/widgets/manage/index.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { observer } from "mobx-react";
 // plane types
@@ -14,7 +12,7 @@ export type TProps = {
   handleOnClose?: () => void;
 };
 
-export const ManageWidgetsModal: FC<TProps> = observer((props) => {
+export const ManageWidgetsModal = observer(function ManageWidgetsModal(props: TProps) {
   // props
   const { workspaceSlug, isModalOpen, handleOnClose } = props;
   const { t } = useTranslation();
@@ -22,7 +20,7 @@ export const ManageWidgetsModal: FC<TProps> = observer((props) => {
   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="font-medium text-18"> {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 7caf82da9d..ac898f62db 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,3 @@
-"use client";
 import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
@@ -12,12 +11,12 @@ type Props = {
   isDragging: boolean;
 };
 
-export const WidgetItemDragHandle: FC<Props> = observer((props) => {
+export const WidgetItemDragHandle = observer(function WidgetItemDragHandle(props: Props) {
   const { isDragging } = props;
 
   return (
     <div
-      className={cn("flex items-center justify-center rounded text-custom-sidebar-text-400 cursor-grab mr-2", {
+      className={cn("flex items-center justify-center rounded-sm text-placeholder cursor-grab mr-2", {
         "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 1979d52fa6..f42384cfd5 100644
--- a/apps/web/core/components/home/widgets/manage/widget-item.tsx
+++ b/apps/web/core/components/home/widgets/manage/widget-item.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import React, { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
@@ -35,7 +33,7 @@ type Props = {
   handleToggle: (workspaceSlug: string, widgetKey: string, is_enabled: boolean) => void;
 };
 
-export const WidgetItem: FC<Props> = observer((props) => {
+export const WidgetItem = observer(function WidgetItem(props: Props) {
   // props
   const { widgetId, isLastChild, handleDrop, handleToggle } = props;
   const { workspaceSlug } = useParams();
@@ -48,7 +46,7 @@ export const WidgetItem: FC<Props> = observer((props) => {
   const { widgetsMap } = useHome();
   const { t } = useTranslation();
   // derived values
-  const widget = widgetsMap[widgetId] as TWidgetEntityData;
+  const widget = widgetsMap[widgetId];
   const widgetTitle = HOME_WIDGETS_LIST[widget.key]?.title;
 
   // drag and drop
@@ -73,7 +71,7 @@ export const WidgetItem: FC<Props> = observer((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 text-13 p-1 pr-2">{widget.key}</div>);
               return () => root.unmount();
             },
             nativeSetDragImage,
@@ -123,9 +121,9 @@ export const WidgetItem: FC<Props> = observer((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",
+          "px-2 relative flex items-center py-2 font-medium text-13 group/widget-item rounded-sm hover:bg-layer-1 justify-between",
           {
-            "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 7312fc47c5..0fdec3a534 100644
--- a/apps/web/core/components/home/widgets/manage/widget-list.tsx
+++ b/apps/web/core/components/home/widgets/manage/widget-list.tsx
@@ -11,7 +11,7 @@ import { WidgetItem } from "./widget-item";
 import type { TargetData } from "./widget.helpers";
 import { getInstructionFromPayload } from "./widget.helpers";
 
-export const WidgetList = observer(({ workspaceSlug }: { workspaceSlug: string }) => {
+export const WidgetList = observer(function WidgetList({ workspaceSlug }: { workspaceSlug: string }) {
   const { orderedWidgets, reorderWidget, toggleWidget } = useHome();
   const { t } = useTranslation();
 
diff --git a/apps/web/core/components/home/widgets/recents/filters.tsx b/apps/web/core/components/home/widgets/recents/filters.tsx
index adb67b3a57..febd4b3066 100644
--- a/apps/web/core/components/home/widgets/recents/filters.tsx
+++ b/apps/web/core/components/home/widgets/recents/filters.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
@@ -15,35 +13,34 @@ export type TFiltersDropdown = {
   filters: { name: TRecentActivityFilterKeys; icon?: React.ReactNode; i18n_key: string }[];
 };
 
-export const FiltersDropdown: FC<TFiltersDropdown> = observer((props) => {
+export const FiltersDropdown = observer(function FiltersDropdown(props: TFiltersDropdown) {
   const { className, activeFilter, setActiveFilter, filters } = props;
   const { t } = useTranslation();
 
-  const DropdownOptions = () =>
-    filters?.map((filter) => (
+  function DropdownOptions() {
+    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 font-medium text-11 capitalize">{t(filter.i18n_key)}</div>
       </CustomMenu.MenuItem>
     ));
+  }
 
   const title = activeFilter ? filters?.find((filter) => filter.name === activeFilter)?.i18n_key : "";
   return (
     <CustomMenu
       maxHeight={"md"}
-      className={cn("flex justify-center text-xs text-custom-text-200 w-fit ", className)}
+      className={cn("flex justify-center text-11 text-secondary w-fit", 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 hover:bg-layer-transparent-hover px-2 py-1 rounded-sm gap-1 capitalize border border-subtle">
+          <span className="font-medium text-13 my-auto">{t(title || "")}</span>
+          <ChevronDownIcon className={cn("size-3 my-auto text-tertiary hover:text-secondary duration-300")} />
         </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 c10b715fc8..e1331ede0a 100644
--- a/apps/web/core/components/home/widgets/recents/index.tsx
+++ b/apps/web/core/components/home/widgets/recents/index.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
@@ -33,7 +31,7 @@ type TRecentWidgetProps = THomeWidgetProps & {
   showFilterSelect?: boolean;
 };
 
-export const RecentActivityWidget: React.FC<TRecentWidgetProps> = observer((props) => {
+export const RecentActivityWidget = observer(function RecentActivityWidget(props: TRecentWidgetProps) {
   const { presetFilter, showFilterSelect = true, workspaceSlug } = props;
   // states
   const [filter, setFilter] = useState<TRecentActivityFilterKeys>(presetFilter ?? filters[0].name);
@@ -75,7 +73,7 @@ export const RecentActivityWidget: React.FC<TRecentWidgetProps> = observer((prop
     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="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">
@@ -89,10 +87,10 @@ export const RecentActivityWidget: React.FC<TRecentWidgetProps> = observer((prop
       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="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">
diff --git a/apps/web/core/components/home/widgets/recents/issue.tsx b/apps/web/core/components/home/widgets/recents/issue.tsx
index 9b9191358e..4bee13bdf5 100644
--- a/apps/web/core/components/home/widgets/recents/issue.tsx
+++ b/apps/web/core/components/home/widgets/recents/issue.tsx
@@ -22,7 +22,7 @@ type BlockProps = {
   ref: React.RefObject<HTMLDivElement>;
   workspaceSlug: string;
 };
-export const RecentIssue = observer((props: BlockProps) => {
+export const RecentIssue = observer(function RecentIssue(props: BlockProps) {
   const { activity, ref, workspaceSlug } = props;
   // hooks
   const { getStateById } = useProjectState();
@@ -73,14 +73,14 @@ export const RecentIssue = observer((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-shrink-0 grid place-items-center rounded-sm bg-layer-2 size-8">
+                <WorkItemsIcon className="size-4 text-tertiary" />
               </div>
-              <div className="font-medium text-custom-text-400 text-sm whitespace-nowrap">
+              <div className="font-medium text-placeholder text-13 whitespace-nowrap">
                 {issueDetails?.project_identifier}-{issueDetails?.sequence_id}
               </div>
             </div>
@@ -88,7 +88,7 @@ export const RecentIssue = observer((props: BlockProps) => {
         </div>
       }
       appendTitleElement={
-        <div className="flex-shrink-0 font-medium text-xs text-custom-text-400">
+        <div className="flex-shrink-0 font-medium text-11 text-placeholder">
           {calculateTimeAgo(activity.visited_at)}
         </div>
       }
@@ -130,7 +130,7 @@ export const RecentIssue = observer((props: BlockProps) => {
       }
       parentRef={ref}
       disableLink={false}
-      className="bg-transparent my-auto !px-2 border-none py-3"
+      className="my-auto !px-2 border-none 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 4c7151e2c5..8235bb3a65 100644
--- a/apps/web/core/components/home/widgets/recents/page.tsx
+++ b/apps/web/core/components/home/widgets/recents/page.tsx
@@ -15,7 +15,7 @@ type BlockProps = {
   workspaceSlug: string;
 };
 
-export const RecentPage = (props: BlockProps) => {
+export function RecentPage(props: BlockProps) {
   const { activity, ref, workspaceSlug } = props;
   // router
   const router = useRouter();
@@ -38,22 +38,22 @@ export const RecentPage = (props: BlockProps) => {
       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-shrink-0 grid place-items-center rounded-sm bg-layer-2 size-8">
             {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="font-medium text-placeholder text-13 whitespace-nowrap">
               {pageDetails?.project_identifier}
             </div>
           )}
         </div>
       }
       appendTitleElement={
-        <div className="flex-shrink-0 font-medium text-xs text-custom-text-400">
+        <div className="flex-shrink-0 font-medium text-11 text-placeholder">
           {calculateTimeAgo(activity.visited_at)}
         </div>
       }
@@ -64,8 +64,8 @@ export const RecentPage = (props: BlockProps) => {
       }
       parentRef={ref}
       disableLink={false}
-      className="bg-transparent my-auto !px-2 border-none py-3"
-      itemClassName="my-auto"
+      className="my-auto !px-2 border-none py-3"
+      itemClassName="my-auto bg-layer-transparent"
       onItemClick={(e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -73,4 +73,4 @@ export const RecentPage = (props: BlockProps) => {
       }}
     />
   );
-};
+}
diff --git a/apps/web/core/components/home/widgets/recents/project.tsx b/apps/web/core/components/home/widgets/recents/project.tsx
index f8a36de128..4397f77c48 100644
--- a/apps/web/core/components/home/widgets/recents/project.tsx
+++ b/apps/web/core/components/home/widgets/recents/project.tsx
@@ -13,7 +13,7 @@ type BlockProps = {
   ref: React.RefObject<HTMLDivElement>;
   workspaceSlug: string;
 };
-export const RecentProject = (props: BlockProps) => {
+export function RecentProject(props: BlockProps) {
   const { activity, ref, workspaceSlug } = props;
   // router
   const router = useRouter();
@@ -31,14 +31,14 @@ export const RecentProject = (props: BlockProps) => {
       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-shrink-0 grid place-items-center rounded-sm bg-layer-2 size-8">
             <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="font-medium text-placeholder text-13 whitespace-nowrap">{projectDetails?.identifier}</div>
         </div>
       }
       appendTitleElement={
-        <div className="flex-shrink-0 font-medium text-xs text-custom-text-400">
+        <div className="flex-shrink-0 font-medium text-11 text-placeholder">
           {calculateTimeAgo(activity.visited_at)}
         </div>
       }
@@ -67,7 +67,7 @@ export const RecentProject = (props: BlockProps) => {
       }
       parentRef={ref}
       disableLink={false}
-      className="bg-transparent my-auto !px-2 border-none py-3"
+      className="my-auto !px-2 border-none py-3"
       itemClassName="my-auto"
       onItemClick={(e) => {
         e.preventDefault();
@@ -76,4 +76,4 @@ export const RecentProject = (props: BlockProps) => {
       }}
     />
   );
-};
+}
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 67b50f3421..d8e893b8cf 100644
--- a/apps/web/core/components/icons/attachment/audio-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/audio-file-icon.tsx
@@ -7,6 +7,6 @@ export type AudioIconProps = {
   height?: number;
 };
 
-export const AudioIcon: React.FC<AudioIconProps> = ({ width, height }) => (
-  <img src={AudioFileIcon} width={width} height={height} alt="AudioFileIcon" />
-);
+export function AudioIcon({ width, height }: AudioIconProps) {
+  return <img src={AudioFileIcon} width={width} height={height} alt="AudioFileIcon" />;
+}
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 78e07be54e..7f6f27c16f 100644
--- a/apps/web/core/components/icons/attachment/css-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/css-file-icon.tsx
@@ -4,6 +4,6 @@ import CssFileIcon from "@/app/assets/attachment/css-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
-export const CssIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={CssFileIcon} width={width} height={height} alt="CssFileIcon" />
-);
+export function CssIcon({ width, height }: ImageIconPros) {
+  return <img src={CssFileIcon} width={width} height={height} alt="CssFileIcon" />;
+}
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 f050c92a28..2856575b1d 100644
--- a/apps/web/core/components/icons/attachment/csv-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/csv-file-icon.tsx
@@ -4,6 +4,6 @@ import CSVFileIcon from "@/app/assets/attachment/csv-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
-export const CsvIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={CSVFileIcon} width={width} height={height} alt="CSVFileIcon" />
-);
+export function CsvIcon({ width, height }: ImageIconPros) {
+  return <img src={CSVFileIcon} width={width} height={height} alt="CSVFileIcon" />;
+}
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 ee8c33c42f..fac931af93 100644
--- a/apps/web/core/components/icons/attachment/default-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/default-file-icon.tsx
@@ -4,6 +4,6 @@ import DefaultFileIcon from "@/app/assets/attachment/default-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
-export const DefaultIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={DefaultFileIcon} width={width} height={height} alt="DefaultFileIcon" />
-);
+export function DefaultIcon({ width, height }: ImageIconPros) {
+  return <img src={DefaultFileIcon} width={width} height={height} alt="DefaultFileIcon" />;
+}
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 f60c7097ae..2f8c174eec 100644
--- a/apps/web/core/components/icons/attachment/doc-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/doc-file-icon.tsx
@@ -4,6 +4,6 @@ import DocFileIcon from "@/app/assets/attachment/doc-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
-export const DocIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={DocFileIcon} width={width} height={height} alt="DocFileIcon" />
-);
+export function DocIcon({ width, height }: ImageIconPros) {
+  return <img src={DocFileIcon} width={width} height={height} alt="DocFileIcon" />;
+}
diff --git a/apps/web/core/components/icons/attachment/document-icon.tsx b/apps/web/core/components/icons/attachment/document-icon.tsx
index 73cd3418dd..aeccb9f648 100644
--- a/apps/web/core/components/icons/attachment/document-icon.tsx
+++ b/apps/web/core/components/icons/attachment/document-icon.tsx
@@ -2,18 +2,20 @@ import React from "react";
 
 import type { Props } from "../types";
 
-export const DocumentIcon: React.FC<Props> = ({ width = "24", height = "24", className, color }) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fill={color}
-      d="M7.27051 14.792H12.7288C12.9094 14.792 13.0587 14.733 13.1768 14.6149C13.2948 14.4969 13.3538 14.3475 13.3538 14.167C13.3538 13.9864 13.2948 13.8371 13.1768 13.7191C13.0587 13.601 12.9094 13.542 12.7288 13.542H7.27051C7.08995 13.542 6.94065 13.601 6.82259 13.7191C6.70454 13.8371 6.64551 13.9864 6.64551 14.167C6.64551 14.3475 6.70454 14.4969 6.82259 14.6149C6.94065 14.733 7.08995 14.792 7.27051 14.792ZM7.27051 11.2503H12.7288C12.9094 11.2503 13.0587 11.1913 13.1768 11.0732C13.2948 10.9552 13.3538 10.8059 13.3538 10.6253C13.3538 10.4448 13.2948 10.2955 13.1768 10.1774C13.0587 10.0594 12.9094 10.0003 12.7288 10.0003H7.27051C7.08995 10.0003 6.94065 10.0594 6.82259 10.1774C6.70454 10.2955 6.64551 10.4448 6.64551 10.6253C6.64551 10.8059 6.70454 10.9552 6.82259 11.0732C6.94065 11.1913 7.08995 11.2503 7.27051 11.2503ZM4.58301 18.3337C4.24967 18.3337 3.95801 18.2087 3.70801 17.9587C3.45801 17.7087 3.33301 17.417 3.33301 17.0837V2.91699C3.33301 2.58366 3.45801 2.29199 3.70801 2.04199C3.95801 1.79199 4.24967 1.66699 4.58301 1.66699H11.583C11.7497 1.66699 11.9129 1.70171 12.0726 1.77116C12.2323 1.8406 12.3677 1.93088 12.4788 2.04199L16.2913 5.85449C16.4025 5.9656 16.4927 6.10102 16.5622 6.26074C16.6316 6.42046 16.6663 6.58366 16.6663 6.75033V17.0837C16.6663 17.417 16.5413 17.7087 16.2913 17.9587C16.0413 18.2087 15.7497 18.3337 15.4163 18.3337H4.58301ZM11.4788 6.16699V2.91699H4.58301V17.0837H15.4163V6.79199H12.1038C11.9233 6.79199 11.774 6.73296 11.6559 6.61491C11.5379 6.49685 11.4788 6.34755 11.4788 6.16699ZM4.58301 2.91699V6.79199V2.91699V17.0837V2.91699Z"
-    />
-  </svg>
-);
+export function DocumentIcon({ width = "24", height = "24", className, color }: Props) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill={color}
+        d="M7.27051 14.792H12.7288C12.9094 14.792 13.0587 14.733 13.1768 14.6149C13.2948 14.4969 13.3538 14.3475 13.3538 14.167C13.3538 13.9864 13.2948 13.8371 13.1768 13.7191C13.0587 13.601 12.9094 13.542 12.7288 13.542H7.27051C7.08995 13.542 6.94065 13.601 6.82259 13.7191C6.70454 13.8371 6.64551 13.9864 6.64551 14.167C6.64551 14.3475 6.70454 14.4969 6.82259 14.6149C6.94065 14.733 7.08995 14.792 7.27051 14.792ZM7.27051 11.2503H12.7288C12.9094 11.2503 13.0587 11.1913 13.1768 11.0732C13.2948 10.9552 13.3538 10.8059 13.3538 10.6253C13.3538 10.4448 13.2948 10.2955 13.1768 10.1774C13.0587 10.0594 12.9094 10.0003 12.7288 10.0003H7.27051C7.08995 10.0003 6.94065 10.0594 6.82259 10.1774C6.70454 10.2955 6.64551 10.4448 6.64551 10.6253C6.64551 10.8059 6.70454 10.9552 6.82259 11.0732C6.94065 11.1913 7.08995 11.2503 7.27051 11.2503ZM4.58301 18.3337C4.24967 18.3337 3.95801 18.2087 3.70801 17.9587C3.45801 17.7087 3.33301 17.417 3.33301 17.0837V2.91699C3.33301 2.58366 3.45801 2.29199 3.70801 2.04199C3.95801 1.79199 4.24967 1.66699 4.58301 1.66699H11.583C11.7497 1.66699 11.9129 1.70171 12.0726 1.77116C12.2323 1.8406 12.3677 1.93088 12.4788 2.04199L16.2913 5.85449C16.4025 5.9656 16.4927 6.10102 16.5622 6.26074C16.6316 6.42046 16.6663 6.58366 16.6663 6.75033V17.0837C16.6663 17.417 16.5413 17.7087 16.2913 17.9587C16.0413 18.2087 15.7497 18.3337 15.4163 18.3337H4.58301ZM11.4788 6.16699V2.91699H4.58301V17.0837H15.4163V6.79199H12.1038C11.9233 6.79199 11.774 6.73296 11.6559 6.61491C11.5379 6.49685 11.4788 6.34755 11.4788 6.16699ZM4.58301 2.91699V6.79199V2.91699V17.0837V2.91699Z"
+      />
+    </svg>
+  );
+}
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 17c1328292..a88fb8e607 100644
--- a/apps/web/core/components/icons/attachment/figma-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/figma-file-icon.tsx
@@ -4,6 +4,6 @@ import FigmaFileIcon from "@/app/assets/attachment/figma-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
-export const FigmaIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={FigmaFileIcon} width={width} height={height} alt="FigmaFileIcon" />
-);
+export function FigmaIcon({ width, height }: ImageIconPros) {
+  return <img src={FigmaFileIcon} width={width} height={height} alt="FigmaFileIcon" />;
+}
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 e2d4dd9ed0..1f82f0761b 100644
--- a/apps/web/core/components/icons/attachment/html-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/html-file-icon.tsx
@@ -4,6 +4,6 @@ import HtmlFileIcon from "@/app/assets/attachment/html-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
-export const HtmlIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={HtmlFileIcon} width={width} height={height} alt="HtmlFileIcon" />
-);
+export function HtmlIcon({ width, height }: ImageIconPros) {
+  return <img src={HtmlFileIcon} width={width} height={height} alt="HtmlFileIcon" />;
+}
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 e70399584c..93055cd8a8 100644
--- a/apps/web/core/components/icons/attachment/img-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/img-file-icon.tsx
@@ -4,6 +4,6 @@ import ImgFileIcon from "@/app/assets/attachment/img-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
-export const ImgIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={ImgFileIcon} width={width} height={height} alt="ImgFileIcon" />
-);
+export function ImgIcon({ width, height }: ImageIconPros) {
+  return <img src={ImgFileIcon} width={width} height={height} alt="ImgFileIcon" />;
+}
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 e3815612a9..88118585a4 100644
--- a/apps/web/core/components/icons/attachment/jpg-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/jpg-file-icon.tsx
@@ -4,6 +4,6 @@ import JpgFileIcon from "@/app/assets/attachment/jpg-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
-export const JpgIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={JpgFileIcon} width={width} height={height} alt="JpgFileIcon" />
-);
+export function JpgIcon({ width, height }: ImageIconPros) {
+  return <img src={JpgFileIcon} width={width} height={height} alt="JpgFileIcon" />;
+}
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 7104579a01..5bfadeee32 100644
--- a/apps/web/core/components/icons/attachment/js-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/js-file-icon.tsx
@@ -4,6 +4,6 @@ import JsFileIcon from "@/app/assets/attachment/js-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
-export const JavaScriptIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={JsFileIcon} width={width} height={height} alt="JsFileIcon" />
-);
+export function JavaScriptIcon({ width, height }: ImageIconPros) {
+  return <img src={JsFileIcon} width={width} height={height} alt="JsFileIcon" />;
+}
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 c21b987da2..84ef4cff25 100644
--- a/apps/web/core/components/icons/attachment/pdf-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/pdf-file-icon.tsx
@@ -4,6 +4,6 @@ import PDFFileIcon from "@/app/assets/attachment/pdf-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
-export const PdfIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={PDFFileIcon} width={width} height={height} alt="PDFFileIcon" />
-);
+export function PdfIcon({ width, height }: ImageIconPros) {
+  return <img src={PDFFileIcon} width={width} height={height} alt="PDFFileIcon" />;
+}
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 621cabf1e2..fd294addaa 100644
--- a/apps/web/core/components/icons/attachment/png-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/png-file-icon.tsx
@@ -4,6 +4,6 @@ import PngFileIcon from "@/app/assets/attachment/png-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
-export const PngIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={PngFileIcon} width={width} height={height} alt="PngFileIcon" />
-);
+export function PngIcon({ width, height }: ImageIconPros) {
+  return <img src={PngFileIcon} width={width} height={height} alt="PngFileIcon" />;
+}
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 611758c74a..6e813520bc 100644
--- a/apps/web/core/components/icons/attachment/rar-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/rar-file-icon.tsx
@@ -4,6 +4,6 @@ import RarFileIcon from "@/app/assets/attachment/rar-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
-export const RarIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={RarFileIcon} width={width} height={height} alt="RarFileIcon" />
-);
+export function RarIcon({ width, height }: ImageIconPros) {
+  return <img src={RarFileIcon} width={width} height={height} alt="RarFileIcon" />;
+}
diff --git a/apps/web/core/components/icons/attachment/setting-icon.tsx b/apps/web/core/components/icons/attachment/setting-icon.tsx
index 66606c673c..aedcc87bb9 100644
--- a/apps/web/core/components/icons/attachment/setting-icon.tsx
+++ b/apps/web/core/components/icons/attachment/setting-icon.tsx
@@ -2,23 +2,20 @@ import React from "react";
 
 import type { Props } from "../types";
 
-export const SettingIcon: React.FC<Props> = ({
-  width = "24",
-  height = "24",
-  color = "rgb(var(--color-text-200))",
-  className,
-}) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fill={color}
-      d="M12.9062 1.375C13.0518 1.375 13.1936 1.42121 13.3112 1.50695C13.4288 1.59269 13.5162 1.71355 13.5607 1.85212L14.317 4.202C14.6346 4.35737 14.9385 4.532 15.2286 4.72862L17.6431 4.20888C17.7854 4.17848 17.9338 4.19406 18.0667 4.25336C18.1997 4.31267 18.3103 4.41264 18.3828 4.53888L20.2886 7.8375C20.3614 7.96366 20.3922 8.10968 20.3766 8.2545C20.361 8.39931 20.2999 8.53544 20.202 8.64325L18.5451 10.472C18.5692 10.8227 18.5692 11.1746 18.5451 11.5252L20.202 13.3567C20.2999 13.4646 20.361 13.6007 20.3766 13.7455C20.3922 13.8903 20.3614 14.0363 20.2886 14.1625L18.3828 17.4625C18.3101 17.5885 18.1994 17.6882 18.0664 17.7472C17.9335 17.8063 17.7853 17.8216 17.6431 17.7911L15.2286 17.2714C14.9398 17.4666 14.6346 17.6426 14.3183 17.798L13.5607 20.1479C13.5162 20.2864 13.4288 20.4073 13.3112 20.4931C13.1936 20.5788 13.0518 20.625 12.9062 20.625H9.0947C8.94915 20.625 8.80735 20.5788 8.68973 20.4931C8.57211 20.4073 8.48474 20.2864 8.4402 20.1479L7.68533 17.7994C7.36856 17.6445 7.06302 17.4676 6.77095 17.27L4.35783 17.7911C4.21547 17.8215 4.06713 17.8059 3.93419 17.7466C3.80125 17.6873 3.69057 17.5874 3.61808 17.4611L1.71233 14.1625C1.63956 14.0363 1.60873 13.8903 1.6243 13.7455C1.63987 13.6007 1.70103 13.4646 1.79895 13.3567L3.45583 11.5252C3.43183 11.1755 3.43183 10.8245 3.45583 10.4748L1.79895 8.64325C1.70103 8.53544 1.63987 8.39931 1.6243 8.2545C1.60873 8.10968 1.63956 7.96366 1.71233 7.8375L3.61808 4.5375C3.69077 4.41151 3.80154 4.31183 3.93446 4.25278C4.06739 4.19373 4.21562 4.17836 4.35783 4.20888L6.77095 4.73C7.06245 4.53338 7.3677 4.356 7.68533 4.20063L8.44158 1.85212C8.48597 1.714 8.57293 1.59346 8.69 1.50776C8.80706 1.42205 8.94824 1.37559 9.09333 1.375H12.9048H12.9062ZM12.403 2.75H9.59795L8.81695 5.17963L8.29033 5.43675C8.03144 5.56344 7.78152 5.70769 7.54233 5.8685L7.05558 6.1985L4.55858 5.6595L3.15608 8.0905L4.86795 9.98525L4.8267 10.5682C4.80695 10.8557 4.80695 11.1443 4.8267 11.4318L4.86795 12.0147L3.15333 13.9095L4.5572 16.3405L7.0542 15.8029L7.54095 16.1315C7.78015 16.2923 8.03007 16.4366 8.28895 16.5632L8.81558 16.8204L9.59795 19.25H12.4057L13.1895 16.819L13.7147 16.5632C13.9733 16.4369 14.2228 16.2926 14.4613 16.1315L14.9467 15.8029L17.4451 16.3405L18.8476 13.9095L17.1343 12.0147L17.1756 11.4318C17.1954 11.1438 17.1954 10.8548 17.1756 10.5669L17.1343 9.98388L18.849 8.0905L17.4451 5.6595L14.9467 6.19575L14.4613 5.8685C14.2228 5.70737 13.9733 5.5631 13.7147 5.43675L13.1895 5.181L12.4043 2.75H12.403ZM11.0005 6.875C12.0945 6.875 13.1437 7.3096 13.9173 8.08318C14.6909 8.85677 15.1255 9.90598 15.1255 11C15.1255 12.094 14.6909 13.1432 13.9173 13.9168C13.1437 14.6904 12.0945 15.125 11.0005 15.125C9.90644 15.125 8.85723 14.6904 8.08364 13.9168C7.31005 13.1432 6.87545 12.094 6.87545 11C6.87545 9.90598 7.31005 8.85677 8.08364 8.08318C8.85723 7.3096 9.90644 6.875 11.0005 6.875ZM11.0005 8.25C10.2711 8.25 9.57164 8.53973 9.05591 9.05546C8.54018 9.57118 8.25045 10.2707 8.25045 11C8.25045 11.7293 8.54018 12.4288 9.05591 12.9445C9.57164 13.4603 10.2711 13.75 11.0005 13.75C11.7298 13.75 12.4293 13.4603 12.945 12.9445C13.4607 12.4288 13.7505 11.7293 13.7505 11C13.7505 10.2707 13.4607 9.57118 12.945 9.05546C12.4293 8.53973 11.7298 8.25 11.0005 8.25Z"
-    />
-  </svg>
-);
+export function SettingIcon({ width = "24", height = "24", color = "var(--text-color-secondary)", className }: Props) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill={color}
+        d="M12.9062 1.375C13.0518 1.375 13.1936 1.42121 13.3112 1.50695C13.4288 1.59269 13.5162 1.71355 13.5607 1.85212L14.317 4.202C14.6346 4.35737 14.9385 4.532 15.2286 4.72862L17.6431 4.20888C17.7854 4.17848 17.9338 4.19406 18.0667 4.25336C18.1997 4.31267 18.3103 4.41264 18.3828 4.53888L20.2886 7.8375C20.3614 7.96366 20.3922 8.10968 20.3766 8.2545C20.361 8.39931 20.2999 8.53544 20.202 8.64325L18.5451 10.472C18.5692 10.8227 18.5692 11.1746 18.5451 11.5252L20.202 13.3567C20.2999 13.4646 20.361 13.6007 20.3766 13.7455C20.3922 13.8903 20.3614 14.0363 20.2886 14.1625L18.3828 17.4625C18.3101 17.5885 18.1994 17.6882 18.0664 17.7472C17.9335 17.8063 17.7853 17.8216 17.6431 17.7911L15.2286 17.2714C14.9398 17.4666 14.6346 17.6426 14.3183 17.798L13.5607 20.1479C13.5162 20.2864 13.4288 20.4073 13.3112 20.4931C13.1936 20.5788 13.0518 20.625 12.9062 20.625H9.0947C8.94915 20.625 8.80735 20.5788 8.68973 20.4931C8.57211 20.4073 8.48474 20.2864 8.4402 20.1479L7.68533 17.7994C7.36856 17.6445 7.06302 17.4676 6.77095 17.27L4.35783 17.7911C4.21547 17.8215 4.06713 17.8059 3.93419 17.7466C3.80125 17.6873 3.69057 17.5874 3.61808 17.4611L1.71233 14.1625C1.63956 14.0363 1.60873 13.8903 1.6243 13.7455C1.63987 13.6007 1.70103 13.4646 1.79895 13.3567L3.45583 11.5252C3.43183 11.1755 3.43183 10.8245 3.45583 10.4748L1.79895 8.64325C1.70103 8.53544 1.63987 8.39931 1.6243 8.2545C1.60873 8.10968 1.63956 7.96366 1.71233 7.8375L3.61808 4.5375C3.69077 4.41151 3.80154 4.31183 3.93446 4.25278C4.06739 4.19373 4.21562 4.17836 4.35783 4.20888L6.77095 4.73C7.06245 4.53338 7.3677 4.356 7.68533 4.20063L8.44158 1.85212C8.48597 1.714 8.57293 1.59346 8.69 1.50776C8.80706 1.42205 8.94824 1.37559 9.09333 1.375H12.9048H12.9062ZM12.403 2.75H9.59795L8.81695 5.17963L8.29033 5.43675C8.03144 5.56344 7.78152 5.70769 7.54233 5.8685L7.05558 6.1985L4.55858 5.6595L3.15608 8.0905L4.86795 9.98525L4.8267 10.5682C4.80695 10.8557 4.80695 11.1443 4.8267 11.4318L4.86795 12.0147L3.15333 13.9095L4.5572 16.3405L7.0542 15.8029L7.54095 16.1315C7.78015 16.2923 8.03007 16.4366 8.28895 16.5632L8.81558 16.8204L9.59795 19.25H12.4057L13.1895 16.819L13.7147 16.5632C13.9733 16.4369 14.2228 16.2926 14.4613 16.1315L14.9467 15.8029L17.4451 16.3405L18.8476 13.9095L17.1343 12.0147L17.1756 11.4318C17.1954 11.1438 17.1954 10.8548 17.1756 10.5669L17.1343 9.98388L18.849 8.0905L17.4451 5.6595L14.9467 6.19575L14.4613 5.8685C14.2228 5.70737 13.9733 5.5631 13.7147 5.43675L13.1895 5.181L12.4043 2.75H12.403ZM11.0005 6.875C12.0945 6.875 13.1437 7.3096 13.9173 8.08318C14.6909 8.85677 15.1255 9.90598 15.1255 11C15.1255 12.094 14.6909 13.1432 13.9173 13.9168C13.1437 14.6904 12.0945 15.125 11.0005 15.125C9.90644 15.125 8.85723 14.6904 8.08364 13.9168C7.31005 13.1432 6.87545 12.094 6.87545 11C6.87545 9.90598 7.31005 8.85677 8.08364 8.08318C8.85723 7.3096 9.90644 6.875 11.0005 6.875ZM11.0005 8.25C10.2711 8.25 9.57164 8.53973 9.05591 9.05546C8.54018 9.57118 8.25045 10.2707 8.25045 11C8.25045 11.7293 8.54018 12.4288 9.05591 12.9445C9.57164 13.4603 10.2711 13.75 11.0005 13.75C11.7298 13.75 12.4293 13.4603 12.945 12.9445C13.4607 12.4288 13.7505 11.7293 13.7505 11C13.7505 10.2707 13.4607 9.57118 12.945 9.05546C12.4293 8.53973 11.7298 8.25 11.0005 8.25Z"
+      />
+    </svg>
+  );
+}
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 3c86a47219..e78beb1dfd 100644
--- a/apps/web/core/components/icons/attachment/sheet-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/sheet-file-icon.tsx
@@ -4,6 +4,6 @@ import SheetFileIcon from "@/app/assets/attachment/excel-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
-export const SheetIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={SheetFileIcon} width={width} height={height} alt="SheetFileIcon" />
-);
+export function SheetIcon({ width, height }: ImageIconPros) {
+  return <img src={SheetFileIcon} width={width} height={height} alt="SheetFileIcon" />;
+}
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 8f610b8ff3..56541e5255 100644
--- a/apps/web/core/components/icons/attachment/svg-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/svg-file-icon.tsx
@@ -4,6 +4,6 @@ import SvgFileIcon from "@/app/assets/attachment/svg-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
-export const SvgIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={SvgFileIcon} width={width} height={height} alt="SvgFileIcon" />
-);
+export function SvgIcon({ width, height }: ImageIconPros) {
+  return <img src={SvgFileIcon} width={width} height={height} alt="SvgFileIcon" />;
+}
diff --git a/apps/web/core/components/icons/attachment/tune-icon.tsx b/apps/web/core/components/icons/attachment/tune-icon.tsx
index f7711b4d98..ef3d439d61 100644
--- a/apps/web/core/components/icons/attachment/tune-icon.tsx
+++ b/apps/web/core/components/icons/attachment/tune-icon.tsx
@@ -2,18 +2,20 @@ import React from "react";
 
 import type { Props } from "../types";
 
-export const TuneIcon: React.FC<Props> = ({ width = "24", height = "24", className }) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M3.75 18.95C3.53333 18.95 3.35417 18.8792 3.2125 18.7375C3.07083 18.5958 3 18.4167 3 18.2C3 17.9833 3.07083 17.8042 3.2125 17.6625C3.35417 17.5208 3.53333 17.45 3.75 17.45H8.425C8.64167 17.45 8.82083 17.5208 8.9625 17.6625C9.10417 17.8042 9.175 17.9833 9.175 18.2C9.175 18.4167 9.10417 18.5958 8.9625 18.7375C8.82083 18.8792 8.64167 18.95 8.425 18.95H3.75ZM3.75 6.55C3.53333 6.55 3.35417 6.47917 3.2125 6.3375C3.07083 6.19583 3 6.01667 3 5.8C3 5.58333 3.07083 5.40417 3.2125 5.2625C3.35417 5.12083 3.53333 5.05 3.75 5.05H12.575C12.7917 5.05 12.9708 5.12083 13.1125 5.2625C13.2542 5.40417 13.325 5.58333 13.325 5.8C13.325 6.01667 13.2542 6.19583 13.1125 6.3375C12.9708 6.47917 12.7917 6.55 12.575 6.55H3.75ZM11.425 21C11.2083 21 11.0292 20.9292 10.8875 20.7875C10.7458 20.6458 10.675 20.4667 10.675 20.25V16.125C10.675 15.9083 10.7458 15.7292 10.8875 15.5875C11.0292 15.4458 11.2083 15.375 11.425 15.375C11.6417 15.375 11.8208 15.4458 11.9625 15.5875C12.1042 15.7292 12.175 15.9083 12.175 16.125V17.45H20.25C20.4667 17.45 20.6458 17.5208 20.7875 17.6625C20.9292 17.8042 21 17.9833 21 18.2C21 18.4167 20.9292 18.5958 20.7875 18.7375C20.6458 18.8792 20.4667 18.95 20.25 18.95H12.175V20.25C12.175 20.4667 12.1042 20.6458 11.9625 20.7875C11.8208 20.9292 11.6417 21 11.425 21ZM8.425 14.8C8.20833 14.8 8.02917 14.7292 7.8875 14.5875C7.74583 14.4458 7.675 14.2667 7.675 14.05V12.75H3.75C3.53333 12.75 3.35417 12.6792 3.2125 12.5375C3.07083 12.3958 3 12.2167 3 12C3 11.7833 3.07083 11.6042 3.2125 11.4625C3.35417 11.3208 3.53333 11.25 3.75 11.25H7.675V9.9C7.675 9.68333 7.74583 9.50417 7.8875 9.3625C8.02917 9.22083 8.20833 9.15 8.425 9.15C8.64167 9.15 8.82083 9.22083 8.9625 9.3625C9.10417 9.50417 9.175 9.68333 9.175 9.9V14.05C9.175 14.2667 9.10417 14.4458 8.9625 14.5875C8.82083 14.7292 8.64167 14.8 8.425 14.8ZM11.425 12.75C11.2083 12.75 11.0292 12.6792 10.8875 12.5375C10.7458 12.3958 10.675 12.2167 10.675 12C10.675 11.7833 10.7458 11.6042 10.8875 11.4625C11.0292 11.3208 11.2083 11.25 11.425 11.25H20.25C20.4667 11.25 20.6458 11.3208 20.7875 11.4625C20.9292 11.6042 21 11.7833 21 12C21 12.2167 20.9292 12.3958 20.7875 12.5375C20.6458 12.6792 20.4667 12.75 20.25 12.75H11.425ZM15.575 8.625C15.3583 8.625 15.1792 8.55417 15.0375 8.4125C14.8958 8.27083 14.825 8.09167 14.825 7.875V3.75C14.825 3.53333 14.8958 3.35417 15.0375 3.2125C15.1792 3.07083 15.3583 3 15.575 3C15.7917 3 15.9708 3.07083 16.1125 3.2125C16.2542 3.35417 16.325 3.53333 16.325 3.75V5.05H20.25C20.4667 5.05 20.6458 5.12083 20.7875 5.2625C20.9292 5.40417 21 5.58333 21 5.8C21 6.01667 20.9292 6.19583 20.7875 6.3375C20.6458 6.47917 20.4667 6.55 20.25 6.55H16.325V7.875C16.325 8.09167 16.2542 8.27083 16.1125 8.4125C15.9708 8.55417 15.7917 8.625 15.575 8.625Z"
-      fill="#212529"
-    />
-  </svg>
-);
+export function TuneIcon({ width = "24", height = "24", className }: Props) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.75 18.95C3.53333 18.95 3.35417 18.8792 3.2125 18.7375C3.07083 18.5958 3 18.4167 3 18.2C3 17.9833 3.07083 17.8042 3.2125 17.6625C3.35417 17.5208 3.53333 17.45 3.75 17.45H8.425C8.64167 17.45 8.82083 17.5208 8.9625 17.6625C9.10417 17.8042 9.175 17.9833 9.175 18.2C9.175 18.4167 9.10417 18.5958 8.9625 18.7375C8.82083 18.8792 8.64167 18.95 8.425 18.95H3.75ZM3.75 6.55C3.53333 6.55 3.35417 6.47917 3.2125 6.3375C3.07083 6.19583 3 6.01667 3 5.8C3 5.58333 3.07083 5.40417 3.2125 5.2625C3.35417 5.12083 3.53333 5.05 3.75 5.05H12.575C12.7917 5.05 12.9708 5.12083 13.1125 5.2625C13.2542 5.40417 13.325 5.58333 13.325 5.8C13.325 6.01667 13.2542 6.19583 13.1125 6.3375C12.9708 6.47917 12.7917 6.55 12.575 6.55H3.75ZM11.425 21C11.2083 21 11.0292 20.9292 10.8875 20.7875C10.7458 20.6458 10.675 20.4667 10.675 20.25V16.125C10.675 15.9083 10.7458 15.7292 10.8875 15.5875C11.0292 15.4458 11.2083 15.375 11.425 15.375C11.6417 15.375 11.8208 15.4458 11.9625 15.5875C12.1042 15.7292 12.175 15.9083 12.175 16.125V17.45H20.25C20.4667 17.45 20.6458 17.5208 20.7875 17.6625C20.9292 17.8042 21 17.9833 21 18.2C21 18.4167 20.9292 18.5958 20.7875 18.7375C20.6458 18.8792 20.4667 18.95 20.25 18.95H12.175V20.25C12.175 20.4667 12.1042 20.6458 11.9625 20.7875C11.8208 20.9292 11.6417 21 11.425 21ZM8.425 14.8C8.20833 14.8 8.02917 14.7292 7.8875 14.5875C7.74583 14.4458 7.675 14.2667 7.675 14.05V12.75H3.75C3.53333 12.75 3.35417 12.6792 3.2125 12.5375C3.07083 12.3958 3 12.2167 3 12C3 11.7833 3.07083 11.6042 3.2125 11.4625C3.35417 11.3208 3.53333 11.25 3.75 11.25H7.675V9.9C7.675 9.68333 7.74583 9.50417 7.8875 9.3625C8.02917 9.22083 8.20833 9.15 8.425 9.15C8.64167 9.15 8.82083 9.22083 8.9625 9.3625C9.10417 9.50417 9.175 9.68333 9.175 9.9V14.05C9.175 14.2667 9.10417 14.4458 8.9625 14.5875C8.82083 14.7292 8.64167 14.8 8.425 14.8ZM11.425 12.75C11.2083 12.75 11.0292 12.6792 10.8875 12.5375C10.7458 12.3958 10.675 12.2167 10.675 12C10.675 11.7833 10.7458 11.6042 10.8875 11.4625C11.0292 11.3208 11.2083 11.25 11.425 11.25H20.25C20.4667 11.25 20.6458 11.3208 20.7875 11.4625C20.9292 11.6042 21 11.7833 21 12C21 12.2167 20.9292 12.3958 20.7875 12.5375C20.6458 12.6792 20.4667 12.75 20.25 12.75H11.425ZM15.575 8.625C15.3583 8.625 15.1792 8.55417 15.0375 8.4125C14.8958 8.27083 14.825 8.09167 14.825 7.875V3.75C14.825 3.53333 14.8958 3.35417 15.0375 3.2125C15.1792 3.07083 15.3583 3 15.575 3C15.7917 3 15.9708 3.07083 16.1125 3.2125C16.2542 3.35417 16.325 3.53333 16.325 3.75V5.05H20.25C20.4667 5.05 20.6458 5.12083 20.7875 5.2625C20.9292 5.40417 21 5.58333 21 5.8C21 6.01667 20.9292 6.19583 20.7875 6.3375C20.6458 6.47917 20.4667 6.55 20.25 6.55H16.325V7.875C16.325 8.09167 16.2542 8.27083 16.1125 8.4125C15.9708 8.55417 15.7917 8.625 15.575 8.625Z"
+        fill="#212529"
+      />
+    </svg>
+  );
+}
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 687ad54e05..c1b2033671 100644
--- a/apps/web/core/components/icons/attachment/txt-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/txt-file-icon.tsx
@@ -4,6 +4,6 @@ import TxtFileIcon from "@/app/assets/attachment/txt-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
-export const TxtIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={TxtFileIcon} width={width} height={height} alt="TxtFileIcon" />
-);
+export function TxtIcon({ width, height }: ImageIconPros) {
+  return <img src={TxtFileIcon} width={width} height={height} alt="TxtFileIcon" />;
+}
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 892bcac54a..9d201ae088 100644
--- a/apps/web/core/components/icons/attachment/video-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/video-file-icon.tsx
@@ -4,6 +4,6 @@ import VideoFileIcon from "@/app/assets/attachment/video-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
-export const VideoIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={VideoFileIcon} width={width} height={height} alt="VideoFileIcon" />
-);
+export function VideoIcon({ width, height }: ImageIconPros) {
+  return <img src={VideoFileIcon} width={width} height={height} alt="VideoFileIcon" />;
+}
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 5830d719e8..787eede55b 100644
--- a/apps/web/core/components/icons/attachment/zip-file-icon.tsx
+++ b/apps/web/core/components/icons/attachment/zip-file-icon.tsx
@@ -4,6 +4,6 @@ import ZipFileIcon from "@/app/assets/attachment/zip-icon.png?url";
 // type
 import type { ImageIconPros } from "../types";
 
-export const ZipIcon: React.FC<ImageIconPros> = ({ width, height }) => (
-  <img src={ZipFileIcon} width={width} height={height} alt="ZipFileIcon" />
-);
+export function ZipIcon({ width, height }: ImageIconPros) {
+  return <img src={ZipFileIcon} width={width} height={height} alt="ZipFileIcon" />;
+}
diff --git a/apps/web/core/components/icons/locked-component.tsx b/apps/web/core/components/icons/locked-component.tsx
index 1fcd486808..ccea3ac055 100644
--- a/apps/web/core/components/icons/locked-component.tsx
+++ b/apps/web/core/components/icons/locked-component.tsx
@@ -1,10 +1,10 @@
 import { Lock } from "lucide-react";
 import { Tooltip } from "@plane/propel/tooltip";
 
-export const LockedComponent = (props: { toolTipContent?: string }) => {
+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">
+    <div className="flex-shrink-0 flex h-7 items-center gap-2 rounded-full bg-layer-1 px-3 py-0.5 text-11 font-medium text-tertiary">
       <Lock className="h-3 w-3" />
       <span>Locked</span>
     </div>
@@ -15,4 +15,4 @@ export const LockedComponent = (props: { toolTipContent?: string }) => {
       {toolTipContent ? <Tooltip tooltipContent={toolTipContent}>{lockedComponent}</Tooltip> : <>{lockedComponent}</>}
     </>
   );
-};
+}
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 21b59ddcf4..6aaab1f5ae 100644
--- a/apps/web/core/components/inbox/content/inbox-issue-header.tsx
+++ b/apps/web/core/components/inbox/content/inbox-issue-header.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react";
@@ -43,7 +41,7 @@ type TInboxIssueActionsHeader = {
   embedRemoveCurrentNotification?: () => void;
 };
 
-export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((props) => {
+export const InboxIssueActionsHeader = observer(function InboxIssueActionsHeader(props: TInboxIssueActionsHeader) {
   const {
     workspaceSlug,
     projectId,
@@ -243,6 +241,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
           beforeFormSubmit={handleInboxIssueAccept}
           withDraftIssueWrapper={false}
           fetchIssueDetails={false}
+          showActionItemsOnUpdate
           modalTitle={t("inbox_issue.actions.move", {
             value: `${currentProjectDetails?.identifier}-${issue?.sequence_id}`,
           })}
@@ -271,15 +270,15 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
         />
       </>
 
-      <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="hidden relative lg:flex h-full w-full items-center justify-between gap-2 bg-surface-1 z-[15] border-b border-subtle">
         <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="text-14 font-medium text-tertiary flex-shrink-0">
               {getProjectById(issue.project_id)?.identifier}-{issue.sequence_id}
             </h3>
           )}
@@ -294,14 +293,14 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
             <div className="flex items-center gap-x-2">
               <button
                 type="button"
-                className="rounded border border-custom-border-200 p-1.5"
+                className="rounded-sm border border-subtle p-1.5"
                 onClick={() => handleInboxIssueNavigation("prev")}
               >
                 <ChevronUpIcon height={14} width={14} strokeWidth={2} />
               </button>
               <button
                 type="button"
-                className="rounded border border-custom-border-200 p-1.5"
+                className="rounded-sm border border-subtle p-1.5"
                 onClick={() => handleInboxIssueNavigation("next")}
               >
                 <ChevronDownIcon height={14} width={14} strokeWidth={2} />
@@ -313,8 +312,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
             {canMarkAsAccepted && (
               <div className="flex-shrink-0">
                 <Button
-                  variant="neutral-primary"
-                  size="sm"
+                  variant="secondary"
                   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={() =>
@@ -333,8 +331,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
             {canMarkAsDeclined && (
               <div className="flex-shrink-0">
                 <Button
-                  variant="neutral-primary"
-                  size="sm"
+                  variant="secondary"
                   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={() =>
@@ -353,15 +350,14 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
             {isAcceptedOrDeclined ? (
               <div className="flex items-center gap-2">
                 <Button
-                  variant="neutral-primary"
+                  variant="secondary"
                   prependIcon={<Link className="h-2.5 w-2.5" />}
-                  size="sm"
                   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" prependIcon={<ExternalLink className="h-2.5 w-2.5" />}>
                     {t("inbox_issue.actions.open")}
                   </Button>
                 </ControlLink>
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 79e71bbc32..a7a216cb06 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,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 import { CircleCheck, CircleX, Clock, ExternalLink, FileStack, Link, Trash2, PanelLeft, MoveRight } from "lucide-react";
@@ -41,7 +39,7 @@ type Props = {
   handleActionWithPermission: (isAdmin: boolean, action: () => void, errorMessage: string) => void;
 };
 
-export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) => {
+export const InboxIssueActionsMobileHeader = observer(function InboxIssueActionsMobileHeader(props: Props) {
   const {
     inboxIssue,
     isSubmitting,
@@ -89,28 +87,25 @@ export const InboxIssueActionsMobileHeader: React.FC<Props> = observer((props) =
     <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="h-4 w-4 text-tertiary hover:text-secondary mr-2" />
         </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("w-4 h-4 flex-shrink-0 mr-2 my-auto", isMobileSidebar ? "text-accent-primary" : "text-secondary")}
       />
-      <div className="flex items-center gap-2 w-full bg-custom-background-100 z-[15]">
+      <div className="flex items-center gap-2 w-full bg-surface-1 z-[15]">
         <div className="flex items-center gap-x-2">
           <button
             type="button"
-            className="rounded border border-custom-border-200 p-1.5"
+            className="rounded-sm border border-subtle p-1.5"
             onClick={() => handleInboxIssueNavigation("prev")}
           >
             <ChevronUpIcon height={14} width={14} strokeWidth={2} />
           </button>
           <button
             type="button"
-            className="rounded border border-custom-border-200 p-1.5"
+            className="rounded-sm border border-subtle p-1.5"
             onClick={() => handleInboxIssueNavigation("next")}
           >
             <ChevronDownIcon height={14} width={14} strokeWidth={2} />
diff --git a/apps/web/core/components/inbox/content/issue-properties.tsx b/apps/web/core/components/inbox/content/issue-properties.tsx
index c1df42157c..c9d1419777 100644
--- a/apps/web/core/components/inbox/content/issue-properties.tsx
+++ b/apps/web/core/components/inbox/content/issue-properties.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import React from "react";
 import { observer } from "mobx-react";
 import {
   StatePropertyIcon,
@@ -16,6 +13,7 @@ import { ControlLink } from "@plane/ui";
 import { getDate, renderFormattedPayloadDate, generateWorkItemLink } from "@plane/utils";
 // components
 import { DateDropdown } from "@/components/dropdowns/date";
+import { IntakeStateDropdown } from "@/components/dropdowns/intake-state/dropdown";
 import { MemberDropdown } from "@/components/dropdowns/member/dropdown";
 import { PriorityDropdown } from "@/components/dropdowns/priority";
 import { StateDropdown } from "@/components/dropdowns/state/dropdown";
@@ -32,10 +30,12 @@ type Props = {
   issueOperations: TIssueOperations;
   isEditable: boolean;
   duplicateIssueDetails: TInboxDuplicateIssueDetails | undefined;
+  isIntakeAccepted: boolean;
 };
 
-export const InboxIssueContentProperties: React.FC<Props> = observer((props) => {
-  const { workspaceSlug, projectId, issue, issueOperations, isEditable, duplicateIssueDetails } = props;
+export const InboxIssueContentProperties = observer(function InboxIssueContentProperties(props: Props) {
+  const { workspaceSlug, projectId, issue, issueOperations, isEditable, duplicateIssueDetails, isIntakeAccepted } =
+    props;
 
   const router = useAppRouter();
   // store hooks
@@ -52,31 +52,30 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
     projectIdentifier: currentProjectDetails?.identifier,
     sequenceId: duplicateIssueDetails?.sequence_id,
   });
+  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="text-body-sm-medium mb-2">Properties</h5>
+        <div className={`divide-y-2 divide-subtle-1 ${!isEditable ? "opacity-60" : ""}`}>
           <div className="flex flex-col gap-3">
-            {/* State */}
+            {/* 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>
               {issue?.state_id && (
-                <StateDropdown
+                <DropdownComponent
                   value={issue?.state_id}
-                  onChange={(val) =>
-                    issue?.id && issueOperations.update(workspaceSlug, projectId, issue?.id, { state_id: val })
-                  }
+                  onChange={() => {}}
                   projectId={projectId?.toString() ?? ""}
-                  disabled={!isEditable}
+                  disabled
                   buttonVariant="transparent-with-text"
                   className="w-3/5 flex-grow group"
                   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 +83,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
             </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>
@@ -102,8 +101,8 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
                 }
                 className="w-3/5 flex-grow group"
                 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 +111,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
             </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 +122,18 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
                 }
                 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={`divide-y-2 divide-subtle-1 mt-3 ${!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,14 +151,14 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
                 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>
@@ -182,7 +181,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
             {/* 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 +194,7 @@ export const InboxIssueContentProperties: React.FC<Props> = observer((props) =>
                   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 items-center gap-1 cursor-pointer text-11 rounded-sm px-1.5 py-1 pb-0.5 bg-layer-1 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 f1f7c7d9d3..3c7b3c75dc 100644
--- a/apps/web/core/components/inbox/content/issue-root.tsx
+++ b/apps/web/core/components/inbox/content/issue-root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { Dispatch, SetStateAction } from "react";
 import { useEffect, useMemo, useRef } from "react";
 import { observer } from "mobx-react";
@@ -8,7 +6,7 @@ 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";
-import { EFileAssetType, EInboxIssueSource } from "@plane/types";
+import { EFileAssetType, EInboxIssueSource, EInboxIssueStatus } from "@plane/types";
 import { getTextContent } from "@plane/utils";
 // components
 import { DescriptionVersionsRoot } from "@/components/core/description-versions";
@@ -49,7 +47,7 @@ type Props = {
   setIsSubmitting: Dispatch<SetStateAction<TNameDescriptionLoader>>;
 };
 
-export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
+export const InboxIssueMainContent = observer(function InboxIssueMainContent(props: Props) {
   const { workspaceSlug, projectId, inboxIssue, isEditable, isSubmitting, setIsSubmitting } = props;
   // refs
   const editorRef = useRef<EditorRefApi>(null);
@@ -76,6 +74,7 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
   // derived values
   const issue = inboxIssue.issue;
   const projectDetails = issue?.project_id ? getProjectById(issue?.project_id) : undefined;
+  const isIntakeAccepted = inboxIssue.status === EInboxIssueStatus.ACCEPTED;
 
   // debounced duplicate issues swr
   const { duplicateIssues } = useDebouncedDuplicateIssues(
@@ -89,15 +88,12 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
     }
   );
 
-  if (!issue) return <></>;
-
   const issueOperations: TIssueOperations = useMemo(
     () => ({
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars, arrow-body-style
       fetch: async (_workspaceSlug: string, _projectId: string, _issueId: string) => {
         return;
       },
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars, arrow-body-style
+
       remove: async (_workspaceSlug: string, _projectId: string, _issueId: string) => {
         try {
           await removeIssue(workspaceSlug, projectId, _issueId);
@@ -164,11 +160,13 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
     [inboxIssue]
   );
 
+  if (!issue) return <></>;
+
   if (!issue?.project_id || !issue?.id) return <></>;
 
   return (
     <>
-      <div className="rounded-lg space-y-4">
+      <div className="space-y-4 pb-4">
         {duplicateIssues.length > 0 && (
           <DeDupeIssuePopoverRoot
             workspaceSlug={workspaceSlug}
@@ -202,10 +200,11 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
             entityId={issue.id}
             fileAssetType={EFileAssetType.ISSUE_DESCRIPTION}
             initialValue={issue.description_html ?? "<p></p>"}
-            onSubmit={async (value) => {
+            onSubmit={async (value, isMigrationUpdate) => {
               if (!issue.id || !issue.project_id) return;
               await issueOperations.update(workspaceSlug, issue.project_id, issue.id, {
                 description_html: value,
+                ...(isMigrationUpdate ? { skip_activity: "true" } : {}),
               });
             }}
             projectId={issue.project_id}
@@ -250,23 +249,30 @@ export const InboxIssueMainContent: React.FC<Props> = observer((props) => {
         </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}
-      />
+      <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 696af4afbb..f330f64689 100644
--- a/apps/web/core/components/inbox/content/root.tsx
+++ b/apps/web/core/components/inbox/content/root.tsx
@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
@@ -24,7 +23,7 @@ type TInboxContentRoot = {
   embedRemoveCurrentNotification?: () => void;
 };
 
-export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
+export const InboxContentRoot = observer(function InboxContentRoot(props: TInboxContentRoot) {
   const {
     workspaceSlug,
     projectId,
@@ -94,7 +93,7 @@ export const InboxContentRoot: FC<TInboxContentRoot> = observer((props) => {
             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 6b85e0115c..ae02289552 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
@@ -15,7 +15,9 @@ type InboxIssueAppliedFiltersDate = {
   label: string;
 };
 
-export const InboxIssueAppliedFiltersDate: FC<InboxIssueAppliedFiltersDate> = observer((props) => {
+export const InboxIssueAppliedFiltersDate = observer(function InboxIssueAppliedFiltersDate(
+  props: InboxIssueAppliedFiltersDate
+) {
   const { filterKey, label } = props;
   // hooks
   const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
@@ -39,15 +41,15 @@ export const InboxIssueAppliedFiltersDate: FC<InboxIssueAppliedFiltersDate> = ob
   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="text-11 truncate">{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="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-tertiary hover:text-secondary transition-all"
               onClick={() => handleInboxIssueFilters(filterKey, handleFilterValue(optionDetail?.value))}
             >
               <CloseIcon className={`w-3 h-3`} />
@@ -57,7 +59,7 @@ export const InboxIssueAppliedFiltersDate: FC<InboxIssueAppliedFiltersDate> = ob
       })}
 
       <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="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-tertiary hover:text-secondary transition-all"
         onClick={clearFilter}
       >
         <CloseIcon className={`w-3 h-3`} />
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 64b624a62a..592226227f 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
@@ -6,11 +6,11 @@ import { Tag } from "@plane/ui";
 import { useLabel } from "@/hooks/store/use-label";
 import { useProjectInbox } from "@/hooks/store/use-project-inbox";
 
-const LabelIcons = ({ color }: { color: string }) => (
-  <span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: color }} />
-);
+function LabelIcons({ color }: { color: string }) {
+  return <span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: color }} />;
+}
 
-export const InboxIssueAppliedFiltersLabel: FC = observer(() => {
+export const InboxIssueAppliedFiltersLabel = observer(function InboxIssueAppliedFiltersLabel() {
   // hooks
   const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
   const { getLabelById } = useLabel();
@@ -26,18 +26,18 @@ export const InboxIssueAppliedFiltersLabel: FC = observer(() => {
   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 key={value} className="relative flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
             <div className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden">
               <LabelIcons color={optionDetail.color} />
             </div>
-            <div className="text-xs truncate">{optionDetail?.name}</div>
+            <div className="text-11 truncate">{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="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-tertiary hover:text-secondary transition-all"
               onClick={() => handleInboxIssueFilters("labels", handleFilterValue(value))}
             >
               <CloseIcon className={`w-3 h-3`} />
@@ -47,7 +47,7 @@ export const InboxIssueAppliedFiltersLabel: FC = observer(() => {
       })}
 
       <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="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-tertiary hover:text-secondary transition-all"
         onClick={clearFilter}
       >
         <CloseIcon className={`w-3 h-3`} />
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 4b16af6e7c..11ef82db7f 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,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { observer } from "mobx-react";
 
@@ -19,7 +17,9 @@ type InboxIssueAppliedFiltersMember = {
   label: string;
 };
 
-export const InboxIssueAppliedFiltersMember: FC<InboxIssueAppliedFiltersMember> = observer((props) => {
+export const InboxIssueAppliedFiltersMember = observer(function InboxIssueAppliedFiltersMember(
+  props: InboxIssueAppliedFiltersMember
+) {
   const { filterKey, label } = props;
   // hooks
   const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
@@ -36,12 +36,12 @@ export const InboxIssueAppliedFiltersMember: FC<InboxIssueAppliedFiltersMember>
   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 key={value} className="relative flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
             <div className="flex-shrink-0 relative flex justify-center items-center overflow-hidden">
               <Avatar
                 name={optionDetail.display_name}
@@ -50,9 +50,9 @@ export const InboxIssueAppliedFiltersMember: FC<InboxIssueAppliedFiltersMember>
                 size="sm"
               />
             </div>
-            <div className="text-xs truncate">{optionDetail?.display_name}</div>
+            <div className="text-11 truncate">{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="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-tertiary hover:text-secondary transition-all"
               onClick={() => handleInboxIssueFilters(filterKey, handleFilterValue(value))}
             >
               <CloseIcon className={`w-3 h-3`} />
@@ -62,7 +62,7 @@ export const InboxIssueAppliedFiltersMember: FC<InboxIssueAppliedFiltersMember>
       })}
 
       <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="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-tertiary hover:text-secondary transition-all"
         onClick={clearFilter}
       >
         <CloseIcon className={`w-3 h-3`} />
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 162317e71b..18339b9cf1 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,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { observer } from "mobx-react";
 import { ISSUE_PRIORITIES } from "@plane/constants";
@@ -10,7 +8,7 @@ import { Tag } from "@plane/ui";
 // hooks
 import { useProjectInbox } from "@/hooks/store/use-project-inbox";
 
-export const InboxIssueAppliedFiltersPriority: FC = observer(() => {
+export const InboxIssueAppliedFiltersPriority = observer(function InboxIssueAppliedFiltersPriority() {
   // hooks
   const { t } = useTranslation();
   const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
@@ -27,18 +25,18 @@ export const InboxIssueAppliedFiltersPriority: FC = observer(() => {
   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 key={value} className="relative flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
             <div className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden">
               <PriorityIcon priority={optionDetail.key} className="h-3 w-3" />
             </div>
-            <div className="text-xs truncate">{optionDetail?.title}</div>
+            <div className="text-11 truncate">{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="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-tertiary hover:text-secondary transition-all"
               onClick={() => handleInboxIssueFilters("priority", handleFilterValue(optionDetail?.key))}
             >
               <CloseIcon className={`w-3 h-3`} />
@@ -48,7 +46,7 @@ export const InboxIssueAppliedFiltersPriority: FC = observer(() => {
       })}
 
       <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="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-tertiary hover:text-secondary transition-all"
         onClick={clearFilter}
       >
         <CloseIcon className={`w-3 h-3`} />
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 8ae9e17e08..bf33b282eb 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
@@ -12,7 +12,7 @@ import { InboxIssueAppliedFiltersPriority } from "./priority";
 import { InboxIssueAppliedFiltersState } from "./state";
 import { InboxIssueAppliedFiltersStatus } from "./status";
 
-export const InboxIssueAppliedFilters: FC = observer(() => {
+export const InboxIssueAppliedFilters = observer(function InboxIssueAppliedFilters() {
   const { getAppliedFiltersCount } = useProjectInbox();
 
   if (getAppliedFiltersCount === 0) return <></>;
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 64ccd16b76..86450c6093 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,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { observer } from "mobx-react";
 import { EIconSize } from "@plane/constants";
@@ -9,7 +7,7 @@ import { Tag } from "@plane/ui";
 import { useProjectInbox } from "@/hooks/store/use-project-inbox";
 import { useProjectState } from "@/hooks/store/use-project-state";
 
-export const InboxIssueAppliedFiltersState: FC = observer(() => {
+export const InboxIssueAppliedFiltersState = observer(function InboxIssueAppliedFiltersState() {
   // hooks
   const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
   const { getStateById } = useProjectState();
@@ -25,18 +23,18 @@ export const InboxIssueAppliedFiltersState: FC = observer(() => {
   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 key={value} className="relative flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
             <div className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden">
               <StateGroupIcon color={optionDetail.color} stateGroup={optionDetail.group} size={EIconSize.SM} />
             </div>
-            <div className="text-xs truncate">{optionDetail?.name}</div>
+            <div className="text-11 truncate">{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="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-tertiary hover:text-secondary transition-all"
               onClick={() => handleInboxIssueFilters("state", handleFilterValue(optionDetail?.id))}
             >
               <CloseIcon className={`w-3 h-3`} />
@@ -46,7 +44,7 @@ export const InboxIssueAppliedFiltersState: FC = observer(() => {
       })}
 
       <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="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-tertiary hover:text-secondary transition-all"
         onClick={clearFilter}
       >
         <CloseIcon className={`w-3 h-3`} />
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 0e84875119..6c07b4ad43 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
@@ -10,7 +10,7 @@ import { Tag } from "@plane/ui";
 import { useProjectInbox } from "@/hooks/store/use-project-inbox";
 import { InboxStatusIcon } from "../../inbox-status-icon";
 
-export const InboxIssueAppliedFiltersStatus: FC = observer(() => {
+export const InboxIssueAppliedFiltersStatus = observer(function InboxIssueAppliedFiltersStatus() {
   // hooks
   const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
   const { t } = useTranslation();
@@ -24,19 +24,19 @@ export const InboxIssueAppliedFiltersStatus: FC = observer(() => {
   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 key={value} className="relative flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
             <div className="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden">
               <InboxStatusIcon type={optionDetail?.status} />
             </div>
-            <div className="text-xs truncate">{t(optionDetail?.i18n_title)}</div>
+            <div className="text-11 truncate">{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="w-3 h-3 flex-shrink-0 relative flex justify-center items-center overflow-hidden cursor-pointer text-tertiary hover:text-secondary transition-all"
                 onClick={() => handleInboxIssueFilters("status", handleFilterValue(optionDetail?.status))}
               >
                 <CloseIcon className={`w-3 h-3`} />
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 4e1dd286ba..135aee2a20 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/date.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/date.tsx
@@ -22,7 +22,7 @@ const isDate = (date: string) => {
   return datePattern.test(date);
 };
 
-export const FilterDate: FC<Props> = observer((props) => {
+export const FilterDate = observer(function FilterDate(props: Props) {
   const { filterKey, label, searchQuery } = props;
   // hooks
   const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
@@ -88,7 +88,7 @@ export const FilterDate: FC<Props> = observer((props) => {
               />
             </>
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-11 italic text-placeholder">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 e53c423b3a..5ea668a801 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
@@ -16,7 +16,7 @@ import { FilterPriority } from "./priority";
 import { FilterState } from "./state";
 import { FilterStatus } from "./status";
 
-export const InboxIssueFilterSelection: FC = observer(() => {
+export const InboxIssueFilterSelection = observer(function InboxIssueFilterSelection() {
   // hooks
   const { isMobile } = usePlatformOS();
   const {
@@ -29,12 +29,12 @@ export const InboxIssueFilterSelection: FC = observer(() => {
 
   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">
+          <Search className="text-placeholder" size={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,21 +42,17 @@ export const InboxIssueFilterSelection: FC = observer(() => {
           />
           {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="h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
         {/* status */}
         <div className="py-2">
           <FilterStatus searchQuery={filtersSearchQuery} />
         </div>
-        {/* state */}
-        <div className="py-2">
-          <FilterState states={projectStates} searchQuery={filtersSearchQuery} />
-        </div>
         {/* Priority */}
         <div className="py-2">
           <FilterPriority 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 eddfbf6f8f..7d7884c26b 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/labels.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
@@ -10,16 +8,16 @@ import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/fi
 // hooks
 import { useProjectInbox } from "@/hooks/store/use-project-inbox";
 
-const LabelIcons = ({ color }: { color: string }) => (
-  <span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: color }} />
-);
+function LabelIcons({ color }: { color: string }) {
+  return <span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: color }} />;
+}
 
 type Props = {
   labels: IIssueLabel[] | undefined;
   searchQuery: string;
 };
 
-export const FilterLabels: FC<Props> = observer((props) => {
+export const FilterLabels = observer(function FilterLabels(props: Props) {
   const { labels, searchQuery } = props;
 
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -67,7 +65,7 @@ export const FilterLabels: FC<Props> = observer((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"}
@@ -75,7 +73,7 @@ export const FilterLabels: FC<Props> = observer((props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 italic text-placeholder">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 80566808b6..a9831be68e 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/members.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/members.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
@@ -24,7 +22,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterMember: FC<Props> = observer((props: Props) => {
+export const FilterMember = observer(function FilterMember(props: Props) {
   const { filterKey, label = "Members", memberIds, searchQuery } = props;
   // hooks
   const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
@@ -96,7 +94,7 @@ export const FilterMember: FC<Props> = observer((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"}
@@ -104,7 +102,7 @@ export const FilterMember: FC<Props> = observer((props: Props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 italic text-placeholder">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 aa2608ff2b..ca5b8b6b08 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/priority.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/priority.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
@@ -17,7 +15,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterPriority: FC<Props> = observer((props) => {
+export const FilterPriority = observer(function FilterPriority(props: Props) {
   const { searchQuery } = props;
   // hooks
   const { t } = useTranslation();
@@ -52,7 +50,7 @@ export const FilterPriority: FC<Props> = observer((props) => {
               />
             ))
           ) : (
-            <p className="text-xs italic text-custom-text-400">{t("common.search.no_matches_found")}</p>
+            <p className="text-11 italic text-placeholder">{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 3fb6586f37..147e402014 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/state.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/state.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
@@ -17,7 +15,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterState: FC<Props> = observer((props) => {
+export const FilterState = observer(function FilterState(props: Props) {
   const { states, searchQuery } = props;
 
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -72,7 +70,7 @@ export const FilterState: FC<Props> = observer((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"}
@@ -80,7 +78,7 @@ export const FilterState: FC<Props> = observer((props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 italic text-placeholder">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 b0d9217e19..0580667916 100644
--- a/apps/web/core/components/inbox/inbox-filter/filters/status.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/filters/status.tsx
@@ -16,7 +16,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterStatus: FC<Props> = observer((props) => {
+export const FilterStatus = observer(function FilterStatus(props: Props) {
   const { searchQuery } = props;
   // hooks
   const { currentTab, inboxFilters, handleInboxIssueFilters } = useProjectInbox();
@@ -61,7 +61,7 @@ export const FilterStatus: FC<Props> = observer((props) => {
               />
             ))
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-11 italic text-placeholder">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/inbox/inbox-filter/root.tsx b/apps/web/core/components/inbox/inbox-filter/root.tsx
index 02501d560b..4130fb1e51 100644
--- a/apps/web/core/components/inbox/inbox-filter/root.tsx
+++ b/apps/web/core/components/inbox/inbox-filter/root.tsx
@@ -15,13 +15,13 @@ import { InboxIssueOrderByDropdown } from "./sorting/order-by";
 const smallButton = <ListFilter 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")}>
     <ListFilter className="size-3 " />
     <span>Filters</span>
     <ChevronDownIcon className="size-3" strokeWidth={2} />
   </div>
 );
-export const FiltersRoot: FC = () => {
+export function FiltersRoot() {
   const windowSize = useSize();
 
   return (
@@ -36,4 +36,4 @@ export const FiltersRoot: FC = () => {
       </div>
     </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 bde31a218b..17db019154 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,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { observer } from "mobx-react";
 import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check } from "lucide-react";
@@ -16,7 +14,7 @@ import { cn } from "@plane/utils";
 import { useProjectInbox } from "@/hooks/store/use-project-inbox";
 import useSize from "@/hooks/use-window-size";
 
-export const InboxIssueOrderByDropdown: FC = observer(() => {
+export const InboxIssueOrderByDropdown = observer(function InboxIssueOrderByDropdown() {
   // hooks
   const { t } = useTranslation();
   const windowSize = useSize();
@@ -30,7 +28,7 @@ export const InboxIssueOrderByDropdown: FC = observer(() => {
       <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 " />
       ) : (
@@ -57,7 +55,7 @@ export const InboxIssueOrderByDropdown: FC = observer(() => {
           {inboxSorting?.order_by?.includes(option.key) && <Check 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}
diff --git a/apps/web/core/components/inbox/inbox-issue-status.tsx b/apps/web/core/components/inbox/inbox-issue-status.tsx
index fbafb6af57..8c93d7f299 100644
--- a/apps/web/core/components/inbox/inbox-issue-status.tsx
+++ b/apps/web/core/components/inbox/inbox-issue-status.tsx
@@ -15,7 +15,7 @@ type Props = {
   showDescription?: boolean;
 };
 
-export const InboxIssueStatus: React.FC<Props> = observer((props) => {
+export const InboxIssueStatus = observer(function InboxIssueStatus(props: Props) {
   const { inboxIssue, iconSize = 16, showDescription = false } = props;
   //hooks
   const { t } = useTranslation();
@@ -33,18 +33,18 @@ export const InboxIssueStatus: React.FC<Props> = observer((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 p-1.5 py-0.5 rounded-sm ${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="font-medium text-11 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 7235b32e74..1893a06536 100644
--- a/apps/web/core/components/inbox/inbox-status-icon.tsx
+++ b/apps/web/core/components/inbox/inbox-status-icon.tsx
@@ -16,7 +16,7 @@ export const ICON_PROPERTIES = {
   },
   [EInboxIssueStatus.SNOOZED]: {
     icon: Clock,
-    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "text-red-500" : "text-custom-text-400"),
+    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "text-red-500" : "text-placeholder"),
     bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "bg-red-500/10" : "bg-[#E0E1E6]"),
   },
   [EInboxIssueStatus.ACCEPTED]: {
@@ -26,11 +26,11 @@ export const ICON_PROPERTIES = {
   },
   [EInboxIssueStatus.DUPLICATE]: {
     icon: Copy,
-    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-custom-text-200"),
+    textColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "text-secondary"),
     bgColor: (snoozeDatePassed: boolean = false) => (snoozeDatePassed ? "" : "bg-gray-500/10"),
   },
 };
-export const InboxStatusIcon = ({
+export function InboxStatusIcon({
   type,
   size,
   className,
@@ -40,9 +40,9 @@ export const InboxStatusIcon = ({
   size?: number;
   className?: string;
   renderColor?: boolean;
-}) => {
+}) {
   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)} />;
-};
+}
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 d10094fa27..d07606b4ea 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,5 +1,3 @@
-"use client";
-
 import type { FC, FormEvent } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
@@ -54,7 +52,7 @@ export const defaultIssueData: Partial<TIssue> = {
   target_date: "",
 };
 
-export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props) => {
+export const InboxIssueCreateRoot = observer(function InboxIssueCreateRoot(props: TInboxIssueCreateRoot) {
   const { workspaceSlug, projectId, handleModalClose, isDuplicateModalOpen, handleDuplicateIssueModal } = props;
   // states
   const [uploadedAssetIds, setUploadedAssetIds] = useState<string[]>([]);
@@ -211,9 +209,9 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
     <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="space-y-5 p-5 rounded-t-lg bg-surface-1">
             <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}
@@ -236,14 +234,14 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((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="px-5 py-4 flex items-center justify-between gap-2 border-t-[0.5px] border-subtle rounded-b-lg bg-surface-1">
             <div
               className="inline-flex items-center gap-1.5 cursor-pointer"
               onClick={() => setCreateMore((prevData) => !prevData)}
@@ -251,12 +249,12 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((props)
               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()) {
@@ -276,11 +274,11 @@ export const InboxIssueCreateRoot: FC<TInboxIssueCreateRoot> = observer((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>
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 702c1fa9ef..d17acd2a14 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,5 +1,3 @@
-"use client";
-
 import type { FC, RefObject } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -34,7 +32,7 @@ type TInboxIssueDescription = {
 };
 
 // TODO: have to implement GPT Assistance
-export const InboxIssueDescription: FC<TInboxIssueDescription> = observer((props) => {
+export const InboxIssueDescription = observer(function InboxIssueDescription(props: TInboxIssueDescription) {
   const {
     containerClassName,
     workspaceSlug,
@@ -49,7 +47,7 @@ export const InboxIssueDescription: FC<TInboxIssueDescription> = observer((props
   // i18n
   const { t } = useTranslation();
   // store hooks
-  const { uploadEditorAsset } = useEditorAsset();
+  const { uploadEditorAsset, duplicateEditorAsset } = useEditorAsset();
   const { loader } = useProjectInbox();
   const { isMobile } = usePlatformOS();
 
@@ -57,7 +55,7 @@ export const InboxIssueDescription: FC<TInboxIssueDescription> = observer((props
 
   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>
     );
@@ -102,6 +100,20 @@ export const InboxIssueDescription: FC<TInboxIssueDescription> = observer((props
           throw new Error("Asset upload failed. Please try again later.");
         }
       }}
+      duplicateFile={async (assetId: string) => {
+        try {
+          const { asset_id } = await duplicateEditorAsset({
+            assetId,
+            entityType: EFileAssetType.ISSUE_DESCRIPTION,
+            projectId,
+            workspaceSlug,
+          });
+          onAssetUpload?.(asset_id);
+          return asset_id;
+        } catch {
+          throw new Error("Asset duplication failed. Please try again later.");
+        }
+      }}
     />
   );
 });
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 3d7c5abba4..cb013c6bc9 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
@@ -10,10 +10,10 @@ import { renderFormattedPayloadDate, getDate, getTabIndex } from "@plane/utils";
 import { CycleDropdown } from "@/components/dropdowns/cycle";
 import { DateDropdown } from "@/components/dropdowns/date";
 import { EstimateDropdown } from "@/components/dropdowns/estimate";
+import { IntakeStateDropdown } from "@/components/dropdowns/intake-state/dropdown";
 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";
 import { ParentIssuesListModal } from "@/components/issues/parent-issues-list-modal";
 import { IssueLabelSelect } from "@/components/issues/select";
 // helpers
@@ -28,7 +28,7 @@ type TInboxIssueProperties = {
   isVisible?: boolean;
 };
 
-export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props) => {
+export const InboxIssueProperties = observer(function InboxIssueProperties(props: TInboxIssueProperties) {
   const { projectId, data, handleData, isVisible = false } = props;
   // hooks
   const { areEstimateEnabledByProjectId } = useProjectEstimates();
@@ -50,9 +50,9 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((props)
 
   return (
     <div className="relative flex flex-wrap gap-2 items-center">
-      {/* state */}
+      {/* intake state */}
       <div className="h-7">
-        <StateDropdown
+        <IntakeStateDropdown
           value={data?.state_id}
           onChange={(stateId) => handleData("state_id", stateId)}
           projectId={projectId}
@@ -174,7 +174,7 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((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 cursor-pointer items-center justify-between gap-1 h-full 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 +207,7 @@ export const InboxIssueProperties: FC<TInboxIssueProperties> = observer((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 cursor-pointer items-center justify-between gap-1 h-full 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 711efdfd70..ceaa2a6abc 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,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -18,7 +16,7 @@ type TInboxIssueTitle = {
   isTitleLengthMoreThan255Character?: boolean;
 };
 
-export const InboxIssueTitle: FC<TInboxIssueTitle> = observer((props) => {
+export const InboxIssueTitle = observer(function InboxIssueTitle(props: TInboxIssueTitle) {
   const { data, handleData, isTitleLengthMoreThan255Character } = props;
   // hooks
   const { isMobile } = usePlatformOS();
@@ -34,12 +32,12 @@ export const InboxIssueTitle: FC<TInboxIssueTitle> = observer((props) => {
         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-red-500">{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 acce369bb9..9c3eff145f 100644
--- a/apps/web/core/components/inbox/modals/create-modal/modal.tsx
+++ b/apps/web/core/components/inbox/modals/create-modal/modal.tsx
@@ -1,5 +1,3 @@
-"use-client";
-
 import type { FC } from "react";
 import { useState } from "react";
 // plane imports
@@ -16,7 +14,7 @@ type TInboxIssueCreateModalRoot = {
   handleModalClose: () => void;
 };
 
-export const InboxIssueCreateModalRoot: FC<TInboxIssueCreateModalRoot> = (props) => {
+export function InboxIssueCreateModalRoot(props: TInboxIssueCreateModalRoot) {
   const { workspaceSlug, projectId, modalState, handleModalClose } = props;
   // states
   const [isDuplicateModalOpen, setIsDuplicateModalOpen] = useState(false);
@@ -46,4 +44,4 @@ export const InboxIssueCreateModalRoot: FC<TInboxIssueCreateModalRoot> = (props)
       />
     </ModalCore>
   );
-};
+}
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 56749cc557..f0b3207eb8 100644
--- a/apps/web/core/components/inbox/modals/decline-issue-modal.tsx
+++ b/apps/web/core/components/inbox/modals/decline-issue-modal.tsx
@@ -14,7 +14,7 @@ type Props = {
   onSubmit: () => Promise<void>;
 };
 
-export const DeclineIssueModal: React.FC<Props> = (props) => {
+export function DeclineIssueModal(props: Props) {
   const { isOpen, onClose, data, onSubmit } = props;
   // states
   const [isDeclining, setIsDeclining] = useState(false);
@@ -45,7 +45,7 @@ export const DeclineIssueModal: React.FC<Props> = (props) => {
       content={
         <>
           Are you sure you want to decline work item{" "}
-          <span className="break-words font-medium text-custom-text-100">
+          <span className="break-words font-medium text-primary">
             {projectDetails?.identifier}-{data?.sequence_id}
           </span>
           {""}? This action cannot be undone.
@@ -57,4 +57,4 @@ export const DeclineIssueModal: React.FC<Props> = (props) => {
       }}
     />
   );
-};
+}
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 0b3538fd01..a90f1727be 100644
--- a/apps/web/core/components/inbox/modals/delete-issue-modal.tsx
+++ b/apps/web/core/components/inbox/modals/delete-issue-modal.tsx
@@ -18,7 +18,12 @@ type Props = {
   onSubmit: () => Promise<void>;
 };
 
-export const DeleteInboxIssueModal: React.FC<Props> = observer(({ isOpen, onClose, onSubmit, data }) => {
+export const DeleteInboxIssueModal = observer(function DeleteInboxIssueModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  data,
+}: Props) {
   // states
   const [isDeleting, setIsDeleting] = useState(false);
   // store hooks
@@ -38,8 +43,8 @@ export const DeleteInboxIssueModal: React.FC<Props> = observer(({ isOpen, onClos
       .then(() => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: `${t("success")!}`,
-          message: `${t("inbox_issue.modals.delete.success")!}`,
+          title: `${t("success")}`,
+          message: `${t("inbox_issue.modals.delete.success")}`,
         });
       })
       .catch((errors) => {
@@ -67,7 +72,7 @@ export const DeleteInboxIssueModal: React.FC<Props> = observer(({ isOpen, onClos
       content={
         <>
           Are you sure you want to delete work item{" "}
-          <span className="break-words font-medium text-custom-text-100">
+          <span className="break-words font-medium 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 a44b7e48f4..ee1c65074d 100644
--- a/apps/web/core/components/inbox/modals/select-duplicate.tsx
+++ b/apps/web/core/components/inbox/modals/select-duplicate.tsx
@@ -1,15 +1,13 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
+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 { 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";
@@ -32,7 +30,7 @@ type Props = {
 
 const projectService = new ProjectService();
 
-export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
+export function SelectDuplicateInboxIssueModal(props: Props) {
   const { isOpen, onClose, onSubmit, value } = props;
   // router
   const { workspaceSlug, projectId, issueId } = useParams();
@@ -67,6 +65,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
 
   const handleClose = () => {
     onClose();
+    setQuery("");
   };
 
   const handleSubmit = (selectedItem: string) => {
@@ -82,10 +81,8 @@ export const SelectDuplicateInboxIssueModal: React.FC<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="mb-2 mt-4 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 || "";
 
@@ -95,8 +92,8 @@ export const SelectDuplicateInboxIssueModal: React.FC<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 select-none items-center gap-2 rounded-md px-3 py-2 text-secondary ${
+                    active || selected ? "bg-layer-1 text-primary" : ""
                   } `
                 }
               >
@@ -107,10 +104,10 @@ export const SelectDuplicateInboxIssueModal: React.FC<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>
             );
@@ -128,69 +125,34 @@ export const SelectDuplicateInboxIssueModal: React.FC<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">
+          <Search
+            className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-primary text-opacity-40"
+            aria-hidden="true"
+          />
+          <input
+            type="text"
+            className="h-12 w-full border-0 bg-transparent pl-11 pr-4 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 513bb0f130..4f05552df9 100644
--- a/apps/web/core/components/inbox/modals/snooze-issue-modal.tsx
+++ b/apps/web/core/components/inbox/modals/snooze-issue-modal.tsx
@@ -1,12 +1,9 @@
-"use client";
-
-import type { FC } from "react";
-import { Fragment, useState } from "react";
-import { Dialog, Transition } from "@headlessui/react";
+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;
@@ -15,7 +12,7 @@ export type InboxIssueSnoozeModalProps = {
   handleClose: () => void;
 };
 
-export const InboxIssueSnoozeModal: FC<InboxIssueSnoozeModalProps> = (props) => {
+export function InboxIssueSnoozeModal(props: InboxIssueSnoozeModalProps) {
   const { isOpen, handleClose, value, onConfirm } = props;
   // states
   const [date, setDate] = useState(value || new Date());
@@ -23,63 +20,34 @@ export const InboxIssueSnoozeModal: FC<InboxIssueSnoozeModalProps> = (props) =>
   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.XXL}>
+      <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 fec25cede7..21ca11134c 100644
--- a/apps/web/core/components/inbox/root.tsx
+++ b/apps/web/core/components/inbox/root.tsx
@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { PanelLeft } from "lucide-react";
@@ -23,19 +22,24 @@ type TInboxIssueRoot = {
   navigationTab?: EInboxIssueCurrentTab | undefined;
 };
 
-export const InboxIssueRoot: FC<TInboxIssueRoot> = observer((props) => {
+export const InboxIssueRoot = observer(function InboxIssueRoot(props: TInboxIssueRoot) {
   const { workspaceSlug, projectId, inboxIssueId, inboxAccessible, navigationTab } = props;
   // states
   const [isMobileSidebar, setIsMobileSidebar] = useState(true);
   // plane hooks
   const { t } = useTranslation();
   // hooks
-  const { loader, error, currentTab, handleCurrentTab, fetchInboxIssues } = useProjectInbox();
+  const { loader, error, currentTab, currentInboxProjectId, handleCurrentTab, fetchInboxIssues } = useProjectInbox();
 
   useEffect(() => {
     if (!inboxAccessible || !workspaceSlug || !projectId) return;
+    // Check if project has changed
+    const hasProjectChanged = currentInboxProjectId && currentInboxProjectId !== projectId;
+
     if (navigationTab && navigationTab !== currentTab) {
       handleCurrentTab(workspaceSlug, projectId, navigationTab);
+    } else if (hasProjectChanged) {
+      handleCurrentTab(workspaceSlug, projectId, EInboxIssueCurrentTab.OPEN);
     } else {
       fetchInboxIssues(
         workspaceSlug.toString(),
@@ -60,24 +64,24 @@ export const InboxIssueRoot: FC<TInboxIssueRoot> = observer((props) => {
     return (
       <div className="relative w-full h-full flex flex-col gap-3 justify-center items-center">
         <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 lg:hidden items-center px-4 w-full h-12 border-b border-subtle">
           <PanelLeft
             onClick={() => setIsMobileSidebar(!isMobileSidebar)}
-            className={cn("w-4 h-4 ", isMobileSidebar ? "text-custom-primary-100" : " text-custom-text-200")}
+            className={cn("w-4 h-4 ", isMobileSidebar ? "text-accent-primary" : " text-secondary")}
           />
         </div>
       )}
-      <div className="w-full h-full flex overflow-hidden bg-custom-background-100">
+      <div className="w-full h-full flex 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 z-10 top-[50px] lg:!top-0 lg:!relative bg-surface-1 flex-shrink-0 w-full lg:w-2/6 bottom-0 transition-all",
             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 2326824c9a..2bdf1c239d 100644
--- a/apps/web/core/components/inbox/sidebar/inbox-list-item.tsx
+++ b/apps/web/core/components/inbox/sidebar/inbox-list-item.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC, MouseEvent } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -29,7 +27,7 @@ type InboxIssueListItemProps = {
   setIsMobileSidebar: (value: boolean) => void;
 };
 
-export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props) => {
+export const InboxIssueListItem = observer(function InboxIssueListItem(props: InboxIssueListItemProps) {
   const { workspaceSlug, projectId, inboxIssueId, projectIdentifier, setIsMobileSidebar } = props;
   // router
   const searchParams = useSearchParams();
@@ -61,13 +59,13 @@ export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props)
       >
         <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 }
+            `flex flex-col gap-2 relative border border-t-transparent border-l-transparent border-r-transparent border-b-subtle-1 py-4 hover:bg-accent-primary/5 cursor-pointer transition-all`,
+            { "border-accent-strong border": 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">
@@ -75,7 +73,7 @@ export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props)
                 {inboxIssue.status !== -2 && <InboxIssueStatus inboxIssue={inboxIssue} iconSize={12} />}
               </div>
             </div>
-            <h3 className="truncate w-full text-sm">{issue.name}</h3>
+            <h3 className="truncate w-full text-13">{issue.name}</h3>
           </div>
 
           <div className="flex items-center justify-between">
@@ -85,10 +83,10 @@ export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props)
                 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="border-2 rounded-full border-strong-1" />
 
               {issue.priority && (
                 <Tooltip tooltipHeading="Priority" tooltipContent={`${issue.priority ?? "None"}`}>
@@ -97,7 +95,7 @@ export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props)
               )}
 
               {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">
+                <div className="relative !h-[17.5px] flex items-center gap-1 rounded-sm border border-strong px-1 text-11">
                   <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>
@@ -109,7 +107,7 @@ export const InboxIssueListItem: FC<InboxIssueListItemProps> = observer((props)
                     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 !h-[17.5px] flex items-center gap-1 rounded-sm border border-strong px-1 text-11"
                       >
                         <span
                           className="h-2 w-2 rounded-full"
diff --git a/apps/web/core/components/inbox/sidebar/inbox-list.tsx b/apps/web/core/components/inbox/sidebar/inbox-list.tsx
index 808ffdadb5..7cace3d50d 100644
--- a/apps/web/core/components/inbox/sidebar/inbox-list.tsx
+++ b/apps/web/core/components/inbox/sidebar/inbox-list.tsx
@@ -12,7 +12,7 @@ export type InboxIssueListProps = {
   setIsMobileSidebar: (value: boolean) => void;
 };
 
-export const InboxIssueList: FC<InboxIssueListProps> = observer((props) => {
+export const InboxIssueList = observer(function InboxIssueList(props: InboxIssueListProps) {
   const { workspaceSlug, projectId, projectIdentifier, inboxIssueIds, setIsMobileSidebar } = props;
 
   return (
diff --git a/apps/web/core/components/inbox/sidebar/root.tsx b/apps/web/core/components/inbox/sidebar/root.tsx
index 16558d2ff6..7d89f271d8 100644
--- a/apps/web/core/components/inbox/sidebar/root.tsx
+++ b/apps/web/core/components/inbox/sidebar/root.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
@@ -40,7 +37,7 @@ const tabNavigationOptions: { key: TInboxIssueCurrentTab; i18n_label: string }[]
   },
 ];
 
-export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
+export const InboxSidebar = observer(function InboxSidebar(props: IInboxSidebarProps) {
   const { workspaceSlug, projectId, inboxIssueId, setIsMobileSidebar } = props;
   // router
   const router = useAppRouter();
@@ -80,15 +77,15 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
   }, [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="bg-surface-1 flex-shrink-0 w-full h-full border-r border-strong ">
       <div className="relative w-full h-full flex 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`
+                `text-13 relative flex items-center gap-1 h-full px-3 cursor-pointer transition-all font-medium`,
+                currentTab === option?.key ? `text-accent-primary` : `hover:text-secondary`
               )}
               onClick={() => {
                 if (currentTab != option?.key) {
@@ -99,14 +96,14 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
             >
               <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 p-1.5 py-0.5 bg-accent-primary/20 text-accent-primary text-11 font-semibold">
                   {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`
+                  currentTab === option?.key ? `border-accent-strong` : `border-transparent`
                 )}
               />
             </div>
@@ -140,6 +137,7 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
                     title={t("common_empty_state.search.title")}
                     description={t("common_empty_state.search.description")}
                     assetClassName="size-20"
+                    rootClassName="px-page-x"
                   />
                 ) : currentTab === EInboxIssueCurrentTab.OPEN ? (
                   <EmptyStateDetailed
@@ -154,6 +152,7 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
                         variant: "primary",
                       },
                     ]}
+                    rootClassName="px-page-x"
                   />
                 ) : (
                   // TODO: Add translation
diff --git a/apps/web/core/components/instance/maintenance-view.tsx b/apps/web/core/components/instance/maintenance-view.tsx
index 3c6e12f308..d703ddd171 100644
--- a/apps/web/core/components/instance/maintenance-view.tsx
+++ b/apps/web/core/components/instance/maintenance-view.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useTheme } from "next-themes";
 // assets
@@ -10,14 +8,14 @@ import DefaultLayout from "@/layouts/default-layout";
 // components
 import { MaintenanceMessage } from "@/plane-web/components/instance";
 
-export const MaintenanceView: FC = () => {
+export function MaintenanceView() {
   // hooks
   const { resolvedTheme } = useTheme();
   // derived values
   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 h-full w-full max-w-xl flex flex-col gap-2 items-center justify-center gap-y-6 bg-surface-1 text-center">
         <div className="relative w-full">
           <img
             src={maintenanceModeImage}
@@ -33,4 +31,4 @@ export const MaintenanceView: FC = () => {
       </div>
     </DefaultLayout>
   );
-};
+}
diff --git a/apps/web/core/components/instance/not-ready-view.tsx b/apps/web/core/components/instance/not-ready-view.tsx
index 69f2781028..7bedc9fb86 100644
--- a/apps/web/core/components/instance/not-ready-view.tsx
+++ b/apps/web/core/components/instance/not-ready-view.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import Link from "next/link";
 import { useTheme } from "next-themes";
@@ -11,7 +9,7 @@ import PlaneBackgroundPatternDark from "@/app/assets/auth/background-pattern-dar
 import PlaneBackgroundPattern from "@/app/assets/auth/background-pattern.svg?url";
 import PlaneTakeOffImage from "@/app/assets/plane-takeoff.png?url";
 
-export const InstanceNotReady: FC = () => {
+export function InstanceNotReady() {
   const { resolvedTheme } = useTheme();
   const patternBackground = resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern;
 
@@ -21,7 +19,7 @@ export const InstanceNotReady: FC = () => {
         <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" />
+              <PlaneLockup className="h-7 w-auto text-primary" />
             </Link>
           </div>
         </div>
@@ -34,15 +32,15 @@ export const InstanceNotReady: FC = () => {
           <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">
+                <h1 className="text-24 font-bold pb-3">Welcome aboard Plane!</h1>
+                <img src={PlaneTakeOffImage} className="w-full h-full object-cover" alt="Plane Logo" />
+                <p className="font-medium text-14 text-placeholder">
                   Get started by setting up your instance and workspace
                 </p>
               </div>
               <div>
                 <a href={GOD_MODE_URL}>
-                  <Button size="lg" className="w-full">
+                  <Button size="xl" className="w-full">
                     Get started
                   </Button>
                 </a>
@@ -53,4 +51,4 @@ export const InstanceNotReady: FC = () => {
       </div>
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/integration/delete-import-modal.tsx b/apps/web/core/components/integration/delete-import-modal.tsx
index 04b06b77af..3f90d6073e 100644
--- a/apps/web/core/components/integration/delete-import-modal.tsx
+++ b/apps/web/core/components/integration/delete-import-modal.tsx
@@ -1,25 +1,15 @@
-"use client";
-
-import React, { useState } from "react";
-
+import { useState } from "react";
 import { useParams } from "next/navigation";
-
 import { mutate } from "swr";
-
-// headless ui
+// icons
 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 { Input, EModalPosition, EModalWidth, ModalCore } 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;
@@ -31,7 +21,7 @@ type Props = {
 // services
 const integrationService = new IntegrationService();
 
-export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data }) => {
+export function DeleteImportModal({ isOpen, handleClose, data }: Props) {
   const [deleteLoading, setDeleteLoading] = useState(false);
   const [confirmDeleteImport, setConfirmDeleteImport] = useState(false);
 
@@ -43,13 +33,13 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data }
     setDeleteLoading(true);
 
     mutate<IImporterService[]>(
-      IMPORTER_SERVICES_LIST(workspaceSlug as string),
+      IMPORTER_SERVICES_LIST(workspaceSlug),
       (prevData) => (prevData ?? []).filter((i) => i.id !== data.id),
       false
     );
 
     integrationService
-      .deleteImporterService(workspaceSlug as string, data.service, data.id)
+      .deleteImporterService(workspaceSlug, data.service, data.id)
       .catch(() =>
         setToast({
           type: TOAST_TYPE.ERROR,
@@ -66,85 +56,55 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data }
   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>
+    <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <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-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 import from{" "}
+            <span className="break-words font-semibold capitalize text-primary">{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-13 text-secondary">
+            To confirm, type <span className="font-medium text-primary">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="secondary" size="lg" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button
+            variant="error-fill"
+            size="lg"
+            tabIndex={1}
+            onClick={handleDeletion}
+            disabled={!confirmDeleteImport}
+            loading={deleteLoading}
+          >
+            {deleteLoading ? "Deleting..." : "Delete Project"}
+          </Button>
+        </div>
+      </div>
+    </ModalCore>
   );
-};
+}
diff --git a/apps/web/core/components/integration/github/auth.tsx b/apps/web/core/components/integration/github/auth.tsx
index 6706e6aa0c..60ed2e35fa 100644
--- a/apps/web/core/components/integration/github/auth.tsx
+++ b/apps/web/core/components/integration/github/auth.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // types
 import { Button } from "@plane/propel/button";
@@ -14,7 +12,7 @@ type Props = {
   provider: string | undefined;
 };
 
-export const GithubAuth: React.FC<Props> = observer(({ workspaceIntegration, provider }) => {
+export const GithubAuth = observer(function GithubAuth({ workspaceIntegration, provider }: Props) {
   // store hooks
   const { config } = useInstance();
   // hooks
diff --git a/apps/web/core/components/integration/github/import-configure.tsx b/apps/web/core/components/integration/github/import-configure.tsx
index 28a9e30bf2..edcc316c6e 100644
--- a/apps/web/core/components/integration/github/import-configure.tsx
+++ b/apps/web/core/components/integration/github/import-configure.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 // components
 import { Button } from "@plane/propel/button";
 import type { IAppIntegration, IWorkspaceIntegration } from "@plane/types";
@@ -14,12 +12,7 @@ type Props = {
   workspaceIntegrations: IWorkspaceIntegration[] | undefined;
 };
 
-export const GithubImportConfigure: React.FC<Props> = ({
-  handleStepChange,
-  provider,
-  appIntegrations,
-  workspaceIntegrations,
-}) => {
+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);
@@ -36,7 +29,7 @@ export const GithubImportConfigure: React.FC<Props> = ({
       <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 className="text-13 text-secondary">Set up your GitHub import.</div>
         </div>
         <div className="flex-shrink-0">
           <GithubAuth workspaceIntegration={workspaceIntegration} provider={provider} />
@@ -54,4 +47,4 @@ export const GithubImportConfigure: React.FC<Props> = ({
       </div>
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/integration/github/import-confirm.tsx b/apps/web/core/components/integration/github/import-confirm.tsx
index 7ee58f70aa..ba15e1a668 100644
--- a/apps/web/core/components/integration/github/import-confirm.tsx
+++ b/apps/web/core/components/integration/github/import-confirm.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 
 // react-hook-form
@@ -14,19 +12,21 @@ type Props = {
   watch: UseFormWatch<TFormValues>;
 };
 
-export const GithubImportConfirm: FC<Props> = ({ handleStepChange, watch }) => (
-  <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>
+export function GithubImportConfirm({ handleStepChange, watch }: Props) {
+  return (
+    <div className="mt-6">
+      <h4 className="font-medium text-secondary">
+        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="secondary" onClick={() => handleStepChange("import-users")}>
+          Back
+        </Button>
+        <Button variant="primary" type="submit">
+          Confirm & Import
+        </Button>
+      </div>
     </div>
-  </div>
-);
+  );
+}
diff --git a/apps/web/core/components/integration/github/import-data.tsx b/apps/web/core/components/integration/github/import-data.tsx
index a5f72f9ea5..83926e2d7f 100644
--- a/apps/web/core/components/integration/github/import-data.tsx
+++ b/apps/web/core/components/integration/github/import-data.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { observer } from "mobx-react";
 import type { Control, UseFormWatch } from "react-hook-form";
@@ -24,7 +22,7 @@ type Props = {
   watch: UseFormWatch<TFormValues>;
 };
 
-export const GithubImportData: FC<Props> = observer((props) => {
+export const GithubImportData = observer(function GithubImportData(props: Props) {
   const { handleStepChange, integration, control, watch } = props;
   // store hooks
   const { workspaceProjectIds, getProjectById } = useProject();
@@ -45,7 +43,7 @@ export const GithubImportData: FC<Props> = observer((props) => {
         <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">
+            <p className="text-11 text-secondary">
               Select the repository that you want the work items to be imported from.
             </p>
           </div>
@@ -58,9 +56,7 @@ export const GithubImportData: FC<Props> = observer((props) => {
                   <SelectRepository
                     integration={integration}
                     value={value ? value.id : null}
-                    label={
-                      value ? `${value.full_name}` : <span className="text-custom-text-200">Select Repository</span>
-                    }
+                    label={value ? `${value.full_name}` : <span className="text-secondary">Select Repository</span>}
                     onChange={onChange}
                     characterLimit={50}
                   />
@@ -72,7 +68,7 @@ export const GithubImportData: FC<Props> = observer((props) => {
         <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>
+            <p className="text-11 text-secondary">Select the project to import the work item to.</p>
           </div>
           <div className="col-span-12 sm:col-span-4">
             {workspaceProjectIds && (
@@ -82,9 +78,7 @@ export const GithubImportData: FC<Props> = observer((props) => {
                 render={({ field: { value, onChange } }) => (
                   <CustomSearchSelect
                     value={value}
-                    label={
-                      value ? getProjectById(value)?.name : <span className="text-custom-text-200">Select Project</span>
-                    }
+                    label={value ? getProjectById(value)?.name : <span className="text-secondary">Select Project</span>}
                     onChange={onChange}
                     options={options}
                     optionsClassName="w-48"
@@ -97,7 +91,7 @@ export const GithubImportData: FC<Props> = observer((props) => {
         <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>
+            <p className="text-11 text-secondary">Set whether you want to sync the work items or not.</p>
           </div>
           <div className="col-span-12 sm:col-span-4">
             <Controller
@@ -111,7 +105,7 @@ export const GithubImportData: FC<Props> = observer((props) => {
         </div>
       </div>
       <div className="mt-6 flex items-center justify-end gap-2">
-        <Button variant="neutral-primary" onClick={() => handleStepChange("import-configure")}>
+        <Button variant="secondary" onClick={() => handleStepChange("import-configure")}>
           Back
         </Button>
         <Button
diff --git a/apps/web/core/components/integration/github/import-users.tsx b/apps/web/core/components/integration/github/import-users.tsx
index 2057af739e..0e53aa3d75 100644
--- a/apps/web/core/components/integration/github/import-users.tsx
+++ b/apps/web/core/components/integration/github/import-users.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 
 // react-hook-form
@@ -17,15 +15,15 @@ type Props = {
   watch: UseFormWatch<TFormValues>;
 };
 
-export const GithubImportUsers: FC<Props> = ({ handleStepChange, users, setUsers, watch }) => {
+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="mb-2 grid grid-cols-3 gap-2 text-13 font-medium">
+          <div className="text-secondary">Name</div>
+          <div className="text-secondary">Import as...</div>
           <div className="text-right">{users.filter((u) => u.import !== false).length} users selected</div>
         </div>
         <div className="space-y-2">
@@ -41,7 +39,7 @@ export const GithubImportUsers: FC<Props> = ({ handleStepChange, users, setUsers
         </div>
       </div>
       <div className="mt-6 flex items-center justify-end gap-2">
-        <Button variant="neutral-primary" onClick={() => handleStepChange("repo-details")}>
+        <Button variant="secondary" onClick={() => handleStepChange("repo-details")}>
           Back
         </Button>
         <Button variant="primary" onClick={() => handleStepChange("import-confirm")} disabled={isInvalid}>
@@ -50,4 +48,4 @@ export const GithubImportUsers: FC<Props> = ({ handleStepChange, users, setUsers
       </div>
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/integration/github/repo-details.tsx b/apps/web/core/components/integration/github/repo-details.tsx
index 73ae1dae89..a04474075c 100644
--- a/apps/web/core/components/integration/github/repo-details.tsx
+++ b/apps/web/core/components/integration/github/repo-details.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useEffect } from "react";
 
@@ -28,14 +26,14 @@ type Props = {
 // services
 const githubIntegrationService = new GithubIntegrationService();
 
-export const GithubRepoDetails: FC<Props> = ({ selectedRepo, handleStepChange, setUsers, setValue }) => {
+export function GithubRepoDetails({ selectedRepo, handleStepChange, setUsers, setValue }: Props) {
   const { workspaceSlug } = useParams();
 
   const { data: repoInfo } = useSWR(
-    workspaceSlug && selectedRepo ? GITHUB_REPOSITORY_INFO(workspaceSlug as string, selectedRepo.name) : null,
+    workspaceSlug && selectedRepo ? GITHUB_REPOSITORY_INFO(workspaceSlug, selectedRepo.name) : null,
     workspaceSlug && selectedRepo
       ? () =>
-          githubIntegrationService.getGithubRepoInfo(workspaceSlug as string, {
+          githubIntegrationService.getGithubRepoInfo(workspaceSlug, {
             owner: selectedRepo.owner.login,
             repo: selectedRepo.name,
           })
@@ -62,20 +60,20 @@ export const GithubRepoDetails: FC<Props> = ({ selectedRepo, handleStepChange, s
           <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 className="text-13 text-secondary">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>
+                <p className="text-24 font-bold">{repoInfo.issue_count}</p>
+                <h6 className="text-13 text-secondary">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>
+                <p className="text-24 font-bold">{repoInfo.labels}</p>
+                <h6 className="text-13 text-secondary">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>
+                <p className="text-24 font-bold">{repoInfo.collaborators.length}</p>
+                <h6 className="text-13 text-secondary">Users</h6>
               </div>
             </div>
           </div>
@@ -90,7 +88,7 @@ export const GithubRepoDetails: FC<Props> = ({ selectedRepo, handleStepChange, s
         </Loader>
       )}
       <div className="mt-6 flex items-center justify-end gap-2">
-        <Button variant="neutral-primary" onClick={() => handleStepChange("import-data")}>
+        <Button variant="secondary" onClick={() => handleStepChange("import-data")}>
           Back
         </Button>
         <Button
@@ -103,4 +101,4 @@ export const GithubRepoDetails: FC<Props> = ({ selectedRepo, handleStepChange, s
       </div>
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/integration/github/root.tsx b/apps/web/core/components/integration/github/root.tsx
index fdb1cfd434..40a25416ef 100644
--- a/apps/web/core/components/integration/github/root.tsx
+++ b/apps/web/core/components/integration/github/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import Link from "next/link";
 import { useParams, useSearchParams } from "next/navigation";
@@ -80,7 +78,7 @@ const integrationWorkflowData = [
 const integrationService = new IntegrationService();
 const githubIntegrationService = new GithubIntegrationService();
 
-export const GithubImporterRoot: React.FC = () => {
+export function GithubImporterRoot() {
   const [currentStep, setCurrentStep] = useState<IIntegrationData>({
     state: "import-configure",
   });
@@ -98,8 +96,8 @@ export const GithubImporterRoot: React.FC = () => {
   const { data: appIntegrations } = useSWR(APP_INTEGRATIONS, () => integrationService.getAppIntegrationsList());
 
   const { data: workspaceIntegrations } = useSWR(
-    workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug as string) : null,
-    workspaceSlug ? () => integrationService.getWorkspaceIntegrationsList(workspaceSlug as string) : null
+    workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug) : null,
+    workspaceSlug ? () => integrationService.getWorkspaceIntegrationsList(workspaceSlug) : null
   );
 
   const activeIntegrationState = () => {
@@ -140,10 +138,10 @@ export const GithubImporterRoot: React.FC = () => {
     };
 
     await githubIntegrationService
-      .createGithubServiceImport(workspaceSlug as string, payload)
+      .createGithubServiceImport(workspaceSlug, payload)
       .then(() => {
         router.push(`/${workspaceSlug}/settings/imports`);
-        mutate(IMPORTER_SERVICES_LIST(workspaceSlug as string));
+        mutate(IMPORTER_SERVICES_LIST(workspaceSlug));
       })
       .catch(() =>
         setToast({
@@ -158,13 +156,13 @@ export const GithubImporterRoot: React.FC = () => {
     <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">
+          <span className="inline-flex cursor-pointer items-center gap-2 text-13 font-medium text-secondary hover:text-primary">
             <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="space-y-4 rounded-[10px] border border-subtle bg-surface-1 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" />
@@ -175,23 +173,23 @@ export const GithubImporterRoot: React.FC = () => {
                   <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 ${
+                        ? `border-accent-strong bg-accent-primary ${
                             index === activeIntegrationState()
                               ? "border-opacity-100 bg-opacity-100"
                               : "border-opacity-80 bg-opacity-80"
                           }`
-                        : "border-custom-border-200"
+                        : "border-subtle"
                     }`}
                   >
                     <integration.icon
-                      className={`h-5 w-5 ${index <= activeIntegrationState() ? "text-white" : "text-custom-text-400"}`}
+                      className={`h-5 w-5 ${index <= activeIntegrationState() ? "text-on-color" : "text-placeholder"}`}
                     />
                   </div>
                   {index < integrationWorkflowData.length - 1 && (
                     <div
                       key={index}
                       className={`border-b px-7 ${
-                        index <= activeIntegrationState() - 1 ? `border-custom-primary` : `border-custom-border-200`
+                        index <= activeIntegrationState() - 1 ? `border-accent-strong` : `border-subtle`
                       }`}
                     >
                       {" "}
@@ -245,4 +243,4 @@ export const GithubImporterRoot: React.FC = () => {
       </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 45f21fc8e5..6a9ff58077 100644
--- a/apps/web/core/components/integration/github/select-repository.tsx
+++ b/apps/web/core/components/integration/github/select-repository.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { useParams } from "next/navigation";
 import useSWRInfinite from "swr/infinite";
@@ -22,7 +20,7 @@ type Props = {
 
 const projectService = new ProjectService();
 
-export const SelectRepository: React.FC<Props> = (props) => {
+export function SelectRepository(props: Props) {
   const { integration, value, label, onChange, characterLimit = 25 } = props;
   // router
   const { workspaceSlug } = useParams();
@@ -72,7 +70,7 @@ export const SelectRepository: React.FC<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}
             >
@@ -84,4 +82,4 @@ export const SelectRepository: React.FC<Props> = (props) => {
       optionsClassName="w-48"
     />
   );
-};
+}
diff --git a/apps/web/core/components/integration/github/single-user-select.tsx b/apps/web/core/components/integration/github/single-user-select.tsx
index 04212ccdd4..09b417f5e3 100644
--- a/apps/web/core/components/integration/github/single-user-select.tsx
+++ b/apps/web/core/components/integration/github/single-user-select.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // plane types
@@ -40,7 +38,7 @@ const importOptions = [
 // services
 const workspaceService = new WorkspaceService();
 
-export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users, setUsers }) => {
+export function SingleUserSelect({ collaborator, index, users, setUsers }: Props) {
   const { workspaceSlug } = useParams();
 
   const { data: members } = useSWR(
@@ -71,21 +69,21 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
     | undefined;
 
   return (
-    <div className="grid grid-cols-3 items-center gap-2 rounded-md bg-custom-background-80 px-2 py-3">
+    <div className="grid grid-cols-3 items-center gap-2 rounded-md bg-layer-1 px-2 py-3">
       <div className="flex items-center gap-2">
-        <div className="relative h-8 w-8 flex-shrink-0 rounded">
+        <div className="relative h-8 w-8 flex-shrink-0 rounded-sm">
           <img
             src={collaborator.avatar_url}
-            className="absolute left-0 top-0 h-full w-full rounded object-cover"
+            className="absolute left-0 top-0 h-full w-full rounded-sm object-cover"
             alt={`${collaborator.login} GitHub user`}
           />
         </div>
-        <p className="text-sm">{collaborator.login}</p>
+        <p className="text-13">{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>}
+          label={<div className="text-11">{importOptions.find((o) => o.key === users[index].import)?.label}</div>}
           onChange={(val: any) => {
             const newUsers = [...users];
             newUsers[index].import = val;
@@ -113,7 +111,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
             setUsers(newUsers);
           }}
           placeholder="Enter email of the user"
-          className="w-full py-1 text-xs"
+          className="w-full py-1 text-11"
         />
       )}
       {users[index].import === "map" && members && (
@@ -131,4 +129,4 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
       )}
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/integration/guide.tsx b/apps/web/core/components/integration/guide.tsx
index 13a2c7ac5d..eac78513f6 100644
--- a/apps/web/core/components/integration/guide.tsx
+++ b/apps/web/core/components/integration/guide.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -41,7 +39,7 @@ const getImporterLogo = (provider: string) => {
 };
 
 // FIXME: [Deprecated] Remove this component
-const IntegrationGuide = observer(() => {
+const IntegrationGuide = observer(function IntegrationGuide() {
   // states
   const [refreshing, setRefreshing] = useState(false);
   const [deleteImportModal, setDeleteImportModal] = useState(false);
@@ -56,8 +54,8 @@ const IntegrationGuide = observer(() => {
   const { t } = useTranslation();
 
   const { data: importerServices } = useSWR(
-    workspaceSlug ? IMPORTER_SERVICES_LIST(workspaceSlug as string) : null,
-    workspaceSlug ? () => integrationService.getImporterServicesList(workspaceSlug as string) : null
+    workspaceSlug ? IMPORTER_SERVICES_LIST(workspaceSlug) : null,
+    workspaceSlug ? () => integrationService.getImporterServicesList(workspaceSlug) : null
   );
 
   const handleDeleteImport = (importService: IImporterService) => {
@@ -78,8 +76,8 @@ const IntegrationGuide = observer(() => {
           <>
             {/* <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">
+                <div className="text-16 font-medium">Relocation Guide</div>
+                <div className="text-13">
                   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>
@@ -89,7 +87,7 @@ const IntegrationGuide = observer(() => {
                 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">
+                <div className="flex flex-shrink-0 cursor-pointer items-center gap-2 whitespace-nowrap text-13 font-medium text-[#3F76FF] hover:text-opacity-80">
                   Read More
                   <ArrowRightIcon width={"18px"} color={"#3F76FF"} />
                 </div>
@@ -98,7 +96,7 @@ const IntegrationGuide = observer(() => {
             {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"
+                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="relative h-10 w-10 flex-shrink-0">
@@ -109,8 +107,8 @@ const IntegrationGuide = observer(() => {
                     />
                   </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>
+                    <h3 className="flex items-center gap-4 text-13 font-medium">{t(service.i18n_title)}</h3>
+                    <p className="text-13 tracking-tight text-secondary">{t(service.i18n_description)}</p>
                   </div>
                 </div>
                 <div className="flex-shrink-0">
@@ -123,15 +121,15 @@ const IntegrationGuide = observer(() => {
               </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">
+              <div className="flex items-center border-b border-subtle pb-3.5 pt-7">
+                <h3 className="flex gap-2 text-18 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"
+                    className="flex flex-shrink-0 items-center gap-1 rounded-sm bg-layer-1 px-1.5 py-1 text-11 outline-none"
                     onClick={() => {
                       setRefreshing(true);
-                      mutate(IMPORTER_SERVICES_LIST(workspaceSlug as string)).then(() => setRefreshing(false));
+                      mutate(IMPORTER_SERVICES_LIST(workspaceSlug)).then(() => setRefreshing(false));
                     }}
                   >
                     <RefreshCw className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />{" "}
@@ -143,7 +141,7 @@ const IntegrationGuide = observer(() => {
                 {importerServices ? (
                   importerServices.length > 0 ? (
                     <div className="space-y-2">
-                      <div className="divide-y divide-custom-border-200">
+                      <div className="divide-y divide-subtle-1">
                         {importerServices.map((service) => (
                           <SingleImport
                             key={service.id}
@@ -175,3 +173,5 @@ const IntegrationGuide = observer(() => {
 });
 
 export default IntegrationGuide;
+
+export { IntegrationGuide };
diff --git a/apps/web/core/components/integration/jira/confirm-import.tsx b/apps/web/core/components/integration/jira/confirm-import.tsx
index a2f493db0e..15cc0da26b 100644
--- a/apps/web/core/components/integration/jira/confirm-import.tsx
+++ b/apps/web/core/components/integration/jira/confirm-import.tsx
@@ -6,42 +6,42 @@ import type { IJiraImporterForm } from "@plane/types";
 
 // types
 
-export const JiraConfirmImport: React.FC = () => {
+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>
+          <h3 className="text-16 font-semibold">Confirm</h3>
         </div>
 
         <div className="col-span-1">
-          <p className="text-sm text-custom-text-200">Migrating</p>
+          <p className="text-13 text-secondary">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>
+            <h4 className="mb-2 text-16 font-semibold">{watch("data.total_issues")}</h4>
+            <p className="text-13 text-secondary">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>
+            <h4 className="mb-2 text-16 font-semibold">{watch("data.total_states")}</h4>
+            <p className="text-13 text-secondary">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>
+            <h4 className="mb-2 text-16 font-semibold">{watch("data.total_modules")}</h4>
+            <p className="text-13 text-secondary">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>
+            <h4 className="mb-2 text-16 font-semibold">{watch("data.total_labels")}</h4>
+            <p className="text-13 text-secondary">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>
+            <h4 className="mb-2 text-16 font-semibold">{watch("data.users").filter((user) => user.import).length}</h4>
+            <p className="text-13 text-secondary">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
index 5067dc816e..5b6824711c 100644
--- a/apps/web/core/components/integration/jira/give-details.tsx
+++ b/apps/web/core/components/integration/jira/give-details.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -17,7 +15,7 @@ import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useProject } from "@/hooks/store/use-project";
 // types
 
-export const JiraGetImportDetail: React.FC = observer(() => {
+export const JiraGetImportDetail = observer(function JiraGetImportDetail() {
   // store hooks
   const { toggleCreateProjectModal } = useCommandPalette();
   const { workspaceProjectIds, getProjectById } = useProject();
@@ -32,10 +30,10 @@ export const JiraGetImportDetail: React.FC = observer(() => {
       <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">
+          <p className="text-13 text-secondary">
             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>
+              <span className="text-accent-primary underline">Atlassian Settings</span>
             </Link>
           </p>
         </div>
@@ -61,14 +59,13 @@ export const JiraGetImportDetail: React.FC = observer(() => {
               />
             )}
           />
-          {errors.metadata?.api_token && <p className="text-xs text-red-500">{errors.metadata.api_token.message}</p>}
+          {errors.metadata?.api_token && <p className="text-11 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>
+          <p className="text-13 text-secondary">If XXX-123 is your work item, then enter XXX</p>
         </div>
         <div className="col-span-1">
           <Controller
@@ -91,15 +88,14 @@ export const JiraGetImportDetail: React.FC = observer(() => {
             )}
           />
           {errors.metadata?.project_key && (
-            <p className="text-xs text-red-500">{errors.metadata.project_key.message}</p>
+            <p className="text-11 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>
+          <p className="text-13 text-secondary">Enter the Email account that you use in Jira account</p>
         </div>
         <div className="col-span-1">
           <Controller
@@ -122,14 +118,13 @@ export const JiraGetImportDetail: React.FC = observer(() => {
               />
             )}
           />
-          {errors.metadata?.email && <p className="text-xs text-red-500">{errors.metadata.email.message}</p>}
+          {errors.metadata?.email && <p className="text-11 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>
+          <p className="text-13 text-secondary">Enter your companies cloud host name</p>
         </div>
         <div className="col-span-1">
           <Controller
@@ -152,15 +147,14 @@ export const JiraGetImportDetail: React.FC = observer(() => {
             )}
           />
           {errors.metadata?.cloud_hostname && (
-            <p className="text-xs text-red-500">{errors.metadata.cloud_hostname.message}</p>
+            <p className="text-11 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>
+          <p className="text-13 text-secondary">Select which project you want to import to.</p>
         </div>
         <div className="col-span-1">
           <Controller
@@ -177,7 +171,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
                     {value && value.trim() !== "" ? (
                       getProjectById(value)?.name
                     ) : (
-                      <span className="text-custom-text-200">Select a project</span>
+                      <span className="text-secondary">Select a project</span>
                     )}
                   </span>
                 }
@@ -195,7 +189,7 @@ export const JiraGetImportDetail: React.FC = observer(() => {
                     );
                   })
                 ) : (
-                  <div className="flex cursor-pointer select-none items-center space-x-2 truncate rounded px-1 py-1.5 text-custom-text-200">
+                  <div className="flex cursor-pointer select-none items-center space-x-2 truncate rounded-sm px-1 py-1.5 text-secondary">
                     <p>You don{"'"}t have any project. Please create a project first.</p>
                   </div>
                 )}
@@ -207,9 +201,9 @@ export const JiraGetImportDetail: React.FC = observer(() => {
                       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"
+                    className="flex cursor-pointer select-none items-center space-x-2 truncate rounded-sm px-1 py-1.5 text-secondary"
                   >
-                    <Plus className="h-4 w-4 text-custom-text-200" />
+                    <Plus className="h-4 w-4 text-secondary" />
                     <span>Create new project</span>
                   </button>
                 </div>
diff --git a/apps/web/core/components/integration/jira/import-users.tsx b/apps/web/core/components/integration/jira/import-users.tsx
index f9c543646b..9f64f53496 100644
--- a/apps/web/core/components/integration/jira/import-users.tsx
+++ b/apps/web/core/components/integration/jira/import-users.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useParams } from "next/navigation";
 import { useFormContext, useFieldArray, Controller } from "react-hook-form";
@@ -17,7 +15,7 @@ import { WorkspaceService } from "@/plane-web/services";
 
 const workspaceService = new WorkspaceService();
 
-export const JiraImportUsers: FC = () => {
+export function JiraImportUsers() {
   const { workspaceSlug } = useParams();
   // form info
   const {
@@ -59,11 +57,11 @@ export const JiraImportUsers: FC = () => {
     | undefined;
 
   return (
-    <div className="h-full w-full space-y-10 divide-y-2 divide-custom-border-200 overflow-y-auto">
+    <div className="h-full w-full space-y-10 divide-y-2 divide-subtle-1 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>
+          <p className="text-13 text-secondary">Update, invite or choose not to invite assignee</p>
         </div>
         <div className="col-span-1">
           <Controller
@@ -77,8 +75,8 @@ export const JiraImportUsers: FC = () => {
       {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 className="col-span-1 text-13 text-secondary">Name</div>
+            <div className="col-span-1 text-13 text-secondary">Import as</div>
           </div>
 
           <div className="mt-5 space-y-3">
@@ -96,7 +94,7 @@ export const JiraImportUsers: FC = () => {
                         input
                         value={value}
                         onChange={onChange}
-                        label={<span className="capitalize">{Boolean(value) ? value : ("Ignore" as any)}</span>}
+                        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>
@@ -151,4 +149,4 @@ export const JiraImportUsers: FC = () => {
       )}
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/integration/jira/jira-project-detail.tsx b/apps/web/core/components/integration/jira/jira-project-detail.tsx
index 56384276f1..2fc79180b3 100644
--- a/apps/web/core/components/integration/jira/jira-project-detail.tsx
+++ b/apps/web/core/components/integration/jira/jira-project-detail.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useEffect } from "react";
 
 // next
@@ -31,7 +29,7 @@ type Props = {
 // services
 const jiraImporterService = new JiraImporterService();
 
-export const JiraProjectDetail: React.FC<Props> = (props) => {
+export function JiraProjectDetail(props: Props) {
   const { setCurrentStep, setDisableTopBarAfter } = props;
 
   const {
@@ -105,12 +103,12 @@ export const JiraProjectDetail: React.FC<Props> = (props) => {
   if (error) {
     return (
       <div className="flex h-full w-full items-center justify-center">
-        <p className="text-sm text-custom-text-200">
+        <p className="text-13 text-secondary">
           Something went wrong. Please{" "}
           <button
             onClick={() => setCurrentStep({ state: "import-configure" })}
             type="button"
-            className="inline text-custom-primary underline"
+            className="inline text-accent-primary underline"
           >
             go back
           </button>{" "}
@@ -125,28 +123,28 @@ export const JiraProjectDetail: React.FC<Props> = (props) => {
       <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>
+          <p className="text-13 text-secondary">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>
+            <h4 className="mb-2 text-16 font-semibold">{projectInfo?.issues}</h4>
+            <p className="text-13 text-secondary">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>
+            <h4 className="mb-2 text-16 font-semibold">{projectInfo?.states}</h4>
+            <p className="text-13 text-secondary">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>
+            <h4 className="mb-2 text-16 font-semibold">{projectInfo?.modules}</h4>
+            <p className="text-13 text-secondary">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>
+            <h4 className="mb-2 text-16 font-semibold">{projectInfo?.labels}</h4>
+            <p className="text-13 text-secondary">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>
+            <h4 className="mb-2 text-16 font-semibold">{projectInfo?.users?.length}</h4>
+            <p className="text-13 text-secondary">Users</p>
           </div>
         </div>
       </div>
@@ -154,7 +152,7 @@ export const JiraProjectDetail: React.FC<Props> = (props) => {
       <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>
+          <p className="text-13 text-secondary">Import epics as modules</p>
         </div>
         <div className="col-span-1">
           <Controller
@@ -166,4 +164,4 @@ export const JiraProjectDetail: React.FC<Props> = (props) => {
       </div>
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/integration/jira/root.tsx b/apps/web/core/components/integration/jira/root.tsx
index 01b17b2e36..d506ae0ea0 100644
--- a/apps/web/core/components/integration/jira/root.tsx
+++ b/apps/web/core/components/integration/jira/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
@@ -53,7 +51,7 @@ const integrationWorkflowData: Array<{
 // services
 const jiraImporterService = new JiraImporterService();
 
-export const JiraImporterRoot: React.FC = () => {
+export function JiraImporterRoot() {
   const [currentStep, setCurrentStep] = useState<IJiraIntegrationData>({
     state: "import-configure",
   });
@@ -93,7 +91,7 @@ export const JiraImporterRoot: React.FC = () => {
   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">
+        <span className="inline-flex cursor-pointer items-center gap-2 text-13 font-medium text-secondary hover:text-primary">
           <div>
             <ArrowLeft className="h-3 w-3" />
           </div>
@@ -101,7 +99,7 @@ export const JiraImporterRoot: React.FC = () => {
         </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 h-full flex-col space-y-4 rounded-[10px] border border-subtle bg-surface-1 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" />
@@ -118,25 +116,25 @@ export const JiraImporterRoot: React.FC = () => {
                     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 ${
+                  className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border border-subtle ${
                     index <= activeIntegrationState()
-                      ? `border-custom-primary bg-custom-primary ${
+                      ? `border-accent-strong bg-accent-primary ${
                           index === activeIntegrationState()
                             ? "border-opacity-100 bg-opacity-100"
                             : "border-opacity-80 bg-opacity-80"
                         }`
-                      : "border-custom-border-200"
+                      : "border-subtle"
                   }`}
                 >
                   <integration.icon
-                    className={`h-5 w-5 ${index <= activeIntegrationState() ? "text-white" : "text-custom-text-400"}`}
+                    className={`h-5 w-5 ${index <= activeIntegrationState() ? "text-on-color" : "text-placeholder"}`}
                   />
                 </button>
                 {index < integrationWorkflowData.length - 1 && (
                   <div
                     key={index}
                     className={`border-b px-7 ${
-                      index <= activeIntegrationState() - 1 ? `border-custom-primary` : `border-custom-border-200`
+                      index <= activeIntegrationState() - 1 ? `border-accent-strong` : `border-subtle`
                     }`}
                   >
                     {" "}
@@ -159,10 +157,10 @@ export const JiraImporterRoot: React.FC = () => {
                 {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">
+              <div className="-mx-4 mt-4 flex justify-end gap-4 border-t border-subtle p-4 pb-0">
                 {currentStep?.state !== "import-configure" && (
                   <Button
-                    variant="neutral-primary"
+                    variant="secondary"
                     onClick={() => {
                       const currentElementIndex = integrationWorkflowData.findIndex(
                         (i) => i?.key === currentStep?.state
@@ -199,4 +197,4 @@ export const JiraImporterRoot: React.FC = () => {
       </div>
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/integration/single-import.tsx b/apps/web/core/components/integration/single-import.tsx
index ae8c6b01b2..ec9e10418a 100644
--- a/apps/web/core/components/integration/single-import.tsx
+++ b/apps/web/core/components/integration/single-import.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { Trash2 } from "lucide-react";
 // plane imports
@@ -20,14 +18,14 @@ type Props = {
   handleDelete: () => void;
 };
 
-export const SingleImport: React.FC<Props> = observer(({ service, refreshing, handleDelete }) => {
+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">
+        <h4 className="flex items-center gap-2 text-13">
           {importer && (
             <span>
               Import from <span className="font-medium">{t(importer.i18n_title)}</span> to{" "}
@@ -35,7 +33,7 @@ export const SingleImport: React.FC<Props> = observer(({ service, refreshing, ha
           )}
           <span className="font-medium">{service.project_detail.name}</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"
                 : service.status === "processing"
@@ -48,7 +46,7 @@ export const SingleImport: React.FC<Props> = observer(({ service, refreshing, ha
             {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>Imported by {service.initiated_by_detail?.display_name}</span>
         </div>
diff --git a/apps/web/core/components/integration/single-integration-card.tsx b/apps/web/core/components/integration/single-integration-card.tsx
index b72849b4fc..4834217dc8 100644
--- a/apps/web/core/components/integration/single-integration-card.tsx
+++ b/apps/web/core/components/integration/single-integration-card.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -45,7 +43,7 @@ const integrationDetails: { [key: string]: any } = {
 // services
 const integrationService = new IntegrationService();
 
-export const SingleIntegrationCard: React.FC<Props> = observer(({ integration }) => {
+export const SingleIntegrationCard = observer(function SingleIntegrationCard({ integration }: Props) {
   // states
   const [deletingIntegration, setDeletingIntegration] = useState(false);
   // router
@@ -62,9 +60,8 @@ export const SingleIntegrationCard: React.FC<Props> = observer(({ integration })
     slack_client_id: config?.slack_client_id || "",
   });
 
-  const { data: workspaceIntegrations } = useSWR(
-    workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug as string) : null,
-    () => (workspaceSlug ? integrationService.getWorkspaceIntegrationsList(workspaceSlug as string) : null)
+  const { data: workspaceIntegrations } = useSWR(workspaceSlug ? WORKSPACE_INTEGRATIONS(workspaceSlug) : null, () =>
+    workspaceSlug ? integrationService.getWorkspaceIntegrationsList(workspaceSlug) : null
   );
 
   const handleRemoveIntegration = async () => {
@@ -75,10 +72,10 @@ export const SingleIntegrationCard: React.FC<Props> = observer(({ integration })
     setDeletingIntegration(true);
 
     await integrationService
-      .deleteWorkspaceIntegration(workspaceSlug as string, workspaceIntegrationId ?? "")
+      .deleteWorkspaceIntegration(workspaceSlug, workspaceIntegrationId ?? "")
       .then(() => {
         mutate<IWorkspaceIntegration[]>(
-          WORKSPACE_INTEGRATIONS(workspaceSlug as string),
+          WORKSPACE_INTEGRATIONS(workspaceSlug),
           (prevData) => prevData?.filter((i) => i.id !== workspaceIntegrationId),
           false
         );
@@ -104,7 +101,7 @@ export const SingleIntegrationCard: React.FC<Props> = observer(({ integration })
   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
@@ -114,13 +111,13 @@ export const SingleIntegrationCard: React.FC<Props> = observer(({ integration })
           />
         </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" />
               : 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
@@ -139,7 +136,7 @@ export const SingleIntegrationCard: React.FC<Props> = observer(({ integration })
           >
             <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/select-channel.tsx b/apps/web/core/components/integration/slack/select-channel.tsx
index fb51f4a1bc..827b8d438b 100644
--- a/apps/web/core/components/integration/slack/select-channel.tsx
+++ b/apps/web/core/components/integration/slack/select-channel.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState, useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -22,7 +20,7 @@ type Props = {
 
 const appInstallationService = new AppInstallationService();
 
-export const SelectChannel: React.FC<Props> = observer(({ integration }) => {
+export const SelectChannel = observer(function SelectChannel({ integration }: Props) {
   // store hooks
   const { config } = useInstance();
   // states
@@ -40,16 +38,10 @@ export const SelectChannel: React.FC<Props> = observer(({ integration }) => {
   });
 
   const { data: projectIntegration } = useSWR(
-    workspaceSlug && projectId && integration.id
-      ? SLACK_CHANNEL_INFO(workspaceSlug as string, projectId as string)
-      : null,
+    workspaceSlug && projectId && integration.id ? SLACK_CHANNEL_INFO(workspaceSlug, projectId) : null,
     () =>
       workspaceSlug && projectId && integration.id
-        ? appInstallationService.getSlackChannelDetail(
-            workspaceSlug as string,
-            projectId as string,
-            integration.id as string
-          )
+        ? appInstallationService.getSlackChannelDetail(workspaceSlug, projectId, integration.id)
         : null
   );
 
@@ -76,7 +68,7 @@ export const SelectChannel: React.FC<Props> = observer(({ integration }) => {
       setSlackChannel(null);
     });
     appInstallationService
-      .removeSlackChannel(workspaceSlug as string, projectId as string, integration.id as string, slackChannel?.id)
+      .removeSlackChannel(workspaceSlug, projectId, integration.id, slackChannel?.id)
       .catch((err) => console.error(err));
   };
 
diff --git a/apps/web/core/components/issues/archive-issue-modal.tsx b/apps/web/core/components/issues/archive-issue-modal.tsx
index 98204aa188..f54518406e 100644
--- a/apps/web/core/components/issues/archive-issue-modal.tsx
+++ b/apps/web/core/components/issues/archive-issue-modal.tsx
@@ -1,13 +1,11 @@
-"use client";
-
-import { useState, Fragment } from "react";
-import { Dialog, Transition } from "@headlessui/react";
+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";
@@ -20,7 +18,7 @@ type Props = {
   onSubmit?: () => Promise<void>;
 };
 
-export const ArchiveIssueModal: React.FC<Props> = (props) => {
+export function ArchiveIssueModal(props: Props) {
   const { dataId, data, isOpen, handleClose, onSubmit } = props;
   const { t } = useTranslation();
   // states
@@ -51,6 +49,7 @@ export const ArchiveIssueModal: React.FC<Props> = (props) => {
           message: t("issue.archive.success.message"),
         });
         onClose();
+        return;
       })
       .catch(() =>
         setToast({
@@ -63,51 +62,21 @@ export const ArchiveIssueModal: React.FC<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 3241305730..e6db994441 100644
--- a/apps/web/core/components/issues/archived-issues-header.tsx
+++ b/apps/web/core/components/issues/archived-issues-header.tsx
@@ -15,7 +15,7 @@ import { WorkItemFiltersToggle } from "@/components/work-item-filters/filters-to
 import { useIssues } from "@/hooks/store/use-issues";
 import { useProject } from "@/hooks/store/use-project";
 
-export const ArchivedIssuesHeader: FC = observer(() => {
+export const ArchivedIssuesHeader = observer(function ArchivedIssuesHeader() {
   // router
   const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } = useParams();
   const workspaceSlug = routerWorkspaceSlug ? routerWorkspaceSlug.toString() : undefined;
diff --git a/apps/web/core/components/issues/attachment/attachment-detail.tsx b/apps/web/core/components/issues/attachment/attachment-detail.tsx
index f7ca525bf2..235832413b 100644
--- a/apps/web/core/components/issues/attachment/attachment-detail.tsx
+++ b/apps/web/core/components/issues/attachment/attachment-detail.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
@@ -37,7 +35,7 @@ type TIssueAttachmentsDetail = {
   disabled?: boolean;
 };
 
-export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = observer((props) => {
+export const IssueAttachmentsDetail = observer(function IssueAttachmentsDetail(props: TIssueAttachmentsDetail) {
   // props
   const { attachmentId, attachmentHelpers, disabled } = props;
   // store hooks
@@ -68,14 +66,14 @@ export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = observer((pro
           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}
@@ -89,7 +87,7 @@ export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = observer((pro
                 </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>
@@ -99,7 +97,7 @@ export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = observer((pro
 
         {!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 25da163887..c9754d2cd2 100644
--- a/apps/web/core/components/issues/attachment/attachment-item-list.tsx
+++ b/apps/web/core/components/issues/attachment/attachment-item-list.tsx
@@ -29,7 +29,7 @@ type TIssueAttachmentItemList = {
   issueServiceType?: TIssueServiceType;
 };
 
-export const IssueAttachmentItemList: FC<TIssueAttachmentItemList> = observer((props) => {
+export const IssueAttachmentItemList = observer(function IssueAttachmentItemList(props: TIssueAttachmentItemList) {
   const {
     workspaceSlug,
     projectId,
@@ -127,11 +127,11 @@ export const IssueAttachmentItemList: FC<TIssueAttachmentItemList> = observer((p
           >
             <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 flex items-center justify-center left-0 top-0 h-full w-full bg-surface-2/75 z-30 ">
+                <div className="flex items-center justify-center p-1 rounded-md bg-surface-1">
+                  <div className="flex flex-col justify-center items-center px-5 py-6 rounded-md border border-dashed border-strong">
                     <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 d4610ff0ab..4c7071a64f 100644
--- a/apps/web/core/components/issues/attachment/attachment-list-item.tsx
+++ b/apps/web/core/components/issues/attachment/attachment-list-item.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { observer } from "mobx-react";
 import { Trash } from "lucide-react";
@@ -26,7 +24,7 @@ type TIssueAttachmentsListItem = {
   issueServiceType?: TIssueServiceType;
 };
 
-export const IssueAttachmentsListItem: FC<TIssueAttachmentsListItem> = observer((props) => {
+export const IssueAttachmentsListItem = observer(function IssueAttachmentsListItem(props: TIssueAttachmentsListItem) {
   const { t } = useTranslation();
   // props
   const { attachmentId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
@@ -56,14 +54,14 @@ export const IssueAttachmentsListItem: FC<TIssueAttachmentsListItem> = observer(
           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 items-center justify-between gap-3 h-11 hover:bg-surface-2 pl-9 pr-2">
+          <div className="flex items-center gap-3 text-13 truncate">
             <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="text-secondary font-medium truncate">{`${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 bg-layer-1 rounded-full" />
+            <span className="flex-shrink-0 text-placeholder">{convertBytesToSize(attachment.attributes.size)}</span>
           </div>
 
           <div className="flex items-center gap-3">
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 af7b092e1c..06743cdf06 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // ui
 import { Tooltip } from "@plane/propel/tooltip";
@@ -17,7 +15,7 @@ type Props = {
   uploadStatus: TAttachmentUploadStatus;
 };
 
-export const IssueAttachmentsUploadItem: React.FC<Props> = observer((props) => {
+export const IssueAttachmentsUploadItem = observer(function IssueAttachmentsUploadItem(props: Props) {
   // props
   const { uploadStatus } = props;
   // derived values
@@ -28,18 +26,18 @@ export const IssueAttachmentsUploadItem: React.FC<Props> = observer((props) => {
   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="flex items-center justify-between gap-3 h-11 bg-surface-2 pl-9 pr-2 pointer-events-none">
+      <div className="flex items-center gap-3 text-13 truncate">
         <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="text-secondary font-medium truncate">{fileName}</p>
         </Tooltip>
       </div>
       <div className="flex-shrink-0 flex 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 adee717372..b70b28f1cb 100644
--- a/apps/web/core/components/issues/attachment/attachment-upload-details.tsx
+++ b/apps/web/core/components/issues/attachment/attachment-upload-details.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { Tooltip } from "@plane/propel/tooltip";
 import { CircularProgressIndicator } from "@plane/ui";
@@ -17,7 +15,7 @@ type Props = {
   uploadStatus: TAttachmentUploadStatus;
 };
 
-export const IssueAttachmentsUploadDetails: React.FC<Props> = observer((props) => {
+export const IssueAttachmentsUploadDetails = observer(function IssueAttachmentsUploadDetails(props: Props) {
   // props
   const { uploadStatus } = props;
   // derived values
@@ -28,17 +26,17 @@ export const IssueAttachmentsUploadDetails: React.FC<Props> = observer((props) =
   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 h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-subtle bg-surface-2 px-4 py-2 text-13 pointer-events-none">
       <div className="flex-shrink-0 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>
           </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>
@@ -47,7 +45,7 @@ export const IssueAttachmentsUploadDetails: React.FC<Props> = observer((props) =
         <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 959a07d5dd..59af790db5 100644
--- a/apps/web/core/components/issues/attachment/attachment-upload.tsx
+++ b/apps/web/core/components/issues/attachment/attachment-upload.tsx
@@ -14,7 +14,7 @@ type Props = {
   attachmentOperations: TAttachmentOperationsModal;
 };
 
-export const IssueAttachmentUpload: React.FC<Props> = observer((props) => {
+export const IssueAttachmentUpload = observer(function IssueAttachmentUpload(props: Props) {
   const { workspaceSlug, disabled = false, attachmentOperations } = props;
   // states
   const [isLoading, setIsLoading] = useState(false);
@@ -45,8 +45,8 @@ export const IssueAttachmentUpload: React.FC<Props> = observer((props) => {
   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"
+      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-red-100" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`}
     >
       <input {...getInputProps()} />
diff --git a/apps/web/core/components/issues/attachment/attachments-list.tsx b/apps/web/core/components/issues/attachment/attachments-list.tsx
index 3ce00e0e11..6cd0636bad 100644
--- a/apps/web/core/components/issues/attachment/attachments-list.tsx
+++ b/apps/web/core/components/issues/attachment/attachments-list.tsx
@@ -14,7 +14,7 @@ type TIssueAttachmentsList = {
   disabled?: boolean;
 };
 
-export const IssueAttachmentsList: FC<TIssueAttachmentsList> = observer((props) => {
+export const IssueAttachmentsList = observer(function IssueAttachmentsList(props: TIssueAttachmentsList) {
   const { issueId, attachmentHelpers, disabled } = props;
   // store hooks
   const {
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 4eb79fc391..5ea7225d9d 100644
--- a/apps/web/core/components/issues/attachment/delete-attachment-modal.tsx
+++ b/apps/web/core/components/issues/attachment/delete-attachment-modal.tsx
@@ -25,7 +25,7 @@ type Props = {
   issueServiceType?: TIssueServiceType;
 };
 
-export const IssueAttachmentDeleteModal: FC<Props> = observer((props) => {
+export const IssueAttachmentDeleteModal = observer(function IssueAttachmentDeleteModal(props: Props) {
   const { t } = useTranslation();
   const { isOpen, onClose, attachmentId, attachmentOperations, issueServiceType = EIssueServiceType.ISSUES } = props;
   // states
diff --git a/apps/web/core/components/issues/attachment/root.tsx b/apps/web/core/components/issues/attachment/root.tsx
index a0bc00241c..e1060746b1 100644
--- a/apps/web/core/components/issues/attachment/root.tsx
+++ b/apps/web/core/components/issues/attachment/root.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
 import { useAttachmentOperations } from "../issue-detail-widgets/attachments/helper";
@@ -15,15 +12,15 @@ export type TIssueAttachmentRoot = {
   disabled?: boolean;
 };
 
-export const IssueAttachmentRoot: FC<TIssueAttachmentRoot> = observer((props) => {
+export const IssueAttachmentRoot = observer(function IssueAttachmentRoot(props: TIssueAttachmentRoot) {
   // props
   const { workspaceSlug, projectId, issueId, disabled = false } = props;
   // hooks
   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 d53da7dfb9..743b420e8b 100644
--- a/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx
+++ b/apps/web/core/components/issues/bulk-operations/upgrade-banner.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { MARKETING_PLANE_ONE_PAGE_LINK } from "@plane/constants";
 import { getButtonStyling } from "@plane/propel/button";
 import { cn } from "@plane/utils";
@@ -8,13 +6,13 @@ type Props = {
   className?: string;
 };
 
-export const BulkOperationsUpgradeBanner: React.FC<Props> = (props) => {
+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="h-14 w-full bg-accent-primary/10 border-[0.5px] border-accent-strong/50 py-4 px-3.5 flex items-center justify-between gap-2 rounded-md">
+        <p className="text-accent-primary font-medium">
           Change state, priority, and more for several work items at once. Save three minutes on an average per
           operation.
         </p>
@@ -22,11 +20,11 @@ export const BulkOperationsUpgradeBanner: React.FC<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>
       </div>
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/issues/confirm-issue-discard.tsx b/apps/web/core/components/issues/confirm-issue-discard.tsx
index d5bb1bcace..16ca19a2d9 100644
--- a/apps/web/core/components/issues/confirm-issue-discard.tsx
+++ b/apps/web/core/components/issues/confirm-issue-discard.tsx
@@ -1,11 +1,7 @@
-"use client";
-
-import React, { useState } from "react";
-
-// 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;
@@ -14,7 +10,7 @@ type Props = {
   onConfirm: () => Promise<void>;
 };
 
-export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
+export function ConfirmIssueDiscard(props: Props) {
   const { isOpen, handleClose, onDiscard, onConfirm } = props;
 
   const [isLoading, setIsLoading] = useState(false);
@@ -31,66 +27,34 @@ export const ConfirmIssueDiscard: React.FC<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 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">
+            <h3 className="text-16 font-medium leading-6 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 4c2d051631..550bc2ec4f 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,3 @@
-"use client";
 import type { FC } from "react";
 import React, { useState } from "react";
 import { observer } from "mobx-react";
@@ -16,7 +15,9 @@ type TCreateIssueToastActionItems = {
   isEpic?: boolean;
 };
 
-export const CreateIssueToastActionItems: FC<TCreateIssueToastActionItems> = observer((props) => {
+export const CreateIssueToastActionItems = observer(function CreateIssueToastActionItems(
+  props: TCreateIssueToastActionItems
+) {
   const { workspaceSlug, projectId, issueId, isEpic = false } = props;
   // state
   const [copied, setCopied] = useState(false);
@@ -54,24 +55,24 @@ export const CreateIssueToastActionItems: FC<TCreateIssueToastActionItems> = obs
   };
 
   return (
-    <div className="flex items-center gap-1 text-xs text-custom-text-200">
+    <div className="flex items-center gap-1 text-11 text-secondary -ml-2">
       <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="text-accent-primary px-2 py-1 hover:bg-surface-2 font-medium rounded-sm"
       >
         {`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="cursor-pointer hidden group-hover:flex px-2 py-1 text-tertiary hover:text-secondary hover:bg-surface-2 rounded-sm"
             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 b23fd0d6ba..9230e4aae9 100644
--- a/apps/web/core/components/issues/delete-issue-modal.tsx
+++ b/apps/web/core/components/issues/delete-issue-modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -27,7 +25,7 @@ type Props = {
   isEpic?: boolean;
 };
 
-export const DeleteIssueModal: React.FC<Props> = observer((props) => {
+export const DeleteIssueModal = observer(function DeleteIssueModal(props: Props) {
   const { dataId, data, isOpen, handleClose, isSubIssue = false, onSubmit, isEpic = false } = props;
   // states
   const [isDeleting, setIsDeleting] = useState(false);
@@ -117,7 +115,7 @@ export const DeleteIssueModal: React.FC<Props> = observer((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="break-words font-medium 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 55abf99df9..dbe85651a9 100644
--- a/apps/web/core/components/issues/filters.tsx
+++ b/apps/web/core/components/issues/filters.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useCallback, useState } from "react";
 import { observer } from "mobx-react";
 import { ChartNoAxesColumn, SlidersHorizontal } from "lucide-react";
@@ -38,7 +36,7 @@ const LAYOUTS = [
   EIssueLayoutTypes.GANTT,
 ];
 
-export const HeaderFilters = observer((props: Props) => {
+export const HeaderFilters = observer(function HeaderFilters(props: Props) {
   const {
     currentProjectDetails,
     projectId,
@@ -122,12 +120,7 @@ export const HeaderFilters = observer((props: Props) => {
         />
       </FiltersDropdown>
       {canUserCreateIssue ? (
-        <Button
-          className="hidden md:block px-2"
-          onClick={() => setAnalyticsModal(true)}
-          variant="neutral-primary"
-          size="sm"
-        >
+        <Button className="hidden md:block px-2" 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 ec4cba9aa9..d0101d5b33 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,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import React from "react";
 import { Link, Paperclip } from "lucide-react";
@@ -25,7 +23,7 @@ type Props = {
   hideWidgets?: TWorkItemWidgets[];
 };
 
-export const IssueDetailWidgetActionButtons: FC<Props> = (props) => {
+export function IssueDetailWidgetActionButtons(props: Props) {
   const { workspaceSlug, projectId, issueId, disabled, issueServiceType, hideWidgets } = props;
   // translation
   const { t } = useTranslation();
@@ -99,4 +97,4 @@ export const IssueDetailWidgetActionButtons: FC<Props> = (props) => {
       />
     </div>
   );
-};
+}
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 ff986df04f..efadb710df 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,3 @@
-"use client";
 import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
@@ -16,7 +15,7 @@ type Props = {
   issueServiceType?: TIssueServiceType;
 };
 
-export const IssueAttachmentsCollapsibleContent: FC<Props> = observer((props) => {
+export const IssueAttachmentsCollapsibleContent = observer(function IssueAttachmentsCollapsibleContent(props: Props) {
   const { workspaceSlug, projectId, issueId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
   // helper
   const attachmentHelpers = useAttachmentOperations(workspaceSlug, projectId, issueId, issueServiceType);
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 4f2c0d35fe..a08133c819 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,4 +1,3 @@
-"use client";
 import { useMemo } from "react";
 import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
 import { setPromiseToast, TOAST_TYPE, setToast } from "@plane/propel/toast";
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 423045df7b..ce642b7577 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,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import React, { useCallback, useState } from "react";
 import { observer } from "mobx-react";
@@ -25,7 +23,7 @@ type Props = {
   issueServiceType: TIssueServiceType;
 };
 
-export const IssueAttachmentActionButton: FC<Props> = observer((props) => {
+export const IssueAttachmentActionButton = observer(function IssueAttachmentActionButton(props: Props) {
   const { workspaceSlug, projectId, issueId, customButton, disabled = false, issueServiceType } = props;
   // state
   const [isLoading, setIsLoading] = useState(false);
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 a40fc909eb..1bf1d457e5 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,3 @@
-"use client";
 import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
@@ -19,7 +18,7 @@ type Props = {
   issueServiceType: TIssueServiceType;
 };
 
-export const AttachmentsCollapsible: FC<Props> = observer((props) => {
+export const AttachmentsCollapsible = observer(function AttachmentsCollapsible(props: Props) {
   const { workspaceSlug, projectId, issueId, disabled = false, issueServiceType } = props;
   // store hooks
   const { openWidgets, toggleOpenWidget } = useIssueDetail(issueServiceType);
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 fc3a030305..6ff4047ccc 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,3 @@
-"use client";
 import type { FC } from "react";
 import React, { useMemo } from "react";
 import { observer } from "mobx-react";
@@ -20,7 +19,7 @@ type Props = {
   issueServiceType?: TIssueServiceType;
 };
 
-export const IssueAttachmentsCollapsibleTitle: FC<Props> = observer((props) => {
+export const IssueAttachmentsCollapsibleTitle = observer(function IssueAttachmentsCollapsibleTitle(props: Props) {
   const { isOpen, workspaceSlug, projectId, issueId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
   const { t } = useTranslation();
   // store hooks
@@ -36,7 +35,7 @@ export const IssueAttachmentsCollapsibleTitle: FC<Props> = observer((props) => {
   const indicatorElement = useMemo(
     () => (
       <span className="flex items-center justify-center ">
-        <p className="text-base text-custom-text-300 !leading-3">{attachmentCount}</p>
+        <p className="text-14 text-tertiary !leading-3">{attachmentCount}</p>
       </span>
     ),
     [attachmentCount]
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 1e138f854b..fa792e8008 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,3 @@
-"use client";
 import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
@@ -24,7 +23,7 @@ type Props = {
   hideWidgets?: TWorkItemWidgets[];
 };
 
-export const IssueDetailWidgetCollapsibles: FC<Props> = observer((props) => {
+export const IssueDetailWidgetCollapsibles = observer(function IssueDetailWidgetCollapsibles(props: Props) {
   const { workspaceSlug, projectId, issueId, disabled, issueServiceType, hideWidgets } = props;
   // store hooks
   const {
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 c2cdc0c579..c13ec40888 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
@@ -24,7 +24,7 @@ type Props = {
   hideWidgets?: TWorkItemWidgets[];
 };
 
-export const IssueDetailWidgetModals: FC<Props> = observer((props) => {
+export const IssueDetailWidgetModals = observer(function IssueDetailWidgetModals(props: Props) {
   const { workspaceSlug, projectId, issueId, issueServiceType, hideWidgets } = props;
   // store hooks
   const {
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 3b1bc20bb6..49f2a56b1a 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,3 @@
-"use client";
 import type { FC } from "react";
 import React from "react";
 import type { TIssueServiceType } from "@plane/types";
@@ -15,7 +14,7 @@ type Props = {
   issueServiceType: TIssueServiceType;
 };
 
-export const IssueLinksCollapsibleContent: FC<Props> = (props) => {
+export function IssueLinksCollapsibleContent(props: Props) {
   const { workspaceSlug, projectId, issueId, disabled, issueServiceType } = props;
 
   // helper
@@ -29,4 +28,4 @@ export const IssueLinksCollapsibleContent: FC<Props> = (props) => {
       issueServiceType={issueServiceType}
     />
   );
-};
+}
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 5bf6c68218..cdce12ca57 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,4 +1,3 @@
-"use client";
 import { useMemo } from "react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
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 ee068640d8..c182d32e53 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,4 +1,3 @@
-"use client";
 import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
@@ -14,7 +13,7 @@ type Props = {
   issueServiceType: TIssueServiceType;
 };
 
-export const IssueLinksActionButton: FC<Props> = observer((props) => {
+export const IssueLinksActionButton = observer(function IssueLinksActionButton(props: Props) {
   const { customButton, disabled = false, issueServiceType } = props;
   // store hooks
   const { toggleIssueLinkModal } = useIssueDetail(issueServiceType);
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 8fb3cc069a..5f809be46b 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,3 @@
-"use client";
 import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
@@ -19,7 +18,7 @@ type Props = {
   issueServiceType: TIssueServiceType;
 };
 
-export const LinksCollapsible: FC<Props> = observer((props) => {
+export const LinksCollapsible = observer(function LinksCollapsible(props: Props) {
   const { workspaceSlug, projectId, issueId, disabled = false, issueServiceType } = props;
   // store hooks
   const { openWidgets, toggleOpenWidget } = useIssueDetail(issueServiceType);
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 0e9eec1f59..b4bc38fd58 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,3 @@
-"use client";
 import type { FC } from "react";
 import React, { useMemo } from "react";
 import { observer } from "mobx-react";
@@ -18,7 +17,7 @@ type Props = {
   issueServiceType: TIssueServiceType;
 };
 
-export const IssueLinksCollapsibleTitle: FC<Props> = observer((props) => {
+export const IssueLinksCollapsibleTitle = observer(function IssueLinksCollapsibleTitle(props: Props) {
   const { isOpen, issueId, disabled, issueServiceType } = props;
   // translation
   const { t } = useTranslation();
@@ -36,7 +35,7 @@ export const IssueLinksCollapsibleTitle: FC<Props> = observer((props) => {
   const indicatorElement = useMemo(
     () => (
       <span className="flex items-center justify-center ">
-        <p className="text-base text-custom-text-300 !leading-3">{linksCount}</p>
+        <p className="text-14 text-tertiary !leading-3">{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 01fea1d603..8406d8895f 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,3 @@
-"use client";
 import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
@@ -37,7 +36,7 @@ export type TRelationObject = {
   placeholder: string;
 };
 
-export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
+export const RelationsCollapsibleContent = observer(function RelationsCollapsibleContent(props: Props) {
   const { workspaceSlug, issueId, disabled = false, issueServiceType = EIssueServiceType.ISSUES } = props;
   // plane hooks
   const { t } = useTranslation();
@@ -139,7 +138,7 @@ export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
               title={
                 <div className={`flex items-center gap-1 px-2.5 py-1 h-9  w-full ${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 font-medium leading-5">{relation.label}</span>
                 </div>
               }
               defaultOpen
@@ -187,7 +186,7 @@ export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
               issueCrudState.delete.issue.id &&
               issueCrudState.delete.issue.project_id
             ) {
-              const deleteOperation = !!issueCrudState.delete.issue?.is_epic
+              const deleteOperation = issueCrudState.delete.issue?.is_epic
                 ? epicOperations.remove
                 : issueOperations.remove;
               await deleteOperation(
@@ -203,7 +202,7 @@ export const RelationsCollapsibleContent: FC<Props> = observer((props) => {
 
       {shouldRenderIssueUpdateModal && (
         <>
-          {!!issueCrudState?.update?.issue?.is_epic ? (
+          {issueCrudState?.update?.issue?.is_epic ? (
             <CreateUpdateEpicModal
               isOpen={issueCrudState?.update?.toggle}
               onClose={() => {
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 f351cef792..520a44b418 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,4 +1,3 @@
-"use client";
 import { useMemo } from "react";
 // plane imports
 import { WORK_ITEM_TRACKER_EVENTS } from "@plane/constants";
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 8de45b38e7..f71cfbf9c9 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,4 +1,3 @@
-"use client";
 import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
@@ -20,7 +19,7 @@ type Props = {
   issueServiceType: TIssueServiceType;
 };
 
-export const RelationActionButton: FC<Props> = observer((props) => {
+export const RelationActionButton = observer(function RelationActionButton(props: Props) {
   const { customButton, issueId, disabled = false, issueServiceType } = props;
   const { t } = useTranslation();
   // store hooks
@@ -52,7 +51,7 @@ export const RelationActionButton: FC<Props> = observer((props) => {
           <CustomMenu.MenuItem
             key={index}
             onClick={() => {
-              handleOnClick(item.key as TIssueRelationTypes);
+              handleOnClick(item.key);
             }}
           >
             <div className="flex items-center gap-2">
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 3305cff940..e13f9beb72 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,3 @@
-"use client";
 import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
@@ -18,7 +17,7 @@ type Props = {
   issueServiceType: TIssueServiceType;
 };
 
-export const RelationsCollapsible: FC<Props> = observer((props) => {
+export const RelationsCollapsible = observer(function RelationsCollapsible(props: Props) {
   const { workspaceSlug, issueId, disabled = false, issueServiceType } = props;
   // store hooks
   const { openWidgets, toggleOpenWidget } = useIssueDetail(issueServiceType);
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 abe06701f3..e4d8061c80 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,3 @@
-"use client";
 import type { FC } from "react";
 import React, { useMemo } from "react";
 import { observer } from "mobx-react";
@@ -20,7 +19,7 @@ type Props = {
   issueServiceType?: TIssueServiceType;
 };
 
-export const RelationsCollapsibleTitle: FC<Props> = observer((props) => {
+export const RelationsCollapsibleTitle = observer(function RelationsCollapsibleTitle(props: Props) {
   const { isOpen, issueId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
   const { t } = useTranslation();
   // store hook
@@ -36,7 +35,7 @@ export const RelationsCollapsibleTitle: FC<Props> = observer((props) => {
   const indicatorElement = useMemo(
     () => (
       <span className="flex items-center justify-center ">
-        <p className="text-base text-custom-text-300 !leading-3">{relationsCount}</p>
+        <p className="text-14 text-tertiary !leading-3">{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 12ac497444..44b5a76f71 100644
--- a/apps/web/core/components/issues/issue-detail-widgets/root.tsx
+++ b/apps/web/core/components/issues/issue-detail-widgets/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import React from "react";
 // plane imports
@@ -19,7 +17,7 @@ type Props = {
   hideWidgets?: TWorkItemWidgets[];
 };
 
-export const IssueDetailWidgets: FC<Props> = (props) => {
+export function IssueDetailWidgets(props: Props) {
   const {
     workspaceSlug,
     projectId,
@@ -32,7 +30,7 @@ export const IssueDetailWidgets: FC<Props> = (props) => {
 
   return (
     <>
-      <div className="flex flex-col gap-5">
+      <div className="flex flex-col space-y-4">
         <IssueDetailWidgetActionButtons
           workspaceSlug={workspaceSlug}
           projectId={projectId}
@@ -61,4 +59,4 @@ export const IssueDetailWidgets: FC<Props> = (props) => {
       )}
     </>
   );
-};
+}
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 ad76e6fe22..f5b5f12c95 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,3 @@
-"use client";
 import type { FC } from "react";
 import React, { useEffect, useState, useCallback } from "react";
 import { observer } from "mobx-react";
@@ -23,7 +22,7 @@ type Props = {
 
 type TIssueCrudState = { toggle: boolean; parentIssueId: string | undefined; issue: TIssue | undefined };
 
-export const SubIssuesCollapsibleContent: FC<Props> = observer((props) => {
+export const SubIssuesCollapsibleContent = observer(function SubIssuesCollapsibleContent(props: Props) {
   const { workspaceSlug, projectId, parentIssueId, disabled, issueServiceType = EIssueServiceType.ISSUES } = props;
   // state
   const [issueCrudState, setIssueCrudState] = useState<{
@@ -80,7 +79,8 @@ export const SubIssuesCollapsibleContent: FC<Props> = observer((props) => {
   );
 
   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);
@@ -91,14 +91,7 @@ export const SubIssuesCollapsibleContent: FC<Props> = observer((props) => {
         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 a1c15187fb..f4f9f4c83b 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
@@ -23,7 +23,7 @@ type TSubIssueDisplayFiltersProps = {
   isEpic?: boolean;
 };
 
-export const SubIssueDisplayFilters: FC<TSubIssueDisplayFiltersProps> = observer((props) => {
+export const SubIssueDisplayFilters = observer(function SubIssueDisplayFilters(props: TSubIssueDisplayFiltersProps) {
   const {
     isEpic = false,
     displayProperties,
@@ -46,16 +46,16 @@ export const SubIssueDisplayFilters: FC<TSubIssueDisplayFiltersProps> = observer
           menuButton={
             <div
               className={cn(
-                "p-1 rounded  relative transition-all duration-200",
-                isFilterApplied && "bg-custom-primary-60/20"
+                "p-1 rounded-sm  relative 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="p-1 rounded-full bg-accent-primary absolute -top-1 -right-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 scrollbar-sm relative h-full w-full divide-y divide-subtle-1 overflow-hidden overflow-y-auto px-2.5 max-h-[25rem] 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 de1a6658c0..9a4f534bc2 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
@@ -26,7 +26,7 @@ type TSubIssueFiltersProps = {
   availableFilters: (keyof IIssueFilterOptions)[];
 };
 
-export const SubIssueFilters: FC<TSubIssueFiltersProps> = observer((props) => {
+export const SubIssueFilters = observer(function SubIssueFilters(props: TSubIssueFiltersProps) {
   const { handleFiltersUpdate, filters, memberIds, states, availableFilters } = props;
   // plane hooks
   const { t } = useTranslation();
@@ -44,34 +44,34 @@ export const SubIssueFilters: FC<TSubIssueFiltersProps> = observer((props) => {
         menuButton={
           <div
             className={cn(
-              "p-1 rounded  relative transition-all duration-200",
-              isFilterApplied && "bg-custom-primary-60/20"
+              "p-1 rounded-sm  relative 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="p-1 rounded-full bg-accent-primary absolute -top-1 -right-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">
+              <Search className="text-placeholder" size={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 61129d4f22..3790e1164e 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,5 +1,3 @@
-"use client";
-
 import { useMemo } from "react";
 import { useParams } from "next/navigation";
 // plane imports
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 0bcdfe96a4..a5fd0a41af 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,6 +1,5 @@
 export * from "./content";
-export * from "./title";
-export * from "./root";
-export * from "./quick-action-button";
 export * from "./display-filters";
-export * from "./content";
+export * from "./quick-action-button";
+export * from "./root";
+export * from "./title";
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 4025b67c1f..0a1068d4e2 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
@@ -29,7 +29,7 @@ interface TSubIssuesListGroupProps {
   spacingLeft?: number;
 }
 
-export const SubIssuesListGroup: FC<TSubIssuesListGroupProps> = observer((props) => {
+export const SubIssuesListGroup = observer(function SubIssuesListGroup(props: TSubIssuesListGroupProps) {
   const {
     group,
     serviceType,
@@ -61,7 +61,7 @@ export const SubIssuesListGroup: FC<TSubIssuesListGroupProps> = observer((props)
           !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 transition-all text-placeholder", {
                   "rotate-90": isCollapsibleOpen,
                 })}
                 strokeWidth={2.5}
@@ -69,8 +69,8 @@ export const SubIssuesListGroup: FC<TSubIssuesListGroupProps> = observer((props)
               <div className="flex-shrink-0 grid 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 text-primary font-medium">{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 00bdbbd29a..3a99af112a 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { Pencil, Trash, Link as LinkIcon, Loader } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
@@ -42,7 +40,7 @@ type Props = {
   storeType?: EIssuesStoreType;
 };
 
-export const SubIssuesListItem: React.FC<Props> = observer((props) => {
+export const SubIssuesListItem = observer(function SubIssuesListItem(props: Props) {
   const {
     workspaceSlug,
     projectId,
@@ -109,7 +107,7 @@ export const SubIssuesListItem: React.FC<Props> = observer((props) => {
       >
         {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 min-h-11 h-full w-full items-center pr-2 py-1 transition-all hover:bg-surface-2"
             style={{ paddingLeft: `${spacingLeft}px` }}
           >
             <div className="flex size-5 items-center justify-center flex-shrink-0">
@@ -117,12 +115,12 @@ export const SubIssuesListItem: React.FC<Props> = observer((props) => {
               {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();
@@ -155,18 +153,19 @@ export const SubIssuesListItem: React.FC<Props> = observer((props) => {
                       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="flex-1 w-0 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();
@@ -183,7 +182,7 @@ export const SubIssuesListItem: React.FC<Props> = observer((props) => {
               />
             </div>
 
-            <div className="flex-shrink-0 text-sm">
+            <div className="flex-shrink-0 text-13">
               <CustomMenu placement="bottom-end" ellipsis>
                 {canEdit && (
                   <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 35097a2986..15eb068148 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
@@ -33,7 +33,7 @@ type Props = {
   issue: TIssue;
 };
 
-export const SubIssuesListItemProperties: React.FC<Props> = observer((props) => {
+export const SubIssuesListItemProperties = observer(function SubIssuesListItemProperties(props: Props) {
   const { workspaceSlug, parentIssueId, issueId, canEdit, updateSubIssue, displayProperties, issue } = props;
   const { t } = useTranslation();
   const { getStateById } = useProjectState();
@@ -116,7 +116,6 @@ export const SubIssuesListItemProperties: React.FC<Props> = observer((props) =>
             }
             disabled={!canEdit}
             buttonVariant="border-without-text"
-            buttonClassName="border"
             showTooltip
           />
         </div>
@@ -189,7 +188,7 @@ export const SubIssuesListItemProperties: React.FC<Props> = observer((props) =>
             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"
+            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 aa1b152cbb..f33c441f1f 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
@@ -29,7 +29,7 @@ type Props = {
   storeType: EIssuesStoreType;
 };
 
-export const SubIssuesListRoot: React.FC<Props> = observer((props) => {
+export const SubIssuesListRoot = observer(function SubIssuesListRoot(props: Props) {
   const {
     workspaceSlug,
     projectId,
@@ -96,7 +96,7 @@ export const SubIssuesListRoot: React.FC<Props> = observer((props) => {
           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 e8a64735d7..c3ae0f391e 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,4 +1,3 @@
-"use client";
 import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
@@ -20,7 +19,7 @@ type Props = {
   issueServiceType: TIssueServiceType;
 };
 
-export const SubIssuesActionButton: FC<Props> = observer((props) => {
+export const SubIssuesActionButton = observer(function SubIssuesActionButton(props: Props) {
   const { issueId, customButton, disabled = false, issueServiceType } = props;
   // translation
   const { t } = useTranslation();
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 8830750e5b..ccfa46ac61 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,3 @@
-"use client";
 import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
@@ -19,7 +18,7 @@ type Props = {
   issueServiceType: TIssueServiceType;
 };
 
-export const SubIssuesCollapsible: FC<Props> = observer((props) => {
+export const SubIssuesCollapsible = observer(function SubIssuesCollapsible(props: Props) {
   const { workspaceSlug, projectId, issueId, disabled = false, issueServiceType } = props;
   // store hooks
   const { openWidgets, toggleOpenWidget } = useIssueDetail(issueServiceType);
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 b5d4e7ea01..de6c8ccd02 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
@@ -28,7 +28,7 @@ type TSubWorkItemTitleActionsProps = {
   projectId: string;
 };
 
-export const SubWorkItemTitleActions: FC<TSubWorkItemTitleActionsProps> = observer((props) => {
+export const SubWorkItemTitleActions = observer(function SubWorkItemTitleActions(props: TSubWorkItemTitleActionsProps) {
   const { disabled, issueServiceType = EIssueServiceType.ISSUES, parentId, projectId } = props;
 
   // store hooks
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 c3e57dea8b..db66f8e68c 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,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -20,7 +18,7 @@ type Props = {
   workspaceSlug: string;
 };
 
-export const SubIssuesCollapsibleTitle: FC<Props> = observer((props) => {
+export const SubIssuesCollapsibleTitle = observer(function SubIssuesCollapsibleTitle(props: Props) {
   const {
     isOpen,
     parentIssueId,
@@ -51,7 +49,7 @@ export const SubIssuesCollapsibleTitle: FC<Props> = observer((props) => {
       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-tertiary text-13">
           <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 725ab475f8..3b27711a97 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,8 +1,7 @@
-"use client";
 import type { FC } from "react";
 import React from "react";
 // helpers
-import { cn } from "@plane/utils";
+import { Button } from "@plane/propel/button";
 
 type Props = {
   icon: React.ReactNode;
@@ -10,20 +9,12 @@ type Props = {
   disabled?: boolean;
 };
 
-export const IssueDetailWidgetButton: FC<Props> = (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 7c7f27da04..7ac2b5b01f 100644
--- a/apps/web/core/components/issues/issue-detail/cycle-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/cycle-select.tsx
@@ -20,7 +20,7 @@ type TIssueCycleSelect = {
   disabled?: boolean;
 };
 
-export const IssueCycleSelect: React.FC<TIssueCycleSelect> = observer((props) => {
+export const IssueCycleSelect = observer(function IssueCycleSelect(props: TIssueCycleSelect) {
   const { className = "", workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
   const { t } = useTranslation();
   // states
@@ -50,8 +50,8 @@ export const IssueCycleSelect: React.FC<TIssueCycleSelect> = observer((props) =>
         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 0000000000..02723e927f
--- /dev/null
+++ b/apps/web/core/components/issues/issue-detail/identifier-text.tsx
@@ -0,0 +1,59 @@
+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",
+};
+
+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("font-medium whitespace-nowrap text-tertiary text-12", textSizeClassName, variantClassName, {
+          "cursor-pointer": enableClickToCopyIdentifier,
+        })}
+        onClick={handleCopyIssueIdentifier}
+        disabled={!enableClickToCopyIdentifier}
+      >
+        {identifier}
+      </button>
+    </Tooltip>
+  );
+}
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 24b7627888..844034189f 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,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import type { E_SORT_ORDER, TActivityFilters } from "@plane/constants";
@@ -27,7 +26,7 @@ type TIssueActivityCommentRoot = {
   sortOrder: E_SORT_ORDER;
 };
 
-export const IssueActivityCommentRoot: FC<TIssueActivityCommentRoot> = observer((props) => {
+export const IssueActivityCommentRoot = observer(function IssueActivityCommentRoot(props: TIssueActivityCommentRoot) {
   const {
     workspaceSlug,
     isIntakeIssue,
@@ -68,6 +67,7 @@ export const IssueActivityCommentRoot: FC<TIssueActivityCommentRoot> = observer(
           <CommentCard
             key={activityComment.id}
             workspaceSlug={workspaceSlug}
+            entityId={issueId}
             comment={comment}
             activityOperations={activityOperations}
             ends={index === 0 ? "top" : index === filteredActivityAndComments.length - 1 ? "bottom" : undefined}
@@ -75,19 +75,23 @@ export const IssueActivityCommentRoot: FC<TIssueActivityCommentRoot> = observer(
             showCopyLinkOption={!isIntakeIssue}
             disabled={disabled}
             projectId={projectId}
+            enableReplies
           />
         ) : BASE_ACTIVITY_FILTER_TYPES.includes(activityComment.activity_type as EActivityFilterType) ? (
           <IssueActivityItem
+            key={activityComment.id}
             activityId={activityComment.id}
             ends={index === 0 ? "top" : index === filteredActivityAndComments.length - 1 ? "bottom" : undefined}
           />
         ) : activityComment.activity_type === "ISSUE_ADDITIONAL_PROPERTIES_ACTIVITY" ? (
           <IssueAdditionalPropertiesActivity
+            key={activityComment.id}
             activityId={activityComment.id}
             ends={index === 0 ? "top" : index === filteredActivityAndComments.length - 1 ? "bottom" : undefined}
           />
         ) : activityComment.activity_type === "WORKLOG" ? (
           <IssueActivityWorklog
+            key={activityComment.id}
             workspaceSlug={workspaceSlug}
             projectId={projectId}
             issueId={issueId}
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 6b7657effd..8534e71710 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,10 +1,9 @@
-import type { FC } from "react";
-import React from "react";
 import { observer } from "mobx-react";
 import { Check, 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 { PopoverMenu } from "@plane/ui";
 // helper
 import { cn } from "@plane/utils";
@@ -15,7 +14,7 @@ type TActivityFilter = {
   filterOptions: TActivityFilterOption[];
 };
 
-export const ActivityFilter: FC<TActivityFilter> = observer((props) => {
+export const ActivityFilter = observer(function ActivityFilter(props: TActivityFilter) {
   const { selectedFilters = [], filterOptions } = props;
 
   // hooks
@@ -25,40 +24,35 @@ export const ActivityFilter: FC<TActivityFilter> = observer((props) => {
     <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 h-2 w-2 -right-0.5 -top-0.5 bg-accent-primary rounded-full" />
           )}
-        </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 items-center gap-2 text-13 cursor-pointer px-2 p-1 transition-all hover:bg-layer-1 rounded-xs"
           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-shrink-0 w-3 h-3 flex justify-center items-center rounded-xs transition-all bg-surface-2",
               {
-                "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" />}
           </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 a722bcbe26..49e86aea7a 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,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { RotateCcw } from "lucide-react";
 // hooks
@@ -12,7 +9,7 @@ import { IssueActivityBlockComponent } from "./";
 
 type TIssueArchivedAtActivity = { activityId: string; ends: "top" | "bottom" | undefined };
 
-export const IssueArchivedAtActivity: FC<TIssueArchivedAtActivity> = observer((props) => {
+export const IssueArchivedAtActivity = observer(function IssueArchivedAtActivity(props: TIssueArchivedAtActivity) {
   const { activityId, ends } = props;
   // hooks
   const {
@@ -27,9 +24,9 @@ export const IssueArchivedAtActivity: FC<TIssueArchivedAtActivity> = observer((p
     <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 5c4466f8a8..8ed796b30c 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,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // icons
 import { MembersPropertyIcon } from "@plane/propel/icons";
@@ -9,7 +8,7 @@ import { IssueActivityBlockComponent, IssueLink } from "./";
 
 type TIssueAssigneeActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
 
-export const IssueAssigneeActivity: FC<TIssueAssigneeActivity> = observer((props) => {
+export const IssueAssigneeActivity = observer(function IssueAssigneeActivity(props: TIssueAssigneeActivity) {
   const { activityId, ends, showIssue = true } = props;
   // hooks
   const {
@@ -21,7 +20,7 @@ export const IssueAssigneeActivity: FC<TIssueAssigneeActivity> = observer((props
   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}
     >
@@ -31,7 +30,7 @@ export const IssueAssigneeActivity: FC<TIssueAssigneeActivity> = observer((props
           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 hover:underline capitalize"
         >
           {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 f1b3631594..f68e5be2ba 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,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { Paperclip } from "lucide-react";
 // hooks
@@ -8,7 +7,7 @@ import { IssueActivityBlockComponent, IssueLink } from "./";
 
 type TIssueAttachmentActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
 
-export const IssueAttachmentActivity: FC<TIssueAttachmentActivity> = observer((props) => {
+export const IssueAttachmentActivity = observer(function IssueAttachmentActivity(props: TIssueAttachmentActivity) {
   const { activityId, showIssue = true, ends } = props;
   // hooks
   const {
@@ -20,7 +19,7 @@ export const IssueAttachmentActivity: FC<TIssueAttachmentActivity> = observer((p
   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 657611f14a..def64665d0 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,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
 import { CycleIcon } from "@plane/propel/icons";
@@ -11,7 +8,7 @@ import { IssueActivityBlockComponent } from "./";
 
 type TIssueCycleActivity = { activityId: string; ends: "top" | "bottom" | undefined };
 
-export const IssueCycleActivity: FC<TIssueCycleActivity> = observer((props) => {
+export const IssueCycleActivity = observer(function IssueCycleActivity(props: TIssueCycleActivity) {
   const { activityId, ends } = props;
   // hooks
   const {
@@ -23,7 +20,7 @@ export const IssueCycleActivity: FC<TIssueCycleActivity> = observer((props) => {
   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}
     >
@@ -35,7 +32,7 @@ export const IssueCycleActivity: FC<TIssueCycleActivity> = observer((props) => {
               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>
@@ -47,7 +44,7 @@ export const IssueCycleActivity: FC<TIssueCycleActivity> = observer((props) => {
               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>
@@ -59,7 +56,7 @@ export const IssueCycleActivity: FC<TIssueCycleActivity> = observer((props) => {
               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 bdc52e482b..cbc9b55ff2 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,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { WorkItemsIcon } from "@plane/propel/icons";
@@ -13,7 +10,7 @@ import { IssueActivityBlockComponent } from "./";
 
 type TIssueDefaultActivity = { activityId: string; ends: "top" | "bottom" | undefined };
 
-export const IssueDefaultActivity: FC<TIssueDefaultActivity> = observer((props) => {
+export const IssueDefaultActivity = observer(function IssueDefaultActivity(props: TIssueDefaultActivity) {
   const { activityId, ends } = props;
   // hooks
   const {
@@ -28,7 +25,7 @@ export const IssueDefaultActivity: FC<TIssueDefaultActivity> = observer((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 919c00132e..a1be80e5ff 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,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { AlignLeft } from "lucide-react";
 // hooks
@@ -8,7 +7,7 @@ import { IssueActivityBlockComponent, IssueLink } from "./";
 
 type TIssueDescriptionActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
 
-export const IssueDescriptionActivity: FC<TIssueDescriptionActivity> = observer((props) => {
+export const IssueDescriptionActivity = observer(function IssueDescriptionActivity(props: TIssueDescriptionActivity) {
   const { activityId, showIssue = true, ends } = props;
   // hooks
   const {
@@ -20,7 +19,7 @@ export const IssueDescriptionActivity: FC<TIssueDescriptionActivity> = observer(
   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 ada9b52379..f3eeac4715 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,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { EstimatePropertyIcon } from "@plane/propel/icons";
 // hooks
@@ -8,7 +7,7 @@ import { IssueActivityBlockComponent, IssueLink } from "./";
 
 type TIssueEstimateActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
 
-export const IssueEstimateActivity: FC<TIssueEstimateActivity> = observer((props) => {
+export const IssueEstimateActivity = observer(function IssueEstimateActivity(props: TIssueEstimateActivity) {
   const { activityId, showIssue = true, ends } = props;
   // hooks
   const {
@@ -21,7 +20,7 @@ export const IssueEstimateActivity: FC<TIssueEstimateActivity> = observer((props
 
   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 1b780c5772..5cc9eea444 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,5 +1,3 @@
-"use client";
-
 import type { FC, ReactNode } from "react";
 import { Network } from "lucide-react";
 // plane imports
@@ -20,7 +18,7 @@ type TIssueActivityBlockComponent = {
   customUserName?: string;
 };
 
-export const IssueActivityBlockComponent: FC<TIssueActivityBlockComponent> = (props) => {
+export function IssueActivityBlockComponent(props: TIssueActivityBlockComponent) {
   const { icon, activityId, ends, children, customUserName } = props;
   // hooks
   const {
@@ -32,15 +30,15 @@ export const IssueActivityBlockComponent: FC<TIssueActivityBlockComponent> = (pr
   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">
+      <div className="absolute left-[13px] top-0 bottom-0 w-px bg-layer-3" aria-hidden />
+      <div className="flex-shrink-0 w-7 h-7 rounded-lg overflow-hidden flex justify-center items-center z-[4] bg-layer-2 text-secondary border border-subtle shadow-raised-100">
         {icon ? icon : <Network className="w-3.5 h-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} />
         ) : (
@@ -52,10 +50,10 @@ export const IssueActivityBlockComponent: FC<TIssueActivityBlockComponent> = (pr
             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>
     </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 42bc60021e..41f3faa96e 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,18 +1,14 @@
-"use client";
-
-import type { FC } from "react";
-// hooks
 import { Tooltip } from "@plane/propel/tooltip";
 import { generateWorkItemLink } from "@plane/utils";
+// hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { usePlatformOS } from "@/hooks/use-platform-os";
-// ui
 
 type TIssueLink = {
   activityId: string;
 };
 
-export const IssueLink: FC<TIssueLink> = (props) => {
+export function IssueLink(props: TIssueLink) {
   const { activityId } = props;
   // hooks
   const {
@@ -40,13 +36,13 @@ export const IssueLink: FC<TIssueLink> = (props) => {
         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 022d5aa501..5cf3aacc52 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,4 +1,3 @@
-import type { FC } from "react";
 import Link from "next/link";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
@@ -8,7 +7,7 @@ type TIssueUser = {
   customUserName?: string;
 };
 
-export const IssueUser: FC<TIssueUser> = (props) => {
+export function IssueUser(props: TIssueUser) {
   const { activityId, customUserName } = props;
   // hooks
   const {
@@ -22,15 +21,15 @@ export const IssueUser: FC<TIssueUser> = (props) => {
   return (
     <>
       {customUserName ? (
-        <span className="text-custom-text-100 font-medium">{customUserName}</span>
+        <span className="text-primary font-medium">{customUserName}</span>
       ) : (
         <Link
           href={`/${activity?.workspace_detail?.slug}/profile/${activity?.actor_detail?.id}`}
-          className="hover:underline text-custom-text-100 font-medium"
+          className="hover:underline text-primary font-medium"
         >
           {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 74785c2762..b9d7df24d3 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,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
 import { IntakeIcon } from "@plane/propel/icons";
@@ -9,7 +8,7 @@ import { IssueActivityBlockComponent } from "./";
 
 type TIssueInboxActivity = { activityId: string; ends: "top" | "bottom" | undefined };
 
-export const IssueInboxActivity: FC<TIssueInboxActivity> = observer((props) => {
+export const IssueInboxActivity = observer(function IssueInboxActivity(props: TIssueInboxActivity) {
   const { activityId, ends } = props;
   // hooks
   const {
@@ -36,7 +35,7 @@ export const IssueInboxActivity: FC<TIssueInboxActivity> = observer((props) => {
   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/label-activity-chip.tsx b/apps/web/core/components/issues/issue-detail/issue-activity/activity/actions/label-activity-chip.tsx
index 53eed215f9..94929187ae 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,13 +1,12 @@
-import type { FC } from "react";
 import { Tooltip } from "@plane/propel/tooltip";
 
 type TIssueLabelPill = { name?: string; color?: string };
 
-export const LabelActivityChip: FC<TIssueLabelPill> = (props) => {
+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 cursor-default flex-shrink-0 items-center gap-2 truncate whitespace-nowrap rounded-full border border-strong px-2 py-0.5 text-11">
         <span
           className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
           style={{
@@ -15,8 +14,8 @@ export const LabelActivityChip: FC<TIssueLabelPill> = (props) => {
           }}
           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 8b39428d33..0f6ae75c31 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,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { LabelPropertyIcon } from "@plane/propel/icons";
 // hooks
@@ -9,7 +8,7 @@ import { IssueActivityBlockComponent, IssueLink, LabelActivityChip } from "./";
 
 type TIssueLabelActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
 
-export const IssueLabelActivity: FC<TIssueLabelActivity> = observer((props) => {
+export const IssueLabelActivity = observer(function IssueLabelActivity(props: TIssueLabelActivity) {
   const { activityId, showIssue = true, ends } = props;
   // hooks
   const {
@@ -24,7 +23,7 @@ export const IssueLabelActivity: FC<TIssueLabelActivity> = observer((props) => {
   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 36a2ff98d1..a9a371481b 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,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { MessageSquare } from "lucide-react";
 // hooks
@@ -8,7 +7,7 @@ import { IssueActivityBlockComponent, IssueLink } from "./";
 
 type TIssueLinkActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
 
-export const IssueLinkActivity: FC<TIssueLinkActivity> = observer((props) => {
+export const IssueLinkActivity = observer(function IssueLinkActivity(props: TIssueLinkActivity) {
   const { activityId, showIssue = false, ends } = props;
   // hooks
   const {
@@ -20,7 +19,7 @@ export const IssueLinkActivity: FC<TIssueLinkActivity> = observer((props) => {
   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}
     >
@@ -32,7 +31,7 @@ export const IssueLinkActivity: FC<TIssueLinkActivity> = observer((props) => {
               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>
@@ -44,7 +43,7 @@ export const IssueLinkActivity: FC<TIssueLinkActivity> = observer((props) => {
               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>
@@ -56,7 +55,7 @@ export const IssueLinkActivity: FC<TIssueLinkActivity> = observer((props) => {
               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 149b6516d6..a9668b7f3a 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,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
 import { ModuleIcon } from "@plane/propel/icons";
@@ -11,7 +8,7 @@ import { IssueActivityBlockComponent } from "./";
 
 type TIssueModuleActivity = { activityId: string; ends: "top" | "bottom" | undefined };
 
-export const IssueModuleActivity: FC<TIssueModuleActivity> = observer((props) => {
+export const IssueModuleActivity = observer(function IssueModuleActivity(props: TIssueModuleActivity) {
   const { activityId, ends } = props;
   // hooks
   const {
@@ -23,7 +20,7 @@ export const IssueModuleActivity: FC<TIssueModuleActivity> = observer((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}
     >
@@ -35,7 +32,7 @@ export const IssueModuleActivity: FC<TIssueModuleActivity> = observer((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>
@@ -47,7 +44,7 @@ export const IssueModuleActivity: FC<TIssueModuleActivity> = observer((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>
@@ -59,7 +56,7 @@ export const IssueModuleActivity: FC<TIssueModuleActivity> = observer((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 ebccf2824b..5e1c0b073b 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,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { Type } from "lucide-react";
 // hooks
@@ -8,7 +7,7 @@ import { IssueActivityBlockComponent } from "./";
 
 type TIssueNameActivity = { activityId: string; ends: "top" | "bottom" | undefined };
 
-export const IssueNameActivity: FC<TIssueNameActivity> = observer((props) => {
+export const IssueNameActivity = observer(function IssueNameActivity(props: TIssueNameActivity) {
   const { activityId, ends } = props;
   // hooks
   const {
@@ -20,7 +19,7 @@ export const IssueNameActivity: FC<TIssueNameActivity> = observer((props) => {
   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 935cffcae1..2239bd77d9 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,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { ParentPropertyIcon } from "@plane/propel/icons";
 // hooks
@@ -8,7 +7,7 @@ import { IssueActivityBlockComponent, IssueLink } from "./";
 
 type TIssueParentActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
 
-export const IssueParentActivity: FC<TIssueParentActivity> = observer((props) => {
+export const IssueParentActivity = observer(function IssueParentActivity(props: TIssueParentActivity) {
   const { activityId, showIssue = true, ends } = props;
   // hooks
   const {
@@ -20,16 +19,16 @@ export const IssueParentActivity: FC<TIssueParentActivity> = observer((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 fc48091c4a..d36c821eb1 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,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { PriorityPropertyIcon } from "@plane/propel/icons";
 // hooks
@@ -8,7 +7,7 @@ import { IssueActivityBlockComponent, IssueLink } from "./";
 
 type TIssuePriorityActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
 
-export const IssuePriorityActivity: FC<TIssuePriorityActivity> = observer((props) => {
+export const IssuePriorityActivity = observer(function IssuePriorityActivity(props: TIssuePriorityActivity) {
   const { activityId, showIssue = true, ends } = props;
   // hooks
   const {
@@ -20,12 +19,12 @@ export const IssuePriorityActivity: FC<TIssuePriorityActivity> = observer((props
   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 b9c429fbeb..91ce152da4 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,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
@@ -10,7 +9,7 @@ import { IssueActivityBlockComponent } from "./";
 
 type TIssueRelationActivity = { activityId: string; ends: "top" | "bottom" | undefined };
 
-export const IssueRelationActivity: FC<TIssueRelationActivity> = observer((props) => {
+export const IssueRelationActivity = observer(function IssueRelationActivity(props: TIssueRelationActivity) {
   const { activityId, ends } = props;
   // hooks
   const {
@@ -30,9 +29,9 @@ export const IssueRelationActivity: FC<TIssueRelationActivity> = observer((props
     >
       {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 2b1ed27ac7..a6bdde67cc 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,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { CalendarDays } from "lucide-react";
 // hooks
@@ -10,7 +9,7 @@ import { IssueActivityBlockComponent, IssueLink } from "./";
 
 type TIssueStartDateActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
 
-export const IssueStartDateActivity: FC<TIssueStartDateActivity> = observer((props) => {
+export const IssueStartDateActivity = observer(function IssueStartDateActivity(props: TIssueStartDateActivity) {
   const { activityId, showIssue = true, ends } = props;
   // hooks
   const {
@@ -22,7 +21,7 @@ export const IssueStartDateActivity: FC<TIssueStartDateActivity> = observer((pro
   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 +29,7 @@ export const IssueStartDateActivity: FC<TIssueStartDateActivity> = observer((pro
         {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 de1037e386..49022acefd 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,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // hooks
 import { StatePropertyIcon } from "@plane/propel/icons";
@@ -11,7 +8,7 @@ import { IssueActivityBlockComponent, IssueLink } from "./";
 
 type TIssueStateActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
 
-export const IssueStateActivity: FC<TIssueStateActivity> = observer((props) => {
+export const IssueStateActivity = observer(function IssueStateActivity(props: TIssueStateActivity) {
   const { activityId, showIssue = true, ends } = props;
   // hooks
   const {
@@ -23,12 +20,12 @@ export const IssueStateActivity: FC<TIssueStateActivity> = observer((props) => {
   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 9d51f9fdd5..6af4f7e092 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
@@ -10,7 +10,7 @@ import { IssueActivityBlockComponent, IssueLink } from "./";
 
 type TIssueTargetDateActivity = { activityId: string; showIssue?: boolean; ends: "top" | "bottom" | undefined };
 
-export const IssueTargetDateActivity: FC<TIssueTargetDateActivity> = observer((props) => {
+export const IssueTargetDateActivity = observer(function IssueTargetDateActivity(props: TIssueTargetDateActivity) {
   const { activityId, showIssue = true, ends } = props;
   // hooks
   const {
@@ -22,7 +22,7 @@ export const IssueTargetDateActivity: FC<TIssueTargetDateActivity> = observer((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}
     >
@@ -30,7 +30,7 @@ export const IssueTargetDateActivity: FC<TIssueTargetDateActivity> = observer((p
         {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 e41d6bdf9e..68d7312554 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,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // helpers
 import { getValidKeysFromObject } from "@plane/utils";
@@ -34,7 +33,7 @@ type TIssueActivityItem = {
   ends: "top" | "bottom" | undefined;
 };
 
-export const IssueActivityItem: FC<TIssueActivityItem> = observer((props) => {
+export const IssueActivityItem = observer(function IssueActivityItem(props: TIssueActivityItem) {
   const { activityId, ends } = props;
   // hooks
   const {
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 54ef0f717c..07361cf130 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
@@ -10,7 +10,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
@@ -27,7 +27,7 @@ export const useCommentOperations = (
   } = useIssueDetail();
   const { getProjectById } = useProject();
   const { getUserDetails } = useMember();
-  const { uploadEditorAsset } = useEditorAsset();
+  const { uploadEditorAsset, duplicateEditorAsset } = useEditorAsset();
   const { data: currentUser } = useUser();
   // derived values
   const issueDetails = issueId ? getIssueById(issueId) : undefined;
@@ -136,6 +136,21 @@ export const useCommentOperations = (
           throw new Error(t("issue.comments.upload.error"));
         }
       },
+      duplicateCommentAsset: async (assetId, commentId) => {
+        try {
+          if (!workspaceSlug || !projectId) throw new Error("Missing fields");
+          const res = await duplicateEditorAsset({
+            assetId,
+            entityId: commentId || undefined,
+            entityType: EFileAssetType.COMMENT_DESCRIPTION,
+            projectId,
+            workspaceSlug,
+          });
+          return res;
+        } catch {
+          throw new Error("Asset duplication failed. Please try again later.");
+        }
+      },
       addCommentReaction: async (commentId, reaction) => {
         try {
           if (!workspaceSlug || !projectId || !commentId) throw new Error("Missing fields");
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 915b5b207b..e0fa46f4b6 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,31 +1,33 @@
 // plane imports
 import { Loader } from "@plane/ui";
 
-export const 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">
-        <Loader.Item height="8px" width="60%" />
-        <Loader.Item height="8px" width="40%" />
-        <Loader.Item height="10px" width="100%" />
+export function IssueActivityLoader() {
+  return (
+    <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">
+          <Loader.Item height="8px" width="60%" />
+          <Loader.Item height="8px" width="40%" />
+          <Loader.Item height="10px" width="100%" />
+        </div>
       </div>
-    </div>
-    <div className="flex items-start gap-3">
-      <Loader.Item className="shrink-0" height="28px" width="28px" />
-      <div className="space-y-2 w-full">
-        <Loader.Item height="8px" width="40%" />
-        <Loader.Item height="8px" width="60%" />
-        <Loader.Item height="10px" width="80%" />
+      <div className="flex items-start gap-3">
+        <Loader.Item className="shrink-0" height="28px" width="28px" />
+        <div className="space-y-2 w-full">
+          <Loader.Item height="8px" width="40%" />
+          <Loader.Item height="8px" width="60%" />
+          <Loader.Item height="10px" width="80%" />
+        </div>
       </div>
-    </div>
-    <div className="flex items-start gap-3">
-      <Loader.Item className="shrink-0" height="28px" width="28px" />
-      <div className="space-y-2 w-full">
-        <Loader.Item height="8px" width="60%" />
-        <Loader.Item height="8px" width="40%" />
-        <Loader.Item height="10px" width="100%" />
+      <div className="flex items-start gap-3">
+        <Loader.Item className="shrink-0" height="28px" width="28px" />
+        <div className="space-y-2 w-full">
+          <Loader.Item height="8px" width="60%" />
+          <Loader.Item height="8px" width="40%" />
+          <Loader.Item height="10px" width="100%" />
+        </div>
       </div>
-    </div>
-  </Loader>
-);
+    </Loader>
+  );
+}
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 5060136a8e..ca3f524b45 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,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useMemo } from "react";
 import uniq from "lodash-es/uniq";
 import { observer } from "mobx-react";
@@ -22,7 +19,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 = {
@@ -40,7 +37,7 @@ export type TActivityOperations = {
   uploadCommentAsset: (blockId: string, file: File, commentId?: string) => Promise<TFileSignedURLResponse>;
 };
 
-export const IssueActivity: FC<TIssueActivity> = observer((props) => {
+export const IssueActivity = observer(function IssueActivity(props: TIssueActivity) {
   const { workspaceSlug, projectId, issueId, disabled = false, isIntakeIssue = false } = props;
   // i18n
   const { t } = useTranslation();
@@ -84,7 +81,7 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
   };
 
   // helper hooks
-  const activityOperations = useCommentOperations(workspaceSlug, projectId, issueId);
+  const activityOperations = useWorkItemCommentOperations(workspaceSlug, projectId, issueId);
 
   const project = getProjectById(projectId);
   const renderCommentCreationBox = useMemo(
@@ -102,10 +99,10 @@ export const IssueActivity: FC<TIssueActivity> = observer((props) => {
   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 8a06e2ef6a..8e6a64e312 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,36 +1,16 @@
-"use client";
-
-import type { FC } from "react";
 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: FC<TActivitySortRoot> = memo((props) => (
-  <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>
-));
+export const ActivitySortRoot = memo(function ActivitySortRoot(props: TActivitySortRoot) {
+  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 42a1ca3278..83af5a5d04 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,12 +1,10 @@
-"use client";
-
-import type { FC } from "react";
-import React, { useRef } from "react";
+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";
@@ -30,7 +28,7 @@ type Props = {
   issueId: string;
 };
 
-export const IssueDetailQuickActions: FC<Props> = observer((props) => {
+export const IssueDetailQuickActions = observer(function IssueDetailQuickActions(props: Props) {
   const { workspaceSlug, projectId, issueId } = props;
   const { t } = useTranslation();
 
@@ -151,19 +149,13 @@ export const IssueDetailQuickActions: FC<Props> = observer((props) => {
   return (
     <>
       <div className="flex items-center justify-end flex-shrink-0">
-        <div className="flex flex-wrap items-center gap-4">
+        <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 ff7e6ac9f1..f52eb5ab8f 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,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useState, Fragment, useEffect } from "react";
 import { TwitterPicker } from "react-color";
 import { Controller, useForm } from "react-hook-form";
@@ -29,7 +26,7 @@ const defaultValues: Partial<IIssueLabel> = {
   color: "#ff0000",
 };
 
-export const LabelCreate: FC<ILabelCreate> = (props) => {
+export function LabelCreate(props: ILabelCreate) {
   const { workspaceSlug, projectId, issueId, values, labelOperations, disabled = false } = props;
   // state
   const [isCreateToggle, setIsCreateToggle] = useState(false);
@@ -79,7 +76,7 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
   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">
@@ -101,7 +98,7 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
                       <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",
                             }}
@@ -140,28 +137,28 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
                 ref={ref}
                 hasError={Boolean(errors.name)}
                 placeholder="Title"
-                className="w-full text-xs px-1.5 py-1"
+                className="w-full text-11 px-1.5 py-1"
                 disabled={isSubmitting}
               />
             )}
           />
           <button
             type="button"
-            className="grid place-items-center rounded bg-red-500 p-1"
+            className="grid place-items-center rounded-sm bg-red-500 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-green-500 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" />
+              <Plus className="h-3.5 w-3.5 text-on-color" />
             )}
           </button>
         </form>
       )}
     </>
   );
-};
+}
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 f3cef9955b..0d2bdbc9bb 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,6 +1,6 @@
-import type { FC } from "react";
 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";
@@ -15,7 +15,7 @@ type TLabelListItem = {
   disabled: boolean;
 };
 
-export const LabelListItem: FC<TLabelListItem> = observer((props) => {
+export const LabelListItem = observer(function LabelListItem(props: TLabelListItem) {
   const { workspaceSlug, projectId, issueId, labelId, values, labelOperations, disabled } = props;
   // hooks
   const { getLabelById } = useLabel();
@@ -31,25 +31,10 @@ export const LabelListItem: FC<TLabelListItem> = observer((props) => {
 
   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="transition-all h-2.5 w-2.5 group-hover:text-danger" />}
+    </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 f2091ecd21..4e3d9030ad 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,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // components
 import { LabelListItem } from "./label-list-item";
@@ -14,7 +13,7 @@ type TLabelList = {
   disabled: boolean;
 };
 
-export const LabelList: FC<TLabelList> = observer((props) => {
+export const LabelList = observer(function LabelList(props: TLabelList) {
   const { workspaceSlug, projectId, issueId, values, labelOperations, disabled } = props;
   const issueLabels = values || undefined;
 
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 5511eb0a61..c8c669bfe0 100644
--- a/apps/web/core/components/issues/issue-detail/label/root.tsx
+++ b/apps/web/core/components/issues/issue-detail/label/root.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useMemo } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
@@ -16,7 +13,6 @@ import { useProjectInbox } from "@/hooks/store/use-project-inbox";
 // types
 import { LabelList, IssueLabelSelectRoot } from "./";
 // TODO: Fix this import statement, as core should not import from ee
-// eslint-disable-next-line import/order
 
 export type TIssueLabel = {
   workspaceSlug: string;
@@ -33,7 +29,7 @@ export type TLabelOperations = {
   createLabel: (workspaceSlug: string, projectId: string, data: Partial<IIssueLabel>) => Promise<any>;
 };
 
-export const IssueLabel: FC<TIssueLabel> = observer((props) => {
+export const IssueLabel = observer(function IssueLabel(props: TIssueLabel) {
   const {
     workspaceSlug,
     projectId,
@@ -96,7 +92,7 @@ export const IssueLabel: FC<TIssueLabel> = observer((props) => {
   );
 
   return (
-    <div className="relative flex flex-wrap items-center gap-1">
+    <div className="relative flex flex-wrap items-center gap-1 min-h-7.5 w-full 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 e115e0dd38..94ac6862d6 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,12 @@
 import { Fragment, useState } from "react";
 import { observer } from "mobx-react";
 import { usePopper } from "react-popper";
-import { Check, Loader, Search } from "lucide-react";
+import { Check, Loader, Plus, Search } 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 type { IIssueLabel } from "@plane/types";
 import { EUserProjectRoles } from "@plane/types";
 // helpers
@@ -25,7 +25,7 @@ export interface IIssueLabelSelect {
   onAddLabel: (workspaceSlug: string, projectId: string, data: Partial<IIssueLabel>) => Promise<any>;
 }
 
-export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) => {
+export const IssueLabelSelect = observer(function IssueLabelSelect(props: IIssueLabelSelect) {
   const { workspaceSlug, projectId, issueId, values, onSelect, onAddLabel } = props;
   const { t } = useTranslation();
   // store hooks
@@ -72,7 +72,7 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
     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 +85,7 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
 
   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 +114,36 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
     <>
       <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={<Plus />}
             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 whitespace-nowrap rounded-sm border border-strong bg-surface-1 py-2.5 text-11 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">
+                <Search 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")}
@@ -162,15 +155,15 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
             </div>
             <div className={`vertical-scrollbar scrollbar-sm mt-2 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 select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${
+                        selected ? "text-primary" : "text-secondary"
                       }`
                     }
                   >
@@ -197,19 +190,19 @@ export const IssueLabelSelect: React.FC<IIssueLabelSelect> = observer((props) =>
                     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 3393e8cc59..22dc6a8258 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,4 +1,3 @@
-import type { FC } from "react";
 // components
 import type { TLabelOperations } from "../root";
 import { IssueLabelSelect } from "./label-select";
@@ -12,7 +11,7 @@ type TIssueLabelSelectRoot = {
   labelOperations: TLabelOperations;
 };
 
-export const IssueLabelSelectRoot: FC<TIssueLabelSelectRoot> = (props) => {
+export function IssueLabelSelectRoot(props: TIssueLabelSelectRoot) {
   const { workspaceSlug, projectId, issueId, values, labelOperations } = props;
 
   const handleLabel = async (_labelIds: string[]) => {
@@ -29,4 +28,4 @@ export const IssueLabelSelectRoot: FC<TIssueLabelSelectRoot> = (props) => {
       onAddLabel={labelOperations.createLabel}
     />
   );
-};
+}
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 d19b11458a..14113d3115 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,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useEffect } from "react";
 import { observer } from "mobx-react";
@@ -33,7 +31,9 @@ const defaultValues: TIssueLinkCreateFormFieldOptions = {
   url: "",
 };
 
-export const IssueLinkCreateUpdateModal: FC<TIssueLinkCreateEditModal> = observer((props) => {
+export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdateModal(
+  props: TIssueLinkCreateEditModal
+) {
   const { isModalOpen, handleOnClose, linkOperations, issueServiceType } = props;
   // i18n
   const { t } = useTranslation();
@@ -73,12 +73,12 @@ export const IssueLinkCreateUpdateModal: FC<TIssueLinkCreateEditModal> = observe
     <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 +100,12 @@ export const IssueLinkCreateUpdateModal: FC<TIssueLinkCreateEditModal> = observe
                   />
                 )}
               />
-              {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">{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="text-caption-xs-regular block">{t("common.optional")}</span>
               </label>
               <Controller
                 control={control}
@@ -126,11 +126,11 @@ export const IssueLinkCreateUpdateModal: FC<TIssueLinkCreateEditModal> = observe
             </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="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
+          <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/link-detail.tsx b/apps/web/core/components/issues/issue-detail/links/link-detail.tsx
index 0db28e8bee..6cc35199ff 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,19 +1,12 @@
-"use client";
-
-import type { FC } from "react";
-// hooks
-// ui
 import { Pencil, Trash2, ExternalLink } from "lucide-react";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
 import { getIconForLink, copyTextToClipboard, calculateTimeAgo } from "@plane/utils";
-// icons
-// types
-// helpers
-//
+// hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useMember } from "@/hooks/store/use-member";
 import { usePlatformOS } from "@/hooks/use-platform-os";
+// types
 import type { TLinkOperationsModal } from "./create-update-link-modal";
 
 export type TIssueLinkDetail = {
@@ -22,7 +15,7 @@ export type TIssueLinkDetail = {
   isNotAllowed: boolean;
 };
 
-export const IssueLinkDetail: FC<TIssueLinkDetail> = (props) => {
+export function IssueLinkDetail(props: TIssueLinkDetail) {
   // props
   const { linkId, linkOperations, isNotAllowed } = props;
   // hooks
@@ -47,7 +40,7 @@ export const IssueLinkDetail: FC<TIssueLinkDetail> = (props) => {
 
   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={() => {
@@ -61,13 +54,13 @@ export const IssueLinkDetail: FC<TIssueLinkDetail> = (props) => {
         >
           <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 stroke-2 text-tertiary group-hover:text-primary flex-shrink-0" />
             </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>
@@ -77,26 +70,26 @@ export const IssueLinkDetail: FC<TIssueLinkDetail> = (props) => {
             <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" />
+                <Pencil 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" />
+                <ExternalLink 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();
@@ -110,7 +103,7 @@ export const IssueLinkDetail: FC<TIssueLinkDetail> = (props) => {
         </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 && (
@@ -123,4 +116,4 @@ export const IssueLinkDetail: FC<TIssueLinkDetail> = (props) => {
       </div>
     </div>
   );
-};
+}
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 182b7bca45..34c186a1b2 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,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { Pencil, Trash2, Copy, Link } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
@@ -24,7 +21,7 @@ type TIssueLinkItem = {
   issueServiceType?: TIssueServiceType;
 };
 
-export const IssueLinkItem: FC<TIssueLinkItem> = observer((props) => {
+export const IssueLinkItem = observer(function IssueLinkItem(props: TIssueLinkItem) {
   // props
   const { linkId, linkOperations, isNotAllowed, issueServiceType = EIssueServiceType.ISSUES } = props;
   // hooks
@@ -50,29 +47,32 @@ export const IssueLinkItem: FC<TIssueLinkItem> = observer((props) => {
     <>
       <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 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-surface-2 hover:bg-layer-1 border-[0.5px] border-subtle rounded-sm"
       >
-        <div className="flex items-center gap-2.5 truncate flex-grow">
+        <div className="flex items-center gap-2.5 min-w-0 flex-1">
           {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" />
+            <Link className="size-4 text-tertiary group-hover:text-primary flex-shrink-0" />
           )}
           <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-1 w-0 text-body-xs-regular cursor-pointer flex items-center"
             >
-              {linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
-
-              {linkTitle && linkTitle !== "" && <span className="text-custom-text-400 text-xs">{linkTitle}</span>}
+              <span className="truncate flex-1 w-0">
+                {linkDetail.title && linkDetail.title !== "" ? linkDetail.title : linkDetail.url}
+                {linkTitle && linkTitle !== "" && (
+                  <span className="text-placeholder text-caption-sm-regular"> {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">
+          <p className="p-1 text-caption-sm-regular align-bottom leading-5 text-placeholder group-hover-text-secondary">
             {calculateTimeAgo(linkDetail.created_at)}
           </p>
           <span
@@ -84,13 +84,13 @@ export const IssueLinkItem: FC<TIssueLinkItem> = observer((props) => {
                 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 place-items-center rounded-sm p-1 text-placeholder outline-none group-hover:text-secondary cursor-pointer hover:bg-layer-1"
           >
             <Copy 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}
@@ -101,7 +101,7 @@ export const IssueLinkItem: FC<TIssueLinkItem> = observer((props) => {
                 toggleIssueLinkModal(true);
               }}
             >
-              <Pencil className="h-3 w-3 stroke-[1.5] text-custom-text-200" />
+              <Pencil className="h-3 w-3 stroke-[1.5] text-secondary" />
               {t("common.actions.edit")}
             </CustomMenu.MenuItem>
             <CustomMenu.MenuItem
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 8a6230dc04..34d842c146 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,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import type { TIssueServiceType } from "@plane/types";
@@ -17,7 +16,7 @@ type TLinkList = {
   issueServiceType: TIssueServiceType;
 };
 
-export const LinkList: FC<TLinkList> = observer((props) => {
+export const LinkList = observer(function LinkList(props: TLinkList) {
   // props
   const { issueId, linkOperations, disabled = false, issueServiceType } = props;
   // hooks
@@ -30,7 +29,7 @@ export const LinkList: FC<TLinkList> = observer((props) => {
   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 db85a9eb07..c4b2ca08de 100644
--- a/apps/web/core/components/issues/issue-detail/links/links.tsx
+++ b/apps/web/core/components/issues/issue-detail/links/links.tsx
@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // computed
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
@@ -14,7 +13,7 @@ export type TIssueLinkList = {
   disabled?: boolean;
 };
 
-export const IssueLinkList: FC<TIssueLinkList> = observer((props) => {
+export const IssueLinkList = observer(function IssueLinkList(props: TIssueLinkList) {
   // props
   const { issueId, linkOperations, disabled = false } = props;
   // hooks
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 6223ecbaee..693d3afee7 100644
--- a/apps/web/core/components/issues/issue-detail/links/root.tsx
+++ b/apps/web/core/components/issues/issue-detail/links/root.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useCallback, useMemo, useState } from "react";
 import { Plus } from "lucide-react";
 // plane imports
@@ -26,7 +23,7 @@ export type TIssueLinkRoot = {
   disabled?: boolean;
 };
 
-export const IssueLinkRoot: FC<TIssueLinkRoot> = (props) => {
+export function IssueLinkRoot(props: TIssueLinkRoot) {
   // props
   const { workspaceSlug, projectId, issueId, disabled = false } = props;
   // hooks
@@ -116,13 +113,13 @@ export const IssueLinkRoot: FC<TIssueLinkRoot> = (props) => {
         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 outline-none duration-300 hover:bg-surface-2 ${
                 disabled ? "cursor-not-allowed" : "cursor-pointer"
               }`}
               onClick={() => toggleIssueLinkModal(true)}
@@ -139,4 +136,4 @@ export const IssueLinkRoot: FC<TIssueLinkRoot> = (props) => {
       </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 97c8c6dc69..78ac4e7507 100644
--- a/apps/web/core/components/issues/issue-detail/main-content.tsx
+++ b/apps/web/core/components/issues/issue-detail/main-content.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -44,7 +42,7 @@ type Props = {
   isArchived: boolean;
 };
 
-export const IssueMainContent: React.FC<Props> = observer((props) => {
+export const IssueMainContent = observer(function IssueMainContent(props: Props) {
   const { workspaceSlug, projectId, issueId, issueOperations, isEditable, isArchived } = props;
   // refs
   const editorRef = useRef<EditorRefApi>(null);
@@ -130,16 +128,17 @@ export const IssueMainContent: React.FC<Props> = observer((props) => {
 
         <DescriptionInput
           issueSequenceId={issue.sequence_id}
-          containerClassName="-ml-3 border-none"
+          containerClassName="p-0 border-none"
           disabled={isArchived || !isEditable}
           editorRef={editorRef}
           entityId={issue.id}
           fileAssetType={EFileAssetType.ISSUE_DESCRIPTION}
           initialValue={issue.description_html}
-          onSubmit={async (value) => {
+          onSubmit={async (value, isMigrationUpdate) => {
             if (!issue.id || !issue.project_id) return;
             await issueOperations.update(workspaceSlug, issue.project_id, issue.id, {
               description_html: value,
+              ...(isMigrationUpdate ? { skip_activity: "true" } : {}),
             });
           }}
           projectId={issue.project_id}
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 a877d97ee7..42e0fe1ec2 100644
--- a/apps/web/core/components/issues/issue-detail/module-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/module-select.tsx
@@ -21,7 +21,7 @@ type TIssueModuleSelect = {
   disabled?: boolean;
 };
 
-export const IssueModuleSelect: React.FC<TIssueModuleSelect> = observer((props) => {
+export const IssueModuleSelect = observer(function IssueModuleSelect(props: TIssueModuleSelect) {
   const { className = "", workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
   const { t } = useTranslation();
   // states
@@ -64,8 +64,8 @@ export const IssueModuleSelect: React.FC<TIssueModuleSelect> = observer((props)
         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 c248d5bfea..625b0b57a3 100644
--- a/apps/web/core/components/issues/issue-detail/parent-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/parent-select.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -34,7 +32,7 @@ type TIssueParentSelect = {
   workItemLink: string;
 };
 
-export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props) => {
+export const IssueParentSelect = observer(function IssueParentSelect(props: TIssueParentSelect) {
   const {
     className = "",
     disabled = false,
@@ -74,11 +72,11 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
       <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 px-2 py-0.5 rounded-sm 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
         )}
@@ -86,7 +84,7 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
         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 && (
@@ -95,7 +93,8 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
                     issueTypeId={parentIssue.type_id}
                     projectIdentifier={parentIssueProjectDetails?.identifier}
                     issueSequenceId={parentIssue.sequence_id}
-                    textContainerClassName="text-xs font-medium text-green-700"
+                    size="xs"
+                    variant="secondary"
                   />
                 )}
               </Link>
@@ -110,18 +109,18 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
                     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" />
                 </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,
+              "text-placeholder": !issue.parent_id && !parentIssue,
             })}
           >
             <Pencil className="h-2.5 w-2.5 flex-shrink-0" />
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 24a84d06c7..7b5e5165ba 100644
--- a/apps/web/core/components/issues/issue-detail/parent/root.tsx
+++ b/apps/web/core/components/issues/issue-detail/parent/root.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
 import { MinusCircle } from "lucide-react";
@@ -31,7 +28,7 @@ export type TIssueParentDetail = {
   issueOperations: TIssueOperations;
 };
 
-export const IssueParentDetail: FC<TIssueParentDetail> = observer((props) => {
+export const IssueParentDetail = observer(function IssueParentDetail(props: TIssueParentDetail) {
   const { workspaceSlug, projectId, issueId, issue, issueOperations } = props;
   // router
   const router = useRouter();
@@ -71,7 +68,7 @@ export const IssueParentDetail: FC<TIssueParentDetail> = observer((props) => {
 
   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 whitespace-nowrap rounded-md border border-strong bg-layer-1 px-2.5 py-1 text-11">
         <ControlLink href={workItemLink} onClick={handleParentIssueClick}>
           <div className="flex items-center gap-2">
             <div className="flex items-center gap-2.5">
@@ -80,18 +77,17 @@ export const IssueParentDetail: FC<TIssueParentDetail> = observer((props) => {
                 <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} />
 
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 8e8f20e3da..518a336cef 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,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // ui
 import { CustomMenu } from "@plane/ui";
@@ -17,7 +14,7 @@ type TIssueParentSiblingItem = {
   issueId: string;
 };
 
-export const IssueParentSiblingItem: FC<TIssueParentSiblingItem> = observer((props) => {
+export const IssueParentSiblingItem = observer(function IssueParentSiblingItem(props: TIssueParentSiblingItem) {
   const { workspaceSlug, issueId } = props;
   // hooks
   const { getProjectById } = useProject();
@@ -52,7 +49,7 @@ export const IssueParentSiblingItem: FC<TIssueParentSiblingItem> = observer((pro
               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 0784a8b32b..4a666db2e1 100644
--- a/apps/web/core/components/issues/issue-detail/parent/siblings.tsx
+++ b/apps/web/core/components/issues/issue-detail/parent/siblings.tsx
@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 import type { TIssue } from "@plane/types";
@@ -14,7 +13,7 @@ export type TIssueParentSiblings = {
   parentIssue: TIssue;
 };
 
-export const IssueParentSiblings: FC<TIssueParentSiblings> = observer((props) => {
+export const IssueParentSiblings = observer(function IssueParentSiblings(props: TIssueParentSiblings) {
   const { workspaceSlug, currentIssue, parentIssue } = props;
   // hooks
   const {
@@ -36,7 +35,7 @@ export const IssueParentSiblings: FC<TIssueParentSiblings> = observer((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 whitespace-nowrap px-1 py-1 text-left text-11 text-secondary">
           Loading
         </div>
       ) : subIssueIds && subIssueIds.length > 0 ? (
@@ -47,7 +46,7 @@ export const IssueParentSiblings: FC<TIssueParentSiblings> = observer((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 whitespace-nowrap px-1 py-1 text-left text-11 text-secondary">
           No sibling work items
         </div>
       )}
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 7e7b6d870f..4abe66ce9b 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,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { stringToEmoji } from "@plane/propel/emoji-icon-picker";
@@ -8,13 +5,9 @@ import { EmojiReactionGroup, EmojiReactionPicker } from "@plane/propel/emoji-rea
 import type { EmojiReactionType } from "@plane/propel/emoji-reaction";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser } from "@plane/types";
-// components
-import { cn, formatTextList } from "@plane/utils";
-// helper
 // hooks
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useMember } from "@/hooks/store/use-member";
-// types
 
 export type TIssueCommentReaction = {
   workspaceSlug: string;
@@ -24,7 +17,7 @@ export type TIssueCommentReaction = {
   disabled?: boolean;
 };
 
-export const IssueCommentReaction: FC<TIssueCommentReaction> = observer((props) => {
+export const IssueCommentReaction = observer(function IssueCommentReaction(props: TIssueCommentReaction) {
   const { workspaceSlug, projectId, commentId, currentUser, disabled = false } = props;
   // state
   const [isPickerOpen, setIsPickerOpen] = useState(false);
@@ -50,7 +43,7 @@ export const IssueCommentReaction: FC<TIssueCommentReaction> = observer((props)
             type: TOAST_TYPE.SUCCESS,
             message: "Reaction created successfully",
           });
-        } catch (error) {
+        } catch (_error) {
           setToast({
             title: "Error!",
             type: TOAST_TYPE.ERROR,
@@ -67,7 +60,7 @@ export const IssueCommentReaction: FC<TIssueCommentReaction> = observer((props)
             type: TOAST_TYPE.SUCCESS,
             message: "Reaction removed successfully",
           });
-        } catch (error) {
+        } catch (_error) {
           setToast({
             title: "Error!",
             type: TOAST_TYPE.ERROR,
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 804e816c25..edc16742c4 100644
--- a/apps/web/core/components/issues/issue-detail/reactions/issue.tsx
+++ b/apps/web/core/components/issues/issue-detail/reactions/issue.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { stringToEmoji } from "@plane/propel/emoji-icon-picker";
@@ -10,7 +7,7 @@ import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser } from "@plane/types";
 // hooks
 // ui
-import { cn, formatTextList } from "@plane/utils";
+import { cn } from "@plane/utils";
 // helpers
 import { useIssueDetail } from "@/hooks/store/use-issue-detail";
 import { useMember } from "@/hooks/store/use-member";
@@ -25,7 +22,7 @@ export type TIssueReaction = {
   className?: string;
 };
 
-export const IssueReaction: FC<TIssueReaction> = observer((props) => {
+export const IssueReaction = observer(function IssueReaction(props: TIssueReaction) {
   const { workspaceSlug, projectId, issueId, currentUser, disabled = false, className = "" } = props;
   // state
   const [isPickerOpen, setIsPickerOpen] = useState(false);
@@ -68,7 +65,7 @@ export const IssueReaction: FC<TIssueReaction> = observer((props) => {
             type: TOAST_TYPE.SUCCESS,
             message: "Reaction removed 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 db8e0822c7..52c9aba5e1 100644
--- a/apps/web/core/components/issues/issue-detail/relation-select.tsx
+++ b/apps/web/core/components/issues/issue-detail/relation-select.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -31,7 +29,7 @@ type TIssueRelationSelect = {
   disabled?: boolean;
 };
 
-export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((props) => {
+export const IssueRelationSelect = observer(function IssueRelationSelect(props: TIssueRelationSelect) {
   const { className = "", workspaceSlug, projectId, issueId, relationKey, disabled = false } = props;
   // hooks
   const { getProjectById } = useProject();
@@ -90,11 +88,11 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
       <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
         )}
@@ -113,7 +111,7 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
                 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 pb-1 pt-1 leading-3 hover:bg-surface-2 ${currRelationOption?.className}`}
                   >
                     <Tooltip tooltipHeading="Title" tooltipContent={currentIssue.name} isMobile={isMobile}>
                       <Link
@@ -126,7 +124,7 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
                         })}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="text-xs font-medium"
+                        className="text-caption-sm-medium"
                         onClick={(e) => e.stopPropagation()}
                       >
                         {`${projectDetails?.identifier}-${currentIssue?.sequence_id}`}
@@ -141,7 +139,7 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
                             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" />
                         </span>
                       </Tooltip>
                     )}
@@ -150,12 +148,12 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
               })}
             </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" />
diff --git a/apps/web/core/components/issues/issue-detail/root.tsx b/apps/web/core/components/issues/issue-detail/root.tsx
index 7ed13f584a..104f84f101 100644
--- a/apps/web/core/components/issues/issue-detail/root.tsx
+++ b/apps/web/core/components/issues/issue-detail/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useMemo } from "react";
 import { observer } from "mobx-react";
@@ -56,7 +54,7 @@ export type TIssueDetailRoot = {
   is_archived?: boolean;
 };
 
-export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
+export const IssueDetailRoot = observer(function IssueDetailRoot(props: TIssueDetailRoot) {
   const { t } = useTranslation();
   const { workspaceSlug, projectId, issueId, is_archived = false } = props;
   // router
@@ -303,7 +301,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
         />
       ) : (
         <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}
@@ -314,7 +312,7 @@ export const IssueDetailRoot: FC<TIssueDetailRoot> = observer((props) => {
             />
           </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 7347941f67..d64665467b 100644
--- a/apps/web/core/components/issues/issue-detail/sidebar.tsx
+++ b/apps/web/core/components/issues/issue-detail/sidebar.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import React from "react";
 import { observer } from "mobx-react";
 // i18n
 import { useTranslation } from "@plane/i18n";
@@ -36,9 +33,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";
@@ -52,7 +50,7 @@ type Props = {
   isEditable: boolean;
 };
 
-export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
+export const IssueDetailsSidebar = observer(function IssueDetailsSidebar(props: Props) {
   const { t } = useTranslation();
   const { workspaceSlug, projectId, issueId, issueOperations, isEditable } = props;
   // store hooks
@@ -80,35 +78,26 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((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 items-center h-full w-full flex-col 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={`mb-2 mt-4 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 })}
@@ -117,51 +106,37 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((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="w-full h-7.5 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="px-2 flex gap-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}
@@ -173,22 +148,16 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((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 items-center gap-2 w-full">
                 <DateDropdown
                   placeholder={t("issue.add.due_date")}
                   value={issue.target_date}
@@ -200,27 +169,21 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((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": 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) =>
@@ -229,81 +192,66 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((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="w-full grow h-7.5"
                   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="w-full h-7.5 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 d98e1b17ad..33f58a9297 100644
--- a/apps/web/core/components/issues/issue-detail/subscription.tsx
+++ b/apps/web/core/components/issues/issue-detail/subscription.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useState } from "react";
 import { isNil } from "lodash-es";
@@ -24,7 +22,7 @@ export type TIssueSubscription = {
   serviceType?: EIssueServiceType;
 };
 
-export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
+export const IssueSubscription = observer(function IssueSubscription(props: TIssueSubscription) {
   const { workspaceSlug, projectId, issueId, serviceType = EIssueServiceType.ISSUES } = props;
   const { t } = useTranslation();
   // hooks
@@ -79,12 +77,12 @@ export const IssueSubscription: FC<TIssueSubscription> = observer((props) => {
   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 575d012414..21980eab95 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,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useCallback, useEffect } from "react";
 import { observer } from "mobx-react";
@@ -38,7 +36,7 @@ interface IBaseCalendarRoot {
   canEditPropertiesBasedOnProject?: (projectId: string) => boolean;
 }
 
-export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
+export const BaseCalendarRoot = observer(function BaseCalendarRoot(props: IBaseCalendarRoot) {
   const {
     QuickActions,
     addIssuesToView,
@@ -52,7 +50,8 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
   const { workspaceSlug } = useParams();
 
   // hooks
-  const storeType = isEpic ? EIssuesStoreType.EPIC : (useIssueStoreType() as CalendarStoreType);
+  const fallbackStoreType = useIssueStoreType() as CalendarStoreType;
+  const storeType = isEpic ? EIssuesStoreType.EPIC : fallbackStoreType;
   const { allowPermissions } = useUserPermissions();
   const { issues, issuesFilter, issueMap } = useIssues(storeType);
   const {
@@ -152,7 +151,7 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => {
 
   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 347d2252b7..b6569300f4 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/calendar.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/calendar.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 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";
@@ -41,12 +39,7 @@ import { CalendarWeekDays } from "./week-days";
 import { CalendarWeekHeader } from "./week-header";
 
 type Props = {
-  issuesFilterStore:
-    | IProjectIssuesFilter
-    | IModuleIssuesFilter
-    | ICycleIssuesFilter
-    | IProjectViewIssuesFilter
-    | IProjectEpicsFilter;
+  issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
   issues: TIssueMap | undefined;
   groupedIssueIds: TGroupedIssues;
   layout: "month" | "week" | undefined;
@@ -74,7 +67,7 @@ type Props = {
   isEpic?: boolean;
 };
 
-export const CalendarChart: React.FC<Props> = observer((props) => {
+export const CalendarChart = observer(function CalendarChart(props: Props) {
   const {
     issuesFilterStore,
     issues,
@@ -154,7 +147,7 @@ export const CalendarChart: React.FC<Props> = observer((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
@@ -207,7 +200,7 @@ export const CalendarChart: React.FC<Props> = observer((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()}`}
@@ -235,7 +228,7 @@ export const CalendarChart: React.FC<Props> = observer((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 52ccf37e45..9c92945eb4 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,5 +1,3 @@
-"use client";
-
 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";
@@ -25,12 +23,7 @@ import type { TRenderQuickActions } from "../list/list-view-types";
 import { CalendarIssueBlocks } from "./issue-blocks";
 
 type Props = {
-  issuesFilterStore:
-    | IProjectIssuesFilter
-    | IModuleIssuesFilter
-    | ICycleIssuesFilter
-    | IProjectViewIssuesFilter
-    | IProjectEpicsFilter;
+  issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
   date: ICalendarDate;
   issues: TIssueMap | undefined;
   groupedIssueIds: TGroupedIssues;
@@ -55,7 +48,7 @@ type Props = {
   isEpic?: boolean;
 };
 
-export const CalendarDayTile: React.FC<Props> = observer((props) => {
+export const CalendarDayTile = observer(function CalendarDayTile(props: Props) {
   const {
     issuesFilterStore,
     date,
@@ -142,25 +135,25 @@ export const CalendarDayTile: React.FC<Props> = observer((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>
           ) : (
@@ -201,16 +194,16 @@ export const CalendarDayTile: React.FC<Props> = observer((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",
+            "text-13 py-2.5 h-full w-full font-medium mx-auto flex flex-col justify-start items-center md:hidden cursor-pointer opacity-80",
             {
-              "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,
+              "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/months-dropdown.tsx b/apps/web/core/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
index 553e0d2d50..dff887c26f 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
@@ -17,14 +17,9 @@ import type { IProjectViewIssuesFilter } from "@/store/issue/project-views";
 // helpers
 
 interface Props {
-  issuesFilterStore:
-    | IProjectIssuesFilter
-    | IModuleIssuesFilter
-    | ICycleIssuesFilter
-    | IProjectViewIssuesFilter
-    | IProjectEpicsFilter;
+  issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
 }
-export const CalendarMonthsDropdown: React.FC<Props> = observer((props: Props) => {
+export const CalendarMonthsDropdown = observer(function CalendarMonthsDropdown(props: Props) {
   const { issuesFilterStore } = props;
 
   const issueCalendarView = useCalendarView();
@@ -85,7 +80,7 @@ export const CalendarMonthsDropdown: React.FC<Props> = observer((props: Props) =
         <button
           type="button"
           ref={setReferenceElement}
-          className="text-xl font-semibold outline-none"
+          className="text-18 font-semibold outline-none"
           disabled={calendarLayout === "week"}
         >
           {calendarLayout === "month"
@@ -107,7 +102,7 @@ export const CalendarMonthsDropdown: React.FC<Props> = observer((props: Props) =
             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
@@ -120,7 +115,7 @@ export const CalendarMonthsDropdown: React.FC<Props> = observer((props: Props) =
               >
                 <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"
@@ -137,7 +132,7 @@ export const CalendarMonthsDropdown: React.FC<Props> = observer((props: Props) =
                 <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 b0284dfff4..b26e37a8de 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,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -27,12 +25,7 @@ import type { IProjectIssuesFilter } from "@/store/issue/project";
 import type { IProjectViewIssuesFilter } from "@/store/issue/project-views";
 
 interface ICalendarHeader {
-  issuesFilterStore:
-    | IProjectIssuesFilter
-    | IModuleIssuesFilter
-    | ICycleIssuesFilter
-    | IProjectViewIssuesFilter
-    | IProjectEpicsFilter;
+  issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
   updateFilters?: (
     projectId: string,
     filterType: TSupportedFilterTypeForUpdate,
@@ -40,7 +33,7 @@ interface ICalendarHeader {
   ) => Promise<void>;
 }
 
-export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((props) => {
+export const CalendarOptionsDropdown = observer(function CalendarOptionsDropdown(props: ICalendarHeader) {
   const { issuesFilterStore, updateFilters } = props;
 
   const { t } = useTranslation();
@@ -106,8 +99,8 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
           <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 md:flex items-center gap-1.5 rounded-sm bg-layer-1 px-2.5 py-1 text-11 outline-none hover:bg-layer-1 ${
+                  open ? "text-primary" : "text-secondary"
                 }`}
               >
                 <div className="font-medium">{t("common.options")}</div>
@@ -118,7 +111,7 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
                 </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>
@@ -136,14 +129,14 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
                 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}
@@ -152,7 +145,7 @@ export const CalendarOptionsDropdown: React.FC<ICalendarHeader> = observer((prop
                   ))}
                   <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 3bf90241c0..6f653963dd 100644
--- a/apps/web/core/components/issues/issue-layouts/calendar/header.tsx
+++ b/apps/web/core/components/issues/issue-layouts/calendar/header.tsx
@@ -16,12 +16,7 @@ import type { IProjectViewIssuesFilter } from "@/store/issue/project-views";
 import { CalendarMonthsDropdown, CalendarOptionsDropdown } from "./dropdowns";
 
 interface ICalendarHeader {
-  issuesFilterStore:
-    | IProjectIssuesFilter
-    | IModuleIssuesFilter
-    | ICycleIssuesFilter
-    | IProjectViewIssuesFilter
-    | IProjectEpicsFilter;
+  issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
   updateFilters?: (
     projectId: string,
     filterType: TSupportedFilterTypeForUpdate,
@@ -30,7 +25,7 @@ interface ICalendarHeader {
   setSelectedDate: (date: Date) => void;
 }
 
-export const CalendarHeader: React.FC<ICalendarHeader> = observer((props) => {
+export const CalendarHeader = observer(function CalendarHeader(props: ICalendarHeader) {
   const { issuesFilterStore, updateFilters, setSelectedDate } = props;
 
   const { t } = useTranslation();
@@ -114,7 +109,7 @@ export const CalendarHeader: React.FC<ICalendarHeader> = observer((props) => {
       <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 hover:bg-layer-transparent-hover px-2.5 py-1 text-11 font-medium text-secondary  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 d2c1c927f9..fbc5177ac9 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
@@ -19,7 +19,7 @@ type Props = {
   canEditProperties: (projectId: string | undefined) => boolean;
 };
 
-export const CalendarIssueBlockRoot: React.FC<Props> = observer((props) => {
+export const CalendarIssueBlockRoot = observer(function CalendarIssueBlockRoot(props: Props) {
   const { issueId, quickActions, isDragDisabled, isEpic = false, canEditProperties } = props;
 
   const issueRef = useRef<HTMLAnchorElement | null>(null);
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 5a523675ee..1f440609c2 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,6 +1,3 @@
-"use client";
-
-/* eslint-disable react/display-name */
 import { useState, useRef, forwardRef } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -34,7 +31,7 @@ type Props = {
 };
 
 export const CalendarIssueBlock = observer(
-  forwardRef<HTMLAnchorElement, Props>((props, ref) => {
+  forwardRef(function CalendarIssueBlock(props: Props, ref: React.ForwardedRef<HTMLAnchorElement>) {
     const { issue, quickActions, isDragging = false, isEpic = false } = props;
     // states
     const [isMenuActive, setIsMenuActive] = useState(false);
@@ -62,8 +59,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)}
       >
@@ -95,29 +92,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 text-13 text-primary rounded-sm border-b md:border-[1px] border-subtle hover:border-subtle-1"
               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 left-0 top-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 md:h-8 w-full items-center justify-between gap-1.5 rounded-sm  md:px-1 px-4 py-1.5 ",
                     {
-                      "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),
+                      "bg-surface-2 shadow-raised-200 border-accent-strong": 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,
                       }}
@@ -126,11 +123,12 @@ 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:font-regular md:text-11">{issue.name}</div>
                   </div>
                   <div
                     className={cn("flex-shrink-0 size-5", {
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 b4af6296aa..48bda9e73a 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
@@ -28,7 +28,7 @@ type Props = {
   isEpic?: boolean;
 };
 
-export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
+export const CalendarIssueBlocks = observer(function CalendarIssueBlocks(props: Props) {
   const {
     date,
     issueIdList,
@@ -78,12 +78,12 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((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 md:h-8 w-full items-center justify-between gap-1.5 rounded-sm md:px-1 px-4 py-1.5 bg-layer-1 animate-pulse" />
         </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 +99,7 @@ export const CalendarIssueBlocks: React.FC<Props> = observer((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 whitespace-nowrap rounded-sm text-11 px-1.5 py-1 font-medium  hover:bg-layer-1 text-accent-primary 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 3b8d7660ab..7d96d9fa0e 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,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useState } from "react";
 import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
 import { observer } from "mobx-react";
@@ -27,7 +24,9 @@ type TCalendarQuickAddIssueActions = {
   isEpic?: boolean;
 };
 
-export const CalendarQuickAddIssueActions: FC<TCalendarQuickAddIssueActions> = observer((props) => {
+export const CalendarQuickAddIssueActions = observer(function CalendarQuickAddIssueActions(
+  props: TCalendarQuickAddIssueActions
+) {
   const { prePopulatedData, quickAddCallback, addIssuesToView, onOpen, isEpic = false } = props;
   const { t } = useTranslation();
   // router
@@ -105,7 +104,7 @@ export const CalendarQuickAddIssueActions: FC<TCalendarQuickAddIssueActions> = o
         customQuickAddButton={
           <div
             className={cn(
-              "md:opacity-0 rounded md:border-[0.5px] border-custom-border-200 md:group-hover:opacity-100",
+              "md:opacity-0 rounded-sm  bg-layer-transparent hover:bg-layer-transparent-hover md:group-hover:opacity-100 overflow-hidden",
               {
                 block: isMenuOpen,
               }
@@ -118,9 +117,9 @@ export const CalendarQuickAddIssueActions: FC<TCalendarQuickAddIssueActions> = o
               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">
+                <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 stroke-2 flex-shrink-0" />
-                  <span className="text-sm font-medium flex-shrink-0">
+                  <span className="text-13 font-medium flex-shrink-0">
                     {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 0a2696b20f..69469c89f7 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
@@ -9,13 +9,13 @@ import { useIssues } from "@/hooks/store/use-issues";
 import { CycleIssueQuickActions } from "../../quick-action-dropdowns";
 import { BaseCalendarRoot } from "../base-calendar-root";
 
-export const CycleCalendarLayout: React.FC = observer(() => {
+export const CycleCalendarLayout = observer(function CycleCalendarLayout() {
   const { currentProjectCompletedCycleIds } = useCycle();
   const { workspaceSlug, projectId, cycleId } = useParams();
 
-  const { issues } = useIssues(EIssuesStoreType.CYCLE);
-
-  if (!cycleId) return null;
+  const {
+    issues: { addIssueToCycle },
+  } = useIssues(EIssuesStoreType.CYCLE);
 
   const isCompletedCycle =
     cycleId && currentProjectCompletedCycleIds ? currentProjectCompletedCycleIds.includes(cycleId.toString()) : false;
@@ -23,11 +23,13 @@ export const CycleCalendarLayout: React.FC = observer(() => {
   const addIssuesToView = useCallback(
     (issueIds: string[]) => {
       if (!workspaceSlug || !projectId || !cycleId) throw new Error();
-      return issues.addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds);
+      return addIssueToCycle(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), issueIds);
     },
-    [issues?.addIssueToCycle, workspaceSlug, projectId, cycleId]
+    [addIssueToCycle, workspaceSlug, projectId, cycleId]
   );
 
+  if (!cycleId) return null;
+
   return (
     <BaseCalendarRoot
       QuickActions={CycleIssueQuickActions}
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 075d395a3f..b06e5b87c8 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
@@ -9,21 +9,23 @@ import { useIssues } from "@/hooks/store/use-issues";
 import { ModuleIssueQuickActions } from "../../quick-action-dropdowns";
 import { BaseCalendarRoot } from "../base-calendar-root";
 
-export const ModuleCalendarLayout: React.FC = observer(() => {
+export const ModuleCalendarLayout = observer(function ModuleCalendarLayout() {
   const { workspaceSlug, projectId, moduleId } = useParams();
 
-  const { issues } = useIssues(EIssuesStoreType.MODULE);
-
-  if (!moduleId) return null;
+  const {
+    issues: { addIssuesToModule },
+  } = useIssues(EIssuesStoreType.MODULE);
 
   const addIssuesToView = useCallback(
     (issueIds: string[]) => {
       if (!workspaceSlug || !projectId || !moduleId) throw new Error();
-      return issues.addIssuesToModule(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), issueIds);
+      return addIssuesToModule(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), issueIds);
     },
-    [issues?.addIssuesToModule, workspaceSlug, projectId, moduleId]
+    [addIssuesToModule, workspaceSlug, projectId, moduleId]
   );
 
+  if (!moduleId) return null;
+
   return (
     <BaseCalendarRoot
       QuickActions={ModuleIssueQuickActions}
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 6cf681fc74..0214473a1c 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
@@ -8,7 +8,7 @@ import { useUserPermissions } from "@/hooks/store/user";
 import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
 import { BaseCalendarRoot } from "../base-calendar-root";
 
-export const CalendarLayout: React.FC = observer(() => {
+export const CalendarLayout = observer(function CalendarLayout() {
   // router
   const { workspaceSlug } = useParams();
   // hooks
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 72ab231fbd..0cb8915b7b 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
@@ -4,7 +4,7 @@ import { useParams } from "next/navigation";
 import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
 import { BaseCalendarRoot } from "../base-calendar-root";
 
-export const ProjectViewCalendarLayout: React.FC = observer(() => {
+export const ProjectViewCalendarLayout = observer(function ProjectViewCalendarLayout() {
   const { viewId } = useParams();
 
   return <BaseCalendarRoot QuickActions={ProjectIssueQuickActions} viewId={viewId.toString()} />;
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 f234e09873..edc8716ea4 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
@@ -14,12 +14,7 @@ import type { TRenderQuickActions } from "../list/list-view-types";
 import { CalendarDayTile } from "./day-tile";
 
 type Props = {
-  issuesFilterStore:
-    | IProjectIssuesFilter
-    | IModuleIssuesFilter
-    | ICycleIssuesFilter
-    | IProjectViewIssuesFilter
-    | IProjectEpicsFilter;
+  issuesFilterStore: IProjectIssuesFilter | IModuleIssuesFilter | ICycleIssuesFilter | IProjectViewIssuesFilter;
   issues: TIssueMap | undefined;
   groupedIssueIds: TGroupedIssues;
   week: ICalendarWeek | undefined;
@@ -44,7 +39,7 @@ type Props = {
   isEpic?: boolean;
 };
 
-export const CalendarWeekDays: React.FC<Props> = observer((props) => {
+export const CalendarWeekDays = observer(function CalendarWeekDays(props: Props) {
   const {
     issuesFilterStore,
     issues,
@@ -84,7 +79,7 @@ export const CalendarWeekDays: React.FC<Props> = observer((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 b289c9798b..1bf5b6a95f 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
@@ -11,7 +11,7 @@ type Props = {
   showWeekends: boolean;
 };
 
-export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
+export const CalendarWeekHeader = observer(function CalendarWeekHeader(props: Props) {
   const { isLoading, showWeekends } = props;
   // hooks
   const { data } = useUserProfile();
@@ -22,22 +22,19 @@ export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
 
   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 md:divide-x-[0.5px] divide-subtle-1 text-13 font-medium ${
         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 md:justify-end bg-layer-1 px-4">
             {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 0e97f91063..de57575b8e 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
@@ -10,7 +10,7 @@ import { useUserPermissions } from "@/hooks/store/user";
 import { useWorkItemFilterInstance } from "@/hooks/store/work-item-filters/use-work-item-filter-instance";
 import { useAppRouter } from "@/hooks/use-app-router";
 
-export const ProjectArchivedEmptyState: React.FC = observer(() => {
+export const ProjectArchivedEmptyState = observer(function ProjectArchivedEmptyState() {
   // router
   const router = useAppRouter();
   const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } = useParams();
@@ -21,9 +21,7 @@ export const ProjectArchivedEmptyState: React.FC = observer(() => {
   // store hooks
   const { allowPermissions } = useUserPermissions();
   // derived values
-  const archivedWorkItemFilter = projectId
-    ? useWorkItemFilterInstance(EIssuesStoreType.ARCHIVED, projectId)
-    : undefined;
+  const archivedWorkItemFilter = useWorkItemFilterInstance(EIssuesStoreType.ARCHIVED, projectId);
   const canPerformEmptyStateActions = allowPermissions(
     [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
     EUserPermissionsLevel.PROJECT
@@ -41,7 +39,7 @@ export const ProjectArchivedEmptyState: React.FC = observer(() => {
               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 2ed456f504..2428b66984 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,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { isEmpty } from "lodash-es";
 import { observer } from "mobx-react";
@@ -20,7 +18,7 @@ import { useIssues } from "@/hooks/store/use-issues";
 import { useUserPermissions } from "@/hooks/store/user";
 import { useWorkItemFilterInstance } from "@/hooks/store/work-item-filters/use-work-item-filter-instance";
 
-export const CycleEmptyState: React.FC = observer(() => {
+export const CycleEmptyState = observer(function CycleEmptyState() {
   // router
   const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId, cycleId: routerCycleId } = useParams();
   const workspaceSlug = routerWorkspaceSlug ? routerWorkspaceSlug.toString() : undefined;
@@ -36,7 +34,7 @@ export const CycleEmptyState: React.FC = observer(() => {
   const { toggleCreateIssueModal } = useCommandPalette();
   const { allowPermissions } = useUserPermissions();
   // derived values
-  const cycleWorkItemFilter = cycleId ? useWorkItemFilterInstance(EIssuesStoreType.CYCLE, cycleId) : undefined;
+  const cycleWorkItemFilter = useWorkItemFilterInstance(EIssuesStoreType.CYCLE, cycleId);
   const cycleDetails = cycleId ? getCycleById(cycleId) : undefined;
   const isCompletedCycleSnapshotAvailable = !isEmpty(cycleDetails?.progress_snapshot ?? {});
   const isCompletedAndEmpty = isCompletedCycleSnapshotAvailable || cycleDetails?.status?.toLowerCase() === "completed";
@@ -96,7 +94,7 @@ export const CycleEmptyState: React.FC = observer(() => {
                 label: "Clear filters",
                 onClick: cycleWorkItemFilter?.clearFilters,
                 disabled: !canPerformEmptyStateActions || !cycleWorkItemFilter,
-                variant: "outline-primary",
+                variant: "secondary",
               },
             ]}
           />
@@ -120,7 +118,7 @@ export const CycleEmptyState: React.FC = observer(() => {
                 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 0114128ea0..87ac70cca4 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
@@ -10,7 +10,7 @@ import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";
 
-export const GlobalViewEmptyState: React.FC = observer(() => {
+export const GlobalViewEmptyState = observer(function GlobalViewEmptyState() {
   // plane imports
   const { t } = useTranslation();
   // store hooks
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 0dd8d3c396..44573f94d6 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
@@ -17,7 +17,7 @@ interface Props {
   storeType: EIssuesStoreType;
 }
 
-export const IssueLayoutEmptyState = (props: Props) => {
+export function IssueLayoutEmptyState(props: Props) {
   switch (props.storeType) {
     case EIssuesStoreType.PROJECT:
       return <ProjectEmptyState />;
@@ -44,4 +44,4 @@ export const IssueLayoutEmptyState = (props: Props) => {
     default:
       return null;
   }
-};
+}
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 6c30b79be9..807400411f 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,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -19,7 +17,7 @@ import { useIssues } from "@/hooks/store/use-issues";
 import { useUserPermissions } from "@/hooks/store/user";
 import { useWorkItemFilterInstance } from "@/hooks/store/work-item-filters/use-work-item-filter-instance";
 
-export const ModuleEmptyState: React.FC = observer(() => {
+export const ModuleEmptyState = observer(function ModuleEmptyState() {
   // router
   const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId, moduleId: routerModuleId } = useParams();
   const workspaceSlug = routerWorkspaceSlug ? routerWorkspaceSlug.toString() : undefined;
@@ -34,7 +32,7 @@ export const ModuleEmptyState: React.FC = observer(() => {
   const { toggleCreateIssueModal } = useCommandPalette();
   const { allowPermissions } = useUserPermissions();
   // derived values
-  const moduleWorkItemFilter = moduleId ? useWorkItemFilterInstance(EIssuesStoreType.MODULE, moduleId) : undefined;
+  const moduleWorkItemFilter = useWorkItemFilterInstance(EIssuesStoreType.MODULE, moduleId);
   const canPerformEmptyStateActions = allowPermissions(
     [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
     EUserPermissionsLevel.PROJECT
@@ -83,7 +81,7 @@ export const ModuleEmptyState: React.FC = observer(() => {
                 label: "Clear filters",
                 onClick: moduleWorkItemFilter?.clearFilters,
                 disabled: !canPerformEmptyStateActions || !moduleWorkItemFilter,
-                variant: "outline-primary",
+                variant: "secondary",
               },
             ]}
           />
@@ -106,7 +104,7 @@ export const ModuleEmptyState: React.FC = observer(() => {
                 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 b714855de2..26c90e6982 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
@@ -5,7 +5,7 @@ import { useTranslation } from "@plane/i18n";
 import { EmptyStateDetailed } from "@plane/propel/empty-state";
 
 // TODO: If projectViewId changes, everything breaks. Figure out a better way to handle this.
-export const ProfileViewEmptyState: React.FC = observer(() => {
+export const ProfileViewEmptyState = observer(function ProfileViewEmptyState() {
   // plane hooks
   const { t } = useTranslation();
   // store hooks
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 e8bf3a9d56..d2249c683f 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 +1,3 @@
-export const ProjectEpicsEmptyState: React.FC = () => <></>;
+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 a5a5e9ccbd..11d3c04461 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
@@ -12,7 +12,7 @@ import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useUserPermissions } from "@/hooks/store/user";
 import { useWorkItemFilterInstance } from "@/hooks/store/work-item-filters/use-work-item-filter-instance";
 
-export const ProjectEmptyState: React.FC = observer(() => {
+export const ProjectEmptyState = observer(function ProjectEmptyState() {
   // router
   const { projectId: routerProjectId } = useParams();
   const projectId = routerProjectId ? routerProjectId.toString() : undefined;
@@ -22,7 +22,7 @@ export const ProjectEmptyState: React.FC = observer(() => {
   const { toggleCreateIssueModal } = useCommandPalette();
   const { allowPermissions } = useUserPermissions();
   // derived values
-  const projectWorkItemFilter = projectId ? useWorkItemFilterInstance(EIssuesStoreType.PROJECT, projectId) : undefined;
+  const projectWorkItemFilter = useWorkItemFilterInstance(EIssuesStoreType.PROJECT, projectId);
 
   const canPerformEmptyStateActions = allowPermissions(
     [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER],
@@ -41,7 +41,7 @@ export const ProjectEmptyState: React.FC = observer(() => {
               label: t("project_issues.empty_state.issues_empty_filter.secondary_button.text"),
               onClick: projectWorkItemFilter?.clearFilters,
               disabled: !canPerformEmptyStateActions || !projectWorkItemFilter,
-              variant: "outline-primary",
+              variant: "secondary",
             },
           ]}
         />
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 e89b31f9ea..4ea0dcd4b5 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
@@ -9,7 +9,7 @@ import { captureClick } from "@/helpers/event-tracker.helper";
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useUserPermissions } from "@/hooks/store/user";
 
-export const ProjectViewEmptyState: React.FC = observer(() => {
+export const ProjectViewEmptyState = observer(function ProjectViewEmptyState() {
   // store hooks
   const { toggleCreateIssueModal } = useCommandPalette();
   const { allowPermissions } = useUserPermissions();
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 5d7495f95a..c6df0b2919 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { CloseIcon, CycleGroupIcon } from "@plane/propel/icons";
 import type { TCycleGroups } from "@plane/types";
@@ -14,7 +12,7 @@ type Props = {
   editable: boolean | undefined;
 };
 
-export const AppliedCycleFilters: React.FC<Props> = observer((props) => {
+export const AppliedCycleFilters = observer(function AppliedCycleFilters(props: Props) {
   const { handleRemove, values, editable } = props;
   // store hooks
   const { getCycleById } = useCycle();
@@ -29,13 +27,13 @@ export const AppliedCycleFilters: React.FC<Props> = observer((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 rounded-sm bg-layer-1 p-1 text-11 truncate">
             <CycleGroupIcon cycleGroup={cycleStatus} className="h-3 w-3 flex-shrink-0" />
             <span className="normal-case truncate">{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 6a16042653..da9038c08a 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
@@ -11,7 +11,7 @@ type Props = {
   values: string[];
 };
 
-export const AppliedDateFilters: React.FC<Props> = observer((props) => {
+export const AppliedDateFilters = observer(function AppliedDateFilters(props: Props) {
   const { handleRemove, values } = props;
 
   const getDateLabel = (value: string): string => {
@@ -36,11 +36,11 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
   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/label.tsx b/apps/web/core/components/issues/issue-layouts/filters/applied-filters/label.tsx
index 3a9f0b03aa..61f358d1cd 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
@@ -12,7 +12,7 @@ type Props = {
   editable: boolean | undefined;
 };
 
-export const AppliedLabelsFilters: React.FC<Props> = observer((props) => {
+export const AppliedLabelsFilters = observer(function AppliedLabelsFilters(props: Props) {
   const { handleRemove, labels, values, editable } = props;
 
   return (
@@ -23,7 +23,7 @@ export const AppliedLabelsFilters: React.FC<Props> = observer((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 +34,7 @@ export const AppliedLabelsFilters: React.FC<Props> = observer((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 63de176700..f8e56dcc99 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { CloseIcon } from "@plane/propel/icons";
 // plane ui
@@ -15,7 +13,7 @@ type Props = {
   editable: boolean | undefined;
 };
 
-export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
+export const AppliedMembersFilters = observer(function AppliedMembersFilters(props: Props) {
   const { handleRemove, values, editable } = props;
 
   const {
@@ -30,7 +28,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
         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)}
@@ -41,7 +39,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((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(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 c3518d5840..1053619bb0 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // hooks
 import { CloseIcon, ModuleIcon } from "@plane/propel/icons";
@@ -12,7 +10,7 @@ type Props = {
   editable: boolean | undefined;
 };
 
-export const AppliedModuleFilters: React.FC<Props> = observer((props) => {
+export const AppliedModuleFilters = observer(function AppliedModuleFilters(props: Props) {
   const { handleRemove, values, editable } = props;
   // store hooks
   const { getModuleById } = useModule();
@@ -25,13 +23,13 @@ export const AppliedModuleFilters: React.FC<Props> = observer((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 rounded-sm bg-layer-1 p-1 text-11 truncate">
             <ModuleIcon className="h-3 w-3 flex-shrink-0" />
             <span className="normal-case truncate">{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 3da99980ff..0bc7c768d1 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 
 // icons
@@ -13,19 +11,19 @@ type Props = {
   editable: boolean | undefined;
 };
 
-export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
+export const AppliedPriorityFilters = observer(function AppliedPriorityFilters(props: Props) {
   const { handleRemove, values, editable } = props;
 
   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 fc96163094..e46210de4d 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
@@ -10,7 +10,7 @@ type Props = {
   editable: boolean | undefined;
 };
 
-export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
+export const AppliedProjectFilters = observer(function AppliedProjectFilters(props: Props) {
   const { handleRemove, values, editable } = props;
   // store hooks
   const { projectMap } = useProject();
@@ -23,7 +23,7 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
         if (!projectDetails) return null;
 
         return (
-          <div key={projectId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+          <div key={projectId} className="flex items-center gap-1 rounded-sm bg-layer-1 p-1 text-11">
             <span className="grid place-items-center flex-shrink-0 h-4 w-4">
               <Logo logo={projectDetails.logo_props} size={12} />
             </span>
@@ -31,7 +31,7 @@ export const AppliedProjectFilters: React.FC<Props> = observer((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(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 8d8b645633..f11c5eeab6 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 
 // icons
@@ -12,18 +10,18 @@ type Props = {
   values: string[];
 };
 
-export const AppliedStateGroupFilters: React.FC<Props> = observer((props) => {
+export const AppliedStateGroupFilters = observer(function AppliedStateGroupFilters(props: Props) {
   const { handleRemove, values } = props;
 
   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 851bb953d1..545ce7e6a8 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // icons
 // plane imports
@@ -14,7 +12,7 @@ type Props = {
   editable: boolean | undefined;
 };
 
-export const AppliedStateFilters: React.FC<Props> = observer((props) => {
+export const AppliedStateFilters = observer(function AppliedStateFilters(props: Props) {
   const { handleRemove, states, values, editable } = props;
 
   return (
@@ -25,7 +23,7 @@ export const AppliedStateFilters: React.FC<Props> = observer((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}
@@ -36,7 +34,7 @@ export const AppliedStateFilters: React.FC<Props> = observer((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 7625914db2..f601aeaa0f 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
@@ -28,7 +28,7 @@ type Props = {
   isEpic?: boolean;
 };
 
-export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
+export const DisplayFiltersSelection = observer(function DisplayFiltersSelection(props: Props) {
   const {
     displayFilters,
     displayProperties,
@@ -53,7 +53,7 @@ export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
   }
 
   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 scrollbar-sm relative 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 c6a75c3dfa..3555a381dd 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
@@ -21,7 +21,7 @@ type Props = {
   isEpic?: boolean;
 };
 
-export const FilterDisplayProperties: React.FC<Props> = observer((props) => {
+export const FilterDisplayProperties = observer(function FilterDisplayProperties(props: Props) {
   const {
     displayProperties,
     displayPropertiesToRender,
@@ -37,7 +37,7 @@ export const FilterDisplayProperties: React.FC<Props> = observer((props) => {
   // states
   const [previewEnabled, setPreviewEnabled] = React.useState(true);
   // derived values
-  const projectId = !!routerProjectId ? routerProjectId?.toString() : undefined;
+  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
@@ -72,10 +72,10 @@ export const FilterDisplayProperties: React.FC<Props> = observer((props) => {
               <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 a495c732c9..5ff566c86f 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
@@ -29,7 +29,7 @@ type Props = {
   enabledExtraOptions: TIssueExtraOptions[];
 };
 
-export const FilterExtraOptions: React.FC<Props> = observer((props) => {
+export const FilterExtraOptions = observer(function FilterExtraOptions(props: Props) {
   const { selectedExtraOptions, handleUpdate, enabledExtraOptions } = props;
   // hooks
   const { t } = useTranslation();
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 c5a0838d81..4e60772389 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
@@ -13,7 +13,7 @@ type Props = {
   ignoreGroupedFilters: Partial<TIssueGroupByOptions>[];
 };
 
-export const FilterGroupBy: React.FC<Props> = observer((props) => {
+export const FilterGroupBy = observer(function FilterGroupBy(props: Props) {
   const { displayFilters, groupByOptions, handleUpdate, ignoreGroupedFilters } = props;
   // hooks
   const { t } = useTranslation();
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 1d13a00def..98eab66336 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
@@ -13,7 +13,7 @@ type Props = {
   orderByOptions: TIssueOrderByOptions[];
 };
 
-export const FilterOrderBy: React.FC<Props> = observer((props) => {
+export const FilterOrderBy = observer(function FilterOrderBy(props: Props) {
   const { selectedOrderBy, handleUpdate, orderByOptions } = props;
   // hooks
   const { t } = useTranslation();
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 427e50cb24..0ce1eebf91 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
@@ -14,7 +14,7 @@ type Props = {
   ignoreGroupedFilters: Partial<TIssueGroupByOptions>[];
 };
 
-export const FilterSubGroupBy: React.FC<Props> = observer((props) => {
+export const FilterSubGroupBy = observer(function FilterSubGroupBy(props: Props) {
   // hooks
   const { t } = useTranslation();
 
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 f26a9bd26b..0bd2c18e33 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,5 +1,3 @@
-"use client";
-
 import { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -20,7 +18,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterAssignees: React.FC<Props> = observer((props: Props) => {
+export const FilterAssignees = observer(function FilterAssignees(props: Props) {
   const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
   // states
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -87,7 +85,7 @@ export const FilterAssignees: React.FC<Props> = observer((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"}
@@ -95,7 +93,7 @@ export const FilterAssignees: React.FC<Props> = observer((props: Props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 italic text-placeholder">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 56847644c8..b04b5b2056 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,5 +1,3 @@
-"use client";
-
 import { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -20,7 +18,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterCreatedBy: React.FC<Props> = observer((props: Props) => {
+export const FilterCreatedBy = observer(function FilterCreatedBy(props: Props) {
   const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
   // states
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -80,7 +78,7 @@ export const FilterCreatedBy: React.FC<Props> = observer((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"}
@@ -88,7 +86,7 @@ export const FilterCreatedBy: React.FC<Props> = observer((props: Props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 italic text-placeholder">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 b20c7e166c..d9a11c7f78 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,5 +1,3 @@
-"use client";
-
 import React, { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -19,7 +17,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterCycle: React.FC<Props> = observer((props) => {
+export const FilterCycle = observer(function FilterCycle(props: Props) {
   const { appliedFilters, handleUpdate, searchQuery } = props;
 
   // hooks
@@ -83,7 +81,7 @@ export const FilterCycle: React.FC<Props> = observer((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"}
@@ -91,7 +89,7 @@ export const FilterCycle: React.FC<Props> = observer((props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 italic text-placeholder">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 a5e815ed47..dbb1b9e1f5 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
@@ -12,7 +12,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterDueDate: React.FC<Props> = observer((props) => {
+export const FilterDueDate = observer(function FilterDueDate(props: Props) {
   const { appliedFilters, handleUpdate, searchQuery } = props;
 
   const [previewEnabled, setPreviewEnabled] = useState(true);
@@ -66,7 +66,7 @@ export const FilterDueDate: React.FC<Props> = observer((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 italic text-placeholder">No matches found</p>
           )}
         </div>
       )}
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 bd152097c9..e296676cfe 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,5 +1,3 @@
-"use client";
-
 import React, { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -7,12 +5,13 @@ import type { IIssueLabel } from "@plane/types";
 // components
 import { Loader } from "@plane/ui";
 import { FilterHeader, FilterOption } from "@/components/issues/issue-layouts/filters";
+
 // ui
 // types
 
-const LabelIcons = ({ color }: { color: string }) => (
-  <span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: color }} />
-);
+function LabelIcons({ color }: { color: string }) {
+  return <span className="h-2.5 w-2.5 rounded-full" style={{ backgroundColor: color }} />;
+}
 
 type Props = {
   appliedFilters: string[] | null;
@@ -21,7 +20,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterLabels: React.FC<Props> = observer((props) => {
+export const FilterLabels = observer(function FilterLabels(props: Props) {
   const { appliedFilters, handleUpdate, labels, searchQuery } = props;
 
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -72,7 +71,7 @@ export const FilterLabels: React.FC<Props> = observer((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 +79,7 @@ export const FilterLabels: React.FC<Props> = observer((props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 italic text-placeholder">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 8220a43d1a..bb41b99b88 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,5 +1,3 @@
-"use client";
-
 import { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -20,7 +18,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterMentions: React.FC<Props> = observer((props: Props) => {
+export const FilterMentions = observer(function FilterMentions(props: Props) {
   const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
   // states
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -87,7 +85,7 @@ export const FilterMentions: React.FC<Props> = observer((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"}
@@ -95,7 +93,7 @@ export const FilterMentions: React.FC<Props> = observer((props: Props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 italic text-placeholder">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 cc47a1e13b..31a64db28a 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,5 +1,3 @@
-"use client";
-
 import React, { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -17,7 +15,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterModule: React.FC<Props> = observer((props) => {
+export const FilterModule = observer(function FilterModule(props: Props) {
   const { appliedFilters, handleUpdate, searchQuery } = props;
   // hooks
   const { projectId } = useParams();
@@ -73,7 +71,7 @@ export const FilterModule: React.FC<Props> = observer((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"}
@@ -81,7 +79,7 @@ export const FilterModule: React.FC<Props> = observer((props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 italic text-placeholder">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 36bb16991f..f83d547075 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,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // plane constants
@@ -16,7 +14,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterPriority: React.FC<Props> = observer((props) => {
+export const FilterPriority = observer(function FilterPriority(props: Props) {
   const { appliedFilters, handleUpdate, searchQuery } = props;
   // hooks
   const { t } = useTranslation();
@@ -45,7 +43,7 @@ export const FilterPriority: React.FC<Props> = observer((props) => {
               />
             ))
           ) : (
-            <p className="text-xs italic text-custom-text-400">{t("common.search.no_matches_found")}</p>
+            <p className="text-11 italic text-placeholder">{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 f95a7d996e..5abd5ca778 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,5 +1,3 @@
-"use client";
-
 import React, { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -17,7 +15,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterProjects: React.FC<Props> = observer((props) => {
+export const FilterProjects = observer(function FilterProjects(props: Props) {
   const { appliedFilters, handleUpdate, searchQuery } = props;
   // states
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -74,7 +72,7 @@ export const FilterProjects: React.FC<Props> = observer((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"}
@@ -82,7 +80,7 @@ export const FilterProjects: React.FC<Props> = observer((props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 italic text-placeholder">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 d747ef8e13..1a596186a8 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
@@ -12,7 +12,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterStartDate: React.FC<Props> = observer((props) => {
+export const FilterStartDate = observer(function FilterStartDate(props: Props) {
   const { appliedFilters, handleUpdate, searchQuery } = props;
   const [previewEnabled, setPreviewEnabled] = useState(true);
   const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
@@ -65,7 +65,7 @@ export const FilterStartDate: React.FC<Props> = observer((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 italic text-placeholder">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 4896b0d726..cd9edcc068 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,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -14,7 +12,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterStateGroup: React.FC<Props> = observer((props) => {
+export const FilterStateGroup = observer(function FilterStateGroup(props: Props) {
   const { appliedFilters, handleUpdate, searchQuery } = props;
 
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -54,7 +52,7 @@ export const FilterStateGroup: React.FC<Props> = observer((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"}
@@ -62,7 +60,7 @@ export const FilterStateGroup: React.FC<Props> = observer((props) => {
               )}
             </>
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-11 italic text-placeholder">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 5d1ac42d7c..c301c8ec59 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,5 +1,3 @@
-"use client";
-
 import React, { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -19,7 +17,7 @@ type Props = {
   states: IState[] | undefined;
 };
 
-export const FilterState: React.FC<Props> = observer((props) => {
+export const FilterState = observer(function FilterState(props: Props) {
   const { appliedFilters, handleUpdate, searchQuery, states } = props;
 
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -72,7 +70,7 @@ export const FilterState: React.FC<Props> = observer((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 +78,7 @@ export const FilterState: React.FC<Props> = observer((props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 italic text-placeholder">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 dafd652ad0..2a58f70bde 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,5 +1,3 @@
-"use client";
-
 import React, { Fragment, useState } from "react";
 import type { Placement } from "@popperjs/core";
 import { usePopper } from "react-popper";
@@ -11,7 +9,7 @@ import { ChevronUpIcon } from "@plane/propel/icons";
 
 type Props = {
   children: React.ReactNode;
-  icon?: React.ReactNode;
+  icon?: React.ReactElement;
   miniIcon?: React.ReactNode;
   title?: string;
   placement?: Placement;
@@ -21,7 +19,7 @@ type Props = {
   isFiltersApplied?: boolean;
 };
 
-export const FiltersDropdown: React.FC<Props> = (props) => {
+export function FiltersDropdown(props: Props) {
   const {
     children,
     miniIcon,
@@ -43,86 +41,73 @@ export const FiltersDropdown: React.FC<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 h-2 w-2 -right-0.5 -top-0.5 bg-accent-primary rounded-full" />
+                      )}
+                    </>
+                  </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="overflow-hidden rounded-sm border border-subtle bg-surface-1 shadow-raised-100 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>
+            </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 41d75cf7f3..ffe374f60e 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,22 +1,23 @@
-import React from "react";
+// plane imports
 import { ChevronDownIcon, ChevronUpIcon } from "@plane/propel/icons";
-// lucide icons
 
-interface IFilterHeader {
+type Props = {
   title: string;
   isPreviewEnabled: boolean;
   handleIsPreviewEnabled: () => void;
-}
+};
 
-export const FilterHeader = ({ title, isPreviewEnabled, handleIsPreviewEnabled }: IFilterHeader) => (
-  <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>
-    <button
-      type="button"
-      className="grid h-5 w-5 flex-shrink-0 place-items-center rounded hover:bg-custom-background-80"
-      onClick={handleIsPreviewEnabled}
-    >
-      {isPreviewEnabled ? <ChevronUpIcon height={14} width={14} /> : <ChevronDownIcon height={14} width={14} />}
-    </button>
-  </div>
-);
+export function FilterHeader({ title, isPreviewEnabled, handleIsPreviewEnabled }: Props) {
+  return (
+    <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-sm hover:bg-layer-transparent-hover"
+        onClick={handleIsPreviewEnabled}
+      >
+        {isPreviewEnabled ? <ChevronUpIcon height={14} width={14} /> : <ChevronDownIcon height={14} width={14} />}
+      </button>
+    </div>
+  );
+}
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 26c7bfaf55..b9fe571b59 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,5 +1,3 @@
-import React from "react";
-// lucide icons
 import { Check } from "lucide-react";
 
 type Props = {
@@ -11,29 +9,29 @@ type Props = {
   activePulse?: boolean;
 };
 
-export const FilterOption: React.FC<Props> = (props) => {
+export function FilterOption(props: Props) {
   const { icon, isChecked, multiple = true, onClick, title, activePulse = false } = 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} />}
       </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="flex-shrink-0 text-caption-sm-regular w-2 h-2 rounded-full bg-accent-primary animate-pulse ml-auto" />
       )}
     </button>
   );
-};
+}
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 36c024e149..adb33b0d70 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,16 +1,13 @@
-"use client";
-
-import React from "react";
-// plane constants
+// 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[];
@@ -18,7 +15,7 @@ type Props = {
   selectedLayout: EIssueLayoutTypes | undefined;
 };
 
-export const LayoutSelection: React.FC<Props> = (props) => {
+export function LayoutSelection(props: Props) {
   const { layouts, onChange, selectedLayout } = props;
   const { isMobile } = usePlatformOS();
   const { t } = useTranslation();
@@ -29,27 +26,28 @@ export const LayoutSelection: React.FC<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>
       ))}
     </div>
   );
-};
+}
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 5af61ca294..cf6cf09d9e 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
@@ -6,7 +6,7 @@ import type { EIssueLayoutTypes } from "@plane/types";
 import { CustomMenu } from "@plane/ui";
 import { IssueLayoutIcon } from "../../layout-icon";
 
-export const MobileLayoutSelection = ({
+export function MobileLayoutSelection({
   layouts,
   onChange,
   activeLayout,
@@ -15,22 +15,22 @@ export const MobileLayoutSelection = ({
   onChange: (layout: EIssueLayoutTypes) => void;
   activeLayout?: EIssueLayoutTypes;
   isMobile?: boolean;
-}) => {
+}) {
   const { t } = useTranslation();
   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="size-3 text-secondary my-auto" 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,9 +42,9 @@ export const 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/gantt/base-gantt-root.tsx b/apps/web/core/components/issues/issue-layouts/gantt/base-gantt-root.tsx
index 58dda7d00b..5d45e4286b 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
@@ -38,7 +38,7 @@ export type GanttStoreType =
   | EIssuesStoreType.PROJECT_VIEW
   | EIssuesStoreType.EPIC;
 
-export const BaseGanttRoot: React.FC<IBaseGanttRoot> = observer((props: IBaseGanttRoot) => {
+export const BaseGanttRoot = observer(function BaseGanttRoot(props: IBaseGanttRoot) {
   const { viewId, isCompletedCycle = false, isEpic = false } = props;
   const { t } = useTranslation();
   // router
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 79524f9d19..3910d6bbd5 100644
--- a/apps/web/core/components/issues/issue-layouts/gantt/blocks.tsx
+++ b/apps/web/core/components/issues/issue-layouts/gantt/blocks.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
@@ -30,7 +28,7 @@ type Props = {
   isEpic?: boolean;
 };
 
-export const IssueGanttBlock: React.FC<Props> = observer((props) => {
+export const IssueGanttBlock = observer(function IssueGanttBlock(props: Props) {
   const { issueId, isEpic } = props;
   // router
   const { workspaceSlug: routerWorkspaceSlug } = useParams();
@@ -62,13 +60,13 @@ export const IssueGanttBlock: React.FC<Props> = observer((props) => {
         render={
           <div
             id={`issue-${issueId}`}
-            className="relative flex h-full w-full cursor-pointer items-center rounded space-between"
+            className="relative flex h-full w-full cursor-pointer items-center rounded-sm space-between"
             style={blockStyle}
             onClick={handleIssuePeekOverview}
           >
-            <div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50 " />
+            <div className="absolute left-0 top-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 overflow-hidden truncate px-2.5 py-1 text-13 text-primary flex-1"
               style={{ left: `${SIDEBAR_WIDTH}px` }}
             >
               {issueDetails?.name}
@@ -76,7 +74,7 @@ export const IssueGanttBlock: React.FC<Props> = observer((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 font-medium text-primary overflow-hidden truncate w-auto justify-end flex-shrink-0"
                 showProgressText={duration >= 2}
               />
             )}
@@ -101,7 +99,7 @@ export const IssueGanttBlock: React.FC<Props> = observer((props) => {
 });
 
 // rendering issues on gantt sidebar
-export const IssueGanttSidebarBlock: React.FC<Props> = observer((props) => {
+export const IssueGanttSidebarBlock = observer(function IssueGanttSidebarBlock(props: Props) {
   const { issueId, isEpic = false } = props;
   // router
   const { workspaceSlug: routerWorkspaceSlug } = useParams();
@@ -142,7 +140,7 @@ export const IssueGanttSidebarBlock: React.FC<Props> = observer((props) => {
       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">
@@ -150,12 +148,13 @@ export const IssueGanttSidebarBlock: React.FC<Props> = observer((props) => {
           <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/group-drag-overlay.tsx b/apps/web/core/components/issues/issue-layouts/group-drag-overlay.tsx
index 25540f2dd5..7e236da628 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
@@ -20,7 +20,7 @@ type Props = {
   isEpic?: boolean;
 };
 
-export const GroupDragOverlay = (props: Props) => {
+export function GroupDragOverlay(props: Props) {
   const {
     dragColumnOrientation,
     canOverlayBeVisible,
@@ -45,9 +45,9 @@ export const 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 text-13 font-medium text-tertiary rounded-sm bg-layer-1/85 ${dragColumnOrientation}`,
         {
-          "flex flex-col border-[1px] border-custom-border-300 z-[2]": shouldOverlayBeVisible,
+          "flex flex-col border-[1px] border-strong z-[2]": shouldOverlayBeVisible,
           "bg-red-200/60": workflowDisabledSource && isDropDisabled,
         },
         { hidden: !shouldOverlayBeVisible }
@@ -61,9 +61,9 @@ export const 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("p-3 my-8 flex flex-col rounded-sm items-center", {
+            "text-secondary": shouldOverlayBeVisible,
+            "text-danger-secondary": isDropDisabled,
           })}
         >
           {dropErrorMessage ? (
@@ -85,4 +85,4 @@ export const GroupDragOverlay = (props: Props) => {
       )}
     </div>
   );
-};
+}
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 916a913889..a838604825 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
@@ -13,7 +13,7 @@ import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
 // local imports
 import { IssueLayoutEmptyState } from "./empty-states";
 
-const ActiveLoader = (props: { layout: EIssueLayoutTypes }) => {
+function ActiveLoader(props: { layout: EIssueLayoutTypes }) {
   const { layout } = props;
   switch (layout) {
     case EIssueLayoutTypes.LIST:
@@ -29,14 +29,14 @@ const ActiveLoader = (props: { layout: EIssueLayoutTypes }) => {
     default:
       return null;
   }
-};
+}
 
 interface Props {
   children: string | React.ReactNode | React.ReactNode[];
   layout: EIssueLayoutTypes;
 }
 
-export const IssueLayoutHOC = observer((props: Props) => {
+export const IssueLayoutHOC = observer(function IssueLayoutHOC(props: Props) {
   const { layout } = props;
 
   const storeType = useIssueStoreType();
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 2d27abc822..65d84f7f76 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,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
@@ -50,7 +48,7 @@ export interface IBaseKanBanLayout {
   isEpic?: boolean;
 }
 
-export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBaseKanBanLayout) => {
+export const BaseKanBanRoot = observer(function BaseKanBanRoot(props: IBaseKanBanLayout) {
   const {
     QuickActions,
     addIssuesToView,
@@ -259,7 +257,7 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
         <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 ${
+          } flex w-full items-center justify-center rounded-sm border-2 border-red-500/20 bg-surface-1 px-3 py-5 text-11 font-medium italic text-red-500 ${
             isDragOverDelete ? "bg-red-500 opacity-70 blur-2xl" : ""
           } transition duration-300`}
         >
@@ -268,10 +266,10 @@ export const BaseKanBanRoot: React.FC<IBaseKanBanLayout> = observer((props: IBas
       </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 scrollbar-lg relative flex 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 94b4a8d61e..043954af81 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/block.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/block.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { MutableRefObject } from "react";
 import { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
@@ -62,7 +60,7 @@ interface IssueDetailsBlockProps {
   isEpic?: boolean;
 }
 
-const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((props) => {
+const KanbanIssueDetailsBlock = observer(function KanbanIssueDetailsBlock(props: IssueDetailsBlockProps) {
   const { cardRef, issue, updateIssue, quickActions, isReadOnly, displayProperties, isEpic = false } = props;
   // refs
   const menuActionRef = useRef<HTMLDivElement | null>(null);
@@ -74,8 +72,8 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
   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 items-center h-full w-full cursor-pointer rounded-sm p-1 text-placeholder hover:bg-layer-1 ${
+        isMenuActive ? "bg-layer-1 text-primary" : "text-secondary"
       }`}
       onClick={() => setIsMenuActive(!isMenuActive)}
     >
@@ -100,7 +98,8 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
           <IssueIdentifier
             issueId={issue.id}
             projectId={issue.project_id}
-            textContainerClassName="line-clamp-1 text-xs text-custom-text-300"
+            size="xs"
+            variant="tertiary"
             displayProperties={displayProperties}
           />
         )}
@@ -120,13 +119,13 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
       </div>
 
       <Tooltip tooltipContent={issue.name} isMobile={isMobile} renderByDefault={false}>
-        <div className="w-full line-clamp-1 text-sm text-custom-text-100">
+        <div className="w-full line-clamp-1 text-14 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 whitespace-nowrap text-tertiary pt-1.5"
         issue={issue}
         displayProperties={displayProperties}
         activeLayout="Kanban"
@@ -141,14 +140,14 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
           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>
       )}
     </>
   );
 });
 
-export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
+export const KanbanIssueBlock = observer(function KanbanIssueBlock(props: IssueBlockProps) {
   const {
     issueId,
     groupId,
@@ -270,16 +269,16 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
           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 rounded-lg border outline-[0.5px] outline-transparent shadow-raised-100 w-full border-subtle bg-layer-2 text-13 transition-all p-3 hover:shadow-raised-200 hover:border-strong",
             { "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) },
+            { "bg-layer-1 z-[100]": 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}
@@ -301,5 +300,3 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
     </>
   );
 });
-
-KanbanIssueBlock.displayName = "KanbanIssueBlock";
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 401516d4c3..e4357ce33d 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
@@ -21,7 +21,7 @@ interface IssueBlocksListProps {
   isEpic?: boolean;
 }
 
-export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = observer((props) => {
+export const KanbanIssueBlocksList = observer(function KanbanIssueBlocksList(props: IssueBlocksListProps) {
   const {
     sub_group_id,
     groupId,
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 7aa468c3dc..7b10c9a772 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/default.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/default.tsx
@@ -65,7 +65,7 @@ export interface IKanBan {
   isEpic?: boolean;
 }
 
-export const KanBan: React.FC<IKanBan> = observer((props) => {
+export const KanBan = observer(function KanBan(props: IKanBan) {
   const {
     issuesMap,
     groupedIssueIds,
@@ -152,7 +152,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
           const issueIds = isSubGroup
             ? ((groupedIssueIds as TSubGroupedIssues)?.[subList.id]?.[sub_group_id] ?? [])
             : ((groupedIssueIds as TGroupedIssues)?.[subList.id] ?? []);
-          const issueLength = issueIds?.length as number;
+          const issueLength = issueIds?.length;
           const groupHeight = issueLength * approximateCardHeight;
 
           return (
@@ -163,7 +163,7 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
               } `}
             >
               {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 666473d809..f5510f08be 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,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -37,7 +34,7 @@ interface IHeaderGroupByCard {
   isEpic?: boolean;
 }
 
-export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
+export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHeaderGroupByCard) {
   const {
     group_by,
     sub_group_by,
@@ -110,11 +107,11 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
         />
       )}
       <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>
 
@@ -124,14 +121,14 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
           }`}
         >
           <div
-            className={`line-clamp-1 inline-block overflow-hidden truncate font-medium text-custom-text-100 ${
+            className={`line-clamp-1 inline-block overflow-hidden truncate font-medium text-primary ${
               verticalAlignPosition ? `vertical-lr max-h-[400px]` : ``
             }`}
           >
             {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>
@@ -140,8 +137,8 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
         <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 transition-all hover:bg-layer-transparent-hover bg-layer-transparent"
             onClick={() => handleCollapsedGroups("group_by", column_id)}
           >
             {verticalAlignPosition ? (
@@ -149,14 +146,14 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
             ) : (
               <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">
+                <span className="flex h-[20px] w-[20px] flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden transition-all hover:bg-layer-transparent-hover bg-layer-transparent rounded-sm">
                   <Plus height={14} width={14} strokeWidth={2} />
                 </span>
               }
@@ -180,15 +177,15 @@ export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
               </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  overflow-hidden transition-all hover:bg-layer-transparent-hover bg-layer-transparent rounded-sm items-center justify-center"
               onClick={() => {
                 captureClick({ elementName: WORK_ITEM_TRACKER_EVENTS.create });
                 setIsOpen(true);
               }}
             >
               <Plus width={14} strokeWidth={2} />
-            </div>
+            </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 0e6f1378b5..533ec8cd1c 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
@@ -19,14 +19,14 @@ interface IHeaderSubGroupByCard {
   handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void;
 }
 
-export const HeaderSubGroupByCard: FC<IHeaderSubGroupByCard> = observer((props) => {
+export const HeaderSubGroupByCard = observer(function HeaderSubGroupByCard(props: IHeaderSubGroupByCard) {
   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 flex-row items-center gap-1 rounded-xs py-1.5 cursor-pointer`}
       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 +34,13 @@ export const HeaderSubGroupByCard: FC<IHeaderSubGroupByCard> = observer((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 b94227c93e..675fcb0be5 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,5 +1,3 @@
-"use client";
-
 import type { MutableRefObject } from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
@@ -68,7 +66,7 @@ interface IKanbanGroup {
   isEpic?: boolean;
 }
 
-export const KanbanGroup = observer((props: IKanbanGroup) => {
+export const KanbanGroup = observer(function KanbanGroup(props: IKanbanGroup) {
   const {
     groupId,
     sub_group_id,
@@ -257,7 +255,7 @@ export const KanbanGroup = observer((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="w-full sticky bottom-0 p-3 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline cursor-pointer"
       onClick={loadMoreIssuesInThisGroup}
     >
       {t("common.load_more")} &darr;
@@ -270,14 +268,14 @@ export const KanbanGroup = observer((props: IKanbanGroup) => {
   const canDragIssuesInCurrentGrouping =
     !!group_by &&
     DRAG_ALLOWED_GROUPS.includes(group_by) &&
-    (!!sub_group_by ? DRAG_ALLOWED_GROUPS.includes(sub_group_by) : true);
+    (sub_group_by ? DRAG_ALLOWED_GROUPS.includes(sub_group_by) : true);
 
   return (
     <div
       id={`${groupId}__${sub_group_id}`}
       className={cn(
         "relative h-full transition-all min-h-[120px]",
-        { "bg-custom-background-80 rounded": isDraggingOverColumn },
+        { "bg-layer-1 rounded-sm": isDraggingOverColumn },
         { "vertical-scrollbar scrollbar-md": !sub_group_by && !shouldOverlayBeVisible }
       )}
       ref={columnRef}
@@ -312,7 +310,7 @@ export const KanbanGroup = observer((props: IKanbanGroup) => {
       {enableQuickIssueCreate &&
         !disableIssueCreation &&
         !getIsWorkflowWorkItemCreationDisabled(groupId, sub_group_id) && (
-          <div className="w-full bg-custom-background-90 py-0.5 sticky bottom-0">
+          <div className="w-full bg-surface-2 py-0.5 sticky bottom-0">
             <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 7ba5b23718..a766ebad16 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
@@ -12,7 +12,7 @@ import { useUserPermissions } from "@/hooks/store/user";
 import { CycleIssueQuickActions } from "../../quick-action-dropdowns";
 import { BaseKanBanRoot } from "../base-kanban-root";
 
-export const CycleKanBanLayout: React.FC = observer(() => {
+export const CycleKanBanLayout = observer(function CycleKanBanLayout() {
   const { workspaceSlug, projectId, cycleId } = useParams();
 
   // store
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 8587a509f7..26f3e4e31f 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
@@ -9,7 +9,7 @@ import { useIssues } from "@/hooks/store/use-issues";
 import { ModuleIssueQuickActions } from "../../quick-action-dropdowns";
 import { BaseKanBanRoot } from "../base-kanban-root";
 
-export const ModuleKanBanLayout: React.FC = observer(() => {
+export const ModuleKanBanLayout = observer(function ModuleKanBanLayout() {
   const { workspaceSlug, projectId, moduleId } = useParams();
 
   // store
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 be1e433611..db6eb64185 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
@@ -8,7 +8,7 @@ import { useUserPermissions } from "@/hooks/store/user";
 import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
 import { BaseKanBanRoot } from "../base-kanban-root";
 
-export const ProfileIssuesKanBanLayout: React.FC = observer(() => {
+export const ProfileIssuesKanBanLayout = observer(function ProfileIssuesKanBanLayout() {
   // router
   const { workspaceSlug, profileViewId } = useParams();
   const { allowPermissions } = useUserPermissions();
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 bcb3a596a1..22250fd810 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
@@ -8,7 +8,7 @@ import { useUserPermissions } from "@/hooks/store/user";
 import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
 import { BaseKanBanRoot } from "../base-kanban-root";
 
-export const KanBanLayout: React.FC = observer(() => {
+export const KanBanLayout = observer(function KanBanLayout() {
   // router
   const { workspaceSlug } = useParams();
   // hooks
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 051351444d..ef4239fd81 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
@@ -8,7 +8,7 @@ import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
 // components
 import { BaseKanBanRoot } from "../base-kanban-root";
 
-export const ProjectViewKanBanLayout: React.FC = observer(() => {
+export const ProjectViewKanBanLayout = observer(function ProjectViewKanBanLayout() {
   const { viewId } = useParams();
 
   return <BaseKanBanRoot QuickActions={ProjectIssueQuickActions} viewId={viewId.toString()} />;
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 5892ea3dd2..735123ed85 100644
--- a/apps/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/apps/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -1,5 +1,6 @@
 import type { MutableRefObject } from "react";
 import { observer } from "mobx-react";
+// plane imports
 import type {
   GroupByColumnTypes,
   IGroupByColumn,
@@ -12,33 +13,32 @@ import type {
   TIssueGroupByOptions,
   TIssueOrderByOptions,
 } from "@plane/types";
-// UI
 import { Row } from "@plane/ui";
 // hooks
 import { useIssueStoreType } from "@/hooks/use-issue-layout-store";
-// components
+// plane web imports
 import { useWorkFlowFDragNDrop } from "@/plane-web/components/workflow";
+// local imports
 import type { TRenderQuickActions } from "../list/list-view-types";
 import type { GroupDropLocation } from "../utils";
 import { getGroupByColumns, isWorkspaceLevel } from "../utils";
 import { KanBan } from "./default";
 import { HeaderGroupByCard } from "./headers/group-by-card";
 import { HeaderSubGroupByCard } from "./headers/sub-group-by-card";
-// types
-// constants
 
 interface ISubGroupSwimlaneHeader {
+  collapsedGroups: TIssueKanbanFilters;
+  group_by: TIssueGroupByOptions | undefined;
   getGroupIssueCount: (
     groupId: string | undefined,
     subGroupId: string | undefined,
     isSubGroupCumulative: boolean
   ) => number | undefined;
-  sub_group_by: TIssueGroupByOptions | undefined;
-  group_by: TIssueGroupByOptions | undefined;
-  list: IGroupByColumn[];
-  collapsedGroups: TIssueKanbanFilters;
   handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void;
+  isEpic?: boolean;
+  list: IGroupByColumn[];
   showEmptyGroup: boolean;
+  sub_group_by: TIssueGroupByOptions | undefined;
 }
 
 const visibilitySubGroupByGroupCount = (subGroupIssueCount: number, showEmptyGroup: boolean): boolean => {
@@ -53,91 +53,101 @@ const visibilitySubGroupByGroupCount = (subGroupIssueCount: number, showEmptyGro
   return subGroupHeaderVisibility;
 };
 
-const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = observer(
-  ({ getGroupIssueCount, sub_group_by, group_by, list, collapsedGroups, handleCollapsedGroups, showEmptyGroup }) => {
-    const { getIsWorkflowWorkItemCreationDisabled } = useWorkFlowFDragNDrop(group_by, sub_group_by);
+const SubGroupSwimlaneHeader = observer(function SubGroupSwimlaneHeader({
+  collapsedGroups,
+  getGroupIssueCount,
+  group_by,
+  handleCollapsedGroups,
+  isEpic = false,
+  list,
+  showEmptyGroup,
+  sub_group_by,
+}: ISubGroupSwimlaneHeader) {
+  const { getIsWorkflowWorkItemCreationDisabled } = useWorkFlowFDragNDrop(group_by, sub_group_by);
 
-    return (
-      <div className="relative flex h-max min-h-full w-full items-center gap-4">
-        {list &&
-          list.length > 0 &&
-          list.map((_list: IGroupByColumn) => {
-            const groupCount = getGroupIssueCount(_list?.id, undefined, false) ?? 0;
+  return (
+    <div className="relative flex h-max min-h-full w-full items-center gap-4">
+      {list &&
+        list.length > 0 &&
+        list.map((_list: IGroupByColumn) => {
+          const groupCount = getGroupIssueCount(_list?.id, undefined, false) ?? 0;
 
-            const subGroupByVisibilityToggle = visibilitySubGroupByGroupCount(groupCount, showEmptyGroup);
+          const subGroupByVisibilityToggle = visibilitySubGroupByGroupCount(groupCount, showEmptyGroup);
 
-            if (subGroupByVisibilityToggle === false) return <></>;
+          if (subGroupByVisibilityToggle === false) return <></>;
 
-            return (
-              <div key={`${sub_group_by}_${_list.id}`} className="flex w-[350px] flex-shrink-0 flex-col">
-                <HeaderGroupByCard
-                  sub_group_by={sub_group_by}
-                  group_by={group_by}
-                  column_id={_list.id}
-                  icon={_list.icon}
-                  title={_list.name}
-                  count={groupCount}
-                  collapsedGroups={collapsedGroups}
-                  handleCollapsedGroups={handleCollapsedGroups}
-                  issuePayload={_list.payload}
-                  disableIssueCreation={getIsWorkflowWorkItemCreationDisabled(_list.id)}
-                />
-              </div>
-            );
-          })}
-      </div>
-    );
-  }
-);
+          return (
+            <div key={`${sub_group_by}_${_list.id}`} className="flex w-[350px] flex-shrink-0 flex-col">
+              <HeaderGroupByCard
+                sub_group_by={sub_group_by}
+                group_by={group_by}
+                column_id={_list.id}
+                icon={_list.icon}
+                title={_list.name}
+                count={groupCount}
+                collapsedGroups={collapsedGroups}
+                handleCollapsedGroups={handleCollapsedGroups}
+                issuePayload={_list.payload}
+                disableIssueCreation={getIsWorkflowWorkItemCreationDisabled(_list.id)}
+                isEpic={isEpic}
+              />
+            </div>
+          );
+        })}
+    </div>
+  );
+});
 
 interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
-  issuesMap: IIssueMap;
-  groupedIssueIds: TGroupedIssues | TSubGroupedIssues;
+  addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  collapsedGroups: TIssueKanbanFilters;
+  disableIssueCreation?: boolean;
+  displayProperties: IIssueDisplayProperties | undefined;
+  enableQuickIssueCreate: boolean;
   getGroupIssueCount: (
     groupId: string | undefined,
     subGroupId: string | undefined,
     isSubGroupCumulative: boolean
   ) => number | undefined;
-  showEmptyGroup: boolean;
-  displayProperties: IIssueDisplayProperties | undefined;
-  updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
-  quickActions: TRenderQuickActions;
-  collapsedGroups: TIssueKanbanFilters;
+  groupedIssueIds: TGroupedIssues | TSubGroupedIssues;
   handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void;
   handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
-  disableIssueCreation?: boolean;
-  enableQuickIssueCreate: boolean;
+  isEpic?: boolean;
+  issuesMap: IIssueMap;
+  loadMoreIssues: (groupId?: string, subGroupId?: string) => void;
   orderBy: TIssueOrderByOptions | undefined;
-  canEditProperties: (projectId: string | undefined) => boolean;
-  addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
+  quickActions: TRenderQuickActions;
   quickAddCallback?: (projectId: string | null | undefined, data: TIssue) => Promise<TIssue | undefined>;
   scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
-  loadMoreIssues: (groupId?: string, subGroupId?: string) => void;
+  showEmptyGroup: boolean;
+  updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
 }
 
-const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
+const SubGroupSwimlane = observer(function SubGroupSwimlane(props: ISubGroupSwimlane) {
   const {
-    issuesMap,
-    groupedIssueIds,
-    getGroupIssueCount,
-    sub_group_by,
-    group_by,
-    list,
-    updateIssue,
-    quickActions,
-    displayProperties,
-    collapsedGroups,
-    handleCollapsedGroups,
-    loadMoreIssues,
-    showEmptyGroup,
-    enableQuickIssueCreate,
-    disableIssueCreation,
-    canEditProperties,
     addIssuesToView,
+    canEditProperties,
+    collapsedGroups,
+    disableIssueCreation,
+    displayProperties,
+    enableQuickIssueCreate,
+    getGroupIssueCount,
+    group_by,
+    groupedIssueIds,
+    handleCollapsedGroups,
+    handleOnDrop,
+    isEpic = false,
+    issuesMap,
+    list,
+    loadMoreIssues,
+    orderBy,
+    quickActions,
     quickAddCallback,
     scrollableContainerRef,
-    handleOnDrop,
-    orderBy,
+    showEmptyGroup,
+    sub_group_by,
+    updateIssue,
   } = props;
 
   const visibilitySubGroupBy = (
@@ -167,7 +177,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
           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] py-1 flex w-full items-center bg-layer-1 border-y-[0.5px] border-subtle">
                 <Row className="sticky left-0 flex-shrink-0">
                   <HeaderSubGroupByCard
                     column_id={_list.id}
@@ -208,6 +218,7 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
                     orderBy={orderBy}
                     isDropDisabled={_list.isDropDisabled}
                     dropErrorMessage={_list.dropErrorMessage}
+                    isEpic={isEpic}
                   />
                 </div>
               )}
@@ -219,33 +230,34 @@ const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
 });
 
 export interface IKanBanSwimLanes {
-  issuesMap: IIssueMap;
-  groupedIssueIds: TGroupedIssues | TSubGroupedIssues;
+  addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
+  canEditProperties: (projectId: string | undefined) => boolean;
+  collapsedGroups: TIssueKanbanFilters;
+  disableIssueCreation?: boolean;
+  displayProperties: IIssueDisplayProperties | undefined;
+  enableQuickIssueCreate: boolean;
   getGroupIssueCount: (
     groupId: string | undefined,
     subGroupId: string | undefined,
     isSubGroupCumulative: boolean
   ) => number | undefined;
-  displayProperties: IIssueDisplayProperties | undefined;
-  sub_group_by: TIssueGroupByOptions | undefined;
   group_by: TIssueGroupByOptions | undefined;
-  updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
-  quickActions: TRenderQuickActions;
-  collapsedGroups: TIssueKanbanFilters;
+  groupedIssueIds: TGroupedIssues | TSubGroupedIssues;
   handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void;
-  loadMoreIssues: (groupId?: string, subGroupId?: string) => void;
-  showEmptyGroup: boolean;
   handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise<void>;
-  disableIssueCreation?: boolean;
-  addIssuesToView?: (issueIds: string[]) => Promise<TIssue>;
-  enableQuickIssueCreate: boolean;
-  quickAddCallback?: (projectId: string | null | undefined, data: TIssue) => Promise<TIssue | undefined>;
-  canEditProperties: (projectId: string | undefined) => boolean;
-  scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  isEpic?: boolean;
+  issuesMap: IIssueMap;
+  loadMoreIssues: (groupId?: string, subGroupId?: string) => void;
   orderBy: TIssueOrderByOptions | undefined;
+  quickActions: TRenderQuickActions;
+  quickAddCallback?: (projectId: string | null | undefined, data: TIssue) => Promise<TIssue | undefined>;
+  scrollableContainerRef?: MutableRefObject<HTMLDivElement | null>;
+  showEmptyGroup: boolean;
+  sub_group_by: TIssueGroupByOptions | undefined;
+  updateIssue: ((projectId: string | null, issueId: string, data: Partial<TIssue>) => Promise<void>) | undefined;
 }
 
-export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
+export const KanBanSwimLanes = observer(function KanBanSwimLanes(props: IKanBanSwimLanes) {
   const {
     issuesMap,
     groupedIssueIds,
@@ -267,6 +279,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
     addIssuesToView,
     quickAddCallback,
     scrollableContainerRef,
+    isEpic = false,
   } = props;
   // store hooks
   const storeType = useIssueStoreType();
@@ -275,18 +288,20 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
     groupBy: group_by as GroupByColumnTypes,
     includeNone: true,
     isWorkspaceLevel: isWorkspaceLevel(storeType),
+    isEpic: isEpic,
   });
   const subGroupByList = getGroupByColumns({
     groupBy: sub_group_by as GroupByColumnTypes,
     includeNone: true,
     isWorkspaceLevel: isWorkspaceLevel(storeType),
+    isEpic: isEpic,
   });
 
   if (!groupByList || !subGroupByList) return null;
 
   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}
@@ -295,6 +310,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           handleCollapsedGroups={handleCollapsedGroups}
           list={groupByList}
           showEmptyGroup={showEmptyGroup}
+          isEpic={isEpic}
         />
       </Row>
 
@@ -321,6 +337,7 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
           canEditProperties={canEditProperties}
           quickAddCallback={quickAddCallback}
           scrollableContainerRef={scrollableContainerRef}
+          isEpic={isEpic}
         />
       )}
     </div>
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 c55669c68d..6788a8aea2 100644
--- a/apps/web/core/components/issues/issue-layouts/layout-icon.tsx
+++ b/apps/web/core/components/issues/issue-layouts/layout-icon.tsx
@@ -8,11 +8,11 @@ import {
 import type { ISvgIcons } from "@plane/propel/icons";
 import { EIssueLayoutTypes } from "@plane/types";
 
-export const IssueLayoutIcon = ({
+export function IssueLayoutIcon({
   layout,
   size,
   ...props
-}: { layout: EIssueLayoutTypes; size?: number } & Omit<ISvgIcons, "width" | "height">) => {
+}: { layout: EIssueLayoutTypes; size?: number } & Omit<ISvgIcons, "width" | "height">) {
   const iconProps = {
     ...props,
     ...(size && { width: size, height: size }),
@@ -32,4 +32,4 @@ export const IssueLayoutIcon = ({
     default:
       return null;
   }
-};
+}
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 19d5481867..e437adcd02 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
@@ -41,7 +41,7 @@ interface IBaseListRoot {
   isCompletedCycle?: boolean;
   isEpic?: boolean;
 }
-export const BaseListRoot = observer((props: IBaseListRoot) => {
+export const BaseListRoot = observer(function BaseListRoot(props: IBaseListRoot) {
   const {
     QuickActions,
     viewId,
@@ -148,7 +148,7 @@ export const BaseListRoot = observer((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 62942731bc..10a083eed7 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,5 +1,3 @@
-"use client";
-
 import type { FC, MutableRefObject } from "react";
 import React, { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
@@ -44,7 +42,7 @@ type Props = {
   isEpic?: boolean;
 };
 
-export const IssueBlockRoot: FC<Props> = observer((props) => {
+export const IssueBlockRoot = observer(function IssueBlockRoot(props: Props) {
   const {
     issueId,
     issuesMap,
@@ -132,7 +130,7 @@ export const IssueBlockRoot: FC<Props> = observer((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])}
         placeholderChildren={<ListLoaderItemRow shouldAnimate={false} renderForPlaceHolder defaultPropertyCount={4} />}
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 98ff750074..3fdbbbc85a 100644
--- a/apps/web/core/components/issues/issue-layouts/list/block.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/block.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { Dispatch, MouseEvent, SetStateAction } from "react";
 import { useEffect, useRef } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
@@ -30,6 +28,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 {
@@ -51,7 +50,7 @@ interface IssueBlockProps {
   isEpic?: boolean;
 }
 
-export const IssueBlock = observer((props: IssueBlockProps) => {
+export const IssueBlock = observer(function IssueBlock(props: IssueBlockProps) {
   const {
     issuesMap,
     issueId,
@@ -78,7 +77,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
   const projectId = routerProjectId?.toString();
   // hooks
   const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme();
-  const { getProjectIdentifierById } = useProject();
+  const { getProjectIdentifierById, currentProjectNextSequenceId } = useProject();
   const {
     getIsIssuePeeked,
     peekIssue,
@@ -152,8 +151,12 @@ export const IssueBlock = observer((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,
@@ -175,13 +178,13 @@ export const IssueBlock = observer((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 min-h-11 relative flex flex-col gap-3 bg-layer-transparent hover:bg-layer-transparent-hover py-3 text-13 transition-colors",
           {
-            "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,
           }
@@ -235,7 +238,8 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
                     <IssueIdentifier
                       issueId={issueId}
                       projectId={issue.project_id}
-                      textContainerClassName="text-xs font-medium text-custom-text-300"
+                      size="xs"
+                      variant="tertiary"
                       displayProperties={displayProperties}
                     />
                   )}
@@ -247,7 +251,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
                 {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="size-4 grid place-items-center rounded-xs text-placeholder hover:text-tertiary"
                     onClick={handleToggleExpand}
                   >
                     <ChevronRightIcon
@@ -261,7 +265,7 @@ export const IssueBlock = observer((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 left-0 top-0 z-[99999] h-full w-full animate-pulse bg-surface-1/20" />
               )}
             </div>
 
@@ -272,7 +276,7 @@ export const IssueBlock = observer((props: IssueBlockProps) => {
               disabled={isCurrentBlockDragging}
               renderByDefault={false}
             >
-              <p className="truncate cursor-pointer text-sm text-custom-text-100">{issue.name}</p>
+              <p className="truncate cursor-pointer text-body-xs-regular text-primary">{issue.name}</p>
             </Tooltip>
             {isEpic && displayProperties && (
               <WithDisplayPropertiesHOC
@@ -280,13 +284,13 @@ export const IssueBlock = observer((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 border border-strong rounded-sm", {
                 "md:hidden": isSidebarCollapsed,
                 "lg:hidden": !isSidebarCollapsed,
               })}
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 090e988ca7..72be4c66be 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
@@ -22,7 +22,7 @@ interface Props {
   isEpic?: boolean;
 }
 
-export const IssueBlocksList: FC<Props> = (props) => {
+export function IssueBlocksList(props: Props) {
   const {
     issueIds,
     issuesMap,
@@ -64,4 +64,4 @@ export const IssueBlocksList: FC<Props> = (props) => {
         ))}
     </div>
   );
-};
+}
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 4d1411212d..b4948266f8 100644
--- a/apps/web/core/components/issues/issue-layouts/list/default.tsx
+++ b/apps/web/core/components/issues/issue-layouts/list/default.tsx
@@ -52,7 +52,7 @@ export interface IList {
   isEpic?: boolean;
 }
 
-export const List: React.FC<IList> = observer((props) => {
+export const List = observer(function List(props: IList) {
   const {
     groupedIssueIds,
     issuesMap,
@@ -134,7 +134,7 @@ export const List: React.FC<IList> = observer((props) => {
             <>
               <div
                 ref={containerRef}
-                className="size-full vertical-scrollbar scrollbar-lg relative overflow-auto vertical-scrollbar-margin-top-md"
+                className="size-full vertical-scrollbar scrollbar-lg relative 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 9853c03b86..6a8524bc20 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,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -39,7 +37,7 @@ interface IHeaderGroupByCard {
   isEpic?: boolean;
 }
 
-export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => {
+export const HeaderGroupByCard = observer(function HeaderGroupByCard(props: IHeaderGroupByCard) {
   const {
     groupID,
     groupBy,
@@ -115,8 +113,8 @@ export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => {
           className="relative flex w-full flex-row items-center gap-1 overflow-hidden cursor-pointer"
           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="inline-block line-clamp-1 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>
@@ -126,7 +124,7 @@ export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => {
           (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">
+                <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">
                   <Plus className="h-3.5 w-3.5" strokeWidth={2} />
                 </span>
               }
@@ -150,7 +148,7 @@ export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => {
             </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);
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 19acd3b921..ee5b81f27d 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,5 +1,3 @@
-"use client";
-
 import type { MutableRefObject } from "react";
 import { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
@@ -70,7 +68,7 @@ interface Props {
   isEpic?: boolean;
 }
 
-export const ListGroup = observer((props: Props) => {
+export const ListGroup = observer(function ListGroup(props: Props) {
   const {
     groupIssueIds = [],
     group,
@@ -130,7 +128,7 @@ export const ListGroup = observer((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"
+        "h-11 relative flex items-center gap-3 bg-surface-1 border border-transparent border-t-subtle-1 pl-8 p-3 text-13 font-medium text-accent-primary hover:text-accent-secondary hover:underline cursor-pointer"
       }
       onClick={() => loadMoreIssues(group.id)}
     >
@@ -252,13 +250,13 @@ export const ListGroup = observer((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 hover:bg-layer-1-hover pr-3 py-1", {
           "sticky top-0 z-[2]": isExpanded && groupIssueCount > 0,
         })}
       >
@@ -320,7 +318,7 @@ export const ListGroup = observer((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 17f68d8b47..21f85da306 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
@@ -4,7 +4,7 @@ import { observer } from "mobx-react";
 import { ArchivedIssueQuickActions } from "../../quick-action-dropdowns";
 import { BaseListRoot } from "../base-list-root";
 
-export const ArchivedIssueListLayout: FC = observer(() => {
+export const ArchivedIssueListLayout = observer(function ArchivedIssueListLayout() {
   const canEditPropertiesBasedOnProject = () => false;
 
   return (
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 f0ef5299b5..65f66b185e 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
@@ -12,7 +12,7 @@ import { useUserPermissions } from "@/hooks/store/user";
 import { CycleIssueQuickActions } from "../../quick-action-dropdowns";
 import { BaseListRoot } from "../base-list-root";
 
-export const CycleListLayout: React.FC = observer(() => {
+export const CycleListLayout = observer(function CycleListLayout() {
   const { workspaceSlug, projectId, cycleId } = useParams();
   // store
   const { issues } = useIssues(EIssuesStoreType.CYCLE);
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 fa7b514d0e..bd1dd7b48b 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
@@ -9,7 +9,7 @@ import { useIssues } from "@/hooks/store/use-issues";
 import { ModuleIssueQuickActions } from "../../quick-action-dropdowns";
 import { BaseListRoot } from "../base-list-root";
 
-export const ModuleListLayout: React.FC = observer(() => {
+export const ModuleListLayout = observer(function ModuleListLayout() {
   const { workspaceSlug, projectId, moduleId } = useParams();
 
   const { issues } = useIssues(EIssuesStoreType.MODULE);
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 afc212d3e2..4affe00765 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
@@ -8,7 +8,7 @@ import { useUserPermissions } from "@/hooks/store/user";
 import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
 import { BaseListRoot } from "../base-list-root";
 
-export const ProfileIssuesListLayout: FC = observer(() => {
+export const ProfileIssuesListLayout = observer(function ProfileIssuesListLayout() {
   // router
   const { workspaceSlug, profileViewId } = useParams();
   // store
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 39d5c0e4ea..8819433aed 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
@@ -9,7 +9,7 @@ import { useUserPermissions } from "@/hooks/store/user";
 import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
 import { BaseListRoot } from "../base-list-root";
 
-export const ListLayout: FC = observer(() => {
+export const ListLayout = observer(function ListLayout() {
   // router
   const { workspaceSlug } = useParams();
   // hooks
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 9f7a07331e..0c11123647 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
@@ -8,7 +8,7 @@ import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
 // components
 import { BaseListRoot } from "../base-list-root";
 
-export const ProjectViewListLayout: React.FC = observer(() => {
+export const ProjectViewListLayout = observer(function ProjectViewListLayout() {
   const { viewId } = useParams();
 
   return <BaseListRoot QuickActions={ProjectIssueQuickActions} viewId={viewId.toString()} />;
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 a61d6ccf42..f7f1f64e17 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,5 +1,3 @@
-"use client";
-
 import type { SyntheticEvent } from "react";
 import { useCallback, useMemo } from "react";
 import { xor } from "lodash-es";
@@ -58,7 +56,7 @@ export interface IIssueProperties {
   isEpic?: boolean;
 }
 
-export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
+export const IssueProperties = observer(function IssueProperties(props: IIssueProperties) {
   const { issue, updateIssue, displayProperties, isReadOnly, className, isEpic = false } = props;
   // i18n
   const { t } = useTranslation();
@@ -272,7 +270,6 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
             onChange={handlePriority}
             disabled={isReadOnly}
             buttonVariant="border-without-text"
-            buttonClassName="border"
             renderByDefault={isMobile}
             showTooltip
           />
@@ -301,8 +298,8 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
             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" : ""}
+            clearIconClassName="!text-primary"
             disabled={isReadOnly}
             renderByDefault={isMobile}
             showTooltip
@@ -330,6 +327,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
             disabled={isReadOnly}
             renderByDefault={isMobile}
             showTooltip
+            labelClassName="text-caption-sm-regular"
           />
         </div>
       </WithDisplayPropertiesHOC>
@@ -348,12 +346,13 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
             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={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-red-500" : ""}
-            clearIconClassName="!text-custom-text-100"
+            buttonClassName={shouldHighlightIssueDueDate(issue.target_date, stateDetails?.group) ? "text-danger" : ""}
+            clearIconClassName="!text-primary"
             optionsClassName="z-10"
             disabled={isReadOnly}
             renderByDefault={isMobile}
             showTooltip
+            labelClassName="text-caption-sm-regular"
           />
         </div>
       </WithDisplayPropertiesHOC>
@@ -461,14 +460,14 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
                 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,
+                  "hover:bg-layer-1 cursor-pointer": 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>
@@ -487,12 +486,12 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
           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>
@@ -510,12 +509,12 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
           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>
+            <div className="text-caption-sm-regular">{issue.link_count}</div>
           </div>
         </Tooltip>
       </WithDisplayPropertiesHOC>
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 a71306d424..bd014f651d 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
@@ -39,7 +39,7 @@ export interface ILabelDropdownProps {
   label: React.ReactNode;
 }
 
-export const LabelDropdown = (props: ILabelDropdownProps) => {
+export function LabelDropdown(props: ILabelDropdownProps) {
   const {
     projectId,
     value,
@@ -130,14 +130,18 @@ export const 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 +163,7 @@ export const LabelDropdown = (props: ILabelDropdownProps) => {
     e.stopPropagation();
     if (query !== "" && e.key === "Escape") {
       setQuery("");
+      e.preventDefault();
     }
 
     if (query !== "" && e.key === "Enter" && !e.nativeEvent.isComposing && canCreateLabel) {
@@ -190,12 +195,12 @@ export const 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 w-full h-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"
+              : "cursor-pointer hover:bg-layer-1"
         }  ${buttonClassName}`}
         onClick={handleOnClick}
         disabled={disabled}
@@ -204,7 +209,17 @@ export const 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>) => {
@@ -229,16 +244,16 @@ export const 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 w-48 h-auto whitespace-nowrap rounded-sm border border-strong bg-surface-1 px-2 py-2.5 text-caption-sm-regular 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">
+                <Search 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,7 +263,7 @@ export const 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>
+                  <p className="text-center text-secondary">{t("common.loading")}</p>
                 ) : filteredOptions.length > 0 ? (
                   filteredOptions.map((option) => (
                     <Combobox.Option
@@ -261,9 +276,9 @@ export const 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 select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5 hover:bg-layer-1 ${
+                          active ? "bg-layer-1" : ""
+                        } ${selected ? "text-primary" : "text-secondary"}`
                       }
                     >
                       {({ selected }) => (
@@ -286,19 +301,19 @@ export const LabelDropdown = (props: ILabelDropdownProps) => {
                       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>
@@ -307,4 +322,4 @@ export const LabelDropdown = (props: ILabelDropdownProps) => {
       </ComboDropDown>
     </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 ecb856a0cd..dbdf25e962 100644
--- a/apps/web/core/components/issues/issue-layouts/properties/labels.tsx
+++ b/apps/web/core/components/issues/issue-layouts/properties/labels.tsx
@@ -1,6 +1,4 @@
-"use client";
-
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import type { Placement } from "@popperjs/core";
 import { observer } from "mobx-react";
 // plane helpers
@@ -38,7 +36,127 @@ export interface IIssuePropertyLabels {
   fullHeight?: boolean;
 }
 
-export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((props) => {
+type NoLabelProps = {
+  isMobile: boolean;
+  noLabelBorder: boolean;
+  fullWidth: boolean;
+  placeholderText?: string;
+};
+
+const NoLabel = observer(function NoLabel({ isMobile, noLabelBorder, fullWidth, placeholderText }: NoLabelProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip
+      position="top"
+      tooltipHeading={t("common.labels")}
+      tooltipContent="None"
+      isMobile={isMobile}
+      renderByDefault={false}
+    >
+      <div
+        className={cn(
+          "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"
+        )}
+      >
+        <LabelPropertyIcon className="h-3.5 w-3.5" />
+        {placeholderText}
+      </div>
+    </Tooltip>
+  );
+});
+
+type LabelSummaryProps = {
+  isMobile: boolean;
+  fullWidth: boolean;
+  noLabelBorder: boolean;
+  disabled?: boolean;
+  projectLabels: IIssueLabel[];
+  value: string[];
+};
+
+function LabelSummary({ isMobile, fullWidth, noLabelBorder, disabled, projectLabels, value }: LabelSummaryProps) {
+  const { t } = useTranslation();
+  return (
+    <div
+      className={cn(
+        "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-strong",
+        disabled ? "cursor-not-allowed" : "cursor-pointer"
+      )}
+    >
+      <Tooltip
+        isMobile={isMobile}
+        position="top"
+        tooltipHeading={t("common.labels")}
+        tooltipContent={projectLabels
+          ?.filter((l) => value.includes(l?.id))
+          .map((l) => l?.name)
+          .join(", ")}
+        renderByDefault={false}
+      >
+        <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>
+    </div>
+  );
+}
+
+type LabelItemProps = {
+  label: IIssueLabel;
+  isMobile: boolean;
+  renderByDefault: boolean;
+  disabled?: boolean;
+  fullWidth: boolean;
+  noLabelBorder: boolean;
+};
+
+const LabelItem = observer(function LabelItem({
+  label,
+  isMobile,
+  renderByDefault,
+  disabled,
+  fullWidth,
+  noLabelBorder,
+}: LabelItemProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip
+      position="top"
+      tooltipHeading={t("common.labels")}
+      tooltipContent={label?.name ?? ""}
+      isMobile={isMobile}
+      renderByDefault={renderByDefault}
+    >
+      <div
+        className={cn(
+          "flex overflow-hidden justify-center hover:bg-layer-1 max-w-full h-full flex-shrink-0 items-center rounded-sm px-2.5 text-caption-sm-regular",
+          !disabled && "cursor-pointer",
+          fullWidth && "w-full",
+          noLabelBorder ? "rounded-none" : "border-[0.5px] border-strong"
+        )}
+      >
+        <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={{
+              backgroundColor: label?.color ?? "#000000",
+            }}
+          />
+          <div className="line-clamp-1 inline-block w-auto max-w-[200px] truncate">{label?.name}</div>
+        </div>
+      </div>
+    </Tooltip>
+  );
+});
+
+export const IssuePropertyLabels = observer(function IssuePropertyLabels(props: IIssuePropertyLabels) {
   const {
     projectId,
     value,
@@ -56,8 +174,6 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
     fullWidth = false,
     fullHeight = false,
   } = props;
-  // i18n
-  const { t } = useTranslation();
   // states
   const [isOpen, setIsOpen] = useState(false);
   // refs
@@ -85,94 +201,6 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
   let projectLabels: IIssueLabel[] = defaultOptions as IIssueLabel[];
   if (storeLabels && storeLabels.length > 0) projectLabels = storeLabels;
 
-  const NoLabel = useMemo(
-    () => (
-      <Tooltip
-        position="top"
-        tooltipHeading={t("common.labels")}
-        tooltipContent="None"
-        isMobile={isMobile}
-        renderByDefault={false}
-      >
-        <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",
-            fullWidth && "w-full"
-          )}
-        >
-          <LabelPropertyIcon className="h-3.5 w-3.5" />
-          {placeholderText}
-        </div>
-      </Tooltip>
-    ),
-    [placeholderText, fullWidth, noLabelBorder, isMobile]
-  );
-
-  const LabelSummary = useMemo(
-    () => (
-      <div
-        className={cn(
-          "flex h-5 flex-shrink-0 items-center justify-center rounded px-2.5 text-xs",
-          fullWidth && "w-full",
-          noLabelBorder ? "rounded-none" : "border-[0.5px] border-custom-border-300",
-          disabled ? "cursor-not-allowed" : "cursor-pointer"
-        )}
-      >
-        <Tooltip
-          isMobile={isMobile}
-          position="top"
-          tooltipHeading={t("common.labels")}
-          tooltipContent={projectLabels
-            ?.filter((l) => value.includes(l?.id))
-            .map((l) => l?.name)
-            .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" />
-            {`${value.length} Labels`}
-          </div>
-        </Tooltip>
-      </div>
-    ),
-    [fullWidth, disabled, noLabelBorder, isMobile, projectLabels, value]
-  );
-
-  const LabelItem = useCallback(
-    ({ label }: { label: IIssueLabel }) => (
-      <Tooltip
-        key={label.id}
-        position="top"
-        tooltipHeading={t("common.labels")}
-        tooltipContent={label?.name ?? ""}
-        isMobile={isMobile}
-        renderByDefault={renderByDefault}
-      >
-        <div
-          key={label?.id}
-          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",
-            !disabled && "cursor-pointer",
-            fullWidth && "w-full",
-            noLabelBorder ? "rounded-none" : "border-[0.5px] border-custom-border-300"
-          )}
-        >
-          <div className="flex max-w-full items-center gap-1.5 overflow-hidden text-custom-text-200">
-            <span
-              className="h-2 w-2 flex-shrink-0 rounded-full"
-              style={{
-                backgroundColor: label?.color ?? "#000000",
-              }}
-            />
-            <div className="line-clamp-1 inline-block w-auto max-w-[200px] truncate">{label?.name}</div>
-          </div>
-        </div>
-      </Tooltip>
-    ),
-    [disabled, fullWidth, isMobile, noLabelBorder, renderByDefault]
-  );
-
   return (
     <>
       {value.length > 0 ? (
@@ -190,7 +218,16 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
                 hideDropdownArrow={hideDropdownArrow}
                 fullWidth={fullWidth}
                 fullHeight={fullHeight}
-                label={<LabelItem label={label} />}
+                label={
+                  <LabelItem
+                    label={label}
+                    isMobile={isMobile}
+                    renderByDefault={renderByDefault}
+                    disabled={disabled}
+                    fullWidth={fullWidth}
+                    noLabelBorder={noLabelBorder}
+                  />
+                }
               />
             ))
         ) : (
@@ -203,7 +240,16 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
             placement={placement}
             fullWidth={fullWidth}
             fullHeight={fullHeight}
-            label={LabelSummary}
+            label={
+              <LabelSummary
+                isMobile={isMobile}
+                fullWidth={fullWidth}
+                noLabelBorder={noLabelBorder}
+                disabled={disabled}
+                projectLabels={projectLabels}
+                value={value}
+              />
+            }
           />
         )
       ) : (
@@ -216,7 +262,14 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
           placement={placement}
           fullWidth={fullWidth}
           fullHeight={fullHeight}
-          label={NoLabel}
+          label={
+            <NoLabel
+              isMobile={isMobile}
+              noLabelBorder={noLabelBorder}
+              fullWidth={fullWidth}
+              placeholderText={placeholderText}
+            />
+          }
         />
       )}
     </>
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 24896f9607..4745942e1b 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
@@ -9,18 +9,21 @@ interface IWithDisplayPropertiesHOC {
   children: ReactNode;
 }
 
-export const WithDisplayPropertiesHOC = observer(
-  ({ displayProperties, shouldRenderProperty, displayPropertyKey, children }: IWithDisplayPropertiesHOC) => {
-    let shouldDisplayPropertyFromFilters = false;
-    if (Array.isArray(displayPropertyKey))
-      shouldDisplayPropertyFromFilters = displayPropertyKey.every((key) => !!displayProperties[key]);
-    else shouldDisplayPropertyFromFilters = !!displayProperties[displayPropertyKey];
+export const WithDisplayPropertiesHOC = observer(function WithDisplayPropertiesHOC({
+  displayProperties,
+  shouldRenderProperty,
+  displayPropertyKey,
+  children,
+}: IWithDisplayPropertiesHOC) {
+  let shouldDisplayPropertyFromFilters = false;
+  if (Array.isArray(displayPropertyKey))
+    shouldDisplayPropertyFromFilters = displayPropertyKey.every((key) => !!displayProperties[key]);
+  else shouldDisplayPropertyFromFilters = !!displayProperties[displayPropertyKey];
 
-    const renderProperty =
-      shouldDisplayPropertyFromFilters && (shouldRenderProperty ? shouldRenderProperty(displayProperties) : true);
+  const renderProperty =
+    shouldDisplayPropertyFromFilters && (shouldRenderProperty ? shouldRenderProperty(displayProperties) : true);
 
-    if (!renderProperty) return null;
+  if (!renderProperty) return null;
 
-    return <>{children}</>;
-  }
-);
+  return <>{children}</>;
+});
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 5d8ab87be3..ee6ac4ceb4 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,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { omit } from "lodash-es";
 import { observer } from "mobx-react";
@@ -25,7 +23,7 @@ import type { IQuickActionProps } from "../list/list-view-types";
 import type { MenuItemFactoryProps } from "./helper";
 import { useAllIssueMenuItems } from "./helper";
 
-export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props) => {
+export const AllIssueQuickActions = observer(function AllIssueQuickActions(props: IQuickActionProps) {
   const {
     issue,
     handleDelete,
@@ -87,13 +85,16 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props
 
   const MENU_ITEMS = useAllIssueMenuItems(menuItemProps);
 
-  const CONTEXT_MENU_ITEMS: TContextMenuItem[] = MENU_ITEMS.map((item) => ({
-    ...item,
-    onClick: () => {
-      captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.GLOBAL_VIEW });
-      item.action();
-    },
-  }));
+  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();
+      },
+    };
+  });
 
   return (
     <>
@@ -157,8 +158,8 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((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("text-tertiary whitespace-pre-line", {
+                          "text-placeholder": item.disabled,
                         })}
                       >
                         {item.description}
@@ -170,7 +171,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props
                 className={cn(
                   "flex items-center gap-2",
                   {
-                    "text-custom-text-400": item.disabled,
+                    "text-placeholder": item.disabled,
                   },
                   item.className
                 )}
@@ -185,7 +186,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props
                     className={cn(
                       "flex items-center gap-2",
                       {
-                        "text-custom-text-400": nestedItem.disabled,
+                        "text-placeholder": nestedItem.disabled,
                       },
                       nestedItem.className
                     )}
@@ -196,8 +197,8 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((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("text-tertiary whitespace-pre-line", {
+                            "text-placeholder": nestedItem.disabled,
                           })}
                         >
                           {nestedItem.description}
@@ -221,7 +222,7 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((props
               className={cn(
                 "flex items-center gap-2",
                 {
-                  "text-custom-text-400": item.disabled,
+                  "text-placeholder": item.disabled,
                 },
                 item.className
               )}
@@ -232,8 +233,8 @@ export const AllIssueQuickActions: React.FC<IQuickActionProps> = observer((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("text-tertiary whitespace-pre-line", {
+                      "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 43102767bb..6c217a270b 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,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -19,7 +17,7 @@ import type { IQuickActionProps } from "../list/list-view-types";
 import type { MenuItemFactoryProps } from "./helper";
 import { useArchivedIssueMenuItems } from "./helper";
 
-export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = observer((props) => {
+export const ArchivedIssueQuickActions = observer(function ArchivedIssueQuickActions(props: IQuickActionProps) {
   const {
     issue,
     handleDelete,
@@ -63,13 +61,16 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = observer((
 
   const MENU_ITEMS = useArchivedIssueMenuItems(menuItemProps);
 
-  const CONTEXT_MENU_ITEMS: TContextMenuItem[] = MENU_ITEMS.map((item) => ({
-    ...item,
-    onClick: () => {
-      captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.ARCHIVED });
-      item.action();
-    },
-  }));
+  const CONTEXT_MENU_ITEMS = MENU_ITEMS.map(function CONTEXT_MENU_ITEMS(item) {
+    return {
+      ...item,
+
+      onClick: () => {
+        captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.ARCHIVED });
+        item.action();
+      },
+    };
+  });
   return (
     <>
       {/* Modals */}
@@ -103,7 +104,7 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = observer((
               className={cn(
                 "flex items-center gap-2",
                 {
-                  "text-custom-text-400": item.disabled,
+                  "text-placeholder": item.disabled,
                 },
                 item.className
               )}
@@ -114,8 +115,8 @@ export const ArchivedIssueQuickActions: React.FC<IQuickActionProps> = observer((
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-custom-text-300 whitespace-pre-line", {
-                      "text-custom-text-400": item.disabled,
+                    className={cn("text-tertiary whitespace-pre-line", {
+                      "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 17bd915564..a7bc06c353 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,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { omit } from "lodash-es";
 import { observer } from "mobx-react";
@@ -33,7 +31,7 @@ import type { IQuickActionProps } from "../list/list-view-types";
 import type { MenuItemFactoryProps } from "./helper";
 import { useCycleIssueMenuItems } from "./helper";
 
-export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((props) => {
+export const CycleIssueQuickActions = observer(function CycleIssueQuickActions(props: IQuickActionProps) {
   const {
     issue,
     handleDelete,
@@ -104,13 +102,16 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
 
   const MENU_ITEMS = useCycleIssueMenuItems(menuItemProps);
 
-  const CONTEXT_MENU_ITEMS: TContextMenuItem[] = MENU_ITEMS.map((item) => ({
-    ...item,
-    onClick: () => {
-      captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.CYCLE });
-      item.action();
-    },
-  }));
+  const CONTEXT_MENU_ITEMS = MENU_ITEMS.map(function CONTEXT_MENU_ITEMS(item) {
+    return {
+      ...item,
+
+      onClick: () => {
+        captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.CYCLE });
+        item.action();
+      },
+    };
+  });
 
   return (
     <>
@@ -174,8 +175,8 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
                     <h5>{item.title}</h5>
                     {item.description && (
                       <p
-                        className={cn("text-custom-text-300 whitespace-pre-line", {
-                          "text-custom-text-400": item.disabled,
+                        className={cn("text-tertiary whitespace-pre-line", {
+                          "text-placeholder": item.disabled,
                         })}
                       >
                         {item.description}
@@ -187,7 +188,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
                 className={cn(
                   "flex items-center gap-2",
                   {
-                    "text-custom-text-400": item.disabled,
+                    "text-placeholder": item.disabled,
                   },
                   item.className
                 )}
@@ -202,7 +203,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
                     className={cn(
                       "flex items-center gap-2",
                       {
-                        "text-custom-text-400": nestedItem.disabled,
+                        "text-placeholder": nestedItem.disabled,
                       },
                       nestedItem.className
                     )}
@@ -213,8 +214,8 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
                       <h5>{nestedItem.title}</h5>
                       {nestedItem.description && (
                         <p
-                          className={cn("text-custom-text-300 whitespace-pre-line", {
-                            "text-custom-text-400": nestedItem.disabled,
+                          className={cn("text-tertiary whitespace-pre-line", {
+                            "text-placeholder": nestedItem.disabled,
                           })}
                         >
                           {nestedItem.description}
@@ -238,7 +239,7 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
               className={cn(
                 "flex items-center gap-2",
                 {
-                  "text-custom-text-400": item.disabled,
+                  "text-placeholder": item.disabled,
                 },
                 item.className
               )}
@@ -249,8 +250,8 @@ export const CycleIssueQuickActions: React.FC<IQuickActionProps> = observer((pro
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-custom-text-300 whitespace-pre-line", {
-                      "text-custom-text-400": item.disabled,
+                    className={cn("text-tertiary whitespace-pre-line", {
+                      "text-placeholder": item.disabled,
                     })}
                   >
                     {item.description}
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 b90ed2d104..2df9463012 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,9 +1,8 @@
-"use client";
-
 import { useState } from "react";
 import { omit } from "lodash-es";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
+import { Ellipsis } from "lucide-react";
 // plane imports
 import {
   ARCHIVABLE_STATE_GROUPS,
@@ -31,6 +30,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;
@@ -40,14 +40,15 @@ type TWorkItemDetailQuickActionProps = IQuickActionProps & {
   isPeekMode?: boolean;
 };
 
-export const WorkItemDetailQuickActions: React.FC<TWorkItemDetailQuickActionProps> = observer((props) => {
+export const WorkItemDetailQuickActions = observer(function WorkItemDetailQuickActions(
+  props: TWorkItemDetailQuickActionProps
+) {
   const {
     issue,
     handleDelete,
     handleUpdate,
     handleArchive,
     handleRestore,
-    customActionButton,
     portalElement,
     readOnly = false,
     placements = "bottom-end",
@@ -176,15 +177,20 @@ export const WorkItemDetailQuickActions: React.FC<TWorkItemDetailQuickActionProp
       }
       return item;
     })
-    .filter((item) => item.shouldRender !== false);
+    .filter(function MENU_ITEMS(item) {
+      return item.shouldRender !== false;
+    });
 
-  const CONTEXT_MENU_ITEMS: TContextMenuItem[] = MENU_ITEMS.map((item) => ({
-    ...item,
-    onClick: () => {
-      captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.PROJECT_VIEW });
-      item.action();
-    },
-  }));
+  const CONTEXT_MENU_ITEMS = MENU_ITEMS.map(function CONTEXT_MENU_ITEMS(item) {
+    return {
+      ...item,
+
+      onClick: () => {
+        captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.PROJECT_VIEW });
+        item.action();
+      },
+    };
+  });
 
   return (
     <>
@@ -238,7 +244,7 @@ export const WorkItemDetailQuickActions: React.FC<TWorkItemDetailQuickActionProp
       <CustomMenu
         ellipsis
         placement={placements}
-        customButton={customActionButton}
+        customButton={<IconButton size="lg" variant="secondary" icon={Ellipsis} />}
         portalElement={portalElement}
         menuItemsClassName="z-[14]"
         maxHeight="lg"
@@ -258,8 +264,8 @@ export const WorkItemDetailQuickActions: React.FC<TWorkItemDetailQuickActionProp
                     <h5>{item.title}</h5>
                     {item.description && (
                       <p
-                        className={cn("text-custom-text-300 whitespace-pre-line", {
-                          "text-custom-text-400": item.disabled,
+                        className={cn("text-tertiary whitespace-pre-line", {
+                          "text-placeholder": item.disabled,
                         })}
                       >
                         {item.description}
@@ -271,7 +277,7 @@ export const WorkItemDetailQuickActions: React.FC<TWorkItemDetailQuickActionProp
                 className={cn(
                   "flex items-center gap-2",
                   {
-                    "text-custom-text-400": item.disabled,
+                    "text-placeholder": item.disabled,
                   },
                   item.className
                 )}
@@ -286,7 +292,7 @@ export const WorkItemDetailQuickActions: React.FC<TWorkItemDetailQuickActionProp
                     className={cn(
                       "flex items-center gap-2",
                       {
-                        "text-custom-text-400": nestedItem.disabled,
+                        "text-placeholder": nestedItem.disabled,
                       },
                       nestedItem.className
                     )}
@@ -297,8 +303,8 @@ export const WorkItemDetailQuickActions: React.FC<TWorkItemDetailQuickActionProp
                       <h5>{nestedItem.title}</h5>
                       {nestedItem.description && (
                         <p
-                          className={cn("text-custom-text-300 whitespace-pre-line", {
-                            "text-custom-text-400": nestedItem.disabled,
+                          className={cn("text-tertiary whitespace-pre-line", {
+                            "text-placeholder": nestedItem.disabled,
                           })}
                         >
                           {nestedItem.description}
@@ -322,7 +328,7 @@ export const WorkItemDetailQuickActions: React.FC<TWorkItemDetailQuickActionProp
               className={cn(
                 "flex items-center gap-2",
                 {
-                  "text-custom-text-400": item.disabled,
+                  "text-placeholder": item.disabled,
                 },
                 item.className
               )}
@@ -333,8 +339,8 @@ export const WorkItemDetailQuickActions: React.FC<TWorkItemDetailQuickActionProp
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-custom-text-300 whitespace-pre-line", {
-                      "text-custom-text-400": item.disabled,
+                    className={cn("text-tertiary whitespace-pre-line", {
+                      "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 c0ce097511..235456a4d9 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,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { omit } from "lodash-es";
 import { observer } from "mobx-react";
@@ -32,7 +30,7 @@ import type { IQuickActionProps } from "../list/list-view-types";
 import type { MenuItemFactoryProps } from "./helper";
 import { useModuleIssueMenuItems } from "./helper";
 
-export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((props) => {
+export const ModuleIssueQuickActions = observer(function ModuleIssueQuickActions(props: IQuickActionProps) {
   const {
     issue,
     handleDelete,
@@ -104,13 +102,16 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
 
   const MENU_ITEMS = useModuleIssueMenuItems(menuItemProps);
 
-  const CONTEXT_MENU_ITEMS: TContextMenuItem[] = MENU_ITEMS.map((item) => ({
-    ...item,
-    onClick: () => {
-      captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.MODULE });
-      item.action();
-    },
-  }));
+  const CONTEXT_MENU_ITEMS = MENU_ITEMS.map(function CONTEXT_MENU_ITEMS(item) {
+    return {
+      ...item,
+
+      onClick: () => {
+        captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.MODULE });
+        item.action();
+      },
+    };
+  });
   return (
     <>
       {/* Modals */}
@@ -173,8 +174,8 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
                     <h5>{item.title}</h5>
                     {item.description && (
                       <p
-                        className={cn("text-custom-text-300 whitespace-pre-line", {
-                          "text-custom-text-400": item.disabled,
+                        className={cn("text-tertiary whitespace-pre-line", {
+                          "text-placeholder": item.disabled,
                         })}
                       >
                         {item.description}
@@ -186,7 +187,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
                 className={cn(
                   "flex items-center gap-2",
                   {
-                    "text-custom-text-400": item.disabled,
+                    "text-placeholder": item.disabled,
                   },
                   item.className
                 )}
@@ -201,7 +202,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
                     className={cn(
                       "flex items-center gap-2",
                       {
-                        "text-custom-text-400": nestedItem.disabled,
+                        "text-placeholder": nestedItem.disabled,
                       },
                       nestedItem.className
                     )}
@@ -212,8 +213,8 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
                       <h5>{nestedItem.title}</h5>
                       {nestedItem.description && (
                         <p
-                          className={cn("text-custom-text-300 whitespace-pre-line", {
-                            "text-custom-text-400": nestedItem.disabled,
+                          className={cn("text-tertiary whitespace-pre-line", {
+                            "text-placeholder": nestedItem.disabled,
                           })}
                         >
                           {nestedItem.description}
@@ -237,7 +238,7 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
               className={cn(
                 "flex items-center gap-2",
                 {
-                  "text-custom-text-400": item.disabled,
+                  "text-placeholder": item.disabled,
                 },
                 item.className
               )}
@@ -248,8 +249,8 @@ export const ModuleIssueQuickActions: React.FC<IQuickActionProps> = observer((pr
                 <h5>{item.title}</h5>
                 {item.description && (
                   <p
-                    className={cn("text-custom-text-300 whitespace-pre-line", {
-                      "text-custom-text-400": item.disabled,
+                    className={cn("text-tertiary whitespace-pre-line", {
+                      "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 978d772918..fd53961c1b 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,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { omit } from "lodash-es";
 import { observer } from "mobx-react";
@@ -32,7 +30,7 @@ import type { IQuickActionProps } from "../list/list-view-types";
 import type { MenuItemFactoryProps } from "./helper";
 import { useProjectIssueMenuItems } from "./helper";
 
-export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((props) => {
+export const ProjectIssueQuickActions = observer(function ProjectIssueQuickActions(props: IQuickActionProps) {
   const {
     issue,
     handleDelete,
@@ -105,13 +103,16 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
 
   const MENU_ITEMS = useProjectIssueMenuItems(menuItemProps);
 
-  const CONTEXT_MENU_ITEMS: TContextMenuItem[] = MENU_ITEMS.map((item) => ({
-    ...item,
-    onClick: () => {
-      captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.PROJECT_VIEW });
-      item.action();
-    },
-  }));
+  const CONTEXT_MENU_ITEMS = MENU_ITEMS.map(function CONTEXT_MENU_ITEMS(item) {
+    return {
+      ...item,
+
+      onClick: () => {
+        captureClick({ elementName: WORK_ITEM_TRACKER_ELEMENTS.QUICK_ACTIONS.PROJECT_VIEW });
+        item.action();
+      },
+    };
+  });
 
   return (
     <>
@@ -174,8 +175,8 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((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("text-tertiary whitespace-pre-line", {
+                          "text-placeholder": item.disabled,
                         })}
                       >
                         {item.description}
@@ -187,7 +188,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
                 className={cn(
                   "flex items-center gap-2",
                   {
-                    "text-custom-text-400": item.disabled,
+                    "text-placeholder": item.disabled,
                   },
                   item.className
                 )}
@@ -202,7 +203,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
                     className={cn(
                       "flex items-center gap-2",
                       {
-                        "text-custom-text-400": nestedItem.disabled,
+                        "text-placeholder": nestedItem.disabled,
                       },
                       nestedItem.className
                     )}
@@ -213,8 +214,8 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((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("text-tertiary whitespace-pre-line", {
+                            "text-placeholder": nestedItem.disabled,
                           })}
                         >
                           {nestedItem.description}
@@ -238,7 +239,7 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((p
               className={cn(
                 "flex items-center gap-2",
                 {
-                  "text-custom-text-400": item.disabled,
+                  "text-placeholder": item.disabled,
                 },
                 item.className
               )}
@@ -249,8 +250,8 @@ export const ProjectIssueQuickActions: React.FC<IQuickActionProps> = observer((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("text-tertiary whitespace-pre-line", {
+                      "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 bd57939c28..9f8d8cff56 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
@@ -5,18 +5,18 @@ import { useTranslation } from "@plane/i18n";
 import { Row } from "@plane/ui";
 import type { TQuickAddIssueButton } from "../root";
 
-export const GanttQuickAddIssueButton: FC<TQuickAddIssueButton> = observer((props) => {
+export const GanttQuickAddIssueButton = observer(function GanttQuickAddIssueButton(props: TQuickAddIssueButton) {
   const { onClick, isEpic = false } = props;
   const { t } = useTranslation();
   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>
+        <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/kanban.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/button/kanban.tsx
index 7565ea4b9f..48cdb985b2 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
@@ -4,16 +4,16 @@ import { PlusIcon } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
 import type { TQuickAddIssueButton } from "../root";
 
-export const KanbanQuickAddIssueButton: FC<TQuickAddIssueButton> = observer((props) => {
+export const KanbanQuickAddIssueButton = observer(function KanbanQuickAddIssueButton(props: TQuickAddIssueButton) {
   const { onClick, isEpic = false } = props;
   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 py-1.5 hover:bg-layer-transparent-hover bg-layer-transparent rounded-lg  px-2  py-1"
       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 3f77cd47cf..f365a50f1a 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
@@ -5,16 +5,16 @@ import { useTranslation } from "@plane/i18n";
 import { Row } from "@plane/ui";
 import type { TQuickAddIssueButton } from "../root";
 
-export const ListQuickAddIssueButton: FC<TQuickAddIssueButton> = observer((props) => {
+export const ListQuickAddIssueButton = observer(function ListQuickAddIssueButton(props: TQuickAddIssueButton) {
   const { onClick, isEpic = false } = props;
   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 py-3 bg-layer-transparent 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 accd23c7a3..7a6636ae3c 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
@@ -4,18 +4,18 @@ import { PlusIcon } from "lucide-react";
 import { useTranslation } from "@plane/i18n";
 import type { TQuickAddIssueButton } from "../root";
 
-export const SpreadsheetAddIssueButton: FC<TQuickAddIssueButton> = observer((props) => {
+export const SpreadsheetAddIssueButton = observer(function SpreadsheetAddIssueButton(props: TQuickAddIssueButton) {
   const { onClick, isEpic = false } = props;
   const { t } = useTranslation();
   return (
     <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 items-center gap-x-[6px] w-full px-2 py-2 bg-layer-transparent hover:bg-layer-transparent-hover transition-colors"
         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 bba1a5f77c..0aa630e71c 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
@@ -2,7 +2,7 @@ import type { FC } from "react";
 import { observer } from "mobx-react";
 import type { TQuickAddIssueForm } from "../root";
 
-export const CalendarQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props) => {
+export const CalendarQuickAddIssueForm = observer(function CalendarQuickAddIssueForm(props: TQuickAddIssueForm) {
   const { ref, isOpen, projectDetail, register, onSubmit, isEpic } = props;
 
   return (
@@ -14,9 +14,9 @@ export const CalendarQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props
       <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 md:border-[0.5px] border-subtle bg-surface-1 px-2 md:shadow-raised-100 transition-opacity"
       >
-        <h4 className="text-sm md:text-xs leading-5 text-custom-text-400">{projectDetail?.identifier ?? "..."}</h4>
+        <h4 className="text-13 md:text-11 leading-5 text-placeholder">{projectDetail?.identifier ?? "..."}</h4>
         <input
           type="text"
           autoComplete="off"
@@ -24,7 +24,7 @@ export const CalendarQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props
           {...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 md:text-11 font-medium leading-5 text-secondary outline-none"
         />
       </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 c09bae8e1f..78e4a2913a 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
@@ -4,18 +4,18 @@ import { useTranslation } from "@plane/i18n";
 import { cn } from "@plane/utils";
 import type { TQuickAddIssueForm } from "../root";
 
-export const GanttQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props) => {
+export const GanttQuickAddIssueForm = observer(function GanttQuickAddIssueForm(props: TQuickAddIssueForm) {
   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-red-500/20 bg-red-500/10")}>
       <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 +23,11 @@ export const GanttQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props) =
             {...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 font-medium leading-5 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="px-3 py-2 text-11 bg-surface-1 italic text-secondary">
         {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/kanban.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/form/kanban.tsx
index c81c36f388..ff9f538b18 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
@@ -3,25 +3,25 @@ import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import type { TQuickAddIssueForm } from "../root";
 
-export const KanbanQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props) => {
+export const KanbanQuickAddIssueForm = observer(function KanbanQuickAddIssueForm(props: TQuickAddIssueForm) {
   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 shadow-raised-200 bg-layer-2">
+      <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 font-medium leading-5 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 font-medium leading-5 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 italic text-tertiary bg-layer-3">
         {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 1187f2764c..d2886977aa 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
@@ -3,18 +3,18 @@ import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import type { TQuickAddIssueForm } from "../root";
 
-export const ListQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props) => {
+export const ListQuickAddIssueForm = observer(function ListQuickAddIssueForm(props: TQuickAddIssueForm) {
   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 +22,11 @@ export const ListQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props) =>
             {...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 font-medium leading-5 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 italic text-secondary">
         {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 abb735b0ef..84e99b1d83 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
@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 import type { TQuickAddIssueForm } from "../root";
 
-export const SpreadsheetQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((props) => {
+export const SpreadsheetQuickAddIssueForm = observer(function SpreadsheetQuickAddIssueForm(props: TQuickAddIssueForm) {
   const { ref, projectDetail, register, onSubmit, isEpic } = props;
   const { t } = useTranslation();
   return (
@@ -11,9 +11,9 @@ export const SpreadsheetQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((pr
       <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 +21,10 @@ export const SpreadsheetQuickAddIssueForm: FC<TQuickAddIssueForm> = observer((pr
           {...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="ml-3 mt-3 text-11 italic text-secondary">
         {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/root.tsx b/apps/web/core/components/issues/issue-layouts/quick-add/root.tsx
index f26a3f4fe0..e3e16bb243 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,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
@@ -51,7 +49,7 @@ const defaultValues: Partial<TIssue> = {
   name: "",
 };
 
-export const QuickAddIssueRoot: FC<TQuickAddIssueRoot> = observer((props) => {
+export const QuickAddIssueRoot = observer(function QuickAddIssueRoot(props: TQuickAddIssueRoot) {
   const {
     isQuickAddOpen,
     layout,
@@ -173,13 +171,13 @@ export const QuickAddIssueRoot: FC<TQuickAddIssueRoot> = observer((props) => {
           {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 px-2 py-3 bg-layer-transparent 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 10702ea098..ecdf1e66fa 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
@@ -27,7 +27,7 @@ type Props = {
   toggleLoading: (value: boolean) => void;
 };
 
-export const AllIssueLayoutRoot: React.FC<Props> = observer((props: Props) => {
+export const AllIssueLayoutRoot = observer(function AllIssueLayoutRoot(props: Props) {
   const { isDefaultView, isLoading = false, toggleLoading } = props;
   // router
   const router = useAppRouter();
@@ -141,8 +141,8 @@ export const AllIssueLayoutRoot: React.FC<Props> = observer((props: Props) => {
         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 858b9130b1..00e4ec2e64 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
@@ -6,7 +6,6 @@ import useSWR from "swr";
 import { ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 import { EIssuesStoreType } from "@plane/types";
 // components
-import { LogoSpinner } from "@/components/common/logo-spinner";
 import { ProjectLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/project-level";
 // hooks
 import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
@@ -16,7 +15,7 @@ import { IssuesStoreContext } from "@/hooks/use-issue-layout-store";
 import { IssuePeekOverview } from "../../peek-overview";
 import { ArchivedIssueListLayout } from "../list/roots/archived-issue-root";
 
-export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
+export const ArchivedIssueLayoutRoot = observer(function ArchivedIssueLayoutRoot() {
   // router
   const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } = useParams();
   const workspaceSlug = routerWorkspaceSlug ? routerWorkspaceSlug.toString() : undefined;
@@ -26,7 +25,7 @@ export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
   // derived values
   const workItemFilters = projectId ? issuesFilter?.getIssueFilters(projectId) : undefined;
 
-  const { isLoading } = useSWR(
+  useSWR(
     workspaceSlug && projectId ? `ARCHIVED_ISSUES_${workspaceSlug.toString()}_${projectId.toString()}` : null,
     async () => {
       if (workspaceSlug && projectId) {
@@ -36,15 +35,7 @@ export const ArchivedIssueLayoutRoot: React.FC = observer(() => {
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
-  if (!workspaceSlug || !projectId) return <></>;
-
-  if (isLoading && !workItemFilters)
-    return (
-      <div className="h-full w-full flex items-center justify-center">
-        <LogoSpinner />
-      </div>
-    );
-
+  if (!workspaceSlug || !projectId || !workItemFilters) return <></>;
   return (
     <IssuesStoreContext.Provider value={EIssuesStoreType.ARCHIVED}>
       <ProjectLevelWorkItemFiltersHOC
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 a34e106736..30b30b0b11 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
@@ -7,7 +7,6 @@ import useSWR from "swr";
 import { ISSUE_DISPLAY_FILTERS_BY_PAGE, PROJECT_VIEW_TRACKER_ELEMENTS } from "@plane/constants";
 import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
 // components
-import { LogoSpinner } from "@/components/common/logo-spinner";
 import { TransferIssues } from "@/components/cycles/transfer-issues";
 import { TransferIssuesModal } from "@/components/cycles/transfer-issues-modal";
 // hooks
@@ -24,11 +23,11 @@ import { CycleKanBanLayout } from "../kanban/roots/cycle-root";
 import { CycleListLayout } from "../list/roots/cycle-root";
 import { CycleSpreadsheetLayout } from "../spreadsheet/roots/cycle-root";
 
-const CycleIssueLayout = (props: {
+function CycleIssueLayout(props: {
   activeLayout: EIssueLayoutTypes | undefined;
   cycleId: string;
   isCompletedCycle: boolean;
-}) => {
+}) {
   switch (props.activeLayout) {
     case EIssueLayoutTypes.LIST:
       return <CycleListLayout />;
@@ -43,9 +42,9 @@ const CycleIssueLayout = (props: {
     default:
       return null;
   }
-};
+}
 
-export const CycleLayoutRoot: React.FC = observer(() => {
+export const CycleLayoutRoot = observer(function CycleLayoutRoot() {
   const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId, cycleId: routerCycleId } = useParams();
   const workspaceSlug = routerWorkspaceSlug ? routerWorkspaceSlug.toString() : undefined;
   const projectId = routerProjectId ? routerProjectId.toString() : undefined;
@@ -59,7 +58,7 @@ export const CycleLayoutRoot: React.FC = observer(() => {
   const workItemFilters = cycleId ? issuesFilter?.getIssueFilters(cycleId) : undefined;
   const activeLayout = workItemFilters?.displayFilters?.layout;
 
-  const { isLoading } = useSWR(
+  useSWR(
     workspaceSlug && projectId && cycleId ? `CYCLE_ISSUES_${workspaceSlug}_${projectId}_${cycleId}` : null,
     async () => {
       if (workspaceSlug && projectId && cycleId) {
@@ -78,15 +77,7 @@ export const CycleLayoutRoot: React.FC = observer(() => {
     : 0;
   const canTransferIssues = isProgressSnapshotEmpty && transferableIssuesCount > 0;
 
-  if (!workspaceSlug || !projectId || !cycleId) return <></>;
-
-  if (isLoading && !workItemFilters)
-    return (
-      <div className="h-full w-full flex items-center justify-center">
-        <LogoSpinner />
-      </div>
-    );
-
+  if (!workspaceSlug || !projectId || !cycleId || !workItemFilters) return <></>;
   return (
     <IssuesStoreContext.Provider value={EIssuesStoreType.CYCLE}>
       <ProjectLevelWorkItemFiltersHOC
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 e4790add14..a69b4ff2e8 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
@@ -6,8 +6,6 @@ import useSWR from "swr";
 import { ISSUE_DISPLAY_FILTERS_BY_PAGE, PROJECT_VIEW_TRACKER_ELEMENTS } from "@plane/constants";
 import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
 import { Row, ERowVariant } from "@plane/ui";
-// components
-import { LogoSpinner } from "@/components/common/logo-spinner";
 // hooks
 import { ProjectLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/project-level";
 import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
@@ -21,7 +19,7 @@ import { ModuleKanBanLayout } from "../kanban/roots/module-root";
 import { ModuleListLayout } from "../list/roots/module-root";
 import { ModuleSpreadsheetLayout } from "../spreadsheet/roots/module-root";
 
-const ModuleIssueLayout = (props: { activeLayout: EIssueLayoutTypes | undefined; moduleId: string }) => {
+function ModuleIssueLayout(props: { activeLayout: EIssueLayoutTypes | undefined; moduleId: string }) {
   switch (props.activeLayout) {
     case EIssueLayoutTypes.LIST:
       return <ModuleListLayout />;
@@ -36,9 +34,9 @@ const ModuleIssueLayout = (props: { activeLayout: EIssueLayoutTypes | undefined;
     default:
       return null;
   }
-};
+}
 
-export const ModuleLayoutRoot: React.FC = observer(() => {
+export const ModuleLayoutRoot = observer(function ModuleLayoutRoot() {
   // router
   const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId, moduleId: routerModuleId } = useParams();
   const workspaceSlug = routerWorkspaceSlug ? routerWorkspaceSlug.toString() : undefined;
@@ -50,7 +48,7 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
   const workItemFilters = moduleId ? issuesFilter?.getIssueFilters(moduleId) : undefined;
   const activeLayout = workItemFilters?.displayFilters?.layout || undefined;
 
-  const { isLoading } = useSWR(
+  useSWR(
     workspaceSlug && projectId && moduleId
       ? `MODULE_ISSUES_${workspaceSlug.toString()}_${projectId.toString()}_${moduleId.toString()}`
       : null,
@@ -62,15 +60,7 @@ export const ModuleLayoutRoot: React.FC = observer(() => {
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
-  if (!workspaceSlug || !projectId || !moduleId) return <></>;
-
-  if (isLoading && !workItemFilters)
-    return (
-      <div className="h-full w-full flex items-center justify-center">
-        <LogoSpinner />
-      </div>
-    );
-
+  if (!workspaceSlug || !projectId || !moduleId || !workItemFilters) return <></>;
   return (
     <IssuesStoreContext.Provider value={EIssuesStoreType.MODULE}>
       <ProjectLevelWorkItemFiltersHOC
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 7705a2a2fe..79d4324f72 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,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
@@ -9,7 +6,6 @@ import { ISSUE_DISPLAY_FILTERS_BY_PAGE, PROJECT_VIEW_TRACKER_ELEMENTS } from "@p
 import { EIssueLayoutTypes, EIssuesStoreType } from "@plane/types";
 import { Spinner } from "@plane/ui";
 // components
-import { LogoSpinner } from "@/components/common/logo-spinner";
 import { ProjectLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/project-level";
 import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
 // hooks
@@ -23,7 +19,7 @@ import { KanBanLayout } from "../kanban/roots/project-root";
 import { ListLayout } from "../list/roots/project-root";
 import { ProjectSpreadsheetLayout } from "../spreadsheet/roots/project-root";
 
-const ProjectIssueLayout = (props: { activeLayout: EIssueLayoutTypes | undefined }) => {
+function ProjectIssueLayout(props: { activeLayout: EIssueLayoutTypes | undefined }) {
   switch (props.activeLayout) {
     case EIssueLayoutTypes.LIST:
       return <ListLayout />;
@@ -38,9 +34,9 @@ const ProjectIssueLayout = (props: { activeLayout: EIssueLayoutTypes | undefined
     default:
       return null;
   }
-};
+}
 
-export const ProjectLayoutRoot: FC = observer(() => {
+export const ProjectLayoutRoot = observer(function ProjectLayoutRoot() {
   // router
   const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId } = useParams();
   const workspaceSlug = routerWorkspaceSlug ? routerWorkspaceSlug.toString() : undefined;
@@ -51,7 +47,7 @@ export const ProjectLayoutRoot: FC = observer(() => {
   const workItemFilters = projectId ? issuesFilter?.getIssueFilters(projectId) : undefined;
   const activeLayout = workItemFilters?.displayFilters?.layout;
 
-  const { isLoading } = useSWR(
+  useSWR(
     workspaceSlug && projectId ? `PROJECT_ISSUES_${workspaceSlug}_${projectId}` : null,
     async () => {
       if (workspaceSlug && projectId) {
@@ -61,15 +57,7 @@ export const ProjectLayoutRoot: FC = observer(() => {
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
 
-  if (!workspaceSlug || !projectId) return <></>;
-
-  if (isLoading && !workItemFilters)
-    return (
-      <div className="h-full w-full flex items-center justify-center">
-        <LogoSpinner />
-      </div>
-    );
-
+  if (!workspaceSlug || !projectId || !workItemFilters) return <></>;
   return (
     <IssuesStoreContext.Provider value={EIssuesStoreType.PROJECT}>
       <ProjectLevelWorkItemFiltersHOC
@@ -92,10 +80,10 @@ export const ProjectLayoutRoot: FC = observer(() => {
                 }}
               />
             )}
-            <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">
+                <div className="fixed w-[40px] h-[40px] z-50 right-[20px] top-[70px] flex justify-center items-center bg-layer-1 shadow-sm rounded-sm">
                   <Spinner className="w-4 h-4" />
                 </div>
               )}
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 15fecb9a1f..0e3ad0cf78 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
@@ -5,8 +5,6 @@ import useSWR from "swr";
 // plane constants
 import { ISSUE_DISPLAY_FILTERS_BY_PAGE, PROJECT_VIEW_TRACKER_ELEMENTS } from "@plane/constants";
 import { EIssuesStoreType, EIssueLayoutTypes } from "@plane/types";
-// components
-import { LogoSpinner } from "@/components/common/logo-spinner";
 // hooks
 import { ProjectLevelWorkItemFiltersHOC } from "@/components/work-item-filters/filters-hoc/project-level";
 import { WorkItemFiltersRow } from "@/components/work-item-filters/filters-row";
@@ -21,7 +19,7 @@ import { ProjectViewKanBanLayout } from "../kanban/roots/project-view-root";
 import { ProjectViewListLayout } from "../list/roots/project-view-root";
 import { ProjectViewSpreadsheetLayout } from "../spreadsheet/roots/project-view-root";
 
-const ProjectViewIssueLayout = (props: { activeLayout: EIssueLayoutTypes | undefined; viewId: string }) => {
+function ProjectViewIssueLayout(props: { activeLayout: EIssueLayoutTypes | undefined; viewId: string }) {
   switch (props.activeLayout) {
     case EIssueLayoutTypes.LIST:
       return <ProjectViewListLayout />;
@@ -36,9 +34,9 @@ const ProjectViewIssueLayout = (props: { activeLayout: EIssueLayoutTypes | undef
     default:
       return null;
   }
-};
+}
 
-export const ProjectViewLayoutRoot: React.FC = observer(() => {
+export const ProjectViewLayoutRoot = observer(function ProjectViewLayoutRoot() {
   // router
   const { workspaceSlug: routerWorkspaceSlug, projectId: routerProjectId, viewId: routerViewId } = useParams();
   const workspaceSlug = routerWorkspaceSlug ? routerWorkspaceSlug?.toString() : undefined;
@@ -60,7 +58,7 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
       }
     : undefined;
 
-  const { isLoading } = useSWR(
+  useSWR(
     workspaceSlug && projectId && viewId ? `PROJECT_VIEW_ISSUES_${workspaceSlug}_${projectId}_${viewId}` : null,
     async () => {
       if (workspaceSlug && projectId && viewId) {
@@ -78,16 +76,7 @@ export const ProjectViewLayoutRoot: React.FC = observer(() => {
     [issuesFilter, workspaceSlug, viewId]
   );
 
-  if (!workspaceSlug || !projectId || !viewId) return <></>;
-
-  if (isLoading && !workItemFilters) {
-    return (
-      <div className="relative flex h-screen w-full items-center justify-center">
-        <LogoSpinner />
-      </div>
-    );
-  }
-
+  if (!workspaceSlug || !projectId || !viewId || !workItemFilters) return <></>;
   return (
     <IssuesStoreContext.Provider value={EIssuesStoreType.PROJECT_VIEW}>
       <ProjectLevelWorkItemFiltersHOC
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 c91fb02eca..1fb1edff88 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
@@ -33,7 +33,7 @@ interface IBaseSpreadsheetRoot {
   isEpic?: boolean;
 }
 
-export const BaseSpreadsheetRoot = observer((props: IBaseSpreadsheetRoot) => {
+export const BaseSpreadsheetRoot = observer(function BaseSpreadsheetRoot(props: IBaseSpreadsheetRoot) {
   const { QuickActions, canEditPropertiesBasedOnProject, isCompletedCycle = false, viewId, isEpic = false } = props;
   // router
   const { projectId } = useParams();
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 c99d0b7dcd..056d047c4a 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
@@ -12,11 +12,11 @@ type Props = {
   disabled: boolean;
 };
 
-export const SpreadsheetAssigneeColumn: React.FC<Props> = observer((props: Props) => {
+export const SpreadsheetAssigneeColumn = observer(function SpreadsheetAssigneeColumn(props: Props) {
   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 +36,7 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = observer((props: Props
         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 610c7528fe..ea4cd28960 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
@@ -8,11 +8,11 @@ type Props = {
   issue: TIssue;
 };
 
-export const SpreadsheetAttachmentColumn: React.FC<Props> = observer((props) => {
+export const SpreadsheetAttachmentColumn = observer(function SpreadsheetAttachmentColumn(props: Props) {
   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 hover:bg-layer-1 group-[.selected-issue-row]:bg-accent-primary/5 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 d7713d26fa..b06e87921f 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
@@ -10,11 +10,11 @@ type Props = {
   issue: TIssue;
 };
 
-export const SpreadsheetCreatedOnColumn: React.FC<Props> = observer((props: Props) => {
+export const SpreadsheetCreatedOnColumn = observer(function SpreadsheetCreatedOnColumn(props: Props) {
   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 hover:bg-layer-1 group-[.selected-issue-row]:bg-accent-primary/5 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 5c7445bc66..d349c7031d 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
@@ -16,7 +16,7 @@ type Props = {
   disabled: boolean;
 };
 
-export const SpreadsheetCycleColumn: React.FC<Props> = observer((props) => {
+export const SpreadsheetCycleColumn = observer(function SpreadsheetCycleColumn(props: Props) {
   const { issue, disabled, onClose } = props;
   // router
   const { workspaceSlug } = useParams();
@@ -41,7 +41,7 @@ export const SpreadsheetCycleColumn: React.FC<Props> = observer((props) => {
   );
 
   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 +49,7 @@ export const SpreadsheetCycleColumn: React.FC<Props> = observer((props) => {
         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 087e349b6b..d9899dcd66 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
@@ -17,7 +17,7 @@ type Props = {
   disabled: boolean;
 };
 
-export const SpreadsheetDueDateColumn: React.FC<Props> = observer((props: Props) => {
+export const SpreadsheetDueDateColumn = observer(function SpreadsheetDueDateColumn(props: Props) {
   const { issue, onChange, disabled, onClose } = props;
   // store hooks
   const { getStateById } = useProjectState();
@@ -25,7 +25,7 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = observer((props: Props)
   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 +46,13 @@ export const SpreadsheetDueDateColumn: React.FC<Props> = observer((props: Props)
         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 text-left group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x",
           {
             "text-red-500": 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 b324f105aa..f7e733edaf 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
@@ -11,11 +11,11 @@ type Props = {
   disabled: boolean;
 };
 
-export const SpreadsheetEstimateColumn: React.FC<Props> = observer((props: Props) => {
+export const SpreadsheetEstimateColumn = observer(function SpreadsheetEstimateColumn(props: Props) {
   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 +25,7 @@ export const SpreadsheetEstimateColumn: React.FC<Props> = observer((props: Props
         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 52807a3130..c519f4bc0c 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,4 +1,3 @@
-"use client";
 //ui
 import { ArrowDownWideNarrow, ArrowUpNarrowWide, CheckIcon, ChevronDownIcon, Eraser, MoveRight } from "lucide-react";
 // constants
@@ -19,7 +18,7 @@ interface Props {
   isEpic?: boolean;
 }
 
-export const HeaderColumn = (props: Props) => {
+export function HeaderColumn(props: Props) {
   const { displayFilters, handleDisplayFilterUpdate, property, onClose, isEpic = false } = props;
   // i18n
   const { t } = useTranslation();
@@ -48,9 +47,9 @@ export const 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">
@@ -75,8 +74,8 @@ export const 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">
@@ -93,8 +92,8 @@ export const 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">
@@ -114,7 +113,7 @@ export const 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)}
           >
@@ -126,4 +125,4 @@ export const HeaderColumn = (props: Props) => {
         )}
     </CustomMenu>
   );
-};
+}
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 9f1a5c007e..e45a9ccd59 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
@@ -14,7 +14,7 @@ type Props = {
   disabled: boolean;
 };
 
-export const SpreadsheetLabelColumn: React.FC<Props> = observer((props: Props) => {
+export const SpreadsheetLabelColumn = observer(function SpreadsheetLabelColumn(props: Props) {
   const { issue, onChange, disabled, onClose } = props;
   // hooks
   const { labelMap } = useLabel();
@@ -22,14 +22,14 @@ export const SpreadsheetLabelColumn: React.FC<Props> = observer((props: Props) =
   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 border-b-[0.5px] border-subtle w-full">
       <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"
+        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 09fd881c91..86a4f78225 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
@@ -8,11 +8,11 @@ type Props = {
   issue: TIssue;
 };
 
-export const SpreadsheetLinkColumn: React.FC<Props> = observer((props: Props) => {
+export const SpreadsheetLinkColumn = observer(function SpreadsheetLinkColumn(props: Props) {
   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 py-1 text-11 hover:bg-layer-1 group-[.selected-issue-row]:bg-accent-primary/5 group-[.selected-issue-row]:hover:bg-accent-primary/10 px-page-x">
       {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 518b644f60..d8357ecb3f 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
@@ -18,7 +18,7 @@ type Props = {
   disabled: boolean;
 };
 
-export const SpreadsheetModuleColumn: React.FC<Props> = observer((props) => {
+export const SpreadsheetModuleColumn = observer(function SpreadsheetModuleColumn(props: Props) {
   const { issue, disabled, onClose } = props;
   // router
   const { workspaceSlug } = useParams();
@@ -51,7 +51,7 @@ export const SpreadsheetModuleColumn: React.FC<Props> = observer((props) => {
   );
 
   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 +59,7 @@ export const SpreadsheetModuleColumn: React.FC<Props> = observer((props) => {
         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 d2385cdd28..7a65e42052 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
@@ -12,17 +12,17 @@ type Props = {
   disabled: boolean;
 };
 
-export const SpreadsheetPriorityColumn: React.FC<Props> = observer((props: Props) => {
+export const SpreadsheetPriorityColumn = observer(function SpreadsheetPriorityColumn(props: Props) {
   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 bcdc01a1df..0f09c857e0 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
@@ -15,11 +15,11 @@ type Props = {
   disabled: boolean;
 };
 
-export const SpreadsheetStartDateColumn: React.FC<Props> = observer((props: Props) => {
+export const SpreadsheetStartDateColumn = observer(function SpreadsheetStartDateColumn(props: Props) {
   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 +38,7 @@ export const SpreadsheetStartDateColumn: React.FC<Props> = observer((props: Prop
         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 9a772eb078..81ebe6dc86 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
@@ -12,18 +12,18 @@ type Props = {
   disabled: boolean;
 };
 
-export const SpreadsheetStateColumn: React.FC<Props> = observer((props) => {
+export const SpreadsheetStateColumn = observer(function SpreadsheetStateColumn(props: Props) {
   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 9f0f8a46d4..2ef3066cad 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
@@ -14,7 +14,7 @@ type Props = {
   issue: TIssue;
 };
 
-export const SpreadsheetSubIssueColumn: React.FC<Props> = observer((props: Props) => {
+export const SpreadsheetSubIssueColumn = observer(function SpreadsheetSubIssueColumn(props: Props) {
   const { issue } = props;
   // router
   const router = useAppRouter();
@@ -36,7 +36,7 @@ export const SpreadsheetSubIssueColumn: React.FC<Props> = observer((props: Props
     <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 hover:bg-surface-2 group-[.selected-issue-row]:bg-accent-primary/5 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 c25329e9c6..8ac0a4770b 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
@@ -10,11 +10,11 @@ type Props = {
   issue: TIssue;
 };
 
-export const SpreadsheetUpdatedOnColumn: React.FC<Props> = observer((props: Props) => {
+export const SpreadsheetUpdatedOnColumn = observer(function SpreadsheetUpdatedOnColumn(props: Props) {
   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 hover:bg-layer-1 group-[.selected-issue-row]:bg-accent-primary/5 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 851bef4c7c..bac5e953c9 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
@@ -19,7 +19,7 @@ type Props = {
   isEstimateEnabled: boolean;
 };
 
-export const IssueColumn = observer((props: Props) => {
+export const IssueColumn = observer(function IssueColumn(props: Props) {
   const { displayProperties, issueDetail, disableUserActions, property, updateIssue } = props;
   // router
   const tableCellRef = useRef<HTMLTableCellElement | null>(null);
@@ -38,7 +38,7 @@ export const IssueColumn = observer((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 text-13 after:absolute after:w-full after:bottom-[-1px] after:border after:border-subtle border-r-[1px] border-subtle"
         ref={tableCellRef}
       >
         <Column
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 c79e69a090..5626b74dde 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,5 +1,3 @@
-"use client";
-
 import type { Dispatch, MouseEvent, MutableRefObject, SetStateAction } from "react";
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
@@ -52,7 +50,7 @@ interface Props {
   isEpic?: boolean;
 }
 
-export const SpreadsheetIssueRow = observer((props: Props) => {
+export const SpreadsheetIssueRow = observer(function SpreadsheetIssueRow(props: Props) {
   const {
     displayProperties,
     issueId,
@@ -90,13 +88,13 @@ export const SpreadsheetIssueRow = observer((props: 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}
@@ -164,7 +162,7 @@ interface IssueRowDetailsProps {
   isEpic?: boolean;
 }
 
-const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
+const IssueRowDetails = observer(function IssueRowDetails(props: IssueRowDetailsProps) {
   const {
     displayProperties,
     issueId,
@@ -210,8 +208,8 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
   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 items-center h-full w-full cursor-pointer rounded-sm p-1 text-placeholder hover:bg-layer-1 ${
+        isMenuActive ? "bg-layer-1 text-primary" : "text-secondary"
       }`}
       onClick={() => setIsMenuActive(!isMenuActive)}
     >
@@ -241,11 +239,6 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
 
   const canSelectIssues = !disableUserActions && !selectionHelpers.isSelectionDisabled;
 
-  //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
-    ? (getProjectIdentifierById(issueDetail.project_id)?.length ?? 0 + 5) * 7
-    : 0;
-
   const workItemLink = generateWorkItemLink({
     workspaceSlug: workspaceSlug?.toString(),
     projectId: issueDetail?.project_id,
@@ -257,11 +250,12 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
 
   return (
     <>
+      {/* Single sticky column containing both identifier and workitem */}
       <td
         id={`issue-${issueId}`}
         ref={cellRef}
         tabIndex={0}
-        className="relative md:sticky left-0 z-10 group/list-block bg-custom-background-100 min-w-60 max-w-[30vw]"
+        className="relative md:sticky left-0 z-10 group/list-block bg-surface-1 max-w-lg"
       >
         <ControlLink
           href={workItemLink}
@@ -271,16 +265,39 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
         >
           <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 cursor-pointer h-11 w-full flex items-center text-13 after:absolute border-r-[0.5px] z-10 border-subtle-1 bg-transparent group-[.selected-issue-row]:bg-accent-primary/5 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,
               }
             )}
           >
-            <div className="flex items-center gap-0.5 min-w-min py-2">
+            {/* 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-11 hover:text-primary">
+                  {issueDetail.project_id && (
+                    <IssueIdentifier
+                      issueId={issueDetail.id}
+                      projectId={issueDetail.project_id}
+                      size="xs"
+                      variant="tertiary"
+                      displayProperties={displayProperties}
+                    />
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Workitem section */}
+            <div
+              className={cn("flex items-center gap-0.5 py-2 flex-grow", {
+                "min-w-[360px]": !displayProperties?.key,
+                "min-w-60": displayProperties?.key,
+              })}
+            >
               {/* select checkbox */}
               {projectId && canSelectIssues && (
                 <Tooltip
@@ -313,27 +330,12 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
               {/* sub issues indentation */}
               {nestingLevel !== 0 && <div style={{ width: subIssueIndentation }} />}
 
-              {(displayProperties?.key || displayProperties?.issue_type) && (
-                <div className="relative flex cursor-pointer items-center text-center text-xs hover:text-custom-text-100">
-                  <p className={`flex font-medium leading-7`} style={{ minWidth: `${keyMinWidth}px` }}>
-                    {issueDetail.project_id && (
-                      <IssueIdentifier
-                        issueId={issueDetail.id}
-                        projectId={issueDetail.project_id}
-                        textContainerClassName="text-sm md:text-xs text-custom-text-300"
-                        displayProperties={displayProperties}
-                      />
-                    )}
-                  </p>
-                </div>
-              )}
-
               {/* sub-issues chevron */}
               <div className="grid place-items-center size-4">
                 {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 place-items-center size-4 rounded-xs text-placeholder hover:text-tertiary"
                     onClick={handleToggleExpand}
                   >
                     <ChevronRightIcon
@@ -345,31 +347,31 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
                   </button>
                 )}
               </div>
-            </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="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"
-                      tabIndex={-1}
-                    >
-                      {issueDetail.name}
-                    </div>
-                  </Tooltip>
+              <div className="flex items-center gap-2 justify-between h-full w-full truncate my-auto">
+                <div className="w-full line-clamp-1 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-13 text-primary focus:outline-none"
+                        tabIndex={-1}
+                      >
+                        {issueDetail.name}
+                      </div>
+                    </Tooltip>
+                  </div>
+                </div>
+                <div
+                  className={`opacity-0 group-hover:opacity-100 transition-opacity ${isMenuActive ? "!opacity-100" : ""}`}
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  {quickActions({
+                    issue: issueDetail,
+                    parentRef: cellRef,
+                    customActionButton,
+                    portalElement: portalElement.current,
+                  })}
                 </div>
-              </div>
-              <div
-                className={`hidden group-hover:block ${isMenuActive ? "!block" : ""}`}
-                onClick={(e) => e.stopPropagation()}
-              >
-                {quickActions({
-                  issue: issueDetail,
-                  parentRef: cellRef,
-                  customActionButton,
-                  portalElement: portalElement.current,
-                })}
               </div>
             </div>
           </Row>
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 b8c3c4f28a..d5e2c37440 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
@@ -9,7 +9,7 @@ import { useUserPermissions } from "@/hooks/store/user";
 import { CycleIssueQuickActions } from "../../quick-action-dropdowns";
 import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
 
-export const CycleSpreadsheetLayout: React.FC = observer(() => {
+export const CycleSpreadsheetLayout = observer(function CycleSpreadsheetLayout() {
   // router
   const { cycleId } = useParams();
   // store hooks
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 8c37ea8eb2..7c95fd3a89 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
@@ -6,7 +6,7 @@ import { useParams } from "next/navigation";
 import { ModuleIssueQuickActions } from "../../quick-action-dropdowns";
 import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
 
-export const ModuleSpreadsheetLayout: React.FC = observer(() => {
+export const ModuleSpreadsheetLayout = observer(function ModuleSpreadsheetLayout() {
   const { moduleId } = useParams();
 
   return <BaseSpreadsheetRoot QuickActions={ModuleIssueQuickActions} viewId={moduleId?.toString()} />;
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 b949cc5425..1b3f17ff90 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
@@ -9,7 +9,7 @@ import { useUserPermissions } from "@/hooks/store/user";
 import { ProjectIssueQuickActions } from "../../quick-action-dropdowns";
 import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
 
-export const ProjectSpreadsheetLayout: React.FC = observer(() => {
+export const ProjectSpreadsheetLayout = observer(function ProjectSpreadsheetLayout() {
   // router
   const { workspaceSlug } = useParams();
   // hooks
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 78cf20bfb2..ec798f5f1a 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
@@ -8,7 +8,7 @@ import { BaseSpreadsheetRoot } from "../base-spreadsheet-root";
 // types
 // constants
 
-export const ProjectViewSpreadsheetLayout: React.FC = observer(() => {
+export const ProjectViewSpreadsheetLayout = observer(function ProjectViewSpreadsheetLayout() {
   const { viewId } = useParams();
 
   return <BaseSpreadsheetRoot QuickActions={ProjectIssueQuickActions} viewId={viewId.toString()} />;
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 8f9311713e..73bac55087 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
@@ -31,7 +31,7 @@ type Props = {
   issuesLoading: boolean;
 };
 
-export const WorkspaceSpreadsheetRoot: React.FC<Props> = observer((props: Props) => {
+export const WorkspaceSpreadsheetRoot = observer(function WorkspaceSpreadsheetRoot(props: Props) {
   const { isLoading = false, workspaceSlug, globalViewId, fetchNextPages, issuesLoading } = props;
 
   // Custom hooks
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 94bdbdf420..1d7c04a0ef 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
@@ -15,7 +15,7 @@ interface Props {
   handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
   isEpic?: boolean;
 }
-export const SpreadsheetHeaderColumn = observer((props: Props) => {
+export const SpreadsheetHeaderColumn = observer(function SpreadsheetHeaderColumn(props: Props) {
   const { displayProperties, displayFilters, property, handleDisplayFilterUpdate, isEpic = false } = props;
 
   //hooks
@@ -30,7 +30,7 @@ export const SpreadsheetHeaderColumn = observer((props: Props) => {
       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 bg-layer-1 text-13 font-medium py-1 border border-b-0 border-t-0 border-subtle"
         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 9c3e7242fc..bd6477fe47 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
@@ -5,7 +5,6 @@ import { SPREADSHEET_SELECT_GROUP } from "@plane/constants";
 // ui
 import type { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 // components
-import { Row } from "@plane/ui";
 import { cn } from "@plane/utils";
 import { MultipleSelectGroupAction } from "@/components/core/multiple-select";
 // hooks
@@ -23,7 +22,7 @@ interface Props {
   isEpic?: boolean;
 }
 
-export const SpreadsheetHeader = observer((props: Props) => {
+export const SpreadsheetHeader = observer(function SpreadsheetHeader(props: Props) {
   const {
     displayProperties,
     displayFilters,
@@ -42,29 +41,33 @@ export const SpreadsheetHeader = observer((props: Props) => {
   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 sticky min-w-60 left-0 z-[15] h-11 flex items-center gap-1 bg-custom-background-90 text-sm font-medium before:absolute before:h-full before:right-0 before:border-custom-border-100"
+          className="group/list-header md:sticky min-w-60 left-0 z-[15] h-11 bg-layer-1 text-13 font-medium border-r-[0.5px] border-subtle"
           tabIndex={-1}
         >
-          <Row>
-            {canSelectIssues && (
-              <div className="flex-shrink-0 flex items-center w-3.5 mr-1 absolute left-1 py-[11px]">
-                <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",
-                    {
-                      "opacity-100 pointer-events-auto": !isGroupSelectionEmpty,
-                    }
-                  )}
-                  groupID={SPREADSHEET_SELECT_GROUP}
-                  selectionHelpers={selectionHelpers}
-                />
-              </div>
-            )}
-            <span className="flex h-full w-full flex-grow items-center py-2.5">{`${isEpic ? "Epics" : "Work items"}`}</span>
-          </Row>
+          <div className="flex items-center gap-2 h-full w-full px-page-x">
+            {/* Workitem header section */}
+            <div className="flex items-center gap-1 flex-grow h-full py-2.5 min-w-80">
+              {canSelectIssues && (
+                <div className="flex-shrink-0 flex items-center w-3.5 mr-1">
+                  <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",
+                      {
+                        "opacity-100 pointer-events-auto": !isGroupSelectionEmpty,
+                      }
+                    )}
+                    groupID={SPREADSHEET_SELECT_GROUP}
+                    selectionHelpers={selectionHelpers}
+                  />
+                </div>
+              )}
+              <span className="text-13 font-medium">{`${isEpic ? "Epics" : "Work items"}`}</span>
+            </div>
+          </div>
         </th>
 
         {spreadsheetColumnsList.map((property) => (
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 dfd3c1347e..689a23b62e 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
@@ -34,7 +34,7 @@ type Props = {
   isEpic?: boolean;
 };
 
-export const SpreadsheetTable = observer((props: Props) => {
+export const SpreadsheetTable = observer(function SpreadsheetTable(props: Props) {
   const {
     displayProperties,
     displayFilters,
@@ -105,7 +105,7 @@ export const SpreadsheetTable = observer((props: Props) => {
   const displayPropertiesCount = getDisplayPropertiesCount(displayProperties, ignoreFieldsForCounting);
 
   return (
-    <table className="overflow-y-auto bg-custom-background-100 w-full" onKeyDown={handleKeyBoardNavigation}>
+    <table className="overflow-y-auto bg-surface-1 w-full" onKeyDown={handleKeyBoardNavigation}>
       <SpreadsheetHeader
         displayProperties={displayProperties}
         displayFilters={displayFilters}
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 3b36969800..c6c6792ef3 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
@@ -6,7 +6,6 @@ import { SPREADSHEET_SELECT_GROUP, SPREADSHEET_PROPERTY_LIST } from "@plane/cons
 import type { TIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "@plane/types";
 import { EIssueLayoutTypes } from "@plane/types";
 // components
-import { LogoSpinner } from "@/components/common/logo-spinner";
 import { MultipleSelectGroup } from "@/components/core/multiple-select";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
@@ -37,7 +36,7 @@ type Props = {
   isEpic?: boolean;
 };
 
-export const SpreadsheetView: React.FC<Props> = observer((props) => {
+export const SpreadsheetView = observer(function SpreadsheetView(props: Props) {
   const {
     displayProperties,
     displayFilters,
@@ -72,15 +71,9 @@ export const SpreadsheetView: React.FC<Props> = observer((props) => {
         return true;
       });
 
-  if (!issueIds || issueIds.length === 0)
-    return (
-      <div className="grid h-full w-full place-items-center">
-        <LogoSpinner />
-      </div>
-    );
-
+  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 whitespace-nowrap bg-layer-1 text-secondary">
       <div ref={portalRef} className="spreadsheet-menu-portal" />
       <MultipleSelectGroup
         containerRef={containerRef}
@@ -110,8 +103,8 @@ export const SpreadsheetView: React.FC<Props> = observer((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="z-5 sticky bottom-0 left-0">
                 {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 a7bb471e49..d3cca81dd7 100644
--- a/apps/web/core/components/issues/issue-layouts/utils.tsx
+++ b/apps/web/core/components/issues/issue-layouts/utils.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { CSSProperties, FC } from "react";
 import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import { clone, isNil, pull, uniq, concat } from "lodash-es";
@@ -162,7 +160,7 @@ const getCycleColumns = (): IGroupByColumn[] | undefined => {
     cycles.push({
       id: cycle.id,
       name: cycle.name,
-      icon: <CycleGroupIcon cycleGroup={cycleStatus as TCycleGroups} className="h-3.5 w-3.5" />,
+      icon: <CycleGroupIcon cycleGroup={cycleStatus} className="h-3.5 w-3.5" />,
       payload: { cycle_id: cycle.id },
       isDropDisabled,
       dropErrorMessage: isDropDisabled ? "Work item cannot be moved to completed cycles" : undefined,
@@ -488,11 +486,8 @@ const handleSortOrder = (
   return currentIssueState;
 };
 
-export const getIssueBlockId = (
-  issueId: string | undefined,
-  groupId: string | undefined,
-  subGroupId?: string | undefined
-) => `issue_${issueId}_${groupId}_${subGroupId}`;
+export const getIssueBlockId = (issueId: string | undefined, groupId: string | undefined, subGroupId?: string) =>
+  `issue_${issueId}_${groupId}_${subGroupId}`;
 
 /**
  * returns empty Array if groupId is None
@@ -713,12 +708,12 @@ export const getBlockViewDetails = (
  * This method returns the icon for Spreadsheet column headers
  * @param iconKey
  */
-export const SpreadSheetPropertyIcon: FC<ISvgIcons & { iconKey: string }> = (props) => {
+export function SpreadSheetPropertyIcon(props: ISvgIcons & { iconKey: string }) {
   const { iconKey } = props;
   const Icon = SpreadSheetPropertyIconMap[iconKey];
   if (!Icon) return null;
   return <Icon {...props} />;
-};
+}
 
 /**
  * This method returns if the filters are applied
@@ -753,3 +748,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 3819481233..22d5cda2ae 100644
--- a/apps/web/core/components/issues/issue-modal/base.tsx
+++ b/apps/web/core/components/issues/issue-modal/base.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useEffect, useRef, useState } from "react";
 import { xor } from "lodash-es";
 import { observer } from "mobx-react";
@@ -31,7 +29,7 @@ import { IssueFormRoot } from "./form";
 import type { IssueFormProps } from "./form";
 import type { IssuesModalProps } from "./modal";
 
-export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((props) => {
+export const CreateUpdateIssueModalBase = observer(function CreateUpdateIssueModalBase(props: IssuesModalProps) {
   const {
     data,
     isOpen,
@@ -46,6 +44,7 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
     modalTitle,
     primaryButtonText,
     isProjectSelectionDisabled = false,
+    showActionItemsOnUpdate = false,
   } = props;
   const issueStoreType = useIssueStoreType();
 
@@ -320,6 +319,14 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
         type: TOAST_TYPE.SUCCESS,
         title: t("success"),
         message: t("issue_updated_successfully"),
+        actionItems:
+          showActionItemsOnUpdate && payload.project_id ? (
+            <CreateIssueToastActionItems
+              workspaceSlug={workspaceSlug.toString()}
+              projectId={payload.project_id}
+              issueId={data.id}
+            />
+          ) : undefined,
       });
       captureSuccess({
         eventName: WORK_ITEM_TRACKER_EVENTS.update,
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 e9def41c6f..76bfb7d2f3 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,6 +1,4 @@
-"use client";
-
-import React, { useState } from "react";
+import { useState } from "react";
 import { observer } from "mobx-react";
 import type { Control } from "react-hook-form";
 import { Controller } from "react-hook-form";
@@ -45,7 +43,7 @@ type TIssueDefaultPropertiesProps = {
   setSelectedParentIssue: (issue: ISearchIssueResponse) => void;
 };
 
-export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = observer((props) => {
+export const IssueDefaultProperties = observer(function IssueDefaultProperties(props: TIssueDefaultPropertiesProps) {
   const {
     control,
     id,
@@ -267,7 +265,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
             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 cursor-pointer items-center justify-between gap-1 h-full rounded-sm border-[0.5px] border-strong px-2 py-0.5 text-caption-sm-regular hover:bg-layer-1"
               >
                 {selectedParentIssue?.project_id && (
                   <IssueIdentifier
@@ -275,7 +273,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
                     issueTypeId={selectedParentIssue.type_id}
                     projectIdentifier={selectedParentIssue?.project__identifier}
                     issueSequenceId={selectedParentIssue.sequence_id}
-                    textContainerClassName="text-xs"
+                    size="xs"
                   />
                 )}
               </button>
@@ -309,7 +307,7 @@ export const IssueDefaultProperties: React.FC<TIssueDefaultPropertiesProps> = ob
         ) : (
           <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 cursor-pointer items-center justify-between gap-1 h-full 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 40b6fac4d1..5373378e8e 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,5 +1,3 @@
-"use client";
-
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import type { Control } from "react-hook-form";
@@ -50,7 +48,7 @@ type TIssueDescriptionEditorProps = {
   onClose: () => void;
 };
 
-export const IssueDescriptionEditor: React.FC<TIssueDescriptionEditorProps> = observer((props) => {
+export const IssueDescriptionEditor = observer(function IssueDescriptionEditor(props: TIssueDescriptionEditorProps) {
   const {
     control,
     isDraft,
@@ -77,7 +75,7 @@ export const IssueDescriptionEditor: React.FC<TIssueDescriptionEditorProps> = ob
   const { getWorkspaceBySlug } = useWorkspace();
   const workspaceId = getWorkspaceBySlug(workspaceSlug?.toString())?.id ?? "";
   const { config } = useInstance();
-  const { uploadEditorAsset } = useEditorAsset();
+  const { uploadEditorAsset, duplicateEditorAsset } = useEditorAsset();
   // platform
   const { isMobile } = usePlatformOS();
 
@@ -150,9 +148,9 @@ export const IssueDescriptionEditor: React.FC<TIssueDescriptionEditorProps> = ob
   };
 
   return (
-    <div className="border-[0.5px] border-custom-border-200 rounded-lg relative">
+    <div className="border-[0.5px] border-subtle-1 bg-layer-2 rounded-lg relative">
       {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="min-h-[120px] max-h-64 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" />
@@ -182,7 +180,7 @@ export const IssueDescriptionEditor: React.FC<TIssueDescriptionEditorProps> = ob
                 id="issue-modal-editor"
                 initialValue={value ?? ""}
                 value={descriptionHtmlData}
-                workspaceSlug={workspaceSlug?.toString() as string}
+                workspaceSlug={workspaceSlug?.toString()}
                 workspaceId={workspaceId}
                 projectId={projectId}
                 onChange={(_description: object, description_html: string) => {
@@ -221,6 +219,21 @@ export const IssueDescriptionEditor: React.FC<TIssueDescriptionEditorProps> = ob
                     throw new Error("Asset upload failed. Please try again later.");
                   }
                 }}
+                duplicateFile={async (assetId: string) => {
+                  try {
+                    const { asset_id } = await duplicateEditorAsset({
+                      assetId,
+                      entityId: issueId,
+                      entityType: isDraft ? EFileAssetType.DRAFT_ISSUE_DESCRIPTION : EFileAssetType.ISSUE_DESCRIPTION,
+                      projectId,
+                      workspaceSlug,
+                    });
+                    onAssetUpload(asset_id);
+                    return asset_id;
+                  } catch {
+                    throw new Error("Asset duplication failed. Please try again later.");
+                  }
+                }}
               />
             )}
           />
@@ -228,7 +241,7 @@ export const IssueDescriptionEditor: React.FC<TIssueDescriptionEditorProps> = ob
             {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 hover:bg-layer-1 px-1.5 py-1 text-caption-sm-regular ${
                   iAmFeelingLucky ? "cursor-wait" : ""
                 }`}
                 onClick={handleAutoGenerateDescription}
@@ -259,7 +272,7 @@ export const IssueDescriptionEditor: React.FC<TIssueDescriptionEditorProps> = ob
                 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 px-1.5 py-1 text-caption-sm-regular bg-surface-2 hover:bg-layer-1"
                     onClick={() => setGptAssistantModal((prevData) => !prevData)}
                     tabIndex={-1}
                   >
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 499972e485..d6f774e279 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,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 import type { Control } from "react-hook-form";
@@ -23,7 +21,7 @@ type TIssueParentTagProps = {
   setSelectedParentIssue: (issue: ISearchIssueResponse | null) => void;
 };
 
-export const IssueParentTag: React.FC<TIssueParentTagProps> = observer((props) => {
+export const IssueParentTag = observer(function IssueParentTag(props: TIssueParentTagProps) {
   const { control, selectedParentIssue, handleFormChange, setSelectedParentIssue } = props;
   // store hooks
   const { isMobile } = usePlatformOS();
@@ -35,7 +33,7 @@ export const IssueParentTag: React.FC<TIssueParentTagProps> = observer((props) =
       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 whitespace-nowrap rounded-sm bg-surface-2 p-2 text-caption-sm-regular">
           <div className="flex items-center gap-2">
             <span
               className="block h-1.5 w-1.5 rounded-full"
@@ -43,14 +41,14 @@ export const IssueParentTag: React.FC<TIssueParentTagProps> = observer((props) =
                 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 13849b93e1..b996bbbe21 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,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 import type { Control } from "react-hook-form";
@@ -21,7 +19,7 @@ type TIssueProjectSelectProps = {
   handleFormChange: () => void;
 };
 
-export const IssueProjectSelect: React.FC<TIssueProjectSelectProps> = observer((props) => {
+export const IssueProjectSelect = observer(function IssueProjectSelect(props: TIssueProjectSelectProps) {
   const { control, disabled = false, handleFormChange } = props;
   // store hooks
   const { isMobile } = usePlatformOS();
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 b60df5947a..77a6bed1bc 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,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 import type { Control, FormState } from "react-hook-form";
@@ -23,7 +21,7 @@ type TIssueTitleInputProps = {
   handleFormChange: () => void;
 };
 
-export const IssueTitleInput: React.FC<TIssueTitleInputProps> = observer((props) => {
+export const IssueTitleInput = observer(function IssueTitleInput(props: TIssueTitleInputProps) {
   const {
     control,
     issueTitleRef,
@@ -68,13 +66,13 @@ export const IssueTitleInput: React.FC<TIssueTitleInputProps> = observer((props)
             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-red-500">{errors?.name?.message}</span>
     </div>
   );
 });
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 3a232b563d..074482bb22 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,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import { isEmpty } from "lodash-es";
 import { observer } from "mobx-react";
@@ -27,7 +25,7 @@ export interface DraftIssueProps extends IssueFormProps {
   onChange: (formData: Partial<TIssue> | null) => void;
 }
 
-export const DraftIssueLayout: React.FC<DraftIssueProps> = observer((props) => {
+export const DraftIssueLayout = observer(function DraftIssueLayout(props: DraftIssueProps) {
   const { changesMade, data, onChange, onClose, projectId } = props;
   // states
   const [issueDiscardModal, setIssueDiscardModal] = useState(false);
diff --git a/apps/web/core/components/issues/issue-modal/form.tsx b/apps/web/core/components/issues/issue-modal/form.tsx
index 2d8e81f24f..1648d9d990 100644
--- a/apps/web/core/components/issues/issue-modal/form.tsx
+++ b/apps/web/core/components/issues/issue-modal/form.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import React, { useState, useRef, useEffect } from "react";
 import { observer } from "mobx-react";
@@ -73,7 +71,7 @@ export interface IssueFormProps {
   dataResetProperties?: any[];
 }
 
-export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
+export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormProps) {
   const { t } = useTranslation();
   const {
     data,
@@ -381,8 +379,8 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
             onSubmit={handleSubmit((data) => handleFormSubmit(data))}
             className="flex flex-col w-full"
           >
-            <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="p-5 rounded-t-lg bg-surface-1">
+              <h3 className="text-h4-medium text-secondary pb-2">{modalTitle}</h3>
               <div className="flex items-center justify-between pt-2 pb-4">
                 <div className="flex items-center gap-x-1">
                   <IssueProjectSelect
@@ -450,7 +448,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
             </div>
             <div
               className={cn(
-                "pb-4 space-y-3 bg-custom-background-100",
+                "pb-4 space-y-3 bg-surface-1",
                 activeAdditionalPropertiesLength > 4 &&
                   "max-h-[45vh] overflow-hidden overflow-y-auto vertical-scrollbar scrollbar-sm"
               )}
@@ -486,8 +484,8 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
             </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"
+                "px-4 py-3 border-t-[0.5px] border-subtle rounded-b-lg bg-surface-1",
+                activeAdditionalPropertiesLength > 0 && "shadow-raised-100"
               )}
             >
               <div className="pb-3">
@@ -507,7 +505,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
               </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 pb-3 pt-6 border-t-[0.5px] border-subtle"
                   tabIndex={getIndex("create_more")}
                 >
                   {!data?.id && (
@@ -520,14 +518,14 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                       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();
@@ -545,9 +543,9 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                     </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}
@@ -560,10 +558,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
                       <Button
                         variant="primary"
                         type="button"
-                        size="sm"
                         loading={isMoving}
                         onClick={handleMoveToProjects}
                         disabled={isMoving}
+                        size="lg"
                       >
                         {t("add_to_project")}
                       </Button>
diff --git a/apps/web/core/components/issues/issue-modal/modal.tsx b/apps/web/core/components/issues/issue-modal/modal.tsx
index 9366d8d099..8c504da06d 100644
--- a/apps/web/core/components/issues/issue-modal/modal.tsx
+++ b/apps/web/core/components/issues/issue-modal/modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -28,9 +26,10 @@ export interface IssuesModalProps {
   isProjectSelectionDisabled?: boolean;
   templateId?: string;
   allowedProjectIds?: string[];
+  showActionItemsOnUpdate?: boolean;
 }
 
-export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer((props) => {
+export const CreateUpdateIssueModal = observer(function CreateUpdateIssueModal(props: IssuesModalProps) {
   // router params
   const { cycleId, moduleId } = useParams();
   // derived values
diff --git a/apps/web/core/components/issues/issue-update-status.tsx b/apps/web/core/components/issues/issue-update-status.tsx
index 66bdbe8cb0..8cdce83ceb 100644
--- a/apps/web/core/components/issues/issue-update-status.tsx
+++ b/apps/web/core/components/issues/issue-update-status.tsx
@@ -8,7 +8,7 @@ type Props = {
   isSubmitting: TNameDescriptionLoader;
 };
 
-export const NameDescriptionUpdateStatus: React.FC<Props> = observer((props) => {
+export const NameDescriptionUpdateStatus = observer(function NameDescriptionUpdateStatus(props: Props) {
   const { isSubmitting } = props;
 
   return (
@@ -19,9 +19,9 @@ export const NameDescriptionUpdateStatus: React.FC<Props> = observer((props) =>
         }`}
       >
         {isSubmitting !== "submitted" && isSubmitting !== "saved" && (
-          <RefreshCw className="animate-spin size-3.5 stroke-custom-text-300" />
+          <RefreshCw className="animate-spin size-3.5 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 c88c9a0b40..70ae462bb3 100644
--- a/apps/web/core/components/issues/label.tsx
+++ b/apps/web/core/components/issues/label.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 // components
 import { Tooltip } from "@plane/propel/tooltip";
@@ -9,7 +7,7 @@ type Props = {
   maxRender?: number;
 };
 
-export const ViewIssueLabel: React.FC<Props> = ({ labelDetails, maxRender = 1 }) => {
+export function ViewIssueLabel({ labelDetails, maxRender = 1 }: Props) {
   const { isMobile } = usePlatformOS();
   return (
     <>
@@ -19,10 +17,10 @@ export const ViewIssueLabel: React.FC<Props> = ({ labelDetails, maxRender = 1 })
             {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="flex flex-shrink-0 cursor-default items-center rounded-md border border-strong px-2.5 py-1 text-11 shadow-sm"
               >
                 <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={{
@@ -36,15 +34,15 @@ export const ViewIssueLabel: React.FC<Props> = ({ labelDetails, maxRender = 1 })
             ))}
           </>
         ) : (
-          <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="flex flex-shrink-0 cursor-default items-center rounded-md border border-strong px-2.5 py-1 text-11 shadow-sm">
             <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>
@@ -55,4 +53,4 @@ export const ViewIssueLabel: React.FC<Props> = ({ labelDetails, maxRender = 1 })
       )}
     </>
   );
-};
+}
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 0000000000..3d3a5d1d5d
--- /dev/null
+++ b/apps/web/core/components/issues/layout-quick-actions.tsx
@@ -0,0 +1,73 @@
+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, MoreHorizontal } 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-shrink-0 flex items-center justify-center size-[26px] 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 988c72d100..5ed488e3b1 100644
--- a/apps/web/core/components/issues/parent-issues-list-modal.tsx
+++ b/apps/web/core/components/issues/parent-issues-list-modal.tsx
@@ -1,17 +1,15 @@
-"use client";
-
 import React, { useEffect, useState } from "react";
 import { useParams } from "next/navigation";
 // icons
 import { Rocket, Search } from "lucide-react";
 // headless ui
-import { Combobox, Dialog, Transition } from "@headlessui/react";
+import { Combobox } from "@headlessui/react";
 // i18n
 import { useTranslation } from "@plane/i18n";
 // 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";
@@ -37,7 +35,7 @@ type Props = {
 // services
 const projectService = new ProjectService();
 
-export const ParentIssuesListModal: React.FC<Props> = ({
+export function ParentIssuesListModal({
   isOpen,
   handleClose: onClose,
   value,
@@ -45,7 +43,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
   projectId,
   issueId,
   searchEpic = false,
-}) => {
+}: Props) {
   // i18n
   const { t } = useTranslation();
 
@@ -72,7 +70,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
     setIsLoading(true);
 
     projectService
-      .projectIssuesSearch(workspaceSlug as string, projectId as string, {
+      .projectIssuesSearch(workspaceSlug, projectId, {
         search: debouncedSearchTerm,
         parent: searchEpic ? undefined : true,
         issue_id: issueId,
@@ -87,143 +85,111 @@ export const ParentIssuesListModal: React.FC<Props> = ({
   }, [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">
+          <Search
+            className="pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-primary text-opacity-40"
+            aria-hidden="true"
+          />
+          <Combobox.Input
+            className="h-12 w-full border-0 bg-transparent pl-11 pr-4 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="max-h-80 scroll-py-2 overflow-y-auto vertical-scrollbar scrollbar-md">
+          {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 flex w-full cursor-pointer select-none items-center justify-between gap-2 rounded-md px-3 py-2 my-0.5 text-secondary ${
+                          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="z-1 relative hidden flex-shrink-0 text-secondary hover:text-primary group-hover:block"
+                        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 59f901a864..7b65cc6c4f 100644
--- a/apps/web/core/components/issues/peek-overview/error.tsx
+++ b/apps/web/core/components/issues/peek-overview/error.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { MoveRight } from "lucide-react";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -14,7 +12,7 @@ type TIssuePeekOverviewError = {
   removeRoutePeekId: () => void;
 };
 
-export const IssuePeekOverviewError: FC<TIssuePeekOverviewError> = (props) => {
+export function IssuePeekOverviewError(props: TIssuePeekOverviewError) {
   const { removeRoutePeekId } = props;
   // hooks
   const { isMobile } = usePlatformOS();
@@ -24,7 +22,7 @@ export const IssuePeekOverviewError: FC<TIssuePeekOverviewError> = (props) => {
       <div className="flex-shrink-0 flex 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" />
+            <MoveRight className="h-4 w-4 text-tertiary hover:text-secondary" />
           </button>
         </Tooltip>
       </div>
@@ -38,4 +36,4 @@ export const IssuePeekOverviewError: FC<TIssuePeekOverviewError> = (props) => {
       </div>
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/issues/peek-overview/header.tsx b/apps/web/core/components/issues/peek-overview/header.tsx
index 101605a73d..623c63c036 100644
--- a/apps/web/core/components/issues/peek-overview/header.tsx
+++ b/apps/web/core/components/issues/peek-overview/header.tsx
@@ -1,14 +1,12 @@
-"use client";
-
 import type { FC } from "react";
 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";
@@ -27,6 +25,7 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
 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";
 
@@ -66,7 +65,7 @@ export type PeekOverviewHeaderProps = {
   isSubmitting: TNameDescriptionLoader;
 };
 
-export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((props) => {
+export const IssuePeekOverviewHeader = observer(function IssuePeekOverviewHeader(props: PeekOverviewHeaderProps) {
   const {
     peekMode,
     setPeekMode,
@@ -175,19 +174,19 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
   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 && (
@@ -198,7 +197,7 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
               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>
               }
@@ -207,9 +206,7 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
                 <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" />
@@ -223,14 +220,12 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
       </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/issue-detail.tsx b/apps/web/core/components/issues/peek-overview/issue-detail.tsx
index fcda11d1dd..3efdbf6418 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,3 @@
-"use-client";
 import type { FC } from "react";
 import { useEffect } from "react";
 import { observer } from "mobx-react";
@@ -44,7 +43,7 @@ type Props = {
   setIsSubmitting: (value: TNameDescriptionLoader) => void;
 };
 
-export const PeekOverviewIssueDetails: FC<Props> = observer((props) => {
+export const PeekOverviewIssueDetails = observer(function PeekOverviewIssueDetails(props: Props) {
   const { editorRef, workspaceSlug, issueId, issueOperations, disabled, isArchived, isSubmitting, setIsSubmitting } =
     props;
   // store hooks
@@ -135,10 +134,11 @@ export const PeekOverviewIssueDetails: FC<Props> = observer((props) => {
         entityId={issue.id}
         fileAssetType={EFileAssetType.ISSUE_DESCRIPTION}
         initialValue={issueDescription}
-        onSubmit={async (value) => {
+        onSubmit={async (value, isMigrationUpdate) => {
           if (!issue.id || !issue.project_id) return;
           await issueOperations.update(workspaceSlug, issue.project_id, issue.id, {
             description_html: value,
+            ...(isMigrationUpdate ? { skip_activity: "true" } : {}),
           });
         }}
         setIsSubmitting={(value) => setIsSubmitting(value)}
diff --git a/apps/web/core/components/issues/peek-overview/loader.tsx b/apps/web/core/components/issues/peek-overview/loader.tsx
index e16479e394..e3ca80bab9 100644
--- a/apps/web/core/components/issues/peek-overview/loader.tsx
+++ b/apps/web/core/components/issues/peek-overview/loader.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { MoveRight } from "lucide-react";
 import { Tooltip } from "@plane/propel/tooltip";
@@ -11,7 +9,7 @@ type TIssuePeekOverviewLoader = {
   removeRoutePeekId: () => void;
 };
 
-export const IssuePeekOverviewLoader: FC<TIssuePeekOverviewLoader> = (props) => {
+export function IssuePeekOverviewLoader(props: TIssuePeekOverviewLoader) {
   const { removeRoutePeekId } = props;
   // hooks
   const { isMobile } = usePlatformOS();
@@ -22,7 +20,7 @@ export const IssuePeekOverviewLoader: FC<TIssuePeekOverviewLoader> = (props) =>
         <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" />
@@ -104,4 +102,4 @@ export const IssuePeekOverviewLoader: FC<TIssuePeekOverviewLoader> = (props) =>
       </div>
     </Loader>
   );
-};
+}
diff --git a/apps/web/core/components/issues/peek-overview/properties.tsx b/apps/web/core/components/issues/peek-overview/properties.tsx
index 68728e9a3c..da3f77518f 100644
--- a/apps/web/core/components/issues/peek-overview/properties.tsx
+++ b/apps/web/core/components/issues/peek-overview/properties.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // i18n
 import { useTranslation } from "@plane/i18n";
@@ -26,6 +23,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";
@@ -34,8 +32,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";
@@ -50,7 +48,7 @@ interface IPeekOverviewProperties {
   issueOperations: TIssueOperations;
 }
 
-export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((props) => {
+export const PeekOverviewProperties = observer(function PeekOverviewProperties(props: IPeekOverviewProperties) {
   const { workspaceSlug, projectId, issueId, issueOperations, disabled } = props;
   const { t } = useTranslation();
   // store hooks
@@ -76,35 +74,24 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
 
   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={`w-full space-y-3 mt-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="w-full grow group"
+            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 })}
@@ -113,57 +100,44 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             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="w-full grow group"
+            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="w-full h-7.5 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 text-secondary leading-5">
+              {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) =>
@@ -175,23 +149,16 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
             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="w-full grow group"
+            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 items-center gap-2 w-full">
             <DateDropdown
               value={issue.target_date}
               onChange={(val) =>
@@ -203,106 +170,82 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
               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="w-full grow group"
+              buttonContainerClassName="w-full text-left h-7.5"
+              buttonClassName={cn("text-body-xs-medium", {
+                "text-placeholder": !issue.target_date,
+                "text-danger": 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="w-full grow group"
+              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="w-full grow h-7.5"
               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="w-full h-7.5 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 a13a7ac581..ee0fe9d32a 100644
--- a/apps/web/core/components/issues/peek-overview/root.tsx
+++ b/apps/web/core/components/issues/peek-overview/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useState, useMemo, useCallback } from "react";
 import { observer } from "mobx-react";
@@ -22,7 +20,7 @@ import { useWorkItemProperties } from "@/plane-web/hooks/use-issue-properties";
 import type { TIssueOperations } from "../issue-detail";
 import { IssueView } from "./view";
 
-export const IssuePeekOverview: FC<IWorkItemPeekOverview> = observer((props) => {
+export const IssuePeekOverview = observer(function IssuePeekOverview(props: IWorkItemPeekOverview) {
   const {
     embedIssue = false,
     embedRemoveCurrentNotification,
@@ -83,6 +81,7 @@ export const IssuePeekOverview: FC<IWorkItemPeekOverview> = observer((props) =>
                 eventName: WORK_ITEM_TRACKER_EVENTS.update,
                 payload: { id: issueId },
               });
+              return;
             })
             .catch((error) => {
               captureError({
@@ -106,6 +105,7 @@ export const IssuePeekOverview: FC<IWorkItemPeekOverview> = observer((props) =>
               payload: { id: issueId },
             });
             removeRoutePeekId();
+            return;
           });
         } catch (error) {
           setToast({
diff --git a/apps/web/core/components/issues/peek-overview/view.tsx b/apps/web/core/components/issues/peek-overview/view.tsx
index d9febc7a14..b5d091e35a 100644
--- a/apps/web/core/components/issues/peek-overview/view.tsx
+++ b/apps/web/core/components/issues/peek-overview/view.tsx
@@ -35,7 +35,7 @@ interface IIssueView {
   issueOperations: TIssueOperations;
 }
 
-export const IssueView: FC<IIssueView> = observer((props) => {
+export const IssueView = observer(function IssueView(props: IIssueView) {
   const {
     workspaceSlug,
     projectId,
@@ -114,7 +114,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
 
   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"
+      ? "absolute z-[25] flex flex-col overflow-hidden rounded-sm border border-subtle bg-surface-1 transition-all duration-300"
       : `w-full h-full`,
     !embedIssue && {
       "top-0 bottom-0 right-0 w-full md:w-[50%] border-0 border-l": peekMode === "side-peek",
@@ -128,7 +128,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
   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}
@@ -241,7 +241,7 @@ export const IssueView: FC<IIssueView> = observer((props) => {
                       </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={`h-full !w-[400px] flex-shrink-0 border-l border-subtle p-4 py-5 overflow-hidden vertical-scrollbar scrollbar-sm ${
                         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 38f08b500e..4c0a9c4079 100644
--- a/apps/web/core/components/issues/preview-card/date.tsx
+++ b/apps/web/core/components/issues/preview-card/date.tsx
@@ -10,7 +10,7 @@ type Props = {
   targetDate: string | null;
 };
 
-export const WorkItemPreviewCardDate: React.FC<Props> = (props) => {
+export function WorkItemPreviewCardDate(props: Props) {
   const { startDate, stateGroup, targetDate } = props;
   // derived values
   const isDateRangeEnabled = Boolean(startDate && targetDate);
@@ -19,7 +19,7 @@ export const WorkItemPreviewCardDate: React.FC<Props> = (props) => {
   if (!startDate && !targetDate) return null;
 
   return (
-    <div className="text-xs h-full rounded px-1 text-custom-text-200">
+    <div className="text-11 h-full rounded-sm px-1 text-secondary">
       {isDateRangeEnabled ? (
         <div
           className={cn("h-full flex items-center gap-1", {
@@ -48,4 +48,4 @@ export const WorkItemPreviewCardDate: React.FC<Props> = (props) => {
       )}
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/issues/preview-card/root.tsx b/apps/web/core/components/issues/preview-card/root.tsx
index 90432e7ccc..c506abb4f2 100644
--- a/apps/web/core/components/issues/preview-card/root.tsx
+++ b/apps/web/core/components/issues/preview-card/root.tsx
@@ -20,7 +20,7 @@ type Props = {
   workItem: Pick<TIssue, "id" | "name" | "sequence_id" | "priority" | "start_date" | "target_date" | "type_id">;
 };
 
-export const WorkItemPreviewCard: React.FC<Props> = observer((props) => {
+export const WorkItemPreviewCard = observer(function WorkItemPreviewCard(props: Props) {
   const { projectId, stateDetails, workItem } = props;
   // store hooks
   const { getProjectIdentifierById } = useProject();
@@ -32,23 +32,23 @@ export const WorkItemPreviewCard: React.FC<Props> = observer((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="p-3 space-y-2 w-72 rounded-lg shadow-raised-200 bg-surface-1 border-[0.5px] border-strong">
+      <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>
+          <p className="text-11 font-medium">{stateName}</p>
         </div>
       </div>
       <div>
-        <h6 className="text-sm">{workItem.name}</h6>
+        <h6 className="text-13">{workItem.name}</h6>
       </div>
       <div className="flex items-center gap-1 h-5">
         <PriorityIcon priority={workItem.priority} withContainer />
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 853cd754ca..64c7f979b3 100644
--- a/apps/web/core/components/issues/relations/issue-list-item.tsx
+++ b/apps/web/core/components/issues/relations/issue-list-item.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
@@ -40,7 +38,7 @@ type Props = {
   issueServiceType?: TIssueServiceType;
 };
 
-export const RelationIssueListItem: FC<Props> = observer((props) => {
+export const RelationIssueListItem = observer(function RelationIssueListItem(props: Props) {
   const {
     workspaceSlug,
     issueId,
@@ -65,7 +63,7 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
   // derived values
   const issue = getIssueById(relationIssueId);
   const { handleRedirection } = useIssuePeekOverviewRedirection(!!issue?.is_epic);
-  const issueOperations = useRelationOperations(!!issue?.is_epic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES);
+  const issueOperations = useRelationOperations(issue?.is_epic ? EIssueServiceType.EPICS : EIssueServiceType.ISSUES);
   const projectDetail = (issue && issue.project_id && project.getProjectById(issue.project_id)) || undefined;
   const projectId = issue?.project_id;
 
@@ -126,9 +124,9 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
         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 min-h-11 h-full 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 flex-1 min-w-0 cursor-pointer items-center gap-3">
               <div className="flex-shrink-0">
                 {projectDetail && (
                   <IssueIdentifier
@@ -136,17 +134,18 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
                     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="flex-1 w-0 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();
@@ -160,7 +159,7 @@ export const RelationIssueListItem: FC<Props> = observer((props) => {
                 issueServiceType={issueServiceType}
               />
             </div>
-            <div className="flex-shrink-0 text-sm">
+            <div className="pl-2 flex-shrink-0 text-13">
               <CustomMenu placement="bottom-end" ellipsis>
                 {!disabled && (
                   <CustomMenu.MenuItem onClick={handleEditIssue}>
diff --git a/apps/web/core/components/issues/relations/issue-list.tsx b/apps/web/core/components/issues/relations/issue-list.tsx
index 3b30cdb983..e78ab6086e 100644
--- a/apps/web/core/components/issues/relations/issue-list.tsx
+++ b/apps/web/core/components/issues/relations/issue-list.tsx
@@ -1,4 +1,3 @@
-"use client";
 import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
@@ -26,7 +25,7 @@ type Props = {
   issueServiceType?: TIssueServiceType;
 };
 
-export const RelationIssueList: FC<Props> = observer((props) => {
+export const RelationIssueList = observer(function RelationIssueList(props: Props) {
   const {
     workspaceSlug,
     issueId,
diff --git a/apps/web/core/components/issues/relations/properties.tsx b/apps/web/core/components/issues/relations/properties.tsx
index 686b2e2c2f..2609ee69f1 100644
--- a/apps/web/core/components/issues/relations/properties.tsx
+++ b/apps/web/core/components/issues/relations/properties.tsx
@@ -1,4 +1,3 @@
-"use client";
 import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
@@ -21,7 +20,7 @@ type Props = {
   issueServiceType?: TIssueServiceType;
 };
 
-export const RelationIssueProperty: FC<Props> = observer((props) => {
+export const RelationIssueProperty = observer(function RelationIssueProperty(props: Props) {
   const { workspaceSlug, issueId, disabled, issueOperations, issueServiceType = EIssueServiceType.ISSUES } = props;
   // hooks
   const {
diff --git a/apps/web/core/components/issues/select/base.tsx b/apps/web/core/components/issues/select/base.tsx
index a81eebcd91..59dffab858 100644
--- a/apps/web/core/components/issues/select/base.tsx
+++ b/apps/web/core/components/issues/select/base.tsx
@@ -33,7 +33,7 @@ export type TWorkItemLabelSelectBaseProps = {
   value: string[];
 };
 
-export const WorkItemLabelSelectBase: React.FC<TWorkItemLabelSelectBaseProps> = observer((props) => {
+export const WorkItemLabelSelectBase = observer(function WorkItemLabelSelectBase(props: TWorkItemLabelSelectBaseProps) {
   const {
     buttonClassName,
     buttonContainerClassName,
@@ -159,16 +159,13 @@ export const WorkItemLabelSelectBase: React.FC<TWorkItemLabelSelectBaseProps> =
       <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("h-full flex 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 items-center justify-center gap-2 text-11 h-full", buttonClassName)}>
             <IssueLabelsList
               labels={value.map((v) => labelsList?.find((l) => l.id === v)) ?? []}
               length={3}
@@ -178,7 +175,7 @@ export const WorkItemLabelSelectBase: React.FC<TWorkItemLabelSelectBaseProps> =
         ) : (
           <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",
+              "h-full flex 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 +188,17 @@ export const WorkItemLabelSelectBase: React.FC<TWorkItemLabelSelectBaseProps> =
       {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">
+              <Search 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 +218,13 @@ export const WorkItemLabelSelectBase: React.FC<TWorkItemLabelSelectBaseProps> =
                             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 select-none items-center gap-2 truncate rounded-sm px-1 py-1.5 text-secondary`
                             }
                             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,7 +234,7 @@ export const WorkItemLabelSelectBase: React.FC<TWorkItemLabelSelectBaseProps> =
                                   />
                                   <span className="truncate">{label.name}</span>
                                 </div>
-                                <div className="flex shrink-0 items-center justify-center rounded p-1">
+                                <div className="flex shrink-0 items-center justify-center rounded-sm p-1">
                                   <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
                                 </div>
                               </div>
@@ -246,8 +243,8 @@ export const WorkItemLabelSelectBase: React.FC<TWorkItemLabelSelectBaseProps> =
                         );
                     } 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 select-none items-center gap-2 truncate p-2 text-primary">
                             <Component className="h-3 w-3" /> {label.name}
                           </div>
                           <div>
@@ -256,13 +253,13 @@ export const WorkItemLabelSelectBase: React.FC<TWorkItemLabelSelectBaseProps> =
                                 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 select-none items-center gap-2 truncate rounded-sm px-1 py-1.5 text-secondary`
                                 }
                                 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,7 +269,7 @@ export const WorkItemLabelSelectBase: React.FC<TWorkItemLabelSelectBaseProps> =
                                       />
                                       <span>{child.name}</span>
                                     </div>
-                                    <div className="flex items-center justify-center rounded p-1">
+                                    <div className="flex items-center justify-center rounded-sm p-1">
                                       <Check className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
                                     </div>
                                   </div>
@@ -291,22 +288,22 @@ export const WorkItemLabelSelectBase: React.FC<TWorkItemLabelSelectBaseProps> =
                       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="text-placeholder italic py-1 px-1.5">{t("no_matching_results")}</p>
                 )
               ) : (
-                <p className="text-custom-text-400 italic py-1 px-1.5">{t("loading")}</p>
+                <p className="text-placeholder italic py-1 px-1.5">{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 2606a563b6..ea0d803c79 100644
--- a/apps/web/core/components/issues/select/dropdown.tsx
+++ b/apps/web/core/components/issues/select/dropdown.tsx
@@ -15,7 +15,7 @@ type TWorkItemLabelSelectProps = Omit<TWorkItemLabelSelectBaseProps, "labelIds"
   projectId: string | undefined;
 };
 
-export const IssueLabelSelect: React.FC<TWorkItemLabelSelectProps> = observer((props) => {
+export const IssueLabelSelect = observer(function IssueLabelSelect(props: TWorkItemLabelSelectProps) {
   const { projectId } = props;
   // router
   const { workspaceSlug } = useParams();
diff --git a/apps/web/core/components/issues/title-input.tsx b/apps/web/core/components/issues/title-input.tsx
index 30d555517d..82c04cc8e0 100644
--- a/apps/web/core/components/issues/title-input.tsx
+++ b/apps/web/core/components/issues/title-input.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useState, useEffect, useCallback, useRef } from "react";
 import { observer } from "mobx-react";
@@ -26,7 +24,7 @@ export type IssueTitleInputProps = {
   containerClassName?: string;
 };
 
-export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
+export const IssueTitleInput = observer(function IssueTitleInput(props: IssueTitleInputProps) {
   const {
     disabled,
     value,
@@ -139,7 +137,7 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
     [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">
@@ -147,7 +145,7 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
         <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 outline-none ring-0",
             {
               "ring-1 ring-red-400 mx-2.5": title?.length === 0,
             },
@@ -163,7 +161,7 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
         />
         <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 bottom-1 right-1 z-[2] rounded-sm bg-surface-1 p-0.5 text-11 text-secondary opacity-0 transition-opacity",
             {
               "opacity-100": isLengthVisible,
             }
@@ -173,7 +171,7 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
           /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-red-500">{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 fee797304b..380b45cbf9 100644
--- a/apps/web/core/components/issues/workspace-draft/delete-modal.tsx
+++ b/apps/web/core/components/issues/workspace-draft/delete-modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useState } from "react";
 // types
 import { PROJECT_ERROR_MESSAGES, EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
@@ -21,7 +19,7 @@ type Props = {
   onSubmit?: () => Promise<void>;
 };
 
-export const WorkspaceDraftIssueDeleteIssueModal: React.FC<Props> = (props) => {
+export function WorkspaceDraftIssueDeleteIssueModal(props: Props) {
   const { dataId, data, isOpen, handleClose, onSubmit } = props;
   // states
   const [isDeleting, setIsDeleting] = useState(false);
@@ -102,4 +100,4 @@ export const WorkspaceDraftIssueDeleteIssueModal: React.FC<Props> = (props) => {
       secondaryButtonText={t("cancel")}
     />
   );
-};
+}
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 137767953f..c7d4654a1b 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,4 +1,3 @@
-"use client";
 import type { FC } from "react";
 import React, { useRef, useState } from "react";
 import { omit } from "lodash-es";
@@ -16,8 +15,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";
@@ -28,7 +28,7 @@ type Props = {
   issueId: string;
 };
 
-export const DraftIssueBlock: FC<Props> = observer((props) => {
+export const DraftIssueBlock = observer(function DraftIssueBlock(props: Props) {
   // props
   const { workspaceSlug, issueId } = props;
   // states
@@ -120,7 +120,7 @@ export const DraftIssueBlock: FC<Props> = observer((props) => {
       />
       <div
         id={`issue-${issue.id}`}
-        className=" relative border-b border-b-custom-border-200 w-full cursor-pointer"
+        className=" relative border-b border-b-subtle-1 w-full cursor-pointer"
         onDoubleClick={() => {
           setIssueToEdit(issue);
           setCreateUpdateIssueModal(true);
@@ -129,7 +129,7 @@ export const DraftIssueBlock: FC<Props> = observer((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 min-h-11 relative flex flex-col gap-3 bg-layer-transparent hover:bg-layer-transparent-hover py-3 text-13 transition-colors",
             {
               "md:flex-row md:items-center": isSidebarCollapsed,
               "lg:flex-row lg:items-center": !isSidebarCollapsed,
@@ -146,7 +146,8 @@ export const DraftIssueBlock: FC<Props> = observer((props) => {
                       <IdentifierText
                         identifier={projectIdentifier}
                         enableClickToCopyIdentifier
-                        textContainerClassName="text-xs font-medium text-custom-text-300"
+                        size="xs"
+                        variant="tertiary"
                       />
                     </div>
                   )}
@@ -157,13 +158,13 @@ export const DraftIssueBlock: FC<Props> = observer((props) => {
               </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 truncate cursor-pointer text-13 text-primary">{issue.name}</p>
               </Tooltip>
             </div>
 
             {/* quick actions */}
             <div
-              className={cn("block border border-custom-border-300 rounded", {
+              className={cn("block border border-strong rounded-sm", {
                 "md:hidden": isSidebarCollapsed,
                 "lg:hidden": !isSidebarCollapsed,
               })}
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 e931bd25c6..9b9ed1d57e 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,5 +1,3 @@
-"use client";
-
 import { useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -35,7 +33,7 @@ export interface IIssueProperties {
   className: string;
 }
 
-export const DraftIssueProperties: React.FC<IIssueProperties> = observer((props) => {
+export const DraftIssueProperties = observer(function DraftIssueProperties(props: IIssueProperties) {
   const { issue, updateIssue, className } = props;
   // store hooks
   const { getProjectById } = useProject();
@@ -197,7 +195,7 @@ export const DraftIssueProperties: React.FC<IIssueProperties> = observer((props)
           buttonClassName={
             shouldHighlightIssueDueDate(issue?.target_date || null, stateDetails?.group) ? "text-red-500" : ""
           }
-          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 37e19ca4c2..6ea7f82bcf 100644
--- a/apps/web/core/components/issues/workspace-draft/empty-state.tsx
+++ b/apps/web/core/components/issues/workspace-draft/empty-state.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { Fragment, useState } from "react";
 // components
@@ -12,7 +10,7 @@ import { CreateUpdateIssueModal } from "@/components/issues/issue-modal/modal";
 // constants
 import { useUserPermissions } from "@/hooks/store/user";
 
-export const WorkspaceDraftEmptyState: FC = observer(() => {
+export const WorkspaceDraftEmptyState = observer(function WorkspaceDraftEmptyState() {
   // state
   const [isDraftIssueModalOpen, setIsDraftIssueModalOpen] = useState(false);
   // store hooks
@@ -37,7 +35,6 @@ export const WorkspaceDraftEmptyState: FC = observer(() => {
           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/loader.tsx b/apps/web/core/components/issues/workspace-draft/loader.tsx
index 95aa0a2a16..62f2c9bc54 100644
--- a/apps/web/core/components/issues/workspace-draft/loader.tsx
+++ b/apps/web/core/components/issues/workspace-draft/loader.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { range } from "lodash-es";
 // components
@@ -9,7 +7,7 @@ type TWorkspaceDraftIssuesLoader = {
   items?: number;
 };
 
-export const WorkspaceDraftIssuesLoader: FC<TWorkspaceDraftIssuesLoader> = (props) => {
+export function WorkspaceDraftIssuesLoader(props: TWorkspaceDraftIssuesLoader) {
   const { items = 14 } = props;
   return (
     <div className="relative h-full w-full">
@@ -18,4 +16,4 @@ export const WorkspaceDraftIssuesLoader: FC<TWorkspaceDraftIssuesLoader> = (prop
       ))}
     </div>
   );
-};
+}
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 2f56975226..1166ea1621 100644
--- a/apps/web/core/components/issues/workspace-draft/quick-action.tsx
+++ b/apps/web/core/components/issues/workspace-draft/quick-action.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
 // ui
@@ -13,7 +11,7 @@ export interface Props {
   MENU_ITEMS: TContextMenuItem[];
 }
 
-export const WorkspaceDraftIssueQuickActions: React.FC<Props> = observer((props) => {
+export const WorkspaceDraftIssueQuickActions = observer(function WorkspaceDraftIssueQuickActions(props: Props) {
   const { parentRef, MENU_ITEMS } = props;
 
   const { t } = useTranslation();
@@ -38,7 +36,7 @@ export const WorkspaceDraftIssueQuickActions: React.FC<Props> = observer((props)
             className={cn(
               "flex items-center gap-2",
               {
-                "text-custom-text-400": item.disabled,
+                "text-placeholder": item.disabled,
               },
               item.className
             )}
@@ -49,8 +47,8 @@ export const WorkspaceDraftIssueQuickActions: React.FC<Props> = observer((props)
               <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("text-tertiary whitespace-pre-line", {
+                    "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 e35d9ec3f8..7fc987992d 100644
--- a/apps/web/core/components/issues/workspace-draft/root.tsx
+++ b/apps/web/core/components/issues/workspace-draft/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { Fragment } from "react";
 import { observer } from "mobx-react";
@@ -27,7 +25,7 @@ type TWorkspaceDraftIssuesRoot = {
   workspaceSlug: string;
 };
 
-export const WorkspaceDraftIssuesRoot: FC<TWorkspaceDraftIssuesRoot> = observer((props) => {
+export const WorkspaceDraftIssuesRoot = observer(function WorkspaceDraftIssuesRoot(props: TWorkspaceDraftIssuesRoot) {
   const { workspaceSlug } = props;
   // plane hooks
   const { t } = useTranslation();
@@ -99,13 +97,10 @@ export const WorkspaceDraftIssuesRoot: FC<TWorkspaceDraftIssuesRoot> = observer(
             <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 pl-6 p-3 text-13 font-medium bg-surface-1 border-b border-subtle transition-all", {
+                "text-accent-primary hover:text-accent-secondary cursor-pointer underline-offset-2 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 cedc8bb909..ad77edcd74 100644
--- a/apps/web/core/components/labels/create-update-label-inline.tsx
+++ b/apps/web/core/components/labels/create-update-label-inline.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { forwardRef, useEffect } from "react";
 import { observer } from "mobx-react";
 import { TwitterPicker } from "react-color";
@@ -15,6 +13,11 @@ import type { IIssueLabel } from "@plane/types";
 import { Input } from "@plane/ui";
 import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 
+// error codes
+const errorCodes = {
+  LABEL_NAME_ALREADY_EXISTS: "LABEL_NAME_ALREADY_EXISTS",
+};
+
 export type TLabelOperationsCallbacks = {
   createLabel: (data: Partial<IIssueLabel>) => Promise<IIssueLabel>;
   updateLabel: (labelId: string, data: Partial<IIssueLabel>) => Promise<IIssueLabel>;
@@ -31,11 +34,14 @@ type TCreateUpdateLabelInlineProps = {
 
 const defaultValues: Partial<IIssueLabel> = {
   name: "",
-  color: "rgb(var(--color-text-200))",
+  color: "var(--text-color-secondary)",
 };
 
 export const CreateUpdateLabelInline = observer(
-  forwardRef<HTMLDivElement, TCreateUpdateLabelInlineProps>(function CreateUpdateLabelInline(props, ref) {
+  forwardRef(function CreateUpdateLabelInline(
+    props: TCreateUpdateLabelInlineProps,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ) {
     const { labelForm, setLabelForm, isUpdating, labelOperationsCallbacks, labelToUpdate, onClose } = props;
     // form info
     const {
@@ -58,6 +64,23 @@ export const CreateUpdateLabelInline = observer(
       if (onClose) onClose();
     };
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const getErrorMessage = (error: any, operation: "create" | "update"): string => {
+      const errorData = error ?? {};
+
+      const labelError = errorData.name?.includes(errorCodes.LABEL_NAME_ALREADY_EXISTS);
+      if (labelError) {
+        return t("label.create.already_exists");
+      }
+
+      // Fallback to general error messages
+      if (operation === "create") {
+        return errorData?.detail ?? errorData?.error ?? t("common.something_went_wrong");
+      }
+
+      return errorData?.error ?? t("project_settings.labels.toast.error");
+    };
+
     const handleLabelCreate: SubmitHandler<IIssueLabel> = async (formData) => {
       if (isSubmitting) return;
 
@@ -82,10 +105,12 @@ export const CreateUpdateLabelInline = observer(
             },
             error,
           });
+
+          const errorMessage = getErrorMessage(error, "create");
           setToast({
             title: "Error!",
             type: TOAST_TYPE.ERROR,
-            message: error?.detail ?? error.error ?? t("common.something_went_wrong"),
+            message: errorMessage,
           });
           reset(formData);
         });
@@ -116,10 +141,11 @@ export const CreateUpdateLabelInline = observer(
             },
             error,
           });
+          const errorMessage = getErrorMessage(error, "update");
           setToast({
             title: "Oops!",
             type: TOAST_TYPE.ERROR,
-            message: error?.error ?? t("project_settings.labels.toast.error"),
+            message: errorMessage,
           });
           reset(formData);
         });
@@ -160,15 +186,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
@@ -233,7 +259,7 @@ export const CreateUpdateLabelInline = observer(
               )}
             />
           </div>
-          <Button variant="neutral-primary" onClick={() => handleClose()} size="sm">
+          <Button variant="secondary" onClick={() => handleClose()}>
             {t("cancel")}
           </Button>
           <Button
@@ -242,13 +268,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-red-500">{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 49a104eb33..eb3dc77bbe 100644
--- a/apps/web/core/components/labels/delete-label-modal.tsx
+++ b/apps/web/core/components/labels/delete-label-modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -19,7 +17,7 @@ type Props = {
   data: IIssueLabel | null;
 };
 
-export const DeleteLabelModal: React.FC<Props> = observer((props) => {
+export const DeleteLabelModal = observer(function DeleteLabelModal(props: Props) {
   const { isOpen, onClose, data } = props;
   // router
   const { workspaceSlug, projectId } = useParams();
@@ -79,8 +77,8 @@ export const DeleteLabelModal: React.FC<Props> = observer((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/label-block/label-item-block.tsx b/apps/web/core/components/labels/label-block/label-item-block.tsx
index ec5b5f39b2..a60fbdcb56 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,5 +1,3 @@
-"use client";
-
 import type { MutableRefObject } from "react";
 import { useRef, useState } from "react";
 import type { LucideIcon } from "lucide-react";
@@ -36,7 +34,7 @@ interface ILabelItemBlock {
   draggable?: boolean;
 }
 
-export const LabelItemBlock = (props: ILabelItemBlock) => {
+export function LabelItemBlock(props: ILabelItemBlock) {
   const {
     label,
     isDragging,
@@ -93,13 +91,13 @@ export const 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>
           )}
@@ -107,4 +105,4 @@ export const LabelItemBlock = (props: ILabelItemBlock) => {
       )}
     </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 1eaf284981..7978ff2447 100644
--- a/apps/web/core/components/labels/label-block/label-name.tsx
+++ b/apps/web/core/components/labels/label-block/label-name.tsx
@@ -6,7 +6,7 @@ interface ILabelName {
   isGroup: boolean;
 }
 
-export const LabelName = (props: ILabelName) => {
+export function LabelName(props: ILabelName) {
   const { name, color, isGroup } = props;
 
   return (
@@ -21,7 +21,7 @@ export const 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 624675f26d..81fdfb1c5e 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,5 +1,3 @@
-"use client";
-
 import type { MutableRefObject } from "react";
 import { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
@@ -25,15 +23,15 @@ type LabelDragPreviewProps = {
   isGroup: boolean;
 };
 
-export const LabelDragPreview = (props: LabelDragPreviewProps) => {
+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="py-3 pl-2 pr-4 border-[1px] border-subtle bg-surface-1">
       <LabelName name={label.name} color={label.color} isGroup={isGroup} />
     </div>
   );
-};
+}
 
 type Props = {
   label: IIssueLabel;
@@ -53,7 +51,7 @@ type Props = {
   ) => void;
 };
 
-export const LabelDndHOC = observer((props: Props) => {
+export const LabelDndHOC = observer(function LabelDndHOC(props: Props) {
   const { label, isGroup, isChild, isLastChild, children, onDrop } = props;
 
   const [isDragging, setIsDragging] = useState(false);
@@ -152,7 +150,7 @@ export const LabelDndHOC = observer((props: Props) => {
           if (instruction === "reorder-below") dropAtEndOfList = true;
 
           const sourceData = source.data as TargetData;
-          if (sourceData.id) onDrop(sourceData.id as string, parentId, droppedLabelId, dropAtEndOfList);
+          if (sourceData.id) onDrop(sourceData.id, parentId, droppedLabelId, dropAtEndOfList);
         },
       })
     );
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 8abbd67cf3..c53931c2dc 100644
--- a/apps/web/core/components/labels/project-setting-label-group.tsx
+++ b/apps/web/core/components/labels/project-setting-label-group.tsx
@@ -35,7 +35,7 @@ type Props = {
   isEditable?: boolean;
 };
 
-export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
+export const ProjectSettingLabelGroup = observer(function ProjectSettingLabelGroup(props: Props) {
   const {
     label,
     labelChildren,
@@ -83,13 +83,13 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
     <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 }) => (
@@ -123,7 +123,7 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
                       <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 +140,7 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
                       <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 71aa6da9f6..795e705a51 100644
--- a/apps/web/core/components/labels/project-setting-label-item.tsx
+++ b/apps/web/core/components/labels/project-setting-label-item.tsx
@@ -33,7 +33,7 @@ type Props = {
   isEditable?: boolean;
 };
 
-export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
+export function ProjectSettingLabelItem(props: Props) {
   const {
     label,
     setIsUpdating,
@@ -87,12 +87,12 @@ export const ProjectSettingLabelItem: React.FC<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={`py-3 px-1 group relative flex items-center justify-between gap-2 space-y-3 rounded-sm  ${
+              isDroppingInLabel ? "" : "border-[0.5px] border-subtle"
+            } ${isDragging || isParentDragging ? "bg-layer-1" : "bg-surface-1"}`}
           >
             {isEditLabelForm ? (
               <CreateUpdateLabelInline
@@ -121,4 +121,4 @@ export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
       )}
     </LabelDndHOC>
   );
-};
+}
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 bf4c136937..f407ed14aa 100644
--- a/apps/web/core/components/labels/project-setting-label-list.tsx
+++ b/apps/web/core/components/labels/project-setting-label-list.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -23,7 +21,7 @@ import { useUserPermissions } from "@/hooks/store/user";
 // local imports
 import { SettingsHeading } from "../settings/heading";
 
-export const ProjectSettingsLabelList: React.FC = observer(() => {
+export const ProjectSettingsLabelList = observer(function ProjectSettingsLabelList() {
   // router
   const { workspaceSlug, projectId } = useParams();
   // refs
@@ -93,7 +91,7 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
 
       <div className="w-full py-2">
         {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}
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 4c151d9f09..092e2119a1 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,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { CheckCircle } from "lucide-react";
@@ -8,7 +5,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 = {
@@ -22,7 +18,7 @@ export type TBasePaidPlanCardProps = {
   renderActionButton: (price: TSubscriptionPrice) => React.ReactNode;
 };
 
-export const BasePaidPlanCard: FC<TBasePaidPlanCardProps> = observer((props) => {
+export const BasePaidPlanCard = observer(function BasePaidPlanCard(props: TBasePaidPlanCardProps) {
   const {
     planVariant,
     features,
@@ -35,26 +31,23 @@ export const BasePaidPlanCard: FC<TBasePaidPlanCardProps> = observer((props) =>
   // 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 py-6 px-3 bg-layer-2 rounded-xl border border-subtle">
       <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"))}
-          >
+          <Tab.List className="flex space-x-1 rounded-md p-0.5 w-60 bg-layer-3">
             {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"
+                      ? "bg-layer-2 text-primary shadow-raised-100 border border-subtle-1"
+                      : "text-tertiary hover:text-secondary"
                   )
                 }
                 onClick={() => setSelectedPlan(price.recurring)}
@@ -68,11 +61,11 @@ export const BasePaidPlanCard: FC<TBasePaidPlanCardProps> = observer((props) =>
           {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
@@ -81,9 +74,9 @@ export const BasePaidPlanCard: FC<TBasePaidPlanCardProps> = observer((props) =>
                         "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="w-full text-caption-md-medium leading-5 flex items-center line-clamp-1">
+                        <CheckCircle className="size-4 mr-2 text-tertiary flex-shrink-0" />
+                        <span className="text-secondary truncate">{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 7976e14c5b..0aa45e38d4 100644
--- a/apps/web/core/components/license/modal/card/checkout-button.tsx
+++ b/apps/web/core/components/license/modal/card/checkout-button.tsx
@@ -1,11 +1,8 @@
-"use client";
-import type { FC } from "react";
 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";
 
@@ -29,7 +26,7 @@ type Props = {
   isTrialAllowed: boolean;
 };
 
-export const PlanCheckoutButton: FC<Props> = observer((props) => {
+export const PlanCheckoutButton = observer(function PlanCheckoutButton(props: Props) {
   const {
     planeName,
     planVariant,
@@ -43,44 +40,37 @@ export const PlanCheckoutButton: FC<Props> = observer((props) => {
     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="text-20 font-semibold h-9">
           {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 flex-col items-center justify-center w-full space-y-4">
+          <Button
+            variant="primary"
+            size="lg"
+            className="w-56"
             onClick={() => {
               if (product && price.id) {
                 handleCheckout({
@@ -93,9 +83,9 @@ export const PlanCheckoutButton: FC<Props> = observer((props) => {
             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 8ac2594546..a98935eb23 100644
--- a/apps/web/core/components/license/modal/card/discount-info.tsx
+++ b/apps/web/core/components/license/modal/card/discount-info.tsx
@@ -4,6 +4,9 @@ import type { TBillingFrequency } from "@plane/types";
 import { EProductSubscriptionEnum } from "@plane/types";
 import { cn } from "@plane/utils";
 
+import ScribbleBlack from "@/app/assets/scribble/scribble-black.svg?url";
+import ScribbleWhite from "@/app/assets/scribble/scribble-white.svg?url";
+
 type TDiscountInfoProps = {
   className?: string;
   currency: string;
@@ -23,7 +26,7 @@ const getActualPrice = (frequency: TBillingFrequency, subscriptionType: EProduct
   }
 };
 
-export const DiscountInfo = ({ className, currency, frequency, price, subscriptionType }: TDiscountInfoProps) => {
+export function DiscountInfo({ className, currency, frequency, price, subscriptionType }: TDiscountInfoProps) {
   const { resolvedTheme } = useTheme();
   // derived values
   const actualPrice = getActualPrice(frequency, subscriptionType);
@@ -42,12 +45,8 @@ export const DiscountInfo = ({ className, currency, frequency, price, subscripti
       {actualPrice != price && (
         <span className={cn("relative", className)}>
           <img
-            src={
-              resolvedTheme === "dark"
-                ? "https://images.plane.so/pricing/hero/scribble-white.svg"
-                : "https://images.plane.so/pricing/hero/scribble-black.svg"
-            }
-            alt="image"
+            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"
           />
           {currency}
@@ -58,4 +57,4 @@ export const DiscountInfo = ({ className, currency, frequency, price, subscripti
       {price}
     </>
   );
-};
+}
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 250ac41640..005c4df56a 100644
--- a/apps/web/core/components/license/modal/card/free-plan.tsx
+++ b/apps/web/core/components/license/modal/card/free-plan.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { CircleX } from "lucide-react";
 // plane constants
@@ -11,28 +9,28 @@ type FreePlanCardProps = {
   isOnFreePlan: boolean;
 };
 
-export const FreePlanCard = observer((props: 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="py-4 px-2 rounded-xl bg-layer-1">
       {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">
+          <span className="px-2 py-1 bg-layer-2 text-caption-md-medium text-tertiary rounded-sm border border-subtle-1">
             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">
           {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>
+              <p className="w-full text-caption-md-medium leading-5 flex items-center">
+                <CircleX className="size-4 mr-2 text-danger-secondary flex-shrink-0" />
+                <span className="text-secondary truncate">{feature}</span>
               </p>
             </li>
           ))}
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 623afd22f7..218e19d23f 100644
--- a/apps/web/core/components/license/modal/card/plan-upgrade.tsx
+++ b/apps/web/core/components/license/modal/card/plan-upgrade.tsx
@@ -1,12 +1,8 @@
-"use client";
-
-import type { FC } from "react";
 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
@@ -28,7 +24,7 @@ export type PlanUpgradeCardProps = {
   isTrialAllowed: boolean;
 };
 
-export const PlanUpgradeCard: FC<PlanUpgradeCardProps> = observer((props) => {
+export const PlanUpgradeCard = observer(function PlanUpgradeCard(props: PlanUpgradeCardProps) {
   const {
     planVariant,
     features,
@@ -75,7 +71,7 @@ export const PlanUpgradeCard: FC<PlanUpgradeCardProps> = observer((props) => {
         <>
           Yearly
           {yearlyDiscount > 0 && (
-            <span className={cn(getDiscountPillStyle(planVariant), "rounded-full px-1.5 py-0.5 ml-1 text-xs")}>
+            <span className="bg-accent-primary text-on-color rounded-full px-1.5 py-0.5 ml-1 text-caption-sm">
               -{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 e77606ae6b..45b85ca8a5 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,12 +1,9 @@
-"use client";
-
-import type { FC } from "react";
 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";
@@ -26,7 +23,7 @@ export type TalkToSalesCardProps = {
   renderTrialButton?: (props: { productId: string | undefined; priceId: string | undefined }) => React.ReactNode;
 };
 
-export const TalkToSalesCard: FC<TalkToSalesCardProps> = observer((props) => {
+export const TalkToSalesCard = observer(function TalkToSalesCard(props: TalkToSalesCardProps) {
   const {
     planVariant,
     href,
@@ -49,54 +46,42 @@ export const TalkToSalesCard: FC<TalkToSalesCardProps> = observer((props) => {
     </>
   );
 
-  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="text-20 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>
-        {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"
-              )}
-            >
-              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 flex-col items-center justify-center w-full">
+          <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/modules/analytics-sidebar/issue-progress.tsx b/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx
index 87ea34adb0..7802aa84c2 100644
--- a/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/issue-progress.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { Fragment, useMemo, useState } from "react";
 import { observer } from "mobx-react";
@@ -34,7 +32,7 @@ const moduleBurnDownChartOptions = [
   { value: "points", i18n_label: "points" },
 ];
 
-export const ModuleAnalyticsProgress: FC<TModuleAnalyticsProgress> = observer((props) => {
+export const ModuleAnalyticsProgress = observer(function ModuleAnalyticsProgress(props: TModuleAnalyticsProgress) {
   // props
   const { workspaceSlug, projectId, moduleId } = props;
   // router
@@ -116,7 +114,7 @@ export const ModuleAnalyticsProgress: FC<TModuleAnalyticsProgress> = observer((p
 
   if (!moduleDetails) return <></>;
   return (
-    <div className="border-t border-custom-border-200 space-y-4 py-4 px-3">
+    <div className="border-t border-subtle space-y-4 py-4 px-3">
       <Disclosure defaultOpen={isModuleDateValid ? true : false}>
         {({ open }) => (
           <div className="space-y-6">
@@ -124,9 +122,9 @@ export const ModuleAnalyticsProgress: FC<TModuleAnalyticsProgress> = observer((p
             {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="font-medium text-secondary text-13">{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="flex h-5 w-9 items-center justify-center rounded-sm bg-amber-500/20 text-11 font-medium text-amber-500">{`${progressHeaderPercentage}%`}</div>
                   )}
                 </Disclosure.Button>
                 {isCurrentEstimateTypeIsPoints && (
@@ -162,10 +160,10 @@ export const ModuleAnalyticsProgress: FC<TModuleAnalyticsProgress> = observer((p
               </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="font-medium text-secondary text-13">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 italic text-secondary">
                     {moduleDetails?.start_date && moduleDetails?.target_date
                       ? t("project_module.empty_state.sidebar.in_active")
                       : t("project_module.empty_state.sidebar.invalid_date")}
@@ -199,7 +197,7 @@ export const ModuleAnalyticsProgress: FC<TModuleAnalyticsProgress> = observer((p
 
                 {/* 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 7ef16ae02c..f3baa4d295 100644
--- a/apps/web/core/components/modules/analytics-sidebar/progress-stats.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/progress-stats.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { Tab } from "@headlessui/react";
 import { useTranslation } from "@plane/i18n";
@@ -33,7 +30,7 @@ type TModuleProgressStats = {
   totalIssuesCount: number;
 };
 
-export const ModuleProgressStats: FC<TModuleProgressStats> = observer((props) => {
+export const ModuleProgressStats = observer(function ModuleProgressStats(props: TModuleProgressStats) {
   const {
     distribution,
     groupedIssues,
@@ -122,18 +119,18 @@ export const ModuleProgressStats: FC<TModuleProgressStats> = observer((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`,
+                `p-1 w-full text-primary outline-none focus:outline-none cursor-pointer transition-all`,
+                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)}
@@ -142,7 +139,7 @@ export const ModuleProgressStats: FC<TModuleProgressStats> = observer((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 3026f2e2e7..53a7069614 100644
--- a/apps/web/core/components/modules/analytics-sidebar/root.tsx
+++ b/apps/web/core/components/modules/analytics-sidebar/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -55,7 +53,7 @@ type Props = {
 };
 
 // TODO: refactor this component
-export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
+export const ModuleAnalyticsSidebar = observer(function ModuleAnalyticsSidebar(props: Props) {
   const { moduleId, handleClose, isArchived } = props;
   // states
   const [moduleLinkModal, setModuleLinkModal] = useState(false);
@@ -126,7 +124,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
   };
 
   const handleUpdateLink = async (formData: ModuleLink, linkId: string) => {
-    if (!workspaceSlug || !projectId || !module) return;
+    if (!workspaceSlug || !projectId) return;
 
     const payload = { metadata: {}, ...formData };
 
@@ -147,7 +145,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
   };
 
   const handleDeleteLink = async (linkId: string) => {
-    if (!workspaceSlug || !projectId || !module) return;
+    if (!workspaceSlug || !projectId) return;
 
     deleteModuleLink(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), linkId)
       .then(() => {
@@ -245,15 +243,13 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
         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 z-10 top-0 flex items-center justify-between bg-surface-1 pb-5 pt-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>
@@ -267,7 +263,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((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-xs text-center text-11 ${
                         isEditingAllowed && !isArchived ? "cursor-pointer" : "cursor-not-allowed"
                       }`}
                       style={{
@@ -296,12 +292,12 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
               )}
             />
           </div>
-          <h4 className="w-full break-words text-xl font-semibold text-custom-text-100">{moduleDetails.name}</h4>
+          <h4 className="w-full break-words text-18 font-semibold 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="outline-none ring-none w-full max-h-max bg-transparent !p-0 !m-0 !border-0 resize-none text-13 leading-5 text-secondary"
             value={moduleDetails.description}
             disabled
           />
@@ -309,9 +305,9 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
 
         <div className="flex flex-col gap-5 pb-6 pt-2.5">
           <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
@@ -351,9 +347,9 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
             </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}
@@ -377,9 +373,9 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
             />
           </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}
@@ -402,12 +398,12 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
             />
           </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>
 
@@ -416,12 +412,12 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
            */}
           {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>
           )}
@@ -436,16 +432,15 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
         )}
 
         <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"}`}>
                   <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" : ""}`}
@@ -461,7 +456,7 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
                             {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" />
@@ -482,14 +477,12 @@ export const ModuleAnalyticsSidebar: React.FC<Props> = observer((props) => {
                         ) : (
                           <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" />
diff --git a/apps/web/core/components/modules/applied-filters/date.tsx b/apps/web/core/components/modules/applied-filters/date.tsx
index 115176c425..f9d5c21065 100644
--- a/apps/web/core/components/modules/applied-filters/date.tsx
+++ b/apps/web/core/components/modules/applied-filters/date.tsx
@@ -12,7 +12,7 @@ type Props = {
   values: string[];
 };
 
-export const AppliedDateFilters: React.FC<Props> = observer((props) => {
+export const AppliedDateFilters = observer(function AppliedDateFilters(props: Props) {
   const { editable, handleRemove, values } = props;
 
   const getDateLabel = (value: string): string => {
@@ -37,12 +37,12 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
   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/members.tsx b/apps/web/core/components/modules/applied-filters/members.tsx
index baa58d622b..c57fdbc18c 100644
--- a/apps/web/core/components/modules/applied-filters/members.tsx
+++ b/apps/web/core/components/modules/applied-filters/members.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { CloseIcon } from "@plane/propel/icons";
 // plane ui
@@ -15,7 +13,7 @@ type Props = {
   editable: boolean | undefined;
 };
 
-export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
+export const AppliedMembersFilters = observer(function AppliedMembersFilters(props: Props) {
   const { handleRemove, values, editable } = props;
   // store hooks
   const {
@@ -30,7 +28,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
         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)}
@@ -41,7 +39,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((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(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 03f01432af..cfac0f26cc 100644
--- a/apps/web/core/components/modules/applied-filters/root.tsx
+++ b/apps/web/core/components/modules/applied-filters/root.tsx
@@ -21,7 +21,7 @@ type Props = {
 const MEMBERS_FILTERS = ["lead", "members"];
 const DATE_FILTERS = ["start_date", "target_date"];
 
-export const ModuleAppliedFiltersList: React.FC<Props> = (props) => {
+export function ModuleAppliedFiltersList(props: Props) {
   const {
     appliedFilters,
     isFavoriteFilterApplied,
@@ -50,7 +50,7 @@ export const ModuleAppliedFiltersList: React.FC<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 +75,7 @@ export const ModuleAppliedFiltersList: React.FC<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 +88,16 @@ export const ModuleAppliedFiltersList: React.FC<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 p-1 text-11 bg-layer-1">
                 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({
@@ -123,4 +123,4 @@ export const ModuleAppliedFiltersList: React.FC<Props> = (props) => {
       </div>
     </Header>
   );
-};
+}
diff --git a/apps/web/core/components/modules/applied-filters/status.tsx b/apps/web/core/components/modules/applied-filters/status.tsx
index a25e1b9f04..e13627b0e7 100644
--- a/apps/web/core/components/modules/applied-filters/status.tsx
+++ b/apps/web/core/components/modules/applied-filters/status.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // ui
 import { MODULE_STATUS } from "@plane/constants";
@@ -13,7 +11,7 @@ type Props = {
   editable: boolean | undefined;
 };
 
-export const AppliedStatusFilters: React.FC<Props> = observer((props) => {
+export const AppliedStatusFilters = observer(function AppliedStatusFilters(props: Props) {
   const { handleRemove, values, editable } = props;
   const { t } = useTranslation();
 
@@ -24,13 +22,13 @@ export const AppliedStatusFilters: React.FC<Props> = observer((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 7e2469253d..9f9444387f 100644
--- a/apps/web/core/components/modules/archived-modules/header.tsx
+++ b/apps/web/core/components/modules/archived-modules/header.tsx
@@ -19,7 +19,7 @@ import { ModuleFiltersSelection, ModuleOrderByDropdown } from "@/components/modu
 import { useMember } from "@/hooks/store/use-member";
 import { useModuleFilter } from "@/hooks/store/use-module-filter";
 
-export const ArchivedModulesHeader: FC = observer(() => {
+export const ArchivedModulesHeader = observer(function ArchivedModulesHeader() {
   // router
   const { projectId } = useParams();
   // refs
@@ -76,7 +76,7 @@ export const ArchivedModulesHeader: FC = observer(() => {
   const isFiltersApplied = calculateTotalFilters(currentProjectArchivedFilters ?? {}) !== 0;
 
   return (
-    <div className="group relative flex border-b border-custom-border-200">
+    <div className="group relative flex border-b border-subtle">
       <div className="flex w-full items-center overflow-x-auto px-4 gap-2 horizontal-scrollbar scrollbar-sm">
         <ArchiveTabsList />
       </div>
@@ -85,7 +85,7 @@ export const ArchivedModulesHeader: FC = observer(() => {
         {!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 p-2 hover:bg-layer-1 rounded-sm text-placeholder grid place-items-center"
             onClick={() => {
               setIsSearchOpen(true);
               inputRef.current?.focus();
@@ -96,16 +96,16 @@ export const ArchivedModulesHeader: FC = observer(() => {
         )}
         <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 items-center justify-start gap-1 rounded-md border border-transparent bg-surface-1 text-placeholder 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,
+              "w-64 px-2.5 py-1.5 border-subtle 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"
+            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/modal.tsx b/apps/web/core/components/modules/archived-modules/modal.tsx
index 340b44979c..65aa7933b4 100644
--- a/apps/web/core/components/modules/archived-modules/modal.tsx
+++ b/apps/web/core/components/modules/archived-modules/modal.tsx
@@ -1,10 +1,8 @@
-"use client";
-
-import { useState, Fragment } from "react";
-import { Dialog, Transition } from "@headlessui/react";
+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";
@@ -18,7 +16,7 @@ type Props = {
   onSubmit?: () => Promise<void>;
 };
 
-export const ArchiveModuleModal: React.FC<Props> = (props) => {
+export function ArchiveModuleModal(props: Props) {
   const { workspaceSlug, projectId, moduleId, isOpen, handleClose } = props;
   // router
   const router = useAppRouter();
@@ -45,6 +43,7 @@ export const ArchiveModuleModal: React.FC<Props> = (props) => {
         });
         onClose();
         router.push(`/${workspaceSlug}/projects/${projectId}/modules`);
+        return;
       })
       .catch(() =>
         setToast({
@@ -57,51 +56,21 @@ export const ArchiveModuleModal: React.FC<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 6598458ad5..26f3737e42 100644
--- a/apps/web/core/components/modules/archived-modules/root.tsx
+++ b/apps/web/core/components/modules/archived-modules/root.tsx
@@ -15,7 +15,7 @@ import { CycleModuleListLayoutLoader } from "@/components/ui/loader/cycle-module
 import { useModule } from "@/hooks/store/use-module";
 import { useModuleFilter } from "@/hooks/store/use-module-filter";
 
-export const ArchivedModuleLayoutRoot: React.FC = observer(() => {
+export const ArchivedModuleLayoutRoot = observer(function ArchivedModuleLayoutRoot() {
   // router
   const { workspaceSlug, projectId } = useParams();
   // plane hooks
@@ -58,7 +58,7 @@ export const ArchivedModuleLayoutRoot: React.FC = observer(() => {
   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 c66a097641..332617a079 100644
--- a/apps/web/core/components/modules/archived-modules/view.tsx
+++ b/apps/web/core/components/modules/archived-modules/view.tsx
@@ -16,7 +16,7 @@ export interface IArchivedModulesView {
   projectId: string;
 }
 
-export const ArchivedModulesView: FC<IArchivedModulesView> = observer((props) => {
+export const ArchivedModulesView = observer(function ArchivedModulesView(props: IArchivedModulesView) {
   const { workspaceSlug, projectId } = props;
   // store hooks
   const { getFilteredArchivedModuleIds, loader } = useModule();
@@ -35,8 +35,8 @@ export const ArchivedModulesView: FC<IArchivedModulesView> = observer((props) =>
             className="h-36 sm:h-48 w-36 sm:w-48 mx-auto"
             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="text-18 font-medium mt-7 mb-1">No matching modules</h5>
+          <p className="text-placeholder text-14">
             {archivedModulesSearchQuery.trim() === ""
               ? "Remove the filters to see all modules"
               : "Remove the search criteria to see all modules"}
diff --git a/apps/web/core/components/modules/delete-module-modal.tsx b/apps/web/core/components/modules/delete-module-modal.tsx
index 67be03b344..755e3789db 100644
--- a/apps/web/core/components/modules/delete-module-modal.tsx
+++ b/apps/web/core/components/modules/delete-module-modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -23,7 +21,7 @@ type Props = {
   onClose: () => void;
 };
 
-export const DeleteModuleModal: React.FC<Props> = observer((props) => {
+export const DeleteModuleModal = observer(function DeleteModuleModal(props: Props) {
   const { data, isOpen, onClose } = props;
   // states
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
@@ -87,8 +85,8 @@ export const DeleteModuleModal: React.FC<Props> = observer((props) => {
       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="break-all font-medium 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/lead.tsx b/apps/web/core/components/modules/dropdowns/filters/lead.tsx
index c067e17572..5a1fef606e 100644
--- a/apps/web/core/components/modules/dropdowns/filters/lead.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/lead.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -20,7 +18,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterLead: React.FC<Props> = observer((props: Props) => {
+export const FilterLead = observer(function FilterLead(props: Props) {
   const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
   // states
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -87,7 +85,7 @@ export const FilterLead: React.FC<Props> = observer((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"}
@@ -95,7 +93,7 @@ export const FilterLead: React.FC<Props> = observer((props: Props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 italic text-placeholder">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 7f92ef45a3..72f0d9bff4 100644
--- a/apps/web/core/components/modules/dropdowns/filters/members.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/members.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -20,7 +18,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterMembers: React.FC<Props> = observer((props: Props) => {
+export const FilterMembers = observer(function FilterMembers(props: Props) {
   const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
   // states
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -87,7 +85,7 @@ export const FilterMembers: React.FC<Props> = observer((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"}
@@ -95,7 +93,7 @@ export const FilterMembers: React.FC<Props> = observer((props: Props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 italic text-placeholder">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 510eedac80..d684b1bc31 100644
--- a/apps/web/core/components/modules/dropdowns/filters/root.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { Search } from "lucide-react";
@@ -22,7 +20,7 @@ type Props = {
   isArchived?: boolean;
 };
 
-export const ModuleFiltersSelection: React.FC<Props> = observer((props) => {
+export const ModuleFiltersSelection = observer(function ModuleFiltersSelection(props: Props) {
   const {
     displayFilters,
     filters,
@@ -38,12 +36,12 @@ export const ModuleFiltersSelection: React.FC<Props> = observer((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">
+          <Search className="text-placeholder" size={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)}
@@ -51,12 +49,12 @@ export const ModuleFiltersSelection: React.FC<Props> = observer((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="h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
         {!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 9d44fb3361..8ae64109bf 100644
--- a/apps/web/core/components/modules/dropdowns/filters/start-date.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/start-date.tsx
@@ -15,7 +15,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterStartDate: React.FC<Props> = observer((props) => {
+export const FilterStartDate = observer(function FilterStartDate(props: Props) {
   const { appliedFilters, handleUpdate, searchQuery } = props;
 
   const [previewEnabled, setPreviewEnabled] = useState(true);
@@ -69,7 +69,7 @@ export const FilterStartDate: React.FC<Props> = observer((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 italic text-placeholder">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 50df706734..6fcaf1c713 100644
--- a/apps/web/core/components/modules/dropdowns/filters/status.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/status.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { MODULE_STATUS } from "@plane/constants";
@@ -15,7 +13,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterStatus: React.FC<Props> = observer((props) => {
+export const FilterStatus = observer(function FilterStatus(props: Props) {
   const { appliedFilters, handleUpdate, searchQuery } = props;
   // states
   const [previewEnabled, setPreviewEnabled] = useState(true);
@@ -44,7 +42,7 @@ export const FilterStatus: React.FC<Props> = observer((props) => {
               />
             ))
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-11 italic text-placeholder">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 c3baa8d729..ad134d7500 100644
--- a/apps/web/core/components/modules/dropdowns/filters/target-date.tsx
+++ b/apps/web/core/components/modules/dropdowns/filters/target-date.tsx
@@ -14,7 +14,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterTargetDate: React.FC<Props> = observer((props) => {
+export const FilterTargetDate = observer(function FilterTargetDate(props: Props) {
   const { appliedFilters, handleUpdate, searchQuery } = props;
 
   const [previewEnabled, setPreviewEnabled] = useState(true);
@@ -68,7 +68,7 @@ export const FilterTargetDate: React.FC<Props> = observer((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 italic text-placeholder">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/modules/dropdowns/order-by.tsx b/apps/web/core/components/modules/dropdowns/order-by.tsx
index 5e0b35cd7e..d5d67de929 100644
--- a/apps/web/core/components/modules/dropdowns/order-by.tsx
+++ b/apps/web/core/components/modules/dropdowns/order-by.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check } from "lucide-react";
 import { MODULE_ORDER_BY_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
@@ -18,7 +16,7 @@ type Props = {
   value: TModuleOrderByOptions | undefined;
 };
 
-export const ModuleOrderByDropdown: React.FC<Props> = (props) => {
+export function ModuleOrderByDropdown(props: Props) {
   const { onChange, value } = props;
   // hooks
   const { t } = useTranslation();
@@ -31,8 +29,8 @@ export const ModuleOrderByDropdown: React.FC<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>
@@ -56,7 +54,7 @@ export const ModuleOrderByDropdown: React.FC<Props> = (props) => {
       ))}
       {!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={() => {
@@ -79,4 +77,4 @@ export const ModuleOrderByDropdown: React.FC<Props> = (props) => {
       )}
     </CustomMenu>
   );
-};
+}
diff --git a/apps/web/core/components/modules/form.tsx b/apps/web/core/components/modules/form.tsx
index 4be31cbb2f..322f62b3d6 100644
--- a/apps/web/core/components/modules/form.tsx
+++ b/apps/web/core/components/modules/form.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 // plane imports
@@ -36,7 +34,7 @@ const defaultValues: Partial<IModule> = {
   member_ids: [],
 };
 
-export const ModuleForm: React.FC<Props> = (props) => {
+export function ModuleForm(props: Props) {
   const { handleFormSubmit, handleClose, status, projectId, setActiveProject, data, isMobile = false } = props;
   // store hooks
   const { projectsWithCreatePermissions } = useUser();
@@ -103,7 +101,7 @@ export const ModuleForm: React.FC<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>
@@ -128,13 +126,13 @@ export const ModuleForm: React.FC<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-red-500">{errors?.name?.message}</span>
           </div>
           <div>
             <Controller
@@ -147,7 +145,7 @@ export const ModuleForm: React.FC<Props> = (props) => {
                   value={value}
                   onChange={onChange}
                   placeholder={t("description")}
-                  className="w-full text-base resize-none min-h-24"
+                  className="w-full text-14 resize-none min-h-24"
                   hasError={Boolean(errors?.description)}
                   tabIndex={getIndex("description")}
                 />
@@ -228,11 +226,11 @@ export const ModuleForm: React.FC<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="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
+        <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")
@@ -244,4 +242,4 @@ export const ModuleForm: React.FC<Props> = (props) => {
       </div>
     </form>
   );
-};
+}
diff --git a/apps/web/core/components/modules/gantt-chart/blocks.tsx b/apps/web/core/components/modules/gantt-chart/blocks.tsx
index 6fc10df6d2..72bd890cba 100644
--- a/apps/web/core/components/modules/gantt-chart/blocks.tsx
+++ b/apps/web/core/components/modules/gantt-chart/blocks.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
@@ -20,7 +18,7 @@ type Props = {
   moduleId: string;
 };
 
-export const ModuleGanttBlock: React.FC<Props> = observer((props) => {
+export const ModuleGanttBlock = observer(function ModuleGanttBlock(props: Props) {
   const { moduleId } = props;
   // router
   const router = useAppRouter();
@@ -49,7 +47,7 @@ export const ModuleGanttBlock: React.FC<Props> = observer((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(
@@ -57,9 +55,9 @@ export const ModuleGanttBlock: React.FC<Props> = observer((props) => {
           )
         }
       >
-        <div className="absolute left-0 top-0 h-full w-full bg-custom-background-100/50" />
+        <div className="absolute left-0 top-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 overflow-hidden truncate px-2.5 py-1 text-13 text-primary"
           style={{ left: `${SIDEBAR_WIDTH}px` }}
         >
           {moduleDetails?.name}
@@ -69,7 +67,7 @@ export const ModuleGanttBlock: React.FC<Props> = observer((props) => {
   );
 });
 
-export const ModuleGanttSidebarBlock: React.FC<Props> = observer((props) => {
+export const ModuleGanttSidebarBlock = observer(function ModuleGanttSidebarBlock(props: Props) {
   const { moduleId } = props;
   const { workspaceSlug } = useParams();
   // store hooks
@@ -84,7 +82,7 @@ export const ModuleGanttSidebarBlock: React.FC<Props> = observer((props) => {
       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/modules-list-layout.tsx b/apps/web/core/components/modules/gantt-chart/modules-list-layout.tsx
index 6e4702ec7c..4683852398 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
@@ -12,7 +12,7 @@ import { useModule } from "@/hooks/store/use-module";
 import { useModuleFilter } from "@/hooks/store/use-module-filter";
 import { useProject } from "@/hooks/store/use-project";
 
-export const ModulesListGanttChartView: React.FC = observer(() => {
+export const ModulesListGanttChartView = observer(function ModulesListGanttChartView() {
   // router
   const { workspaceSlug, projectId } = useParams();
   // store
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 102b79d748..35eac054b3 100644
--- a/apps/web/core/components/modules/links/create-update-modal.tsx
+++ b/apps/web/core/components/modules/links/create-update-modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
@@ -23,7 +21,7 @@ const defaultValues: ModuleLink = {
   url: "",
 };
 
-export const CreateUpdateModuleLinkModal: FC<Props> = (props) => {
+export function CreateUpdateModuleLinkModal(props: Props) {
   const { isOpen, handleClose, createLink, updateLink, data } = props;
   // form info
   const {
@@ -83,10 +81,10 @@ export const CreateUpdateModuleLinkModal: FC<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
@@ -110,9 +108,9 @@ export const CreateUpdateModuleLinkModal: FC<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="text-10 block">Optional</span>
               </label>
               <Controller
                 control={control}
@@ -133,15 +131,15 @@ export const CreateUpdateModuleLinkModal: FC<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="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
+          <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>
       </form>
     </ModalCore>
   );
-};
+}
diff --git a/apps/web/core/components/modules/links/list-item.tsx b/apps/web/core/components/modules/links/list-item.tsx
index 3db6d8498c..c57e5b4380 100644
--- a/apps/web/core/components/modules/links/list-item.tsx
+++ b/apps/web/core/components/modules/links/list-item.tsx
@@ -20,7 +20,7 @@ type Props = {
   link: ILinkDetails;
 };
 
-export const ModulesLinksListItem: React.FC<Props> = observer((props) => {
+export const ModulesLinksListItem = observer(function ModulesLinksListItem(props: Props) {
   const { handleDeleteLink, handleEditLink, isEditingAllowed, link } = props;
   // store hooks
   const { getUserDetails } = useMember();
@@ -42,24 +42,24 @@ export const ModulesLinksListItem: React.FC<Props> = observer((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 stroke-2 text-tertiary group-hover:text-primary shrink-0" />
           </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 p-1 hover:bg-layer-transparent-hover text-secondary rounded-sm"
               data-ph-element={MODULE_TRACKER_ELEMENTS.LIST_ITEM}
               onClick={(e) => {
                 e.preventDefault();
@@ -67,19 +67,20 @@ export const ModulesLinksListItem: React.FC<Props> = observer((props) => {
                 handleEditLink();
               }}
             >
-              <Pencil className="size-3 stroke-[1.5] text-custom-text-200" />
+              <Pencil 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 p-1 hover:bg-layer-transparent-hover text-secondary rounded-sm"
           >
-            <Copy className="h-3.5 w-3.5 stroke-[1.5]" />
-          </span>
+            <Copy 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 p-1 hover:bg-layer-transparent-hover text-secondary rounded-sm"
               data-ph-element={MODULE_TRACKER_ELEMENTS.LIST_ITEM}
               onClick={(e) => {
                 e.preventDefault();
@@ -87,13 +88,13 @@ export const ModulesLinksListItem: React.FC<Props> = observer((props) => {
                 handleDeleteLink();
               }}
             >
-              <Trash2 className="size-3 stroke-[1.5] text-custom-text-200" />
+              <Trash2 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="flex items-center gap-1.5 mt-0.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 fac215e59f..cd0a3c93a2 100644
--- a/apps/web/core/components/modules/links/list.tsx
+++ b/apps/web/core/components/modules/links/list.tsx
@@ -1,4 +1,3 @@
-"use client";
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 // plane types
@@ -15,7 +14,7 @@ type Props = {
   moduleId: string;
 };
 
-export const ModuleLinksList: React.FC<Props> = observer((props) => {
+export const ModuleLinksList = observer(function ModuleLinksList(props: Props) {
   const { moduleId, handleDeleteLink, handleEditLink, disabled } = props;
   // store hooks
   const { getModuleById } = useModule();
diff --git a/apps/web/core/components/modules/modal.tsx b/apps/web/core/components/modules/modal.tsx
index d344f472ee..9fad3c7630 100644
--- a/apps/web/core/components/modules/modal.tsx
+++ b/apps/web/core/components/modules/modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useForm } from "react-hook-form";
@@ -36,7 +34,7 @@ const defaultValues: Partial<IModule> = {
   member_ids: [],
 };
 
-export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
+export const CreateUpdateModuleModal = observer(function CreateUpdateModuleModal(props: Props) {
   const { isOpen, onClose, data, workspaceSlug, projectId } = props;
   // states
   const [activeProject, setActiveProject] = useState<string | null>(null);
diff --git a/apps/web/core/components/modules/module-card-item.tsx b/apps/web/core/components/modules/module-card-item.tsx
index 6318fb759b..eb519a1b37 100644
--- a/apps/web/core/components/modules/module-card-item.tsx
+++ b/apps/web/core/components/modules/module-card-item.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { SyntheticEvent } from "react";
 import React, { useRef } from "react";
 import { observer } from "mobx-react";
@@ -41,7 +39,7 @@ type Props = {
   moduleId: string;
 };
 
-export const ModuleCardItem: React.FC<Props> = observer((props) => {
+export const ModuleCardItem = observer(function ModuleCardItem(props: Props) {
   const { moduleId } = props;
   // refs
   const parentRef = useRef(null);
@@ -211,7 +209,7 @@ export const ModuleCardItem: React.FC<Props> = observer((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 && (
@@ -222,16 +220,16 @@ export const ModuleCardItem: React.FC<Props> = observer((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">
@@ -239,14 +237,14 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
                 </span>
               ) : (
                 <Tooltip tooltipContent="No lead">
-                  <SquareUser className="h-4 w-4 mx-1 text-custom-text-300 " />
+                  <SquareUser className="h-4 w-4 mx-1 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 f07d5638b6..e59dd65c21 100644
--- a/apps/web/core/components/modules/module-layout-icon.tsx
+++ b/apps/web/core/components/modules/module-layout-icon.tsx
@@ -11,7 +11,7 @@ interface ILayoutIcon {
   withContainer?: boolean;
 }
 
-export const ModuleLayoutIcon: React.FC<ILayoutIcon> = (props) => {
+export function ModuleLayoutIcon(props: ILayoutIcon) {
   const { layoutType, className = "", containerClassName = "", size = 14, withContainer = false } = props;
 
   // get Layout icon
@@ -27,7 +27,9 @@ export const ModuleLayoutIcon: React.FC<ILayoutIcon> = (props) => {
   return (
     <>
       {withContainer ? (
-        <div className={cn("flex items-center justify-center border rounded p-0.5 flex-shrink-0", containerClassName)}>
+        <div
+          className={cn("flex items-center justify-center border rounded-sm p-0.5 flex-shrink-0", containerClassName)}
+        >
           <Icon width={size} height={size} className={cn(className)} />
         </div>
       ) : (
@@ -35,4 +37,4 @@ export const ModuleLayoutIcon: React.FC<ILayoutIcon> = (props) => {
       )}
     </>
   );
-};
+}
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 a6a0b34ebc..16495004f4 100644
--- a/apps/web/core/components/modules/module-list-item-action.tsx
+++ b/apps/web/core/components/modules/module-list-item-action.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
@@ -42,7 +40,7 @@ type Props = {
   parentRef: React.RefObject<HTMLDivElement>;
 };
 
-export const ModuleListItemAction: FC<Props> = observer((props) => {
+export const ModuleListItemAction = observer(function ModuleListItemAction(props: Props) {
   const { moduleId, moduleDetails, parentRef } = props;
   // router
   const { workspaceSlug, projectId } = useParams();
@@ -175,7 +173,7 @@ export const ModuleListItemAction: FC<Props> = observer((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={{
@@ -211,7 +209,7 @@ export const ModuleListItemAction: FC<Props> = observer((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 705aa8e8a3..e0f7c2c12e 100644
--- a/apps/web/core/components/modules/module-list-item.tsx
+++ b/apps/web/core/components/modules/module-list-item.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname, useSearchParams } from "next/navigation";
@@ -21,7 +19,7 @@ type Props = {
   moduleId: string;
 };
 
-export const ModuleListItem: React.FC<Props> = observer((props) => {
+export const ModuleListItem = observer(function ModuleListItem(props: Props) {
   const { moduleId } = props;
   // refs
   const parentRef = useRef(null);
@@ -74,14 +72,14 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
         <CircularProgressIndicator size={30} percentage={progress} strokeWidth={3}>
           {completedModuleCheck ? (
             progress === 100 ? (
-              <Check className="h-3 w-3 stroke-[2] text-custom-primary-100" />
+              <Check 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" />
+            <Check 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>
       }
@@ -90,7 +88,7 @@ export const ModuleListItem: React.FC<Props> = observer((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 8b54546e12..8aa0f21771 100644
--- a/apps/web/core/components/modules/module-peek-overview.tsx
+++ b/apps/web/core/components/modules/module-peek-overview.tsx
@@ -14,7 +14,11 @@ type Props = {
   isArchived?: boolean;
 };
 
-export const ModulePeekOverview: React.FC<Props> = observer(({ projectId, workspaceSlug, isArchived = false }) => {
+export const ModulePeekOverview = observer(function ModulePeekOverview({
+  projectId,
+  workspaceSlug,
+  isArchived = false,
+}: Props) {
   // router
   const router = useAppRouter();
   const pathname = usePathname();
@@ -41,7 +45,7 @@ export const ModulePeekOverview: React.FC<Props> = observer(({ projectId, worksp
       {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="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 absolute md:relative right-0 z-[9]"
           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 c0f193073d..6aa27c15e8 100644
--- a/apps/web/core/components/modules/module-status-dropdown.tsx
+++ b/apps/web/core/components/modules/module-status-dropdown.tsx
@@ -14,7 +14,7 @@ type Props = {
   handleModuleDetailsChange: (payload: Partial<IModule>) => Promise<void>;
 };
 
-export const ModuleStatusDropdown: FC<Props> = observer((props: Props) => {
+export const ModuleStatusDropdown = observer(function ModuleStatusDropdown(props: Props) {
   const { isDisabled, moduleDetails, handleModuleDetailsChange } = props;
   const { t } = useTranslation();
   const moduleStatus = MODULE_STATUS.find((status) => status.value === moduleDetails.status);
@@ -25,7 +25,7 @@ export const ModuleStatusDropdown: FC<Props> = observer((props: 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 d6b9d652a9..ef2e4e6268 100644
--- a/apps/web/core/components/modules/module-view-header.tsx
+++ b/apps/web/core/components/modules/module-view-header.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
@@ -26,9 +24,10 @@ 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: FC = observer(() => {
+export const ModuleViewHeader = observer(function ModuleViewHeader() {
   // refs
   const inputRef = useRef<HTMLInputElement>(null);
   // router
@@ -95,32 +94,32 @@ export const ModuleViewHeader: FC = observer(() => {
   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 sm:flex items-center gap-2 self-end">
       <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 p-"
             onClick={() => {
               setIsSearchOpen(true);
               inputRef.current?.focus();
             }}
-          >
-            <Search className="h-3.5 w-3.5" />
-          </button>
+            icon={Search}
+          />
         )}
         <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 items-center justify-start gap-1 rounded-md border border-transparent bg-surface-1 text-placeholder 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,
+              "w-64 px-2.5 py-1.5 border-subtle 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"
+            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)}
@@ -140,7 +139,6 @@ export const ModuleViewHeader: FC = observer(() => {
           )}
         </div>
       </div>
-
       <ModuleOrderByDropdown
         value={displayFilters?.order_by}
         onChange={(val) => {
@@ -167,15 +165,16 @@ export const ModuleViewHeader: FC = observer(() => {
           memberIds={workspaceMemberIds ?? undefined}
         />
       </FiltersDropdown>
-      <div className="hidden md:flex items-center gap-1 rounded bg-custom-background-80 p-1">
+      <div className="hidden md:flex items-center gap-1 rounded-sm bg-layer-3 p-1">
         {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 75f83f2810..3da71dcc71 100644
--- a/apps/web/core/components/modules/modules-list-view.tsx
+++ b/apps/web/core/components/modules/modules-list-view.tsx
@@ -18,7 +18,7 @@ import { useModule } from "@/hooks/store/use-module";
 import { useModuleFilter } from "@/hooks/store/use-module-filter";
 import { useUserPermissions } from "@/hooks/store/user";
 
-export const ModulesListView: React.FC = observer(() => {
+export const ModulesListView = observer(function ModulesListView() {
   // router
   const { workspaceSlug, projectId } = useParams();
   const searchParams = useSearchParams();
diff --git a/apps/web/core/components/modules/quick-actions.tsx b/apps/web/core/components/modules/quick-actions.tsx
index cc7c470a5d..711cb603ab 100644
--- a/apps/web/core/components/modules/quick-actions.tsx
+++ b/apps/web/core/components/modules/quick-actions.tsx
@@ -1,10 +1,7 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
+import { MoreHorizontal } from "lucide-react";
 
-// icons
-import { ArchiveRestoreIcon, ExternalLink, LinkIcon, Pencil, Trash2 } from "lucide-react";
 // plane imports
 import {
   EUserPermissions,
@@ -13,13 +10,13 @@ import {
   MODULE_TRACKER_EVENTS,
 } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-// ui
-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";
 // 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";
@@ -36,7 +33,7 @@ type Props = {
   customClassName?: string;
 };
 
-export const ModuleQuickActions: React.FC<Props> = observer((props) => {
+export const ModuleQuickActions = observer(function ModuleQuickActions(props: Props) {
   const { parentRef, moduleId, projectId, workspaceSlug, customClassName } = props;
   // router
   const router = useAppRouter();
@@ -52,7 +49,6 @@ export const ModuleQuickActions: React.FC<Props> = observer((props) => {
   const { t } = useTranslation();
   // derived values
   const moduleDetails = getModuleById(moduleId);
-  const isArchived = !!moduleDetails?.archived_at;
   // auth
   const isEditingAllowed = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
@@ -61,9 +57,6 @@ export const ModuleQuickActions: React.FC<Props> = observer((props) => {
     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(() => {
@@ -75,12 +68,6 @@ export const ModuleQuickActions: React.FC<Props> = observer((props) => {
     });
   const handleOpenInNewTab = () => window.open(`/${moduleLink}`, "_blank");
 
-  const handleEditModule = () => {
-    setEditModal(true);
-  };
-
-  const handleArchiveModule = () => setArchiveModuleModal(true);
-
   const handleRestoreModule = async () =>
     await restoreModule(workspaceSlug, projectId, moduleId)
       .then(() => {
@@ -108,68 +95,37 @@ export const ModuleQuickActions: React.FC<Props> = observer((props) => {
         });
       });
 
-  const handleDeleteModule = () => {
-    setDeleteModal(true);
-  };
+  // 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,
+  });
 
-  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,
-    },
-  ];
+  // 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: TContextMenuItem[] = MENU_ITEMS.map((item) => ({
-    ...item,
-    onClick: () => {
-      captureClick({
-        elementName: MODULE_TRACKER_ELEMENTS.CONTEXT_MENU,
-      });
-      item.action();
-    },
-  }));
+  const CONTEXT_MENU_ITEMS = MENU_ITEMS.map(function CONTEXT_MENU_ITEMS(item) {
+    return {
+      ...item,
+
+      onClick: () => {
+        captureClick({
+          elementName: MODULE_TRACKER_ELEMENTS.CONTEXT_MENU,
+        });
+        item.action();
+      },
+    };
+  });
 
   return (
     <>
@@ -190,10 +146,16 @@ export const ModuleQuickActions: React.FC<Props> = observer((props) => {
             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 (
@@ -208,19 +170,19 @@ export const ModuleQuickActions: React.FC<Props> = observer((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("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("text-tertiary whitespace-pre-line", {
+                      "text-placeholder": item.disabled,
                     })}
                   >
                     {item.description}
diff --git a/apps/web/core/components/modules/select/status.tsx b/apps/web/core/components/modules/select/status.tsx
index e89fe2f7be..394dbcf1fc 100644
--- a/apps/web/core/components/modules/select/status.tsx
+++ b/apps/web/core/components/modules/select/status.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 
 // react hook form
@@ -20,7 +18,7 @@ type Props = {
   tabIndex?: number;
 };
 
-export const ModuleStatusSelect: React.FC<Props> = ({ control, error, tabIndex }) => {
+export function ModuleStatusSelect({ control, error, tabIndex }: Props) {
   const { t } = useTranslation();
   return (
     <Controller
@@ -33,14 +31,14 @@ export const ModuleStatusSelect: React.FC<Props> = ({ control, error, tabIndex }
           <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 text-11 py-0.5 ${error ? "text-red-500" : ""}`}>
                 {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-red-500" : "text-secondary"}`} />
                 )}
                 {(selectedValue && t(selectedValue?.i18n_label)) ?? (
-                  <span className={`${error ? "text-red-500" : "text-custom-text-200"}`}>Status</span>
+                  <span className={`${error ? "text-red-500" : "text-secondary"}`}>Status</span>
                 )}
               </div>
             }
@@ -61,4 +59,4 @@ export const ModuleStatusSelect: React.FC<Props> = ({ control, error, tabIndex }
       }}
     />
   );
-};
+}
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 83e6cf6dd8..58ca853b81 100644
--- a/apps/web/core/components/modules/sidebar-select/select-status.tsx
+++ b/apps/web/core/components/modules/sidebar-select/select-status.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 // react
 import React from "react";
 // react-hook-form
@@ -21,11 +19,11 @@ type Props = {
   watch: UseFormWatch<Partial<IModule>>;
 };
 
-export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, watch }) => {
+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>
@@ -36,7 +34,7 @@ export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, w
           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={{
@@ -65,4 +63,4 @@ export const SidebarStatusSelect: React.FC<Props> = ({ control, submitChanges, w
       </div>
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/navigation/app-rail-root.tsx b/apps/web/core/components/navigation/app-rail-root.tsx
new file mode 100644
index 0000000000..097c6165b5
--- /dev/null
+++ b/apps/web/core/components/navigation/app-rail-root.tsx
@@ -0,0 +1,84 @@
+"use client";
+import { observer } from "mobx-react";
+import { useParams, usePathname } from "next/navigation";
+import { Check, SettingsIcon } from "lucide-react";
+import { ContextMenu } from "@plane/propel/context-menu";
+import { cn } from "@plane/utils";
+// components
+import { AppSidebarItem } from "@/components/sidebar/sidebar-item";
+// hooks
+import { useAppRailPreferences } from "@/hooks/use-navigation-preferences";
+import { useAppRailVisibility } from "@/lib/app-rail/context";
+// plane web imports
+import { DesktopSidebarWorkspaceMenu } from "@/plane-web/components/desktop";
+// local imports
+import { AppSidebarItemsRoot } from "./items-root";
+
+export const AppRailRoot = observer(() => {
+  // router
+  const { workspaceSlug } = useParams();
+  const pathname = usePathname();
+  // preferences
+  const { preferences, updateDisplayMode } = useAppRailPreferences();
+  const { isCollapsed, toggleAppRail } = useAppRailVisibility();
+
+  const isSettingsPath = pathname.includes(`/${workspaceSlug}/settings`);
+  const showLabel = preferences.displayMode === "icon_with_label";
+  const railWidth = showLabel ? "3.75rem" : "3rem";
+
+  return (
+    <div
+      className="h-full flex-shrink-0 bg-canvas transition-all ease-in-out duration-300 z-[26]"
+      style={{
+        width: railWidth,
+        display: "block",
+      }}
+    >
+      <ContextMenu>
+        <ContextMenu.Trigger className="h-full">
+          <div className="flex flex-col justify-between gap-4 px-2 py-3 h-full">
+            <div
+              className={cn("flex flex-col", {
+                "gap-4": showLabel,
+                "gap-3": !showLabel,
+              })}
+            >
+              <DesktopSidebarWorkspaceMenu />
+              <AppSidebarItemsRoot showLabel={showLabel} />
+              <div className="border-t border-strong mx-2" />
+              <AppSidebarItem
+                item={{
+                  label: "Settings",
+                  icon: <SettingsIcon className="size-5" />,
+                  href: `/${workspaceSlug}/settings`,
+                  isActive: isSettingsPath,
+                  showLabel,
+                }}
+              />
+            </div>
+          </div>
+        </ContextMenu.Trigger>
+        <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-11">Icon only</span>
+                {preferences.displayMode === "icon_only" && <Check 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-11">Icon with name</span>
+                {preferences.displayMode === "icon_with_label" && <Check className="size-3.5" />}
+              </div>
+            </ContextMenu.Item>
+            <ContextMenu.Separator />
+            <ContextMenu.Item onClick={toggleAppRail}>
+              <span className="text-11">{isCollapsed ? "Dock App Rail" : "Undock App Rail"}</span>
+            </ContextMenu.Item>
+          </ContextMenu.Content>
+        </ContextMenu.Portal>
+      </ContextMenu>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/navigation/customize-navigation-dialog.tsx b/apps/web/core/components/navigation/customize-navigation-dialog.tsx
new file mode 100644
index 0000000000..c453e91100
--- /dev/null
+++ b/apps/web/core/components/navigation/customize-navigation-dialog.tsx
@@ -0,0 +1,345 @@
+import type { FC } from "react";
+import { useCallback, useMemo, useState } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import { GripVertical, X } from "lucide-react";
+// plane imports
+import { WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS, EUserPermissionsLevel } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Checkbox, EModalPosition, EModalWidth, ModalCore, Sortable } from "@plane/ui";
+import { cn } from "@plane/utils";
+// hooks
+import { useUserPermissions } from "@/hooks/store/user";
+import {
+  usePersonalNavigationPreferences,
+  useProjectNavigationPreferences,
+  useWorkspaceNavigationPreferences,
+} from "@/hooks/use-navigation-preferences";
+// helpers
+import { getSidebarNavigationItemIcon } from "@/plane-web/components/workspace/sidebar/helper";
+// types
+import type { TPersonalNavigationItemKey } from "@/types/navigation-preferences";
+
+type TCustomizeNavigationDialogProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+type TWorkspaceNavigationItem = {
+  key: string;
+  labelTranslationKey: string;
+  isPinned: boolean;
+  sortOrder: number;
+};
+
+const PERSONAL_ITEMS: Array<{ key: TPersonalNavigationItemKey; labelTranslationKey: string }> = [
+  { key: "stickies", labelTranslationKey: "sidebar.stickies" },
+  { key: "your_work", labelTranslationKey: "sidebar.your_work" },
+  { key: "drafts", labelTranslationKey: "drafts" },
+];
+
+export const CustomizeNavigationDialog = observer(function CustomizeNavigationDialog(
+  props: TCustomizeNavigationDialogProps
+) {
+  const { isOpen, onClose } = props;
+  const { t } = useTranslation();
+
+  // router
+  const { workspaceSlug } = useParams();
+
+  // store hooks
+  const { allowPermissions } = useUserPermissions();
+  const {
+    preferences: personalPreferences,
+    togglePersonalItem,
+    updatePersonalItemOrder,
+  } = usePersonalNavigationPreferences();
+  const {
+    preferences: projectPreferences,
+    updateNavigationMode,
+    updateShowLimitedProjects,
+    updateLimitedProjectsCount,
+  } = useProjectNavigationPreferences();
+  const {
+    preferences: workspacePreferences,
+    toggleWorkspaceItem,
+    updateWorkspaceItemOrder,
+  } = useWorkspaceNavigationPreferences();
+
+  // local state for limited projects count input
+  const [projectCountInput, setProjectCountInput] = useState(projectPreferences.limitedProjectsCount.toString());
+
+  // Filter personal items by feature flags
+  const filteredPersonalItems = PERSONAL_ITEMS;
+
+  // Filter workspace items by permissions and feature flags, then get pinned/unpinned items
+  const workspaceItems = useMemo(() => {
+    const items = WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS.filter((item) => {
+      // Permission check
+      const hasPermission = allowPermissions(
+        item.access,
+        EUserPermissionsLevel.WORKSPACE,
+        workspaceSlug?.toString() || ""
+      );
+      return hasPermission;
+    }).map((item) => {
+      // Get pinned status and sort order from localStorage
+      const preference = workspacePreferences.items[item.key];
+      const isPinned = preference?.is_pinned ?? false;
+      const sortOrder = preference?.sort_order ?? 0;
+
+      return {
+        key: item.key,
+        labelTranslationKey: item.labelTranslationKey,
+        isPinned,
+        sortOrder,
+      };
+    });
+
+    return items.sort((a, b) => a.sortOrder - b.sortOrder);
+  }, [workspaceSlug, allowPermissions, workspacePreferences]);
+
+  // Handle checkbox toggle
+  const handleWorkspaceItemToggle = useCallback(
+    (itemKey: string, checked: boolean) => {
+      toggleWorkspaceItem(itemKey, checked);
+    },
+    [toggleWorkspaceItem]
+  );
+
+  // Handle reorder of pinned workspace items
+  const handleReorder = useCallback(
+    (newData: TWorkspaceNavigationItem[]) => {
+      const itemsWithOrder = newData.map((item, index) => ({
+        key: item.key,
+        sortOrder: index,
+      }));
+      updateWorkspaceItemOrder(itemsWithOrder);
+    },
+    [updateWorkspaceItemOrder]
+  );
+
+  // Handle reorder of enabled personal items
+  const handlePersonalReorder = useCallback(
+    (newData: Array<{ key: TPersonalNavigationItemKey; labelTranslationKey: string }>) => {
+      const itemsWithOrder = newData.map((item, index) => ({
+        key: item.key,
+        sortOrder: index,
+      }));
+      updatePersonalItemOrder(itemsWithOrder);
+    },
+    [updatePersonalItemOrder]
+  );
+
+  // Separate personal items into enabled/disabled
+  const personalItems = useMemo(() => {
+    const items = filteredPersonalItems.map((item) => {
+      const itemState = personalPreferences.items[item.key];
+      const isEnabled = typeof itemState === "boolean" ? itemState : (itemState?.enabled ?? true);
+      const sortOrder = typeof itemState === "boolean" ? 0 : (itemState?.sort_order ?? 0);
+
+      return {
+        ...item,
+        isEnabled,
+        sortOrder,
+      };
+    });
+
+    return items.sort((a, b) => a.sortOrder - b.sortOrder);
+  }, [personalPreferences, filteredPersonalItems]);
+
+  // Prevent typing invalid characters in number input
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    // Block: e, E, +, -, .
+    if (["e", "E", "+", "-", "."].includes(e.key)) {
+      e.preventDefault();
+    }
+  };
+
+  // Handle project count input change
+  const handleProjectCountChange = (value: string) => {
+    // Strip any non-digit characters
+    const cleanedValue = value.replace(/\D/g, "");
+    setProjectCountInput(cleanedValue);
+
+    // Parse and validate the value
+    const numValue = parseInt(cleanedValue, 10);
+
+    // If valid number, enforce minimum of 1
+    if (!isNaN(numValue)) {
+      const validValue = Math.max(1, numValue);
+      updateLimitedProjectsCount(validValue);
+    }
+  };
+
+  return (
+    <ModalCore isOpen={isOpen} handleClose={onClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
+      <div className="flex flex-col max-h-[90vh] bg-surface-1 rounded-lg">
+        {/* Header */}
+        <div className="flex justify-between px-6 pt-4">
+          <div>
+            <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-sm hover:bg-layer-1 text-placeholder"
+            aria-label={t("close")}
+          >
+            <X className="size-4" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto px-6 py-4 space-y-4">
+          {/* Personal Section */}
+          <div className="flex flex-col gap-2">
+            <h3 className="text-13 font-semibold text-placeholder">{t("personal")}</h3>
+            <div className="border border-subtle rounded-md py-2 bg-surface-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-surface-2 transition-all duration-200">
+                    <GripVertical className="size-4 text-placeholder cursor-grab active:cursor-grabbing transition-colors" />
+                    <Checkbox
+                      checked={!!personalPreferences.items[item.key]?.enabled}
+                      onChange={(e) => togglePersonalItem(item.key, e.target.checked)}
+                    />
+                    <div className="flex items-center gap-2 flex-1">
+                      {getSidebarNavigationItemIcon(item.key)}
+                      <label className="text-13 text-primary flex-1 cursor-pointer">
+                        {t(item.labelTranslationKey)}
+                      </label>
+                    </div>
+                  </div>
+                )}
+              />
+            </div>
+          </div>
+
+          {/* Workspace Section */}
+          <div className="flex flex-col gap-2">
+            <h3 className="text-13 font-semibold text-placeholder">{t("workspace")}</h3>
+            <div className="border border-subtle rounded-md py-2 bg-surface-2">
+              {/* Pinned Items - Draggable */}
+              <Sortable
+                data={workspaceItems}
+                onChange={handleReorder}
+                keyExtractor={(item) => item.key}
+                id="workspace-pinned-items"
+                render={(item) => {
+                  const icon = getSidebarNavigationItemIcon(item.key);
+                  return (
+                    <div className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-surface-2 group transition-all duration-200">
+                      <GripVertical className="size-4 text-placeholder cursor-grab active:cursor-grabbing transition-colors" />
+                      <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">
+                        {icon}
+                        <span className="text-13 text-primary">{t(item.labelTranslationKey)}</span>
+                      </div>
+                    </div>
+                  );
+                }}
+              />
+            </div>
+          </div>
+
+          {/* Projects Section */}
+          <div className="flex flex-col gap-2">
+            <h3 className="text-13 font-semibold text-placeholder">{t("projects")}</h3>
+
+            <div className="border border-subtle rounded-md px-2 py-2 bg-surface-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-surface-2 cursor-pointer">
+                    <input
+                      type="radio"
+                      name="navigation-mode"
+                      value="accordion"
+                      checked={projectPreferences.navigationMode === "accordion"}
+                      onChange={() => updateNavigationMode("accordion")}
+                      className="size-4 text-accent-primary focus:ring-accent-strong mt-1"
+                    />
+                    <div className="flex-1">
+                      <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-surface-2 cursor-pointer">
+                    <input
+                      type="radio"
+                      name="navigation-mode"
+                      value="horizontal"
+                      checked={projectPreferences.navigationMode === "horizontal"}
+                      onChange={() => updateNavigationMode("horizontal")}
+                      className="size-4 text-accent-primary focus:ring-accent-strong mt-1"
+                    />
+                    <div className="flex-1">
+                      <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>
+                  </label>
+                </div>
+
+                {/* Limited Projects Checkbox */}
+                <div className="space-y-1">
+                  <label className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-surface-2 cursor-pointer">
+                    <Checkbox
+                      checked={projectPreferences.showLimitedProjects}
+                      onChange={(e) => updateShowLimitedProjects(e.target.checked)}
+                    />
+                    <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 pb-1.5">
+                          <label className="text-11 text-secondary w-full">{t("enter_number_of_projects")}</label>
+                          <input
+                            type="number"
+                            min="1"
+                            step="1"
+                            value={projectCountInput}
+                            onKeyDown={handleKeyDown}
+                            onChange={(e) => handleProjectCountChange(e.target.value)}
+                            className={cn(
+                              "w-full px-2 py-1 text-13 rounded-md",
+                              "bg-surface-2 border",
+                              "text-secondary",
+                              parseInt(projectCountInput) >= 1
+                                ? "border-strong focus:border-accent-strong focus:ring-1 focus:ring-accent-strong"
+                                : "border-red-500 focus:border-red-500 focus:ring-1 focus:ring-red-500"
+                            )}
+                          />
+                        </div>
+                        {parseInt(projectCountInput) < 1 && projectCountInput !== "" && (
+                          <span className="text-11 text-red-500 pl-0.5">Minimum value is 1</span>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ModalCore>
+  );
+});
diff --git a/apps/web/core/components/navigation/index.ts b/apps/web/core/components/navigation/index.ts
new file mode 100644
index 0000000000..2494d65578
--- /dev/null
+++ b/apps/web/core/components/navigation/index.ts
@@ -0,0 +1,5 @@
+export * from "./app-rail-root";
+export * from "./tab-navigation-root";
+export * from "./top-nav-power-k";
+export * from "./use-active-tab";
+export * from "./use-project-actions";
diff --git a/apps/web/core/components/navigation/items-root.tsx b/apps/web/core/components/navigation/items-root.tsx
new file mode 100644
index 0000000000..da36dca5d8
--- /dev/null
+++ b/apps/web/core/components/navigation/items-root.tsx
@@ -0,0 +1,25 @@
+// components/AppSidebarItemsRoot.tsx
+
+import React from "react";
+import type { AppSidebarItemData } from "@/components/sidebar/sidebar-item";
+import { AppSidebarItem } from "@/components/sidebar/sidebar-item";
+import { withDockItems } from "@/plane-web/components/app-rail/app-rail-hoc";
+
+type Props = {
+  dockItems: (AppSidebarItemData & { shouldRender: boolean })[];
+  showLabel?: boolean;
+};
+
+function Component({ dockItems, showLabel = true }: Props) {
+  return (
+    <>
+      {dockItems
+        .filter((item) => item.shouldRender)
+        .map((item) => (
+          <AppSidebarItem key={item.label} item={{ ...item, showLabel }} variant="link" />
+        ))}
+    </>
+  );
+}
+
+export const AppSidebarItemsRoot = withDockItems(Component);
diff --git a/apps/web/core/components/navigation/project-actions-menu.tsx b/apps/web/core/components/navigation/project-actions-menu.tsx
new file mode 100644
index 0000000000..b6cdf54c83
--- /dev/null
+++ b/apps/web/core/components/navigation/project-actions-menu.tsx
@@ -0,0 +1,112 @@
+import type { FC } from "react";
+import { useState, useRef } from "react";
+import { useNavigate } from "react-router";
+import { LinkIcon, LogOut, MoreHorizontal, Settings, Share2, ArchiveIcon } from "lucide-react";
+// plane imports
+import { MEMBER_TRACKER_ELEMENTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { CustomMenu } from "@plane/ui";
+
+type Props = {
+  workspaceSlug: string;
+  project: {
+    id: string;
+  };
+  isAdmin: boolean;
+  isAuthorized: boolean;
+  onCopyText: () => void;
+  onLeaveProject: () => void;
+  onPublishModal: () => void;
+};
+
+export function ProjectActionsMenu({
+  workspaceSlug,
+  project,
+  isAdmin,
+  isAuthorized,
+  onCopyText,
+  onLeaveProject,
+  onPublishModal,
+}: Props) {
+  // states
+  const [isMenuActive, setIsMenuActive] = useState(false);
+  // translation
+  const { t } = useTranslation();
+  // refs
+  const actionSectionRef = useRef<HTMLDivElement | null>(null);
+  // router
+  const navigate = useNavigate();
+
+  return (
+    <CustomMenu
+      customButton={
+        <span
+          ref={actionSectionRef}
+          className="grid place-items-center p-0.5 text-placeholder hover:bg-layer-1 rounded-sm"
+          onClick={() => setIsMenuActive(!isMenuActive)}
+        >
+          <MoreHorizontal className="size-4" />
+        </span>
+      }
+      className="flex-shrink-0"
+      customButtonClassName="grid place-items-center"
+      placement="bottom-start"
+      ariaLabel={t("aria_labels.projects_sidebar.toggle_quick_actions_menu")}
+      useCaptureForOutsideClick
+      closeOnSelect
+      onMenuClose={() => setIsMenuActive(false)}
+    >
+      {/* Publish project settings */}
+      {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-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>
+        </CustomMenu.MenuItem>
+      )}
+      <CustomMenu.MenuItem onClick={onCopyText}>
+        <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 && (
+        <CustomMenu.MenuItem
+          onClick={() => {
+            navigate(`/${workspaceSlug}/projects/${project?.id}/archives/issues`);
+          }}
+        >
+          <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>
+        </CustomMenu.MenuItem>
+      )}
+      <CustomMenu.MenuItem
+        onClick={() => {
+          navigate(`/${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={onLeaveProject}
+          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>
+  );
+}
diff --git a/apps/web/core/components/navigation/project-header-button.tsx b/apps/web/core/components/navigation/project-header-button.tsx
new file mode 100644
index 0000000000..6da1b2d461
--- /dev/null
+++ b/apps/web/core/components/navigation/project-header-button.tsx
@@ -0,0 +1,30 @@
+import type { TPartialProject } from "@/plane-web/types";
+// plane propel imports
+import { Logo } from "@plane/propel/emoji-icon-picker";
+import { ChevronDownIcon } from "@plane/propel/icons";
+import { Tooltip } from "@plane/propel/tooltip";
+
+type TProjectHeaderButtonProps = {
+  project: TPartialProject;
+};
+
+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-layer-1 flex items-center justify-center flex-shrink-0">
+          <Logo logo={project.logo_props} size={16} />
+        </div>
+        <div className="relative flex-1 min-w-0 hover:rounded">
+          <p className="truncate text-14 font-medium text-secondary 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 to-surface-2 rounded-r" />
+              <ChevronDownIcon className="relative z-10 size-4 text-tertiary" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Tooltip>
+  );
+}
diff --git a/apps/web/core/components/navigation/project-header.tsx b/apps/web/core/components/navigation/project-header.tsx
new file mode 100644
index 0000000000..ea87a87ac8
--- /dev/null
+++ b/apps/web/core/components/navigation/project-header.tsx
@@ -0,0 +1,106 @@
+import { useCallback, useMemo } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { ProjectIcon } from "@plane/propel/icons";
+import type { ICustomSearchSelectOption } from "@plane/types";
+import { CustomSearchSelect } from "@plane/ui";
+// hooks
+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 imports
+import { SwitcherLabel } from "../common/switcher-label";
+import { ProjectHeaderButton } from "./project-header-button";
+import { getTabUrl } from "./tab-navigation-utils";
+import { useTabPreferences } from "./use-tab-preferences";
+
+type TProjectHeaderProps = {
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const ProjectHeader = observer(function ProjectHeader(props: TProjectHeaderProps) {
+  const { workspaceSlug, projectId } = props;
+  // router
+  const router = useAppRouter();
+  // store hooks
+  const { joinedProjectIds, getPartialProjectById } = useProject();
+  const { allowPermissions } = useUserPermissions();
+
+  // Get current project details
+  const currentProjectDetails = getPartialProjectById(projectId);
+
+  // Get available navigation items for this project
+  const navigationItems = useNavigationItems({
+    workspaceSlug: workspaceSlug,
+    projectId,
+    project: currentProjectDetails,
+    allowPermissions,
+  });
+
+  // Get preferences from hook
+  const { tabPreferences } = useTabPreferences(workspaceSlug, projectId);
+
+  // Memoize available tab keys
+  const availableTabKeys = useMemo(() => navigationItems.map((item) => item.key), [navigationItems]);
+
+  // Memoize validated default tab key
+  const validatedDefaultTabKey = useMemo(
+    () =>
+      availableTabKeys.includes(tabPreferences.defaultTab)
+        ? tabPreferences.defaultTab
+        : availableTabKeys[0] || "work_items",
+    [availableTabKeys, tabPreferences.defaultTab]
+  );
+
+  // Memoize switcher options to prevent recalculation on every render
+  const switcherOptions = useMemo<ICustomSearchSelectOption[]>(
+    () =>
+      joinedProjectIds
+        .map((id): ICustomSearchSelectOption | null => {
+          const project = getPartialProjectById(id);
+          if (!project) return null;
+
+          return {
+            value: id,
+            query: project.name,
+            content: (
+              <SwitcherLabel
+                name={project.name}
+                logo_props={project.logo_props}
+                LabelIcon={ProjectIcon}
+                type="material"
+              />
+            ),
+          };
+        })
+        .filter((option): option is ICustomSearchSelectOption => option !== null),
+    [joinedProjectIds, getPartialProjectById]
+  );
+
+  // Memoize onChange handler
+  const handleProjectChange = useCallback(
+    (value: string) => {
+      if (value !== currentProjectDetails?.id) {
+        router.push(getTabUrl(workspaceSlug, value, validatedDefaultTabKey));
+      }
+    },
+    [currentProjectDetails?.id, router, workspaceSlug, validatedDefaultTabKey]
+  );
+
+  // Early return if no project details
+  if (!currentProjectDetails) return null;
+
+  return (
+    <CustomSearchSelect
+      options={switcherOptions}
+      value={currentProjectDetails.id}
+      onChange={handleProjectChange}
+      customButton={currentProjectDetails ? <ProjectHeaderButton project={currentProjectDetails} /> : null}
+      className="h-full rounded"
+      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
new file mode 100644
index 0000000000..efeed1d4df
--- /dev/null
+++ b/apps/web/core/components/navigation/tab-navigation-overflow-menu.tsx
@@ -0,0 +1,94 @@
+import React from "react";
+import { Link } from "react-router";
+import { MoreHorizontal, Pin } from "lucide-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { SetAsDefaultIcon } from "@plane/propel/icons";
+import { Menu } from "@plane/propel/menu";
+import { Tooltip } from "@plane/propel/tooltip";
+import { cn } from "@plane/utils";
+// local imports
+import type { TNavigationItem } from "./tab-navigation-root";
+import type { TTabPreferences } from "./tab-navigation-utils";
+
+type Props = {
+  overflowItems: TNavigationItem[];
+  isActive: (item: TNavigationItem) => boolean;
+  tabPreferences: TTabPreferences;
+  onToggleDefault: (tabKey: string) => void;
+  onShow: (tabKey: string) => void;
+};
+
+/**
+ * Overflow menu for tab navigation items
+ * Displays items that don't fit in the visible area, with action icons
+ * Shows "Eye" icon for user-hidden items, "Set as default" icon for all items
+ */
+export function TabNavigationOverflowMenu({ overflowItems, isActive, tabPreferences, onToggleDefault, onShow }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <Menu
+      ellipsis
+      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-layer-1 transition-colors">
+          <MoreHorizontal className="h-4 w-4 text-secondary" />
+        </div>
+      }
+    >
+      {overflowItems.map((item) => {
+        const itemIsActive = isActive(item);
+        // isHidden = true only for user-hidden items (not space-constrained overflow)
+        const isHidden = tabPreferences.hiddenTabs.includes(item.key);
+        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-11">{t(item.i18n_key)}</span>
+              </Link>
+              <div className="flex items-center">
+                {/* Show Eye icon ONLY for user-hidden items */}
+                {isHidden && (
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      onShow(item.key);
+                    }}
+                    className="invisible group-hover/menu-item:visible p-1 rounded-sm text-tertiary hover:text-primary transition-colors"
+                    title="Show"
+                  >
+                    <Pin className="size-3" />
+                  </button>
+                )}
+                <Tooltip tooltipContent={isDefault ? "Clear default" : "Set as default"}>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      onToggleDefault(item.key);
+                    }}
+                    className={cn(
+                      "invisible group-hover/menu-item:visible p-1 rounded-sm text-tertiary hover:text-primary transition-colors",
+                      {
+                        visible: isDefault,
+                      }
+                    )}
+                    title={isDefault ? "Clear default" : "Set as default"}
+                  >
+                    <SetAsDefaultIcon className="size-3" />
+                  </button>
+                </Tooltip>
+              </div>
+            </div>
+          </Menu.MenuItem>
+        );
+      })}
+    </Menu>
+  );
+}
diff --git a/apps/web/core/components/navigation/tab-navigation-root.tsx b/apps/web/core/components/navigation/tab-navigation-root.tsx
new file mode 100644
index 0000000000..1959f8684c
--- /dev/null
+++ b/apps/web/core/components/navigation/tab-navigation-root.tsx
@@ -0,0 +1,247 @@
+import type { FC } from "react";
+import React, { useEffect } from "react";
+import { observer } from "mobx-react";
+import { useParams, useLocation, Link, useNavigate } from "react-router";
+import { EUserPermissionsLevel, EUserPermissions } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { TabNavigationList, TabNavigationItem } from "@plane/propel/tab-navigation";
+import type { EUserProjectRoles } from "@plane/types";
+// hooks
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { useProject } from "@/hooks/store/use-project";
+import { useUserPermissions } from "@/hooks/store/user";
+// plane web imports
+import { useNavigationItems } from "@/plane-web/components/navigations";
+// local imports
+import { LeaveProjectModal } from "../project/leave-project-modal";
+import { PublishProjectModal } from "../project/publish-project/modal";
+import { ProjectActionsMenu } from "./project-actions-menu";
+import { ProjectHeader } from "./project-header";
+import { TabNavigationOverflowMenu } from "./tab-navigation-overflow-menu";
+import { DEFAULT_TAB_KEY } from "./tab-navigation-utils";
+import { TabNavigationVisibleItem } from "./tab-navigation-visible-item";
+import { useActiveTab } from "./use-active-tab";
+import { useProjectActions } from "./use-project-actions";
+import { useResponsiveTabLayout } from "./use-responsive-tab-layout";
+import { useTabPreferences } from "./use-tab-preferences";
+
+// Local type definition for navigation items with app-specific fields
+export type TNavigationItem = {
+  name: string;
+  href: string;
+  icon: React.ElementType;
+  access: EUserPermissions[] | EUserProjectRoles[];
+  shouldRender: boolean;
+  sortOrder: number;
+  i18n_key: string;
+  key: string;
+};
+
+type TTabNavigationRootProps = {
+  workspaceSlug: string;
+  projectId: string;
+};
+
+export const TabNavigationRoot = observer(function TabNavigationRoot(props: TTabNavigationRootProps) {
+  const { workspaceSlug, projectId } = props;
+  const { workItem: workItemIdentifierFromRoute } = useParams();
+  const location = useLocation();
+  const pathname = location.pathname;
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+
+  // Store hooks
+  const { getPartialProjectById } = useProject();
+  const { allowPermissions } = useUserPermissions();
+  const {
+    issue: { getIssueIdByIdentifier, getIssueById },
+  } = useIssueDetail();
+
+  // Tab preferences hook
+  const { tabPreferences, handleToggleDefaultTab, handleHideTab, handleShowTab } = useTabPreferences(
+    workspaceSlug,
+    projectId
+  );
+
+  // Derived values
+  const workItemId = workItemIdentifierFromRoute
+    ? getIssueIdByIdentifier(workItemIdentifierFromRoute?.toString())
+    : undefined;
+  const workItem = workItemId ? getIssueById(workItemId) : undefined;
+  const project = getPartialProjectById(projectId);
+
+  // Navigation items hook
+  const navigationItems = useNavigationItems({
+    workspaceSlug,
+    projectId,
+    project,
+    allowPermissions,
+  });
+
+  // Active tab hook
+  const { isActive, activeItem } = useActiveTab({
+    navigationItems,
+    pathname,
+    workItemId,
+    workItem,
+    projectId,
+  });
+
+  // Project actions hook
+  const {
+    publishModalOpen,
+    leaveProjectModalOpen,
+    handleLeaveProject,
+    handleCopyText,
+    handlePublishModal,
+    handleLeaveProjectModal,
+  } = useProjectActions({
+    workspaceSlug,
+    projectId,
+    activeItem,
+  });
+
+  // Filter and sort navigation items
+  const allNavigationItems = navigationItems
+    .filter((item) => item.shouldRender)
+    .sort((a, b) => a.sortOrder - b.sortOrder);
+
+  // Split items into two categories:
+  // 1. visibleNavigationItems: Items NOT user-hidden (may still overflow due to space)
+  // 2. hiddenNavigationItems: Items user explicitly hid (always in overflow with "Show" icon)
+  const visibleNavigationItems = allNavigationItems.filter((item) => !tabPreferences.hiddenTabs.includes(item.key));
+  const hiddenNavigationItems = allNavigationItems.filter((item) => tabPreferences.hiddenTabs.includes(item.key));
+
+  // Responsive tab layout hook
+  const { visibleItems, overflowItems, hasOverflow, itemRefs, containerRef } = useResponsiveTabLayout({
+    visibleNavigationItems,
+    hiddenNavigationItems,
+    isActive,
+  });
+
+  // Redirect to default tab when navigating to project root
+  useEffect(() => {
+    const projectRootPath = `/${workspaceSlug}/projects/${projectId}`;
+    const isProjectRoot = pathname === projectRootPath || pathname === `${projectRootPath}/`;
+
+    if (isProjectRoot && allNavigationItems.length > 0) {
+      // Find the default tab in available items
+      const defaultTabItem = allNavigationItems.find((item) => item.key === tabPreferences.defaultTab);
+
+      // If default tab exists and is enabled, use it; otherwise fall back to work_items
+      const targetItem = defaultTabItem || allNavigationItems.find((item) => item.key === DEFAULT_TAB_KEY);
+
+      if (targetItem) {
+        navigate(targetItem.href, { replace: true });
+      }
+    }
+  }, [pathname, workspaceSlug, projectId, tabPreferences.defaultTab, allNavigationItems, navigate]);
+
+  if (allNavigationItems.length === 0) return null;
+  if (!project) return null;
+
+  // Permission checks
+  const isAdmin = allowPermissions(
+    [EUserPermissions.ADMIN],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug.toString(),
+    project?.id
+  );
+
+  const isAuthorized = allowPermissions(
+    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
+    EUserPermissionsLevel.PROJECT,
+    workspaceSlug.toString(),
+    project?.id
+  );
+
+  return (
+    <>
+      <PublishProjectModal isOpen={publishModalOpen} projectId={projectId} onClose={() => handlePublishModal(false)} />
+      <LeaveProjectModal
+        project={project}
+        isOpen={leaveProjectModalOpen}
+        onClose={() => handleLeaveProjectModal(false)}
+      />
+
+      {/* 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">
+          <ProjectHeader workspaceSlug={workspaceSlug} projectId={projectId} />
+          <div className="shrink-0">
+            <ProjectActionsMenu
+              workspaceSlug={workspaceSlug}
+              project={project}
+              isAdmin={isAdmin}
+              isAuthorized={isAuthorized}
+              onCopyText={handleCopyText}
+              onLeaveProject={handleLeaveProject}
+              onPublishModal={() => handlePublishModal(true)}
+            />
+          </div>
+        </div>
+
+        <div className="shrink-0 h-5 w-1 border-l border-subtle" />
+
+        <div ref={containerRef} className="flex items-center h-full flex-1 min-w-0 overflow-hidden">
+          <TabNavigationList className="h-full">
+            {/* Render visible tab items */}
+            {visibleItems.map((item) => {
+              const itemIsActive = isActive(item);
+              const originalIndex = allNavigationItems.indexOf(item);
+
+              return (
+                <TabNavigationVisibleItem
+                  key={item.key}
+                  item={item}
+                  isActive={itemIsActive}
+                  tabPreferences={tabPreferences}
+                  onToggleDefault={handleToggleDefaultTab}
+                  onHide={handleHideTab}
+                  itemRef={(el) => {
+                    itemRefs.current[originalIndex] = el;
+                  }}
+                />
+              );
+            })}
+
+            {/* Render overflow menu if needed */}
+            {hasOverflow && (
+              <TabNavigationOverflowMenu
+                overflowItems={overflowItems}
+                isActive={isActive}
+                tabPreferences={tabPreferences}
+                onToggleDefault={handleToggleDefaultTab}
+                onShow={handleShowTab}
+              />
+            )}
+          </TabNavigationList>
+
+          {hasOverflow && (
+            <div className="absolute opacity-0 pointer-events-none -z-10">
+              {visibleNavigationItems.map((item) => {
+                const itemIsActive = isActive(item);
+                const originalIndex = allNavigationItems.indexOf(item);
+                return (
+                  <div
+                    key={`measure-hidden-${item.key}`}
+                    ref={(el) => {
+                      itemRefs.current[originalIndex] = el;
+                    }}
+                    className="inline-block"
+                  >
+                    <Link to={item.href}>
+                      <TabNavigationItem isActive={itemIsActive}>
+                        <span>{t(item.i18n_key)}</span>
+                      </TabNavigationItem>
+                    </Link>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/apps/web/core/components/navigation/tab-navigation-utils.ts b/apps/web/core/components/navigation/tab-navigation-utils.ts
new file mode 100644
index 0000000000..a3cffe01d8
--- /dev/null
+++ b/apps/web/core/components/navigation/tab-navigation-utils.ts
@@ -0,0 +1,111 @@
+// Tab preferences type
+export type TTabPreferences = {
+  defaultTab: string;
+  hiddenTabs: string[];
+};
+
+// Constants
+export const TAB_PREFS_KEY = "plane_tab_prefs";
+export const DEFAULT_TAB_KEY = "work_items";
+
+/**
+ * Get tab preferences for a specific project from localStorage
+ * @param projectId - The project ID
+ * @returns Tab preferences object with defaultTab and hiddenTabs
+ */
+export const getTabPreferences = (projectId: string): TTabPreferences => {
+  try {
+    const stored = localStorage.getItem(TAB_PREFS_KEY);
+    if (stored) {
+      const allPrefs = JSON.parse(stored);
+      return (
+        allPrefs[projectId] || {
+          defaultTab: DEFAULT_TAB_KEY,
+          hiddenTabs: [],
+        }
+      );
+    }
+  } catch (error) {
+    console.error("Error reading tab preferences:", error);
+  }
+  return {
+    defaultTab: DEFAULT_TAB_KEY,
+    hiddenTabs: [],
+  };
+};
+
+/**
+ * Save tab preferences for a specific project to localStorage
+ * @param projectId - The project ID
+ * @param preferences - Tab preferences to save
+ */
+export const saveTabPreferences = (projectId: string, preferences: TTabPreferences): void => {
+  try {
+    const stored = localStorage.getItem(TAB_PREFS_KEY);
+    const allPrefs = stored ? JSON.parse(stored) : {};
+    allPrefs[projectId] = preferences;
+    localStorage.setItem(TAB_PREFS_KEY, JSON.stringify(allPrefs));
+  } catch (error) {
+    console.error("Error saving tab preferences:", error);
+  }
+};
+
+/**
+ * Map tab keys to their corresponding URLs
+ * @param workspaceSlug - The workspace slug
+ * @param projectId - The project ID
+ * @param tabKey - The tab key to map
+ * @returns Full URL path for the tab
+ */
+export const getTabUrl = (workspaceSlug: string, projectId: string, tabKey: string): string => {
+  const baseUrl = `/${workspaceSlug}/projects/${projectId}`;
+  const tabUrlMap: Record<string, string> = {
+    work_items: `${baseUrl}/issues`,
+    cycles: `${baseUrl}/cycles`,
+    modules: `${baseUrl}/modules`,
+    views: `${baseUrl}/views`,
+    pages: `${baseUrl}/pages`,
+    intake: `${baseUrl}/intake`,
+    overview: `${baseUrl}/overview`,
+    epics: `${baseUrl}/epics`,
+  };
+  return tabUrlMap[tabKey] || `${baseUrl}/issues`; // fallback to issues
+};
+
+/**
+ * Get the default tab URL for a project
+ * @param workspaceSlug - The workspace slug
+ * @param projectId - The project ID
+ * @param availableTabKeys - Optional array of available tab keys for validation
+ * @returns Full URL path for the default tab (validated if availableTabKeys provided)
+ */
+export const getDefaultTabUrl = (workspaceSlug: string, projectId: string, availableTabKeys?: string[]): string => {
+  const preferences = getTabPreferences(projectId);
+  let tabKey = preferences.defaultTab;
+
+  // Validate against available tabs if provided
+  if (availableTabKeys && availableTabKeys.length > 0) {
+    tabKey = getValidatedDefaultTab(projectId, availableTabKeys);
+  }
+
+  return getTabUrl(workspaceSlug, projectId, tabKey);
+};
+
+/**
+ * Get the default tab key, with validation that it exists in available tabs
+ * @param projectId - The project ID
+ * @param availableTabKeys - Array of available tab keys
+ * @returns The default tab key if valid, otherwise DEFAULT_TAB_KEY
+ */
+export const getValidatedDefaultTab = (projectId: string, availableTabKeys: string[]): string => {
+  const preferences = getTabPreferences(projectId);
+  const defaultTab = preferences.defaultTab;
+
+  // Check if the default tab is in the available tabs
+  if (availableTabKeys.includes(defaultTab)) {
+    return defaultTab;
+  }
+
+  // Fall back to work_items
+  return DEFAULT_TAB_KEY;
+};
diff --git a/apps/web/core/components/navigation/tab-navigation-visible-item.tsx b/apps/web/core/components/navigation/tab-navigation-visible-item.tsx
new file mode 100644
index 0000000000..4a533e2772
--- /dev/null
+++ b/apps/web/core/components/navigation/tab-navigation-visible-item.tsx
@@ -0,0 +1,78 @@
+import { Link } from "react-router";
+import { PinOff } from "lucide-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+import { ContextMenu } from "@plane/propel/context-menu";
+import { SetAsDefaultIcon } from "@plane/propel/icons";
+import { TabNavigationItem } from "@plane/propel/tab-navigation";
+// local imports
+import type { TNavigationItem } from "./tab-navigation-root";
+import type { TTabPreferences } from "./tab-navigation-utils";
+
+export type TTabNavigationVisibleItemProps = {
+  item: TNavigationItem;
+  isActive: boolean;
+  tabPreferences: TTabPreferences;
+  onToggleDefault: (tabKey: string) => void;
+  onHide: (tabKey: string) => void;
+  itemRef?: (el: HTMLDivElement | null) => void;
+};
+
+/**
+ * Individual visible tab navigation item with context menu
+ * Handles right-click actions for setting default and hiding tabs
+ */
+export function TabNavigationVisibleItem({
+  item,
+  isActive,
+  tabPreferences,
+  onToggleDefault,
+  onHide,
+  itemRef,
+}: TTabNavigationVisibleItemProps) {
+  const { t } = useTranslation();
+  const isDefault = item.key === tabPreferences.defaultTab;
+
+  return (
+    <div className="relative h-full flex 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-(--text-color-icon-primary) rounded-t-md transition-all duration-300" />
+      )}
+      <div key={`${item.key}-measure`} ref={itemRef}>
+        <ContextMenu>
+          <ContextMenu.Trigger>
+            <Link key={`${item.key}-${isActive ? "active" : "inactive"}`} to={item.href}>
+              <TabNavigationItem isActive={isActive}>
+                <span>{t(item.i18n_key)}</span>
+              </TabNavigationItem>
+            </Link>
+          </ContextMenu.Trigger>
+          <ContextMenu.Portal>
+            <ContextMenu.Content positionerClassName="z-30">
+              <ContextMenu.Item
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onToggleDefault(item.key);
+                }}
+                className="flex items-center gap-2 text-secondary transition-colors cursor-pointer"
+              >
+                <SetAsDefaultIcon className="shrink-0 size-3" />
+                <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-secondary transition-colors cursor-pointer"
+              >
+                <PinOff className="shrink-0 size-3" />
+                <span className="text-11">Hide in more menu</span>
+              </ContextMenu.Item>
+            </ContextMenu.Content>
+          </ContextMenu.Portal>
+        </ContextMenu>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/navigation/top-nav-power-k.tsx b/apps/web/core/components/navigation/top-nav-power-k.tsx
new file mode 100644
index 0000000000..b4e9bacb0c
--- /dev/null
+++ b/apps/web/core/components/navigation/top-nav-power-k.tsx
@@ -0,0 +1,288 @@
+import { useState, useMemo, useCallback, useEffect } from "react";
+import { Command } from "cmdk";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+// hooks
+import { CloseIcon, SearchIcon } from "@plane/propel/icons";
+import { cn } from "@plane/utils";
+// power-k
+import type { TPowerKCommandConfig, TPowerKContext } from "@/components/power-k/core/types";
+import { ProjectsAppPowerKCommandsList } from "@/components/power-k/ui/modal/commands-list";
+import { PowerKModalFooter } from "@/components/power-k/ui/modal/footer";
+import { useIssueDetail } from "@/hooks/store/use-issue-detail";
+import { usePowerK } from "@/hooks/store/use-power-k";
+import { useUser } from "@/hooks/store/user";
+import { useAppRouter } from "@/hooks/use-app-router";
+import { useExpandableSearch } from "@/hooks/use-expandable-search";
+
+export const TopNavPowerK = observer(() => {
+  // router
+  const router = useAppRouter();
+  const params = useParams();
+  const { projectId: routerProjectId, workItem: workItemIdentifier } = params;
+
+  // states
+  const [searchTerm, setSearchTerm] = useState("");
+  const [activeCommand, setActiveCommand] = useState<TPowerKCommandConfig | null>(null);
+  const [shouldShowContextBasedActions, setShouldShowContextBasedActions] = useState(true);
+  const [isWorkspaceLevel, setIsWorkspaceLevel] = useState(false);
+
+  // store hooks
+  const { activeContext, setActivePage, activePage, setTopNavInputRef } = usePowerK();
+  const { data: currentUser } = useUser();
+
+  const handleOnClose = useCallback(() => {
+    setSearchTerm("");
+    setActivePage(null);
+    setActiveCommand(null);
+  }, [setSearchTerm, setActivePage, setActiveCommand]);
+
+  // expandable search hook
+  const {
+    isOpen,
+    containerRef,
+    inputRef,
+    handleClose: closePanel,
+    handleMouseDown,
+    handleFocus,
+    openPanel,
+  } = useExpandableSearch({
+    onClose: handleOnClose,
+  });
+
+  // derived values
+  const {
+    issue: { getIssueById, getIssueIdByIdentifier },
+  } = useIssueDetail();
+
+  const workItemId = workItemIdentifier ? getIssueIdByIdentifier(workItemIdentifier.toString()) : undefined;
+  const workItemDetails = workItemId ? getIssueById(workItemId) : undefined;
+  const projectId: string | string[] | undefined | null = routerProjectId ?? workItemDetails?.project_id;
+
+  // Build command context
+  const context: TPowerKContext = useMemo(
+    () => ({
+      currentUserId: currentUser?.id,
+      activeCommand,
+      activeContext,
+      shouldShowContextBasedActions,
+      setShouldShowContextBasedActions,
+      params: {
+        ...params,
+        projectId,
+      },
+      router,
+      closePalette: closePanel,
+      setActiveCommand,
+      setActivePage,
+    }),
+    [
+      currentUser?.id,
+      activeCommand,
+      activeContext,
+      shouldShowContextBasedActions,
+      params,
+      projectId,
+      router,
+      setActivePage,
+      closePanel,
+    ]
+  );
+
+  // Register input ref with PowerK store for keyboard shortcut access
+  useEffect(() => {
+    setTopNavInputRef(inputRef);
+    return () => {
+      setTopNavInputRef(null);
+    };
+  }, [setTopNavInputRef]);
+
+  const handleClear = () => {
+    setSearchTerm("");
+    inputRef.current?.focus();
+  };
+
+  // Handle command selection
+  const handleCommandSelect = useCallback(
+    (command: TPowerKCommandConfig) => {
+      if (command.type === "action") {
+        command.action(context);
+        // Always close on command selection
+        context.closePalette();
+      } else if (command.type === "change-page") {
+        context.setActiveCommand(command);
+        setActivePage(command.page);
+        setSearchTerm("");
+      }
+    },
+    [context, setActivePage]
+  );
+
+  // Handle selection page item selection
+  const handlePageDataSelection = useCallback(
+    (data: unknown) => {
+      if (context.activeCommand?.type === "change-page") {
+        context.activeCommand.onSelect(data, context);
+      }
+      // Always close on page data selection
+      context.closePalette();
+    },
+    [context]
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      // Cmd/Ctrl+K closes the search dropdown
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+        e.preventDefault();
+        closePanel();
+        return;
+      }
+
+      if (e.key === "Escape") {
+        e.preventDefault();
+        if (searchTerm) {
+          setSearchTerm("");
+        }
+        closePanel();
+        return;
+      }
+
+      if (e.key === "Backspace" && !searchTerm) {
+        if (activePage) {
+          e.preventDefault();
+          setActivePage(null);
+          context.setActiveCommand(null);
+        } else if (shouldShowContextBasedActions) {
+          // Optional: logic to hide context actions if desired, similar to wrapper
+          context.setShouldShowContextBasedActions(false);
+        }
+        return;
+      }
+
+      // Arrow down/up keys to navigate command items
+      if ((e.key === "ArrowDown" || e.key === "ArrowUp") && isOpen) {
+        e.preventDefault();
+        // Get the Command.List element
+        const commandList = containerRef.current?.querySelector("[cmdk-list]") as HTMLElement;
+        if (commandList) {
+          // Create and dispatch a keyboard event on the list to trigger cmdk navigation
+          const syntheticEvent = new KeyboardEvent("keydown", {
+            key: e.key,
+            bubbles: true,
+            cancelable: true,
+          });
+          commandList.dispatchEvent(syntheticEvent);
+
+          // Also try to focus the first/selected item
+          if (e.key === "ArrowDown") {
+            const firstItem = commandList.querySelector('[cmdk-item]:not([aria-disabled="true"])') as HTMLElement;
+            if (firstItem) {
+              firstItem.focus();
+            }
+          }
+        }
+        return;
+      }
+
+      // Enter key to execute selected command
+      if (e.key === "Enter" && isOpen) {
+        e.preventDefault();
+        // Find the currently selected/focused item
+        const selectedItem = containerRef.current?.querySelector('[cmdk-item][aria-selected="true"]') as HTMLElement;
+        if (selectedItem) {
+          // Trigger click on the selected item
+          selectedItem.click();
+        }
+        return;
+      }
+    },
+    [searchTerm, activePage, context, shouldShowContextBasedActions, setActivePage, closePanel]
+  );
+
+  return (
+    <div ref={containerRef} className="relative">
+      <div
+        className={cn("relative w-[364px] flex items-center transition-all duration-300 ease-in-out z-30", {
+          "w-[554px]": isOpen,
+        })}
+      >
+        <div
+          className={cn(
+            "flex items-center w-full h-7 p-2 rounded-lg bg-layer-2 border border-subtle-1 transition-colors duration-200",
+            {
+              "bg-layer-1": isOpen,
+            }
+          )}
+          onClick={() => inputRef.current?.focus()}
+          role="button"
+        >
+          <SearchIcon className="shrink-0 size-3.5 text-placeholder mr-2" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={searchTerm}
+            onChange={(e) => {
+              setSearchTerm(e.target.value);
+              if (!isOpen) openPanel();
+            }}
+            onMouseDown={handleMouseDown}
+            onFocus={handleFocus}
+            onKeyDown={handleKeyDown}
+            placeholder="Search commands..."
+            className="flex-1 bg-transparent text-13 text-primary placeholder-text-placeholder outline-none min-w-0"
+          />
+          {searchTerm && (
+            <button type="button" onClick={handleClear} className="shrink-0 ml-2">
+              <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-surface-1 border border-subtle rounded-md shadow-lg overflow-hidden z-20  transition-all duration-300 ease-in-out flex flex-col px-0 pt-10",
+          {
+            "opacity-100 w-[574px] max-h-[80vh]": isOpen,
+            "opacity-0 w-0 h-0": !isOpen,
+          }
+        )}
+      >
+        {isOpen && (
+          <Command
+            filter={(i18nValue: string, search: string) => {
+              if (i18nValue === "no-results") return 1;
+              if (i18nValue.toLowerCase().includes(search.toLowerCase())) return 1;
+              return 0;
+            }}
+            shouldFilter={searchTerm.length > 0}
+            className="w-full flex flex-col h-full"
+          >
+            <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">
+              <ProjectsAppPowerKCommandsList
+                activePage={activePage}
+                context={context}
+                handleCommandSelect={handleCommandSelect}
+                handlePageDataSelection={handlePageDataSelection}
+                isWorkspaceLevel={isWorkspaceLevel}
+                searchTerm={searchTerm}
+                setSearchTerm={setSearchTerm}
+                handleSearchMenuClose={() => closePanel()}
+              />
+            </Command.List>
+            <PowerKModalFooter
+              isWorkspaceLevel={isWorkspaceLevel}
+              projectId={context.params.projectId?.toString()}
+              onWorkspaceLevelChange={setIsWorkspaceLevel}
+            />
+          </Command>
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/apps/web/core/components/navigation/use-active-tab.ts b/apps/web/core/components/navigation/use-active-tab.ts
new file mode 100644
index 0000000000..f014289255
--- /dev/null
+++ b/apps/web/core/components/navigation/use-active-tab.ts
@@ -0,0 +1,36 @@
+import { useCallback, useMemo } from "react";
+import type { TIssue } from "@plane/types";
+import type { TNavigationItem } from "@/components/navigation/tab-navigation-root";
+
+type UseActiveTabProps = {
+  navigationItems: TNavigationItem[];
+  pathname: string;
+  workItemId?: string;
+  workItem?: TIssue;
+  projectId: string;
+};
+
+export const useActiveTab = ({ navigationItems, pathname, workItemId, workItem, projectId }: UseActiveTabProps) => {
+  // Check if a navigation item is active
+  const isActive = useCallback(
+    (item: TNavigationItem) => {
+      // Work item condition
+      const workItemCondition = workItemId && workItem && !workItem?.is_epic && workItem?.project_id === projectId;
+      // Epic condition
+      const epicCondition = workItemId && workItem && workItem?.is_epic && workItem?.project_id === projectId;
+      // Is active
+      const isWorkItemActive = item.key === "work_items" && workItemCondition;
+      const isEpicActive = item.key === "epics" && epicCondition;
+      // Pathname condition - use exact match or startsWith for better accuracy
+      const isPathnameActive = pathname === item.href || pathname.startsWith(item.href + "/");
+      // Return
+      return isWorkItemActive || isEpicActive || isPathnameActive;
+    },
+    [pathname, workItem, workItemId, projectId]
+  );
+
+  // Find active item
+  const activeItem = useMemo(() => navigationItems.find((item) => isActive(item)), [navigationItems, isActive]);
+
+  return { isActive, activeItem };
+};
diff --git a/apps/web/core/components/navigation/use-project-actions.ts b/apps/web/core/components/navigation/use-project-actions.ts
new file mode 100644
index 0000000000..24e3fc9fa7
--- /dev/null
+++ b/apps/web/core/components/navigation/use-project-actions.ts
@@ -0,0 +1,55 @@
+import { useCallback, useState } from "react";
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { copyUrlToClipboard } from "@plane/utils";
+import type { TNavigationItem } from "@/components/navigation/tab-navigation-root";
+
+type UseProjectActionsProps = {
+  workspaceSlug: string;
+  projectId: string;
+  activeItem?: TNavigationItem;
+};
+
+export const useProjectActions = ({ workspaceSlug, projectId, activeItem }: UseProjectActionsProps) => {
+  const [publishModalOpen, setPublishModalOpen] = useState(false);
+  const [leaveProjectModalOpen, setLeaveProjectModalOpen] = useState(false);
+
+  const handleLeaveProject = useCallback(() => {
+    setLeaveProjectModalOpen(true);
+  }, []);
+
+  const handleCopyText = useCallback(async () => {
+    const pathToCopy = activeItem?.href ?? `/${workspaceSlug}/projects/${projectId}/issues`;
+
+    try {
+      await copyUrlToClipboard(pathToCopy);
+      setToast({
+        type: TOAST_TYPE.INFO,
+        title: "Link copied!",
+        message: "Project link copied to clipboard.",
+      });
+    } catch (_error) {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Copy failed",
+        message: "We couldn't copy the link. Please try again.",
+      });
+    }
+  }, [activeItem, projectId, workspaceSlug]);
+
+  const handlePublishModal = useCallback((open: boolean) => {
+    setPublishModalOpen(open);
+  }, []);
+
+  const handleLeaveProjectModal = useCallback((open: boolean) => {
+    setLeaveProjectModalOpen(open);
+  }, []);
+
+  return {
+    publishModalOpen,
+    leaveProjectModalOpen,
+    handleLeaveProject,
+    handleCopyText,
+    handlePublishModal,
+    handleLeaveProjectModal,
+  };
+};
diff --git a/apps/web/core/components/navigation/use-responsive-tab-layout.ts b/apps/web/core/components/navigation/use-responsive-tab-layout.ts
new file mode 100644
index 0000000000..c76724a067
--- /dev/null
+++ b/apps/web/core/components/navigation/use-responsive-tab-layout.ts
@@ -0,0 +1,163 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { TNavigationItem } from "./tab-navigation-root";
+
+export type TResponsiveTabLayout = {
+  visibleItems: TNavigationItem[];
+  overflowItems: TNavigationItem[];
+  hasOverflow: boolean;
+  itemRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
+  containerRef: (node: HTMLDivElement | null) => void;
+};
+
+type UseResponsiveTabLayoutProps = {
+  visibleNavigationItems: TNavigationItem[];
+  hiddenNavigationItems: TNavigationItem[];
+  isActive: (item: TNavigationItem) => boolean;
+};
+
+/**
+ * Custom hook for managing responsive tab layout
+ * Calculates which tabs fit in the visible area and which overflow
+ * Implements smart pinning to keep active tabs visible
+ *
+ * @param visibleNavigationItems - Items that are not user-hidden
+ * @param hiddenNavigationItems - Items that user explicitly hid
+ * @param isActive - Function to check if a tab is active
+ * @returns Layout information and refs for rendering
+ */
+export const useResponsiveTabLayout = ({
+  visibleNavigationItems,
+  hiddenNavigationItems,
+  isActive,
+}: UseResponsiveTabLayoutProps): TResponsiveTabLayout => {
+  // Refs for measuring items
+  const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const resizeObserverRef = useRef<ResizeObserver | null>(null);
+
+  // State for responsive behavior
+  const [containerWidth, setContainerWidth] = useState<number>(0);
+  const [visibleCount, setVisibleCount] = useState<number>(visibleNavigationItems.length);
+
+  // Constants
+  const gap = 4; // gap-1 = 4px
+  const overflowButtonWidth = 40;
+
+  // Callback ref that sets up ResizeObserver when element is attached
+  const containerRef = useCallback((node: HTMLDivElement | null) => {
+    // Clean up previous observer if it exists
+    if (resizeObserverRef.current) {
+      resizeObserverRef.current.disconnect();
+      resizeObserverRef.current = null;
+    }
+
+    // If node is null (unmounting), just clean up
+    if (!node) {
+      setContainerWidth(0);
+      return;
+    }
+
+    // Set initial width immediately
+    setContainerWidth(node.offsetWidth);
+
+    // Create and set up new ResizeObserver
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerWidth(entry.contentRect.width);
+      }
+    });
+
+    resizeObserverRef.current = resizeObserver;
+    resizeObserver.observe(node);
+  }, []); // Empty deps - callback function remains stable
+
+  // Cleanup effect to disconnect observer on component unmount
+  useEffect(
+    () => () => {
+      if (resizeObserverRef.current) {
+        resizeObserverRef.current.disconnect();
+        resizeObserverRef.current = null;
+      }
+    },
+    []
+  );
+
+  // Calculate how many items can fit
+  useEffect(() => {
+    if (!containerWidth || itemRefs.current.length === 0) return;
+
+    let totalWidth = 0;
+    let count = 0;
+
+    for (let i = 0; i < itemRefs.current.length; i++) {
+      const item = itemRefs.current[i];
+      if (!item) continue;
+
+      const itemWidth = item.offsetWidth;
+      const widthWithGap = itemWidth + (count > 0 ? gap : 0);
+
+      // If we still have items to show, reserve space for overflow button
+      const remainingItems = visibleNavigationItems.length - (i + 1);
+      const reservedSpace = remainingItems > 0 ? overflowButtonWidth + gap : 0;
+
+      if (totalWidth + widthWithGap + reservedSpace <= containerWidth) {
+        totalWidth += widthWithGap;
+        count++;
+      } else {
+        break;
+      }
+    }
+
+    // Ensure at least one item is visible if there's space
+    if (count === 0 && visibleNavigationItems.length > 0 && containerWidth > overflowButtonWidth) {
+      count = 1;
+    }
+
+    setVisibleCount(count);
+  }, [containerWidth, visibleNavigationItems.length, gap, overflowButtonWidth]);
+
+  // Memoize active tab index to prevent unnecessary re-renders
+  const activeTabIndex = useMemo(
+    () => visibleNavigationItems.findIndex((item) => isActive(item)),
+    [visibleNavigationItems, isActive]
+  );
+
+  // Smart pinning logic: calculate visible and overflow items
+  const { visibleItems, overflowItems, hasOverflow } = useMemo(() => {
+    // Start with responsive calculation: which items fit in available space
+    let visible = visibleNavigationItems.slice(0, visibleCount);
+    let overflow = visibleNavigationItems.slice(visibleCount);
+
+    // If active tab would be in overflow, swap it with last visible item
+    if (activeTabIndex !== -1 && activeTabIndex >= visibleCount && visibleCount > 0) {
+      const activeItem = visibleNavigationItems[activeTabIndex];
+      const replacedItem = visible[visibleCount - 1];
+
+      visible = [...visible.slice(0, visibleCount - 1), activeItem];
+      // Add replaced item to overflow, maintain order
+      overflow = [
+        replacedItem,
+        ...visibleNavigationItems.slice(visibleCount, activeTabIndex),
+        ...visibleNavigationItems.slice(activeTabIndex + 1),
+      ];
+    }
+
+    // Combine space-overflowed items with user-hidden items
+    // User-hidden items (in hiddenNavigationItems) will show "Eye" icon
+    // Space-overflowed items (in overflow from visibleNavigationItems) will NOT show "Eye" icon
+    const allOverflow = [...overflow, ...hiddenNavigationItems];
+
+    return {
+      visibleItems: visible,
+      overflowItems: allOverflow,
+      hasOverflow: allOverflow.length > 0,
+    };
+  }, [visibleNavigationItems, hiddenNavigationItems, visibleCount, activeTabIndex]);
+
+  return {
+    visibleItems,
+    overflowItems,
+    hasOverflow,
+    itemRefs,
+    containerRef,
+  };
+};
diff --git a/apps/web/core/components/navigation/use-tab-preferences.ts b/apps/web/core/components/navigation/use-tab-preferences.ts
new file mode 100644
index 0000000000..57a6100943
--- /dev/null
+++ b/apps/web/core/components/navigation/use-tab-preferences.ts
@@ -0,0 +1,137 @@
+import { useMemo } from "react";
+import { setToast, TOAST_TYPE } from "@plane/propel/toast";
+import { useMember } from "@/hooks/store/use-member";
+import { useUser } from "@/hooks/store/user";
+import { DEFAULT_TAB_KEY } from "./tab-navigation-utils";
+import type { TTabPreferences } from "./tab-navigation-utils";
+
+export type TTabPreferencesHook = {
+  tabPreferences: TTabPreferences;
+  isLoading: boolean;
+  handleToggleDefaultTab: (tabKey: string) => void;
+  handleHideTab: (tabKey: string) => void;
+  handleShowTab: (tabKey: string) => void;
+};
+
+/**
+ * Custom hook to manage tab preferences for a project
+ * Uses MobX store for state management and API persistence
+ *
+ * @param workspaceSlug - The workspace slug
+ * @param projectId - The project ID
+ * @returns Tab preferences state and handlers
+ */
+export const useTabPreferences = (workspaceSlug: string, projectId: string): TTabPreferencesHook => {
+  const {
+    project: { getProjectMemberPreferences, updateProjectMemberPreferences },
+  } = useMember();
+  // const { projectUserInfo } = useUserPermissions();
+  const { data } = useUser();
+
+  // Get member ID from projectUserInfo
+  // const projectMemberInfo = projectUserInfo[workspaceSlug]?.[projectId];
+  const memberId = data?.id || null;
+
+  // Get preferences from store
+  const storePreferences = getProjectMemberPreferences(projectId);
+
+  // 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: [],
+    };
+  }, [storePreferences]);
+
+  const isLoading = !storePreferences && memberId !== null;
+
+  /**
+   * 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,
+    });
+  };
+
+  /**
+   * Toggle default tab setting
+   * If tab is already default, resets to work_items; otherwise sets as default
+   */
+  const handleToggleDefaultTab = (tabKey: string) => {
+    const newDefaultTab = tabKey === tabPreferences.defaultTab ? DEFAULT_TAB_KEY : tabKey;
+    const newPreferences = { ...tabPreferences, defaultTab: newDefaultTab };
+    updatePreferences(newPreferences)
+      .then(() => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success!",
+          message: "Default tab updated successfully.",
+        });
+      })
+      .catch(() => {
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: "Error!",
+          message: "Failed to update default tab. Please try again later.",
+        });
+      });
+  };
+
+  /**
+   * Hide a tab (moves to overflow menu with "Show" option)
+   */
+  const handleHideTab = (tabKey: string) => {
+    const newPreferences = {
+      ...tabPreferences,
+      hiddenTabs: [...tabPreferences.hiddenTabs, tabKey],
+    };
+    try {
+      updatePreferences(newPreferences);
+    } catch (error) {
+      console.error("Error hiding tab:", error);
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Failed to hide tab. Please try again later.",
+      });
+    }
+  };
+
+  /**
+   * Show a previously hidden tab (returns to visible pool)
+   */
+  const handleShowTab = (tabKey: string) => {
+    const newPreferences = {
+      ...tabPreferences,
+      hiddenTabs: tabPreferences.hiddenTabs.filter((key) => key !== tabKey),
+    };
+    try {
+      updatePreferences(newPreferences);
+    } catch (error) {
+      console.error("Error showing tab:", error);
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: "Error!",
+        message: "Something went wrong. Please try again later.",
+      });
+    }
+  };
+
+  return {
+    tabPreferences,
+    isLoading,
+    handleToggleDefaultTab,
+    handleHideTab,
+    handleShowTab,
+  };
+};
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 1472fb0875..4b6e45f726 100644
--- a/apps/web/core/components/onboarding/create-or-join-workspaces.tsx
+++ b/apps/web/core/components/onboarding/create-or-join-workspaces.tsx
@@ -26,7 +26,7 @@ type Props = {
   finishOnboarding: () => Promise<void>;
 };
 
-export const CreateOrJoinWorkspaces: React.FC<Props> = observer((props) => {
+export const CreateOrJoinWorkspaces = observer(function CreateOrJoinWorkspaces(props: Props) {
   const { invitations, totalSteps, stepChange, finishOnboarding } = props;
   // states
   const [currentView, setCurrentView] = useState<ECreateOrJoinWorkspaceViews | null>(null);
@@ -69,7 +69,7 @@ export const CreateOrJoinWorkspaces: React.FC<Props> = observer((props) => {
               />
             ) : (
               <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">
+                <div className="flex gap-2.5 w-full items-start justify-center text-13 leading-5 mt-4 px-6 py-4 rounded-sm border border-accent-strong/20 bg-accent-primary/10 text-accent-secondary">
                   <OctagonAlert className="flex-shrink-0 size-5 mt-1" />
                   <span>
                     You don&apos;t seem to have any invites to a workspace and your instance admin has restricted
diff --git a/apps/web/core/components/onboarding/create-workspace.tsx b/apps/web/core/components/onboarding/create-workspace.tsx
index 31863a7aaa..37c1a1cc13 100644
--- a/apps/web/core/components/onboarding/create-workspace.tsx
+++ b/apps/web/core/components/onboarding/create-workspace.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
@@ -34,7 +32,7 @@ type Props = {
 // services
 const workspaceService = new WorkspaceService();
 
-export const CreateWorkspace: React.FC<Props> = observer((props) => {
+export const CreateWorkspace = observer(function CreateWorkspace(props: Props) {
   const { stepChange, user, invitedWorkspaces, handleCurrentViewChange } = props;
   // states
   const [slugError, setSlugError] = useState(false);
@@ -127,31 +125,31 @@ export const CreateWorkspace: React.FC<Props> = observer((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="w-full flex items-center gap-2 text-14 bg-surface-2"
             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="bg-accent-primary/80 h-4 w-4 flex items-center justify-center rounded-xs 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>
+        <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)}>
         <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 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
             htmlFor="name"
           >
             {t("workspace_creation.form.name.label")}
@@ -185,17 +183,17 @@ export const CreateWorkspace: React.FC<Props> = observer((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-red-500">{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 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
             htmlFor="slug"
           >
             {t("workspace_creation.form.url.label")}
@@ -213,10 +211,10 @@ export const CreateWorkspace: React.FC<Props> = observer((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-red-500" : "border-strong"
                 }`}
               >
-                <span className="whitespace-nowrap text-sm">{window && window.location.host}/</span>
+                <span className="whitespace-nowrap text-13">{window && window.location.host}/</span>
                 <Input
                   id="slug"
                   name="slug"
@@ -235,19 +233,19 @@ export const CreateWorkspace: React.FC<Props> = observer((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-red-500">{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-red-500">{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-red-500">{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 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
             htmlFor="organization_size"
           >
             {t("workspace_creation.form.organization_size.label")}
@@ -263,12 +261,12 @@ export const CreateWorkspace: React.FC<Props> = observer((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) => (
@@ -280,7 +278,7 @@ export const CreateWorkspace: React.FC<Props> = observer((props) => {
               )}
             />
             {errors.organization_size && (
-              <span className="text-sm text-red-500">{errors.organization_size.message}</span>
+              <span className="text-13 text-red-500">{errors.organization_size.message}</span>
             )}
           </div>
         </div>
@@ -288,7 +286,7 @@ export const CreateWorkspace: React.FC<Props> = observer((props) => {
           data-ph-element={WORKSPACE_TRACKER_ELEMENTS.ONBOARDING_CREATE_WORKSPACE_BUTTON}
           variant="primary"
           type="submit"
-          size="lg"
+          size="xl"
           className="w-full"
           disabled={isButtonDisabled}
         >
diff --git a/apps/web/core/components/onboarding/header.tsx b/apps/web/core/components/onboarding/header.tsx
index fc752e9ce9..9f8f621ed8 100644
--- a/apps/web/core/components/onboarding/header.tsx
+++ b/apps/web/core/components/onboarding/header.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -19,7 +17,7 @@ type OnboardingHeaderProps = {
   hasInvitations: boolean;
 };
 
-export const OnboardingHeader: FC<OnboardingHeaderProps> = observer((props) => {
+export const OnboardingHeader = observer(function OnboardingHeader(props: OnboardingHeaderProps) {
   const { currentStep, updateCurrentStep, hasInvitations } = props;
   // store hooks
   const { data: user } = useUser();
@@ -58,14 +56,18 @@ export const OnboardingHeader: FC<OnboardingHeaderProps> = observer((props) => {
   // derived values
   const currentStepNumber = getCurrentStepNumber();
   const totalSteps = hasInvitations ? 4 : 5; // 4 if invites available, 5 if not
-  const userName = user?.display_name ?? `${user?.first_name} ${user?.last_name}` ?? user?.email;
+  const userName = user?.display_name
+    ? user?.display_name
+    : user?.first_name
+      ? `${user?.first_name} ${user?.last_name ?? ""}`
+      : 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="h-1.5 rounded-t-lg w-full bg-surface-1 overflow-hidden cursor-pointer">
         <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>
@@ -74,10 +76,10 @@ export const OnboardingHeader: FC<OnboardingHeaderProps> = observer((props) => {
         <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/invitations.tsx b/apps/web/core/components/onboarding/invitations.tsx
index d66af6c393..7c04a3f655 100644
--- a/apps/web/core/components/onboarding/invitations.tsx
+++ b/apps/web/core/components/onboarding/invitations.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 // plane imports
 import { ROLE, MEMBER_TRACKER_EVENTS, MEMBER_TRACKER_ELEMENTS } from "@plane/constants";
@@ -26,7 +24,7 @@ type Props = {
 };
 const workspaceService = new WorkspaceService();
 
-export const Invitations: React.FC<Props> = (props) => {
+export function Invitations(props: Props) {
   const { invitations, handleNextStep, handleCurrentViewChange } = props;
   // states
   const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
@@ -77,8 +75,8 @@ export const Invitations: React.FC<Props> = (props) => {
   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>
+        <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 &&
@@ -89,7 +87,7 @@ export const Invitations: React.FC<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 p-3.5 border-subtle hover:bg-surface-2`}
                 onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
               >
                 <div className="flex-shrink-0">
@@ -100,8 +98,8 @@ export const Invitations: React.FC<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} />
@@ -112,7 +110,7 @@ export const Invitations: React.FC<Props> = (props) => {
       </div>
       <Button
         variant="primary"
-        size="lg"
+        size="xl"
         className="w-full"
         onClick={submitInvitations}
         disabled={isJoiningWorkspaces || !invitationsRespond.length}
@@ -121,14 +119,14 @@ export const Invitations: React.FC<Props> = (props) => {
         {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 text-14 bg-surface-2"
         onClick={handleCurrentViewChange}
         disabled={isJoiningWorkspaces}
       >
@@ -138,4 +136,4 @@ export const Invitations: React.FC<Props> = (props) => {
   ) : (
     <div>No Invitations found</div>
   );
-};
+}
diff --git a/apps/web/core/components/onboarding/invite-members.tsx b/apps/web/core/components/onboarding/invite-members.tsx
index 73a7340425..d05ddc6cdb 100644
--- a/apps/web/core/components/onboarding/invite-members.tsx
+++ b/apps/web/core/components/onboarding/invite-members.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import type {
@@ -80,7 +78,7 @@ const placeholderEmails = [
   "thomas.selfridge@frstflt.com",
   "albert.zahm@frstflt.com",
 ];
-const InviteMemberInput: React.FC<InviteMemberFormProps> = observer((props) => {
+const InviteMemberInput = observer(function InviteMemberInput(props: InviteMemberFormProps) {
   const {
     control,
     index,
@@ -163,7 +161,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = observer((props) => {
                 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"
               />
             )}
@@ -187,28 +185,26 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = observer((props) => {
                 <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 px-2.5 py-2 text-13 border-[0.5px] border-strong"
                 >
                   <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="p-2 absolute space-y-1 z-10 mt-1 h-fit w-48 sm:w-60 rounded-md border border-strong bg-surface-1 shadow-sm focus:outline-none"
                     ref={setPopperElement}
                     style={styles.popper}
                     {...attributes.popper}
@@ -219,16 +215,16 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = observer((props) => {
                         key={key}
                         value={parseInt(key)}
                         className={({ active, selected }) =>
-                          `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                          `cursor-pointer select-none truncate rounded-sm px-1 py-1.5 ${
                             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 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" />}
                           </div>
@@ -244,24 +240,24 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = observer((props) => {
         {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-red-500">That doesn{"'"}t look like an email address.</span>
         </div>
       )}
     </div>
   );
 });
 
-export const InviteMembers: React.FC<Props> = (props) => {
+export function InviteMembers(props: Props) {
   const { finishOnboarding, totalSteps, workspace } = props;
 
   const [isInvitationDisabled, setIsInvitationDisabled] = useState(true);
@@ -352,8 +348,8 @@ export const InviteMembers: React.FC<Props> = (props) => {
       <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">
+            <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>
@@ -364,10 +360,10 @@ export const InviteMembers: React.FC<Props> = (props) => {
               if (e.code === "Enter") e.preventDefault();
             }}
           >
-            <div className="w-full text-sm py-4">
+            <div className="w-full text-13 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="col-span-6 px-1 text-13 text-secondary font-medium">Email</div>
+                <div className="col-span-4 px-1 text-13 text-secondary font-medium">Role</div>
               </div>
               <div className="mb-3 space-y-3 sm:space-y-4">
                 {fields.map((field, index) => (
@@ -389,7 +385,7 @@ export const InviteMembers: React.FC<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="flex items-center mx-8 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} />
@@ -400,14 +396,14 @@ export const InviteMembers: React.FC<Props> = (props) => {
               <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>
@@ -417,4 +413,4 @@ export const InviteMembers: React.FC<Props> = (props) => {
       <SwitchAccountDropdown />
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/onboarding/profile-setup.tsx b/apps/web/core/components/onboarding/profile-setup.tsx
index 1dc8c716c3..6be30a4560 100644
--- a/apps/web/core/components/onboarding/profile-setup.tsx
+++ b/apps/web/core/components/onboarding/profile-setup.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
@@ -18,7 +16,7 @@ import type { IUser, TUserProfile, TOnboardingSteps } from "@plane/types";
 // ui
 import { Input, PasswordStrengthIndicator, Spinner } from "@plane/ui";
 // components
-import { getFileURL, getPasswordStrength } from "@plane/utils";
+import { cn, getFileURL, getPasswordStrength } from "@plane/utils";
 import { UserImageUploadModal } from "@/components/core/modals/user-image-upload-modal";
 // constants
 // helpers
@@ -35,7 +33,7 @@ type TProfileSetupFormValues = {
   password?: string;
   confirm_password?: string;
   role?: string;
-  use_case?: string;
+  use_case?: string[];
 };
 
 const defaultValues: Partial<TProfileSetupFormValues> = {
@@ -45,7 +43,7 @@ const defaultValues: Partial<TProfileSetupFormValues> = {
   password: undefined,
   confirm_password: undefined,
   role: undefined,
-  use_case: undefined,
+  use_case: [],
 };
 
 type Props = {
@@ -78,7 +76,7 @@ const USER_DOMAIN = [
 
 const authService = new AuthService();
 
-export const ProfileSetup: React.FC<Props> = observer((props) => {
+export const ProfileSetup = observer(function ProfileSetup(props: Props) {
   const { user, totalSteps, stepChange, finishOnboarding } = props;
   // states
   const [profileSetupStep, setProfileSetupStep] = useState<EProfileSetupSteps>(
@@ -141,7 +139,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
       avatar_url: formData.avatar_url ?? undefined,
     };
     const profileUpdatePayload: Partial<TUserProfile> = {
-      use_case: formData.use_case,
+      use_case: formData.use_case && formData.use_case.length > 0 ? formData.use_case.join(". ") : undefined,
       role: formData.role,
     };
     try {
@@ -153,7 +151,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
       captureSuccess({
         eventName: USER_TRACKER_EVENTS.add_details,
         payload: {
-          use_case: formData.use_case,
+          use_case: profileUpdatePayload.use_case,
           role: formData.role,
         },
       });
@@ -214,7 +212,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
 
   const handleSubmitUserPersonalization = async (formData: TProfileSetupFormValues) => {
     const profileUpdatePayload: Partial<TUserProfile> = {
-      use_case: formData.use_case,
+      use_case: formData.use_case && formData.use_case.length > 0 ? formData.use_case.join(". ") : undefined,
       role: formData.role,
     };
     try {
@@ -225,7 +223,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
       captureSuccess({
         eventName: USER_TRACKER_EVENTS.add_details,
         payload: {
-          use_case: formData.use_case,
+          use_case: profileUpdatePayload.use_case,
           role: formData.role,
         },
       });
@@ -317,11 +315,11 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                   {!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 left-0 top-0 flex items-center justify-center h-full w-full rounded-full text-on-color text-24 font-medium bg-accent-primary 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>
@@ -340,7 +338,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <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 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
                     htmlFor="first_name"
                   >
                     First name
@@ -366,16 +364,16 @@ export const ProfileSetup: React.FC<Props> = observer((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-red-500">{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 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
                     htmlFor="last_name"
                   >
                     Last name
@@ -400,12 +398,12 @@ export const ProfileSetup: React.FC<Props> = observer((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-red-500">{errors.last_name.message}</span>}
                 </div>
               </div>
 
@@ -413,7 +411,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
               {!isPasswordAlreadySetup && (
                 <>
                   <div className="space-y-1">
-                    <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
+                    <label className="text-13 text-tertiary font-medium" htmlFor="password">
                       Set a password ({t("common.optional")})
                     </label>
                     <Controller
@@ -432,19 +430,19 @@ export const ProfileSetup: React.FC<Props> = observer((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"
                           />
                           {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")}
                             />
                           )}
@@ -454,7 +452,7 @@ export const ProfileSetup: React.FC<Props> = observer((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 text-tertiary font-medium" htmlFor="confirm_password">
                       {t("auth.common.password.confirm_password.label")} ({t("common.optional")})
                     </label>
                     <Controller
@@ -475,16 +473,16 @@ export const ProfileSetup: React.FC<Props> = observer((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"
                           />
                           {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")}
                             />
                           )}
@@ -492,7 +490,7 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                       )}
                     />
                     {errors.confirm_password && (
-                      <span className="text-sm text-red-500">{errors.confirm_password.message}</span>
+                      <span className="text-13 text-red-500">{errors.confirm_password.message}</span>
                     )}
                   </div>
                 </>
@@ -505,7 +503,7 @@ export const ProfileSetup: React.FC<Props> = observer((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 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
                   htmlFor="role"
                 >
                   What role are you working on? Choose one.
@@ -521,9 +519,13 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                       {USER_ROLE.map((userRole) => (
                         <div
                           key={userRole}
-                          className={`flex-shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-custom-background-90 ${
-                            value === userRole ? "border-custom-primary-100" : "border-custom-border-300"
-                          } rounded px-3 py-1.5 text-sm font-medium`}
+                          className={cn(
+                            "shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-surface-2 rounded px-3 py-1.5 text-13 font-medium",
+                            {
+                              "border-accent-strong": value === userRole,
+                              "border-strong": value !== userRole,
+                            }
+                          )}
                           onClick={() => onChange(userRole)}
                         >
                           {userRole}
@@ -532,42 +534,53 @@ export const ProfileSetup: React.FC<Props> = observer((props) => {
                     </div>
                   )}
                 />
-                {errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
+                {errors.role && <span className="text-13 text-red-500">{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 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
                   htmlFor="use_case"
                 >
-                  What is your domain expertise? Choose one.
+                  What is your domain expertise? Choose one or more.
                 </label>
                 <Controller
                   control={control}
                   name="use_case"
                   rules={{
-                    required: "This field is required",
+                    required: "Please select at least one option",
+                    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">
-                      {USER_DOMAIN.map((userDomain) => (
-                        <div
-                          key={userDomain}
-                          className={`flex-shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-custom-background-90 ${
-                            value === userDomain ? "border-custom-primary-100" : "border-custom-border-300"
-                          } rounded px-3 py-1.5 text-sm font-medium`}
-                          onClick={() => onChange(userDomain)}
-                        >
-                          {userDomain}
-                        </div>
-                      ))}
+                      {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-surface-2 ${
+                              isSelected ? "border-accent-strong" : "border-strong"
+                            } rounded px-3 py-1.5 text-13 font-medium`}
+                            onClick={() => {
+                              const currentValue = value || [];
+                              if (isSelected) {
+                                onChange(currentValue.filter((item) => item !== userDomain));
+                              } else {
+                                onChange([...currentValue, userDomain]);
+                              }
+                            }}
+                          >
+                            {userDomain}
+                          </div>
+                        );
+                      })}
                     </div>
                   )}
                 />
-                {errors.use_case && <span className="text-sm text-red-500">{errors.use_case.message}</span>}
+                {errors.use_case && <span className="text-13 text-red-500">{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 37fa6a5182..22fbf9ccc7 100644
--- a/apps/web/core/components/onboarding/root.tsx
+++ b/apps/web/core/components/onboarding/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useCallback, useEffect, useState } from "react";
 import { observer } from "mobx-react";
@@ -21,7 +19,7 @@ type Props = {
   invitations?: IWorkspaceMemberInvitation[];
 };
 
-export const OnboardingRoot: FC<Props> = observer(({ invitations = [] }) => {
+export const OnboardingRoot = observer(function OnboardingRoot({ invitations = [] }: Props) {
   const [currentStep, setCurrentStep] = useState<TOnboardingStep>(EOnboardingSteps.PROFILE_SETUP);
   // store hooks
   const { data: user } = useUser();
diff --git a/apps/web/core/components/onboarding/step-indicator.tsx b/apps/web/core/components/onboarding/step-indicator.tsx
index 14533984e8..1e38daf8b1 100644
--- a/apps/web/core/components/onboarding/step-indicator.tsx
+++ b/apps/web/core/components/onboarding/step-indicator.tsx
@@ -7,7 +7,7 @@ interface OnboardingStepIndicatorProps {
   totalSteps: number;
 }
 
-export const OnboardingStepIndicator: React.FC<OnboardingStepIndicatorProps> = ({ currentStep, totalSteps }) => {
+export function OnboardingStepIndicator({ currentStep, totalSteps }: OnboardingStepIndicatorProps) {
   const renderIndicators = () => {
     const indicators = [];
 
@@ -22,7 +22,7 @@ export const OnboardingStepIndicator: React.FC<OnboardingStepIndicatorProps> = (
           key={`line-${i}`}
           className={cn("h-1.5 -ml-0.5 w-full", {
             "bg-green-700": isCompleted,
-            "bg-custom-background-100": !isCompleted,
+            "bg-surface-1": !isCompleted,
             "rounded-l-full": isFirstStep,
             "rounded-r-full": isLastStep || isActive,
             "z-10": isActive,
@@ -36,10 +36,10 @@ export const OnboardingStepIndicator: React.FC<OnboardingStepIndicatorProps> = (
 
   return (
     <div className="flex flex-col justify-center">
-      <div className="text-sm text-custom-text-300 font-medium">
+      <div className="text-13 text-tertiary font-medium">
         {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>
   );
-};
+}
diff --git a/apps/web/core/components/onboarding/steps/common/header.tsx b/apps/web/core/components/onboarding/steps/common/header.tsx
index 429becddbd..7137ec2090 100644
--- a/apps/web/core/components/onboarding/steps/common/header.tsx
+++ b/apps/web/core/components/onboarding/steps/common/header.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 
 type Props = {
@@ -7,9 +5,11 @@ type Props = {
   description: string;
 };
 
-export const CommonOnboardingHeader: FC<Props> = ({ title, description }) => (
-  <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>
-);
+export function CommonOnboardingHeader({ title, description }: Props) {
+  return (
+    <div className="text-left space-y-2">
+      <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/profile/consent.tsx b/apps/web/core/components/onboarding/steps/profile/consent.tsx
index c662985903..ec1b51865b 100644
--- a/apps/web/core/components/onboarding/steps/profile/consent.tsx
+++ b/apps/web/core/components/onboarding/steps/profile/consent.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { Check } from "lucide-react";
 
@@ -8,17 +6,19 @@ type Props = {
   handleChange: (checked: boolean) => void;
 };
 
-export const MarketingConsent: FC<Props> = ({ isChecked, handleChange }) => (
-  <div className="flex items-center justify-center gap-1.5">
-    <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"
-      }`}
-    >
-      {isChecked && <Check className="w-3 h-3 text-white" />}
-    </button>
-    <span className="text-sm text-custom-text-300">I agree to Plane marketing communications</span>
-  </div>
-);
+export function MarketingConsent({ isChecked, handleChange }: Props) {
+  return (
+    <div className="flex items-center justify-center gap-1.5">
+      <button
+        type="button"
+        onClick={() => handleChange(!isChecked)}
+        className={`size-4 rounded-sm border-2 flex items-center justify-center ${
+          isChecked ? "bg-accent-primary border-accent-strong" : "border-strong"
+        }`}
+      >
+        {isChecked && <Check className="w-3 h-3 text-on-color" />}
+      </button>
+      <span className="text-13 text-tertiary">I agree to Plane marketing communications</span>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/onboarding/steps/profile/root.tsx b/apps/web/core/components/onboarding/steps/profile/root.tsx
index e2ad3f3a0d..0870d6367b 100644
--- a/apps/web/core/components/onboarding/steps/profile/root.tsx
+++ b/apps/web/core/components/onboarding/steps/profile/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
@@ -17,6 +15,7 @@ import { UserImageUploadModal } from "@/components/core/modals/user-image-upload
 // helpers
 import { captureError, captureView } from "@/helpers/event-tracker.helper";
 // hooks
+import { useInstance } from "@/hooks/store/use-instance";
 import { useUser, useUserProfile } from "@/hooks/store/user";
 // services
 import { AuthService } from "@/services/auth.service";
@@ -36,7 +35,7 @@ export type TProfileSetupFormValues = {
   password?: string;
   confirm_password?: string;
   role?: string;
-  use_case?: string;
+  use_case?: string[];
   has_marketing_email_consent?: boolean;
 };
 
@@ -51,12 +50,13 @@ const defaultValues: Partial<TProfileSetupFormValues> = {
   has_marketing_email_consent: true,
 };
 
-export const ProfileSetupStep: FC<Props> = observer(({ handleStepChange }) => {
+export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepChange }: Props) {
   // states
   const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
   // store hooks
   const { data: user, updateCurrentUser } = useUser();
   const { updateUserProfile } = useUserProfile();
+  const { config: instanceConfig } = useInstance();
   // form info
   const {
     getValues,
@@ -172,7 +172,7 @@ export const ProfileSetupStep: FC<Props> = observer(({ handleStepChange }) => {
       />
       <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="size-12 rounded-full bg-accent-primary flex items-center justify-center text-on-color font-semibold text-18"
           type="button"
           onClick={() => setIsImageUploadModalOpen(true)}
         >
@@ -189,12 +189,12 @@ export const ProfileSetupStep: FC<Props> = observer(({ handleStepChange }) => {
         </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 text-tertiary hover:text-secondary text-13 px-2 py-1"
           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>
 
@@ -202,7 +202,7 @@ export const ProfileSetupStep: FC<Props> = observer(({ handleStepChange }) => {
         {/* 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:content-['*'] after:ml-0.5 after:text-red-500"
             htmlFor="first_name"
           >
             Name
@@ -227,9 +227,9 @@ export const ProfileSetupStep: FC<Props> = observer(({ handleStepChange }) => {
                 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 px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong placeholder:text-placeholder focus:border-transparent transition-all duration-200",
                   {
-                    "border-custom-border-300": !errors.first_name,
+                    "border-strong": !errors.first_name,
                     "border-red-500": errors.first_name,
                   }
                 )}
@@ -238,7 +238,7 @@ export const ProfileSetupStep: FC<Props> = observer(({ handleStepChange }) => {
               />
             )}
           />
-          {errors.first_name && <span className="text-sm text-red-500">{errors.first_name.message}</span>}
+          {errors.first_name && <span className="text-13 text-red-500">{errors.first_name.message}</span>}
         </div>
 
         {/* setting up password for the first time */}
@@ -250,17 +250,19 @@ export const ProfileSetupStep: FC<Props> = observer(({ handleStepChange }) => {
         )}
       </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>
 
       {/* Marketing Consent */}
-      <MarketingConsent
-        isChecked={!!watch("has_marketing_email_consent")}
-        handleChange={(has_marketing_email_consent) =>
-          setValue("has_marketing_email_consent", has_marketing_email_consent)
-        }
-      />
+      {!instanceConfig?.is_self_managed && (
+        <MarketingConsent
+          isChecked={!!watch("has_marketing_email_consent")}
+          handleChange={(has_marketing_email_consent) =>
+            setValue("has_marketing_email_consent", has_marketing_email_consent)
+          }
+        />
+      )}
     </form>
   );
 });
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 ed7a801bb1..12d395ef12 100644
--- a/apps/web/core/components/onboarding/steps/profile/set-password.tsx
+++ b/apps/web/core/components/onboarding/steps/profile/set-password.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState, useCallback, useMemo } from "react";
 import { Lock } from "lucide-react";
 import { ChevronDownIcon } from "@plane/propel/icons";
@@ -17,11 +15,7 @@ interface SetPasswordRootProps {
   disabled?: boolean;
 }
 
-export const SetPasswordRoot: React.FC<SetPasswordRootProps> = ({
-  onPasswordChange,
-  onConfirmPasswordChange,
-  disabled = false,
-}) => {
+export function SetPasswordRoot({ onPasswordChange, onConfirmPasswordChange, disabled = false }: SetPasswordRootProps) {
   const [isExpanded, setIsExpanded] = useState(false);
   const [passwordState, setPasswordState] = useState<PasswordState>({
     password: "",
@@ -64,7 +58,7 @@ export const SetPasswordRoot: React.FC<SetPasswordRootProps> = ({
 
   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]
   );
 
@@ -77,23 +71,21 @@ export const SetPasswordRoot: React.FC<SetPasswordRootProps> = ({
   );
 
   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 rounded-lg overflow-hidden transition-all duration-300 ease-in-out bg-surface-2`}>
       <div
         className={cn(
-          "flex items-center justify-between transition-colors duration-200 px-3 py-2 text-sm",
+          "flex items-center justify-between transition-colors duration-200 px-3 py-2 text-13",
           disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
           isExpanded && "pb-1"
         )}
         onClick={handleToggleExpand}
       >
-        <div className="flex items-center gap-1 text-custom-text-300">
+        <div className="flex items-center gap-1 text-tertiary">
           <Lock 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>
@@ -113,7 +105,7 @@ export const SetPasswordRoot: React.FC<SetPasswordRootProps> = ({
 
         <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="text-tertiary font-medium transform transition-all duration-300 ease-in-out delay-75 text-13">
             Confirm password
           </div>
 
@@ -126,11 +118,11 @@ export const SetPasswordRoot: React.FC<SetPasswordRootProps> = ({
               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="text-11 text-red-500 mt-1">Passwords do not match</p>}
+            {isPasswordValid && <p className="text-11 text-green-500 mt-1">✓ Passwords match</p>}
           </div>
         </div>
       </div>
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/onboarding/steps/role/root.tsx b/apps/web/core/components/onboarding/steps/role/root.tsx
index 8cf8acb6b5..7b3cbb347d 100644
--- a/apps/web/core/components/onboarding/steps/role/root.tsx
+++ b/apps/web/core/components/onboarding/steps/role/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
@@ -37,7 +35,7 @@ const defaultValues = {
   role: "",
 };
 
-export const RoleSetupStep: FC<Props> = observer(({ handleStepChange }) => {
+export const RoleSetupStep = observer(function RoleSetupStep({ handleStepChange }: Props) {
   // store hooks
   const { data: profile, updateUserProfile } = useUserProfile();
   // form info
@@ -109,7 +107,7 @@ export const RoleSetupStep: FC<Props> = observer(({ 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"
@@ -132,20 +130,20 @@ export const RoleSetupStep: FC<Props> = observer(({ handleStepChange }) => {
                     }}
                     className={`w-full px-3 py-2 rounded-lg border transition-all duration-200 flex items-center justify-between ${
                       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 hover:border-strong text-tertiary"
                     }`}
                   >
                     <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={`size-4 rounded-sm border-2 flex items-center justify-center bg-accent-primary border-blue-500`}
                         >
-                          <Check className="w-3 h-3 text-white" />
+                          <Check className="w-3 h-3 text-on-color" />
                         </button>
                       </>
                     )}
@@ -155,14 +153,14 @@ export const RoleSetupStep: FC<Props> = observer(({ handleStepChange }) => {
             </div>
           )}
         />
-        {errors.role && <span className="text-sm text-red-500">{errors.role.message}</span>}
+        {errors.role && <span className="text-13 text-red-500">{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="text-tertiary w-full" 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 adb1e80acd..f4941eafa9 100644
--- a/apps/web/core/components/onboarding/steps/root.tsx
+++ b/apps/web/core/components/onboarding/steps/root.tsx
@@ -1,7 +1,4 @@
-"use client";
-
-import type { FC } from "react";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useRef } from "react";
 // plane imports
 import type { IWorkspaceMemberInvitation } from "@plane/types";
 import { EOnboardingSteps } from "@plane/types";
@@ -18,8 +15,25 @@ type Props = {
   handleStepChange: (step: EOnboardingSteps, skipInvites?: boolean) => void;
 };
 
-export const OnboardingStepRoot: FC<Props> = (props) => {
-  const { currentStep, invitations, handleStepChange } = props;
+function OnboardingStepContent({ currentStep, invitations, handleStepChange }: Props) {
+  switch (currentStep) {
+    case EOnboardingSteps.PROFILE_SETUP:
+      return <ProfileSetupStep handleStepChange={handleStepChange} />;
+    case EOnboardingSteps.ROLE_SETUP:
+      return <RoleSetupStep handleStepChange={handleStepChange} />;
+    case EOnboardingSteps.USE_CASE_SETUP:
+      return <UseCaseSetupStep handleStepChange={handleStepChange} />;
+    case EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN:
+      return <WorkspaceSetupStep invitations={invitations ?? []} handleStepChange={handleStepChange} />;
+    case EOnboardingSteps.INVITE_MEMBERS:
+      return <InviteTeamStep handleStepChange={handleStepChange} />;
+    default:
+      return null;
+  }
+}
+
+export function OnboardingStepRoot(props: Props) {
+  const { currentStep } = props;
   // ref for the scrollable container
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
@@ -33,25 +47,13 @@ export const OnboardingStepRoot: FC<Props> = (props) => {
     }
   }, [currentStep]);
 
-  // memoized step component mapping
-  const stepComponents = useMemo(
-    () => ({
-      [EOnboardingSteps.PROFILE_SETUP]: <ProfileSetupStep handleStepChange={handleStepChange} />,
-      [EOnboardingSteps.ROLE_SETUP]: <RoleSetupStep handleStepChange={handleStepChange} />,
-      [EOnboardingSteps.USE_CASE_SETUP]: <UseCaseSetupStep handleStepChange={handleStepChange} />,
-      [EOnboardingSteps.WORKSPACE_CREATE_OR_JOIN]: (
-        <WorkspaceSetupStep invitations={invitations ?? []} handleStepChange={handleStepChange} />
-      ),
-      [EOnboardingSteps.INVITE_MEMBERS]: <InviteTeamStep handleStepChange={handleStepChange} />,
-    }),
-    [handleStepChange, invitations]
-  );
-
   return (
     <div ref={scrollContainerRef} className="flex-1 overflow-y-auto">
       <div className="flex items-center justify-center min-h-full p-8">
-        <div className="w-full max-w-[24rem]">{stepComponents[currentStep]} </div>
+        <div className="w-full max-w-[24rem]">
+          <OnboardingStepContent {...props} />
+        </div>
       </div>
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/onboarding/steps/team/root.tsx b/apps/web/core/components/onboarding/steps/team/root.tsx
index ecb880d3ad..346de5c74b 100644
--- a/apps/web/core/components/onboarding/steps/team/root.tsx
+++ b/apps/web/core/components/onboarding/steps/team/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import type {
@@ -81,7 +79,7 @@ const placeholderEmails = [
   "thomas.selfridge@frstflt.com",
   "albert.zahm@frstflt.com",
 ];
-const InviteMemberInput: React.FC<InviteMemberFormProps> = observer((props) => {
+const InviteMemberInput = observer(function InviteMemberInput(props: InviteMemberFormProps) {
   const {
     control,
     index,
@@ -164,7 +162,7 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = observer((props) => {
                 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"
               />
             )}
@@ -188,28 +186,26 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = observer((props) => {
                 <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 px-2.5 py-2 text-13 border-[0.5px] border-strong"
                 >
                   <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="p-2 absolute space-y-1 z-10 mt-1 h-fit w-48 sm:w-60 rounded-md border border-strong bg-surface-1 shadow-sm focus:outline-none"
                     ref={setPopperElement}
                     style={styles.popper}
                     {...attributes.popper}
@@ -220,16 +216,16 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = observer((props) => {
                         key={key}
                         value={parseInt(key)}
                         className={({ active, selected }) =>
-                          `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                          `cursor-pointer select-none truncate rounded-sm px-1 py-1.5 ${
                             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 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" />}
                           </div>
@@ -245,24 +241,24 @@ const InviteMemberInput: React.FC<InviteMemberFormProps> = observer((props) => {
         {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-red-500">That doesn{"'"}t look like an email address.</span>
         </div>
       )}
     </div>
   );
 });
 
-export const InviteTeamStep: React.FC<Props> = observer((props) => {
+export const InviteTeamStep = observer(function InviteTeamStep(props: Props) {
   const { handleStepChange } = props;
 
   const [isInvitationDisabled, setIsInvitationDisabled] = useState(true);
@@ -364,10 +360,10 @@ export const InviteTeamStep: React.FC<Props> = observer((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="w-full text-13 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="col-span-6 px-1 text-13 text-secondary font-medium">Email</div>
+          <div className="col-span-4 px-1 text-13 text-secondary font-medium">Role</div>
         </div>
         <div className="mb-3 space-y-3 sm:space-y-4">
           {fields.map((field, index) => (
@@ -389,7 +385,7 @@ export const InviteTeamStep: React.FC<Props> = observer((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="flex items-center mx-8 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} />
@@ -400,14 +396,14 @@ export const InviteTeamStep: React.FC<Props> = observer((props) => {
         <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/root.tsx b/apps/web/core/components/onboarding/steps/usecase/root.tsx
index 19ba706d01..d0af839b27 100644
--- a/apps/web/core/components/onboarding/steps/usecase/root.tsx
+++ b/apps/web/core/components/onboarding/steps/usecase/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
@@ -24,10 +22,10 @@ type Props = {
 };
 
 const defaultValues = {
-  use_case: "",
+  use_case: [] as string[],
 };
 
-export const UseCaseSetupStep: FC<Props> = observer(({ handleStepChange }) => {
+export const UseCaseSetupStep = observer(function UseCaseSetupStep({ handleStepChange }: Props) {
   // store hooks
   const { data: profile, updateUserProfile } = useUserProfile();
   // form info
@@ -38,7 +36,7 @@ export const UseCaseSetupStep: FC<Props> = observer(({ handleStepChange }) => {
   } = useForm<TProfileSetupFormValues>({
     defaultValues: {
       ...defaultValues,
-      use_case: profile?.use_case,
+      use_case: profile?.use_case ? profile.use_case.split(". ") : [],
     },
     mode: "onChange",
   });
@@ -46,7 +44,7 @@ export const UseCaseSetupStep: FC<Props> = observer(({ handleStepChange }) => {
   // handle submit
   const handleSubmitUserPersonalization = async (formData: TProfileSetupFormValues) => {
     const profileUpdatePayload: Partial<TUserProfile> = {
-      use_case: formData.use_case,
+      use_case: formData.use_case && formData.use_case.length > 0 ? formData.use_case.join(". ") : undefined,
     };
     try {
       await Promise.all([
@@ -56,7 +54,7 @@ export const UseCaseSetupStep: FC<Props> = observer(({ handleStepChange }) => {
       captureSuccess({
         eventName: USER_TRACKER_EVENTS.add_details,
         payload: {
-          use_case: formData.use_case,
+          use_case: profileUpdatePayload.use_case,
         },
       });
       setToast({
@@ -102,62 +100,70 @@ export const UseCaseSetupStep: FC<Props> = observer(({ handleStepChange }) => {
 
       {/* Use Case Selection */}
       <div className="flex flex-col gap-3">
-        <p className="text-sm font-medium text-custom-text-400">Select any</p>
+        <p className="text-body-sm-semibold text-placeholder">Select one or more</p>
 
         <Controller
           control={control}
           name="use_case"
           rules={{
-            required: "This field is required",
+            required: "Please select at least one option",
+            validate: (value) => (value && value.length > 0) || "Please select at least one option",
           }}
           render={({ field: { value, onChange } }) => (
             <div className="flex flex-col gap-3">
               {USE_CASES.map((useCase) => {
-                const isSelected = value === useCase;
+                const isSelected = value?.includes(useCase) || false;
                 return (
                   <button
                     key={useCase}
                     onClick={(e) => {
                       e.preventDefault();
                       e.stopPropagation();
-                      onChange(useCase);
+                      const currentValue = value || [];
+                      if (isSelected) {
+                        // Remove from array
+                        onChange(currentValue.filter((item) => item !== useCase));
+                      } else {
+                        // Add to array
+                        onChange([...currentValue, useCase]);
+                      }
                     }}
                     className={`w-full px-3 py-2 rounded-lg border transition-all duration-200 flex items-center gap-2 ${
                       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 hover:border-strong text-tertiary"
                     }`}
                   >
                     <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(`size-4 rounded-sm border-2 flex items-center justify-center`, {
+                        "bg-accent-primary border-accent-strong": isSelected,
+                        "border-strong": !isSelected,
                       })}
                     >
                       <Check
-                        className={cn("w-3 h-3 text-white", {
+                        className={cn("w-3 h-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-red-500">{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 2419f67ce6..b97698c417 100644
--- a/apps/web/core/components/onboarding/steps/workspace/create.tsx
+++ b/apps/web/core/components/onboarding/steps/workspace/create.tsx
@@ -1,6 +1,4 @@
-"use client";
-
-import React, { useState } from "react";
+import { useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 import { CircleCheck } from "lucide-react";
@@ -37,282 +35,284 @@ type Props = {
 
 const workspaceService = new WorkspaceService();
 
-export const WorkspaceCreateStep: React.FC<Props> = observer(
-  ({ user, onComplete, handleCurrentViewChange, hasInvitations = false }) => {
-    // states
-    const [slugError, setSlugError] = useState(false);
-    const [invalidSlug, setInvalidSlug] = useState(false);
-    // plane hooks
-    const { t } = useTranslation();
-    // store hooks
-    const { updateUserProfile } = useUserProfile();
-    const { fetchCurrentUserSettings } = useUserSettings();
-    const { createWorkspace, fetchWorkspaces } = useWorkspace();
+export const WorkspaceCreateStep = observer(function WorkspaceCreateStep({
+  user,
+  onComplete,
+  handleCurrentViewChange,
+  hasInvitations = false,
+}: Props) {
+  // states
+  const [slugError, setSlugError] = useState(false);
+  const [invalidSlug, setInvalidSlug] = useState(false);
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { updateUserProfile } = useUserProfile();
+  const { fetchCurrentUserSettings } = useUserSettings();
+  const { createWorkspace, fetchWorkspaces } = useWorkspace();
 
-    const isWorkspaceCreationEnabled = getIsWorkspaceCreationDisabled() === false;
+  const isWorkspaceCreationEnabled = getIsWorkspaceCreationDisabled() === false;
 
-    // form info
-    const {
-      handleSubmit,
-      control,
-      setValue,
-      formState: { errors, isSubmitting, isValid },
-    } = useForm<IWorkspace>({
-      defaultValues: {
-        name: "",
-        slug: "",
-        organization_size: "",
-      },
-      mode: "onChange",
-    });
+  // form info
+  const {
+    handleSubmit,
+    control,
+    setValue,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm<IWorkspace>({
+    defaultValues: {
+      name: "",
+      slug: "",
+      organization_size: "",
+    },
+    mode: "onChange",
+  });
 
-    const handleCreateWorkspace = async (formData: IWorkspace) => {
-      if (isSubmitting) return;
+  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(() =>
+    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"),
+          });
+          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"),
-          })
-        );
-    };
-
-    const completeStep = async (workspaceId: string) => {
-      if (!user) return;
-      await updateUserProfile({
-        last_workspace_id: workspaceId,
+          });
+        }
+      } else {
+        setSlugError(true);
+      }
+    } catch {
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("workspace_creation.toast.error.title"),
+        message: t("workspace_creation.toast.error.message"),
       });
-      await fetchCurrentUserSettings();
-    };
-
-    const isButtonDisabled = !isValid || invalidSlug || isSubmitting;
-
-    if (!isWorkspaceCreationEnabled) {
-      return (
-        <div className="flex flex-col gap-10">
-          <span className="text-center text-base text-custom-text-300">
-            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.
-          </span>
-        </div>
-      );
     }
-    return (
-      <form className="flex flex-col gap-10" onSubmit={handleSubmit(handleCreateWorkspace)}>
-        <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"
-              htmlFor="name"
-            >
-              {t("workspace_creation.form.name.label")}
-            </label>
-            <Controller
-              control={control}
-              name="name"
-              rules={{
-                required: t("common.errors.required"),
-                validate: (value) =>
-                  /^[\w\s-]*$/.test(value) || t("workspace_creation.errors.validation.name_alphanumeric"),
-                maxLength: {
-                  value: 80,
-                  message: t("workspace_creation.errors.validation.name_length"),
-                },
-              }}
-              render={({ field: { value, ref, onChange } }) => (
-                <div className="relative flex items-center rounded-md">
-                  <input
-                    id="name"
-                    name="name"
-                    type="text"
-                    value={value}
-                    onChange={(event) => {
-                      onChange(event.target.value);
-                      setValue("name", event.target.value);
-                      setValue("slug", event.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"), {
-                        shouldValidate: true,
-                      });
-                    }}
-                    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",
-                      {
-                        "border-custom-border-300": !errors.name,
-                        "border-red-500": errors.name,
-                      }
-                    )}
-                    autoFocus
-                  />
-                </div>
-              )}
-            />
-            {errors.name && <span className="text-sm text-red-500">{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"
-              htmlFor="slug"
-            >
-              {t("workspace_creation.form.url.label")}
-            </label>
-            <Controller
-              control={control}
-              name="slug"
-              rules={{
-                required: t("common.errors.required"),
-                maxLength: {
-                  value: 48,
-                  message: t("workspace_creation.errors.validation.url_length"),
-                },
-              }}
-              render={({ field: { value, ref, onChange } }) => (
-                <div
+  const completeStep = async (workspaceId: string) => {
+    if (!user) return;
+    await updateUserProfile({
+      last_workspace_id: workspaceId,
+    });
+    await fetchCurrentUserSettings();
+  };
+
+  const isButtonDisabled = !isValid || invalidSlug || isSubmitting;
+
+  if (!isWorkspaceCreationEnabled) {
+    return (
+      <div className="flex flex-col gap-10">
+        <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.
+        </span>
+      </div>
+    );
+  }
+  return (
+    <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-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            htmlFor="name"
+          >
+            {t("workspace_creation.form.name.label")}
+          </label>
+          <Controller
+            control={control}
+            name="name"
+            rules={{
+              required: t("common.errors.required"),
+              validate: (value) =>
+                /^[\w\s-]*$/.test(value) || t("workspace_creation.errors.validation.name_alphanumeric"),
+              maxLength: {
+                value: 80,
+                message: t("workspace_creation.errors.validation.name_length"),
+              },
+            }}
+            render={({ field: { value, ref, onChange } }) => (
+              <div className="relative flex items-center rounded-md">
+                <input
+                  id="name"
+                  name="name"
+                  type="text"
+                  value={value}
+                  onChange={(event) => {
+                    onChange(event.target.value);
+                    setValue("name", event.target.value);
+                    setValue("slug", event.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"), {
+                      shouldValidate: true,
+                    });
+                  }}
+                  placeholder="Enter workspace name"
+                  ref={ref}
                   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",
+                    "w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong placeholder:text-placeholder focus:border-transparent transition-all duration-200",
                     {
-                      "border-custom-border-300": !errors.name,
+                      "border-strong": !errors.name,
                       "border-red-500": errors.name,
                     }
                   )}
-                >
-                  <span className={cn("pr-0 text-custom-text-200 rounded-md 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);
-                      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"
-                    )}
-                  />
+                  // eslint-disable-next-line jsx-a11y/no-autofocus
+                  autoFocus
+                />
+              </div>
+            )}
+          />
+          {errors.name && <span className="text-13 text-red-500">{errors.name.message}</span>}
+        </div>
+        <div className="flex flex-col gap-2">
+          <label
+            className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            htmlFor="slug"
+          >
+            {t("workspace_creation.form.url.label")}
+          </label>
+          <Controller
+            control={control}
+            name="slug"
+            rules={{
+              required: t("common.errors.required"),
+              maxLength: {
+                value: 48,
+                message: t("workspace_creation.errors.validation.url_length"),
+              },
+            }}
+            render={({ field: { value, ref, onChange } }) => (
+              <div
+                className={cn(
+                  "flex items-center w-full px-3 py-2 text-secondary border border-strong rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong focus:border-transparent transition-all duration-200",
+                  {
+                    "border-strong": !errors.name,
+                    "border-red-500": errors.name,
+                  }
+                )}
+              >
+                <span className={cn("pr-0 text-secondary rounded-md 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);
+                    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-secondary border-none ring-none outline-none rounded-md bg-surface-1 placeholder:text-placeholder"
+                  )}
+                />
+              </div>
+            )}
+          />
+          <p className="text-13 text-tertiary">{t("workspace_creation.form.url.edit_slug")}</p>
+          {slugError && (
+            <p className="-mt-3 text-13 text-red-500">{t("workspace_creation.errors.validation.url_already_taken")}</p>
+          )}
+          {invalidSlug && (
+            <p className="text-13 text-red-500">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
+          )}
+          {errors.slug && <span className="text-13 text-red-500">{errors.slug.message}</span>}
+        </div>
+        <div className="flex flex-col gap-2">
+          <label
+            className="text-13 text-tertiary font-medium after:content-['*'] after:ml-0.5 after:text-red-500"
+            htmlFor="organization_size"
+          >
+            {t("workspace_creation.form.organization_size.label")}
+          </label>
+          <div className="w-full">
+            <Controller
+              name="organization_size"
+              control={control}
+              rules={{ required: t("common.errors.required") }}
+              render={({ field: { value, onChange } }) => (
+                <div className="flex flex-wrap gap-3">
+                  {ORGANIZATION_SIZE.map((size) => {
+                    const isSelected = value === size;
+                    return (
+                      <button
+                        key={size}
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          onChange(size);
+                        }}
+                        className={`text-13 px-3 py-2 rounded-lg border transition-all duration-200 flex gap-1 items-center justify-between ${
+                          isSelected
+                            ? "border-subtle bg-layer-1 text-secondary"
+                            : "border-subtle hover:border-strong text-tertiary"
+                        }`}
+                      >
+                        <CircleCheck className={cn("size-4 text-placeholder", isSelected && "text-secondary")} />
+
+                        <span className="font-medium">{size}</span>
+                      </button>
+                    );
+                  })}
                 </div>
               )}
             />
-            <p className="text-sm text-custom-text-300">{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>
+            {errors.organization_size && (
+              <span className="text-13 text-red-500">{errors.organization_size.message}</span>
             )}
-            {invalidSlug && (
-              <p className="text-sm text-red-500">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
-            )}
-            {errors.slug && <span className="text-sm text-red-500">{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"
-              htmlFor="organization_size"
-            >
-              {t("workspace_creation.form.organization_size.label")}
-            </label>
-            <div className="w-full">
-              <Controller
-                name="organization_size"
-                control={control}
-                rules={{ required: t("common.errors.required") }}
-                render={({ field: { value, onChange } }) => (
-                  <div className="flex flex-wrap gap-3">
-                    {ORGANIZATION_SIZE.map((size) => {
-                      const isSelected = value === size;
-                      return (
-                        <button
-                          key={size}
-                          onClick={(e) => {
-                            e.preventDefault();
-                            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 ${
-                            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"
-                          }`}
-                        >
-                          <CircleCheck
-                            className={cn("size-4 text-custom-text-400", isSelected && "text-custom-text-200")}
-                          />
-
-                          <span className="font-medium">{size}</span>
-                        </button>
-                      );
-                    })}
-                  </div>
-                )}
-              />
-              {errors.organization_size && (
-                <span className="text-sm text-red-500">{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}
-          >
-            {isSubmitting ? <Spinner height="20px" width="20px" /> : t("workspace_creation.button.default")}
+      </div>
+      <div className="flex flex-col gap-4">
+        <Button
+          data-ph-element={WORKSPACE_TRACKER_ELEMENTS.ONBOARDING_CREATE_WORKSPACE_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="ghost" size="xl" className="w-full" onClick={handleCurrentViewChange}>
+            Join existing workspace
           </Button>
-          {hasInvitations && (
-            <Button variant="link-neutral" size="lg" className="w-full" onClick={handleCurrentViewChange}>
-              Join existing workspace
-            </Button>
-          )}
-        </div>
-      </form>
-    );
-  }
-);
+        )}
+      </div>
+    </form>
+  );
+});
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 70d0c6b61d..7cc70e8d7f 100644
--- a/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx
+++ b/apps/web/core/components/onboarding/steps/workspace/join-invites.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 // plane imports
 import { MEMBER_TRACKER_ELEMENTS, MEMBER_TRACKER_EVENTS, ROLE } from "@plane/constants";
@@ -26,7 +24,7 @@ type Props = {
 };
 const workspaceService = new WorkspaceService();
 
-export const WorkspaceJoinInvitesStep: React.FC<Props> = (props) => {
+export function WorkspaceJoinInvitesStep(props: Props) {
   const { invitations, handleNextStep, handleCurrentViewChange } = props;
   // states
   const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
@@ -88,7 +86,7 @@ export const WorkspaceJoinInvitesStep: React.FC<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 px-3 py-2 border-subtle hover:bg-surface-2`}
                 onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
               >
                 <div className="flex-shrink-0">
@@ -99,8 +97,8 @@ export const WorkspaceJoinInvitesStep: React.FC<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} />
@@ -112,7 +110,7 @@ export const WorkspaceJoinInvitesStep: React.FC<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}
@@ -121,8 +119,8 @@ export const WorkspaceJoinInvitesStep: React.FC<Props> = (props) => {
           {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}
@@ -134,4 +132,4 @@ export const WorkspaceJoinInvitesStep: React.FC<Props> = (props) => {
   ) : (
     <div>No Invitations found</div>
   );
-};
+}
diff --git a/apps/web/core/components/onboarding/steps/workspace/root.tsx b/apps/web/core/components/onboarding/steps/workspace/root.tsx
index 949d84e672..f5cfef3eca 100644
--- a/apps/web/core/components/onboarding/steps/workspace/root.tsx
+++ b/apps/web/core/components/onboarding/steps/workspace/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -15,7 +13,7 @@ type Props = {
   handleStepChange: (step: EOnboardingSteps, skipInvites?: boolean) => void;
 };
 
-export const WorkspaceSetupStep: React.FC<Props> = observer(({ invitations, handleStepChange }) => {
+export const WorkspaceSetupStep = observer(function WorkspaceSetupStep({ invitations, handleStepChange }: Props) {
   // states
   const [currentView, setCurrentView] = useState<ECreateOrJoinWorkspaceViews | null>(null);
   // store hooks
diff --git a/apps/web/core/components/onboarding/switch-account-dropdown.tsx b/apps/web/core/components/onboarding/switch-account-dropdown.tsx
index 48770f1356..02f81aaab2 100644
--- a/apps/web/core/components/onboarding/switch-account-dropdown.tsx
+++ b/apps/web/core/components/onboarding/switch-account-dropdown.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
@@ -16,7 +14,7 @@ type TSwitchAccountDropdownProps = {
   fullName?: string;
 };
 
-export const SwitchAccountDropdown: FC<TSwitchAccountDropdownProps> = observer((props) => {
+export const SwitchAccountDropdown = observer(function SwitchAccountDropdown(props: TSwitchAccountDropdownProps) {
   const { fullName } = props;
   // states
   const [showSwitchAccountModal, setShowSwitchAccountModal] = useState(false);
@@ -35,8 +33,8 @@ export const SwitchAccountDropdown: FC<TSwitchAccountDropdownProps> = observer((
     <>
       <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="flex items-center gap-x-2.5 px-2 py-1.5 rounded-lg bg-layer-1 z-10">
+          <div className="size-6 rounded-full bg-green-700 flex items-center justify-center text-on-color font-semibold text-13 capitalize">
             {user?.avatar_url ? (
               <img
                 src={getFileURL(user?.avatar_url)}
@@ -47,7 +45,7 @@ export const SwitchAccountDropdown: FC<TSwitchAccountDropdownProps> = observer((
               <>{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"
@@ -57,13 +55,13 @@ export const SwitchAccountDropdown: FC<TSwitchAccountDropdownProps> = observer((
           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 z-10 right-0 rounded-md border-[0.5px] border-strong mt-2 bg-surface-1 px-2 py-2.5 text-13 min-w-[12rem] 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("text-red-500 px-1 py-1.5 whitespace-nowrap text-left rounded-sm w-full", {
+                  "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 180e2aff25..8f94cdfb15 100644
--- a/apps/web/core/components/onboarding/switch-account-modal.tsx
+++ b/apps/web/core/components/onboarding/switch-account-modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 
 import { useTheme } from "next-themes";
@@ -17,7 +15,7 @@ type Props = {
   onClose: () => void;
 };
 
-export const SwitchAccountModal: React.FC<Props> = (props) => {
+export function SwitchAccountModal(props: Props) {
   const { isOpen, onClose } = props;
   // states
   const [switchingAccount, setSwitchingAccount] = useState(false);
@@ -64,7 +62,7 @@ export const SwitchAccountModal: React.FC<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">
@@ -78,21 +76,21 @@ export const SwitchAccountModal: React.FC<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">
+                      <Dialog.Title as="h3" className="text-20 font-medium leading-6 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>
                       )}
@@ -100,7 +98,7 @@ export const SwitchAccountModal: React.FC<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>
@@ -111,4 +109,4 @@ export const SwitchAccountModal: React.FC<Props> = (props) => {
       </Dialog>
     </Transition.Root>
   );
-};
+}
diff --git a/apps/web/core/components/onboarding/tour/sidebar.tsx b/apps/web/core/components/onboarding/tour/sidebar.tsx
deleted file mode 100644
index 61462ea44a..0000000000
--- a/apps/web/core/components/onboarding/tour/sidebar.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-"use client";
-
-// icons
-import { CycleIcon, ModuleIcon, PageIcon, ViewsIcon, WorkItemsIcon } from "@plane/propel/icons";
-// types
-import type { TTourSteps } from "./root";
-
-const sidebarOptions: {
-  key: TTourSteps;
-  label: string;
-  Icon: any;
-}[] = [
-  {
-    key: "work-items",
-    label: "Work items",
-    Icon: WorkItemsIcon,
-  },
-  {
-    key: "cycles",
-    label: "Cycles",
-    Icon: CycleIcon,
-  },
-  {
-    key: "modules",
-    label: "Modules",
-    Icon: ModuleIcon,
-  },
-  {
-    key: "views",
-    label: "Views",
-    Icon: ViewsIcon,
-  },
-  {
-    key: "pages",
-    label: "Pages",
-    Icon: PageIcon,
-  },
-];
-
-type Props = {
-  step: TTourSteps;
-  setStep: React.Dispatch<React.SetStateAction<TTourSteps>>;
-};
-
-export const TourSidebar: React.FC<Props> = ({ step, setStep }) => (
-  <div className="col-span-3 hidden bg-custom-background-90 p-8 lg:block">
-    <h3 className="text-lg font-medium">
-      Let{"'"}s get started!
-      <br />
-      Get more out of Plane.
-    </h3>
-    <div className="mt-8 space-y-5">
-      {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"
-          }`}
-          onClick={() => setStep(option.key)}
-          role="button"
-        >
-          <option.Icon className="h-4 w-4" aria-hidden="true" />
-          {option.label}
-        </h5>
-      ))}
-    </div>
-  </div>
-);
diff --git a/apps/web/core/components/pages/dropdowns/actions.tsx b/apps/web/core/components/pages/dropdowns/actions.tsx
index bf71af469e..c2ea9ec042 100644
--- a/apps/web/core/components/pages/dropdowns/actions.tsx
+++ b/apps/web/core/components/pages/dropdowns/actions.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -61,7 +59,7 @@ type Props = {
   storeType: EPageStoreType;
 };
 
-export const PageActions: React.FC<Props> = observer((props) => {
+export const PageActions = observer(function PageActions(props: Props) {
   const { extraOptions, optionsOrder, page, parentRef, storeType } = props;
   // states
   const [deletePageModal, setDeletePageModal] = useState(false);
@@ -89,114 +87,117 @@ export const PageActions: React.FC<Props> = observer((props) => {
     canCurrentUserMovePage,
   } = page;
   // menu items
-  const MENU_ITEMS: (TContextMenuItem & { key: TPageActions })[] = useMemo(() => {
-    const menuItems: (TContextMenuItem & { key: TPageActions })[] = [
-      {
-        key: "toggle-lock",
-        action: () => {
-          captureClick({
-            elementName: PROJECT_PAGE_TRACKER_ELEMENTS.LOCK_BUTTON,
-          });
-          pageOperations.toggleLock();
+  const MENU_ITEMS = useMemo(
+    function MENU_ITEMS() {
+      const menuItems: (TContextMenuItem & { key: TPageActions })[] = [
+        {
+          key: "toggle-lock",
+          action: () => {
+            captureClick({
+              elementName: PROJECT_PAGE_TRACKER_ELEMENTS.LOCK_BUTTON,
+            });
+            pageOperations.toggleLock();
+          },
+          title: is_locked ? "Unlock" : "Lock",
+          icon: is_locked ? LockKeyholeOpen : LockKeyhole,
+          shouldRender: canCurrentUserLockPage,
         },
-        title: is_locked ? "Unlock" : "Lock",
-        icon: is_locked ? LockKeyholeOpen : LockKeyhole,
-        shouldRender: canCurrentUserLockPage,
-      },
-      {
-        key: "toggle-access",
-        action: () => {
-          captureClick({
-            elementName: PROJECT_PAGE_TRACKER_ELEMENTS.ACCESS_TOGGLE,
-          });
-          pageOperations.toggleAccess();
+        {
+          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,
+          shouldRender: canCurrentUserChangeAccess && !archived_at,
         },
-        title: access === EPageAccess.PUBLIC ? "Make private" : "Make public",
-        icon: access === EPageAccess.PUBLIC ? Lock : Globe2,
-        shouldRender: canCurrentUserChangeAccess && !archived_at,
-      },
-      {
-        key: "open-in-new-tab",
-        action: pageOperations.openInNewTab,
-        title: "Open in new tab",
-        icon: ExternalLink,
-        shouldRender: true,
-      },
-      {
-        key: "copy-link",
-        action: pageOperations.copyLink,
-        title: "Copy link",
-        icon: Link,
-        shouldRender: true,
-      },
-      {
-        key: "make-a-copy",
-        action: () => {
-          captureClick({
-            elementName: PROJECT_PAGE_TRACKER_ELEMENTS.DUPLICATE_BUTTON,
-          });
-          pageOperations.duplicate();
+        {
+          key: "open-in-new-tab",
+          action: pageOperations.openInNewTab,
+          title: "Open in new tab",
+          icon: ExternalLink,
+          shouldRender: true,
         },
-        title: "Make a copy",
-        icon: Copy,
-        shouldRender: canCurrentUserDuplicatePage,
-      },
-      {
-        key: "archive-restore",
-        action: () => {
-          captureClick({
-            elementName: PROJECT_PAGE_TRACKER_ELEMENTS.ARCHIVE_BUTTON,
-          });
-          pageOperations.toggleArchive();
+        {
+          key: "copy-link",
+          action: pageOperations.copyLink,
+          title: "Copy link",
+          icon: Link,
+          shouldRender: true,
         },
-        title: archived_at ? "Restore" : "Archive",
-        icon: archived_at ? ArchiveRestoreIcon : ArchiveIcon,
-        shouldRender: canCurrentUserArchivePage,
-      },
-      {
-        key: "delete",
-        action: () => {
-          captureClick({
-            elementName: PROJECT_PAGE_TRACKER_ELEMENTS.CONTEXT_MENU,
-          });
-          setDeletePageModal(true);
+        {
+          key: "make-a-copy",
+          action: () => {
+            captureClick({
+              elementName: PROJECT_PAGE_TRACKER_ELEMENTS.DUPLICATE_BUTTON,
+            });
+            pageOperations.duplicate();
+          },
+          title: "Make a copy",
+          icon: Copy,
+          shouldRender: canCurrentUserDuplicatePage,
         },
-        title: "Delete",
-        icon: Trash2,
-        shouldRender: canCurrentUserDeletePage && !!archived_at,
-      },
-      {
-        key: "move",
-        action: () => setMovePageModal(true),
-        title: "Move",
-        icon: FileOutput,
-        shouldRender: canCurrentUserMovePage && isMovePageEnabled,
-      },
-    ];
-    if (extraOptions) {
-      menuItems.push(...extraOptions);
-    }
-    return menuItems;
-  }, [
-    access,
-    archived_at,
-    extraOptions,
-    is_locked,
-    isMovePageEnabled,
-    canCurrentUserArchivePage,
-    canCurrentUserChangeAccess,
-    canCurrentUserDeletePage,
-    canCurrentUserDuplicatePage,
-    canCurrentUserLockPage,
-    canCurrentUserMovePage,
-    pageOperations,
-  ]);
+        {
+          key: "archive-restore",
+          action: () => {
+            captureClick({
+              elementName: PROJECT_PAGE_TRACKER_ELEMENTS.ARCHIVE_BUTTON,
+            });
+            pageOperations.toggleArchive();
+          },
+          title: archived_at ? "Restore" : "Archive",
+          icon: archived_at ? ArchiveRestoreIcon : ArchiveIcon,
+          shouldRender: canCurrentUserArchivePage,
+        },
+        {
+          key: "delete",
+          action: () => {
+            captureClick({
+              elementName: PROJECT_PAGE_TRACKER_ELEMENTS.CONTEXT_MENU,
+            });
+            setDeletePageModal(true);
+          },
+          title: "Delete",
+          icon: Trash2,
+          shouldRender: canCurrentUserDeletePage && !!archived_at,
+        },
+        {
+          key: "move",
+          action: () => setMovePageModal(true),
+          title: "Move",
+          icon: FileOutput,
+          shouldRender: canCurrentUserMovePage && isMovePageEnabled,
+        },
+      ];
+      if (extraOptions) {
+        menuItems.push(...extraOptions);
+      }
+      return menuItems;
+    },
+    [
+      extraOptions,
+      is_locked,
+      canCurrentUserLockPage,
+      access,
+      canCurrentUserChangeAccess,
+      archived_at,
+      canCurrentUserDuplicatePage,
+      canCurrentUserArchivePage,
+      canCurrentUserDeletePage,
+      canCurrentUserMovePage,
+      isMovePageEnabled,
+      pageOperations,
+    ]
+  );
   // arrange options
-  const arrangedOptions = useMemo(
+  const arrangedOptions = useMemo<(TContextMenuItem & { key: TPageActions })[]>(
     () =>
       optionsOrder
         .map((key) => MENU_ITEMS.find((item) => item.key === key))
-        .filter((item) => !!item) as (TContextMenuItem & { key: TPageActions })[],
+        .filter((item): item is TContextMenuItem & { key: TPageActions } => !!item),
     [optionsOrder, MENU_ITEMS]
   );
 
diff --git a/apps/web/core/components/pages/editor/content-limit-banner.tsx b/apps/web/core/components/pages/editor/content-limit-banner.tsx
new file mode 100644
index 0000000000..13f453d086
--- /dev/null
+++ b/apps/web/core/components/pages/editor/content-limit-banner.tsx
@@ -0,0 +1,32 @@
+import { TriangleAlert } from "lucide-react";
+import { cn } from "@plane/utils";
+
+type Props = {
+  className?: string;
+  onDismiss?: () => void;
+};
+
+export function ContentLimitBanner({ className, onDismiss }: Props) {
+  return (
+    <div className={cn("flex items-center gap-2 bg-layer-2 border-b border-subtle-1 px-4 py-2.5 text-sm", className)}>
+      <div className="flex items-center gap-2 text-secondary 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>
+      </div>
+      {onDismiss && (
+        <button
+          type="button"
+          onClick={onDismiss}
+          className="ml-auto text-placeholder hover:text-secondary"
+          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 598a9e1fc2..53b61e0a5d 100644
--- a/apps/web/core/components/pages/editor/editor-body.tsx
+++ b/apps/web/core/components/pages/editor/editor-body.tsx
@@ -1,11 +1,12 @@
-import type { Dispatch, SetStateAction } from "react";
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useRef } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { LIVE_BASE_PATH, LIVE_BASE_URL } from "@plane/constants";
 import { CollaborativeDocumentEditorWithRef } from "@plane/editor";
 import type {
+  CollaborationState,
   EditorRefApi,
+  EditorTitleRefApi,
   TAIMenuProps,
   TDisplayConfig,
   TFileHandler,
@@ -24,7 +25,10 @@ import { useMember } from "@/hooks/store/use-member";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUser } from "@/hooks/store/user";
 import { usePageFilters } from "@/hooks/use-page-filters";
+import { useParseEditorContent } from "@/hooks/use-parse-editor-content";
 // plane web imports
+import type { TCustomEventHandlers } from "@/hooks/use-realtime-page-events";
+import { useRealtimePageEvents } from "@/hooks/use-realtime-page-events";
 import { EditorAIMenu } from "@/plane-web/components/pages";
 import type { TExtendedEditorExtensionsConfig } from "@/plane-web/hooks/pages";
 import type { EPageStoreType } from "@/plane-web/hooks/store";
@@ -50,25 +54,25 @@ type Props = {
   config: TEditorBodyConfig;
   editorReady: boolean;
   editorForwardRef: React.RefObject<EditorRefApi>;
-  handleConnectionStatus: Dispatch<SetStateAction<boolean>>;
   handleEditorReady: (status: boolean) => void;
   handleOpenNavigationPane: () => void;
   handlers: TEditorBodyHandlers;
   isNavigationPaneOpen: boolean;
   page: TPageInstance;
   webhookConnectionParams: TWebhookConnectionQueryParams;
-  projectId: string;
+  projectId?: string;
   workspaceSlug: string;
   storeType: EPageStoreType;
-
+  customRealtimeEventHandlers?: TCustomEventHandlers;
   extendedEditorProps: TExtendedEditorExtensionsConfig;
+  isFetchingFallbackBinary?: boolean;
+  onCollaborationStateChange?: (state: CollaborationState) => void;
 };
 
-export const PageEditorBody: React.FC<Props> = observer((props) => {
+export const PageEditorBody = observer(function PageEditorBody(props: Props) {
   const {
     config,
     editorForwardRef,
-    handleConnectionStatus,
     handleEditorReady,
     handleOpenNavigationPane,
     handlers,
@@ -79,7 +83,11 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     projectId,
     workspaceSlug,
     extendedEditorProps,
+    isFetchingFallbackBinary,
+    onCollaborationStateChange,
   } = props;
+  // refs
+  const titleEditorRef = useRef<EditorTitleRefApi>(null);
   // store hooks
   const { data: currentUser } = useUser();
   const { getWorkspaceBySlug } = useWorkspace();
@@ -87,10 +95,9 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
   // derived values
   const {
     id: pageId,
-    name: pageTitle,
     isContentEditable,
-    updateTitle,
     editor: { editorRef, updateAssetsList },
+    setSyncingStatus,
   } = page;
   const workspaceId = getWorkspaceBySlug(workspaceSlug)?.id ?? "";
   // use editor mention
@@ -101,8 +108,14 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
   // editor flaggings
   const { document: documentEditorExtensions } = useEditorFlagging({
     workspaceSlug,
+    projectId,
     storeType,
   });
+  // parse content
+  const { getEditorMetaData } = useParseEditorContent({
+    projectId,
+    workspaceSlug,
+  });
   // page filters
   const { fontSize, fontStyle, isFullWidth } = usePageFilters();
   // translation
@@ -117,6 +130,24 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     [fontSize, fontStyle, isFullWidth]
   );
 
+  // Use the new hook to handle page events
+  const { updatePageProperties } = useRealtimePageEvents({
+    storeType,
+    page,
+    getUserDetails,
+    handlers,
+  });
+
+  // Set syncing status when page changes and reset collaboration state
+  useEffect(() => {
+    setSyncingStatus("syncing");
+    onCollaborationStateChange?.({
+      stage: { kind: "connecting" },
+      isServerSynced: false,
+      isServerDisconnected: false,
+    });
+  }, [pageId, setSyncingStatus, onCollaborationStateChange]);
+
   const getAIMenu = useCallback(
     ({ isOpen, onClose }: TAIMenuProps) => (
       <EditorAIMenu
@@ -130,20 +161,25 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     [editorRef, workspaceId, workspaceSlug]
   );
 
-  const handleServerConnect = useCallback(() => {
-    handleConnectionStatus(false);
-  }, [handleConnectionStatus]);
-
-  const handleServerError = useCallback(() => {
-    handleConnectionStatus(true);
-  }, [handleConnectionStatus]);
-
   const serverHandler: TServerHandler = useMemo(
     () => ({
-      onConnect: handleServerConnect,
-      onServerError: handleServerError,
+      onStateChange: (state) => {
+        // Pass full state to parent
+        onCollaborationStateChange?.(state);
+
+        // Map collaboration stage to UI syncing status
+        // Stage → UI mapping: disconnected → error | synced → synced | all others → syncing
+        if (state.stage.kind === "disconnected") {
+          setSyncingStatus("error");
+        } else if (state.stage.kind === "synced") {
+          setSyncingStatus("synced");
+        } else {
+          // initial, connecting, awaiting-sync, reconnecting → show as syncing
+          setSyncingStatus("syncing");
+        }
+      },
     }),
-    [handleServerConnect, handleServerError]
+    [setSyncingStatus, onCollaborationStateChange]
   );
 
   const realtimeConfig: TRealtimeConfig | undefined = useMemo(() => {
@@ -188,7 +224,9 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     }
   );
 
-  if (pageId === undefined || !realtimeConfig) return <PageContentLoader className={blockWidthClassName} />;
+  const isPageLoading = pageId === undefined || !realtimeConfig;
+
+  if (isPageLoading) return <PageContentLoader className={blockWidthClassName} />;
 
   return (
     <Row
@@ -209,52 +247,52 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
                 >
                   <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="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-surface-2 p-4 rounded-sm">
                   <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} />
-            <PageEditorTitle
-              editorRef={editorRef}
-              readOnly={!isContentEditable}
-              title={pageTitle}
-              updateTitle={updateTitle}
-            />
+        <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}
-          containerClassName="h-full p-0 pb-64"
-          displayConfig={displayConfig}
-          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 ?? "" }),
-          }}
-          realtimeConfig={realtimeConfig}
-          serverHandler={serverHandler}
-          user={userConfig}
-          disabledExtensions={documentEditorExtensions.disabled}
-          flaggedExtensions={documentEditorExtensions.flagged}
-          aiHandler={{
-            menu: getAIMenu,
-          }}
-          onAssetChange={updateAssetsList}
-          extendedEditorProps={extendedEditorProps}
-        />
       </div>
     </Row>
   );
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 6ad966e0d4..df6eac425d 100644
--- a/apps/web/core/components/pages/editor/header/logo-picker.tsx
+++ b/apps/web/core/components/pages/editor/header/logo-picker.tsx
@@ -11,7 +11,7 @@ type Props = {
   page: TPageInstance;
 };
 
-export const PageEditorHeaderLogoPicker: React.FC<Props> = observer((props) => {
+export const PageEditorHeaderLogoPicker = observer(function PageEditorHeaderLogoPicker(props: Props) {
   const { className, page } = props;
   // states
   const [isLogoPickerOpen, setIsLogoPickerOpen] = useState(false);
@@ -32,8 +32,8 @@ export const PageEditorHeaderLogoPicker: React.FC<Props> = observer((props) => {
         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] size-[56px] grid 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 36fe195211..136e7c5912 100644
--- a/apps/web/core/components/pages/editor/header/root.tsx
+++ b/apps/web/core/components/pages/editor/header/root.tsx
@@ -11,10 +11,10 @@ import { PageEditorHeaderLogoPicker } from "./logo-picker";
 
 type Props = {
   page: TPageInstance;
-  projectId: string;
+  projectId?: string;
 };
 
-export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
+export const PageEditorHeaderRoot = observer(function PageEditorHeaderRoot(props: Props) {
   const { page } = props;
   // states
   const [isLogoPickerOpen, setIsLogoPickerOpen] = useState(false);
@@ -41,9 +41,9 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((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 p-1 rounded-sm font-medium text-13 hover:bg-layer-1 text-tertiary outline-none transition-colors",
                     {
-                      "bg-custom-background-80": isLogoPickerOpen,
+                      "bg-layer-1": isLogoPickerOpen,
                     }
                   )}
                 >
diff --git a/apps/web/core/components/pages/editor/page-root.tsx b/apps/web/core/components/pages/editor/page-root.tsx
index 7d7d74a00f..533e0ea9fe 100644
--- a/apps/web/core/components/pages/editor/page-root.tsx
+++ b/apps/web/core/components/pages/editor/page-root.tsx
@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
-import type { EditorRefApi } from "@plane/editor";
+import type { CollaborationState, EditorRefApi } from "@plane/editor";
 import type { TDocumentPayload, TPage, TPageVersion, TWebhookConnectionQueryParams } from "@plane/types";
 // hooks
-import { useAppRouter } from "@/hooks/use-app-router";
 import { usePageFallback } from "@/hooks/use-page-fallback";
 // plane web import
+import type { PageUpdateHandler, TCustomEventHandlers } from "@/hooks/use-realtime-page-events";
 import { PageModals } from "@/plane-web/components/pages";
 import { usePagesPaneExtensions, useExtendedEditorProps } from "@/plane-web/hooks/pages";
 import type { EPageStoreType } from "@/plane-web/hooks/store";
@@ -16,6 +16,7 @@ import type { TPageInstance } from "@/store/pages/base-page";
 import { PageNavigationPaneRoot } from "../navigation-pane";
 import { PageVersionsOverlay } from "../version";
 import { PagesVersionEditor } from "../version/editor";
+import { ContentLimitBanner } from "./content-limit-banner";
 import { PageEditorBody } from "./editor-body";
 import type { TEditorBodyConfig, TEditorBodyHandlers } from "./editor-body";
 import { PageEditorToolbarRoot } from "./toolbar";
@@ -23,7 +24,7 @@ import { PageEditorToolbarRoot } from "./toolbar";
 export type TPageRootHandlers = {
   create: (payload: Partial<TPage>) => Promise<Partial<TPage> | undefined>;
   fetchAllVersions: (pageId: string) => Promise<TPageVersion[] | undefined>;
-  fetchDescriptionBinary: () => Promise<any>;
+  fetchDescriptionBinary: () => Promise<ArrayBuffer>;
   fetchVersionDetails: (pageId: string, versionId: string) => Promise<TPageVersion | undefined>;
   restoreVersion: (pageId: string, versionId: string) => Promise<void>;
   updateDescription: (document: TDocumentPayload) => Promise<void>;
@@ -37,29 +38,39 @@ type TPageRootProps = {
   page: TPageInstance;
   storeType: EPageStoreType;
   webhookConnectionParams: TWebhookConnectionQueryParams;
-  projectId: string;
+  projectId?: string;
   workspaceSlug: string;
+  customRealtimeEventHandlers?: TCustomEventHandlers;
 };
 
-export const PageRoot = observer((props: TPageRootProps) => {
-  const { config, handlers, page, projectId, storeType, webhookConnectionParams, workspaceSlug } = props;
+export const PageRoot = observer(function PageRoot(props: TPageRootProps) {
+  const {
+    config,
+    handlers,
+    page,
+    projectId,
+    storeType,
+    webhookConnectionParams,
+    workspaceSlug,
+    customRealtimeEventHandlers,
+  } = props;
   // states
   const [editorReady, setEditorReady] = useState(false);
-  const [hasConnectionFailed, setHasConnectionFailed] = useState(false);
+  const [collaborationState, setCollaborationState] = useState<CollaborationState | null>(null);
+  const [showContentTooLargeBanner, setShowContentTooLargeBanner] = useState(false);
   // refs
   const editorRef = useRef<EditorRefApi>(null);
-  // router
-  const router = useAppRouter();
   // derived values
   const {
     isContentEditable,
     editor: { setEditorRef },
   } = page;
   // page fallback
-  usePageFallback({
+  const { isFetchingFallbackBinary } = usePageFallback({
     editorRef,
     fetchPageDescription: handlers.fetchDescriptionBinary,
-    hasConnectionFailed,
+    page,
+    collaborationState,
     updatePageDescription: handlers.updateDescription,
   });
 
@@ -91,6 +102,24 @@ export const PageRoot = observer((props: TPageRootProps) => {
     editorRef,
   });
 
+  // Type-safe error handler for content too large errors
+  const errorHandler: PageUpdateHandler<"error"> = (params) => {
+    const { data } = params;
+
+    // Check if it's content too large error
+    if (data.error_code === "content_too_large") {
+      setShowContentTooLargeBanner(true);
+    }
+
+    // Call original error handler if exists
+    customRealtimeEventHandlers?.error?.(params);
+  };
+
+  const mergedCustomEventHandlers: TCustomEventHandlers = {
+    ...customRealtimeEventHandlers,
+    error: errorHandler,
+  };
+
   // Get extended editor extensions configuration
   const extendedEditorProps = useExtendedEditorProps({
     workspaceSlug,
@@ -134,11 +163,12 @@ export const PageRoot = observer((props: TPageRootProps) => {
           isNavigationPaneOpen={isNavigationPaneOpen}
           page={page}
         />
+        {showContentTooLargeBanner && <ContentLimitBanner className="px-page-x" />}
         <PageEditorBody
           config={config}
+          customRealtimeEventHandlers={mergedCustomEventHandlers}
           editorReady={editorReady}
           editorForwardRef={editorRef}
-          handleConnectionStatus={setHasConnectionFailed}
           handleEditorReady={handleEditorReady}
           handleOpenNavigationPane={handleOpenNavigationPane}
           handlers={handlers}
@@ -149,6 +179,8 @@ export const PageRoot = observer((props: TPageRootProps) => {
           webhookConnectionParams={webhookConnectionParams}
           workspaceSlug={workspaceSlug}
           extendedEditorProps={extendedEditorProps}
+          isFetchingFallbackBinary={isFetchingFallbackBinary}
+          onCollaborationStateChange={setCollaborationState}
         />
       </div>
       <PageNavigationPaneRoot
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 50aeda7b77..dda98d3061 100644
--- a/apps/web/core/components/pages/editor/summary/content-browser.tsx
+++ b/apps/web/core/components/pages/editor/summary/content-browser.tsx
@@ -14,7 +14,7 @@ type Props = {
   showOutline?: boolean;
 };
 
-export const PageContentBrowser: React.FC<Props> = (props) => {
+export function PageContentBrowser(props: Props) {
   const { className, editorRef, emptyState, setSidePeekVisible, showOutline = false } = props;
   // states
   const [headings, setHeadings] = useState<IMarking[]>([]);
@@ -63,7 +63,7 @@ export const PageContentBrowser: React.FC<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="flex-shrink-0 h-0.5 bg-layer-3 self-end rounded-xs"
               style={{
                 width: marking.level === 1 ? "20px" : marking.level === 2 ? "18px" : "14px",
               }}
@@ -79,4 +79,4 @@ export const PageContentBrowser: React.FC<Props> = (props) => {
       })}
     </div>
   );
-};
+}
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 eb99c470b5..c5d3d3b250 100644
--- a/apps/web/core/components/pages/editor/summary/heading-components.tsx
+++ b/apps/web/core/components/pages/editor/summary/heading-components.tsx
@@ -8,22 +8,28 @@ 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 const OutlineHeading1 = ({ marking, onClick }: THeadingComponentProps) => (
-  <button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "text-sm pl-1")}>
-    {marking.text}
-  </button>
-);
+export function OutlineHeading1({ marking, onClick }: THeadingComponentProps) {
+  return (
+    <button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "text-13 pl-1")}>
+      {marking.text}
+    </button>
+  );
+}
 
-export const OutlineHeading2 = ({ marking, onClick }: THeadingComponentProps) => (
-  <button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "text-xs pl-2")}>
-    {marking.text}
-  </button>
-);
+export function OutlineHeading2({ marking, onClick }: THeadingComponentProps) {
+  return (
+    <button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "text-11 pl-2")}>
+      {marking.text}
+    </button>
+  );
+}
 
-export const OutlineHeading3 = ({ marking, onClick }: THeadingComponentProps) => (
-  <button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "text-xs pl-4")}>
-    {marking.text}
-  </button>
-);
+export function OutlineHeading3({ marking, onClick }: THeadingComponentProps) {
+  return (
+    <button type="button" onClick={onClick} className={cn(COMMON_CLASSNAME, "text-11 pl-4")}>
+      {marking.text}
+    </button>
+  );
+}
diff --git a/apps/web/core/components/pages/editor/title.tsx b/apps/web/core/components/pages/editor/title.tsx
index fc5c7b4ffe..9de765ffbc 100644
--- a/apps/web/core/components/pages/editor/title.tsx
+++ b/apps/web/core/components/pages/editor/title.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 // editor
@@ -18,7 +16,7 @@ type Props = {
   updateTitle: (title: string) => void;
 };
 
-export const PageEditorTitle: React.FC<Props> = observer((props) => {
+export const PageEditorTitle = observer(function PageEditorTitle(props: Props) {
   const { editorRef, readOnly, title, updateTitle } = props;
   // states
   const [isLengthVisible, setIsLengthVisible] = useState(false);
@@ -37,7 +35,7 @@ export const PageEditorTitle: React.FC<Props> = observer((props) => {
           className={cn(
             titleFontClassName,
             {
-              "text-custom-text-400": !title,
+              "text-placeholder": !title,
             },
             "break-words"
           )}
@@ -64,7 +62,7 @@ export const PageEditorTitle: React.FC<Props> = observer((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 bottom-1 right-1 z-[2] font-regular rounded-sm bg-surface-1 p-0.5 text-11 text-secondary opacity-0 transition-opacity",
               {
                 "opacity-100": isLengthVisible,
               }
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 e2fbe1bd83..591f8f3142 100644
--- a/apps/web/core/components/pages/editor/toolbar/color-dropdown.tsx
+++ b/apps/web/core/components/pages/editor/toolbar/color-dropdown.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { memo } from "react";
 import { ALargeSmall, Ban } from "lucide-react";
 import { Popover } from "@headlessui/react";
@@ -20,7 +18,7 @@ type Props = {
   ) => boolean;
 };
 
-export const ColorDropdown: React.FC<Props> = memo((props) => {
+export const ColorDropdown = memo(function ColorDropdown(props: Props) {
   const { handleColorSelect, isColorActive } = props;
 
   const activeTextColor = COLORS_LIST.find((c) => isColorActive("text-color", c.key));
@@ -28,99 +26,90 @@ export const ColorDropdown: React.FC<Props> = memo((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",
+              "h-7 px-2 text-13 flex items-center gap-1.5 rounded-sm outline-none",
+              "text-tertiary hover:bg-layer-1",
               {
-                "text-custom-text-100 bg-custom-background-80": open,
+                "text-primary bg-layer-1": 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("shrink-0 size-6 grid 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 rounded-md border-[0.5px] border-strong bg-surface-1 shadow-raised-200 p-2 space-y-2"
+          >
+            <div className="space-y-1.5">
+              <p className="text-11 text-tertiary 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-sm border-[0.5px] border-strong-1 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-sm text-tertiary border-[0.5px] border-strong-1 hover:bg-layer-1 transition-colors"
+                  onClick={() => handleColorSelect("text-color", undefined)}
+                >
+                  <Ban className="size-4" />
+                </button>
+              </div>
+            </div>
+            <div className="space-y-1.5">
+              <p className="text-11 text-tertiary 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-sm border-[0.5px] border-strong-1 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-sm text-tertiary border-[0.5px] border-strong-1 hover:bg-layer-1 transition-colors"
+                  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/options-dropdown.tsx b/apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx
index 6dbe26a2cf..5655469ccd 100644
--- a/apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx
+++ b/apps/web/core/components/pages/editor/toolbar/options-dropdown.tsx
@@ -1,11 +1,8 @@
-"use client";
-
 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 type { TContextMenuItem } from "@plane/ui";
 import { ToggleSwitch } from "@plane/ui";
 import { copyTextToClipboard } from "@plane/utils";
 // hooks
@@ -18,7 +15,6 @@ import type { EPageStoreType } from "@/plane-web/hooks/store";
 // store
 import type { TPageInstance } from "@/store/pages/base-page";
 // local imports
-import type { TPageActions } from "../../dropdowns";
 import { PageActions } from "../../dropdowns";
 import { ExportPageModal } from "../../modals/export-page-modal";
 import { PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM } from "../../navigation-pane";
@@ -28,7 +24,7 @@ type Props = {
   storeType: EPageStoreType;
 };
 
-export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
+export const PageOptionsDropdown = observer(function PageOptionsDropdown(props: Props) {
   const { page, storeType } = props;
   // states
   const [isExportModalOpen, setIsExportModalOpen] = useState(false);
@@ -45,79 +41,81 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
   // query params
   const { updateQueryParams } = useQueryParams();
   // menu items list
-  const EXTRA_MENU_OPTIONS: (TContextMenuItem & { key: TPageActions })[] = useMemo(
-    () => [
-      {
-        key: "full-screen",
-        action: () => handleFullWidth(!isFullWidth),
-        customContent: (
-          <>
-            Full width
-            <ToggleSwitch value={isFullWidth} onChange={() => {}} />
-          </>
-        ),
-        className: "flex items-center justify-between gap-2",
-      },
-      {
-        key: "sticky-toolbar",
-        action: () => handleStickyToolbar(!isStickyToolbarEnabled),
-        customContent: (
-          <>
-            Sticky toolbar
-            <ToggleSwitch value={isStickyToolbarEnabled} onChange={() => {}} />
-          </>
-        ),
-        className: "flex items-center justify-between gap-2",
-        shouldRender: isContentEditable,
-      },
-      {
-        key: "copy-markdown",
-        action: () => {
-          if (!editorRef) return;
-          copyTextToClipboard(editorRef.getMarkDown()).then(() =>
+  const EXTRA_MENU_OPTIONS = useMemo(
+    function EXTRA_MENU_OPTIONS(): React.ComponentProps<typeof PageActions>["extraOptions"] {
+      return [
+        {
+          key: "full-screen",
+          action: () => handleFullWidth(!isFullWidth),
+          customContent: (
+            <>
+              Full width
+              <ToggleSwitch value={isFullWidth} onChange={() => {}} />
+            </>
+          ),
+          className: "flex items-center justify-between gap-2",
+        },
+        {
+          key: "sticky-toolbar",
+          action: () => handleStickyToolbar(!isStickyToolbarEnabled),
+          customContent: (
+            <>
+              Sticky toolbar
+              <ToggleSwitch value={isStickyToolbarEnabled} onChange={() => {}} />
+            </>
+          ),
+          className: "flex items-center justify-between gap-2",
+          shouldRender: isContentEditable,
+        },
+        {
+          key: "copy-markdown",
+          action: () => {
+            if (!editorRef) return;
+            editorRef.copyMarkdownToClipboard();
             setToast({
               type: TOAST_TYPE.SUCCESS,
               title: "Success!",
               message: "Markdown copied to clipboard.",
-            })
-          );
+            });
+          },
+          title: "Copy markdown",
+          icon: Clipboard,
+          shouldRender: true,
         },
-        title: "Copy markdown",
-        icon: Clipboard,
-        shouldRender: true,
-      },
-      {
-        key: "version-history",
-        action: () => {
-          // update query param to show info tab in navigation pane
-          const updatedRoute = updateQueryParams({
-            paramsToAdd: {
-              [PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM]: "info" satisfies TPageNavigationPaneTab,
-            },
-          });
-          router.push(updatedRoute);
+        {
+          key: "version-history",
+          action: () => {
+            // update query param to show info tab in navigation pane
+            const updatedRoute = updateQueryParams({
+              paramsToAdd: {
+                [PAGE_NAVIGATION_PANE_TABS_QUERY_PARAM]: "info" satisfies TPageNavigationPaneTab,
+              },
+            });
+            router.push(updatedRoute);
+          },
+          title: "Version history",
+          icon: History,
+          shouldRender: true,
         },
-        title: "Version history",
-        icon: History,
-        shouldRender: true,
-      },
-      {
-        key: "export",
-        action: () => setIsExportModalOpen(true),
-        title: "Export",
-        icon: ArrowUpToLine,
-        shouldRender: true,
-      },
-    ],
+        {
+          key: "export",
+          action: () => setIsExportModalOpen(true),
+          title: "Export",
+          icon: ArrowUpToLine,
+          shouldRender: true,
+        },
+      ];
+    },
     [
-      editorRef,
       handleFullWidth,
-      handleStickyToolbar,
-      isContentEditable,
       isFullWidth,
+      handleStickyToolbar,
       isStickyToolbarEnabled,
-      router,
+      isContentEditable,
+      editorRef,
       updateQueryParams,
+      router,
+      setIsExportModalOpen,
     ]
   );
 
diff --git a/apps/web/core/components/pages/editor/toolbar/root.tsx b/apps/web/core/components/pages/editor/toolbar/root.tsx
index 8bddef8053..c4ea3eeec7 100644
--- a/apps/web/core/components/pages/editor/toolbar/root.tsx
+++ b/apps/web/core/components/pages/editor/toolbar/root.tsx
@@ -19,7 +19,7 @@ type Props = {
   page: TPageInstance;
 };
 
-export const PageEditorToolbarRoot: React.FC<Props> = observer((props) => {
+export const PageEditorToolbarRoot = observer(function PageEditorToolbarRoot(props: Props) {
   const { handleOpenNavigationPane, isNavigationPaneOpen, page } = props;
   // translation
   const { t } = useTranslation();
@@ -50,13 +50,13 @@ export const PageEditorToolbarRoot: React.FC<Props> = observer((props) => {
           )}
         >
           <div className="max-w-full w-full flex items-center justify-between">
-            {editorRef && <PageToolbar editorRef={editorRef} />}
+            <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="shrink-0 size-6 grid place-items-center rounded-sm text-secondary hover:text-primary hover:bg-layer-transparent-hover transition-colors"
                   onClick={handleOpenNavigationPane}
                 >
                   <PanelRight className="size-3.5" />
@@ -72,7 +72,7 @@ export const PageEditorToolbarRoot: React.FC<Props> = observer((props) => {
             <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="shrink-0 size-6 grid place-items-center rounded-sm text-secondary hover:text-primary hover:bg-layer-transparent-hover transition-colors"
                 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 71baffebf2..bf4f2d4988 100644
--- a/apps/web/core/components/pages/editor/toolbar/toolbar.tsx
+++ b/apps/web/core/components/pages/editor/toolbar/toolbar.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useEffect, useState, useCallback } from "react";
 import { Check } from "lucide-react";
 // plane imports
@@ -24,15 +22,15 @@ type ToolbarButtonProps = {
   executeCommand: EditorRefApi["executeMenuItemCommand"];
 };
 
-const ToolbarButton: React.FC<ToolbarButtonProps> = React.memo((props) => {
+const ToolbarButton = React.memo(function ToolbarButton(props: ToolbarButtonProps) {
   const { item, isActive, executeCommand } = props;
 
   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>
       }
     >
@@ -46,16 +44,14 @@ const ToolbarButton: React.FC<ToolbarButtonProps> = React.memo((props) => {
             ...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("shrink-0 grid size-7 place-items-center rounded-sm text-tertiary", {
+          "bg-layer-transparent-selected hover:bg-layer-transparent-selected text-primary": 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>
@@ -67,10 +63,25 @@ ToolbarButton.displayName = "ToolbarButton";
 
 const toolbarItems = TOOLBAR_ITEMS.document;
 
-export const PageToolbar: React.FC<Props> = (props) => {
+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> = {};
@@ -89,7 +100,6 @@ export const PageToolbar: React.FC<Props> = (props) => {
 
   useEffect(() => {
     const unsubscribe = editorRef.onStateChange(updateActiveStates);
-    updateActiveStates();
     return () => unsubscribe();
   }, [editorRef, updateActiveStates]);
 
@@ -101,41 +111,54 @@ export const PageToolbar: React.FC<Props> = (props) => {
   );
 
   return (
-    <div className="flex items-center divide-x divide-custom-border-200 overflow-x-scroll">
+    <div className="flex items-center divide-x divide-subtle-1 overflow-x-scroll animate-in fade-in 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(
+              "text-13 border-[0.5px] border-strong h-7 w-24 rounded-sm px-2 flex items-center justify-between gap-2 whitespace-nowrap text-left",
+              {
+                "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="shrink-0 size-3" />
           </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 && <Check className="size-3 text-tertiary shrink-0" />}
           </CustomMenu.MenuItem>
         ))}
       </CustomMenu>
-      <div className="flex-shrink-0">
+      <div className="shrink-0">
         <ColorDropdown
           handleColorSelect={(key, color) =>
             editorRef.executeMenuItemCommand({
@@ -165,4 +188,4 @@ export const PageToolbar: React.FC<Props> = (props) => {
       ))}
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/pages/header/actions.tsx b/apps/web/core/components/pages/header/actions.tsx
index 6da3315205..f381ef5d06 100644
--- a/apps/web/core/components/pages/header/actions.tsx
+++ b/apps/web/core/components/pages/header/actions.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane web components
 import { PageLockControl } from "@/plane-web/components/pages/header/lock-control";
@@ -21,7 +19,7 @@ type Props = {
   storeType: EPageStoreType;
 };
 
-export const PageHeaderActions: React.FC<Props> = observer((props) => {
+export const PageHeaderActions = observer(function PageHeaderActions(props: Props) {
   const { page, storeType } = props;
 
   return (
diff --git a/apps/web/core/components/pages/header/archived-badge.tsx b/apps/web/core/components/pages/header/archived-badge.tsx
index 34e812eb9a..2bd7e17423 100644
--- a/apps/web/core/components/pages/header/archived-badge.tsx
+++ b/apps/web/core/components/pages/header/archived-badge.tsx
@@ -9,13 +9,13 @@ type Props = {
   page: TPageInstance;
 };
 
-export const PageArchivedBadge = observer(({ page }: Props) => {
+export const PageArchivedBadge = observer(function PageArchivedBadge({ page }: Props) {
   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">
+    <div className="flex-shrink-0 h-6 flex items-center gap-1 px-2 rounded-sm text-accent-primary bg-accent-primary/20">
       <ArchiveIcon className="flex-shrink-0 size-3.5" />
-      <span className="text-xs font-medium">Archived at {renderFormattedDate(page.archived_at)}</span>
+      <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 50c853cc6f..613ff5fd76 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,10 @@
+import { useState, useRef, useEffect, useCallback } from "react";
 import { observer } from "mobx-react";
-import { Link } from "lucide-react";
+import { Link, Check } from "lucide-react";
+// 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
@@ -9,19 +14,51 @@ type Props = {
   page: TPageInstance;
 };
 
-export const PageCopyLinkControl = observer(({ page }: 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 ? Check : Link}
+        onClick={handleCopy}
+        aria-label={isCopied ? "Copied link" : "Copy link"}
+        className={cn(isCopied && "text-green-500")}
+      />
+    </Tooltip>
   );
 });
diff --git a/apps/web/core/components/pages/header/favorite-control.tsx b/apps/web/core/components/pages/header/favorite-control.tsx
index 723ee28fc6..1a7b2338d5 100644
--- a/apps/web/core/components/pages/header/favorite-control.tsx
+++ b/apps/web/core/components/pages/header/favorite-control.tsx
@@ -1,8 +1,9 @@
 import { observer } from "mobx-react";
+import { Star } from "lucide-react";
 // constants
 import { PROJECT_PAGE_TRACKER_ELEMENTS } from "@plane/constants";
 // ui
-import { FavoriteStar } from "@plane/ui";
+import { IconButton } from "@plane/propel/icon-button";
 // helpers
 import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
@@ -14,7 +15,7 @@ type Props = {
   page: TPageInstance;
 };
 
-export const PageFavoriteControl = observer(({ page }: Props) => {
+export const PageFavoriteControl = observer(function PageFavoriteControl({ page }: Props) {
   // derived values
   const { is_favorite, canCurrentUserFavoritePage } = page;
   // page operations
@@ -25,16 +26,18 @@ export const PageFavoriteControl = observer(({ page }: Props) => {
   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 ? "*:fill-(--color-label-yellow-icon) *:stroke-(--color-label-yellow-icon)" : ""}
     />
   );
 });
diff --git a/apps/web/core/components/pages/header/offline-badge.tsx b/apps/web/core/components/pages/header/offline-badge.tsx
index 88cac49a37..fcb6adea1d 100644
--- a/apps/web/core/components/pages/header/offline-badge.tsx
+++ b/apps/web/core/components/pages/header/offline-badge.tsx
@@ -10,7 +10,7 @@ type Props = {
   page: TPageInstance;
 };
 
-export const PageOfflineBadge = observer(({ page }: Props) => {
+export const PageOfflineBadge = observer(function PageOfflineBadge({ page }: Props) {
   // use online status
   const { isOnline } = useOnlineStatus();
 
@@ -21,8 +21,8 @@ export const PageOfflineBadge = observer(({ page }: Props) => {
       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-shrink-0 flex h-7 items-center gap-2 rounded-full bg-layer-1 px-3 py-0.5 text-11 font-medium text-tertiary">
+        <span className="flex-shrink-0 size-1.5 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 6f9b0c3a61..1dc01cc9b7 100644
--- a/apps/web/core/components/pages/header/root.tsx
+++ b/apps/web/core/components/pages/header/root.tsx
@@ -27,7 +27,7 @@ type Props = {
   workspaceSlug: string;
 };
 
-export const PagesListHeaderRoot: React.FC<Props> = observer((props) => {
+export const PagesListHeaderRoot = observer(function PagesListHeaderRoot(props: Props) {
   const { pageType, projectId, storeType, workspaceSlug } = props;
   const { t } = useTranslation();
   // store hooks
diff --git a/apps/web/core/components/pages/header/syncing-badge.tsx b/apps/web/core/components/pages/header/syncing-badge.tsx
new file mode 100644
index 0000000000..4aac9f1818
--- /dev/null
+++ b/apps/web/core/components/pages/header/syncing-badge.tsx
@@ -0,0 +1,61 @@
+import { useState, useEffect } from "react";
+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 function PageSyncingBadge({ syncStatus }: Props) {
+  const [prevSyncStatus, setPrevSyncStatus] = useState<"syncing" | "synced" | "error" | null>(null);
+  const [isVisible, setIsVisible] = useState(syncStatus !== "synced");
+
+  useEffect(() => {
+    // Only handle transitions when there's a change
+    if (prevSyncStatus !== syncStatus) {
+      if (syncStatus === "synced") {
+        // Delay hiding to allow exit animation to complete
+        setTimeout(() => {
+          setIsVisible(false);
+        }, 300); // match animation duration
+      } else {
+        setIsVisible(true);
+      }
+      setPrevSyncStatus(syncStatus);
+    }
+  }, [syncStatus, prevSyncStatus]);
+
+  if (!isVisible || syncStatus === "synced") return null;
+
+  const badgeContent = {
+    syncing: {
+      label: "Syncing...",
+      tooltipHeading: "Syncing...",
+      tooltipContent: "Your changes are being synced with the server. You can continue making changes.",
+    },
+    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.",
+    },
+  };
+
+  // This way we guarantee badgeContent is defined
+  const content = badgeContent[syncStatus];
+
+  return (
+    <Tooltip tooltipHeading={content.tooltipHeading} tooltipContent={content.tooltipContent}>
+      <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/root.tsx b/apps/web/core/components/pages/list/applied-filters/root.tsx
index 3f71495e77..e911ea01df 100644
--- a/apps/web/core/components/pages/list/applied-filters/root.tsx
+++ b/apps/web/core/components/pages/list/applied-filters/root.tsx
@@ -18,7 +18,7 @@ type Props = {
 const MEMBERS_FILTERS = ["created_by"];
 const DATE_FILTERS = ["created_at"];
 
-export const PageAppliedFiltersList: React.FC<Props> = (props) => {
+export function PageAppliedFiltersList(props: Props) {
   const { appliedFilters, handleClearAllFilters, handleRemoveFilter, alwaysAllowEditing } = props;
   const { t } = useTranslation();
 
@@ -28,7 +28,7 @@ export const PageAppliedFiltersList: React.FC<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 +38,7 @@ export const PageAppliedFiltersList: React.FC<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 +56,7 @@ export const PageAppliedFiltersList: React.FC<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} />
@@ -76,4 +76,4 @@ export const PageAppliedFiltersList: React.FC<Props> = (props) => {
       )}
     </div>
   );
-};
+}
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 3969e7363c..1ed8f33b7e 100644
--- a/apps/web/core/components/pages/list/block-item-action.tsx
+++ b/apps/web/core/components/pages/list/block-item-action.tsx
@@ -1,7 +1,3 @@
-"use client";
-
-import type { FC } from "react";
-import React from "react";
 import { observer } from "mobx-react";
 import { Earth, Info, Lock, Minus } from "lucide-react";
 // plane imports
@@ -27,7 +23,7 @@ type Props = {
   storeType: EPageStoreType;
 };
 
-export const BlockItemAction: FC<Props> = observer((props) => {
+export const BlockItemAction = observer(function BlockItemAction(props: Props) {
   const { page, parentRef, storeType } = props;
   // store hooks
   const { getUserDetails } = useMember();
@@ -47,18 +43,18 @@ export const BlockItemAction: FC<Props> = observer((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" />}
         </Tooltip>
       </div>
       {/* vertical divider */}
-      <Minus className="h-5 w-5 text-custom-text-400 rotate-90 -mx-3" strokeWidth={1} />
+      <Minus className="h-5 w-5 text-placeholder rotate-90 -mx-3" 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" />
+          <Info className="h-4 w-4 text-tertiary" />
         </span>
       </Tooltip>
 
diff --git a/apps/web/core/components/pages/list/block.tsx b/apps/web/core/components/pages/list/block.tsx
index c03d349fd4..7433234343 100644
--- a/apps/web/core/components/pages/list/block.tsx
+++ b/apps/web/core/components/pages/list/block.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useRef } from "react";
 import { observer } from "mobx-react";
 import { Logo } from "@plane/propel/emoji-icon-picker";
@@ -21,7 +18,7 @@ type TPageListBlock = {
   storeType: EPageStoreType;
 };
 
-export const PageListBlock: FC<TPageListBlock> = observer((props) => {
+export const PageListBlock = observer(function PageListBlock(props: TPageListBlock) {
   const { pageId, storeType } = props;
   // refs
   const parentRef = useRef(null);
@@ -43,7 +40,7 @@ export const PageListBlock: FC<TPageListBlock> = observer((props) => {
           {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/root.tsx b/apps/web/core/components/pages/list/filters/root.tsx
index 7e9c0f3c4f..320e18c800 100644
--- a/apps/web/core/components/pages/list/filters/root.tsx
+++ b/apps/web/core/components/pages/list/filters/root.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import { observer } from "mobx-react";
 import { Search } from "lucide-react";
 import { CloseIcon } from "@plane/propel/icons";
@@ -15,13 +15,19 @@ type Props = {
   memberIds?: string[] | undefined;
 };
 
-export const PageFiltersSelection: React.FC<Props> = observer((props) => {
+export const PageFiltersSelection = observer(function PageFiltersSelection(props: 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 +53,25 @@ export const PageFiltersSelection: React.FC<Props> = observer((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">
+          <Search className="text-placeholder" size={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="h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
         <div className="py-2">
           <FilterOption
             isChecked={!!filters.filters?.favorites}
diff --git a/apps/web/core/components/pages/list/order-by.tsx b/apps/web/core/components/pages/list/order-by.tsx
index 0fc8833548..7c38f80e39 100644
--- a/apps/web/core/components/pages/list/order-by.tsx
+++ b/apps/web/core/components/pages/list/order-by.tsx
@@ -1,14 +1,8 @@
-"use client";
-
 import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check } from "lucide-react";
-// types
+// plane imports
 import { getButtonStyling } from "@plane/propel/button";
-import { ChevronDownIcon } 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;
@@ -25,7 +19,7 @@ const PAGE_SORTING_KEY_OPTIONS: {
   { key: "updated_at", label: "Date modified" },
 ];
 
-export const PageOrderByDropdown: React.FC<Props> = (props) => {
+export function PageOrderByDropdown(props: Props) {
   const { onChange, sortBy, sortKey } = props;
 
   const orderByDetails = PAGE_SORTING_KEY_OPTIONS.find((option) => sortKey === option.key);
@@ -34,10 +28,9 @@ export const PageOrderByDropdown: React.FC<Props> = (props) => {
   return (
     <CustomMenu
       customButton={
-        <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}>
+        <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"
@@ -58,7 +51,7 @@ export const PageOrderByDropdown: React.FC<Props> = (props) => {
           {sortKey === option.key && <Check 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={() => {
@@ -85,4 +78,4 @@ export const PageOrderByDropdown: React.FC<Props> = (props) => {
       </CustomMenu.MenuItem>
     </CustomMenu>
   );
-};
+}
diff --git a/apps/web/core/components/pages/list/root.tsx b/apps/web/core/components/pages/list/root.tsx
index 2ed9f6791b..0d477745fe 100644
--- a/apps/web/core/components/pages/list/root.tsx
+++ b/apps/web/core/components/pages/list/root.tsx
@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // types
 import type { TPageNavigationTabs } from "@plane/types";
@@ -15,7 +14,7 @@ type TPagesListRoot = {
   storeType: EPageStoreType;
 };
 
-export const PagesListRoot: FC<TPagesListRoot> = observer((props) => {
+export const PagesListRoot = observer(function PagesListRoot(props: TPagesListRoot) {
   const { pageType, storeType } = props;
   // store hooks
   const { getCurrentProjectFilteredPageIdsByTab } = usePageStore(storeType);
diff --git a/apps/web/core/components/pages/list/search-input.tsx b/apps/web/core/components/pages/list/search-input.tsx
index c3c1db6f01..ae10d97fc1 100644
--- a/apps/web/core/components/pages/list/search-input.tsx
+++ b/apps/web/core/components/pages/list/search-input.tsx
@@ -1,10 +1,9 @@
-import type { FC } from "react";
-import { useState, useRef, useEffect } from "react";
+import { useRef, useState } from "react";
 import { Search } from "lucide-react";
+// plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
+import { IconButton } from "@plane/propel/icon-button";
 import { CloseIcon } from "@plane/propel/icons";
-// plane helpers
-// helpers
 import { cn } from "@plane/utils";
 
 type Props = {
@@ -12,12 +11,13 @@ type Props = {
   updateSearchQuery: (val: string) => void;
 };
 
-export const PageSearchInput: FC<Props> = (props) => {
+export function PageSearchInput(props: Props) {
   const { searchQuery, updateSearchQuery } = props;
   // states
   const [isSearchOpen, setIsSearchOpen] = useState(false);
   // refs
   const inputRef = useRef<HTMLInputElement>(null);
+
   // outside click detector hook
   useOutsideClickDetector(inputRef, () => {
     if (isSearchOpen && searchQuery.trim() === "") setIsSearchOpen(false);
@@ -33,36 +33,32 @@ export const PageSearchInput: FC<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="shrink-0 my-auto -mr-1"
           onClick={() => {
             setIsSearchOpen(true);
             inputRef.current?.focus();
           }}
-        >
-          <Search className="h-3.5 w-3.5" />
-        </button>
+          icon={Search}
+        />
       )}
       <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 items-center justify-start rounded-md border border-transparent text-placeholder 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,
+            "w-64 px-2.5 py-1.5 border-subtle 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"
+          className="w-full max-w-[234px] border-none bg-transparent text-13 text-primary placeholder:text-placeholder focus:outline-none ml-2"
           placeholder="Search pages"
           value={searchQuery}
           onChange={(e) => updateSearchQuery(e.target.value)}
@@ -83,4 +79,4 @@ export const PageSearchInput: FC<Props> = (props) => {
       </div>
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/pages/list/tab-navigation.tsx b/apps/web/core/components/pages/list/tab-navigation.tsx
index c2cf4bff41..5ed0ee1b86 100644
--- a/apps/web/core/components/pages/list/tab-navigation.tsx
+++ b/apps/web/core/components/pages/list/tab-navigation.tsx
@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import Link from "next/link";
 // types
 import type { TPageNavigationTabs } from "@plane/types";
@@ -27,7 +26,7 @@ const pageTabs: { key: TPageNavigationTabs; label: string }[] = [
   },
 ];
 
-export const PageTabNavigation: FC<TPageTabNavigation> = (props) => {
+export function PageTabNavigation(props: TPageTabNavigation) {
   const { workspaceSlug, projectId, pageType } = props;
 
   const handleTabClick = (e: React.MouseEvent<HTMLAnchorElement>, tabKey: TPageNavigationTabs) => {
@@ -35,27 +34,28 @@ export const PageTabNavigation: FC<TPageTabNavigation> = (props) => {
   };
 
   return (
-    <div className="relative flex items-center">
+    <div className="relative flex items-center h-full">
       {pageTabs.map((tab) => (
         <Link
           key={tab.key}
           href={`/${workspaceSlug}/projects/${projectId}/pages?type=${tab.key}`}
           onClick={(e) => handleTabClick(e, tab.key)}
+          className="flex flex-col h-full"
         >
-          <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 text-13 px-4 font-medium transition-all justify-center items-center`, {
+              "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(`rounded-t border-t-2 transition-all border-transparent w-full`, {
+              "border-accent-strong": tab.key === pageType,
             })}
           />
         </Link>
       ))}
     </div>
   );
-};
+}
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 2e00bdc6aa..a910f8b60f 100644
--- a/apps/web/core/components/pages/loaders/page-content-loader.tsx
+++ b/apps/web/core/components/pages/loaders/page-content-loader.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 // plane imports
 import { Loader } from "@plane/ui";
 import { cn } from "@plane/utils";
@@ -8,13 +6,13 @@ type Props = {
   className?: string;
 };
 
-export const PageContentLoader = (props: Props) => {
+export function PageContentLoader(props: Props) {
   const { className } = props;
 
   return (
     <div className={cn("relative size-full flex 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="flex-shrink-0 w-full h-12 border-b border-subtle relative flex items-center divide-x divide-subtle">
         <Loader className="relative flex items-center gap-1 pr-2">
           <Loader.Item width="26px" height="26px" />
           <Loader.Item width="26px" height="26px" />
@@ -82,4 +80,4 @@ export const PageContentLoader = (props: Props) => {
       </div>
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/pages/loaders/page-loader.tsx b/apps/web/core/components/pages/loaders/page-loader.tsx
index 43d8d915db..c07ac6b04b 100644
--- a/apps/web/core/components/pages/loaders/page-loader.tsx
+++ b/apps/web/core/components/pages/loaders/page-loader.tsx
@@ -1,14 +1,10 @@
-"use client";
-
 import { range } from "lodash-es";
 import { Loader } from "@plane/ui";
 
-export const PageLoader: React.FC = (props) => {
-  const {} = props;
-
+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="px-3 border-b border-subtle 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">
@@ -19,7 +15,7 @@ export const PageLoader: React.FC = (props) => {
       </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 p-3 py-4 border-b border-subtle">
             <Loader.Item width={`${250 + 10 * Math.floor(Math.random() * 10)}px`} height="22px" />
             <div className="ml-auto relative flex items-center gap-2">
               <Loader.Item width="60px" height="22px" />
@@ -32,4 +28,4 @@ export const PageLoader: React.FC = (props) => {
       </div>
     </div>
   );
-};
+}
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 33e547551b..f398be341a 100644
--- a/apps/web/core/components/pages/modals/create-page-modal.tsx
+++ b/apps/web/core/components/pages/modals/create-page-modal.tsx
@@ -25,7 +25,7 @@ type Props = {
   storeType: EPageStoreType;
 };
 
-export const CreatePageModal: FC<Props> = (props) => {
+export function CreatePageModal(props: Props) {
   const {
     workspaceSlug,
     projectId,
@@ -96,4 +96,4 @@ export const CreatePageModal: FC<Props> = (props) => {
       />
     </ModalCore>
   );
-};
+}
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 c40614dfeb..4c91aecf15 100644
--- a/apps/web/core/components/pages/modals/delete-page-modal.tsx
+++ b/apps/web/core/components/pages/modals/delete-page-modal.tsx
@@ -1,12 +1,11 @@
-"use client";
-
-import React, { useState } from "react";
+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";
@@ -24,13 +23,13 @@ type TConfirmPageDeletionProps = {
   storeType: EPageStoreType;
 };
 
-export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((props) => {
+export const DeletePageModal = observer(function DeletePageModal(props: TConfirmPageDeletionProps) {
   const { isOpen, onClose, page, storeType } = props;
   // states
   const [isDeleting, setIsDeleting] = useState(false);
   // store hooks
   const { removePage } = usePageStore(storeType);
-  if (!page || !page.id) return null;
+
   // derived values
   const { id: pageId, name } = page;
 
@@ -43,6 +42,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
   const { pageId: routePageId } = useParams();
 
   const handleDelete = async () => {
+    if (!pageId) return;
     setIsDeleting(true);
     await removePage({ pageId })
       .then(() => {
@@ -80,6 +80,8 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
     setIsDeleting(false);
   };
 
+  if (!page || !page.id) return null;
+
   return (
     <AlertModalCore
       handleClose={handleClose}
@@ -90,7 +92,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = observer((pr
       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="break-words font-medium text-primary break-all">{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 1f179723e6..861e5c1526 100644
--- a/apps/web/core/components/pages/modals/export-page-modal.tsx
+++ b/apps/web/core/components/pages/modals/export-page-modal.tsx
@@ -1,9 +1,8 @@
-"use client";
-
 import { useState } from "react";
 import type { PageProps } from "@react-pdf/renderer";
 import { pdf } from "@react-pdf/renderer";
 import { Controller, useForm } from "react-hook-form";
+import { useParams } from "react-router";
 // plane editor
 import type { EditorRefApi } from "@plane/editor";
 // plane ui
@@ -96,17 +95,21 @@ const defaultValues: TFormValues = {
   content_variety: "everything",
 };
 
-export const ExportPageModal: React.FC<Props> = (props) => {
+export function ExportPageModal(props: Props) {
   const { editorRef, isOpen, onClose, pageTitle } = props;
   // states
   const [isExporting, setIsExporting] = useState(false);
+  // params
+  const { workspaceSlug, projectId } = useParams();
   // form info
   const { control, reset, watch } = useForm<TFormValues>({
     defaultValues,
   });
   // parse editor content
-  const { replaceCustomComponentsFromHTMLContent, replaceCustomComponentsFromMarkdownContent } =
-    useParseEditorContent();
+  const { replaceCustomComponentsFromHTMLContent, replaceCustomComponentsFromMarkdownContent } = useParseEditorContent({
+    projectId,
+    workspaceSlug: workspaceSlug ?? "",
+  });
   // derived values
   const selectedExportFormat = watch("export_format");
   const selectedPageFormat = watch("page_format");
@@ -197,10 +200,10 @@ export const ExportPageModal: React.FC<Props> = (props) => {
     <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>
+          <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"
@@ -223,7 +226,7 @@ export const ExportPageModal: React.FC<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"
@@ -247,7 +250,7 @@ export const ExportPageModal: React.FC<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"
@@ -272,15 +275,15 @@ export const ExportPageModal: React.FC<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="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
+          <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>
       </div>
     </ModalCore>
   );
-};
+}
diff --git a/apps/web/core/components/pages/modals/page-form.tsx b/apps/web/core/components/pages/modals/page-form.tsx
index 5f1d383f84..169a5cb302 100644
--- a/apps/web/core/components/pages/modals/page-form.tsx
+++ b/apps/web/core/components/pages/modals/page-form.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FormEvent } from "react";
 import { useState } from "react";
 import type { LucideIcon } from "lucide-react";
@@ -34,7 +32,7 @@ const PAGE_ACCESS_SPECIFIERS: {
   { key: EPageAccess.PRIVATE, i18n_label: "common.access.private", icon: Lock },
 ];
 
-export const PageForm: React.FC<Props> = (props) => {
+export function PageForm(props: Props) {
   const { formData, handleFormData, handleModalClose, handleFormSubmit } = props;
   // hooks
   const { isMobile } = usePlatformOS();
@@ -63,20 +61,20 @@ export const PageForm: React.FC<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>
+        <h3 className="text-18 font-medium text-secondary">Create page</h3>
         <div className="flex items-start gap-2 h-9 w-full">
           <EmojiPicker
             isOpen={isOpen}
             handleToggle={(val: boolean) => setIsOpen(val)}
             className="flex items-center justify-center flex-shrink0"
-            buttonClassName="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>
@@ -115,18 +113,18 @@ export const PageForm: React.FC<Props> = (props) => {
               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-red-500">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="px-5 py-4 flex items-center justify-between gap-2 border-t-[0.5px] border-subtle">
         <div className="flex items-center gap-2">
           <AccessField
             onChange={(access) => handleFormData("access", access)}
@@ -134,15 +132,15 @@ export const PageForm: React.FC<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}
@@ -154,4 +152,4 @@ export const PageForm: React.FC<Props> = (props) => {
       </div>
     </form>
   );
-};
+}
diff --git a/apps/web/core/components/pages/navigation-pane/root.tsx b/apps/web/core/components/pages/navigation-pane/root.tsx
index 29088f8320..75ee8fbe2d 100644
--- a/apps/web/core/components/pages/navigation-pane/root.tsx
+++ b/apps/web/core/components/pages/navigation-pane/root.tsx
@@ -36,7 +36,7 @@ type Props = {
   storeType: EPageStoreType;
 };
 
-export const PageNavigationPaneRoot: React.FC<Props> = observer((props) => {
+export const PageNavigationPaneRoot = observer(function PageNavigationPaneRoot(props: Props) {
   const { handleClose, isNavigationPaneOpen, page, versionHistory, extensions = [], storeType } = props;
 
   // navigation
@@ -83,7 +83,7 @@ export const PageNavigationPaneRoot: React.FC<Props> = observer((props) => {
 
   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="shrink-0 h-full flex flex-col bg-surface-1 pt-3.5 border-l border-subtle transition-all duration-300 ease-out"
       style={{
         width: `${paneWidth}px`,
         marginRight: isNavigationPaneOpen ? "0px" : `-${paneWidth}px`,
@@ -93,7 +93,7 @@ export const PageNavigationPaneRoot: React.FC<Props> = observer((props) => {
         <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="size-3.5 grid place-items-center text-secondary hover:text-primary transition-colors"
             onClick={handleClose}
             aria-label={t("page_navigation_pane.close_button")}
           >
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 aa23e10deb..1b1b09df81 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
@@ -22,7 +22,7 @@ type AssetItemProps = {
   page: TPageInstance;
 };
 
-const AssetItem = observer((props: AssetItemProps) => {
+const AssetItem = observer(function AssetItem(props: AssetItemProps) {
   const { asset, page } = props;
   // navigation
   const { workspaceSlug } = useParams();
@@ -65,26 +65,26 @@ const AssetItem = observer((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="relative group/asset-item h-12 flex items-center gap-2 pr-2 rounded-sm border border-subtle hover:bg-layer-1 transition-colors"
       >
         <div
-          className="flex-shrink-0 w-11 h-12 rounded-l bg-cover bg-no-repeat bg-center"
+          className="flex-shrink-0 w-11 h-12 rounded-l-sm bg-cover bg-no-repeat bg-center"
           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="text-13 font-medium truncate">{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="shrink-0 py-0.5 px-1 flex items-center gap-1 rounded-sm text-secondary hover:text-primary opacity-0 pointer-events-none group-hover/asset-item:opacity-100 group-hover/asset-item:pointer-events-auto transition-opacity"
             >
               <Download className="shrink-0 size-3" />
-              <span className="text-xs font-medium">{t("page_navigation_pane.tabs.assets.download_button")}</span>
+              <span className="text-11 font-medium">{t("page_navigation_pane.tabs.assets.download_button")}</span>
             </a>
           </div>
         </div>
@@ -101,7 +101,7 @@ const AssetItem = observer((props: AssetItemProps) => {
   );
 });
 
-export const PageNavigationPaneAssetsTabPanel: React.FC<Props> = observer((props) => {
+export const PageNavigationPaneAssetsTabPanel = observer(function PageNavigationPaneAssetsTabPanel(props: Props) {
   const { page } = props;
   // derived values
   const {
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 dcd5221ea5..fe71741350 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
@@ -14,7 +14,7 @@ type Props = {
   page: TPageInstance;
 };
 
-export const PageNavigationPaneInfoTabActorsInfo: React.FC<Props> = observer((props) => {
+export const PageNavigationPaneInfoTabActorsInfo = observer(function PageNavigationPaneInfoTabActorsInfo(props: Props) {
   const { page } = props;
   // navigation
   const { workspaceSlug } = useParams();
@@ -30,10 +30,8 @@ export const PageNavigationPaneInfoTabActorsInfo: React.FC<Props> = observer((pr
   return (
     <div className="space-y-3 mt-4">
       <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 +41,14 @@ export const PageNavigationPaneInfoTabActorsInfo: React.FC<Props> = observer((pr
             />
             <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 +58,7 @@ export const PageNavigationPaneInfoTabActorsInfo: React.FC<Props> = observer((pr
             />
             <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 dd23835c5f..80828fbb32 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
@@ -17,7 +17,9 @@ const DEFAULT_DOCUMENT_INFO: TDocumentInfo = {
   paragraphs: 0,
 };
 
-export const PageNavigationPaneInfoTabDocumentInfo: React.FC<Props> = observer((props) => {
+export const PageNavigationPaneInfoTabDocumentInfo = observer(function PageNavigationPaneInfoTabDocumentInfo(
+  props: Props
+) {
   const { page } = props;
   // states
   const [documentInfo, setDocumentInfo] = useState<TDocumentInfo>(DEFAULT_DOCUMENT_INFO);
@@ -72,9 +74,9 @@ export const PageNavigationPaneInfoTabDocumentInfo: React.FC<Props> = observer((
   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="p-2 bg-layer-2 rounded-sm">
+          <h6 className="text-14 font-semibold">{card.info}</h6>
+          <p className="mt-1.5 text-13 text-tertiary font-medium">{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 54aaffb6f1..fda6b8aef3 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
@@ -13,14 +13,14 @@ type Props = {
   versionHistory: Pick<TPageRootHandlers, "fetchAllVersions" | "fetchVersionDetails">;
 };
 
-export const PageNavigationPaneInfoTabPanel: React.FC<Props> = observer((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" />
+      <div className="flex-shrink-0 h-px bg-layer-1 my-3" />
       <PageNavigationPaneInfoTabVersionHistory page={page} versionHistory={versionHistory} />
     </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 c6c6860abc..3057693fe9 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
@@ -29,7 +29,7 @@ type VersionHistoryItemProps = {
   version: TPageVersion;
 };
 
-const VersionHistoryItem = observer((props: VersionHistoryItemProps) => {
+const VersionHistoryItem = observer(function VersionHistoryItem(props: VersionHistoryItemProps) {
   const { getVersionLink, isVersionActive, version } = props;
   // store hooks
   const { getUserDetails } = useMember();
@@ -39,19 +39,19 @@ const VersionHistoryItem = observer((props: VersionHistoryItemProps) => {
   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="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 hover:bg-layer-transparent-hover rounded-md py-2 px-1", {
+          " 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 +59,7 @@ const VersionHistoryItem = observer((props: VersionHistoryItemProps) => {
             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>
@@ -68,7 +68,9 @@ const VersionHistoryItem = observer((props: VersionHistoryItemProps) => {
   );
 });
 
-export const PageNavigationPaneInfoTabVersionHistory: React.FC<Props> = observer((props) => {
+export const PageNavigationPaneInfoTabVersionHistory = observer(function PageNavigationPaneInfoTabVersionHistory(
+  props: Props
+) {
   const { page, versionHistory } = props;
   // navigation
   const searchParams = useSearchParams();
@@ -102,26 +104,24 @@ export const PageNavigationPaneInfoTabVersionHistory: React.FC<Props> = observer
 
   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="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 size-6 flex-none rounded-full grid place-items-center 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 bg-layer-transparent hover:bg-layer-transparent-hover rounded-md py-2 px-1", {
+                "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 eb9a8251a8..adae3ab5df 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
@@ -9,7 +9,7 @@ type Props = {
   page: TPageInstance;
 };
 
-export const PageNavigationPaneOutlineTabPanel: React.FC<Props> = (props) => {
+export function PageNavigationPaneOutlineTabPanel(props: Props) {
   const { page } = props;
   // derived values
   const {
@@ -25,4 +25,4 @@ export const PageNavigationPaneOutlineTabPanel: React.FC<Props> = (props) => {
       />
     </div>
   );
-};
+}
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 6c4b4f28c1..aba1a04444 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
@@ -17,7 +17,7 @@ type Props = {
   versionHistory: Pick<TPageRootHandlers, "fetchAllVersions" | "fetchVersionDetails">;
 };
 
-export const PageNavigationPaneTabPanelsRoot: React.FC<Props> = (props) => {
+export function PageNavigationPaneTabPanelsRoot(props: Props) {
   const { page, versionHistory } = props;
 
   return (
@@ -36,4 +36,4 @@ export const PageNavigationPaneTabPanelsRoot: React.FC<Props> = (props) => {
       ))}
     </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 bf43832168..57f639ec9e 100644
--- a/apps/web/core/components/pages/navigation-pane/tabs-list.tsx
+++ b/apps/web/core/components/pages/navigation-pane/tabs-list.tsx
@@ -4,26 +4,26 @@ import { useTranslation } from "@plane/i18n";
 // plane web components
 import { ORDERED_PAGE_NAVIGATION_TABS_LIST } from "@/plane-web/components/pages/navigation-pane";
 
-export const PageNavigationPaneTabsList = () => {
+export function PageNavigationPaneTabsList() {
   // translation
   const { t } = useTranslation();
 
   return (
-    <Tab.List className="relative flex items-center p-[2px] rounded-md bg-custom-background-80 mx-3.5">
+    <Tab.List className="relative flex items-center p-0.5 rounded-md bg-layer-3 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"
+              className="relative z-[1] flex-1 py-1.5 text-13 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"
+            className="absolute top-1/2 -translate-y-1/2 bg-layer-3-selected rounded-sm 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)",
@@ -34,4 +34,4 @@ export const PageNavigationPaneTabsList = () => {
       )}
     </Tab.List>
   );
-};
+}
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 2d3cf84e38..6d9fa8efb5 100644
--- a/apps/web/core/components/pages/navigation-pane/types/extensions.ts
+++ b/apps/web/core/components/pages/navigation-pane/types/extensions.ts
@@ -2,17 +2,17 @@ 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/pages-list-main-content.tsx b/apps/web/core/components/pages/pages-list-main-content.tsx
index 1746973a93..58e239140b 100644
--- a/apps/web/core/components/pages/pages-list-main-content.tsx
+++ b/apps/web/core/components/pages/pages-list-main-content.tsx
@@ -1,4 +1,3 @@
-"use client";
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -28,13 +27,13 @@ type Props = {
   storeType: EPageStoreType;
 };
 
-export const PagesListMainContent: React.FC<Props> = observer((props) => {
+export const PagesListMainContent = observer(function PagesListMainContent(props: Props) {
   const { children, pageType, storeType } = props;
   // plane hooks
   const { t } = useTranslation();
   // store hooks
   const { currentProjectDetails } = useProject();
-  const { isAnyPageAvailable, getCurrentProjectFilteredPageIdsByTab, getCurrentProjectPageIdsByTab, filters, loader } =
+  const { isAnyPageAvailable, getCurrentProjectFilteredPageIdsByTab, getCurrentProjectPageIdsByTab, loader } =
     usePageStore(storeType);
   const { allowPermissions } = useUserPermissions();
   const { createPage } = usePageStore(EPageStoreType.PROJECT);
diff --git a/apps/web/core/components/pages/pages-list-view.tsx b/apps/web/core/components/pages/pages-list-view.tsx
index 4223c540a2..15f114f46e 100644
--- a/apps/web/core/components/pages/pages-list-view.tsx
+++ b/apps/web/core/components/pages/pages-list-view.tsx
@@ -16,7 +16,7 @@ type TPageView = {
   workspaceSlug: string;
 };
 
-export const PagesListView: React.FC<TPageView> = observer((props) => {
+export const PagesListView = observer(function PagesListView(props: TPageView) {
   const { children, pageType, projectId, storeType, workspaceSlug } = props;
   // store hooks
   const { isAnyPageAvailable, fetchPagesList } = usePageStore(storeType);
diff --git a/apps/web/core/components/pages/version/editor.tsx b/apps/web/core/components/pages/version/editor.tsx
index 0bf851b81a..27a5945666 100644
--- a/apps/web/core/components/pages/version/editor.tsx
+++ b/apps/web/core/components/pages/version/editor.tsx
@@ -19,7 +19,7 @@ export type TVersionEditorProps = {
   storeType: EPageStoreType;
 };
 
-export const PagesVersionEditor: React.FC<TVersionEditorProps> = observer((props) => {
+export const PagesVersionEditor = observer(function PagesVersionEditor(props: TVersionEditorProps) {
   const { activeVersion, versionDetails } = props;
   // params
   const { workspaceSlug, projectId } = useParams();
diff --git a/apps/web/core/components/pages/version/main-content.tsx b/apps/web/core/components/pages/version/main-content.tsx
index 3000960bb4..38a9dbcaaa 100644
--- a/apps/web/core/components/pages/version/main-content.tsx
+++ b/apps/web/core/components/pages/version/main-content.tsx
@@ -23,7 +23,7 @@ type Props = {
   storeType: EPageStoreType;
 };
 
-export const PageVersionsMainContent: React.FC<Props> = observer((props) => {
+export const PageVersionsMainContent = observer(function PageVersionsMainContent(props: Props) {
   const {
     activeVersion,
     editorComponent,
@@ -80,40 +80,34 @@ export const PageVersionsMainContent: React.FC<Props> = observer((props) => {
       {versionDetailsError ? (
         <div className="flex-grow grid 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="flex-shrink-0 grid place-items-center size-11 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="min-h-14 py-3 px-5 border-b border-subtle flex items-center justify-between gap-2">
             <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">
+              <span className="flex-shrink-0 flex items-center gap-1 text-11 font-medium text-accent-primary bg-accent-primary/20 py-1 px-1.5 rounded-sm">
                 <EyeIcon className="flex-shrink-0 size-3" />
                 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>
             )}
diff --git a/apps/web/core/components/pages/version/root.tsx b/apps/web/core/components/pages/version/root.tsx
index 8d0180c902..81e2c816bd 100644
--- a/apps/web/core/components/pages/version/root.tsx
+++ b/apps/web/core/components/pages/version/root.tsx
@@ -22,7 +22,7 @@ type Props = {
   storeType: EPageStoreType;
 };
 
-export const PageVersionsOverlay: React.FC<Props> = observer((props) => {
+export const PageVersionsOverlay = observer(function PageVersionsOverlay(props: Props) {
   const { editorComponent, fetchVersionDetails, handleRestore, pageId, restoreEnabled, storeType } = props;
   // navigation
   const router = useRouter();
@@ -43,7 +43,7 @@ export const PageVersionsOverlay: React.FC<Props> = observer((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",
+        "absolute inset-0 z-[16] h-full bg-surface-1 flex overflow-hidden opacity-0 pointer-events-none transition-opacity",
         {
           "opacity-100 pointer-events-auto": isOpen,
         }
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 1f54e6083d..9f61a5ceb4 100644
--- a/apps/web/core/components/power-k/config/help-commands.ts
+++ b/apps/web/core/components/power-k/config/help-commands.ts
@@ -5,7 +5,7 @@ import { DiscordIcon } from "@plane/propel/icons";
 import type { TPowerKCommandConfig } from "@/components/power-k/core/types";
 // hooks
 import { usePowerK } from "@/hooks/store/use-power-k";
-import { useTransient } from "@/hooks/store/use-transient";
+import { useChatSupport } from "@/hooks/use-chat-support";
 
 /**
  * Help commands - Help related commands
@@ -13,7 +13,7 @@ import { useTransient } from "@/hooks/store/use-transient";
 export const usePowerKHelpCommands = (): TPowerKCommandConfig[] => {
   // store
   const { toggleShortcutsListModal } = usePowerK();
-  const { toggleIntercom } = useTransient();
+  const { isEnabled: isChatSupportEnabled, openChatSupport } = useChatSupport();
 
   return [
     {
@@ -73,9 +73,9 @@ export const usePowerKHelpCommands = (): TPowerKCommandConfig[] => {
       group: "help",
       i18n_title: "power_k.help_actions.chat_with_us",
       icon: MessageSquare,
-      action: () => toggleIntercom(true),
-      isEnabled: () => true,
-      isVisible: () => true,
+      action: () => openChatSupport(),
+      isEnabled: () => isChatSupportEnabled,
+      isVisible: () => isChatSupportEnabled,
       closeOnSelect: 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 d0ae87d76a..4e69bea051 100644
--- a/apps/web/core/components/power-k/config/miscellaneous-commands.ts
+++ b/apps/web/core/components/power-k/config/miscellaneous-commands.ts
@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { Link, PanelLeft } from "lucide-react";
+import { Link, PanelLeft, Search } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { setToast, TOAST_TYPE } from "@plane/propel/toast";
@@ -8,10 +8,12 @@ import { copyTextToClipboard } from "@plane/utils";
 import type { TPowerKCommandConfig } from "@/components/power-k/core/types";
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { usePowerK } from "@/hooks/store/use-power-k";
 
 export const usePowerKMiscellaneousCommands = (): TPowerKCommandConfig[] => {
   // store hooks
   const { toggleSidebar } = useAppTheme();
+  const { topNavInputRef, topNavSearchInputRef } = usePowerK();
   // translation
   const { t } = useTranslation();
 
@@ -33,6 +35,15 @@ export const usePowerKMiscellaneousCommands = (): TPowerKCommandConfig[] => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const focusTopNavSearch = useCallback(() => {
+    // Focus PowerK input if available, otherwise focus regular search input
+    if (topNavSearchInputRef?.current) {
+      topNavSearchInputRef.current.focus();
+    } else if (topNavInputRef?.current) {
+      topNavInputRef.current.focus();
+    }
+  }, [topNavInputRef, topNavSearchInputRef]);
+
   return [
     {
       id: "toggle_app_sidebar",
@@ -58,5 +69,17 @@ export const usePowerKMiscellaneousCommands = (): TPowerKCommandConfig[] => {
       isVisible: () => true,
       closeOnSelect: true,
     },
+    {
+      id: "focus_top_nav_search",
+      group: "miscellaneous",
+      type: "action",
+      i18n_title: "power_k.miscellaneous_actions.focus_top_nav_search",
+      icon: Search,
+      action: focusTopNavSearch,
+      modifierShortcut: "cmd+f",
+      isEnabled: () => true,
+      isVisible: () => true,
+      closeOnSelect: true,
+    },
   ];
 };
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 5f86886ac9..6e6ad8e864 100644
--- a/apps/web/core/components/power-k/config/preferences-commands.ts
+++ b/apps/web/core/components/power-k/config/preferences-commands.ts
@@ -28,9 +28,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 +41,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 +57,7 @@ export const usePowerKPreferencesCommands = (): TPowerKCommandConfig[] => {
             title: t("toast.success"),
             message: t("power_k.preferences_actions.toast.timezone.success"),
           });
+          return;
         })
         .catch(() => {
           setToast({
@@ -60,6 +65,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 +81,7 @@ export const usePowerKPreferencesCommands = (): TPowerKCommandConfig[] => {
             title: t("toast.success"),
             message: t("power_k.preferences_actions.toast.generic.success"),
           });
+          return;
         })
         .catch(() => {
           setToast({
@@ -82,6 +89,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 +106,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/global-shortcuts.tsx b/apps/web/core/components/power-k/global-shortcuts.tsx
index 5eb7e16188..606d6d7057 100644
--- a/apps/web/core/components/power-k/global-shortcuts.tsx
+++ b/apps/web/core/components/power-k/global-shortcuts.tsx
@@ -1,11 +1,8 @@
-"use client";
-
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // hooks
 import { usePowerK } from "@/hooks/store/use-power-k";
-import { useAppRouter } from "@/hooks/use-app-router";
 // local imports
 import { detectContextFromURL } from "./core/context-detector";
 import { ShortcutHandler } from "./core/shortcut-handler";
@@ -21,10 +18,9 @@ type GlobalShortcutsProps = {
  * Global shortcuts component - sets up keyboard listeners and context detection
  * Should be mounted once at the app root level
  */
-export const GlobalShortcutsProvider = observer((props: GlobalShortcutsProps) => {
+export const GlobalShortcutsProvider = observer(function GlobalShortcutsProvider(props: GlobalShortcutsProps) {
   const { context, commands } = props;
   // router
-  const router = useAppRouter();
   const params = useParams();
   // store hooks
   const { commandRegistry, isShortcutsListModalOpen, setActiveContext, togglePowerKModal, toggleShortcutsListModal } =
@@ -42,21 +38,40 @@ export const GlobalShortcutsProvider = observer((props: GlobalShortcutsProps) =>
     commandRegistry.registerMultiple(commands);
   }, [commandRegistry, commands]);
 
-  // Setup global shortcut handler
+  // Store context in ref to avoid recreation on context changes
+  const contextRef = useRef(context);
   useEffect(() => {
-    const handler = new ShortcutHandler(
+    contextRef.current = context;
+  }, [context]);
+
+  // Store handler in ref to avoid recreation on context changes
+  const handlerRef = useRef<ShortcutHandler | null>(null);
+
+  // Setup global shortcut handler - only recreate when commandRegistry or togglePowerKModal changes
+  useEffect(() => {
+    // Clean up previous handler if it exists
+    if (handlerRef.current) {
+      document.removeEventListener("keydown", handlerRef.current.handleKeyDown);
+      handlerRef.current.destroy();
+    }
+
+    // Create new handler with function that reads from ref
+    handlerRef.current = new ShortcutHandler(
       commandRegistry,
-      () => context,
+      () => contextRef.current,
       () => togglePowerKModal(true)
     );
 
-    document.addEventListener("keydown", handler.handleKeyDown);
+    document.addEventListener("keydown", handlerRef.current.handleKeyDown);
 
     return () => {
-      document.removeEventListener("keydown", handler.handleKeyDown);
-      handler.destroy();
+      if (handlerRef.current) {
+        document.removeEventListener("keydown", handlerRef.current.handleKeyDown);
+        handlerRef.current.destroy();
+        handlerRef.current = null;
+      }
     };
-  }, [context, router, commandRegistry, togglePowerKModal]);
+  }, [commandRegistry, togglePowerKModal]);
 
   return <ShortcutsModal isOpen={isShortcutsListModalOpen} onClose={() => toggleShortcutsListModal(false)} />;
 });
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 d598181bc4..52699135a5 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
@@ -6,7 +6,6 @@ import { useCycle } from "@/hooks/store/use-cycle";
 import { useModule } from "@/hooks/store/use-module";
 // plane web imports
 import { useExtendedContextIndicator } from "@/plane-web/components/command-palette/power-k/hooks/use-extended-context-indicator";
-import type { TPowerKContextTypeExtended } from "@/plane-web/components/command-palette/power-k/types";
 import { EPageStoreType, usePageStore } from "@/plane-web/hooks/store";
 // local imports
 import type { TPowerKContextType } from "../core/types";
@@ -25,13 +24,13 @@ export const useContextIndicator = (args: TArgs): string | null => {
   const { getPageById } = usePageStore(EPageStoreType.PROJECT);
   // extended context indicator
   const extendedIndicator = useExtendedContextIndicator({
-    activeContext: activeContext as TPowerKContextTypeExtended,
+    activeContext,
   });
   let indicator: string | undefined | null = null;
 
   switch (activeContext) {
     case "work-item": {
-      indicator = workItemIdentifier.toString();
+      indicator = workItemIdentifier ? workItemIdentifier.toString() : null;
       break;
     }
     case "cycle": {
diff --git a/apps/web/core/components/power-k/menus/builder.tsx b/apps/web/core/components/power-k/menus/builder.tsx
index 988658ce6f..e7b0b82589 100644
--- a/apps/web/core/components/power-k/menus/builder.tsx
+++ b/apps/web/core/components/power-k/menus/builder.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { Command } from "cmdk";
 // local imports
@@ -19,7 +17,7 @@ type Props<T> = {
   emptyText?: string;
 };
 
-export const PowerKMenuBuilder = <T,>({
+export function PowerKMenuBuilder<T>({
   heading,
   items,
   onSelect,
@@ -30,7 +28,7 @@ export const PowerKMenuBuilder = <T,>({
   getValue,
   isSelected,
   emptyText,
-}: Props<T>) => {
+}: Props<T>) {
   if (items.length === 0) return <PowerKMenuEmptyState emptyText={emptyText} />;
 
   return (
@@ -48,4 +46,4 @@ export const PowerKMenuBuilder = <T,>({
       ))}
     </Command.Group>
   );
-};
+}
diff --git a/apps/web/core/components/power-k/menus/cycles.tsx b/apps/web/core/components/power-k/menus/cycles.tsx
index 51b2085fb3..b6af888e46 100644
--- a/apps/web/core/components/power-k/menus/cycles.tsx
+++ b/apps/web/core/components/power-k/menus/cycles.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -14,15 +12,17 @@ type Props = {
   value?: string | null;
 };
 
-export const PowerKCyclesMenu: React.FC<Props> = observer(({ cycles, onSelect, value }) => (
-  <PowerKMenuBuilder
-    items={cycles}
-    getIcon={() => ContrastIcon}
-    getKey={(cycle) => cycle.id}
-    getValue={(cycle) => cycle.name}
-    getLabel={(cycle) => cycle.name}
-    isSelected={(cycle) => value === cycle.id}
-    onSelect={onSelect}
-    emptyText="No cycles found"
-  />
-));
+export const PowerKCyclesMenu = observer(function PowerKCyclesMenu({ cycles, onSelect, value }: Props) {
+  return (
+    <PowerKMenuBuilder
+      items={cycles}
+      getIcon={() => ContrastIcon}
+      getKey={(cycle) => cycle.id}
+      getValue={(cycle) => cycle.name}
+      getLabel={(cycle) => cycle.name}
+      isSelected={(cycle) => value === cycle.id}
+      onSelect={onSelect}
+      emptyText="No cycles found"
+    />
+  );
+});
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 9ee4bd8e65..9958d68fcd 100644
--- a/apps/web/core/components/power-k/menus/empty-state.tsx
+++ b/apps/web/core/components/power-k/menus/empty-state.tsx
@@ -4,6 +4,6 @@ type Props = {
   emptyText?: string;
 };
 
-export const PowerKMenuEmptyState: React.FC<Props> = ({ emptyText = "No results found" }) => (
-  <div className="px-3 py-8 text-center text-sm text-custom-text-300">{emptyText}</div>
-);
+export function PowerKMenuEmptyState({ emptyText = "No results found" }: Props) {
+  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 6325070022..61e87d7d44 100644
--- a/apps/web/core/components/power-k/menus/labels.tsx
+++ b/apps/web/core/components/power-k/menus/labels.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -13,19 +11,21 @@ type Props = {
   value?: string[];
 };
 
-export const PowerKLabelsMenu: React.FC<Props> = observer(({ labels, onSelect, value }) => (
-  <PowerKMenuBuilder
-    items={labels}
-    getIconNode={(label) => (
-      <span className="shrink-0 size-3.5 grid place-items-center">
-        <span className="size-2.5 rounded-full" style={{ backgroundColor: label.color }} />
-      </span>
-    )}
-    getKey={(label) => label.id}
-    getValue={(label) => label.name}
-    getLabel={(label) => label.name}
-    isSelected={(label) => !!value?.includes(label.id)}
-    onSelect={onSelect}
-    emptyText="No labels found"
-  />
-));
+export const PowerKLabelsMenu = observer(function PowerKLabelsMenu({ labels, onSelect, value }: Props) {
+  return (
+    <PowerKMenuBuilder
+      items={labels}
+      getIconNode={(label) => (
+        <span className="shrink-0 size-3.5 grid place-items-center">
+          <span className="size-2.5 rounded-full" style={{ backgroundColor: label.color }} />
+        </span>
+      )}
+      getKey={(label) => label.id}
+      getValue={(label) => label.name}
+      getLabel={(label) => label.name}
+      isSelected={(label) => !!value?.includes(label.id)}
+      onSelect={onSelect}
+      emptyText="No labels found"
+    />
+  );
+});
diff --git a/apps/web/core/components/power-k/menus/members.tsx b/apps/web/core/components/power-k/menus/members.tsx
index 54b3498986..ab0e549046 100644
--- a/apps/web/core/components/power-k/menus/members.tsx
+++ b/apps/web/core/components/power-k/menus/members.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
 // plane imports
@@ -17,7 +15,7 @@ type Props = {
   value: string[];
 };
 
-export const PowerKMembersMenu: React.FC<Props> = observer((props) => {
+export const PowerKMembersMenu = observer(function PowerKMembersMenu(props: Props) {
   const { handleSelect, heading, userIds, value } = props;
   // store hooks
   const { getUserDetails } = useMember();
diff --git a/apps/web/core/components/power-k/menus/modules.tsx b/apps/web/core/components/power-k/menus/modules.tsx
index 3abe267588..8684cfdd0f 100644
--- a/apps/web/core/components/power-k/menus/modules.tsx
+++ b/apps/web/core/components/power-k/menus/modules.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -14,15 +12,17 @@ type Props = {
   value?: string[];
 };
 
-export const PowerKModulesMenu: React.FC<Props> = observer(({ modules, onSelect, value }) => (
-  <PowerKMenuBuilder
-    items={modules}
-    getKey={(module) => module.id}
-    getIconNode={(module) => <ModuleStatusIcon status={module.status ?? "backlog"} className="shrink-0 size-3.5" />}
-    getValue={(module) => module.name}
-    getLabel={(module) => module.name}
-    isSelected={(module) => !!value?.includes(module.id)}
-    onSelect={onSelect}
-    emptyText="No modules found"
-  />
-));
+export const PowerKModulesMenu = observer(function PowerKModulesMenu({ modules, onSelect, value }: Props) {
+  return (
+    <PowerKMenuBuilder
+      items={modules}
+      getKey={(module) => module.id}
+      getIconNode={(module) => <ModuleStatusIcon status={module.status ?? "backlog"} className="shrink-0 size-3.5" />}
+      getValue={(module) => module.name}
+      getLabel={(module) => module.name}
+      isSelected={(module) => !!value?.includes(module.id)}
+      onSelect={onSelect}
+      emptyText="No modules found"
+    />
+  );
+});
diff --git a/apps/web/core/components/power-k/menus/projects.tsx b/apps/web/core/components/power-k/menus/projects.tsx
index 61ff21e916..c65f902e5c 100644
--- a/apps/web/core/components/power-k/menus/projects.tsx
+++ b/apps/web/core/components/power-k/menus/projects.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 // components
 import { Logo } from "@plane/propel/emoji-icon-picker";
@@ -13,18 +11,20 @@ type Props = {
   onSelect: (project: TPartialProject) => void;
 };
 
-export const PowerKProjectsMenu: React.FC<Props> = ({ projects, onSelect }) => (
-  <PowerKMenuBuilder
-    items={projects}
-    getKey={(project) => project.id}
-    getIconNode={(project) => (
-      <span className="shrink-0">
-        <Logo logo={project.logo_props} size={14} />
-      </span>
-    )}
-    getValue={(project) => project.name}
-    getLabel={(project) => project.name}
-    onSelect={onSelect}
-    emptyText="No projects found"
-  />
-);
+export function PowerKProjectsMenu({ projects, onSelect }: Props) {
+  return (
+    <PowerKMenuBuilder
+      items={projects}
+      getKey={(project) => project.id}
+      getIconNode={(project) => (
+        <span className="shrink-0">
+          <Logo logo={project.logo_props} size={14} />
+        </span>
+      )}
+      getValue={(project) => project.name}
+      getLabel={(project) => project.name}
+      onSelect={onSelect}
+      emptyText="No projects found"
+    />
+  );
+}
diff --git a/apps/web/core/components/power-k/menus/settings.tsx b/apps/web/core/components/power-k/menus/settings.tsx
index 7e7cd050a0..ed594f3b13 100644
--- a/apps/web/core/components/power-k/menus/settings.tsx
+++ b/apps/web/core/components/power-k/menus/settings.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 // local imports
@@ -17,14 +15,16 @@ type Props = {
   onSelect: (setting: TSettingItem) => void;
 };
 
-export const PowerKSettingsMenu: React.FC<Props> = observer(({ settings, onSelect }) => (
-  <PowerKMenuBuilder
-    items={settings}
-    getKey={(setting) => setting.key}
-    getIcon={(setting) => setting.icon}
-    getValue={(setting) => setting.label}
-    getLabel={(setting) => setting.label}
-    onSelect={onSelect}
-    emptyText="No settings found"
-  />
-));
+export const PowerKSettingsMenu = observer(function PowerKSettingsMenu({ settings, onSelect }: Props) {
+  return (
+    <PowerKMenuBuilder
+      items={settings}
+      getKey={(setting) => setting.key}
+      getIcon={(setting) => setting.icon}
+      getValue={(setting) => setting.label}
+      getLabel={(setting) => setting.label}
+      onSelect={onSelect}
+      emptyText="No settings found"
+    />
+  );
+});
diff --git a/apps/web/core/components/power-k/menus/views.tsx b/apps/web/core/components/power-k/menus/views.tsx
index 51bdc721f1..fdd8ec8d9d 100644
--- a/apps/web/core/components/power-k/menus/views.tsx
+++ b/apps/web/core/components/power-k/menus/views.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 import { Layers } from "lucide-react";
@@ -13,14 +11,16 @@ type Props = {
   onSelect: (view: IProjectView) => void;
 };
 
-export const PowerKViewsMenu: React.FC<Props> = observer(({ views, onSelect }) => (
-  <PowerKMenuBuilder
-    items={views}
-    getKey={(view) => view.id}
-    getIcon={() => Layers}
-    getValue={(view) => view.name}
-    getLabel={(view) => view.name}
-    onSelect={onSelect}
-    emptyText="No views found"
-  />
-));
+export const PowerKViewsMenu = observer(function PowerKViewsMenu({ views, onSelect }: Props) {
+  return (
+    <PowerKMenuBuilder
+      items={views}
+      getKey={(view) => view.id}
+      getIcon={() => Layers}
+      getValue={(view) => view.name}
+      getLabel={(view) => view.name}
+      onSelect={onSelect}
+      emptyText="No views found"
+    />
+  );
+});
diff --git a/apps/web/core/components/power-k/menus/workspaces.tsx b/apps/web/core/components/power-k/menus/workspaces.tsx
index 46302ad2d5..a8c494628b 100644
--- a/apps/web/core/components/power-k/menus/workspaces.tsx
+++ b/apps/web/core/components/power-k/menus/workspaces.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 // plane imports
 import type { IWorkspace } from "@plane/types";
@@ -13,14 +11,18 @@ type Props = {
   onSelect: (workspace: IWorkspace) => void;
 };
 
-export const PowerKWorkspacesMenu: React.FC<Props> = ({ workspaces, onSelect }) => (
-  <PowerKMenuBuilder
-    items={workspaces}
-    getKey={(workspace) => workspace.id}
-    getIconNode={(workspace) => <WorkspaceLogo logo={workspace.logo_url} name={workspace.name} classNames="shrink-0" />}
-    getValue={(workspace) => workspace.name}
-    getLabel={(workspace) => workspace.name}
-    onSelect={onSelect}
-    emptyText="No workspaces found"
-  />
-);
+export function PowerKWorkspacesMenu({ workspaces, onSelect }: Props) {
+  return (
+    <PowerKMenuBuilder
+      items={workspaces}
+      getKey={(workspace) => workspace.id}
+      getIconNode={(workspace) => (
+        <WorkspaceLogo logo={workspace.logo_url} name={workspace.name} classNames="shrink-0" />
+      )}
+      getValue={(workspace) => workspace.name}
+      getLabel={(workspace) => workspace.name}
+      onSelect={onSelect}
+      emptyText="No workspaces found"
+    />
+  );
+}
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 4f0f8ea70f..8b0caffa7d 100644
--- a/apps/web/core/components/power-k/projects-app-provider.tsx
+++ b/apps/web/core/components/power-k/projects-app-provider.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -22,7 +20,7 @@ import { ProjectsAppPowerKModalWrapper } from "./ui/modal/wrapper";
 /**
  * Projects App PowerK provider
  */
-export const ProjectsAppPowerKProvider = observer(() => {
+export const ProjectsAppPowerKProvider = observer(function ProjectsAppPowerKProvider() {
   // router
   const router = useAppRouter();
   const params = useParams();
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 903c0fdcae..fb00412539 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
@@ -61,7 +61,7 @@ export const formatShortcutForDisplay = (shortcut: string | undefined): string |
   return parts.join("");
 };
 
-export const ShortcutBadge = ({ shortcut }: { shortcut: string | undefined }) => {
+export function ShortcutBadge({ shortcut }: { shortcut: string | undefined }) {
   if (!shortcut) return null;
 
   const formatted = formatShortcutForDisplay(shortcut);
@@ -70,14 +70,14 @@ export const ShortcutBadge = ({ shortcut }: { shortcut: string | undefined }) =>
     <div className="shrink-0 pointer-events-none inline-flex items-center gap-1 select-none font-medium">
       {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>
       ))}
     </div>
   );
-};
+}
 
 /**
  * Formats key sequence for display (e.g., "gm" -> "G then M")
@@ -89,7 +89,7 @@ export const formatKeySequenceForDisplay = (sequence: string | undefined): strin
   return chars.map((c) => c.toUpperCase()).join(" then ");
 };
 
-export const KeySequenceBadge = ({ sequence }: { sequence: string | undefined }) => {
+export function KeySequenceBadge({ sequence }: { sequence: string | undefined }) {
   if (!sequence) return null;
 
   const chars = sequence.split("");
@@ -98,12 +98,12 @@ export const KeySequenceBadge = ({ sequence }: { sequence: string | undefined })
     <div className="shrink-0 pointer-events-none inline-flex items-center gap-1 select-none font-medium">
       {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 6eb660f7be..071951c8cd 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
@@ -18,13 +18,13 @@ type Props = {
   value?: string;
 };
 
-export const PowerKModalCommandItem: React.FC<Props> = (props) => {
+export function PowerKModalCommandItem(props: Props) {
   const { icon: Icon, iconNode, isDisabled, isSelected, keySequence, label, onSelect, shortcut, value } = 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,
         })}
       >
@@ -33,10 +33,10 @@ export const PowerKModalCommandItem: React.FC<Props> = (props) => {
         {label}
       </div>
       <div className="shrink-0 flex items-center gap-2">
-        {isSelected && <Check className="shrink-0 size-3 text-custom-text-200" />}
+        {isSelected && <Check className="shrink-0 size-3 text-secondary" />}
         {keySequence && <KeySequenceBadge sequence={keySequence} />}
         {shortcut && <ShortcutBadge shortcut={shortcut} />}
       </div>
     </Command.Item>
   );
-};
+}
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 9cd4f2735a..2c805eba6d 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
@@ -11,9 +11,10 @@ export type TPowerKCommandsListProps = {
   isWorkspaceLevel: boolean;
   searchTerm: string;
   setSearchTerm: (value: string) => void;
+  handleSearchMenuClose?: () => void;
 };
 
-export const ProjectsAppPowerKCommandsList: React.FC<TPowerKCommandsListProps> = (props) => {
+export function ProjectsAppPowerKCommandsList(props: TPowerKCommandsListProps) {
   const {
     activePage,
     context,
@@ -22,6 +23,7 @@ export const ProjectsAppPowerKCommandsList: React.FC<TPowerKCommandsListProps> =
     isWorkspaceLevel,
     searchTerm,
     setSearchTerm,
+    handleSearchMenuClose,
   } = props;
 
   return (
@@ -32,6 +34,7 @@ export const ProjectsAppPowerKCommandsList: React.FC<TPowerKCommandsListProps> =
         isWorkspaceLevel={!context.params.projectId || isWorkspaceLevel}
         searchTerm={searchTerm}
         updateSearchTerm={setSearchTerm}
+        handleSearchMenuClose={handleSearchMenuClose}
       />
       <PowerKContextBasedPagesList
         activeContext={context.activeContext}
@@ -46,4 +49,4 @@ export const ProjectsAppPowerKCommandsList: React.FC<TPowerKCommandsListProps> =
       />
     </>
   );
-};
+}
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 658d2f4263..0cf65341a8 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
@@ -11,7 +11,7 @@ type Props = {
   handleClearContext: () => void;
 };
 
-export const PowerKModalContextIndicator: React.FC<Props> = (props) => {
+export function PowerKModalContextIndicator(props: Props) {
   const { activeContext, handleClearContext } = props;
   // context indicator
   const contextIndicator = useContextIndicator({ activeContext });
@@ -24,16 +24,16 @@ export const PowerKModalContextIndicator: React.FC<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="max-w-full bg-layer-1 pl-2 pr-1 py-0.5 rounded-sm inline-flex items-center gap-1 truncate">
+        <div className="flex items-center gap-1.5 text-11 font-medium truncate">
+          <span className="shrink-0 text-secondary">{t(contextEntity.i18n_indicator)}</span>
+          <span className="shrink-0 bg-layer-1 size-1 rounded-full" />
           <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="shrink-0 grid place-items-center p-1 text-secondary hover:text-primary transition-colors"
           title="Clear context (Backspace)"
           aria-label="Clear context (Backspace)"
           tabIndex={-1}
@@ -43,4 +43,4 @@ export const PowerKModalContextIndicator: React.FC<Props> = (props) => {
       </div>
     </div>
   );
-};
+}
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 0b2dcf4fca..3814f023d3 100644
--- a/apps/web/core/components/power-k/ui/modal/footer.tsx
+++ b/apps/web/core/components/power-k/ui/modal/footer.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type React from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -12,16 +10,16 @@ type Props = {
   onWorkspaceLevelChange: (value: boolean) => void;
 };
 
-export const PowerKModalFooter: React.FC<Props> = observer((props) => {
+export const PowerKModalFooter = observer(function PowerKModalFooter(props: Props) {
   const { isWorkspaceLevel, projectId, onWorkspaceLevelChange } = props;
   // translation
   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="w-full flex items-center justify-between px-4 py-2 border-t border-subtle bg-surface-2/80 rounded-b-lg">
       <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 b1354ad711..9ed4f0c748 100644
--- a/apps/web/core/components/power-k/ui/modal/header.tsx
+++ b/apps/web/core/components/power-k/ui/modal/header.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { Command } from "cmdk";
 import { X, Search } from "lucide-react";
@@ -17,7 +15,7 @@ type Props = {
   searchTerm: string;
 };
 
-export const PowerKModalHeader: React.FC<Props> = (props) => {
+export function PowerKModalHeader(props: Props) {
   const { context, searchTerm, onSearchChange, activePage } = props;
   // translation
   const { t } = useTranslation();
@@ -27,7 +25,7 @@ export const PowerKModalHeader: React.FC<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
@@ -38,18 +36,18 @@ export const PowerKModalHeader: React.FC<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" />
+        <Search className="shrink-0 size-4 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>
@@ -57,4 +55,4 @@ export const PowerKModalHeader: React.FC<Props> = (props) => {
       </div>
     </div>
   );
-};
+}
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 33d4e034b8..8c1daffdf6 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,6 +1,4 @@
-"use client";
-
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { useParams } from "next/navigation";
 // plane imports
 import { WORKSPACE_DEFAULT_SEARCH_RESULT } from "@plane/constants";
@@ -24,10 +22,11 @@ type Props = {
   isWorkspaceLevel: boolean;
   searchTerm: string;
   updateSearchTerm: (value: string) => void;
+  handleSearchMenuClose?: () => void;
 };
 
-export const PowerKModalSearchMenu: React.FC<Props> = (props) => {
-  const { activePage, context, isWorkspaceLevel, searchTerm, updateSearchTerm } = props;
+export function PowerKModalSearchMenu(props: Props) {
+  const { activePage, context, isWorkspaceLevel, searchTerm, updateSearchTerm, handleSearchMenuClose } = props;
   // states
   const [resultsCount, setResultsCount] = useState(0);
   const [isSearching, setIsSearching] = useState(false);
@@ -70,12 +69,17 @@ export const PowerKModalSearchMenu: React.FC<Props> = (props) => {
 
   if (activePage) return null;
 
+  const handleClosePalette = () => {
+    handleSearchMenuClose?.();
+    togglePowerKModal(false);
+  };
+
   return (
     <>
       {searchTerm.trim() !== "" && (
         <div className="flex items-center justify-between gap-2 mt-4 px-4">
           <h5
-            className={cn("text-xs text-custom-text-100", {
+            className={cn("text-11 text-primary", {
               "animate-pulse": isSearching,
             })}
           >
@@ -99,9 +103,7 @@ export const PowerKModalSearchMenu: React.FC<Props> = (props) => {
         />
       )}
 
-      {searchTerm.trim() !== "" && (
-        <PowerKModalSearchResults closePalette={() => togglePowerKModal(false)} results={results} />
-      )}
+      {searchTerm.trim() !== "" && <PowerKModalSearchResults closePalette={handleClosePalette} results={results} />}
     </>
   );
-};
+}
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 601a81a999..8233e2f503 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,5 +1,3 @@
-"use client";
-
 import { Briefcase, FileText, Layers, LayoutGrid } from "lucide-react";
 // plane imports
 import { ContrastIcon, DiceIcon } from "@plane/propel/icons";
@@ -29,7 +27,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) =>
@@ -44,7 +42,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>
@@ -63,7 +61,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) =>
@@ -74,7 +72,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) =>
@@ -85,7 +83,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 e195728e9e..efe942ed46 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,5 +1,3 @@
-"use client";
-
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -17,7 +15,7 @@ type Props = {
   results: IWorkspaceSearchResults;
 };
 
-export const PowerKModalSearchResults: React.FC<Props> = observer((props) => {
+export const PowerKModalSearchResults = observer(function PowerKModalSearchResults(props: Props) {
   const { closePalette, results } = props;
   // router
   const router = useAppRouter();
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 365271b5a8..8e13e37de5 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,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useState, Fragment } from "react";
 import { Search } from "lucide-react";
 import { Dialog, Transition } from "@headlessui/react";
@@ -17,7 +14,7 @@ type Props = {
   onClose: () => void;
 };
 
-export const ShortcutsModal: FC<Props> = (props) => {
+export function ShortcutsModal(props: Props) {
   const { isOpen, onClose } = props;
   // states
   const [query, setQuery] = useState("");
@@ -44,7 +41,7 @@ export const ShortcutsModal: FC<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">
@@ -59,18 +56,15 @@ export const ShortcutsModal: FC<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">
+                    <Search className="h-3.5 w-3.5 text-secondary" />
                     <Input
                       id="search"
                       name="search"
@@ -78,7 +72,7 @@ export const ShortcutsModal: FC<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}
                     />
@@ -92,4 +86,4 @@ export const ShortcutsModal: FC<Props> = (props) => {
       </Dialog>
     </Transition.Root>
   );
-};
+}
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 a8ed9fb267..8a0b5723f9 100644
--- a/apps/web/core/components/power-k/ui/modal/wrapper.tsx
+++ b/apps/web/core/components/power-k/ui/modal/wrapper.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState, useEffect, useCallback } from "react";
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
@@ -20,7 +18,7 @@ type Props = {
   onClose: () => void;
 };
 
-export const ProjectsAppPowerKModalWrapper = observer((props: Props) => {
+export const ProjectsAppPowerKModalWrapper = observer(function ProjectsAppPowerKModalWrapper(props: Props) {
   const { commandsListComponent: CommandsListComponent, context, hideFooter = false, isOpen, onClose } = props;
   // states
   const [searchTerm, setSearchTerm] = useState("");
@@ -125,7 +123,7 @@ export const ProjectsAppPowerKModalWrapper = observer((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>
         {/* Modal Container */}
         <div className="fixed inset-0 z-30 overflow-y-auto">
@@ -139,7 +137,7 @@ export const ProjectsAppPowerKModalWrapper = observer((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 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="relative flex w-full max-w-2xl transform flex-col items-center justify-center divide-y divide-subtle-1 divide-opacity-10 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/module/root.tsx b/apps/web/core/components/power-k/ui/pages/context-based/module/root.tsx
index 6c7edfb2c0..8aefda0ca2 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // components
@@ -16,7 +14,7 @@ type Props = {
   handleSelection: (data: unknown) => void;
 };
 
-export const PowerKModuleContextBasedPages: React.FC<Props> = observer((props) => {
+export const PowerKModuleContextBasedPages = observer(function PowerKModuleContextBasedPages(props: Props) {
   const { activePage, handleSelection } = props;
   // navigation
   const { moduleId } = useParams();
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 5510b54355..0635217518 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,5 +1,3 @@
-"use client";
-
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
 // plane imports
@@ -15,7 +13,7 @@ type Props = {
   value: TModuleStatus;
 };
 
-export const PowerKModuleStatusMenu: React.FC<Props> = observer((props) => {
+export const PowerKModuleStatusMenu = observer(function PowerKModuleStatusMenu(props: Props) {
   const { handleSelect, value } = props;
   // translation
   const { t } = useTranslation();
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 71c7828cd4..0e264de1e6 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
@@ -19,7 +19,7 @@ export type ContextBasedActionsProps = {
   handleSelection: (data: unknown) => void;
 };
 
-export const PowerKContextBasedPagesList: React.FC<ContextBasedActionsProps> = (props) => {
+export function PowerKContextBasedPagesList(props: ContextBasedActionsProps) {
   const { activeContext, activePage, handleSelection } = props;
 
   return (
@@ -33,7 +33,7 @@ export const PowerKContextBasedPagesList: React.FC<ContextBasedActionsProps> = (
       <PowerKContextBasedActionsExtended {...props} />
     </>
   );
-};
+}
 
 export const usePowerKContextBasedActions = (): TPowerKCommandConfig[] => {
   const workItemCommands = usePowerKWorkItemContextBasedCommands();
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 39389f9803..1fbc7befe7 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane types
 import type { ICycle, TIssue } from "@plane/types";
@@ -14,7 +12,7 @@ type Props = {
   workItemDetails: TIssue;
 };
 
-export const PowerKWorkItemCyclesMenu: React.FC<Props> = observer((props) => {
+export const PowerKWorkItemCyclesMenu = observer(function PowerKWorkItemCyclesMenu(props: Props) {
   const { handleSelect, workItemDetails } = props;
   // store hooks
   const { getProjectCycleIds, getCycleById } = useCycle();
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 58b3eeb2bc..30b7f4ac4f 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,5 +1,3 @@
-"use client";
-
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
 import { Triangle } from "lucide-react";
@@ -19,7 +17,7 @@ type Props = {
   workItemDetails: TIssue;
 };
 
-export const PowerKWorkItemEstimatesMenu: React.FC<Props> = observer((props) => {
+export const PowerKWorkItemEstimatesMenu = observer(function PowerKWorkItemEstimatesMenu(props: Props) {
   const { handleSelect, workItemDetails } = props;
   // store hooks
   const { currentActiveEstimateIdByProjectId, getEstimateById } = useProjectEstimates();
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 c8e51991f2..03d974506f 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane types
 import type { IIssueLabel, TIssue } from "@plane/types";
@@ -14,7 +12,7 @@ type Props = {
   workItemDetails: TIssue;
 };
 
-export const PowerKWorkItemLabelsMenu: React.FC<Props> = observer((props) => {
+export const PowerKWorkItemLabelsMenu = observer(function PowerKWorkItemLabelsMenu(props: Props) {
   const { handleSelect, workItemDetails } = props;
   // store hooks
   const { getProjectLabelIds, getLabelById } = useLabel();
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 5c46463e51..bda75dc734 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane types
 import type { IModule, TIssue } from "@plane/types";
@@ -14,7 +12,7 @@ type Props = {
   workItemDetails: TIssue;
 };
 
-export const PowerKWorkItemModulesMenu: React.FC<Props> = observer((props) => {
+export const PowerKWorkItemModulesMenu = observer(function PowerKWorkItemModulesMenu(props: Props) {
   const { handleSelect, workItemDetails } = props;
   // store hooks
   const { getProjectModuleIds, getModuleById } = useModule();
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 ff33f0b593..881604447a 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,5 +1,3 @@
-"use client";
-
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
 // plane imports
@@ -14,7 +12,7 @@ type Props = {
   workItemDetails: TIssue;
 };
 
-export const PowerKWorkItemPrioritiesMenu: React.FC<Props> = observer((props) => {
+export const PowerKWorkItemPrioritiesMenu = observer(function PowerKWorkItemPrioritiesMenu(props: Props) {
   const { handleSelect, workItemDetails } = props;
 
   return (
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 ad81490362..efe2f978d2 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
@@ -23,7 +21,7 @@ type Props = {
   handleSelection: (data: unknown) => void;
 };
 
-export const PowerKWorkItemContextBasedPages: React.FC<Props> = observer((props) => {
+export const PowerKWorkItemContextBasedPages = observer(function PowerKWorkItemContextBasedPages(props: Props) {
   const { activePage, handleSelection } = props;
   // navigation
   const { workItem: entityIdentifier } = useParams();
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 835cae3abd..6afc459f03 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,5 +1,3 @@
-"use client";
-
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
 // plane types
@@ -16,7 +14,7 @@ type Props = {
   workItemDetails: TIssue;
 };
 
-export const PowerKProjectStatesMenu: React.FC<Props> = observer((props) => {
+export const PowerKProjectStatesMenu = observer(function PowerKProjectStatesMenu(props: Props) {
   const { workItemDetails } = props;
   // router
   const { workspaceSlug } = useParams();
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 eebfe22c8a..72e905c052 100644
--- a/apps/web/core/components/power-k/ui/pages/default.tsx
+++ b/apps/web/core/components/power-k/ui/pages/default.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 // hooks
 import { usePowerK } from "@/hooks/store/use-power-k";
@@ -12,7 +10,7 @@ type Props = {
   onCommandSelect: (command: TPowerKCommandConfig) => void;
 };
 
-export const PowerKModalDefaultPage: React.FC<Props> = (props) => {
+export function PowerKModalDefaultPage(props: Props) {
   const { context, onCommandSelect } = props;
   // store hooks
   const { commandRegistry } = usePowerK();
@@ -20,4 +18,4 @@ export const PowerKModalDefaultPage: React.FC<Props> = (props) => {
   const commands = commandRegistry.getVisibleCommands(context);
 
   return <CommandRenderer context={context} commands={commands} onCommandSelect={onCommandSelect} />;
-};
+}
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 a8c17a176e..448aa8fbe7 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane types
 import type { ICycle } from "@plane/types";
@@ -15,7 +13,7 @@ type Props = {
   handleSelect: (cycle: ICycle) => void;
 };
 
-export const PowerKOpenProjectCyclesMenu: React.FC<Props> = observer((props) => {
+export const PowerKOpenProjectCyclesMenu = observer(function PowerKOpenProjectCyclesMenu(props: Props) {
   const { context, handleSelect } = props;
   // store hooks
   const { fetchedMap, getProjectCycleIds, getCycleById } = useCycle();
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 af3ce8020c..a175014605 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane types
 import type { IModule } from "@plane/types";
@@ -15,7 +13,7 @@ type Props = {
   handleSelect: (module: IModule) => void;
 };
 
-export const PowerKOpenProjectModulesMenu: React.FC<Props> = observer((props) => {
+export const PowerKOpenProjectModulesMenu = observer(function PowerKOpenProjectModulesMenu(props: Props) {
   const { context, handleSelect } = props;
   // store hooks
   const { fetchedMap, getProjectModuleIds, getModuleById } = useModule();
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 e7ce540351..109bb67ef8 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane types
 import { EUserPermissionsLevel } from "@plane/constants";
@@ -16,7 +14,7 @@ type Props = {
   handleSelect: (href: string) => void;
 };
 
-export const PowerKOpenProjectSettingsMenu: React.FC<Props> = observer((props) => {
+export const PowerKOpenProjectSettingsMenu = observer(function PowerKOpenProjectSettingsMenu(props: Props) {
   const { context, handleSelect } = props;
   // plane hooks
   const { t } = useTranslation();
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 a60fb316ed..6d59efa94a 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane types
 import type { IProjectView } from "@plane/types";
@@ -15,7 +13,7 @@ type Props = {
   handleSelect: (view: IProjectView) => void;
 };
 
-export const PowerKOpenProjectViewsMenu: React.FC<Props> = observer((props) => {
+export const PowerKOpenProjectViewsMenu = observer(function PowerKOpenProjectViewsMenu(props: Props) {
   const { context, handleSelect } = props;
   // store hooks
   const { fetchedMap, getProjectViews } = useProjectView();
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 e11aac6f1d..2c3913ffe6 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane types
 import type { IPartialProject } from "@plane/types";
@@ -13,7 +11,7 @@ type Props = {
   handleSelect: (project: IPartialProject) => void;
 };
 
-export const PowerKOpenProjectMenu: React.FC<Props> = observer((props) => {
+export const PowerKOpenProjectMenu = observer(function PowerKOpenProjectMenu(props: Props) {
   const { handleSelect } = props;
   // store hooks
   const { loader, joinedProjectIds, getPartialProjectById } = useProject();
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 a823d34ee7..23967d7c88 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
@@ -8,7 +8,7 @@ import type { TPowerKOpenEntityActionsProps } from "./shared";
 import { PowerKOpenWorkspaceSettingsMenu } from "./workspace-settings-menu";
 import { PowerKOpenWorkspaceMenu } from "./workspaces-menu";
 
-export const PowerKOpenEntityPages: React.FC<TPowerKOpenEntityActionsProps> = (props) => {
+export function PowerKOpenEntityPages(props: TPowerKOpenEntityActionsProps) {
   const { activePage, context, handleSelection } = props;
 
   return (
@@ -32,4 +32,4 @@ export const PowerKOpenEntityPages: React.FC<TPowerKOpenEntityActionsProps> = (p
       )}
     </>
   );
-};
+}
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 2a2cbdb0d3..8fd3a50389 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane types
 import { EUserPermissionsLevel, WORKSPACE_SETTINGS } from "@plane/constants";
@@ -17,7 +15,7 @@ type Props = {
   handleSelect: (href: string) => void;
 };
 
-export const PowerKOpenWorkspaceSettingsMenu: React.FC<Props> = observer((props) => {
+export const PowerKOpenWorkspaceSettingsMenu = observer(function PowerKOpenWorkspaceSettingsMenu(props: Props) {
   const { context, handleSelect } = props;
   // plane hooks
   const { t } = useTranslation();
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 a5b3152548..755a783765 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane types
 import type { IWorkspace } from "@plane/types";
@@ -13,7 +11,7 @@ type Props = {
   handleSelect: (workspace: IWorkspace) => void;
 };
 
-export const PowerKOpenWorkspaceMenu: React.FC<Props> = observer((props) => {
+export const PowerKOpenWorkspaceMenu = observer(function PowerKOpenWorkspaceMenu(props: Props) {
   const { handleSelect } = props;
   // store hooks
   const { loader, workspaces } = useWorkspace();
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 d5ca6556e4..63039ae899 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,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
@@ -12,7 +10,7 @@ type Props = {
   onSelect: (language: string) => void;
 };
 
-export const PowerKPreferencesLanguagesMenu: React.FC<Props> = observer((props) => {
+export const PowerKPreferencesLanguagesMenu = observer(function PowerKPreferencesLanguagesMenu(props: Props) {
   const { onSelect } = props;
 
   return (
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 e183b21095..a40ca22a5f 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,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 // components
@@ -15,7 +13,7 @@ type Props = {
   handleSelection: (data: unknown) => void;
 };
 
-export const PowerKAccountPreferencesPages: React.FC<Props> = observer((props) => {
+export const PowerKAccountPreferencesPages = observer(function PowerKAccountPreferencesPages(props: Props) {
   const { activePage, handleSelection } = props;
 
   return (
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 40b349458d..d16dcb75e6 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,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { Command } from "cmdk";
 // plane imports
@@ -12,7 +10,7 @@ type Props = {
   onSelect: (day: EStartOfTheWeek) => void;
 };
 
-export const PowerKPreferencesStartOfWeekMenu: React.FC<Props> = (props) => {
+export function PowerKPreferencesStartOfWeekMenu(props: Props) {
   const { onSelect } = props;
 
   return (
@@ -22,4 +20,4 @@ export const PowerKPreferencesStartOfWeekMenu: React.FC<Props> = (props) => {
       ))}
     </Command.Group>
   );
-};
+}
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 1519c337d4..ca64085b7a 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,5 +1,3 @@
-"use client";
-
 import React, { useEffect, useState } from "react";
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
@@ -13,7 +11,7 @@ type Props = {
   onSelect: (theme: string) => void;
 };
 
-export const PowerKPreferencesThemesMenu: React.FC<Props> = observer((props) => {
+export const PowerKPreferencesThemesMenu = observer(function PowerKPreferencesThemesMenu(props: Props) {
   const { onSelect } = props;
   // hooks
   const { t } = useTranslation();
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 53b068d511..088ca359aa 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,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { Command } from "cmdk";
 import { observer } from "mobx-react";
@@ -12,7 +10,7 @@ type Props = {
   onSelect: (timezone: string) => void;
 };
 
-export const PowerKPreferencesTimezonesMenu: React.FC<Props> = observer((props) => {
+export const PowerKPreferencesTimezonesMenu = observer(function PowerKPreferencesTimezonesMenu(props: Props) {
   const { onSelect } = props;
   // timezones
   const { timezones } = useTimezone();
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 66bb97bb0c..8286b32d2a 100644
--- a/apps/web/core/components/power-k/ui/pages/root.tsx
+++ b/apps/web/core/components/power-k/ui/pages/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 // local imports
@@ -15,7 +13,7 @@ type Props = {
   onPageDataSelect: (value: unknown) => void;
 };
 
-export const PowerKModalPagesList: React.FC<Props> = observer((props) => {
+export const PowerKModalPagesList = observer(function PowerKModalPagesList(props: Props) {
   const { activePage, context, onCommandSelect, onPageDataSelect } = props;
 
   // Main page content (no specific page)
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 6b3715e395..d27a6ccbac 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,5 +1,3 @@
-"use client";
-
 import React, { useState, useEffect } from "react";
 // plane imports
 // import { useTranslation } from "@plane/i18n";
@@ -29,7 +27,7 @@ type Props = {
   isWorkspaceLevel?: boolean;
 };
 
-export const WorkItemSelectionPage: React.FC<Props> = (props) => {
+export function WorkItemSelectionPage(props: Props) {
   const { workspaceSlug, projectId, debouncedSearchTerm, isWorkspaceLevel = false } = props;
   // router
   // const router = useAppRouter();
@@ -91,7 +89,7 @@ export const WorkItemSelectionPage: React.FC<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>
@@ -114,7 +112,7 @@ export const WorkItemSelectionPage: React.FC<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
@@ -129,7 +127,7 @@ export const WorkItemSelectionPage: React.FC<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>
@@ -160,4 +158,4 @@ export const WorkItemSelectionPage: React.FC<Props> = (props) => {
       )} */}
     </>
   );
-};
+}
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 af153fcd4e..4422a31617 100644
--- a/apps/web/core/components/power-k/ui/renderer/command.tsx
+++ b/apps/web/core/components/power-k/ui/renderer/command.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { Command } from "cmdk";
 // plane imports
@@ -16,7 +14,7 @@ type Props = {
   onCommandSelect: (command: TPowerKCommandConfig) => void;
 };
 
-export const CommandRenderer: React.FC<Props> = (props) => {
+export function CommandRenderer(props: Props) {
   const { commands, context, onCommandSelect } = props;
   // derived values
   const { activeContext } = context;
@@ -68,4 +66,4 @@ export const CommandRenderer: React.FC<Props> = (props) => {
       })}
     </>
   );
-};
+}
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 49caef90bf..07fda48edc 100644
--- a/apps/web/core/components/power-k/ui/renderer/shortcut.tsx
+++ b/apps/web/core/components/power-k/ui/renderer/shortcut.tsx
@@ -14,7 +14,7 @@ type Props = {
   commands: TPowerKCommandConfig[];
 };
 
-export const ShortcutRenderer: React.FC<Props> = (props) => {
+export function ShortcutRenderer(props: Props) {
   const { searchQuery, commands } = props;
   // translation
   const { t } = useTranslation();
@@ -76,12 +76,12 @@ export const ShortcutRenderer: React.FC<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="text-left text-13 font-medium pt-1 pb-2">{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-11 text-secondary text-left">{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 +95,7 @@ export const ShortcutRenderer: React.FC<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">
             {`"`}
@@ -106,4 +106,4 @@ export const ShortcutRenderer: React.FC<Props> = (props) => {
       )}
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/preferences/list.tsx b/apps/web/core/components/preferences/list.tsx
index beb08fd1aa..291eebf01e 100644
--- a/apps/web/core/components/preferences/list.tsx
+++ b/apps/web/core/components/preferences/list.tsx
@@ -1,11 +1,13 @@
 import { PREFERENCE_OPTIONS } from "@plane/constants";
 import { PREFERENCE_COMPONENTS } from "@/plane-web/components/preferences/config";
 
-export const PreferencesList = () => (
-  <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>
-);
+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
index 5ba35bb55b..f69c600bd2 100644
--- a/apps/web/core/components/preferences/section.tsx
+++ b/apps/web/core/components/preferences/section.tsx
@@ -4,12 +4,14 @@ interface SettingsSectionProps {
   control: React.ReactNode;
 }
 
-export const PreferencesSection = ({ title, description, control }: SettingsSectionProps) => (
-  <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>
+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-14 font-medium text-primary">{title}</h4>
+        <p className="text-13 text-secondary">{description}</p>
+      </div>
+      <div className="col-span-12 sm:col-span-6 my-auto">{control}</div>
     </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 a72eb308e7..e2a292640c 100644
--- a/apps/web/core/components/profile/activity/activity-list.tsx
+++ b/apps/web/core/components/profile/activity/activity-list.tsx
@@ -17,7 +17,7 @@ type Props = {
   activity: IUserActivityResponse | undefined;
 };
 
-export const ActivityList: React.FC<Props> = observer((props) => {
+export const ActivityList = observer(function ActivityList(props: Props) {
   const { activity } = props;
   // params
   const { workspaceSlug } = useParams();
@@ -39,33 +39,33 @@ export const ActivityList: React.FC<Props> = observer((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="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 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="grid h-7 w-7 place-items-center rounded-full border-2 border-white bg-gray-500 capitalize text-on-color">
                           {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="ring-6 flex h-6 w-6 items-center justify-center rounded-full bg-layer-1 text-secondary 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 +78,7 @@ export const ActivityList: React.FC<Props> = observer((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}
@@ -114,7 +114,7 @@ export const ActivityList: React.FC<Props> = observer((props) => {
                               <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 +128,7 @@ export const ActivityList: React.FC<Props> = observer((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="grid h-6 w-6 place-items-center rounded-full border-2 border-white bg-gray-700 text-11 capitalize text-on-color">
                                     {activityItem.actor_detail.display_name?.[0]}
                                   </div>
                                 )}
@@ -136,8 +136,8 @@ export const ActivityList: React.FC<Props> = observer((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="break-words text-13 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 40140a2a2c..9eb5ccd83e 100644
--- a/apps/web/core/components/profile/activity/download-button.tsx
+++ b/apps/web/core/components/profile/activity/download-button.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { useParams } from "next/navigation";
 // services
@@ -12,7 +10,7 @@ import { UserService } from "@/services/user.service";
 
 const userService = new UserService();
 
-export const DownloadActivityButton = () => {
+export function DownloadActivityButton() {
   // states
   const [isDownloading, setIsDownloading] = useState(false);
   // router
@@ -58,4 +56,4 @@ export const DownloadActivityButton = () => {
       {isDownloading ? t("profile.stats.recent_activity.button_loading") : t("profile.stats.recent_activity.button")}
     </Button>
   );
-};
+}
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 a8b151773e..872118d1cd 100644
--- a/apps/web/core/components/profile/activity/profile-activity-list.tsx
+++ b/apps/web/core/components/profile/activity/profile-activity-list.tsx
@@ -25,7 +25,7 @@ type Props = {
   updateEmptyState: (state: boolean) => void;
 };
 
-export const ProfileActivityListPage: React.FC<Props> = observer((props) => {
+export const ProfileActivityListPage = observer(function ProfileActivityListPage(props: Props) {
   const { cursor, perPage, updateResultsCount, updateTotalPages, updateEmptyState } = props;
   // store hooks
   const { data: currentUser } = useUser();
@@ -63,33 +63,33 @@ export const ProfileActivityListPage: React.FC<Props> = observer((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="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 p-2 items-center justify-center rounded-full bg-layer-3 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 +100,7 @@ export const ProfileActivityListPage: React.FC<Props> = observer((props) => {
                           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 ?? ""}
@@ -122,10 +122,10 @@ export const ProfileActivityListPage: React.FC<Props> = observer((props) => {
                         <div>
                           <div className="relative px-1.5 mt-4">
                             <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 border border-subtle rounded-lg 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 +139,7 @@ export const ProfileActivityListPage: React.FC<Props> = observer((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="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 +147,8 @@ export const ProfileActivityListPage: React.FC<Props> = observer((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="break-words text-caption-md-regular 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 2511700059..1f9e140d37 100644
--- a/apps/web/core/components/profile/activity/workspace-activity-list.tsx
+++ b/apps/web/core/components/profile/activity/workspace-activity-list.tsx
@@ -18,7 +18,7 @@ type Props = {
   updateTotalPages: (count: number) => void;
 };
 
-export const WorkspaceActivityListPage: React.FC<Props> = (props) => {
+export function WorkspaceActivityListPage(props: Props) {
   const { cursor, perPage, updateResultsCount, updateTotalPages } = props;
   // router
   const { workspaceSlug, userId } = useParams();
@@ -46,4 +46,4 @@ export const WorkspaceActivityListPage: React.FC<Props> = (props) => {
   }, [updateResultsCount, updateTotalPages, userProfileActivity]);
 
   return <ActivityList activity={userProfileActivity} />;
-};
+}
diff --git a/apps/web/core/components/profile/form.tsx b/apps/web/core/components/profile/form.tsx
index 7bd9e13387..f39cd7fcc7 100644
--- a/apps/web/core/components/profile/form.tsx
+++ b/apps/web/core/components/profile/form.tsx
@@ -11,16 +11,21 @@ import { useTranslation } from "@plane/i18n";
 import { Button, getButtonStyling } from "@plane/propel/button";
 import { ChevronDownIcon } from "@plane/propel/icons";
 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";
 // 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";
 // helpers
+import { handleCoverImageChange } from "@/helpers/cover-image.helper";
 import { captureSuccess, captureError } from "@/helpers/event-tracker.helper";
 // hooks
+import { useInstance } from "@/hooks/store/use-instance";
 import { useUser, useUserProfile } from "@/hooks/store/user";
 
 type TUserProfileForm = {
@@ -42,13 +47,14 @@ export type TProfileFormProps = {
   profile: TUserProfile;
 };
 
-export const ProfileForm = observer((props: TProfileFormProps) => {
+export const ProfileForm = observer(function ProfileForm(props: TProfileFormProps) {
   const { user, profile } = props;
   const { workspaceSlug } = useParams();
   // states
   const [isLoading, setIsLoading] = useState(false);
   const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
   const [deactivateAccountModal, setDeactivateAccountModal] = useState(false);
+  const [isChangeEmailModalOpen, setIsChangeEmailModalOpen] = useState(false);
   // language support
   const { t } = useTranslation();
   // form info
@@ -78,6 +84,9 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
   // store hooks
   const { data: currentUser, updateCurrentUser } = useUser();
   const { updateUserProfile } = useUserProfile();
+  const { config } = useInstance();
+
+  const isSMTPConfigured = config?.is_smtp_configured || false;
 
   const handleProfilePictureDelete = async (url: string | null | undefined) => {
     if (!url) return;
@@ -112,11 +121,26 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
       avatar_url: formData.avatar_url,
       display_name: formData?.display_name,
     };
-    // if unsplash or a pre-defined image is uploaded, delete the old uploaded asset
-    if (formData.cover_image_url?.startsWith("http")) {
-      userPayload.cover_image_url = formData.cover_image_url;
-      userPayload.cover_image = formData.cover_image_url;
-      userPayload.cover_image_asset = null;
+
+    try {
+      const coverImagePayload = await handleCoverImageChange(user.cover_image_url, formData.cover_image_url, {
+        entityIdentifier: "",
+        entityType: EFileAssetType.USER_COVER,
+        isUserAsset: true,
+      });
+
+      if (coverImagePayload) {
+        Object.assign(userPayload, coverImagePayload);
+      }
+    } catch (error) {
+      console.error("Error handling cover image:", error);
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("toast.error"),
+        message: error instanceof Error ? error.message : "Failed to process cover image",
+      });
+      setIsLoading(false);
+      return;
     }
 
     const profilePayload: Partial<TUserProfile> = {
@@ -156,6 +180,7 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
   return (
     <>
       <DeactivateAccountModal isOpen={deactivateAccountModal} onClose={() => setDeactivateAccountModal(false)} />
+      <ChangeEmailModal isOpen={isChangeEmailModalOpen} onClose={() => setIsChangeEmailModalOpen(false)} />
       <Controller
         control={control}
         name="avatar_url"
@@ -173,12 +198,12 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
           />
         )}
       />
-      <div className="w-full flex text-custom-primary-200 bg-custom-primary-100/10 rounded-md p-2 gap-2 items-center mb-4">
+      <div className="w-full flex text-accent-secondary bg-accent-primary/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>
+        <div className="text-13 font-medium flex-1">{t("settings_moved_to_preferences")}</div>
         <Link
           href={`/${workspaceSlug}/settings/account/preferences`}
-          className={cn(getButtonStyling("neutral-primary", "sm"))}
+          className={cn(getButtonStyling("secondary", "base"))}
         >
           {t("go_to_preferences")}
         </Link>
@@ -186,18 +211,18 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
       <form onSubmit={handleSubmit(onSubmit)} className="w-full">
         <div className="flex w-full flex-col gap-6">
           <div className="relative h-44 w-full">
-            <img
-              src={userCover ? getFileURL(userCover) : "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
-              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">
@@ -221,9 +246,9 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
                 render={({ field: { value, onChange } }) => (
                   <ImagePickerPopover
                     label={t("change_cover")}
-                    onChange={(imageUrl) => onChange(imageUrl)}
                     control={control}
-                    value={value ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
+                    onChange={(imageUrl) => onChange(imageUrl)}
+                    value={value}
                     isProfileCover
                   />
                 )}
@@ -232,16 +257,16 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
           </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 text-tertiary tracking-tight">{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="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>
                 </h4>
@@ -267,10 +292,10 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
                     />
                   )}
                 />
-                {errors.first_name && <span className="text-xs text-red-500">{errors.first_name.message}</span>}
+                {errors.first_name && <span className="text-11 text-red-500">{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"
@@ -292,7 +317,7 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
                 />
               </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>
                 </h4>
@@ -325,10 +350,10 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
                     />
                   )}
                 />
-                {errors?.display_name && <span className="text-xs text-red-500">{errors?.display_name?.message}</span>}
+                {errors?.display_name && <span className="text-11 text-red-500">{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>
                 </h4>
@@ -347,7 +372,7 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
                       ref={ref}
                       hasError={Boolean(errors.email)}
                       placeholder="Enter your email"
-                      className={`w-full cursor-not-allowed rounded-md !bg-custom-background-90 ${
+                      className={`w-full cursor-not-allowed rounded-md !bg-surface-2 ${
                         errors.email ? "border-red-500" : ""
                       }`}
                       autoComplete="on"
@@ -355,6 +380,15 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
                     />
                   )}
                 />
+                {isSMTPConfigured && (
+                  <button
+                    type="button"
+                    className="text-11 underline btn w-fit text-secondary"
+                    onClick={() => setIsChangeEmailModalOpen(true)}
+                  >
+                    {t("account_settings.profile.change_email_modal.title")}
+                  </button>
+                )}
               </div>
             </div>
           </div>
@@ -372,11 +406,11 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
           </div>
         </div>
       </form>
-      <Disclosure as="div" className="border-t border-custom-border-100 w-full">
+      <Disclosure as="div" className="border-t border-subtle 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>
+              <span className="text-16 font-medium tracking-tight">{t("deactivate_account")}</span>
               <ChevronDownIcon className={`h-5 w-5 transition-all ${open ? "rotate-180" : ""}`} />
             </Disclosure.Button>
             <Transition
@@ -390,10 +424,10 @@ export const ProfileForm = observer((props: TProfileFormProps) => {
             >
               <Disclosure.Panel>
                 <div className="flex flex-col gap-8">
-                  <span className="text-sm tracking-tight">{t("deactivate_account_description")}</span>
+                  <span className="text-13 tracking-tight">{t("deactivate_account_description")}</span>
                   <div>
                     <Button
-                      variant="danger"
+                      variant="error-fill"
                       onClick={() => setDeactivateAccountModal(true)}
                       data-ph-element={PROFILE_SETTINGS_TRACKER_ELEMENTS.DEACTIVATE_ACCOUNT_BUTTON}
                     >
diff --git a/apps/web/core/components/profile/notification/email-notification-form.tsx b/apps/web/core/components/profile/notification/email-notification-form.tsx
index f7e76f1b06..39e9d382cb 100644
--- a/apps/web/core/components/profile/notification/email-notification-form.tsx
+++ b/apps/web/core/components/profile/notification/email-notification-form.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import React, { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
@@ -20,7 +18,7 @@ interface IEmailNotificationFormProps {
 // services
 const userService = new UserService();
 
-export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) => {
+export function EmailNotificationForm(props: IEmailNotificationFormProps) {
   const { data } = props;
   const { t } = useTranslation();
   // form data
@@ -72,8 +70,8 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
       <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 className="pb-1 text-14 font-medium text-primary">{t("property_changes")}</div>
+            <div className="text-13 font-regular text-tertiary">{t("property_changes_description")}</div>
           </div>
           <div className="shrink-0">
             <Controller
@@ -97,8 +95,8 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
         </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 className="pb-1 text-14 font-medium text-primary">{t("state_change")}</div>
+            <div className="text-13 font-regular text-tertiary">{t("state_change_description")}</div>
           </div>
           <div className="shrink-0">
             <Controller
@@ -120,10 +118,10 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
             />
           </div>
         </div>
-        <div className="flex gap-2 items-center border-0 border-l-[3px] border-custom-border-300 pl-3">
+        <div className="flex gap-2 items-center border-0 border-l-[3px] border-strong 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 className="pb-1 text-14 font-medium text-primary">{t("issue_completed")}</div>
+            <div className="text-13 font-regular text-tertiary">{t("issue_completed_description")}</div>
           </div>
           <div className="shrink-0">
             <Controller
@@ -144,8 +142,8 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
         </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 className="pb-1 text-14 font-medium text-primary">{t("comments")}</div>
+            <div className="text-13 font-regular text-tertiary">{t("comments_description")}</div>
           </div>
           <div className="shrink-0">
             <Controller
@@ -169,8 +167,8 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
         </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 className="pb-1 text-14 font-medium text-primary">{t("mentions")}</div>
+            <div className="text-13 font-regular text-tertiary">{t("mentions_description")}</div>
           </div>
           <div className="shrink-0">
             <Controller
@@ -195,4 +193,4 @@ export const EmailNotificationForm: FC<IEmailNotificationFormProps> = (props) =>
       </div>
     </>
   );
-};
+}
diff --git a/apps/web/core/components/profile/overview/activity.tsx b/apps/web/core/components/profile/overview/activity.tsx
index daed93b91a..a532e3c50f 100644
--- a/apps/web/core/components/profile/overview/activity.tsx
+++ b/apps/web/core/components/profile/overview/activity.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
@@ -8,11 +6,8 @@ import { useTranslation } from "@plane/i18n";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 import { Loader, Card } from "@plane/ui";
 import { calculateTimeAgo, getFileURL } from "@plane/utils";
-// assets
-import recentActivityEmptyState from "@/app/assets/empty-state/recent_activity.svg?url";
 // components
 import { ActivityMessage, IssueLink } from "@/components/core/activity";
-import { ProfileEmptyState } from "@/components/ui/profile-empty-state";
 // constants
 import { USER_PROFILE_ACTIVITY } from "@/constants/fetch-keys";
 // helpers
@@ -23,7 +18,7 @@ import { UserService } from "@/services/user.service";
 
 const userService = new UserService();
 
-export const ProfileActivity = observer(() => {
+export const ProfileActivity = observer(function ProfileActivity() {
   const { workspaceSlug, userId } = useParams();
   // store hooks
   const { data: currentUser } = useUser();
@@ -41,29 +36,29 @@ export const ProfileActivity = observer(() => {
 
   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">
+                  <div className="flex-shrink-0 grid place-items-center overflow-hidden rounded-sm 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"
+                        className="rounded-sm"
                       />
                     ) : (
-                      <div className="grid h-6 w-6 place-items-center rounded border-2 bg-gray-700 text-xs text-white">
+                      <div className="grid h-6 w-6 place-items-center rounded-sm border-2 border-strong text-11 text-on-color">
                         {activity.actor_detail?.display_name?.charAt(0)}
                       </div>
                     )}
                   </div>
                   <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}{" "}
@@ -76,9 +71,7 @@ export const ProfileActivity = observer(() => {
                         </span>
                       )}
                     </p>
-                    <p className="text-xs text-custom-text-200 whitespace-nowrap ">
-                      {calculateTimeAgo(activity.created_at)}
-                    </p>
+                    <p className="text-11 text-secondary whitespace-nowrap ">{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 0dc98b4ba8..cefcfed9df 100644
--- a/apps/web/core/components/profile/overview/priority-distribution.tsx
+++ b/apps/web/core/components/profile/overview/priority-distribution.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { BarChart } from "@plane/propel/charts/bar-chart";
@@ -20,11 +18,11 @@ const priorityColors = {
   none: "#e5e5e5",
 };
 
-export const ProfilePriorityDistribution: React.FC<Props> = ({ userProfile }) => {
+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 ? (
@@ -79,4 +77,4 @@ export const ProfilePriorityDistribution: React.FC<Props> = ({ userProfile }) =>
       )}
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/profile/overview/state-distribution.tsx b/apps/web/core/components/profile/overview/state-distribution.tsx
index 0ef6a7b5f5..e7403142a2 100644
--- a/apps/web/core/components/profile/overview/state-distribution.tsx
+++ b/apps/web/core/components/profile/overview/state-distribution.tsx
@@ -12,13 +12,13 @@ type Props = {
   userProfile: IUserProfileData | undefined;
 };
 
-export const ProfileStateDistribution: React.FC<Props> = ({ stateDistribution, userProfile }) => {
+export function ProfileStateDistribution({ stateDistribution, userProfile }: Props) {
   const { t } = useTranslation();
   if (!userProfile) return null;
 
   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]">
@@ -54,12 +54,13 @@ export const ProfileStateDistribution: React.FC<Props> = ({ stateDistribution, u
             <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>
@@ -80,4 +81,4 @@ export const ProfileStateDistribution: React.FC<Props> = ({ stateDistribution, u
       </Card>
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/profile/overview/stats.tsx b/apps/web/core/components/profile/overview/stats.tsx
index 13bb3c8d85..f4950b8eea 100644
--- a/apps/web/core/components/profile/overview/stats.tsx
+++ b/apps/web/core/components/profile/overview/stats.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import Link from "next/link";
 import { useParams } from "next/navigation";
 
@@ -14,7 +12,7 @@ type Props = {
   userProfile: IUserProfileData | undefined;
 };
 
-export const ProfileStats: React.FC<Props> = ({ userProfile }) => {
+export function ProfileStats({ userProfile }: Props) {
   const { workspaceSlug, userId } = useParams();
 
   const { t } = useTranslation();
@@ -42,18 +40,18 @@ export const ProfileStats: React.FC<Props> = ({ userProfile }) => {
 
   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>
@@ -68,4 +66,4 @@ export const ProfileStats: React.FC<Props> = ({ userProfile }) => {
       )}
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/profile/overview/workload.tsx b/apps/web/core/components/profile/overview/workload.tsx
index d4b6a5d9e7..9a40cbefaa 100644
--- a/apps/web/core/components/profile/overview/workload.tsx
+++ b/apps/web/core/components/profile/overview/workload.tsx
@@ -10,32 +10,32 @@ type Props = {
   stateDistribution: IUserStateDistribution[];
 };
 
-export const ProfileWorkload: React.FC<Props> = ({ stateDistribution }) => {
+export function ProfileWorkload({ stateDistribution }: Props) {
   const { t } = useTranslation();
 
   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="h-3 w-3 rounded-xs my-2"
                   style={{
                     backgroundColor: STATE_GROUPS[group.state_group].color,
                   }}
                 />
                 <div className="space-y-1 flex-col">
-                  <span className="text-sm text-custom-text-400">
+                  <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>
@@ -44,4 +44,4 @@ export const ProfileWorkload: React.FC<Props> = ({ stateDistribution }) => {
       </div>
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/profile/preferences/language-timezone.tsx b/apps/web/core/components/profile/preferences/language-timezone.tsx
index 438f446ca4..677ae2bcbd 100644
--- a/apps/web/core/components/profile/preferences/language-timezone.tsx
+++ b/apps/web/core/components/profile/preferences/language-timezone.tsx
@@ -7,7 +7,7 @@ import { TimezoneSelect } from "@/components/global";
 import { captureElementAndEvent } from "@/helpers/event-tracker.helper";
 import { useUser, useUserProfile } from "@/hooks/store/user";
 
-export const LanguageTimezone = observer(() => {
+export const LanguageTimezone = observer(function LanguageTimezone() {
   // store hooks
   const {
     data: user,
@@ -106,8 +106,8 @@ export const LanguageTimezone = observer(() => {
         <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>
+              <h4 className="text-14 font-medium text-primary"> {t("timezone")}&nbsp;</h4>
+              <p className="text-13 text-secondary">{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} />
@@ -117,8 +117,8 @@ export const LanguageTimezone = observer(() => {
         <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>
+              <h4 className="text-14 font-medium text-primary"> {t("language")}&nbsp;</h4>
+              <p className="text-13 text-secondary">{t("language_setting")}</p>
             </div>
             <div className="col-span-12 sm:col-span-6 my-auto">
               <CustomSelect
@@ -126,7 +126,7 @@ export const LanguageTimezone = observer(() => {
                 label={profile?.language ? getLanguageLabel(profile?.language) : "Select a language"}
                 onChange={handleLanguageChange}
                 buttonClassName={"border-none"}
-                className="rounded-md border !border-custom-border-200"
+                className="rounded-md border !border-subtle"
                 input
               >
                 {SUPPORTED_LANGUAGES.map((item) => (
diff --git a/apps/web/core/components/profile/profile-issues-filter.tsx b/apps/web/core/components/profile/profile-issues-filter.tsx
index 43f08a82b4..865bc63465 100644
--- a/apps/web/core/components/profile/profile-issues-filter.tsx
+++ b/apps/web/core/components/profile/profile-issues-filter.tsx
@@ -14,7 +14,7 @@ import { WorkItemFiltersToggle } from "@/components/work-item-filters/filters-to
 // hooks
 import { useIssues } from "@/hooks/store/use-issues";
 
-export const ProfileIssuesFilter = observer(() => {
+export const ProfileIssuesFilter = observer(function ProfileIssuesFilter() {
   // i18n
   const { t } = useTranslation();
   // router
diff --git a/apps/web/core/components/profile/profile-issues.tsx b/apps/web/core/components/profile/profile-issues.tsx
index 5dd9c4d288..6022418674 100644
--- a/apps/web/core/components/profile/profile-issues.tsx
+++ b/apps/web/core/components/profile/profile-issues.tsx
@@ -19,12 +19,9 @@ type Props = {
   type: "assigned" | "subscribed" | "created";
 };
 
-export const ProfileIssuesPage = observer((props: Props) => {
+export const ProfileIssuesPage = observer(function ProfileIssuesPage(props: Props) {
   const { type } = props;
-  const { workspaceSlug, userId } = useParams() as {
-    workspaceSlug: string;
-    userId: string;
-  };
+  const { workspaceSlug, userId } = useParams();
   // store hooks
   const {
     issues: { setViewId },
@@ -61,7 +58,7 @@ export const ProfileIssuesPage = observer((props: Props) => {
           <>
             <div className="flex flex-col h-full w-full">
               {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
index 4fded0defa..16e233a66f 100644
--- a/apps/web/core/components/profile/profile-setting-content-header.tsx
+++ b/apps/web/core/components/profile/profile-setting-content-header.tsx
@@ -1,18 +1,14 @@
-"use client";
-import type { FC } from "react";
-import React from "react";
-
 type Props = {
   title: string;
   description?: string;
 };
 
-export const ProfileSettingContentHeader: FC<Props> = (props) => {
+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 className="flex flex-col gap-1 pb-4 border-b border-subtle w-full">
+      <div className="text-18 font-medium text-primary">{title}</div>
+      {description && <div className="text-13 font-regular text-tertiary">{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 1a77e19d6c..6672dd574d 100644
--- a/apps/web/core/components/profile/profile-setting-content-wrapper.tsx
+++ b/apps/web/core/components/profile/profile-setting-content-wrapper.tsx
@@ -1,7 +1,3 @@
-"use client";
-import type { FC } from "react";
-import React from "react";
-// helpers
 import { cn } from "@plane/utils";
 import { SidebarHamburgerToggle } from "@/components/core/sidebar/sidebar-menu-hamburger-toggle";
 
@@ -10,11 +6,11 @@ type Props = {
   className?: string;
 };
 
-export const ProfileSettingContentWrapper: FC<Props> = (props) => {
+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>
 
@@ -28,4 +24,4 @@ export const ProfileSettingContentWrapper: FC<Props> = (props) => {
       </div>
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/profile/sidebar.tsx b/apps/web/core/components/profile/sidebar.tsx
index f616220fc0..aa332b6313 100644
--- a/apps/web/core/components/profile/sidebar.tsx
+++ b/apps/web/core/components/profile/sidebar.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -20,6 +17,8 @@ import type { IUserProfileProjectSegregation } from "@plane/types";
 // plane ui
 import { Loader } from "@plane/ui";
 import { cn, renderFormattedDate, getFileURL } from "@plane/utils";
+// components
+import { CoverImage } from "@/components/common/cover-image";
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
 import { useProject } from "@/hooks/store/use-project";
@@ -33,7 +32,7 @@ type TProfileSidebar = {
   className?: string;
 };
 
-export const ProfileSidebar: FC<TProfileSidebar> = observer((props) => {
+export const ProfileSidebar = observer(function ProfileSidebar(props: TProfileSidebar) {
   const { userProjectsData, className = "" } = props;
   // refs
   const ref = useRef<HTMLDivElement>(null);
@@ -85,7 +84,7 @@ export const ProfileSidebar: FC<TProfileSidebar> = observer((props) => {
   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 scrollbar-md fixed z-5 h-full w-full flex-shrink-0 overflow-hidden overflow-y-auto border-l border-subtle bg-surface-1 transition-all md:relative md:w-[300px] shadow-raised-200`,
         className
       )}
       style={profileSidebarCollapsed ? { marginLeft: `${window?.innerWidth || 0}px` } : {}}
@@ -94,7 +93,7 @@ export const ProfileSidebar: FC<TProfileSidebar> = observer((props) => {
         <>
           <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">
+              <div className="absolute right-3.5 top-3.5 grid h-5 w-5 place-items-center rounded-sm bg-white">
                 <Link href={`/${workspaceSlug}/settings/account`}>
                   <span className="grid place-items-center text-black">
                     <Pencil className="h-3 w-3" />
@@ -102,24 +101,21 @@ export const ProfileSidebar: FC<TProfileSidebar> = observer((props) => {
                 </Link>
               </div>
             )}
-            <img
-              src={
-                userData?.cover_image_url
-                  ? getFileURL(userData?.cover_image_url)
-                  : "/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 capitalize text-on-color">
                   {userData?.first_name?.[0]}
                 </div>
               )}
@@ -127,20 +123,20 @@ export const ProfileSidebar: FC<TProfileSidebar> = observer((props) => {
           </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 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 break-words font-medium">{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);
 
@@ -163,13 +159,13 @@ export const ProfileSidebar: FC<TProfileSidebar> = observer((props) => {
                             <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 break-words text-13 font-medium">{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"
                                       : completedIssuePercentage <= 70
@@ -197,28 +193,28 @@ export const ProfileSidebar: FC<TProfileSidebar> = observer((props) => {
                             {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}%`,
@@ -226,10 +222,10 @@ export const ProfileSidebar: FC<TProfileSidebar> = observer((props) => {
                                 />
                               </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">
@@ -238,7 +234,7 @@ export const ProfileSidebar: FC<TProfileSidebar> = observer((props) => {
                               </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">
@@ -247,7 +243,7 @@ export const ProfileSidebar: FC<TProfileSidebar> = observer((props) => {
                               </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">
@@ -256,7 +252,7 @@ export const ProfileSidebar: FC<TProfileSidebar> = observer((props) => {
                               </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 3574da9b36..259e570a7f 100644
--- a/apps/web/core/components/profile/start-of-week-preference.tsx
+++ b/apps/web/core/components/profile/start-of-week-preference.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -19,7 +17,9 @@ import { PreferencesSection } from "../preferences/section";
 const getStartOfWeekLabel = (startOfWeek: EStartOfTheWeek) =>
   START_OF_THE_WEEK_OPTIONS.find((option) => option.value === startOfWeek)?.label;
 
-export const StartOfWeekPreference = observer((props: { option: { title: string; description: string } }) => {
+export const StartOfWeekPreference = observer(function StartOfWeekPreference(props: {
+  option: { title: string; description: string };
+}) {
   // hooks
   const { data: userProfile, updateUserProfile } = useUserProfile();
 
diff --git a/apps/web/core/components/profile/time.tsx b/apps/web/core/components/profile/time.tsx
index cf2fe78455..1fc47cc62f 100644
--- a/apps/web/core/components/profile/time.tsx
+++ b/apps/web/core/components/profile/time.tsx
@@ -5,7 +5,7 @@ type Props = {
   timeZone: string | undefined;
 };
 
-export const ProfileSidebarTime: React.FC<Props> = (props) => {
+export function ProfileSidebarTime(props: Props) {
   const { timeZone } = props;
   // current time hook
   const { currentTime } = useCurrentTime();
@@ -21,7 +21,7 @@ export const ProfileSidebarTime: React.FC<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 ff516c64fd..7cded141b5 100644
--- a/apps/web/core/components/project-states/create-update/create.tsx
+++ b/apps/web/core/components/project-states/create-update/create.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { STATE_TRACKER_EVENTS, STATE_GROUPS } from "@plane/constants";
@@ -18,7 +15,7 @@ type TStateCreate = {
   handleClose: () => void;
 };
 
-export const StateCreate: FC<TStateCreate> = observer((props) => {
+export const StateCreate = observer(function StateCreate(props: TStateCreate) {
   const { groupKey, shouldTrackEvents, createStateCallback, handleClose } = props;
 
   // states
@@ -50,7 +47,7 @@ export const StateCreate: FC<TStateCreate> = observer((props) => {
       handleClose();
       return { status: "success" };
     } catch (error) {
-      const errorStatus = error as unknown as { status: number; data: { error: string } };
+      const errorStatus = error as { status: number; data: { error: string } };
       if (shouldTrackEvents)
         captureError({
           eventName: STATE_TRACKER_EVENTS.create,
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 7ae08cfa1d..0b41377dc3 100644
--- a/apps/web/core/components/project-states/create-update/form.tsx
+++ b/apps/web/core/components/project-states/create-update/form.tsx
@@ -1,7 +1,4 @@
-"use client";
-
-import type { FC } from "react";
-import { useEffect, useState, useMemo } from "react";
+import { useEffect, useState } from "react";
 import { TwitterPicker } from "react-color";
 import { Button } from "@plane/propel/button";
 import type { IState } from "@plane/types";
@@ -15,7 +12,18 @@ type TStateForm = {
   buttonTitle: string;
 };
 
-export const StateForm: FC<TStateForm> = (props) => {
+function PopoverButton({ color }: { color?: string }) {
+  return (
+    <div
+      className="group inline-flex items-center text-14 font-medium focus:outline-none h-5 w-5 rounded-sm transition-all"
+      style={{
+        backgroundColor: color ?? "black",
+      }}
+    />
+  );
+}
+
+export function StateForm(props: TStateForm) {
   const { data, onSubmit, onCancel, buttonDisabled, buttonTitle } = props;
   // states
   const [formData, setFromData] = useState<Partial<IState> | undefined>(undefined);
@@ -48,23 +56,11 @@ export const StateForm: FC<TStateForm> = (props) => {
     }
   };
 
-  const PopoverButton = useMemo(
-    () => (
-      <div
-        className="group inline-flex items-center text-base font-medium focus:outline-none h-5 w-5 rounded transition-all"
-        style={{
-          backgroundColor: formData?.color ?? "black",
-        }}
-      />
-    ),
-    [formData?.color]
-  );
-
   return (
-    <div className="relative flex space-x-2 bg-custom-background-100 p-3 rounded">
+    <div className="relative flex space-x-2 bg-surface-1 p-3 rounded-sm">
       {/* color */}
       <div className="flex-shrink-0 h-full mt-2">
-        <Popover button={PopoverButton} panelClassName="mt-4 -ml-3">
+        <Popover button={<PopoverButton color={formData?.color} />} panelClassName="mt-4 -ml-3">
           <TwitterPicker color={formData?.color} onChange={(value) => handleFormData("color", value.hex)} />
         </Popover>
       </div>
@@ -92,18 +88,18 @@ export const StateForm: FC<TStateForm> = (props) => {
           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="w-full text-13 min-h-14 resize-none"
         />
 
         <div className="flex space-x-2 items-center">
-          <Button onClick={formSubmit} variant="primary" size="sm" disabled={buttonDisabled}>
+          <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>
       </div>
     </div>
   );
-};
+}
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 29b82ea55b..a71e913e9e 100644
--- a/apps/web/core/components/project-states/create-update/update.tsx
+++ b/apps/web/core/components/project-states/create-update/update.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { STATE_TRACKER_EVENTS } from "@plane/constants";
@@ -18,7 +15,7 @@ type TStateUpdate = {
   handleClose: () => void;
 };
 
-export const StateUpdate: FC<TStateUpdate> = observer((props) => {
+export const StateUpdate = observer(function StateUpdate(props: TStateUpdate) {
   const { state, updateStateCallback, shouldTrackEvents, handleClose } = props;
   // states
   const [loader, setLoader] = useState(false);
@@ -50,7 +47,7 @@ export const StateUpdate: FC<TStateUpdate> = observer((props) => {
       handleClose();
       return { status: "success" };
     } catch (error) {
-      const errorStatus = error as unknown as { status: number };
+      const errorStatus = error as { status: number };
       if (errorStatus?.status === 400) {
         setToast({
           type: TOAST_TYPE.ERROR,
diff --git a/apps/web/core/components/project-states/group-item.tsx b/apps/web/core/components/project-states/group-item.tsx
index 3ab1340d04..a2c1a2df74 100644
--- a/apps/web/core/components/project-states/group-item.tsx
+++ b/apps/web/core/components/project-states/group-item.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useState, useRef } from "react";
 import { observer } from "mobx-react";
 import { Plus } from "lucide-react";
@@ -27,7 +24,7 @@ type TGroupItem = {
   handleExpand: (groupKey: TStateGroups) => void;
 };
 
-export const GroupItem: FC<TGroupItem> = observer((props) => {
+export const GroupItem = observer(function GroupItem(props: TGroupItem) {
   const {
     groupKey,
     groupedStates,
@@ -53,10 +50,7 @@ export const GroupItem: FC<TGroupItem> = observer((props) => {
 
   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 border border-subtle rounded-sm bg-surface-2 transition-all p-2", groupItemClassName)}
       ref={dropElementRef}
     >
       <div className="flex justify-between items-center gap-2">
@@ -66,7 +60,7 @@ export const GroupItem: FC<TGroupItem> = observer((props) => {
         >
           <div
             className={cn(
-              "flex-shrink-0 w-5 h-5 rounded flex justify-center items-center overflow-hidden transition-all",
+              "flex-shrink-0 w-5 h-5 rounded-sm flex justify-center items-center overflow-hidden transition-all",
               {
                 "rotate-0": currentStateExpanded,
                 "-rotate-90": !currentStateExpanded,
@@ -75,17 +69,17 @@ export const GroupItem: FC<TGroupItem> = observer((props) => {
           >
             <ChevronDownIcon className="w-4 h-4" />
           </div>
-          <div className="flex-shrink-0 w-6 h-6 rounded flex justify-center items-center overflow-hidden">
+          <div className="flex-shrink-0 w-6 h-6 rounded-sm flex justify-center items-center overflow-hidden">
             <StateGroupIcon stateGroup={groupKey} size={EIconSize.XL} />
           </div>
-          <div className="text-base font-medium text-custom-text-200 capitalize px-1">{groupKey}</div>
+          <div className="text-14 font-medium text-secondary capitalize px-1">{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-shrink-0 w-6 h-6 rounded-sm flex justify-center items-center overflow-hidden transition-colors hover:bg-layer-1 cursor-pointer text-accent-primary/80 hover:text-accent-primary",
+            (!isEditable || createState) && "cursor-not-allowed text-placeholder hover:text-placeholder"
           )}
           onClick={() => {
             if (!createState) {
@@ -100,7 +94,7 @@ export const GroupItem: FC<TGroupItem> = observer((props) => {
       </div>
 
       {shouldShowEmptyState && (
-        <div className="flex flex-col justify-center items-center h-full py-4 text-sm text-custom-text-300">
+        <div className="flex flex-col justify-center items-center h-full 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 b458970343..6490340ab0 100644
--- a/apps/web/core/components/project-states/group-list.tsx
+++ b/apps/web/core/components/project-states/group-list.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -19,7 +16,7 @@ type TGroupList = {
   stateItemClassName?: string;
 };
 
-export const GroupList: FC<TGroupList> = observer((props) => {
+export const GroupList = observer(function GroupList(props: TGroupList) {
   const {
     groupedStates,
     stateOperationsCallbacks,
diff --git a/apps/web/core/components/project-states/loader.tsx b/apps/web/core/components/project-states/loader.tsx
index 958d0ea9eb..2cb7b3f82f 100644
--- a/apps/web/core/components/project-states/loader.tsx
+++ b/apps/web/core/components/project-states/loader.tsx
@@ -1,12 +1,12 @@
-"use client";
-
 import { Loader } from "@plane/ui";
 
-export const ProjectStateLoader = () => (
-  <Loader className="space-y-5 md:w-2/3">
-    <Loader.Item height="40px" />
-    <Loader.Item height="40px" />
-    <Loader.Item height="40px" />
-    <Loader.Item height="40px" />
-  </Loader>
-);
+export function ProjectStateLoader() {
+  return (
+    <Loader className="space-y-5 md:w-2/3">
+      <Loader.Item height="40px" />
+      <Loader.Item height="40px" />
+      <Loader.Item height="40px" />
+      <Loader.Item height="40px" />
+    </Loader>
+  );
+}
diff --git a/apps/web/core/components/project-states/options/delete.tsx b/apps/web/core/components/project-states/options/delete.tsx
index 0028010b15..27fab3f3f9 100644
--- a/apps/web/core/components/project-states/options/delete.tsx
+++ b/apps/web/core/components/project-states/options/delete.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { Loader } from "lucide-react";
@@ -23,7 +20,7 @@ type TStateDelete = {
   shouldTrackEvents: boolean;
 };
 
-export const StateDelete: FC<TStateDelete> = observer((props) => {
+export const StateDelete = observer(function StateDelete(props: TStateDelete) {
   const { totalStates, state, deleteStateCallback, shouldTrackEvents } = props;
   // hooks
   const { isMobile } = usePlatformOS();
@@ -51,7 +48,7 @@ export const StateDelete: FC<TStateDelete> = observer((props) => {
 
       setIsDelete(false);
     } catch (error) {
-      const errorStatus = error as unknown as { status: number; data: { error: string } };
+      const errorStatus = error as { status: number; data: { error: string } };
       if (shouldTrackEvents) {
         captureError({
           eventName: STATE_TRACKER_EVENTS.delete,
@@ -88,9 +85,8 @@ export const StateDelete: FC<TStateDelete> = observer((props) => {
         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.
           </>
         }
       />
@@ -98,10 +94,8 @@ export const StateDelete: FC<TStateDelete> = observer((props) => {
       <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-shrink-0 w-5 h-5 rounded-sm flex justify-center items-center overflow-hidden transition-colors cursor-pointer focus:outline-none",
+          isDeleteDisabled ? "bg-surface-2 text-secondary" : "text-red-500 hover:bg-layer-1"
         )}
         disabled={isDeleteDisabled}
         onClick={() => setIsDeleteModal(true)}
@@ -115,7 +109,7 @@ export const StateDelete: FC<TStateDelete> = observer((props) => {
           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="w-3.5 h-3.5 text-secondary" /> : <CloseIcon className="w-3.5 h-3.5" />}
         </Tooltip>
       </button>
     </>
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 5ac4cf95f2..38e857a82c 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,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -13,7 +10,7 @@ type TStateMarksAsDefault = {
   markStateAsDefaultCallback: TStateOperationsCallbacks["markStateAsDefault"];
 };
 
-export const StateMarksAsDefault: FC<TStateMarksAsDefault> = observer((props) => {
+export const StateMarksAsDefault = observer(function StateMarksAsDefault(props: TStateMarksAsDefault) {
   const { stateId, isDefault, markStateAsDefaultCallback } = props;
   // states
   const [isLoading, setIsLoading] = useState(false);
@@ -34,8 +31,8 @@ export const StateMarksAsDefault: FC<TStateMarksAsDefault> = observer((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 55b5bc4cea..d9dbfc9761 100644
--- a/apps/web/core/components/project-states/root.tsx
+++ b/apps/web/core/components/project-states/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useMemo } from "react";
 import { observer } from "mobx-react";
@@ -18,7 +16,7 @@ type TProjectState = {
   projectId: string;
 };
 
-export const ProjectStateRoot: FC<TProjectState> = observer((props) => {
+export const ProjectStateRoot = observer(function ProjectStateRoot(props: TProjectState) {
   const { workspaceSlug, projectId } = props;
   // hooks
   const {
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 bcb0ec5f53..dcd0be0712 100644
--- a/apps/web/core/components/project-states/state-delete-modal.tsx
+++ b/apps/web/core/components/project-states/state-delete-modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -20,7 +18,7 @@ type TStateDeleteModal = {
   data: IState | null;
 };
 
-export const StateDeleteModal: React.FC<TStateDeleteModal> = observer((props) => {
+export const StateDeleteModal = observer(function StateDeleteModal(props: TStateDeleteModal) {
   const { isOpen, onClose, data } = props;
   // states
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
@@ -83,8 +81,8 @@ export const StateDeleteModal: React.FC<TStateDeleteModal> = observer((props) =>
       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 714d34ff78..e0db342adb 100644
--- a/apps/web/core/components/project-states/state-item-title.tsx
+++ b/apps/web/core/components/project-states/state-item-title.tsx
@@ -28,7 +28,7 @@ type TDisabledStateItemTitleProps = TBaseStateItemTitleProps & {
 
 export type TStateItemTitleProps = TEnabledStateItemTitleProps | TDisabledStateItemTitleProps;
 
-export const StateItemTitle = observer((props: TStateItemTitleProps) => {
+export const StateItemTitle = observer(function StateItemTitle(props: TStateItemTitleProps) {
   const { stateCount, setUpdateStateModal, disabled, state, shouldShowDescription = true } = props;
   // store hooks
   const { getStatePercentageInGroup } = useProjectState();
@@ -41,7 +41,7 @@ export const StateItemTitle = observer((props: TStateItemTitleProps) => {
       <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">
+          <div className="flex-shrink-0 w-3 h-3 rounded-xs absolute -left-1.5 hidden group-hover:flex justify-center items-center transition-colors bg-surface-2 cursor-pointer text-secondary hover:text-primary">
             <GripVertical className="w-3 h-3" />
           </div>
         )}
@@ -50,15 +50,15 @@ export const StateItemTitle = observer((props: TStateItemTitleProps) => {
           <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="text-13 px-2 min-h-5">
+          <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">
           {/* 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,7 +68,7 @@ export const StateItemTitle = observer((props: TStateItemTitleProps) => {
           {/* 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-shrink-0 w-5 h-5 rounded-sm flex justify-center items-center overflow-hidden transition-colors hover:bg-layer-1 cursor-pointer text-secondary hover:text-primary"
               onClick={() => setUpdateStateModal(true)}
               data-ph-element={STATE_TRACKER_ELEMENTS.STATE_LIST_EDIT_BUTTON}
             >
diff --git a/apps/web/core/components/project-states/state-item.tsx b/apps/web/core/components/project-states/state-item.tsx
index c8a1cfca28..84407cbb90 100644
--- a/apps/web/core/components/project-states/state-item.tsx
+++ b/apps/web/core/components/project-states/state-item.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 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";
@@ -25,7 +22,7 @@ type TStateItem = {
   stateItemClassName?: string;
 };
 
-export const StateItem: FC<TStateItem> = observer((props) => {
+export const StateItem = observer(function StateItem(props: TStateItem) {
   const {
     groupKey,
     groupedStates,
@@ -99,10 +96,10 @@ export const StateItem: FC<TStateItem> = observer((props) => {
             const destinationData = self.data as TDraggableData;
 
             if (sourceData && destinationData && sourceData.id) {
-              const destinationGroupKey = destinationData.groupKey as TStateGroups;
+              const destinationGroupKey = destinationData.groupKey;
               const edge = extractClosestEdge(destinationData) || undefined;
               const payload: Partial<IState> = {
-                id: sourceData.id as string,
+                id: sourceData.id,
                 group: destinationGroupKey,
                 sequence: getCurrentStateSequence(groupedStates[destinationGroupKey], destinationData, edge),
               };
@@ -132,7 +129,7 @@ export const StateItem: FC<TStateItem> = observer((props) => {
       <div
         ref={draggableElementRef}
         className={cn(
-          "relative border border-custom-border-100 bg-custom-background-100 py-3 px-3.5 rounded group",
+          "relative border border-subtle bg-surface-1 py-3 px-3.5 rounded-sm group",
           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 03ffd7b8d9..e379eaf646 100644
--- a/apps/web/core/components/project-states/state-list.tsx
+++ b/apps/web/core/components/project-states/state-list.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import type { IState, TStateGroups, TStateOperationsCallbacks } from "@plane/types";
 // components
@@ -16,7 +13,7 @@ type TStateList = {
   stateItemClassName?: string;
 };
 
-export const StateList: FC<TStateList> = observer((props) => {
+export const StateList = observer(function StateList(props: TStateList) {
   const {
     groupKey,
     groupedStates,
diff --git a/apps/web/core/components/project/applied-filters/access.tsx b/apps/web/core/components/project/applied-filters/access.tsx
index 15d8bb14e8..1c7e1b4a1b 100644
--- a/apps/web/core/components/project/applied-filters/access.tsx
+++ b/apps/web/core/components/project/applied-filters/access.tsx
@@ -10,7 +10,7 @@ type Props = {
   editable: boolean | undefined;
 };
 
-export const AppliedAccessFilters: React.FC<Props> = observer((props) => {
+export const AppliedAccessFilters = observer(function AppliedAccessFilters(props: Props) {
   const { handleRemove, values, editable } = props;
   const { t } = useTranslation();
 
@@ -19,12 +19,12 @@ export const AppliedAccessFilters: React.FC<Props> = observer((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 px-1.5 py-1 text-11 bg-layer-1">
             {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 e22bfe6456..443201acac 100644
--- a/apps/web/core/components/project/applied-filters/date.tsx
+++ b/apps/web/core/components/project/applied-filters/date.tsx
@@ -11,7 +11,7 @@ type Props = {
   values: string[];
 };
 
-export const AppliedDateFilters: React.FC<Props> = observer((props) => {
+export const AppliedDateFilters = observer(function AppliedDateFilters(props: Props) {
   const { editable, handleRemove, values } = props;
 
   const getDateLabel = (value: string): string => {
@@ -36,12 +36,12 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
   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/members.tsx b/apps/web/core/components/project/applied-filters/members.tsx
index 72ea1eef70..fc6242bc24 100644
--- a/apps/web/core/components/project/applied-filters/members.tsx
+++ b/apps/web/core/components/project/applied-filters/members.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { CloseIcon } from "@plane/propel/icons";
 // ui
@@ -15,7 +13,7 @@ type Props = {
   editable: boolean | undefined;
 };
 
-export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
+export const AppliedMembersFilters = observer(function AppliedMembersFilters(props: Props) {
   const { handleRemove, values, editable } = props;
   // store hooks
   const {
@@ -30,7 +28,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
         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)}
@@ -41,7 +39,7 @@ export const AppliedMembersFilters: React.FC<Props> = observer((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(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 c19d88ab8a..93106a9156 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
@@ -13,7 +13,7 @@ type Props = {
   editable: boolean | undefined;
 };
 
-export const AppliedProjectDisplayFilters: React.FC<Props> = observer((props) => {
+export const AppliedProjectDisplayFilters = observer(function AppliedProjectDisplayFilters(props: Props) {
   const { handleRemove, values, editable } = props;
   const { t } = useTranslation();
 
@@ -22,12 +22,12 @@ export const AppliedProjectDisplayFilters: React.FC<Props> = observer((props) =>
       {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 px-1.5 py-1 text-11 bg-layer-1">
             {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 e8ad5535d0..70f5a94c26 100644
--- a/apps/web/core/components/project/applied-filters/root.tsx
+++ b/apps/web/core/components/project/applied-filters/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useTranslation } from "@plane/i18n";
 import { CloseIcon } from "@plane/propel/icons";
 // plane imports
@@ -27,7 +25,7 @@ type Props = {
 const MEMBERS_FILTERS = ["lead", "members"];
 const DATE_FILTERS = ["created_at"];
 
-export const ProjectAppliedFiltersList: React.FC<Props> = (props) => {
+export function ProjectAppliedFiltersList(props: Props) {
   const { t } = useTranslation();
   const {
     appliedFilters,
@@ -57,7 +55,7 @@ export const ProjectAppliedFiltersList: React.FC<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}
@@ -82,7 +80,7 @@ export const ProjectAppliedFiltersList: React.FC<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} />
@@ -94,7 +92,7 @@ export const ProjectAppliedFiltersList: React.FC<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}
@@ -120,11 +118,11 @@ export const ProjectAppliedFiltersList: React.FC<Props> = (props) => {
             </p>
           }
         >
-          <span className="bg-custom-background-80 rounded-full text-sm font-medium py-1 px-2.5">
+          <span className="bg-layer-1 rounded-full text-13 font-medium py-1 px-2.5">
             {filteredProjects}/{totalProjects}
           </span>
         </Tooltip>
       </Header.RightItem>
     </Header>
   );
-};
+}
diff --git a/apps/web/core/components/project/card-list.tsx b/apps/web/core/components/project/card-list.tsx
index d4e0ef8799..24efb4802e 100644
--- a/apps/web/core/components/project/card-list.tsx
+++ b/apps/web/core/components/project/card-list.tsx
@@ -21,7 +21,7 @@ type TProjectCardListProps = {
   filteredProjectIds?: string[];
 };
 
-export const ProjectCardList = observer((props: TProjectCardListProps) => {
+export const ProjectCardList = observer(function ProjectCardList(props: TProjectCardListProps) {
   const { totalProjectIds: totalProjectIdsProps, filteredProjectIds: filteredProjectIdsProps } = props;
   // plane hooks
   const { t } = useTranslation();
diff --git a/apps/web/core/components/project/card.tsx b/apps/web/core/components/project/card.tsx
index e01fc65937..379bb66268 100644
--- a/apps/web/core/components/project/card.tsx
+++ b/apps/web/core/components/project/card.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -24,6 +22,7 @@ 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";
@@ -32,7 +31,7 @@ type Props = {
   project: IProject;
 };
 
-export const ProjectCard: React.FC<Props> = observer((props) => {
+export const ProjectCard = observer(function ProjectCard(props: Props) {
   const { project } = props;
   // states
   const [deleteProjectModalOpen, setDeleteProjectModal] = useState(false);
@@ -199,32 +198,31 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
           }
         }}
         data-prevent-progress={!isMemberOfProject || isArchived}
-        className="flex flex-col rounded border border-custom-border-200 bg-custom-background-100"
+        className={cn(
+          "flex flex-col justify-between group/project-card border border-subtle bg-layer-2 hover:shadow-raised-200 hover:border-strong w-full rounded-lg overflow-hidden duration-300 transition-all"
+        )}
       >
         <ContextMenu parentRef={projectCardRef} items={MENU_ITEMS} />
         <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={getFileURL(
-              project.cover_image_url ??
-                "https://images.unsplash.com/photo-1672243775941-10d763d9adef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
-            )}
+          <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 left-0 top-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="h-9 w-9 flex-shrink-0 grid 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 && <Lock className="h-2.5 w-2.5 text-on-color " />}
                 </span>
               </div>
             </div>
@@ -232,20 +230,20 @@ export const ProjectCard: React.FC<Props> = observer((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();
@@ -262,11 +260,11 @@ export const ProjectCard: React.FC<Props> = observer((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 break-words text-13 text-tertiary">
             {project.description && project.description.trim() !== ""
               ? project.description
               : `Created on ${renderFormattedDate(project.created_at)}`}
@@ -282,7 +280,7 @@ export const ProjectCard: React.FC<Props> = observer((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);
@@ -294,16 +292,16 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
                     </AvatarGroup>
                   </div>
                 ) : (
-                  <span className="text-sm italic text-custom-text-400">No Member Yet</span>
+                  <span className="text-13 italic text-placeholder">No Member Yet</span>
                 )}
               </Tooltip>
-              {isArchived && <div className="text-xs text-custom-text-400 font-medium">Archived</div>}
+              {isArchived && <div className="text-11 text-placeholder font-medium">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 text-placeholder font-medium hover:text-secondary"
                     onClick={(e) => {
                       e.preventDefault();
                       e.stopPropagation();
@@ -316,7 +314,7 @@ export const ProjectCard: React.FC<Props> = observer((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 text-placeholder font-medium hover:text-secondary"
                     onClick={(e) => {
                       e.preventDefault();
                       e.stopPropagation();
@@ -332,7 +330,7 @@ export const ProjectCard: React.FC<Props> = observer((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();
                       }}
@@ -341,7 +339,7 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
                       <Settings className="h-3.5 w-3.5" />
                     </Link>
                   ) : (
-                    <span className="flex items-center gap-1 text-custom-text-400 text-sm">
+                    <span className="flex items-center gap-1 text-placeholder text-13">
                       <Check className="h-3.5 w-3.5" />
                       Joined
                     </span>
@@ -349,7 +347,7 @@ export const ProjectCard: React.FC<Props> = observer((props) => {
                 {!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 34443c28d4..e38787d2d1 100644
--- a/apps/web/core/components/project/confirm-project-member-remove.tsx
+++ b/apps/web/core/components/project/confirm-project-member-remove.tsx
@@ -1,15 +1,12 @@
-"use client";
-
-import React, { useState } from "react";
+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";
@@ -21,7 +18,7 @@ type Props = {
   onClose: () => void;
 };
 
-export const ConfirmProjectMemberRemove: React.FC<Props> = observer((props) => {
+export const ConfirmProjectMemberRemove = observer(function ConfirmProjectMemberRemove(props: Props) {
   const { data, onSubmit, isOpen, onClose } = props;
   // router
   const { projectId } = useParams();
@@ -50,80 +47,42 @@ export const ConfirmProjectMemberRemove: React.FC<Props> = observer((props) => {
   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 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">
+            <h3 className="text-16 font-medium leading-6 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 bd5938c192..46e102703c 100644
--- a/apps/web/core/components/project/create-project-modal.tsx
+++ b/apps/web/core/components/project/create-project-modal.tsx
@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { useEffect, useState } from "react";
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 import { getAssetIdFromUrl, checkURLValidity } from "@plane/utils";
@@ -29,7 +28,7 @@ enum EProjectCreationSteps {
   FEATURE_SELECTION = "FEATURE_SELECTION",
 }
 
-export const CreateProjectModal: FC<Props> = (props) => {
+export function CreateProjectModal(props: Props) {
   const { isOpen, onClose, setToFavorite = false, workspaceSlug, data, templateId } = props;
   // states
   const [currentStep, setCurrentStep] = useState<EProjectCreationSteps>(EProjectCreationSteps.CREATE_PROJECT);
@@ -78,4 +77,4 @@ export const CreateProjectModal: FC<Props> = (props) => {
       )}
     </ModalCore>
   );
-};
+}
diff --git a/apps/web/core/components/project/create/common-attributes.tsx b/apps/web/core/components/project/create/common-attributes.tsx
index aebe7033b4..a666d314b4 100644
--- a/apps/web/core/components/project/create/common-attributes.tsx
+++ b/apps/web/core/components/project/create/common-attributes.tsx
@@ -21,7 +21,8 @@ type Props = {
   setIsChangeInIdentifierRequired: (value: boolean) => void;
   handleFormOnChange?: () => void;
 };
-const ProjectCommonAttributes: React.FC<Props> = (props) => {
+
+function ProjectCommonAttributes(props: Props) {
   const { setValue, isMobile, isChangeInIdentifierRequired, setIsChangeInIdentifierRequired, handleFormOnChange } =
     props;
   const {
@@ -38,7 +39,7 @@ const ProjectCommonAttributes: React.FC<Props> = (props) => {
       return;
     }
     if (e.target.value === "") setValue("identifier", "");
-    else setValue("identifier", projectIdentifierSanitizer(e.target.value).substring(0, 5));
+    else setValue("identifier", projectIdentifierSanitizer(e.target.value).substring(0, 10));
     onChange(e);
     handleFormOnChange?.();
   };
@@ -77,7 +78,7 @@ const ProjectCommonAttributes: React.FC<Props> = (props) => {
             />
           )}
         />
-        <span className="text-xs text-red-500">{errors?.name?.message}</span>
+        <span className="text-11 text-red-500">{errors?.name?.message}</span>
       </div>
       <div className="relative">
         <Controller
@@ -90,11 +91,11 @@ const ProjectCommonAttributes: React.FC<Props> = (props) => {
               /^[ÇŞĞIİÖÜA-Z0-9]+$/.test(value.toUpperCase()) || t("only_alphanumeric_non_latin_characters_allowed"),
             minLength: {
               value: 1,
-              message: t("project_id_must_be_at_least_1_character"),
+              message: t("project_id_min_char"),
             },
             maxLength: {
-              value: 5,
-              message: t("project_id_must_be_at_most_5_characters"),
+              value: 10,
+              message: t("project_id_max_char"),
             },
           }}
           render={({ field: { value, onChange } }) => (
@@ -106,7 +107,7 @@ const ProjectCommonAttributes: React.FC<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("w-full text-11 focus:border-blue-400 pr-7", {
                 uppercase: value,
               })}
               tabIndex={getIndex("identifier")}
@@ -116,12 +117,12 @@ const ProjectCommonAttributes: React.FC<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" />
+          <Info className="absolute right-2 top-2.5 h-3 w-3 text-placeholder" />
         </Tooltip>
-        <span className="text-xs text-red-500">{errors?.identifier?.message}</span>
+        <span className="text-11 text-red-500">{errors?.identifier?.message}</span>
       </div>
       <div className="md:col-span-4">
         <Controller
@@ -137,7 +138,7 @@ const ProjectCommonAttributes: React.FC<Props> = (props) => {
                 onChange(e);
                 handleFormOnChange?.();
               }}
-              className="!h-24 text-sm focus:border-blue-400"
+              className="!h-24 text-13 focus:border-blue-400"
               hasError={Boolean(errors?.description)}
               tabIndex={getIndex("description")}
             />
@@ -146,6 +147,6 @@ const ProjectCommonAttributes: React.FC<Props> = (props) => {
       </div>
     </div>
   );
-};
+}
 
 export default ProjectCommonAttributes;
diff --git a/apps/web/core/components/project/create/header.tsx b/apps/web/core/components/project/create/header.tsx
index 78570e7543..b201be4fd0 100644
--- a/apps/web/core/components/project/create/header.tsx
+++ b/apps/web/core/components/project/create/header.tsx
@@ -8,8 +8,9 @@ import { CloseIcon } from "@plane/propel/icons";
 // plane types
 import type { IProject } from "@plane/types";
 // plane ui
-import { getFileURL, getTabIndex } from "@plane/utils";
+import { getTabIndex } from "@plane/utils";
 // components
+import { CoverImage } from "@/components/common/cover-image";
 import { ImagePickerPopover } from "@/components/core/image-picker-popover";
 // plane web imports
 import { ProjectTemplateSelect } from "@/plane-web/components/projects/create/template-select";
@@ -18,7 +19,8 @@ type Props = {
   handleClose: () => void;
   isMobile?: boolean;
 };
-const ProjectCreateHeader: React.FC<Props> = (props) => {
+
+function ProjectCreateHeader(props: Props) {
   const { handleClose, isMobile = false } = props;
   const { watch, control } = useFormContext<IProject>();
   const { t } = useTranslation();
@@ -29,20 +31,18 @@ const ProjectCreateHeader: React.FC<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={getFileURL(coverImage)}
-          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 left-0 top-0 h-full w-full rounded-lg"
+      />
       <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" />
+          <CloseIcon className="h-5 w-5 text-on-color" />
         </button>
       </div>
       <div className="absolute bottom-2 right-2">
@@ -52,8 +52,8 @@ const ProjectCreateHeader: React.FC<Props> = (props) => {
           render={({ field: { value, onChange } }) => (
             <ImagePickerPopover
               label={t("change_cover")}
-              onChange={onChange}
               control={control}
+              onChange={onChange}
               value={value ?? null}
               tabIndex={getIndex("cover_image")}
             />
@@ -72,7 +72,7 @@ const ProjectCreateHeader: React.FC<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 bg-layer-1">
                   <Logo logo={value} size={20} />
                 </span>
               }
@@ -101,6 +101,6 @@ const ProjectCreateHeader: React.FC<Props> = (props) => {
       </div>
     </div>
   );
-};
+}
 
 export default ProjectCreateHeader;
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 fb85c65dae..db77a8fadf 100644
--- a/apps/web/core/components/project/create/project-create-buttons.tsx
+++ b/apps/web/core/components/project/create/project-create-buttons.tsx
@@ -13,7 +13,7 @@ type Props = {
   isMobile?: boolean;
 };
 
-const ProjectCreateButtons: React.FC<Props> = (props) => {
+function ProjectCreateButtons(props: Props) {
   const { t } = useTranslation();
   const { handleClose, isMobile = false } = props;
   const {
@@ -23,15 +23,15 @@ const ProjectCreateButtons: React.FC<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 py-4 border-t border-subtle">
+      <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>
   );
-};
+}
 
 export default ProjectCreateButtons;
diff --git a/apps/web/core/components/project/delete-project-modal.tsx b/apps/web/core/components/project/delete-project-modal.tsx
index 15b02a2b2c..23dce2bee9 100644
--- a/apps/web/core/components/project/delete-project-modal.tsx
+++ b/apps/web/core/components/project/delete-project-modal.tsx
@@ -1,17 +1,13 @@
-"use client";
-
-import React from "react";
 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";
 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";
+import { Input, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // constants
 // hooks
 import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
@@ -29,7 +25,7 @@ const defaultValues = {
   confirmDelete: "",
 };
 
-export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
+export function DeleteProjectModal(props: DeleteProjectModal) {
   const { isOpen, project, onClose } = props;
   // store hooks
   const { deleteProject } = useProject();
@@ -92,110 +88,77 @@ export const DeleteProjectModal: React.FC<DeleteProjectModal> = (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-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-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-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="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-secondary">
+          <p className="break-words text-13 ">
+            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 7d4043945f..6b3d0032e8 100644
--- a/apps/web/core/components/project/dropdowns/filters/access.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/access.tsx
@@ -14,7 +14,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterAccess: React.FC<Props> = observer((props) => {
+export const FilterAccess = observer(function FilterAccess(props: Props) {
   const { appliedFilters, handleUpdate, searchQuery } = props;
   // states
   const [previewEnabled, setPreviewEnabled] = useState(true);
@@ -43,7 +43,7 @@ export const FilterAccess: React.FC<Props> = observer((props) => {
               />
             ))
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-11 italic text-placeholder">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 f0aad24700..0c1034a3ce 100644
--- a/apps/web/core/components/project/dropdowns/filters/created-at.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/created-at.tsx
@@ -15,7 +15,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterCreatedDate: React.FC<Props> = observer((props) => {
+export const FilterCreatedDate = observer(function FilterCreatedDate(props: Props) {
   const { appliedFilters, handleUpdate, searchQuery } = props;
   // state
   const [previewEnabled, setPreviewEnabled] = useState(true);
@@ -73,7 +73,7 @@ export const FilterCreatedDate: React.FC<Props> = observer((props) => {
               />
             </>
           ) : (
-            <p className="text-xs italic text-custom-text-400">No matches found</p>
+            <p className="text-11 italic text-placeholder">No matches found</p>
           )}
         </div>
       )}
diff --git a/apps/web/core/components/project/dropdowns/filters/lead.tsx b/apps/web/core/components/project/dropdowns/filters/lead.tsx
index c067e17572..5a1fef606e 100644
--- a/apps/web/core/components/project/dropdowns/filters/lead.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/lead.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -20,7 +18,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterLead: React.FC<Props> = observer((props: Props) => {
+export const FilterLead = observer(function FilterLead(props: Props) {
   const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
   // states
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -87,7 +85,7 @@ export const FilterLead: React.FC<Props> = observer((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"}
@@ -95,7 +93,7 @@ export const FilterLead: React.FC<Props> = observer((props: Props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 italic text-placeholder">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 eb0e6f22e9..35c2bac2ca 100644
--- a/apps/web/core/components/project/dropdowns/filters/member-list.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/member-list.tsx
@@ -34,11 +34,15 @@ const WORKSPACE_ROLE_OPTIONS: IRoleOption[] = [
 ];
 
 // Role filter group component
-const RoleFilterGroup: React.FC<{
+const RoleFilterGroup = observer(function RoleFilterGroup({
+  appliedFilters,
+  handleUpdate,
+  memberType,
+}: {
   appliedFilters: string[] | null;
   handleUpdate: (role: string) => void;
   memberType: "project" | "workspace";
-}> = observer(({ appliedFilters, handleUpdate, memberType }) => {
+}) {
   const [isExpanded, setIsExpanded] = useState(true);
   const appliedFiltersCount = appliedFilters?.length ?? 0;
   const roleOptions = memberType === "project" ? PROJECT_ROLE_OPTIONS : WORKSPACE_ROLE_OPTIONS;
@@ -70,7 +74,7 @@ const RoleFilterGroup: React.FC<{
   );
 });
 
-export const MemberListFilters: React.FC<Props> = observer((props) => {
+export const MemberListFilters = observer(function MemberListFilters(props: Props) {
   const { appliedFilters, handleUpdate, memberType } = props;
 
   return (
@@ -82,7 +86,7 @@ export const MemberListFilters: React.FC<Props> = observer((props) => {
 });
 
 // Dropdown component for member list filters
-export const MemberListFiltersDropdown: React.FC<Props> = observer((props) => {
+export const MemberListFiltersDropdown = observer(function MemberListFiltersDropdown(props: Props) {
   const { appliedFilters, handleUpdate, memberType } = props;
 
   const appliedFiltersCount = appliedFilters?.length ?? 0;
@@ -91,12 +95,12 @@ export const MemberListFiltersDropdown: React.FC<Props> = observer((props) => {
     <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 7f92ef45a3..72f0d9bff4 100644
--- a/apps/web/core/components/project/dropdowns/filters/members.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/members.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useMemo, useState } from "react";
 import { sortBy } from "lodash-es";
 import { observer } from "mobx-react";
@@ -20,7 +18,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const FilterMembers: React.FC<Props> = observer((props: Props) => {
+export const FilterMembers = observer(function FilterMembers(props: Props) {
   const { appliedFilters, handleUpdate, memberIds, searchQuery } = props;
   // states
   const [itemsToRender, setItemsToRender] = useState(5);
@@ -87,7 +85,7 @@ export const FilterMembers: React.FC<Props> = observer((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"}
@@ -95,7 +93,7 @@ export const FilterMembers: React.FC<Props> = observer((props: Props) => {
                 )}
               </>
             ) : (
-              <p className="text-xs italic text-custom-text-400">No matches found</p>
+              <p className="text-11 italic text-placeholder">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 16784f9fd6..1be557ea95 100644
--- a/apps/web/core/components/project/dropdowns/filters/root.tsx
+++ b/apps/web/core/components/project/dropdowns/filters/root.tsx
@@ -22,7 +22,7 @@ type Props = {
   memberIds?: string[] | undefined;
 };
 
-export const ProjectFiltersSelection: React.FC<Props> = observer((props) => {
+export const ProjectFiltersSelection = observer(function ProjectFiltersSelection(props: Props) {
   const { displayFilters, filters, handleFiltersUpdate, handleDisplayFiltersUpdate, memberIds } = props;
   // states
   const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
@@ -31,12 +31,12 @@ export const ProjectFiltersSelection: React.FC<Props> = observer((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">
+          <Search className="text-placeholder" size={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 +44,12 @@ export const ProjectFiltersSelection: React.FC<Props> = observer((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="h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
         <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 c474acf5ec..c68cbac0b4 100644
--- a/apps/web/core/components/project/dropdowns/order-by.tsx
+++ b/apps/web/core/components/project/dropdowns/order-by.tsx
@@ -1,17 +1,10 @@
-"use client";
-
 import { ArrowDownWideNarrow, Check } 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 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;
@@ -21,7 +14,7 @@ type Props = {
 
 const DISABLED_ORDERING_OPTIONS = ["sort_order"];
 
-export const ProjectOrderByDropdown: React.FC<Props> = (props) => {
+export function ProjectOrderByDropdown(props: Props) {
   const { onChange, value, isMobile = false } = props;
   const { t } = useTranslation();
 
@@ -36,16 +29,14 @@ export const ProjectOrderByDropdown: React.FC<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="shrink-0 size-3.5" 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="shrink-0 size-3.5" strokeWidth={2} />
               {orderByDetails && t(orderByDetails?.i18n_label)}
-              <ChevronDownIcon className="h-3 w-3" strokeWidth={2} />
             </div>
           )}
         </>
@@ -67,7 +58,7 @@ export const ProjectOrderByDropdown: React.FC<Props> = (props) => {
           {value?.includes(option.key) && <Check 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={() => {
@@ -90,4 +81,4 @@ export const ProjectOrderByDropdown: React.FC<Props> = (props) => {
       </CustomMenu.MenuItem>
     </CustomMenu>
   );
-};
+}
diff --git a/apps/web/core/components/project/empty-state.tsx b/apps/web/core/components/project/empty-state.tsx
index 28576ed8eb..942fba8151 100644
--- a/apps/web/core/components/project/empty-state.tsx
+++ b/apps/web/core/components/project/empty-state.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 // ui
 import { Button } from "@plane/propel/button";
@@ -17,35 +15,30 @@ type Props = {
   disabled?: boolean;
 };
 
-export const EmptyState: React.FC<Props> = ({
-  title,
-  description,
-  image,
-  primaryButton,
-  secondaryButton,
-  disabled = false,
-}) => (
-  <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 ?? ""} />
-    </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>}
-      <div className="flex items-center gap-4">
-        {primaryButton && (
-          <Button
-            size="lg"
-            variant="primary"
-            prependIcon={primaryButton.icon}
-            onClick={primaryButton.onClick}
-            disabled={disabled}
-          >
-            {primaryButton.text}
-          </Button>
-        )}
-        {secondaryButton}
+export function EmptyState({ title, description, image, primaryButton, secondaryButton, disabled = false }: Props) {
+  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 ?? ""} />
+      </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-18 font-semibold">{title}</h6>
+        {description && <p className="mb-7 text-tertiary">{description}</p>}
+        <div className="flex items-center gap-4">
+          {primaryButton && (
+            <Button
+              size="xl"
+              variant="primary"
+              prependIcon={primaryButton.icon}
+              onClick={primaryButton.onClick}
+              disabled={disabled}
+            >
+              {primaryButton.text}
+            </Button>
+          )}
+          {secondaryButton}
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+}
diff --git a/apps/web/core/components/project/filters.tsx b/apps/web/core/components/project/filters.tsx
index da2e7db290..09620729ee 100644
--- a/apps/web/core/components/project/filters.tsx
+++ b/apps/web/core/components/project/filters.tsx
@@ -22,7 +22,12 @@ type Props = {
   isMobile?: boolean;
 };
 
-const HeaderFilters = observer(({ filterMenuButton, isMobile, classname = "", filterClassname = "" }: Props) => {
+const HeaderFilters = observer(function HeaderFilters({
+  filterMenuButton,
+  isMobile,
+  classname = "",
+  filterClassname = "",
+}: Props) {
   // i18n
   const { t } = useTranslation();
   // router
diff --git a/apps/web/core/components/project/form-loader.tsx b/apps/web/core/components/project/form-loader.tsx
index 433a5beef0..ef2c913fca 100644
--- a/apps/web/core/components/project/form-loader.tsx
+++ b/apps/web/core/components/project/form-loader.tsx
@@ -1,62 +1,61 @@
-"use client";
-
-import type { FC } from "react";
 // components
 import { Loader } from "@plane/ui";
 
-export const ProjectDetailsFormLoader: FC = () => (
-  <>
-    <div className="relative mt-6 h-44 w-full">
-      <Loader>
-        <Loader.Item height="auto" width="46px" />
-      </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">
+export function ProjectDetailsFormLoader() {
+  return (
+    <>
+      <div className="relative mt-6 h-44 w-full">
+        <Loader>
+          <Loader.Item height="auto" width="46px" />
+        </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-surface-2">
+              <Loader>
+                <Loader.Item height="46px" width="46px" />
+              </Loader>
+            </div>
+          </div>
+          <div className="flex flex-shrink-0 justify-center">
             <Loader>
-              <Loader.Item height="46px" width="46px" />
+              <Loader.Item height="32px" width="108px" />
             </Loader>
           </div>
         </div>
-        <div className="flex flex-shrink-0 justify-center">
+      </div>
+      <div className="my-8 flex flex-col gap-8">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-13">Project name</h4>
           <Loader>
-            <Loader.Item height="32px" width="108px" />
-          </Loader>
-        </div>
-      </div>
-    </div>
-    <div className="my-8 flex flex-col gap-8">
-      <div className="flex flex-col gap-1">
-        <h4 className="text-sm">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>
-        <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>
-          <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>
-          <Loader className="w-full">
             <Loader.Item height="46px" width="100%" />
           </Loader>
         </div>
+        <div className="flex flex-col gap-1">
+          <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-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-13">Network</h4>
+            <Loader className="w-full">
+              <Loader.Item height="46px" width="100%" />
+            </Loader>
+          </div>
+        </div>
+        <div className="flex items-center justify-between py-2">
+          <Loader className="mt-2 w-full">
+            <Loader.Item height="34px" width="100px" />
+          </Loader>
+        </div>
       </div>
-      <div className="flex items-center justify-between py-2">
-        <Loader className="mt-2 w-full">
-          <Loader.Item height="34px" width="100px" />
-        </Loader>
-      </div>
-    </div>
-  </>
-);
+    </>
+  );
+}
diff --git a/apps/web/core/components/project/form.tsx b/apps/web/core/components/project/form.tsx
index b534a93d8b..0fd4ad6b51 100644
--- a/apps/web/core/components/project/form.tsx
+++ b/apps/web/core/components/project/form.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { Info, Lock } from "lucide-react";
@@ -11,12 +8,15 @@ import { Button } from "@plane/propel/button";
 import { EmojiPicker, EmojiIconPickerTypes, Logo } from "@plane/propel/emoji-icon-picker";
 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, getFileURL } from "@plane/utils";
+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 { handleCoverImageChange } from "@/helpers/cover-image.helper";
 import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
 import { useProject } from "@/hooks/store/use-project";
@@ -33,7 +33,8 @@ export interface IProjectDetailsForm {
   isAdmin: boolean;
 }
 const projectService = new ProjectService();
-export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
+
+export function ProjectDetailsForm(props: IProjectDetailsForm) {
   const { project, workspaceSlug, projectId, isAdmin } = props;
   const { t } = useTranslation();
   // states
@@ -159,15 +160,33 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
       logo_props: formData.logo_props,
       timezone: formData.timezone,
     };
-    // if unsplash or a pre-defined image is uploaded, delete the old uploaded asset
-    if (formData.cover_image_url?.startsWith("http")) {
-      payload.cover_image = formData.cover_image_url;
-      payload.cover_image_asset = null;
+
+    // Handle cover image changes
+    try {
+      const coverImagePayload = await handleCoverImageChange(project.cover_image_url, formData.cover_image_url, {
+        workspaceSlug: workspaceSlug.toString(),
+        entityIdentifier: project.id,
+        entityType: EFileAssetType.PROJECT_COVER,
+        isUserAsset: false,
+      });
+
+      if (coverImagePayload) {
+        Object.assign(payload, coverImagePayload);
+      }
+    } catch (error) {
+      console.error("Error handling cover image:", error);
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: t("toast.error"),
+        message: error instanceof Error ? error.message : "Failed to process cover image",
+      });
+      setIsLoading(false);
+      return;
     }
 
     if (project.identifier !== formData.identifier)
       await projectService
-        .checkProjectIdentifierAvailability(workspaceSlug as string, payload.identifier ?? "")
+        .checkProjectIdentifierAvailability(workspaceSlug, payload.identifier ?? "")
         .then(async (res) => {
           if (res.exists) setError("identifier", { message: t("common.identifier_already_exists") });
           else await handleUpdateChange(payload);
@@ -182,14 +201,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
     <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={getFileURL(
-            coverImage ??
-              "https://images.unsplash.com/photo-1672243775941-10d763d9adef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
-          )}
-          alt="Project cover image"
-          className="h-44 w-full rounded-md object-cover"
-        />
+        <CoverImage src={coverImage} alt="Project cover image" className="h-44 w-full rounded-md" />
         <div className="z-5 absolute bottom-4 flex w-full items-end justify-between gap-3 px-4">
           <div className="flex flex-grow gap-3 truncate">
             <Controller
@@ -228,12 +240,12 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                 />
               )}
             />
-            <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 && <Lock className="h-2.5 w-2.5 text-on-color " />}
                   {currentNetwork && t(currentNetwork?.i18n_label)}
                 </span>
               </span>
@@ -261,7 +273,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
       </div>
       <div className="my-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"
@@ -287,10 +299,10 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
               />
             )}
           />
-          <span className="text-xs text-red-500">{errors?.name?.message}</span>
+          <span className="text-11 text-red-500">{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}
@@ -301,7 +313,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                 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}
               />
@@ -310,7 +322,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
         </div>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
           <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}
@@ -323,7 +335,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                     message: t("project_id_min_char"),
                   },
                   maxLength: {
-                    value: 5,
+                    value: 10,
                     message: t("project_id_max_char"),
                   },
                 }}
@@ -344,19 +356,19 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
               />
               <Tooltip
                 isMobile={isMobile}
-                tooltipContent="Helps you identify work items in the project uniquely. Max 5 characters."
-                className="text-sm"
+                tooltipContent={t("project_id_tooltip_content")}
+                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 right-2 top-2.5 h-4 w-4 text-placeholder" />
               </Tooltip>
             </div>
-            <span className="text-xs text-red-500">
+            <span className="text-11 text-red-500">
               <>{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}
@@ -374,11 +386,11 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                             {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"
@@ -389,7 +401,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (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>
@@ -400,7 +412,7 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
             />
           </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>
+            <h4 className="text-13">{t("common.project_timezone")}</h4>
             <Controller
               name="timezone"
               control={control}
@@ -414,11 +426,12 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
                     }}
                     error={Boolean(errors.timezone)}
                     buttonClassName="border-none"
+                    disabled={!isAdmin}
                   />
                 </>
               )}
             />
-            {errors.timezone && <span className="text-xs text-red-500">{errors.timezone.message}</span>}
+            {errors.timezone && <span className="text-11 text-red-500">{errors.timezone.message}</span>}
           </div>
         </div>
         <div className="flex items-center justify-between py-2">
@@ -426,13 +439,14 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
             <Button
               data-ph-element={PROJECT_TRACKER_ELEMENTS.UPDATE_PROJECT_BUTTON}
               variant="primary"
+              size="lg"
               type="submit"
               loading={isLoading}
               disabled={!isAdmin}
             >
-              {isLoading ? `${t("updating")}...` : t("common.update_project")}
+              {isLoading ? t("updating") : t("common.update_project")}
             </Button>
-            <span className="text-sm italic text-custom-sidebar-text-400">
+            <span className="text-13 italic text-placeholder">
               {t("common.created_on")} {renderFormattedDate(project?.created_at)}
             </span>
           </>
@@ -440,4 +454,4 @@ export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
       </div>
     </form>
   );
-};
+}
diff --git a/apps/web/core/components/project/header.tsx b/apps/web/core/components/project/header.tsx
index 3d48e4e5df..2e53bf9661 100644
--- a/apps/web/core/components/project/header.tsx
+++ b/apps/web/core/components/project/header.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 // i18n
@@ -19,7 +17,7 @@ import { useUserPermissions } from "@/hooks/store/user";
 import HeaderFilters from "./filters";
 import { ProjectSearch } from "./search-projects";
 
-export const ProjectsBaseHeader = observer(() => {
+export const ProjectsBaseHeader = observer(function ProjectsBaseHeader() {
   // i18n
   const { t } = useTranslation();
   // store hooks
@@ -42,7 +40,7 @@ export const ProjectsBaseHeader = observer(() => {
             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" />}
               />
             }
           />
@@ -56,7 +54,8 @@ export const ProjectsBaseHeader = observer(() => {
         </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 28d491b965..3102b15288 100644
--- a/apps/web/core/components/project/integration-card.tsx
+++ b/apps/web/core/components/project/integration-card.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { useParams } from "next/navigation";
 import useSWR, { mutate } from "swr";
@@ -33,15 +31,13 @@ const integrationDetails: { [key: string]: any } = {
 // services
 const projectService = new ProjectService();
 
-export const IntegrationCard: React.FC<Props> = ({ integration }) => {
+export function IntegrationCard({ integration }: Props) {
   const { workspaceSlug, projectId } = useParams();
 
-  const { data: syncedGithubRepository } = useSWR(
-    projectId ? PROJECT_GITHUB_REPOSITORY(projectId as string) : null,
-    () =>
-      workspaceSlug && projectId && integration
-        ? projectService.getProjectGithubRepository(workspaceSlug as string, projectId as string, integration.id)
-        : null
+  const { data: syncedGithubRepository } = useSWR(projectId ? PROJECT_GITHUB_REPOSITORY(projectId) : null, () =>
+    workspaceSlug && projectId && integration
+      ? projectService.getProjectGithubRepository(workspaceSlug, projectId, integration.id)
+      : null
   );
 
   const handleChange = (repo: any) => {
@@ -55,14 +51,14 @@ export const IntegrationCard: React.FC<Props> = ({ integration }) => {
     } = repo;
 
     projectService
-      .syncGithubRepository(workspaceSlug as string, projectId as string, integration.id, {
+      .syncGithubRepository(workspaceSlug, projectId, integration.id, {
         name,
         owner: login,
         repository_id: id,
         url: html_url,
       })
       .then(() => {
-        mutate(PROJECT_GITHUB_REPOSITORY(projectId as string));
+        mutate(PROJECT_GITHUB_REPOSITORY(projectId));
 
         setToast({
           type: TOAST_TYPE.SUCCESS,
@@ -83,7 +79,7 @@ export const IntegrationCard: React.FC<Props> = ({ integration }) => {
   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
@@ -93,8 +89,8 @@ export const IntegrationCard: React.FC<Props> = ({ integration }) => {
               />
             </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>
@@ -120,4 +116,4 @@ export const IntegrationCard: React.FC<Props> = ({ integration }) => {
       )}
     </>
   );
-};
+}
diff --git a/apps/web/core/components/project/join-project-modal.tsx b/apps/web/core/components/project/join-project-modal.tsx
index d4ee8ae100..4e7cf2659c 100644
--- a/apps/web/core/components/project/join-project-modal.tsx
+++ b/apps/web/core/components/project/join-project-modal.tsx
@@ -1,14 +1,10 @@
-"use client";
-
-import { useState, Fragment } from "react";
-
-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";
 
@@ -20,24 +16,26 @@ type TJoinProjectModalProps = {
   handleClose: () => void;
 };
 
-export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
+export function JoinProjectModal(props: TJoinProjectModalProps) {
   const { handleClose, isOpen, project, workspaceSlug } = props;
   // states
   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);
@@ -45,63 +43,23 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
   };
 
   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 font-medium leading-6 text-primary">Join Project?</h3>
+        <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 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 436927a431..d3de91c7f3 100644
--- a/apps/web/core/components/project/leave-project-modal.tsx
+++ b/apps/web/core/components/project/leave-project-modal.tsx
@@ -1,20 +1,15 @@
-"use client";
-
-import type { FC } from "react";
-import { Fragment } from "react";
 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";
 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";
+import { Input, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // constants
 // hooks
 import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
@@ -37,7 +32,7 @@ export interface ILeaveProjectModal {
   onClose: () => void;
 }
 
-export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
+export const LeaveProjectModal = observer(function LeaveProjectModal(props: ILeaveProjectModal) {
   const { project, isOpen, onClose } = props;
   // router
   const router = useAppRouter();
@@ -112,113 +107,82 @@ export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
   };
 
   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-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-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="break-words text-13 ">
+            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 63b4464e23..8b105183f3 100644
--- a/apps/web/core/components/project/member-header-column.tsx
+++ b/apps/web/core/components/project/member-header-column.tsx
@@ -16,7 +16,7 @@ interface Props {
   handleDisplayFilterUpdate: (data: Partial<IMemberFilters>) => void;
 }
 
-export const MemberHeaderColumn = observer((props: Props) => {
+export const MemberHeaderColumn = observer(function MemberHeaderColumn(props: Props) {
   const { displayFilters, handleDisplayFilterUpdate, property } = props;
   // i18n
   const { t } = useTranslation();
@@ -41,7 +41,7 @@ export const MemberHeaderColumn = observer((props: Props) => {
       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 +67,8 @@ export const MemberHeaderColumn = observer((props: Props) => {
             <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 +85,8 @@ export const MemberHeaderColumn = observer((props: Props) => {
             <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 2d3a235160..b3589a74ca 100644
--- a/apps/web/core/components/project/member-list-item.tsx
+++ b/apps/web/core/components/project/member-list-item.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane imports
 import { MEMBER_TRACKER_EVENTS } from "@plane/constants";
@@ -24,7 +22,7 @@ type Props = {
   workspaceSlug: string;
 };
 
-export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
+export const ProjectMemberListItem = observer(function ProjectMemberListItem(props: Props) {
   const { memberDetails, projectId, workspaceSlug } = props;
   // router
   const router = useAppRouter();
@@ -93,10 +91,10 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
         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 8f527b4754..012ead701e 100644
--- a/apps/web/core/components/project/member-list.tsx
+++ b/apps/web/core/components/project/member-list.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { Search } from "lucide-react";
@@ -22,7 +20,7 @@ type TProjectMemberListProps = {
   workspaceSlug: string;
 };
 
-export const ProjectMemberList: React.FC<TProjectMemberListProps> = observer((props) => {
+export const ProjectMemberList = observer(function ProjectMemberList(props: TProjectMemberListProps) {
   const { projectId, workspaceSlug } = props;
   // states
   const [inviteModal, setInviteModal] = useState(false);
@@ -77,13 +75,13 @@ export const ProjectMemberList: React.FC<TProjectMemberListProps> = observer((pr
         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 py-2 overflow-x-hidden border-b border-subtle">
+        <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">
+          <div className="flex items-center justify-start gap-1.5 rounded-md border border-subtle bg-surface-1 px-2 py-1">
             <Search 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 focus:outline-none placeholder:text-placeholder"
               placeholder="Search"
               value={searchQuery}
               autoFocus
@@ -98,7 +96,6 @@ export const ProjectMemberList: React.FC<TProjectMemberListProps> = observer((pr
           {isAdmin && (
             <Button
               variant="primary"
-              size="sm"
               onClick={() => {
                 setInviteModal(true);
               }}
@@ -112,7 +109,7 @@ export const ProjectMemberList: React.FC<TProjectMemberListProps> = observer((pr
       {!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 ?? []}
@@ -121,7 +118,7 @@ export const ProjectMemberList: React.FC<TProjectMemberListProps> = observer((pr
             />
           )}
           {searchedProjectMembers.length === 0 && (
-            <h4 className="text-sm mt-16 text-center text-custom-text-400">{t("no_matching_members")}</h4>
+            <h4 className="text-13 mt-16 text-center 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 3866fa89f6..c66940ed05 100644
--- a/apps/web/core/components/project/member-select.tsx
+++ b/apps/web/core/components/project/member-select.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -18,7 +16,7 @@ type Props = {
   isDisabled?: boolean;
 };
 
-export const MemberSelect: React.FC<Props> = observer((props) => {
+export const MemberSelect = observer(function MemberSelect(props: Props) {
   const { value, onChange, isDisabled = false } = props;
   // router
   const { projectId } = useParams();
@@ -67,13 +65,13 @@ export const MemberSelect: React.FC<Props> = observer((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 && [
@@ -83,8 +81,8 @@ export const MemberSelect: React.FC<Props> = observer((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 d2bc1cd521..3d66edb622 100644
--- a/apps/web/core/components/project/multi-select-modal.tsx
+++ b/apps/web/core/components/project/multi-select-modal.tsx
@@ -27,7 +27,7 @@ type Props = {
   onSubmit: (projectIds: string[]) => Promise<void>;
 };
 
-export const ProjectMultiSelectModal: React.FC<Props> = observer((props) => {
+export const ProjectMultiSelectModal = observer(function ProjectMultiSelectModal(props: Props) {
   const { isOpen, onClose, selectedProjectIds: selectedProjectIdsProp, projectIds, onSubmit } = props;
   // states
   const [searchTerm, setSearchTerm] = useState("");
@@ -84,10 +84,10 @@ export const ProjectMultiSelectModal: React.FC<Props> = observer((props) => {
   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 px-4 border-b border-subtle">
+          <Search className="flex-shrink-0 size-4 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}
@@ -102,16 +102,16 @@ export const ProjectMultiSelectModal: React.FC<Props> = observer((props) => {
               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 items-center gap-1.5 bg-surface-2 px-2 py-1 rounded-sm cursor-pointer"
                   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="text-11 truncate text-tertiary group-hover:text-secondary transition-colors">
                     {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 group-hover:text-secondary transition-colors" />
                 </div>
               );
             })}
@@ -131,7 +131,7 @@ export const ProjectMultiSelectModal: React.FC<Props> = observer((props) => {
             </div>
           ) : (
             <ul
-              className={cn("text-custom-text-100", {
+              className={cn("text-primary", {
                 "px-2": filteredProjectIds.length > 0,
               })}
             >
@@ -145,10 +145,10 @@ export const ProjectMultiSelectModal: React.FC<Props> = observer((props) => {
                     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 items-center justify-between gap-2 truncate w-full cursor-pointer select-none rounded-md p-2 text-secondary transition-colors",
                         {
-                          "bg-custom-background-80": active,
-                          "text-custom-text-100": isProjectSelected,
+                          "bg-layer-1": active,
+                          "text-primary": isProjectSelected,
                         }
                       )
                     }
@@ -158,8 +158,8 @@ export const ProjectMultiSelectModal: React.FC<Props> = observer((props) => {
                         <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="text-13 truncate">{projectDetails.name}</p>
                     </div>
                   </Combobox.Option>
                 );
@@ -168,14 +168,14 @@ export const ProjectMultiSelectModal: React.FC<Props> = observer((props) => {
           )}
         </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 p-3 border-t border-subtle">
+        <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 f2d7e9b862..9aa14282b5 100644
--- a/apps/web/core/components/project/project-feature-update.tsx
+++ b/apps/web/core/components/project/project-feature-update.tsx
@@ -1,7 +1,3 @@
-"use client";
-
-import type { FC } from "react";
-import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useTranslation } from "@plane/i18n";
@@ -21,7 +17,7 @@ type Props = {
   onClose: () => void;
 };
 
-export const ProjectFeatureUpdate: FC<Props> = observer((props) => {
+export const ProjectFeatureUpdate = observer(function ProjectFeatureUpdate(props: Props) {
   const { workspaceSlug, projectId, onClose } = props;
   // store hooks
   const { t } = useTranslation();
@@ -36,20 +32,20 @@ export const ProjectFeatureUpdate: FC<Props> = observer((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="flex items-center justify-between gap-2 mt-4 px-6 py-4 border-t border-subtle">
+        <div className="flex gap-1 text-13 text-tertiary font-medium">
           {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 d6f99972bb..5d9f592d33 100644
--- a/apps/web/core/components/project/project-network-icon.tsx
+++ b/apps/web/core/components/project/project-network-icon.tsx
@@ -8,7 +8,7 @@ type Props = {
   className?: string;
 };
 
-export const ProjectNetworkIcon = (props: Props) => {
+export function ProjectNetworkIcon(props: Props) {
   const { iconKey, className } = props;
   // Get the icon key
   const getProjectNetworkIcon = () => {
@@ -27,4 +27,4 @@ export const ProjectNetworkIcon = (props: Props) => {
   if (!Icon) return null;
 
   return <Icon className={cn("h-3 w-3", className)} />;
-};
+}
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 a2f5e76acd..a6a6087069 100644
--- a/apps/web/core/components/project/project-settings-member-defaults.tsx
+++ b/apps/web/core/components/project/project-settings-member-defaults.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { ReactNode } from "react";
 import { useEffect } from "react";
 import { observer } from "mobx-react";
@@ -30,22 +28,26 @@ type TDefaultSettingItemProps = {
   children: ReactNode;
 };
 
-const DefaultSettingItem: React.FC<TDefaultSettingItemProps> = ({ title, description, children }) => (
-  <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>
+function DefaultSettingItem({ title, description, children }: TDefaultSettingItemProps) {
+  return (
+    <div className="flex items-center justify-between gap-x-2">
+      <div className="flex flex-col gap-0.5">
+        <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>
-    <div className="w-full max-w-48 sm:max-w-64">{children}</div>
-  </div>
-);
+  );
+}
 
 type TProjectSettingsMemberDefaultsProps = {
   workspaceSlug: string;
   projectId: string;
 };
 
-export const ProjectSettingsMemberDefaults: React.FC<TProjectSettingsMemberDefaultsProps> = observer((props) => {
+export const ProjectSettingsMemberDefaults = observer(function ProjectSettingsMemberDefaults(
+  props: TProjectSettingsMemberDefaultsProps
+) {
   const { workspaceSlug, projectId } = props;
   // plane hooks
   const { t } = useTranslation();
diff --git a/apps/web/core/components/project/publish-project/modal.tsx b/apps/web/core/components/project/publish-project/modal.tsx
index a69a419f25..f906c1d0be 100644
--- a/apps/web/core/components/project/publish-project/modal.tsx
+++ b/apps/web/core/components/project/publish-project/modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -42,7 +40,7 @@ const VIEW_OPTIONS: {
   { key: "kanban", label: "Kanban" },
 ];
 
-export const PublishProjectModal: React.FC<Props> = observer((props) => {
+export const PublishProjectModal = observer(function PublishProjectModal(props: Props) {
   const { isOpen, onClose, projectId } = props;
   // states
   const [isUnPublishing, setIsUnPublishing] = useState(false);
@@ -175,9 +173,14 @@ export const PublishProjectModal: React.FC<Props> = observer((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>
           )}
@@ -195,10 +198,10 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
           <div className="px-5 space-y-4">
             {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="border border-strong rounded-md py-1.5 pl-4 pr-1 flex items-center justify-between gap-2">
                   <a
                     href={publishLink}
-                    className="text-sm text-custom-text-200 truncate"
+                    className="text-13 text-secondary truncate"
                     target="_blank"
                     rel="noopener noreferrer"
                   >
@@ -207,7 +210,7 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
                   <div className="flex-shrink-0 flex 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="size-8 grid place-items-center bg-layer-3 hover:bg-layer-3-hover rounded-sm"
                       target="_blank"
                       rel="noopener noreferrer"
                     >
@@ -215,17 +218,17 @@ export const PublishProjectModal: React.FC<Props> = observer((props) => {
                     </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 bg-layer-3 hover:bg-layer-3-hover rounded-sm text-11 font-medium py-2 px-3"
                       onClick={handleCopyLink}
                     >
                       Copy link
                     </button>
                   </div>
                 </div>
-                <p className="text-sm font-medium text-custom-primary-100 flex items-center gap-1 mt-3">
+                <p className="text-13 font-medium text-accent-primary 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" />
+                    <span className="animate-ping absolute inline-flex size-full rounded-full bg-accent-primary opacity-75" />
+                    <span className="relative inline-flex rounded-full size-1.5 bg-accent-primary" />
                   </span>
                   This project is now live on web
                 </p>
@@ -233,7 +236,7 @@ export const PublishProjectModal: React.FC<Props> = observer((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"
@@ -268,7 +271,7 @@ export const PublishProjectModal: React.FC<Props> = observer((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"
@@ -278,7 +281,7 @@ export const PublishProjectModal: React.FC<Props> = observer((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"
@@ -288,7 +291,7 @@ export const PublishProjectModal: React.FC<Props> = observer((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"
@@ -302,24 +305,24 @@ export const PublishProjectModal: React.FC<Props> = observer((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">
+        <div className="relative flex items-center justify-between border-t border-subtle px-5 py-4 mt-4">
+          <div className="flex items-center gap-1 text-13 text-placeholder">
             <Globe2 className="size-3.5" />
-            <div className="text-sm">Anyone with the link can access</div>
+            <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 02e9a8e4a8..a9b87f1b56 100644
--- a/apps/web/core/components/project/root.tsx
+++ b/apps/web/core/components/project/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useCallback, useEffect } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
@@ -17,7 +15,7 @@ import { useWorkspace } from "@/hooks/store/use-workspace";
 import { ProjectAppliedFiltersList } from "./applied-filters";
 import { ProjectCardList } from "./card-list";
 
-export const ProjectRoot = observer(() => {
+export const ProjectRoot = observer(function ProjectRoot() {
   const { currentWorkspace } = useWorkspace();
   const { workspaceSlug } = useParams();
   const pathname = usePathname();
diff --git a/apps/web/core/components/project/search-projects.tsx b/apps/web/core/components/project/search-projects.tsx
index 273161e0a6..103344e414 100644
--- a/apps/web/core/components/project/search-projects.tsx
+++ b/apps/web/core/components/project/search-projects.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { Search } from "lucide-react";
@@ -13,8 +10,9 @@ import { CloseIcon } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 // hooks
 import { useProjectFilter } from "@/hooks/store/use-project-filter";
+import { IconButton } from "@plane/propel/icon-button";
 
-export const ProjectSearch: FC = observer(() => {
+export const ProjectSearch = observer(function ProjectSearch() {
   // i18n
   const { t } = useTranslation();
   // hooks
@@ -38,29 +36,29 @@ export const ProjectSearch: FC = observer(() => {
   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={Search}
+        />
       )}
       <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 items-center justify-start gap-1 rounded-md border border-transparent bg-surface-1 text-placeholder w-0 transition-[width] ease-linear overflow-hidden opacity-0",
           {
-            "w-30 md:w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
+            "w-30 md:w-64 px-2.5 py-1.5 border-subtle 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"
+          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 e3b4e1fe5e..8ab0dc010c 100644
--- a/apps/web/core/components/project/send-project-invitation-modal.tsx
+++ b/apps/web/core/components/project/send-project-invitation-modal.tsx
@@ -1,17 +1,14 @@
-"use client";
-
 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 { useTranslation } from "@plane/i18n";
 import { Button } from "@plane/propel/button";
 import { 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
@@ -45,7 +42,7 @@ const defaultValues: FormValues = {
   ],
 };
 
-export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
+export const SendProjectInvitationModal = observer(function SendProjectInvitationModal(props: Props) {
   const { isOpen, onClose, onSuccess, projectId, workspaceSlug } = props;
   // plane hooks
   const { t } = useTranslation();
@@ -185,182 +182,140 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((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>
+    <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 font-medium leading-6 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 items-start justify-between gap-x-4 text-13 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-subtle px-3 py-2 text-left text-13 text-secondary shadow-sm 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-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-subtle px-3 py-2.5 text-left text-13 text-secondary shadow-sm 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-red-500">{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}
+          >
+            <Plus 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
index 1bac081459..8a7699fe8d 100644
--- 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
@@ -1,10 +1,8 @@
-"use client";
-
-import { useState, Fragment } from "react";
-import { Dialog, Transition } from "@headlessui/react";
+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";
@@ -18,7 +16,7 @@ type Props = {
   archive: boolean;
 };
 
-export const ArchiveRestoreProjectModal: React.FC<Props> = (props) => {
+export function ArchiveRestoreProjectModal(props: Props) {
   const { workspaceSlug, projectId, isOpen, onClose, archive } = props;
   // router
   const router = useAppRouter();
@@ -46,6 +44,7 @@ export const ArchiveRestoreProjectModal: React.FC<Props> = (props) => {
         });
         onClose();
         router.push(`/${workspaceSlug}/projects/`);
+        return;
       })
       .catch(() =>
         setToast({
@@ -68,6 +67,7 @@ export const ArchiveRestoreProjectModal: React.FC<Props> = (props) => {
         });
         onClose();
         router.push(`/${workspaceSlug}/projects/`);
+        return;
       })
       .catch(() =>
         setToast({
@@ -80,60 +80,31 @@ export const ArchiveRestoreProjectModal: React.FC<Props> = (props) => {
   };
 
   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>
+    <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>
-      </Dialog>
-    </Transition.Root>
+      </div>
+    </ModalCore>
   );
-};
+}
diff --git a/apps/web/core/components/project/settings/archive-project/selection.tsx b/apps/web/core/components/project/settings/archive-project/selection.tsx
index b21ab74003..ec3ddbc026 100644
--- a/apps/web/core/components/project/settings/archive-project/selection.tsx
+++ b/apps/web/core/components/project/settings/archive-project/selection.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { Disclosure, Transition } from "@headlessui/react";
 // types
@@ -14,15 +12,15 @@ export interface IArchiveProject {
   handleArchive: () => void;
 }
 
-export const ArchiveProjectSelection: React.FC<IArchiveProject> = (props) => {
+export function ArchiveProjectSelection(props: IArchiveProject) {
   const { projectDetails, handleArchive } = props;
 
   return (
-    <Disclosure as="div" className="border-t border-custom-border-100 py-4">
+    <Disclosure as="div" className="border-t border-subtle 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>
+            <span className="text-18 tracking-tight">Archive project</span>
             {open ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronRightIcon className="h-5 w-5" />}
           </Disclosure.Button>
           <Transition
@@ -36,14 +34,14 @@ export const ArchiveProjectSelection: React.FC<IArchiveProject> = (props) => {
           >
             <Disclosure.Panel>
               <div className="flex flex-col gap-8 pt-4">
-                <span className="text-sm tracking-tight">
+                <span className="text-13 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}>
+                      <Button variant="error-fill" size="lg" onClick={handleArchive}>
                         Archive project
                       </Button>
                     </div>
@@ -60,4 +58,4 @@ export const ArchiveProjectSelection: React.FC<IArchiveProject> = (props) => {
       )}
     </Disclosure>
   );
-};
+}
diff --git a/apps/web/core/components/project/settings/delete-project-section.tsx b/apps/web/core/components/project/settings/delete-project-section.tsx
index 30b5782475..1d81304301 100644
--- a/apps/web/core/components/project/settings/delete-project-section.tsx
+++ b/apps/web/core/components/project/settings/delete-project-section.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { Disclosure, Transition } from "@headlessui/react";
 // types
@@ -15,15 +13,15 @@ export interface IDeleteProjectSection {
   handleDelete: () => void;
 }
 
-export const DeleteProjectSection: React.FC<IDeleteProjectSection> = (props) => {
+export function DeleteProjectSection(props: IDeleteProjectSection) {
   const { projectDetails, handleDelete } = props;
 
   return (
-    <Disclosure as="div" className="border-t border-custom-border-100 py-4">
+    <Disclosure as="div" className="border-t border-subtle 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>
+            <span className="text-18 tracking-tight">Delete project</span>
             {open ? <ChevronUpIcon className="h-5 w-5" /> : <ChevronRightIcon className="h-5 w-5" />}
           </Disclosure.Button>
 
@@ -38,7 +36,7 @@ export const DeleteProjectSection: React.FC<IDeleteProjectSection> = (props) =>
           >
             <Disclosure.Panel>
               <div className="flex flex-col gap-8 pt-4">
-                <span className="text-sm tracking-tight">
+                <span className="text-13 tracking-tight">
                   When deleting a project, all of the data and resources within that project will be permanently removed
                   and cannot be recovered.
                 </span>
@@ -46,11 +44,12 @@ export const DeleteProjectSection: React.FC<IDeleteProjectSection> = (props) =>
                   {projectDetails ? (
                     <div>
                       <Button
-                        variant="danger"
+                        variant="error-fill"
+                        size="lg"
                         onClick={handleDelete}
                         data-ph-element={PROJECT_TRACKER_ELEMENTS.DELETE_PROJECT_BUTTON}
                       >
-                        Delete my project
+                        Delete project
                       </Button>
                     </div>
                   ) : (
@@ -66,4 +65,4 @@ export const DeleteProjectSection: React.FC<IDeleteProjectSection> = (props) =>
       )}
     </Disclosure>
   );
-};
+}
diff --git a/apps/web/core/components/project/settings/features-list.tsx b/apps/web/core/components/project/settings/features-list.tsx
index 8024def86a..a2fa4ccdef 100644
--- a/apps/web/core/components/project/settings/features-list.tsx
+++ b/apps/web/core/components/project/settings/features-list.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { PROJECT_TRACKER_EVENTS } from "@plane/constants";
@@ -26,7 +23,7 @@ type Props = {
   isAdmin: boolean;
 };
 
-export const ProjectFeaturesList: FC<Props> = observer((props) => {
+export const ProjectFeaturesList = observer(function ProjectFeaturesList(props: Props) {
   const { workspaceSlug, projectId, isAdmin } = props;
   // store hooks
   const { t } = useTranslation();
@@ -35,7 +32,7 @@ export const ProjectFeaturesList: FC<Props> = observer((props) => {
   // derived values
   const currentProjectDetails = getProjectById(projectId);
 
-  const handleSubmit = async (featureKey: string, featureProperty: string) => {
+  const handleSubmit = (featureKey: string, featureProperty: string) => {
     if (!workspaceSlug || !projectId || !currentProjectDetails) return;
 
     // making the request to update the project feature
@@ -55,13 +52,14 @@ export const ProjectFeaturesList: FC<Props> = observer((props) => {
         message: () => "Something went wrong while updating project feature. Please try again.",
       },
     });
-    updateProjectPromise.then(() => {
+    void updateProjectPromise.then(() => {
       captureSuccess({
         eventName: PROJECT_TRACKER_EVENTS.feature_toggled,
         payload: {
           feature_key: featureKey,
         },
       });
+      return undefined;
     });
   };
 
@@ -73,25 +71,20 @@ export const ProjectFeaturesList: FC<Props> = observer((props) => {
         <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="gap-x-8 gap-y-2 border-b border-subtle bg-surface-1 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 className="flex items-center justify-center rounded-sm bg-surface-2 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>
+                      <h4 className="text-13 font-medium leading-5">{t(featureItem.key)}</h4>
                       {featureItem.isPro && (
                         <Tooltip tooltipContent="Pro feature" position="top">
-                          <UpgradeBadge className="rounded" />
+                          <UpgradeBadge className="rounded-sm" />
                         </Tooltip>
                       )}
                     </div>
-                    <p className="text-sm leading-5 tracking-tight text-custom-text-300">
+                    <p className="text-13 leading-5 tracking-tight text-tertiary">
                       {t(`${featureItem.key}_description`)}
                     </p>
                   </div>
diff --git a/apps/web/core/components/project/settings/helper.tsx b/apps/web/core/components/project/settings/helper.tsx
index 23a0db53b4..ec667b557d 100644
--- a/apps/web/core/components/project/settings/helper.tsx
+++ b/apps/web/core/components/project/settings/helper.tsx
@@ -1,6 +1,6 @@
 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";
@@ -15,7 +15,7 @@ type Props = {
   disabled?: boolean;
 };
 
-export const ProjectFeatureToggle = (props: 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)}>
@@ -27,7 +27,7 @@ export const ProjectFeatureToggle = (props: Props) => {
         >
           {value ? "Enabled" : "Disabled"}
         </Pill>
-        <ChevronRight className="h-4 w-4 text-custom-text-300" />
+        <ChevronRightIcon className="h-4 w-4 text-tertiary" />
       </div>
     </Link>
   ) : (
@@ -39,4 +39,4 @@ export const ProjectFeatureToggle = (props: Props) => {
       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 298b9a38b5..a7e90a6122 100644
--- a/apps/web/core/components/project/settings/member-columns.tsx
+++ b/apps/web/core/components/project/settings/member-columns.tsx
@@ -32,7 +32,7 @@ type AccountTypeProps = {
   projectId: string;
 };
 
-export const NameColumn: React.FC<NameProps> = (props) => {
+export function NameColumn(props: NameProps) {
   const { rowData, workspaceSlug, isAdmin, currentUser, setRemoveMemberModal } = props;
   // derived values
   const { avatar_url, display_name, email, first_name, id, last_name } = rowData.member;
@@ -45,7 +45,7 @@ export const NameColumn: React.FC<NameProps> = (props) => {
             <div className="flex items-center gap-x-2 gap-y-2 flex-1">
               {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-4 items-center justify-center rounded-full capitalize text-on-color">
                     <img
                       src={getFileURL(avatar_url)}
                       className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
@@ -55,7 +55,7 @@ export const NameColumn: React.FC<NameProps> = (props) => {
                 </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-4 items-center justify-center rounded-full bg-gray-700 capitalize text-on-color text-11">
                     {(email ?? display_name ?? "?")[0]}
                   </span>
                 </Link>
@@ -86,9 +86,9 @@ export const NameColumn: React.FC<NameProps> = (props) => {
       )}
     </Disclosure>
   );
-};
+}
 
-export const AccountTypeColumn: React.FC<AccountTypeProps> = observer((props) => {
+export const AccountTypeColumn = observer(function AccountTypeColumn(props: AccountTypeProps) {
   const { rowData, projectId, workspaceSlug } = props;
   // store hooks
   const {
@@ -167,7 +167,7 @@ export const AccountTypeColumn: React.FC<AccountTypeProps> = observer((props) =>
                   <span>{roleLabel}</span>
                 </div>
               }
-              buttonClassName={`!px-0 !justify-start hover:bg-custom-background-100 ${errors.role ? "border-red-500" : "border-none"}`}
+              buttonClassName={`!px-0 !justify-start hover:bg-surface-1 ${errors.role ? "border-red-500" : "border-none"}`}
               className="rounded-md p-0 w-32"
               input
             >
diff --git a/apps/web/core/components/readonly/cycle.tsx b/apps/web/core/components/readonly/cycle.tsx
index 451a3c6ecb..0b0abffb6b 100644
--- a/apps/web/core/components/readonly/cycle.tsx
+++ b/apps/web/core/components/readonly/cycle.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -18,7 +16,7 @@ export type TReadonlyCycleProps = {
   workspaceSlug: string;
 };
 
-export const ReadonlyCycle: React.FC<TReadonlyCycleProps> = observer((props) => {
+export const ReadonlyCycle = observer(function ReadonlyCycle(props: TReadonlyCycleProps) {
   const { className, hideIcon = false, value, placeholder, projectId, workspaceSlug } = props;
 
   const { t } = useTranslation();
@@ -32,7 +30,7 @@ export const ReadonlyCycle: React.FC<TReadonlyCycleProps> = observer((props) =>
   }, [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 f5be3cbff5..5e2c71af44 100644
--- a/apps/web/core/components/readonly/date.tsx
+++ b/apps/web/core/components/readonly/date.tsx
@@ -1,9 +1,7 @@
-"use client";
-
 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 = {
@@ -14,15 +12,15 @@ export type TReadonlyDateProps = {
   formatToken?: string;
 };
 
-export const ReadonlyDate: React.FC<TReadonlyDateProps> = observer((props) => {
+export const ReadonlyDate = observer(function ReadonlyDate(props: TReadonlyDateProps) {
   const { className, hideIcon = false, value, placeholder, formatToken } = props;
 
   const { t } = useTranslation();
   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 e67ee74088..8863e4765d 100644
--- a/apps/web/core/components/readonly/estimate.tsx
+++ b/apps/web/core/components/readonly/estimate.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { useTranslation } from "@plane/i18n";
@@ -19,7 +17,7 @@ export type TReadonlyEstimateProps = {
   workspaceSlug: string;
 };
 
-export const ReadonlyEstimate: React.FC<TReadonlyEstimateProps> = observer((props) => {
+export const ReadonlyEstimate = observer(function ReadonlyEstimate(props: TReadonlyEstimateProps) {
   const { className, hideIcon = false, value, placeholder, projectId, workspaceSlug } = props;
 
   const { t } = useTranslation();
@@ -44,7 +42,7 @@ export const ReadonlyEstimate: React.FC<TReadonlyEstimateProps> = observer((prop
   }, [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/labels.tsx b/apps/web/core/components/readonly/labels.tsx
index 87c254e57a..c9773259cf 100644
--- a/apps/web/core/components/readonly/labels.tsx
+++ b/apps/web/core/components/readonly/labels.tsx
@@ -1,9 +1,7 @@
-"use client";
-
 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";
@@ -18,7 +16,7 @@ export type TReadonlyLabelsProps = {
   workspaceSlug: string;
 };
 
-export const ReadonlyLabels: React.FC<TReadonlyLabelsProps> = observer((props) => {
+export const ReadonlyLabels = observer(function ReadonlyLabels(props: TReadonlyLabelsProps) {
   const { className, value, projectId, workspaceSlug } = props;
 
   const { getLabelById, fetchProjectLabels } = useLabel();
@@ -34,7 +32,7 @@ export const ReadonlyLabels: React.FC<TReadonlyLabelsProps> = observer((props) =
   }, [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
@@ -44,8 +42,8 @@ export const ReadonlyLabels: React.FC<TReadonlyLabelsProps> = observer((props) =
             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="h-full flex 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 ff9198e031..556b764d58 100644
--- a/apps/web/core/components/readonly/member.tsx
+++ b/apps/web/core/components/readonly/member.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import type { LucideIcon } from "lucide-react";
 // plane imports
@@ -20,7 +18,7 @@ export type TReadonlyMemberProps = {
   projectId?: string;
 };
 
-export const ReadonlyMember: React.FC<TReadonlyMemberProps> = observer((props) => {
+export const ReadonlyMember = observer(function ReadonlyMember(props: TReadonlyMemberProps) {
   const { className, icon: Icon, hideIcon = false, value, placeholder, multiple = false } = props;
 
   const { t } = useTranslation();
@@ -30,7 +28,7 @@ export const ReadonlyMember: React.FC<TReadonlyMemberProps> = observer((props) =
 
   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>
@@ -39,9 +37,9 @@ export const ReadonlyMember: React.FC<TReadonlyMemberProps> = observer((props) =
 
   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>
     );
   }
@@ -49,11 +47,11 @@ export const ReadonlyMember: React.FC<TReadonlyMemberProps> = observer((props) =
   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="size-4 rounded-full bg-layer-1 flex items-center justify-center">
+          <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 ce248145c1..d74fd23075 100644
--- a/apps/web/core/components/readonly/module.tsx
+++ b/apps/web/core/components/readonly/module.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { Layers } from "lucide-react";
@@ -20,7 +18,7 @@ export type TReadonlyModuleProps = {
   workspaceSlug: string;
 };
 
-export const ReadonlyModule: React.FC<TReadonlyModuleProps> = observer((props) => {
+export const ReadonlyModule = observer(function ReadonlyModule(props: TReadonlyModuleProps) {
   const {
     className,
     hideIcon = false,
@@ -46,7 +44,7 @@ export const ReadonlyModule: React.FC<TReadonlyModuleProps> = observer((props) =
 
   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>
@@ -58,7 +56,7 @@ export const ReadonlyModule: React.FC<TReadonlyModuleProps> = observer((props) =
       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>
@@ -67,7 +65,7 @@ export const ReadonlyModule: React.FC<TReadonlyModuleProps> = observer((props) =
 
   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 f7a75e51ef..e059b93676 100644
--- a/apps/web/core/components/readonly/priority.tsx
+++ b/apps/web/core/components/readonly/priority.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 // plane imports
 import { ISSUE_PRIORITIES } from "@plane/constants";
@@ -15,14 +13,14 @@ export type TReadonlyPriorityProps = {
   placeholder?: string;
 };
 
-export const ReadonlyPriority: React.FC<TReadonlyPriorityProps> = observer((props) => {
+export const ReadonlyPriority = observer(function ReadonlyPriority(props: TReadonlyPriorityProps) {
   const { className, hideIcon = false, value, placeholder } = props;
 
   const { t } = useTranslation();
   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 13c7f98b61..7e7105ec9f 100644
--- a/apps/web/core/components/readonly/state.tsx
+++ b/apps/web/core/components/readonly/state.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
@@ -20,7 +18,7 @@ export type TReadonlyStateProps = {
   workspaceSlug: string;
 };
 
-export const ReadonlyState: React.FC<TReadonlyStateProps> = observer((props) => {
+export const ReadonlyState = observer(function ReadonlyState(props: TReadonlyStateProps) {
   const { className, iconSize = "size-4", hideIcon = false, value, placeholder, projectId, workspaceSlug } = props;
   // states
   const [stateLoader, setStateLoader] = useState(false);
@@ -48,7 +46,7 @@ export const ReadonlyState: React.FC<TReadonlyStateProps> = observer((props) =>
 
   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>
@@ -56,7 +54,7 @@ export const ReadonlyState: React.FC<TReadonlyStateProps> = observer((props) =>
   }
 
   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 cef5e71457..f47a0aac20 100644
--- a/apps/web/core/components/rich-filters/add-filters/button.tsx
+++ b/apps/web/core/components/rich-filters/add-filters/button.tsx
@@ -2,11 +2,12 @@ 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 +15,7 @@ export type TAddFilterButtonProps<P extends TFilterProperty, E extends TExternal
   buttonConfig?: {
     label: string | null;
     variant?: TButtonVariant;
+    size?: TButtonSize;
     className?: string;
     defaultOpen?: boolean;
     iconConfig?: {
@@ -26,48 +28,49 @@ export type TAddFilterButtonProps<P extends TFilterProperty, E extends TExternal
   onFilterSelect?: (id: string) => void;
 };
 
-export const AddFilterButton = observer(
-  <P extends TFilterProperty, E extends TExternalFilter>(props: TAddFilterButtonProps<P, E>) => {
-    const { filter, buttonConfig, onFilterSelect } = props;
-    const {
-      variant = "link-neutral",
-      className,
-      label,
-      iconConfig = { shouldShowIcon: true },
-      isDisabled = false,
-    } = buttonConfig || {};
-    // derived values
-    const FilterIcon = iconConfig.iconComponent || ListFilter;
+export const AddFilterButton = observer(function AddFilterButton<P extends TFilterProperty, E extends TExternalFilter>(
+  props: TAddFilterButtonProps<P, E>
+) {
+  const { filter, buttonConfig, onFilterSelect } = props;
+  const {
+    variant = "secondary",
+    size = "base",
+    className,
+    label,
+    iconConfig = { shouldShowIcon: true },
+    isDisabled = false,
+  } = buttonConfig || {};
+  // derived values
+  const FilterIcon = iconConfig.iconComponent || ListFilter;
 
-    const handleFilterSelect = (property: P, operator: TSupportedOperators, isNegation: boolean) => {
-      filter.addCondition(
-        LOGICAL_OPERATOR.AND,
-        {
-          property,
-          operator,
-          value: undefined,
-        },
-        isNegation
-      );
-      onFilterSelect?.(property);
-    };
-
-    if (isDisabled) return null;
-    return (
-      <AddFilterDropdown
-        {...props}
-        buttonConfig={{
-          ...buttonConfig,
-          className: cn(getButtonStyling(variant, "sm"), "py-[5px]", className),
-        }}
-        handleFilterSelect={handleFilterSelect}
-        customButton={
-          <div className="flex items-center gap-1">
-            {iconConfig.shouldShowIcon && <FilterIcon className="size-4 text-custom-text-200" />}
-            {label}
-          </div>
-        }
-      />
+  const handleFilterSelect = (property: P, operator: TSupportedOperators, isNegation: boolean) => {
+    filter.addCondition(
+      LOGICAL_OPERATOR.AND,
+      {
+        property,
+        operator,
+        value: undefined,
+      },
+      isNegation
     );
-  }
-);
+    onFilterSelect?.(property);
+  };
+
+  if (isDisabled) return null;
+  return (
+    <AddFilterDropdown
+      {...props}
+      buttonConfig={{
+        ...buttonConfig,
+        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-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 0704daff67..459a4e498a 100644
--- a/apps/web/core/components/rich-filters/add-filters/dropdown.tsx
+++ b/apps/web/core/components/rich-filters/add-filters/dropdown.tsx
@@ -18,70 +18,71 @@ export type TAddFilterDropdownProps<P extends TFilterProperty, E extends TExtern
   handleFilterSelect: (property: P, operator: TSupportedOperators, isNegation: boolean) => void;
 };
 
-export const AddFilterDropdown = observer(
-  <P extends TFilterProperty, E extends TExternalFilter>(props: TAddFilterDropdownProps<P, E>) => {
-    const { filter, customButton, buttonConfig } = props;
-    const { className, defaultOpen = false, isDisabled = false } = buttonConfig || {};
+export const AddFilterDropdown = observer(function AddFilterDropdown<
+  P extends TFilterProperty,
+  E extends TExternalFilter,
+>(props: TAddFilterDropdownProps<P, E>) {
+  const { filter, customButton, buttonConfig } = props;
+  const { className, defaultOpen = false, isDisabled = false } = buttonConfig || {};
 
-    // Transform available filter configs to CustomSearchSelect options format
-    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 gap-2">
-            {config.icon && (
-              <config.icon className="size-4 text-custom-text-300 transition-transform duration-200 ease-in-out" />
-            )}
-            <span>{config.label}</span>
-          </div>
-          {config.rightContent}
+  // Transform available filter configs to CustomSearchSelect options format
+  const filterOptions = filter.configManager.allAvailableConfigs.map((config) => ({
+    value: config.id,
+    content: (
+      <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-tertiary transition-transform duration-200 ease-in-out" />
+          )}
+          <span>{config.label}</span>
         </div>
-      ),
-      query: config.label.toLowerCase(),
-    }));
-
-    // If all filters are applied, show disabled options
-    const allFiltersApplied = filterOptions.length === 0;
-    const displayOptions = allFiltersApplied
-      ? [
-          {
-            value: "all_filters_applied",
-            content: <div className="text-custom-text-400 italic">All filters applied</div>,
-            query: "all filters applied",
-            disabled: true,
-          },
-        ]
-      : filterOptions;
-
-    const handleFilterSelect = (property: P) => {
-      const config = filter.configManager.getConfigByProperty(property);
-      if (config?.firstOperator) {
-        const { operator, isNegation } = getOperatorForPayload(config.firstOperator);
-        props.handleFilterSelect(property, operator, isNegation);
-      } else {
-        setToast({
-          title: "Filter configuration error",
-          message: "This filter is not properly configured and cannot be applied",
-          type: TOAST_TYPE.ERROR,
-        });
-      }
-    };
-
-    return (
-      <div className="relative transition-all duration-200 ease-in-out">
-        <CustomSearchSelect
-          defaultOpen={defaultOpen}
-          value={""}
-          onChange={handleFilterSelect}
-          options={displayOptions}
-          optionsClassName="w-56"
-          maxHeight="2xl"
-          placement="bottom-start"
-          disabled={isDisabled}
-          customButtonClassName={className}
-          customButton={customButton}
-        />
+        {config.rightContent}
       </div>
-    );
-  }
-);
+    ),
+    query: config.label.toLowerCase(),
+  }));
+
+  // If all filters are applied, show disabled options
+  const allFiltersApplied = filterOptions.length === 0;
+  const displayOptions = allFiltersApplied
+    ? [
+        {
+          value: "all_filters_applied",
+          content: <div className="text-placeholder italic">All filters applied</div>,
+          query: "all filters applied",
+          disabled: true,
+        },
+      ]
+    : filterOptions;
+
+  const handleFilterSelect = (property: P) => {
+    const config = filter.configManager.getConfigByProperty(property);
+    if (config?.firstOperator) {
+      const { operator, isNegation } = getOperatorForPayload(config.firstOperator);
+      props.handleFilterSelect(property, operator, isNegation);
+    } else {
+      setToast({
+        title: "Filter configuration error",
+        message: "This filter is not properly configured and cannot be applied",
+        type: TOAST_TYPE.ERROR,
+      });
+    }
+  };
+
+  return (
+    <div className="relative transition-all duration-200 ease-in-out">
+      <CustomSearchSelect
+        defaultOpen={defaultOpen}
+        value={""}
+        onChange={handleFilterSelect}
+        options={displayOptions}
+        optionsClassName="w-56"
+        maxHeight="2xl"
+        placement="bottom-start"
+        disabled={isDisabled}
+        customButtonClassName={className}
+        customButton={customButton}
+      />
+    </div>
+  );
+});
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 e3a73f411a..737e724888 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
@@ -10,23 +10,24 @@ interface FilterItemCloseButtonProps<P extends TFilterProperty, E extends TExter
   filter: IFilterInstance<P, E>;
 }
 
-export const FilterItemCloseButton = observer(
-  <P extends TFilterProperty, E extends TExternalFilter>(props: FilterItemCloseButtonProps<P, E>) => {
-    const { conditionId, filter } = props;
+export const FilterItemCloseButton = observer(function FilterItemCloseButton<
+  P extends TFilterProperty,
+  E extends TExternalFilter,
+>(props: FilterItemCloseButtonProps<P, E>) {
+  const { conditionId, filter } = props;
 
-    const handleRemoveFilter = () => {
-      filter.removeCondition(conditionId);
-    };
+  const handleRemoveFilter = () => {
+    filter.removeCondition(conditionId);
+  };
 
-    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"
-        type="button"
-        aria-label="Remove filter"
-      >
-        <CloseIcon className="size-3.5" />
-      </button>
-    );
-  }
-);
+  return (
+    <button
+      onClick={handleRemoveFilter}
+      className="px-1.5 text-placeholder hover:text-tertiary focus:outline-none bg-layer-transparent hover:bg-layer-transparent-hover"
+      type="button"
+      aria-label="Remove filter"
+    >
+      <CloseIcon className="size-3.5" />
+    </button>
+  );
+});
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 ecafbf4f3e..d08f2b389a 100644
--- a/apps/web/core/components/rich-filters/filter-item/container.tsx
+++ b/apps/web/core/components/rich-filters/filter-item/container.tsx
@@ -13,7 +13,7 @@ interface FilterItemContainerProps {
   tooltipContent?: React.ReactNode;
 }
 
-export const FilterItemContainer: React.FC<FilterItemContainerProps> = (props) => {
+export function FilterItemContainer(props: FilterItemContainerProps) {
   const { children, conditionValue, showTransition, variant = "default", tooltipContent } = props;
   // refs
   const itemRef = useRef<HTMLDivElement>(null);
@@ -52,13 +52,13 @@ export const FilterItemContainer: React.FC<FilterItemContainerProps> = (props) =
     <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 rounded-sm overflow-hidden border transition-all duration-200", {
+          "border-subtle bg-surface-1": variant === "default",
+          "border-red-500 bg-surface-2": variant === "error",
         })}
       >
         {children}
       </div>
     </Tooltip>
   );
-};
+}
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 18d0605f55..f042607358 100644
--- a/apps/web/core/components/rich-filters/filter-item/invalid.tsx
+++ b/apps/web/core/components/rich-filters/filter-item/invalid.tsx
@@ -9,28 +9,29 @@ import { FilterItemContainer } from "./container";
 import { FilterItemProperty } from "./property";
 import type { IFilterItemProps } from "./root";
 
-export const InvalidFilterItem = observer(
-  <P extends TFilterProperty, E extends TExternalFilter>(props: IFilterItemProps<P, E>) => {
-    const { condition, filter, isDisabled = false, showTransition = true } = props;
+export const InvalidFilterItem = observer(function InvalidFilterItem<
+  P extends TFilterProperty,
+  E extends TExternalFilter,
+>(props: IFilterItemProps<P, E>) {
+  const { condition, filter, isDisabled = false, showTransition = true } = props;
 
-    return (
-      <FilterItemContainer
-        conditionValue={condition.value}
-        showTransition={showTransition}
-        variant="error"
-        tooltipContent="This filter condition is no longer valid. The property may have been deleted or your access to it may have changed."
-      >
-        {/* Property section */}
-        <FilterItemProperty
-          conditionId={condition.id}
-          icon={CircleAlert}
-          label="Invalid filter"
-          filter={filter}
-          isDisabled={isDisabled}
-        />
-        {/* Remove button */}
-        {!isDisabled && <FilterItemCloseButton conditionId={condition.id} filter={filter} />}
-      </FilterItemContainer>
-    );
-  }
-);
+  return (
+    <FilterItemContainer
+      conditionValue={condition.value}
+      showTransition={showTransition}
+      variant="error"
+      tooltipContent="This filter condition is no longer valid. The property may have been deleted or your access to it may have changed."
+    >
+      {/* Property section */}
+      <FilterItemProperty
+        conditionId={condition.id}
+        icon={CircleAlert}
+        label="Invalid filter"
+        filter={filter}
+        isDisabled={isDisabled}
+      />
+      {/* Remove button */}
+      {!isDisabled && <FilterItemCloseButton conditionId={condition.id} filter={filter} />}
+    </FilterItemContainer>
+  );
+});
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 c2cbddefca..de81d2b762 100644
--- a/apps/web/core/components/rich-filters/filter-item/loader.tsx
+++ b/apps/web/core/components/rich-filters/filter-item/loader.tsx
@@ -1,7 +1,9 @@
 import { Loader } from "@plane/ui";
 
-export const FilterItemLoader = () => (
-  <Loader>
-    <Loader.Item height="28px" width="180px" />
-  </Loader>
-);
+export function FilterItemLoader() {
+  return (
+    <Loader>
+      <Loader.Item height="28px" width="180px" />
+    </Loader>
+  );
+}
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 36d1848b6a..a3e36266e7 100644
--- a/apps/web/core/components/rich-filters/filter-item/property.tsx
+++ b/apps/web/core/components/rich-filters/filter-item/property.tsx
@@ -17,40 +17,41 @@ interface IFilterItemPropertyProps<P extends TFilterProperty, E extends TExterna
   tooltipContent?: React.ReactNode | undefined;
 }
 
-export const FilterItemProperty = observer(
-  <P extends TFilterProperty, E extends TExternalFilter>(props: IFilterItemPropertyProps<P, E>) => {
-    const { conditionId, filter, isDisabled } = props;
+export const FilterItemProperty = observer(function FilterItemProperty<
+  P extends TFilterProperty,
+  E extends TExternalFilter,
+>(props: IFilterItemPropertyProps<P, E>) {
+  const { conditionId, filter, isDisabled } = props;
 
-    if (isDisabled) {
-      return <PropertyButton {...props} />;
-    }
-
-    const handleFilterSelect = (property: P, operator: TSupportedOperators, isNegation: boolean) => {
-      filter.updateConditionProperty(conditionId, property, operator, isNegation);
-    };
-
-    return (
-      <AddFilterDropdown
-        {...props}
-        handleFilterSelect={handleFilterSelect}
-        customButton={<PropertyButton {...props} />}
-      />
-    );
+  if (isDisabled) {
+    return <PropertyButton {...props} />;
   }
-);
+
+  const handleFilterSelect = (property: P, operator: TSupportedOperators, isNegation: boolean) => {
+    filter.updateConditionProperty(conditionId, property, operator, isNegation);
+  };
+
+  return (
+    <AddFilterDropdown
+      {...props}
+      handleFilterSelect={handleFilterSelect}
+      customButton={<PropertyButton {...props} />}
+    />
+  );
+});
 
 type TPropertyButtonProps<P extends TFilterProperty, E extends TExternalFilter> = IFilterItemPropertyProps<P, E> & {
   className?: string;
 };
 
-const PropertyButton = <P extends TFilterProperty, E extends TExternalFilter>(props: TPropertyButtonProps<P, E>) => {
+function PropertyButton<P extends TFilterProperty, E extends TExternalFilter>(props: TPropertyButtonProps<P, E>) {
   const { icon: Icon, label, tooltipContent, className } = props;
 
   return (
     <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 items-center gap-1 px-2 py-[5px] text-11 text-tertiary min-w-0 h-full",
           COMMON_FILTER_ITEM_BORDER_CLASSNAME,
           className
         )}
@@ -64,4 +65,4 @@ const PropertyButton = <P extends TFilterProperty, E extends TExternalFilter>(pr
       </div>
     </Tooltip>
   );
-};
+}
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 aa9c9d7bc6..e70cca28a8 100644
--- a/apps/web/core/components/rich-filters/filter-item/root.tsx
+++ b/apps/web/core/components/rich-filters/filter-item/root.tsx
@@ -28,99 +28,99 @@ export interface IFilterItemProps<P extends TFilterProperty, E extends TExternal
   showTransition?: boolean;
 }
 
-export const FilterItem = observer(
-  <P extends TFilterProperty, E extends TExternalFilter>(props: IFilterItemProps<P, E>) => {
-    const { condition, filter, isDisabled = false, showTransition = true } = props;
-    // derived values
-    const filterConfig = condition?.property ? filter.configManager.getConfigByProperty(condition.property) : undefined;
-    const operatorOptions = filterConfig
-      ?.getAllDisplayOperatorOptionsByValue(condition.value as TFilterValue)
-      .map((option) => ({
-        value: option.value,
-        content: option.label,
-        query: option.label.toLowerCase(),
-      }));
-    const selectedOperatorFieldConfig = filterConfig?.getOperatorConfig(condition.operator);
-    const selectedOperatorOption = filterConfig?.getDisplayOperatorByValue(
-      condition.operator,
-      condition.value as TFilterValue
-    );
-    // Disable operator selection when filter is disabled or only one operator option is available and selected
-    const isOperatorSelectionDisabled =
-      isDisabled ||
-      (condition.operator && operatorOptions?.length === 1 && operatorOptions[0]?.value === condition.operator);
+export const FilterItem = observer(function FilterItem<P extends TFilterProperty, E extends TExternalFilter>(
+  props: IFilterItemProps<P, E>
+) {
+  const { condition, filter, isDisabled = false, showTransition = true } = props;
+  // derived values
+  const filterConfig = condition?.property ? filter.configManager.getConfigByProperty(condition.property) : undefined;
+  const operatorOptions = filterConfig
+    ?.getAllDisplayOperatorOptionsByValue(condition.value as TFilterValue)
+    .map((option) => ({
+      value: option.value,
+      content: option.label,
+      query: option.label.toLowerCase(),
+    }));
+  const selectedOperatorFieldConfig = filterConfig?.getOperatorConfig(condition.operator);
+  const selectedOperatorOption = filterConfig?.getDisplayOperatorByValue(
+    condition.operator,
+    condition.value as TFilterValue
+  );
+  // Disable operator selection when filter is disabled or only one operator option is available and selected
+  const isOperatorSelectionDisabled =
+    isDisabled ||
+    (condition.operator && operatorOptions?.length === 1 && operatorOptions[0]?.value === condition.operator);
 
-    const handleOperatorChange = (operator: TAllAvailableOperatorsForDisplay) => {
-      if (operator) {
-        const { operator: positiveOperator, isNegation } = getOperatorForPayload(operator);
-        filter.updateConditionOperator(condition.id, positiveOperator, isNegation);
-      }
-    };
-
-    const handleValueChange = (values: SingleOrArray<TFilterValue>) => {
-      filter.updateConditionValue(condition.id, values);
-    };
-
-    if (!filter.configManager.areConfigsReady) {
-      return <FilterItemLoader />;
+  const handleOperatorChange = (operator: TAllAvailableOperatorsForDisplay) => {
+    if (operator) {
+      const { operator: positiveOperator, isNegation } = getOperatorForPayload(operator);
+      filter.updateConditionOperator(condition.id, positiveOperator, isNegation);
     }
+  };
 
-    if (!filterConfig) {
-      return (
-        <InvalidFilterItem
-          condition={condition}
-          filter={filter}
-          isDisabled={isDisabled}
-          showTransition={showTransition}
-        />
-      );
-    }
+  const handleValueChange = (values: SingleOrArray<TFilterValue>) => {
+    filter.updateConditionValue(condition.id, values);
+  };
 
+  if (!filter.configManager.areConfigsReady) {
+    return <FilterItemLoader />;
+  }
+
+  if (!filterConfig) {
     return (
-      <FilterItemContainer conditionValue={condition.value} showTransition={showTransition}>
-        {/* Property section */}
-        <FilterItemProperty
-          conditionId={condition.id}
-          filter={filter}
-          icon={filterConfig.icon}
-          isDisabled={isDisabled}
-          label={filterConfig.label}
-          tooltipContent={filterConfig.tooltipContent}
-        />
-
-        {/* Operator section */}
-        <CustomSearchSelect
-          value={condition.operator}
-          onChange={handleOperatorChange}
-          options={operatorOptions}
-          className={COMMON_FILTER_ITEM_BORDER_CLASSNAME}
-          customButtonClassName={cn(
-            "h-full px-2 text-sm font-normal",
-            isOperatorSelectionDisabled && "hover:bg-custom-background-100"
-          )}
-          optionsClassName="w-48"
-          maxHeight="2xl"
-          disabled={isOperatorSelectionDisabled}
-          customButton={
-            <div className="flex items-center h-full" aria-disabled={isOperatorSelectionDisabled}>
-              {filterConfig.getLabelForOperator(selectedOperatorOption)}
-            </div>
-          }
-        />
-
-        {/* Value section */}
-        {selectedOperatorFieldConfig && (
-          <FilterValueInput
-            filterFieldConfig={selectedOperatorFieldConfig}
-            condition={condition}
-            onChange={handleValueChange}
-            isDisabled={isDisabled}
-          />
-        )}
-
-        {/* Remove button */}
-        {!isDisabled && <FilterItemCloseButton conditionId={condition.id} filter={filter} />}
-      </FilterItemContainer>
+      <InvalidFilterItem
+        condition={condition}
+        filter={filter}
+        isDisabled={isDisabled}
+        showTransition={showTransition}
+      />
     );
   }
-);
+
+  return (
+    <FilterItemContainer conditionValue={condition.value} showTransition={showTransition}>
+      {/* Property section */}
+      <FilterItemProperty
+        conditionId={condition.id}
+        filter={filter}
+        icon={filterConfig.icon}
+        isDisabled={isDisabled}
+        label={filterConfig.label}
+        tooltipContent={filterConfig.tooltipContent}
+      />
+
+      {/* Operator section */}
+      <CustomSearchSelect
+        value={condition.operator}
+        onChange={handleOperatorChange}
+        options={operatorOptions}
+        className={COMMON_FILTER_ITEM_BORDER_CLASSNAME}
+        customButtonClassName={cn(
+          "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}>
+            {filterConfig.getLabelForOperator(selectedOperatorOption)}
+          </div>
+        }
+      />
+
+      {/* Value section */}
+      {selectedOperatorFieldConfig && (
+        <FilterValueInput
+          filterFieldConfig={selectedOperatorFieldConfig}
+          condition={condition}
+          onChange={handleValueChange}
+          isDisabled={isDisabled}
+        />
+      )}
+
+      {/* Remove button */}
+      {!isDisabled && <FilterItemCloseButton conditionId={condition.id} filter={filter} />}
+    </FilterItemContainer>
+  );
+});
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 0f4ea1e527..641515fc1b 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
@@ -15,45 +15,45 @@ type TDateRangeFilterValueInputProps<P extends TFilterProperty> = {
   onChange: (value: string[]) => void;
 };
 
-export const DateRangeFilterValueInput = observer(
-  <P extends TFilterProperty>(props: TDateRangeFilterValueInputProps<P>) => {
-    const { config, condition, isDisabled, onChange } = props;
-    // derived values
-    const [fromRaw, toRaw] = toFilterArray(condition.value) ?? [];
-    const from = isValidDate(fromRaw) ? new Date(fromRaw) : undefined;
-    const to = isValidDate(toRaw) ? new Date(toRaw) : undefined;
-    const isIncomplete = !from || !to;
+export const DateRangeFilterValueInput = observer(function DateRangeFilterValueInput<P extends TFilterProperty>(
+  props: TDateRangeFilterValueInputProps<P>
+) {
+  const { config, condition, isDisabled, onChange } = props;
+  // derived values
+  const [fromRaw, toRaw] = toFilterArray(condition.value) ?? [];
+  const from = isValidDate(fromRaw) ? new Date(fromRaw) : undefined;
+  const to = isValidDate(toRaw) ? new Date(toRaw) : undefined;
+  const isIncomplete = !from || !to;
 
-    // Handler for date range selection
-    const handleSelect = (range: { from?: Date; to?: Date } | undefined) => {
-      const formattedFrom = range?.from ? renderFormattedPayloadDate(range.from) : undefined;
-      const formattedTo = range?.to ? renderFormattedPayloadDate(range.to) : undefined;
-      if (formattedFrom && formattedTo) {
-        onChange([formattedFrom, formattedTo]);
-      } else {
-        onChange([]);
-      }
-    };
+  // Handler for date range selection
+  const handleSelect = (range: { from?: Date; to?: Date } | undefined) => {
+    const formattedFrom = range?.from ? renderFormattedPayloadDate(range.from) : undefined;
+    const formattedTo = range?.to ? renderFormattedPayloadDate(range.to) : undefined;
+    if (formattedFrom && formattedTo) {
+      onChange([formattedFrom, formattedTo]);
+    } else {
+      onChange([]);
+    }
+  };
 
-    return (
-      <DateRangeDropdown
-        value={{ from, to }}
-        onSelect={handleSelect}
-        minDate={config.min}
-        maxDate={config.max}
-        mergeDates
-        placeholder={{ from: EMPTY_FILTER_PLACEHOLDER_TEXT }}
-        buttonVariant="transparent-with-text"
-        buttonClassName={cn("rounded-none", {
-          [COMMON_FILTER_ITEM_BORDER_CLASSNAME]: !isDisabled,
-          "text-red-500": isIncomplete,
-          "hover:bg-custom-background-100": isDisabled,
-        })}
-        renderPlaceholder
-        renderInPortal
-        defaultOpen={isIncomplete}
-        disabled={isDisabled}
-      />
-    );
-  }
-);
+  return (
+    <DateRangeDropdown
+      value={{ from, to }}
+      onSelect={handleSelect}
+      minDate={config.min}
+      maxDate={config.max}
+      mergeDates
+      placeholder={{ from: EMPTY_FILTER_PLACEHOLDER_TEXT }}
+      buttonVariant="transparent-with-text"
+      buttonClassName={cn("rounded-none", {
+        [COMMON_FILTER_ITEM_BORDER_CLASSNAME]: !isDisabled,
+        "text-red-500": isIncomplete,
+        "hover:bg-surface-1": isDisabled,
+      })}
+      renderPlaceholder
+      renderInPortal
+      defaultOpen={isIncomplete}
+      disabled={isDisabled}
+    />
+  );
+});
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 70da02cf11..6fc667740f 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
@@ -13,34 +13,34 @@ type TSingleDateFilterValueInputProps<P extends TFilterProperty> = {
   onChange: (value: string | null | undefined) => void;
 };
 
-export const SingleDateFilterValueInput = observer(
-  <P extends TFilterProperty>(props: TSingleDateFilterValueInputProps<P>) => {
-    const { config, condition, isDisabled, onChange } = props;
-    // derived values
-    const conditionValue = typeof condition.value === "string" ? condition.value : null;
+export const SingleDateFilterValueInput = observer(function SingleDateFilterValueInput<P extends TFilterProperty>(
+  props: TSingleDateFilterValueInputProps<P>
+) {
+  const { config, condition, isDisabled, onChange } = props;
+  // derived values
+  const conditionValue = typeof condition.value === "string" ? condition.value : null;
 
-    return (
-      <DateDropdown
-        value={conditionValue}
-        onChange={(value: Date | null) => {
-          const formattedDate = value ? renderFormattedPayloadDate(value) : null;
-          onChange(formattedDate);
-        }}
-        buttonClassName={cn("rounded-none", {
-          [COMMON_FILTER_ITEM_BORDER_CLASSNAME]: !isDisabled,
-          "text-custom-text-400": !conditionValue,
-          "hover:bg-custom-background-100": isDisabled,
-        })}
-        minDate={config.min}
-        maxDate={config.max}
-        icon={null}
-        placeholder={EMPTY_FILTER_PLACEHOLDER_TEXT}
-        buttonVariant="transparent-with-text"
-        isClearable={false}
-        closeOnSelect
-        defaultOpen={!conditionValue}
-        disabled={isDisabled}
-      />
-    );
-  }
-);
+  return (
+    <DateDropdown
+      value={conditionValue}
+      onChange={(value: Date | null) => {
+        const formattedDate = value ? renderFormattedPayloadDate(value) : null;
+        onChange(formattedDate);
+      }}
+      buttonClassName={cn("rounded-none", {
+        [COMMON_FILTER_ITEM_BORDER_CLASSNAME]: !isDisabled,
+        "text-placeholder": !conditionValue,
+        "hover:bg-surface-1": isDisabled,
+      })}
+      minDate={config.min}
+      maxDate={config.max}
+      icon={null}
+      placeholder={EMPTY_FILTER_PLACEHOLDER_TEXT}
+      buttonVariant="transparent-with-text"
+      isClearable={false}
+      closeOnSelect
+      defaultOpen={!conditionValue}
+      disabled={isDisabled}
+    />
+  );
+});
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 be90b30d99..a9717b09ca 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
@@ -22,58 +22,58 @@ import { SingleDateFilterValueInput } from "./date/single";
 import { MultiSelectFilterValueInput } from "./select/multi";
 import { SingleSelectFilterValueInput } from "./select/single";
 
-export const FilterValueInput = observer(
-  <P extends TFilterProperty, V extends TFilterValue>(props: TFilterValueInputProps<P, V>) => {
-    const { condition, filterFieldConfig, isDisabled = false, onChange } = props;
+export const FilterValueInput = observer(function FilterValueInput<P extends TFilterProperty, V extends TFilterValue>(
+  props: TFilterValueInputProps<P, V>
+) {
+  const { condition, filterFieldConfig, isDisabled = false, onChange } = props;
 
-    // Single select input
-    if (filterFieldConfig?.type === FILTER_FIELD_TYPE.SINGLE_SELECT) {
-      return (
-        <SingleSelectFilterValueInput<P>
-          config={filterFieldConfig as TSingleSelectFilterFieldConfig<string>}
-          condition={condition as TFilterConditionNodeForDisplay<P, string>}
-          isDisabled={isDisabled}
-          onChange={(value) => onChange(value as SingleOrArray<V>)}
-        />
-      );
-    }
-
-    // Multi select input
-    if (filterFieldConfig?.type === FILTER_FIELD_TYPE.MULTI_SELECT) {
-      return (
-        <MultiSelectFilterValueInput<P>
-          config={filterFieldConfig as TMultiSelectFilterFieldConfig<string>}
-          condition={condition as TFilterConditionNode<P, string>}
-          isDisabled={isDisabled}
-          onChange={(value) => onChange(value as SingleOrArray<V>)}
-        />
-      );
-    }
-
-    // Date filter input
-    if (filterFieldConfig?.type === FILTER_FIELD_TYPE.DATE) {
-      return (
-        <SingleDateFilterValueInput<P>
-          config={filterFieldConfig as TDateFilterFieldConfig<string>}
-          condition={condition as TFilterConditionNodeForDisplay<P, string>}
-          isDisabled={isDisabled}
-          onChange={(value) => onChange(value as SingleOrArray<V>)}
-        />
-      );
-    }
-
-    // Date range filter input
-    if (filterFieldConfig?.type === FILTER_FIELD_TYPE.DATE_RANGE) {
-      return (
-        <DateRangeFilterValueInput<P>
-          config={filterFieldConfig as TDateRangeFilterFieldConfig<string>}
-          condition={condition as TFilterConditionNodeForDisplay<P, string>}
-          isDisabled={isDisabled}
-          onChange={(value) => onChange(value as SingleOrArray<V>)}
-        />
-      );
-    }
-
-    return <AdditionalFilterValueInput {...props} />;
+  // Single select input
+  if (filterFieldConfig?.type === FILTER_FIELD_TYPE.SINGLE_SELECT) {
+    return (
+      <SingleSelectFilterValueInput<P>
+        config={filterFieldConfig as TSingleSelectFilterFieldConfig<string>}
+        condition={condition as TFilterConditionNodeForDisplay<P, string>}
+        isDisabled={isDisabled}
+        onChange={(value) => onChange(value as SingleOrArray<V>)}
+      />
+    );
   }
-);
+
+  // Multi select input
+  if (filterFieldConfig?.type === FILTER_FIELD_TYPE.MULTI_SELECT) {
+    return (
+      <MultiSelectFilterValueInput<P>
+        config={filterFieldConfig as TMultiSelectFilterFieldConfig<string>}
+        condition={condition as TFilterConditionNode<P, string>}
+        isDisabled={isDisabled}
+        onChange={(value) => onChange(value as SingleOrArray<V>)}
+      />
+    );
+  }
+
+  // Date filter input
+  if (filterFieldConfig?.type === FILTER_FIELD_TYPE.DATE) {
+    return (
+      <SingleDateFilterValueInput<P>
+        config={filterFieldConfig as TDateFilterFieldConfig<string>}
+        condition={condition as TFilterConditionNodeForDisplay<P, string>}
+        isDisabled={isDisabled}
+        onChange={(value) => onChange(value as SingleOrArray<V>)}
+      />
+    );
+  }
+
+  // Date range filter input
+  if (filterFieldConfig?.type === FILTER_FIELD_TYPE.DATE_RANGE) {
+    return (
+      <DateRangeFilterValueInput<P>
+        config={filterFieldConfig as TDateRangeFilterFieldConfig<string>}
+        condition={condition as TFilterConditionNodeForDisplay<P, string>}
+        isDisabled={isDisabled}
+        onChange={(value) => onChange(value as SingleOrArray<V>)}
+      />
+    );
+  }
+
+  return <AdditionalFilterValueInput {...props} />;
+});
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 488e34c5b8..222faa2f4a 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
@@ -21,34 +21,34 @@ type TMultiSelectFilterValueInputProps<P extends TFilterProperty> = {
   onChange: (values: SingleOrArray<string>) => void;
 };
 
-export const MultiSelectFilterValueInput = observer(
-  <P extends TFilterProperty>(props: TMultiSelectFilterValueInputProps<P>) => {
-    const { config, condition, isDisabled, onChange } = props;
-    // states
-    const [options, setOptions] = useState<IFilterOption<string>[]>([]);
-    const [loading, setLoading] = useState<boolean>(false);
-    // derived values
-    const formattedOptions = useMemo(() => getFormattedOptions<string>(options), [options]);
+export const MultiSelectFilterValueInput = observer(function MultiSelectFilterValueInput<P extends TFilterProperty>(
+  props: TMultiSelectFilterValueInputProps<P>
+) {
+  const { config, condition, isDisabled, onChange } = props;
+  // states
+  const [options, setOptions] = useState<IFilterOption<string>[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  // derived values
+  const formattedOptions = useMemo(() => getFormattedOptions<string>(options), [options]);
 
-    useEffect(() => {
-      loadOptions({ config, setOptions, setLoading });
-    }, [config]);
+  useEffect(() => {
+    loadOptions({ config, setOptions, setLoading });
+  }, [config]);
 
-    const handleSelectChange = (values: string[]) => {
-      onChange(values);
-    };
+  const handleSelectChange = (values: string[]) => {
+    onChange(values);
+  };
 
-    return (
-      <CustomSearchSelect
-        {...getCommonCustomSearchSelectProps(isDisabled)}
-        value={toFilterArray(condition.value)}
-        onChange={handleSelectChange}
-        options={formattedOptions}
-        multiple
-        disabled={loading || isDisabled}
-        customButton={<SelectedOptionsDisplay<string> selectedValue={condition.value} options={options} />}
-        defaultOpen={getFilterValueLength(condition.value) === 0}
-      />
-    );
-  }
-);
+  return (
+    <CustomSearchSelect
+      {...getCommonCustomSearchSelectProps(isDisabled)}
+      value={toFilterArray(condition.value)}
+      onChange={handleSelectChange}
+      options={formattedOptions}
+      multiple
+      disabled={loading || isDisabled}
+      customButton={<SelectedOptionsDisplay<string> selectedValue={condition.value} options={options} />}
+      defaultOpen={getFilterValueLength(condition.value) === 0}
+    />
+  );
+});
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 bddca2b563..5e269570ff 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
@@ -13,7 +13,7 @@ type TSelectedOptionsDisplayProps<V extends TFilterValue> = {
   fallbackText?: string;
 };
 
-export const SelectedOptionsDisplay = <V extends TFilterValue>(props: TSelectedOptionsDisplayProps<V>) => {
+export function SelectedOptionsDisplay<V extends TFilterValue>(props: TSelectedOptionsDisplayProps<V>) {
   const { selectedValue, options, displayCount = 2, emptyValue = EMPTY_FILTER_PLACEHOLDER_TEXT, fallbackText } = props;
   // derived values
   const selectedArray = toFilterArray(selectedValue);
@@ -24,12 +24,12 @@ export const 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 (
@@ -40,9 +40,7 @@ export const SelectedOptionsDisplay = <V extends TFilterValue>(props: TSelectedO
             {option?.icon && <span className={cn("mr-1", option.iconClassName)}>{option.icon}</span>}
             <span className="truncate max-w-24">{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="text-tertiary mx-1">,</span>}
         </React.Fragment>
       ))}
       {remainingCount > 0 && (
@@ -52,11 +50,11 @@ export const 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="text-tertiary whitespace-nowrap ml-1"
         >
           +{remainingCount} more
         </Transition>
       )}
     </div>
   );
-};
+}
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 d4054d8452..35e0cf26b1 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
@@ -45,9 +45,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 0d1894ebe2..20c6d52967 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
@@ -19,40 +19,40 @@ type TSingleSelectFilterValueInputProps<P extends TFilterProperty> = {
   onChange: (value: string | null) => void;
 };
 
-export const SingleSelectFilterValueInput = observer(
-  <P extends TFilterProperty>(props: TSingleSelectFilterValueInputProps<P>) => {
-    const { config, condition, onChange, isDisabled } = props;
-    // states
-    const [options, setOptions] = useState<IFilterOption<string>[]>([]);
-    const [loading, setLoading] = useState<boolean>(false);
-    // derived values
-    const formattedOptions = useMemo(() => getFormattedOptions<string>(options), [options]);
+export const SingleSelectFilterValueInput = observer(function SingleSelectFilterValueInput<P extends TFilterProperty>(
+  props: TSingleSelectFilterValueInputProps<P>
+) {
+  const { config, condition, onChange, isDisabled } = props;
+  // states
+  const [options, setOptions] = useState<IFilterOption<string>[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+  // derived values
+  const formattedOptions = useMemo(() => getFormattedOptions<string>(options), [options]);
 
-    useEffect(() => {
-      loadOptions({ config, setOptions, setLoading });
-    }, [config]);
+  useEffect(() => {
+    loadOptions({ config, setOptions, setLoading });
+  }, [config]);
 
-    const handleSelectChange = (value: string) => {
-      if (value === condition.value) {
-        onChange(null);
-      } else {
-        onChange(value);
+  const handleSelectChange = (value: string) => {
+    if (value === condition.value) {
+      onChange(null);
+    } else {
+      onChange(value);
+    }
+  };
+
+  return (
+    <CustomSearchSelect
+      {...getCommonCustomSearchSelectProps(isDisabled)}
+      value={condition.value}
+      onChange={handleSelectChange}
+      options={formattedOptions}
+      multiple={false}
+      disabled={loading || isDisabled}
+      customButton={
+        <SelectedOptionsDisplay<string> selectedValue={condition.value} options={options} displayCount={1} />
       }
-    };
-
-    return (
-      <CustomSearchSelect
-        {...getCommonCustomSearchSelectProps(isDisabled)}
-        value={condition.value}
-        onChange={handleSelectChange}
-        options={formattedOptions}
-        multiple={false}
-        disabled={loading || isDisabled}
-        customButton={
-          <SelectedOptionsDisplay<string> selectedValue={condition.value} options={options} displayCount={1} />
-        }
-        defaultOpen={!condition.value}
-      />
-    );
-  }
-);
+      defaultOpen={!condition.value}
+    />
+  );
+});
diff --git a/apps/web/core/components/rich-filters/filters-row.tsx b/apps/web/core/components/rich-filters/filters-row.tsx
index 5609ee7d8b..30316890f6 100644
--- a/apps/web/core/components/rich-filters/filters-row.tsx
+++ b/apps/web/core/components/rich-filters/filters-row.tsx
@@ -24,143 +24,135 @@ export type TFiltersRowProps<K extends TFilterProperty, E extends TExternalFilte
   };
 };
 
-export const FiltersRow = observer(
-  <K extends TFilterProperty, E extends TExternalFilter>(props: TFiltersRowProps<K, E>) => {
-    const {
-      buttonConfig,
-      disabledAllOperations: disabledAllOperationsProp = false,
-      filter,
-      variant = "header",
-      trackerElements,
-    } = props;
-    // states
-    const [isUpdating, setIsUpdating] = useState(false);
-    // derived values
-    const disabledAllOperations = disabledAllOperationsProp || !filter.configManager.areConfigsReady;
-    const hasAnyConditions = filter.allConditionsForDisplay.length > 0;
-    const hasAvailableOperations =
-      !disabledAllOperations && (filter.canClearFilters || filter.canSaveView || filter.canUpdateView);
+export const FiltersRow = observer(function FiltersRow<K extends TFilterProperty, E extends TExternalFilter>(
+  props: TFiltersRowProps<K, E>
+) {
+  const {
+    buttonConfig,
+    disabledAllOperations: disabledAllOperationsProp = false,
+    filter,
+    variant = "header",
+    trackerElements,
+  } = props;
+  // states
+  const [isUpdating, setIsUpdating] = useState(false);
+  // derived values
+  const disabledAllOperations = disabledAllOperationsProp || !filter.configManager.areConfigsReady;
+  const hasAnyConditions = filter.allConditionsForDisplay.length > 0;
+  const hasAvailableOperations =
+    !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 headerButtonConfig: Partial<TAddFilterButtonProps<K, E>["buttonConfig"]> = {
+    label: null,
+  };
 
-    const modalButtonConfig: Partial<TAddFilterButtonProps<K, E>["buttonConfig"]> = {
-      variant: "neutral-primary",
-      className: "bg-custom-background-100",
-      label: !hasAnyConditions ? "Filters" : null,
-    };
+  const modalButtonConfig: Partial<TAddFilterButtonProps<K, E>["buttonConfig"]> = {
+    label: !hasAnyConditions ? "Filters" : null,
+  };
 
-    const handleUpdate = useCallback(async () => {
-      setIsUpdating(true);
-      try {
-        await filter.updateView();
-      } finally {
-        setTimeout(() => setIsUpdating(false), 240); // To avoid flickering
-      }
-    }, [filter]);
-
-    const leftContent = (
-      <>
-        {filter.allConditionsForDisplay.map((condition) => (
-          <FilterItem key={condition.id} filter={filter} condition={condition} isDisabled={disabledAllOperations} />
-        ))}
-        <AddFilterButton
-          filter={filter}
-          buttonConfig={{
-            label: null,
-            ...(variant === "modal" ? modalButtonConfig : headerButtonConfig),
-            iconConfig: {
-              shouldShowIcon: true,
-              iconComponent: ListFilterPlus,
-            },
-            ...buttonConfig,
-            isDisabled: disabledAllOperations,
-          }}
-        />
-      </>
-    );
-
-    const rightContent = !disabledAllOperations && (
-      <>
-        <ElementTransition show={filter.canClearFilters}>
-          <Button
-            variant="neutral-primary"
-            size="sm"
-            className={COMMON_OPERATION_BUTTON_CLASSNAME}
-            onClick={filter.clearFilters}
-            data-ph-element={trackerElements?.clearFilter}
-          >
-            {filter.clearFilterOptions?.label ?? "Clear all"}
-          </Button>
-        </ElementTransition>
-        <ElementTransition show={filter.canSaveView}>
-          <Button
-            variant="accent-primary"
-            size="sm"
-            className={COMMON_OPERATION_BUTTON_CLASSNAME}
-            onClick={filter.saveView}
-            data-ph-element={trackerElements?.saveView}
-          >
-            {filter.saveViewOptions?.label ?? "Save view"}
-          </Button>
-        </ElementTransition>
-        <ElementTransition show={filter.canUpdateView}>
-          <Button
-            variant="accent-primary"
-            size="sm"
-            className={COMMON_OPERATION_BUTTON_CLASSNAME}
-            onClick={handleUpdate}
-            loading={isUpdating}
-            disabled={isUpdating}
-            data-ph-element={trackerElements?.updateView}
-          >
-            {isUpdating ? "Confirming" : (filter.updateViewOptions?.label ?? "Update view")}
-          </Button>
-        </ElementTransition>
-      </>
-    );
-
-    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={cn("flex items-center gap-2 border-l border-custom-border-200 pl-4", {
-            "border-l-transparent pl-0": !hasAvailableOperations,
-          })}
-        >
-          {rightContent}
-        </div>
-      </div>
-    );
-
-    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>
-    );
-
-    const HeaderVariant = (
-      <Header variant={EHeaderVariant.TERNARY} className="min-h-11">
-        {mainContent}
-      </Header>
-    );
-
-    if (!filter.configManager.areConfigsReady && !hasAnyConditions) {
-      return (
-        <RowTransition show={filter.isVisible}>
-          <Loader>
-            <Loader.Item height="44px" width="100%" className={cn({ "rounded-none": variant === "header" })} />
-          </Loader>
-        </RowTransition>
-      );
+  const handleUpdate = useCallback(async () => {
+    setIsUpdating(true);
+    try {
+      await filter.updateView();
+    } finally {
+      setTimeout(() => setIsUpdating(false), 240); // To avoid flickering
     }
+  }, [filter]);
 
-    return <RowTransition show={filter.isVisible}>{variant === "modal" ? ModalVariant : HeaderVariant}</RowTransition>;
+  const leftContent = (
+    <>
+      {filter.allConditionsForDisplay.map((condition) => (
+        <FilterItem key={condition.id} filter={filter} condition={condition} isDisabled={disabledAllOperations} />
+      ))}
+      <AddFilterButton
+        filter={filter}
+        buttonConfig={{
+          label: null,
+          ...(variant === "modal" ? modalButtonConfig : headerButtonConfig),
+          size: "lg",
+          iconConfig: {
+            shouldShowIcon: true,
+            iconComponent: ListFilterPlus,
+          },
+          ...buttonConfig,
+          isDisabled: disabledAllOperations,
+        }}
+      />
+    </>
+  );
+
+  const rightContent = !disabledAllOperations && (
+    <>
+      <ElementTransition show={filter.canClearFilters}>
+        <Button
+          variant="secondary"
+          className={COMMON_OPERATION_BUTTON_CLASSNAME}
+          onClick={filter.clearFilters}
+          data-ph-element={trackerElements?.clearFilter}
+        >
+          {filter.clearFilterOptions?.label ?? "Clear all"}
+        </Button>
+      </ElementTransition>
+      <ElementTransition show={filter.canSaveView}>
+        <Button
+          variant="secondary"
+          className={COMMON_OPERATION_BUTTON_CLASSNAME}
+          onClick={filter.saveView}
+          data-ph-element={trackerElements?.saveView}
+        >
+          {filter.saveViewOptions?.label ?? "Save view"}
+        </Button>
+      </ElementTransition>
+      <ElementTransition show={filter.canUpdateView}>
+        <Button
+          variant="secondary"
+          className={COMMON_OPERATION_BUTTON_CLASSNAME}
+          onClick={handleUpdate}
+          loading={isUpdating}
+          disabled={isUpdating}
+          data-ph-element={trackerElements?.updateView}
+        >
+          {isUpdating ? "Confirming" : (filter.updateViewOptions?.label ?? "Update view")}
+        </Button>
+      </ElementTransition>
+    </>
+  );
+
+  const mainContent = (
+    <div className="w-full flex items-start gap-2 bg-layer-1 px-4 py-2 rounded-lg">
+      <div className="w-full flex flex-wrap items-center gap-2">{leftContent}</div>
+      <div
+        className={cn("flex items-center gap-2 border-l border-subtle pl-4", {
+          "border-l-transparent pl-0": !hasAvailableOperations,
+        })}
+      >
+        {rightContent}
+      </div>
+    </div>
+  );
+
+  const ModalVariant = (
+    <div className="w-full flex flex-wrap items-center gap-2 min-h-11 bg-layer-1 rounded-lg p-2">{mainContent}</div>
+  );
+
+  const HeaderVariant = (
+    <Header variant={EHeaderVariant.TERNARY} className="!px-3 min-h-11 bg-surface-1">
+      {mainContent}
+    </Header>
+  );
+
+  if (!filter.configManager.areConfigsReady && !hasAnyConditions) {
+    return (
+      <RowTransition show={filter.isVisible}>
+        <Loader>
+          <Loader.Item height="44px" width="100%" className={cn({ "rounded-none": variant === "header" })} />
+        </Loader>
+      </RowTransition>
+    );
   }
-);
+
+  return <RowTransition show={filter.isVisible}>{variant === "modal" ? ModalVariant : HeaderVariant}</RowTransition>;
+});
 
 const COMMON_OPERATION_BUTTON_CLASSNAME = "py-1";
 
@@ -169,35 +161,39 @@ type TElementTransitionProps = {
   show: boolean;
 };
 
-const ElementTransition = observer((props: TElementTransitionProps) => (
-  <Transition
-    show={props.show}
-    enter="transition ease-out duration-200"
-    enterFrom="opacity-0 scale-95"
-    enterTo="opacity-100 scale-100"
-    leave="transition ease-in duration-150"
-    leaveFrom="opacity-100 scale-100"
-    leaveTo="opacity-0 scale-95"
-  >
-    {props.children}
-  </Transition>
-));
+const ElementTransition = observer(function ElementTransition(props: TElementTransitionProps) {
+  return (
+    <Transition
+      show={props.show}
+      enter="transition ease-out duration-200"
+      enterFrom="opacity-0 scale-95"
+      enterTo="opacity-100 scale-100"
+      leave="transition ease-in duration-150"
+      leaveFrom="opacity-100 scale-100"
+      leaveTo="opacity-0 scale-95"
+    >
+      {props.children}
+    </Transition>
+  );
+});
 
 type TRowTransitionProps = {
   children: React.ReactNode;
   show: boolean;
 };
 
-const RowTransition = observer((props: TRowTransitionProps) => (
-  <Transition
-    show={props.show}
-    enter="transition-all duration-150 ease-out"
-    enterFrom="opacity-0 -translate-y-1"
-    enterTo="opacity-100 translate-y-0"
-    leave="transition-all duration-100 ease-in"
-    leaveFrom="opacity-100 translate-y-0"
-    leaveTo="opacity-0 -translate-y-1"
-  >
-    {props.children}
-  </Transition>
-));
+const RowTransition = observer(function RowTransition(props: TRowTransitionProps) {
+  return (
+    <Transition
+      show={props.show}
+      enter="transition-all duration-150 ease-out"
+      enterFrom="opacity-0 -translate-y-1"
+      enterTo="opacity-100 translate-y-0"
+      leave="transition-all duration-100 ease-in"
+      leaveFrom="opacity-100 translate-y-0"
+      leaveTo="opacity-0 -translate-y-1"
+    >
+      {props.children}
+    </Transition>
+  );
+});
diff --git a/apps/web/core/components/rich-filters/filters-toggle.tsx b/apps/web/core/components/rich-filters/filters-toggle.tsx
index 2f06186dd0..76f8445320 100644
--- a/apps/web/core/components/rich-filters/filters-toggle.tsx
+++ b/apps/web/core/components/rich-filters/filters-toggle.tsx
@@ -1,9 +1,10 @@
 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,65 +13,72 @@ 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(
-  <P extends TFilterProperty, E extends TExternalFilter>(props: TFiltersToggleProps<P, E>) => {
-    const { filter } = props;
-    // derived values
-    const hasAnyConditions = (filter?.allConditionsForDisplay.length ?? 0) > 0;
-    const isFilterRowVisible = filter?.isVisible ?? false;
-    const hasUpdates = filter?.canUpdateView === true && filter?.hasChanges === true;
-    const showFilterRowChangesPill = hasUpdates || hasAnyConditions === true;
-    const showAddFilterButton = !hasAnyConditions && !isFilterRowVisible && !hasUpdates;
+export const FiltersToggle = observer(function FiltersToggle<P extends TFilterProperty, E extends TExternalFilter>(
+  props: TFiltersToggleProps<P, E>
+) {
+  const { filter } = props;
+  // derived values
+  const hasAnyConditions = (filter?.allConditionsForDisplay.length ?? 0) > 0;
+  const isFilterRowVisible = filter?.isVisible ?? false;
+  const hasUpdates = filter?.canUpdateView === true && filter?.hasChanges === true;
+  const showFilterRowChangesPill = hasUpdates || hasAnyConditions === true;
+  const showAddFilterButton = !hasAnyConditions && !isFilterRowVisible && !hasUpdates;
 
-    const handleToggleFilter = () => {
-      if (!filter) {
-        console.error("Filters toggle error - filter instance not available");
-        return;
-      }
-      filter.toggleVisibility();
-    };
-
-    // 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",
-            className: COMMON_CLASSNAME,
-            label: null,
-          }}
-          onFilterSelect={() => filter?.toggleVisibility(true)}
-        />
-      );
+  const handleToggleFilter = () => {
+    if (!filter) {
+      console.error("Filters toggle error - filter instance not available");
+      return;
     }
+    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 (
-      <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,
-        })}
-        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>
+      <AddFilterButton
+        filter={filter}
+        buttonConfig={{
+          variant: "secondary",
+          className: COMMON_CLASSNAME,
+          label: null,
+        }}
+        onFilterSelect={() => filter?.toggleVisibility(true)}
+      />
     );
   }
-);
+
+  return (
+    <IconButton
+      size="lg"
+      variant="secondary"
+      icon={showFilterRowChangesPill ? FilterAppliedIcon : FilterIcon}
+      onClick={handleToggleFilter}
+      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 89b115dcf1..763128503e 100644
--- a/apps/web/core/components/rich-filters/shared.ts
+++ b/apps/web/core/components/rich-filters/shared.ts
@@ -6,7 +6,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/content-wrapper.tsx b/apps/web/core/components/settings/content-wrapper.tsx
index 6d9be9c5c9..a15566d666 100644
--- a/apps/web/core/components/settings/content-wrapper.tsx
+++ b/apps/web/core/components/settings/content-wrapper.tsx
@@ -6,7 +6,7 @@ type TProps = {
   children: ReactNode;
   size?: "lg" | "md";
 };
-export const SettingsContentWrapper = observer((props: TProps) => {
+export const SettingsContentWrapper = observer(function SettingsContentWrapper(props: TProps) {
   const { children, size = "md" } = props;
 
   return (
diff --git a/apps/web/core/components/settings/header.tsx b/apps/web/core/components/settings/header.tsx
index 4f2e2128d1..b62ad4d4b1 100644
--- a/apps/web/core/components/settings/header.tsx
+++ b/apps/web/core/components/settings/header.tsx
@@ -1,8 +1,5 @@
-"use client";
-
 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";
@@ -15,28 +12,24 @@ import { useUserSettings } from "@/hooks/store/user";
 import { WorkspaceLogo } from "../workspace/logo";
 import SettingsTabs from "./tabs";
 
-export const SettingsHeader = observer(() => {
+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",
+      className={cn("bg-surface-2 p-page-x transition-all duration-300 ease-in-out relative", {
+        "pt-4! flex md:flex-col": isScrolled,
       })}
     >
       <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 ",
+          getButtonStyling("secondary", "base"),
+          "md:absolute left-2 top-9 group flex  gap-2 text-tertiary mb-4 w-fit rounded-lg",
+          "h-6 w-6 rounded-lg p-1",
           isScrolled ? "-mt-2 " : "hidden p-0 overflow-hidden items-center pr-2 border-none"
         )}
       >
@@ -46,15 +39,15 @@ export const SettingsHeader = observer(() => {
       <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"
+          "group flex  gap-2 text-tertiary mb-3 border border-transparent w-fit rounded-lg",
+          !isScrolled ? "hover:bg-layer-transparent-hover hover:border-subtle 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",
+            getButtonStyling("secondary", "base"),
+            "h-6 w-6 rounded-lg p-1 hover:bg-surface-1 hover:border-subtle",
+            "group-hover:bg-surface-1 group-hover:border-transparent",
             { "h-0 hidden": isScrolled }
           )}
         >
@@ -65,21 +58,21 @@ export const SettingsHeader = observer(() => {
             "h-0 w-0 overflow-hidden": isScrolled,
           })}
         >
-          <div className="text-sm my-auto font-semibold text-custom-text-200">{t("back_to_workspace")}</div>
+          <div className="text-13 my-auto font-semibold text-secondary">{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"
+              classNames="my-auto size-4 text-11"
             />
-            <div className="text-xs my-auto text-custom-text-100 font-semibold">{currentWorkspace?.name}</div>
+            <div className="text-11 my-auto text-primary 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>
+        <div className="text-primary font-semibold text-20">{t("settings")}</div>
         {/* Actions */}
         <SettingsTabs />
       </div>
diff --git a/apps/web/core/components/settings/heading.tsx b/apps/web/core/components/settings/heading.tsx
index 9ab0315f9d..9f8949ee5a 100644
--- a/apps/web/core/components/settings/heading.tsx
+++ b/apps/web/core/components/settings/heading.tsx
@@ -14,7 +14,7 @@ type Props = {
   className?: string;
 };
 
-export const SettingsHeading = ({
+export function SettingsHeading({
   title,
   description,
   button,
@@ -22,25 +22,27 @@ export const SettingsHeading = ({
   customButton,
   showButton = true,
   className,
-}: Props) => (
-  <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="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>}
+}: Props) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col md:flex-row gap-2 items-start md:items-center justify-between border-b border-subtle pb-3.5",
+        className
+      )}
+    >
+      <div className="flex flex-col items-start gap-1">
+        {typeof title === "string" ? <h3 className="text-18 font-medium">{title}</h3> : title}
+        {description && <div className="text-13 text-tertiary">{description}</div>}
+      </div>
+      {showButton && customButton}
+      {button && showButton && (
+        <Button variant="primary" size="lg" onClick={button.onClick} className="w-fit">
+          {button.label}
+        </Button>
+      )}
+      {appendToRight}
     </div>
-    {showButton && customButton}
-    {button && showButton && (
-      <Button variant="primary" onClick={button.onClick} size="sm" className="w-fit">
-        {button.label}
-      </Button>
-    )}
-    {appendToRight}
-  </div>
-);
+  );
+}
 
 export default SettingsHeading;
diff --git a/apps/web/core/components/settings/layout.tsx b/apps/web/core/components/settings/layout.tsx
index ff2b567af1..43923e0dfd 100644
--- a/apps/web/core/components/settings/layout.tsx
+++ b/apps/web/core/components/settings/layout.tsx
@@ -1,7 +1,11 @@
 import { useRef } from "react";
 import { observer } from "mobx-react";
 
-export const SettingsContentLayout = observer(({ children }: { children: React.ReactNode }) => {
+export const SettingsContentLayout = observer(function SettingsContentLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   // refs
   const ref = useRef<HTMLDivElement>(null);
 
diff --git a/apps/web/core/components/settings/mobile/nav.tsx b/apps/web/core/components/settings/mobile/nav.tsx
index d2668e0d8f..ea5871eca3 100644
--- a/apps/web/core/components/settings/mobile/nav.tsx
+++ b/apps/web/core/components/settings/mobile/nav.tsx
@@ -11,7 +11,7 @@ type Props = {
   activePath: string;
 };
 
-export const SettingsMobileNav = observer((props: Props) => {
+export const SettingsMobileNav = observer(function SettingsMobileNav(props: Props) {
   const { hamburgerContent: HamburgerContent, activePath } = props;
   // refs
   const sidebarRef = useRef<HTMLDivElement>(null);
@@ -25,21 +25,21 @@ export const SettingsMobileNav = observer((props: Props) => {
 
   return (
     <div className="md:hidden">
-      <div className="border-b border-custom-border-100 py-3 flex items-center gap-4">
+      <div className="border-b border-subtle 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"
+            className="z-50  group flex-shrink-0 size-6 grid place-items-center rounded-sm border border-subtle transition-all md:hidden"
             onClick={() => toggleSidebar()}
           >
-            <Menu className="size-3.5 text-custom-text-200 transition-all group-hover:text-custom-text-100" />
+            <Menu className="size-3.5 text-secondary transition-all group-hover:text-primary" />
           </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>
+          <ChevronRightIcon className="size-4 text-tertiary" />
+          <span className="text-13 font-medium text-secondary">{t(activePath)}</span>
         </div>
       </div>
     </div>
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
index 0812b88714..5c79d9241d 100644
--- a/apps/web/core/components/settings/project/sidebar/nav-item-children.tsx
+++ b/apps/web/core/components/settings/project/sidebar/nav-item-children.tsx
@@ -11,7 +11,7 @@ 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((props: { projectId: string }) => {
+export const NavItemChildren = observer(function NavItemChildren(props: { projectId: string }) {
   const { projectId } = props;
   const { workspaceSlug } = useParams();
   const pathname = usePathname();
@@ -58,13 +58,12 @@ export const NavItemChildren = observer((props: { projectId: string }) => {
                 >
                   <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",
+                      "cursor-pointer relative group w-full flex items-center justify-between text-secondary gap-1.5 rounded-sm 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,
+                        "bg-layer-transparent-active hover:bg-layer-transparent-active": isActive,
+                        "hover:bg-layer-transparent-hover": !isActive,
                       },
-                      "text-xs font-medium"
+                      "text-11 font-medium"
                     )}
                   >
                     {t(getProjectSettingsPageLabelI18nKey(link.key, link.i18n_label))}
diff --git a/apps/web/core/components/settings/project/sidebar/root.tsx b/apps/web/core/components/settings/project/sidebar/root.tsx
index 51c9ea4a10..4a51f55baa 100644
--- a/apps/web/core/components/settings/project/sidebar/root.tsx
+++ b/apps/web/core/components/settings/project/sidebar/root.tsx
@@ -15,7 +15,7 @@ type TProjectSettingsSidebarProps = {
   isMobile?: boolean;
 };
 
-export const ProjectSettingsSidebar = observer((props: TProjectSettingsSidebarProps) => {
+export const ProjectSettingsSidebar = observer(function ProjectSettingsSidebar(props: TProjectSettingsSidebarProps) {
   const { isMobile = false } = props;
   const { workspaceSlug } = useParams();
   // store hooks
@@ -40,7 +40,7 @@ export const ProjectSettingsSidebar = observer((props: TProjectSettingsSidebarPr
       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">
+          <div className="text-11 font-medium text-secondary capitalize rounded-md px-1 py-0.5">
             {role ? getUserRole(role)?.toLowerCase() : "Guest"}
           </div>
         );
diff --git a/apps/web/core/components/settings/sidebar/header.tsx b/apps/web/core/components/settings/sidebar/header.tsx
index 12db096a4d..ca5881f6fa 100644
--- a/apps/web/core/components/settings/sidebar/header.tsx
+++ b/apps/web/core/components/settings/sidebar/header.tsx
@@ -8,7 +8,9 @@ import { useWorkspace } from "@/hooks/store/use-workspace";
 // plane web imports
 import { SubscriptionPill } from "@/plane-web/components/common/subscription/subscription-pill";
 
-export const SettingsSidebarHeader = observer((props: { customHeader?: React.ReactNode }) => {
+export const SettingsSidebarHeader = observer(function SettingsSidebarHeader(props: {
+  customHeader?: React.ReactNode;
+}) {
   const { customHeader } = props;
   const { currentWorkspace } = useWorkspace();
   return customHeader
@@ -19,13 +21,13 @@ export const SettingsSidebarHeader = observer((props: { customHeader?: React.Rea
             <WorkspaceLogo
               logo={currentWorkspace.logo_url ?? ""}
               name={currentWorkspace.name ?? ""}
-              classNames="size-8 border border-custom-border-200"
+              classNames="size-8 border border-subtle"
             />
             <div className="w-full overflow-hidden">
-              <div className="text-base font-medium text-custom-text-200 truncate text-ellipsis ">
+              <div className="text-14 font-medium text-secondary truncate text-ellipsis ">
                 {currentWorkspace.name ?? "Workspace"}
               </div>
-              <div className="text-sm text-custom-text-300 capitalize">
+              <div className="text-13 text-tertiary capitalize">
                 {getUserRole(currentWorkspace.role)?.toLowerCase() || "guest"}
               </div>
             </div>
diff --git a/apps/web/core/components/settings/sidebar/nav-item.tsx b/apps/web/core/components/settings/sidebar/nav-item.tsx
index 3fc56e63f1..0bdf797dcb 100644
--- a/apps/web/core/components/settings/sidebar/nav-item.tsx
+++ b/apps/web/core/components/settings/sidebar/nav-item.tsx
@@ -26,7 +26,7 @@ export type TSettingsSidebarNavItemProps = {
   renderChildren?: (key: string) => React.ReactNode;
 };
 
-const SettingsSidebarNavItem = observer((props: TSettingsSidebarNavItemProps) => {
+const SettingsSidebarNavItem = observer(function SettingsSidebarNavItem(props: TSettingsSidebarNavItemProps) {
   const { workspaceSlug, setting, isActive, actionIcons, appendItemsToTitle, renderChildren } = props;
   // router
   const { projectId } = useParams();
@@ -37,15 +37,11 @@ const SettingsSidebarNavItem = observer((props: TSettingsSidebarNavItemProps) =>
   // 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 isItemActive = typeof isActive === "function" ? isActive(setting) : isActive;
+  const buttonClass = cn("flex w-full items-center px-2 py-1.5 rounded-sm text-secondary justify-between", {
+    "bg-layer-transparent-active hover:bg-layer-transparent-active": isItemActive,
+    "hover:bg-layer-transparent-hover": !isItemActive,
+  });
 
   const titleElement = (
     <>
@@ -53,7 +49,7 @@ const SettingsSidebarNavItem = observer((props: TSettingsSidebarNavItemProps) =>
         {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 className="text-13 font-medium truncate">{t(setting.i18n_label)}</div>
       </div>
       {appendItemsToTitle?.(setting.key)}
     </>
@@ -65,7 +61,7 @@ const SettingsSidebarNavItem = observer((props: TSettingsSidebarNavItemProps) =>
         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"
+          "group w-full flex items-center gap-1 whitespace-nowrap text-left text-13 font-semibold text-placeholder"
         )}
         onClick={() => setIsExpanded(!isExpanded)}
       >
@@ -84,7 +80,7 @@ const SettingsSidebarNavItem = observer((props: TSettingsSidebarNavItemProps) =>
       {/* 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" />
+          <div className="absolute left-[15px] top-0 bottom-1 w-px bg-subtle-1" />
           {renderChildren?.(setting.key)}
         </Disclosure.Panel>
       )}
diff --git a/apps/web/core/components/settings/sidebar/root.tsx b/apps/web/core/components/settings/sidebar/root.tsx
index 9f243746ce..74433a69cb 100644
--- a/apps/web/core/components/settings/sidebar/root.tsx
+++ b/apps/web/core/components/settings/sidebar/root.tsx
@@ -20,7 +20,7 @@ interface SettingsSidebarProps {
   renderChildren?: (key: string) => React.ReactNode;
 }
 
-export const SettingsSidebar = observer((props: SettingsSidebarProps) => {
+export const SettingsSidebar = observer(function SettingsSidebar(props: SettingsSidebarProps) {
   const {
     isMobile = false,
     customHeader,
@@ -39,19 +39,19 @@ export const SettingsSidebar = observer((props: SettingsSidebarProps) => {
   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":
+        "absolute left-0 top-[42px] z-50 h-fit max-h-[400px] overflow-scroll bg-surface-1 border border-subtle rounded-sm 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">
+      <div className="divide-y divide-subtle 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>
+              <span className="text-13 font-semibold text-tertiary 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) =>
diff --git a/apps/web/core/components/settings/tabs.tsx b/apps/web/core/components/settings/tabs.tsx
index 33ac26a763..eac70d34af 100644
--- a/apps/web/core/components/settings/tabs.tsx
+++ b/apps/web/core/components/settings/tabs.tsx
@@ -22,7 +22,7 @@ const TABS = {
   },
 };
 
-const SettingsTabs = observer(() => {
+const SettingsTabs = observer(function SettingsTabs() {
   // router
   const pathname = usePathname();
   const { workspaceSlug } = useParams();
@@ -36,7 +36,7 @@ const SettingsTabs = observer(() => {
       : 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">
+    <div className="flex w-fit min-w-fit items-center justify-between gap-1.5 rounded-md text-13 p-0.5 bg-layer-2">
       {Object.values(TABS).map((tab) => {
         const isActive = currentTab?.key === tab.key;
         const href = tab.key === TABS.projects.key ? `${tab.href}${joinedProjectIds[0] || ""}` : tab.href;
@@ -45,14 +45,14 @@ const SettingsTabs = observer(() => {
             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 ",
+              "flex items-center justify-center p-1 min-w-fit w-full font-medium outline-none focus:outline-none cursor-pointer transition-all rounded-sm text-secondary ",
               {
-                "bg-custom-background-100 text-custom-text-100 shadow-sm": isActive,
-                "hover:text-custom-text-100 hover:bg-custom-background-80/60": !isActive,
+                "bg-layer-transparent-active text-primary shadow-sm": isActive,
+                "hover:text-primary hover:bg-layer-transparent-hover": !isActive,
               }
             )}
           >
-            <div className="text-xs font-semibold p-1">{tab.label}</div>
+            <div className="text-11 font-semibold p-1">{tab.label}</div>
           </Link>
         );
       })}
diff --git a/apps/web/core/components/sidebar/add-button.tsx b/apps/web/core/components/sidebar/add-button.tsx
index cea37334f8..1e092ff182 100644
--- a/apps/web/core/components/sidebar/add-button.tsx
+++ b/apps/web/core/components/sidebar/add-button.tsx
@@ -1,5 +1,4 @@
-import type { FC } from "react";
-import React from "react";
+import { Button } from "@plane/propel/button";
 import { cn } from "@plane/utils";
 
 type Props = React.ComponentProps<"button"> & {
@@ -7,20 +6,18 @@ type Props = React.ComponentProps<"button"> & {
   onClick: () => void;
 };
 
-export const SidebarAddButton: FC<Props> = (props) => {
+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 e3ea4384d7..fac0a1107f 100644
--- a/apps/web/core/components/sidebar/resizable-sidebar.tsx
+++ b/apps/web/core/components/sidebar/resizable-sidebar.tsx
@@ -1,8 +1,7 @@
-"use client";
-
 import type { Dispatch, ReactElement, SetStateAction } from "react";
 import React, { useCallback, useEffect, useState, useRef } from "react";
 // helpers
+import { usePlatformOS } from "@plane/hooks";
 import { cn } from "@plane/utils";
 
 interface ResizableSidebarProps {
@@ -24,7 +23,6 @@ interface ResizableSidebarProps {
   extendedSidebar?: ReactElement;
   isAnyExtendedSidebarExpanded?: boolean;
   isAnySidebarDropdownOpen?: boolean;
-  disablePeekTrigger?: boolean;
 }
 
 export function ResizableSidebar({
@@ -44,7 +42,6 @@ export function ResizableSidebar({
   extendedSidebar,
   isAnyExtendedSidebarExpanded = false,
   isAnySidebarDropdownOpen = false,
-  disablePeekTrigger = false,
 }: ResizableSidebarProps) {
   // states
   const [isResizing, setIsResizing] = useState(false);
@@ -53,7 +50,8 @@ export function ResizableSidebar({
   const peekTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
   const initialWidthRef = useRef<number>(0);
   const initialMouseXRef = useRef<number>(0);
-
+  // hooks
+  const { isMobile } = usePlatformOS();
   // handlers
   const setShowPeek = useCallback(
     (value: boolean) => {
@@ -95,25 +93,6 @@ export function ResizableSidebar({
     }
   }, [toggleCollapsedProp, setShowPeek]);
 
-  const handleTriggerEnter = useCallback(() => {
-    if (isCollapsed) {
-      setIsHoveringTrigger(true);
-      setShowPeek(true);
-      if (peekTimeoutRef.current) {
-        clearTimeout(peekTimeoutRef.current);
-      }
-    }
-  }, [isCollapsed, setShowPeek]);
-
-  const handleTriggerLeave = useCallback(() => {
-    if (isCollapsed && !isAnyExtendedSidebarExpanded) {
-      setIsHoveringTrigger(false);
-      peekTimeoutRef.current = setTimeout(() => {
-        setShowPeek(false);
-      }, peekDuration);
-    }
-  }, [isCollapsed, peekDuration, setShowPeek, isAnyExtendedSidebarExpanded]);
-
   const handlePeekEnter = useCallback(() => {
     if (isCollapsed && showPeek) {
       if (peekTimeoutRef.current) {
@@ -194,9 +173,10 @@ export function ResizableSidebar({
       {/* Main Sidebar */}
       <div
         className={cn(
-          "h-full z-20 bg-custom-background-100 border-r border-custom-sidebar-border-200",
+          "h-full z-20 bg-surface-1 border-r border-subtle",
           !isResizing && "transition-all duration-300 ease-in-out",
           isCollapsed ? "translate-x-[-100%] opacity-0 w-0" : "translate-x-0 opacity-100",
+          isMobile && "absolute",
           className
         )}
         style={{
@@ -209,7 +189,7 @@ export function ResizableSidebar({
       >
         <aside
           className={cn(
-            "group/sidebar h-full w-full bg-custom-sidebar-background-100 overflow-hidden relative flex flex-col pt-3",
+            "group/sidebar h-full w-full bg-surface-1 overflow-hidden relative flex flex-col pt-3",
             isAnyExtendedSidebarExpanded && "rounded-none"
           )}
         >
@@ -219,8 +199,8 @@ export function ResizableSidebar({
           <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",
+              !isResizing && "hover:bg-surface-2",
+              isResizing && "w-1.5 bg-layer-1",
               "top-0 right-0"
             )}
             // onDoubleClick toggle sidebar
@@ -231,26 +211,10 @@ export function ResizableSidebar({
           />
         </aside>
       </div>
-
-      {/* Peek Trigger Area */}
-      {isCollapsed && !disablePeekTrigger && (
-        <div
-          className={cn(
-            "absolute top-0 left-0 w-1 h-full z-50 bg-transparent",
-            "transition-opacity duration-200",
-            isHoveringTrigger ? "opacity-100" : "opacity-0"
-          )}
-          onMouseEnter={handleTriggerEnter}
-          onMouseLeave={handleTriggerLeave}
-          role="button"
-          aria-label="Show sidebar peek"
-        />
-      )}
-
       {/* Peek View */}
       <div
         className={cn(
-          "absolute left-0 z-20 bg-custom-background-100 shadow-sm h-full",
+          "absolute left-0 z-20 bg-surface-1 shadow-sm h-full",
           !isResizing && "transition-all duration-300 ease-in-out",
           isCollapsed && showPeek ? "translate-x-0 opacity-100" : "translate-x-[-100%] opacity-0",
           "pointer-events-none",
@@ -267,8 +231,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 h-full w-full bg-surface-1 overflow-hidden relative flex flex-col z-20 pt-4",
+            "self-center border-r border-subtle rounded-md rounded-tl-none rounded-bl-none",
             isAnyExtendedSidebarExpanded && "rounded-none"
           )}
         >
@@ -277,8 +241,8 @@ export function ResizableSidebar({
           <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",
+              !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 d87adf84b7..f02d390c62 100644
--- a/apps/web/core/components/sidebar/search-button.tsx
+++ b/apps/web/core/components/sidebar/search-button.tsx
@@ -1,5 +1,3 @@
-import type { FC } from "react";
-import React from "react";
 import { Search } from "lucide-react";
 import { cn } from "@plane/utils";
 
@@ -7,22 +5,22 @@ type Props = {
   isActive?: boolean;
 };
 
-export const SidebarSearchButton: FC<Props> = (props) => {
+export function SidebarSearchButton(props: Props) {
   const { isActive } = 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",
+        "flex-shrink-0 size-8 aspect-square grid place-items-center rounded-md shadow-sm hover:bg-surface-2 outline-none border-[0.5px] border-strong",
         {
-          "bg-custom-primary-100/10 hover:bg-custom-primary-100/10 border-custom-primary-200": isActive,
+          "bg-accent-primary/10 hover:bg-accent-primary/10 border-accent-strong-200": isActive,
         }
       )}
     >
       <Search
-        className={cn("size-4 text-custom-sidebar-text-300", {
-          "text-custom-primary-200": isActive,
+        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 48d0b0ccff..7e407bf5e1 100644
--- a/apps/web/core/components/sidebar/sidebar-item.tsx
+++ b/apps/web/core/components/sidebar/sidebar-item.tsx
@@ -12,6 +12,7 @@ interface AppSidebarItemData {
   isActive?: boolean;
   onClick?: () => void;
   disabled?: boolean;
+  showLabel?: boolean;
 }
 
 interface AppSidebarItemProps {
@@ -47,20 +48,20 @@ 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-semibold",
-  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;
 
 // ============================================================================
 // SUB-COMPONENTS
 // ============================================================================
 
-const AppSidebarItemLabel: React.FC<AppSidebarItemLabelProps> = ({ highlight = false, label }) => {
+function AppSidebarItemLabel({ highlight = false, label }: AppSidebarItemLabelProps) {
   if (!label) return null;
 
   return (
@@ -73,9 +74,9 @@ const AppSidebarItemLabel: React.FC<AppSidebarItemLabelProps> = ({ highlight = f
       {label}
     </span>
   );
-};
+}
 
-const AppSidebarItemIcon: React.FC<AppSidebarItemIconProps> = ({ icon, highlight }) => {
+function AppSidebarItemIcon({ icon, highlight }: AppSidebarItemIconProps) {
   if (!icon) return null;
 
   return (
@@ -88,9 +89,9 @@ const AppSidebarItemIcon: React.FC<AppSidebarItemIconProps> = ({ icon, highlight
       {icon}
     </div>
   );
-};
+}
 
-const AppSidebarLinkItem: React.FC<AppSidebarLinkItemProps> = ({ href, children, className }) => {
+function AppSidebarLinkItem({ href, children, className }: AppSidebarLinkItemProps) {
   if (!href) return null;
 
   return (
@@ -98,39 +99,36 @@ const AppSidebarLinkItem: React.FC<AppSidebarLinkItemProps> = ({ href, children,
       {children}
     </Link>
   );
-};
+}
 
-const AppSidebarButtonItem: React.FC<AppSidebarButtonItemProps> = ({
-  children,
-  onClick,
-  disabled = false,
-  className,
-}) => (
-  <button className={cn(styles.base, className)} onClick={onClick} disabled={disabled} type="button">
-    {children}
-  </button>
-);
+function AppSidebarButtonItem({ children, onClick, disabled = false, className }: AppSidebarButtonItemProps) {
+  return (
+    <button className={cn(styles.base, className)} onClick={onClick} disabled={disabled} type="button">
+      {children}
+    </button>
+  );
+}
 
 // ============================================================================
 // MAIN COMPONENT
 // ============================================================================
 
-type AppSidebarItemComponent = React.FC<AppSidebarItemProps> & {
+export type AppSidebarItemComponent = React.FC<AppSidebarItemProps> & {
   Label: React.FC<AppSidebarItemLabelProps>;
   Icon: React.FC<AppSidebarItemIconProps>;
   Link: React.FC<AppSidebarLinkItemProps>;
   Button: React.FC<AppSidebarButtonItemProps>;
 };
 
-const AppSidebarItem: AppSidebarItemComponent = ({ variant = "link", item }) => {
+function AppSidebarItem({ variant = "link", item }: AppSidebarItemProps) {
   if (!item) return null;
 
-  const { icon, isActive, label, href, onClick, disabled } = item;
+  const { icon, isActive, label, href, onClick, disabled, showLabel = true } = item;
 
   const commonItems = (
     <>
       <AppSidebarItemIcon icon={icon} highlight={isActive} />
-      <AppSidebarItemLabel highlight={isActive} label={label} />
+      {showLabel && <AppSidebarItemLabel highlight={isActive} label={label} />}
     </>
   );
 
@@ -143,7 +141,7 @@ const AppSidebarItem: AppSidebarItemComponent = ({ variant = "link", item }) =>
       {commonItems}
     </AppSidebarButtonItem>
   );
-};
+}
 
 // ============================================================================
 // COMPOUND COMPONENT ASSIGNMENT
diff --git a/apps/web/core/components/sidebar/sidebar-navigation.tsx b/apps/web/core/components/sidebar/sidebar-navigation.tsx
index ba0c08c542..27eace49ca 100644
--- a/apps/web/core/components/sidebar/sidebar-navigation.tsx
+++ b/apps/web/core/components/sidebar/sidebar-navigation.tsx
@@ -1,7 +1,3 @@
-"use client";
-import type { FC } from "react";
-import React from "react";
-// helpers
 import { cn } from "@plane/utils";
 
 type TSidebarNavItem = {
@@ -10,16 +6,15 @@ type TSidebarNavItem = {
   children?: React.ReactNode;
 };
 
-export const SidebarNavItem: FC<TSidebarNavItem> = (props) => {
+export function SidebarNavItem(props: TSidebarNavItem) {
   const { className, isActive, children } = props;
   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",
+        "cursor-pointer relative group w-full flex 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,
+          "text-primary !bg-layer-transparent-active": isActive,
+          "text-secondary hover:bg-layer-transparent-hover active:bg-layer-transparent-active": !isActive,
         },
         className
       )}
@@ -27,4 +22,4 @@ export const SidebarNavItem: FC<TSidebarNavItem> = (props) => {
       {children}
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/sidebar/sidebar-toggle-button.tsx b/apps/web/core/components/sidebar/sidebar-toggle-button.tsx
index c0b279f9c1..78f0cf4706 100644
--- a/apps/web/core/components/sidebar/sidebar-toggle-button.tsx
+++ b/apps/web/core/components/sidebar/sidebar-toggle-button.tsx
@@ -1,23 +1,24 @@
-"use client";
-
 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(() => {
+export const AppSidebarToggleButton = observer(function AppSidebarToggleButton() {
   // store hooks
   const { toggleSidebar, sidebarPeek, toggleSidebarPeek } = useAppTheme();
 
+  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 b709b607d9..c6931444a1 100644
--- a/apps/web/core/components/sidebar/sidebar-wrapper.tsx
+++ b/apps/web/core/components/sidebar/sidebar-wrapper.tsx
@@ -1,19 +1,18 @@
-import type { FC } from "react";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
+import { PreferencesIcon } from "@plane/propel/icons";
 import { ScrollArea } from "@plane/propel/scrollarea";
 // components
-import { AppSidebarToggleButton } from "@/components/sidebar/sidebar-toggle-button";
-import { SidebarDropdown } from "@/components/workspace/sidebar/dropdown";
-import { HelpMenu } from "@/components/workspace/sidebar/help-menu";
+import { CustomizeNavigationDialog } from "@/components/navigation/customize-navigation-dialog";
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
-import { useAppRail } from "@/hooks/use-app-rail";
 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;
@@ -21,11 +20,12 @@ type TSidebarWrapperProps = {
   quickActions?: React.ReactNode;
 };
 
-export const SidebarWrapper: FC<TSidebarWrapperProps> = observer((props) => {
-  const { children, title, quickActions } = props;
+export const SidebarWrapper = observer(function SidebarWrapper(props: TSidebarWrapperProps) {
+  const { title, children, quickActions } = props;
+  // state
+  const [isCustomizeNavDialogOpen, setIsCustomizeNavDialogOpen] = useState(false);
   // store hooks
   const { toggleSidebar, sidebarCollapsed } = useAppTheme();
-  const { shouldRenderAppRail, isEnabled: isAppRailEnabled } = useAppRail();
   const windowSize = useSize();
   // refs
   const ref = useRef<HTMLDivElement>(null);
@@ -42,40 +42,49 @@ export const SidebarWrapper: FC<TSidebarWrapperProps> = observer((props) => {
   }, [windowSize]);
 
   return (
-    <div ref={ref} className="flex flex-col h-full w-full">
-      <div className="flex flex-col gap-3 px-3">
-        {/* Workspace switcher and settings */}
-        {!shouldRenderAppRail && <SidebarDropdown />}
+    <>
+      <CustomizeNavigationDialog isOpen={isCustomizeNavDialogOpen} onClose={() => setIsCustomizeNavDialogOpen(false)} />
+      <div ref={ref} className="flex flex-col h-full w-full">
+        <div className="flex flex-col gap-3 px-3">
+          {/* Workspace switcher and settings */}
 
-        {isAppRailEnabled && (
-          <div className="flex items-center justify-between gap-2">
-            <span className="text-md text-custom-text-200 font-medium pt-1">{title}</span>
+          <div className="flex items-center justify-between gap-2 px-2">
+            <span className="text-16 text-primary font-medium pt-1">{title}</span>
             <div className="flex items-center gap-2">
+              {title === "Projects" && (
+                <IconButton
+                  size="base"
+                  variant="ghost"
+                  icon={PreferencesIcon}
+                  onClick={() => setIsCustomizeNavDialogOpen(true)}
+                />
+              )}
               <AppSidebarToggleButton />
             </div>
           </div>
-        )}
-        {/* Quick actions */}
-        {quickActions}
-      </div>
+          {/* Quick actions */}
+          {quickActions}
+        </div>
 
-      <ScrollArea
-        orientation="vertical"
-        scrollType="hover"
-        size="sm"
-        rootClassName="size-full overflow-x-hidden overflow-y-auto"
-        viewportClassName="flex flex-col gap-3 overflow-x-hidden h-full w-full overflow-y-auto px-3 pt-3 pb-0.5"
-      >
-        {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">
-        <WorkspaceEditionBadge />
-        <div className="flex items-center gap-2">
+        <ScrollArea
+          orientation="vertical"
+          scrollType="hover"
+          size="sm"
+          rootClassName="size-full overflow-x-hidden overflow-y-auto"
+          viewportClassName="flex flex-col gap-3 overflow-x-hidden h-full w-full overflow-y-auto px-3 pt-3 pb-0.5"
+        >
+          {children}
+        </ScrollArea>
+        {/* Help Section */}
+        <div className="flex items-center justify-between p-3 border-t border-subtle bg-surface-1 h-12">
+          <WorkspaceEditionBadge />
+          {/* TODO: To be checked if we need this */}
+          {/* <div className="flex items-center gap-2">
           {!shouldRenderAppRail && <HelpMenu />}
           {!isAppRailEnabled && <AppSidebarToggleButton />}
+        </div> */}
         </div>
       </div>
-    </div>
+    </>
   );
 });
diff --git a/apps/web/core/components/stickies/action-bar.tsx b/apps/web/core/components/stickies/action-bar.tsx
index 339a842501..5aae0f424d 100644
--- a/apps/web/core/components/stickies/action-bar.tsx
+++ b/apps/web/core/components/stickies/action-bar.tsx
@@ -18,7 +18,7 @@ import { STICKY_COLORS_LIST } from "../editor/sticky-editor/color-palette";
 import { AllStickiesModal } from "./modal";
 import { StickyNote } from "./sticky";
 
-export const StickyActionBar = observer(() => {
+export const StickyActionBar = observer(function StickyActionBar() {
   // states
   const [isExpanded, setIsExpanded] = useState(false);
   const [newSticky, setNewSticky] = useState(false);
@@ -50,17 +50,17 @@ export const StickyActionBar = observer(() => {
   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 bg-surface-2 rounded-full p-[2px] border-2 border-accent-strong/10 overflow-hidden"
     >
       <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"}`}
       >
         <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 rounded-full w-10 h-10 flex items-center justify-center shadow-sm 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 && (
@@ -86,7 +86,7 @@ export const StickyActionBar = observer(() => {
             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 rounded-full w-10 h-10 flex items-center justify-center shadow-sm bg-surface-1"
               onClick={() => setShowRecentSticky(true)}
               style={{ color: recentStickyBackgroundColor }}
             >
@@ -96,26 +96,26 @@ export const StickyActionBar = observer(() => {
         )}
         <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 rounded-full w-10 h-10 flex items-center justify-center shadow-sm bg-surface-1"
             onClick={() => {
               updateActiveStickyId("");
               toggleShowNewSticky(true);
               setNewSticky(true);
             }}
           >
-            <Plus className="size-5 rotate-90 text-custom-text-350" />
+            <Plus 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 rounded-full w-10 h-10 flex items-center justify-center shadow-sm 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>
 
diff --git a/apps/web/core/components/stickies/delete-modal.tsx b/apps/web/core/components/stickies/delete-modal.tsx
index 82455186f1..a29d16eead 100644
--- a/apps/web/core/components/stickies/delete-modal.tsx
+++ b/apps/web/core/components/stickies/delete-modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 // ui
@@ -13,7 +11,7 @@ interface IStickyDelete {
   handleClose: () => void;
 }
 
-export const StickyDeleteModal: React.FC<IStickyDelete> = observer((props) => {
+export const StickyDeleteModal = observer(function StickyDeleteModal(props: IStickyDelete) {
   const { isOpen, handleClose, handleSubmit } = props;
   // states
   const [loader, setLoader] = useState(false);
diff --git a/apps/web/core/components/stickies/layout/stickies-infinite.tsx b/apps/web/core/components/stickies/layout/stickies-infinite.tsx
index a81cb44766..e52e920cda 100644
--- a/apps/web/core/components/stickies/layout/stickies-infinite.tsx
+++ b/apps/web/core/components/stickies/layout/stickies-infinite.tsx
@@ -9,7 +9,7 @@ import { useIntersectionObserver } from "@/hooks/use-intersection-observer";
 import { useSticky } from "@/hooks/use-stickies";
 import { StickiesLayout } from "./stickies-list";
 
-export const StickiesInfinite = observer(() => {
+export const StickiesInfinite = observer(function StickiesInfinite() {
   const { workspaceSlug } = useParams();
   // hooks
   const { fetchWorkspaceStickies, fetchNextWorkspaceStickies, getWorkspaceStickyIds, loader, paginationInfo } =
@@ -48,7 +48,7 @@ export const StickiesInfinite = observer(() => {
               ref={setElementRef}
               id="intersection-element"
             >
-              <div className="flex w-full rounded min-h-[300px]">
+              <div className="flex w-full rounded-sm min-h-[300px]">
                 <Loader className="w-full h-full">
                   <Loader.Item height="100%" width="100%" />
                 </Loader>
diff --git a/apps/web/core/components/stickies/layout/stickies-list.tsx b/apps/web/core/components/stickies/layout/stickies-list.tsx
index beab782f28..aa77dcec73 100644
--- a/apps/web/core/components/stickies/layout/stickies-list.tsx
+++ b/apps/web/core/components/stickies/layout/stickies-list.tsx
@@ -40,7 +40,7 @@ type TProps = TStickiesLayout & {
   columnCount: number;
 };
 
-export const StickiesList = observer((props: TProps) => {
+export const StickiesList = observer(function StickiesList(props: TProps) {
   const { workspaceSlug, intersectionElement, columnCount } = props;
   // navigation
   const pathname = usePathname();
@@ -166,7 +166,7 @@ export const StickiesList = observer((props: TProps) => {
   );
 });
 
-export const StickiesLayout = (props: TStickiesLayout) => {
+export function StickiesLayout(props: TStickiesLayout) {
   // states
   const [containerWidth, setContainerWidth] = useState<number | null>(null);
   // refs
@@ -203,4 +203,4 @@ export const StickiesLayout = (props: TStickiesLayout) => {
       <StickiesList {...props} columnCount={columnCount} />
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/stickies/layout/stickies-loader.tsx b/apps/web/core/components/stickies/layout/stickies-loader.tsx
index 2afe5ff128..6da65603cd 100644
--- a/apps/web/core/components/stickies/layout/stickies-loader.tsx
+++ b/apps/web/core/components/stickies/layout/stickies-loader.tsx
@@ -1,45 +1,47 @@
 // plane ui
 import { Loader } from "@plane/ui";
 
-export const StickiesLoader = () => (
-  <div className="overflow-scroll pb-2 grid grid-cols-4 gap-4">
-    {Array.from({ length: 4 }).map((_, index) => (
-      <Loader key={index} className="space-y-5 border border-custom-border-200 p-3 rounded">
-        <div className="space-y-2">
-          <Loader.Item height="20px" />
-          <Loader.Item height="15px" width="75%" />
-        </div>
-        <div className="space-y-2">
-          <div className="flex items-center gap-2">
-            <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
-            <Loader.Item height="15px" width="100%" />
-          </div>
-          <div className="flex items-center gap-2">
-            <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
+export function StickiesLoader() {
+  return (
+    <div className="overflow-scroll pb-2 grid grid-cols-4 gap-4">
+      {Array.from({ length: 4 }).map((_, index) => (
+        <Loader key={index} className="space-y-5 border border-subtle p-3 rounded-sm">
+          <div className="space-y-2">
+            <Loader.Item height="20px" />
             <Loader.Item height="15px" width="75%" />
           </div>
-          <div className="flex items-center gap-2">
-            <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
-            <Loader.Item height="15px" width="90%" />
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
+              <Loader.Item height="15px" width="100%" />
+            </div>
+            <div className="flex items-center gap-2">
+              <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
+              <Loader.Item height="15px" width="75%" />
+            </div>
+            <div className="flex items-center gap-2">
+              <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
+              <Loader.Item height="15px" width="90%" />
+            </div>
+            <div className="flex items-center gap-2">
+              <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
+              <Loader.Item height="15px" width="60%" />
+            </div>
+            <div className="flex items-center gap-2">
+              <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
+              <Loader.Item height="15px" width="50%" />
+            </div>
           </div>
-          <div className="flex items-center gap-2">
-            <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
-            <Loader.Item height="15px" width="60%" />
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex items-center gap-2">
+              <Loader.Item height="25px" width="25px" />
+              <Loader.Item height="25px" width="25px" />
+              <Loader.Item height="25px" width="25px" />
+            </div>
+            <Loader.Item height="25px" width="25px" className="flex-shrink-0" />
           </div>
-          <div className="flex items-center gap-2">
-            <Loader.Item height="15px" width="15px" className="flex-shrink-0" />
-            <Loader.Item height="15px" width="50%" />
-          </div>
-        </div>
-        <div className="flex items-center justify-between gap-2">
-          <div className="flex items-center gap-2">
-            <Loader.Item height="25px" width="25px" />
-            <Loader.Item height="25px" width="25px" />
-            <Loader.Item height="25px" width="25px" />
-          </div>
-          <Loader.Item height="25px" width="25px" className="flex-shrink-0" />
-        </div>
-      </Loader>
-    ))}
-  </div>
-);
+        </Loader>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/stickies/layout/stickies-truncated.tsx b/apps/web/core/components/stickies/layout/stickies-truncated.tsx
index c163d7d322..8343239361 100644
--- a/apps/web/core/components/stickies/layout/stickies-truncated.tsx
+++ b/apps/web/core/components/stickies/layout/stickies-truncated.tsx
@@ -15,7 +15,7 @@ type StickiesTruncatedProps = {
   handleClose?: () => void;
 };
 
-export const StickiesTruncated = observer((props: StickiesTruncatedProps) => {
+export const StickiesTruncated = observer(function StickiesTruncated(props: StickiesTruncatedProps) {
   const { handleClose = () => {} } = props;
   // navigation
   const { workspaceSlug } = useParams();
@@ -38,7 +38,7 @@ export const StickiesTruncated = observer((props: StickiesTruncatedProps) => {
         <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"
+            "gap-1 w-full text-accent-primary text-13 font-medium transition-opacity duration-300 bg-surface-2/20"
           )}
           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 76e2ab3aba..8faaf70d4c 100644
--- a/apps/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx
+++ b/apps/web/core/components/stickies/layout/sticky-dnd-wrapper.tsx
@@ -14,8 +14,6 @@ import { usePathname } from "next/navigation";
 import { createRoot } from "react-dom/client";
 // plane types
 import type { InstructionType } from "@plane/types";
-// plane ui
-import { DropIndicator } from "@plane/ui";
 // components
 import { StickyNote } from "../sticky";
 // helpers
@@ -32,12 +30,11 @@ type Props = {
   handleLayout: () => void;
 };
 
-export const StickyDNDWrapper = observer((props: Props) => {
-  const { stickyId, workspaceSlug, itemWidth, isLastChild, isInFirstRow, isInLastRow, handleDrop, handleLayout } =
-    props;
+export const StickyDNDWrapper = observer(function StickyDNDWrapper(props: Props) {
+  const { stickyId, workspaceSlug, itemWidth, isLastChild, handleDrop, handleLayout } = props;
   // states
   const [isDragging, setIsDragging] = useState(false);
-  const [instruction, setInstruction] = useState<InstructionType | undefined>(undefined);
+  const [_instruction, setInstruction] = useState<InstructionType | undefined>(undefined);
   // refs
   const elementRef = useRef<HTMLDivElement>(null);
   // navigation
diff --git a/apps/web/core/components/stickies/modal/index.tsx b/apps/web/core/components/stickies/modal/index.tsx
index 8a91bd113c..dbc824211c 100644
--- a/apps/web/core/components/stickies/modal/index.tsx
+++ b/apps/web/core/components/stickies/modal/index.tsx
@@ -5,11 +5,11 @@ type TProps = {
   isOpen: boolean;
   handleClose: () => void;
 };
-export const AllStickiesModal = (props: TProps) => {
+export function AllStickiesModal(props: TProps) {
   const { isOpen, handleClose } = props;
   return (
     <ModalCore isOpen={isOpen} handleClose={handleClose} width={EModalWidth.VXL}>
       <Stickies handleClose={handleClose} />
     </ModalCore>
   );
-};
+}
diff --git a/apps/web/core/components/stickies/modal/search.tsx b/apps/web/core/components/stickies/modal/search.tsx
index f0ec79b4a6..752091b340 100644
--- a/apps/web/core/components/stickies/modal/search.tsx
+++ b/apps/web/core/components/stickies/modal/search.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useCallback, useRef, useState } from "react";
 import { debounce } from "lodash-es";
 import { observer } from "mobx-react";
@@ -13,8 +10,9 @@ import { useTranslation } from "@plane/i18n";
 import { 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: FC = observer(() => {
+export const StickySearch = observer(function StickySearch() {
   // router
   const { workspaceSlug } = useParams();
   // hooks
@@ -52,29 +50,29 @@ export const StickySearch: FC = observer(() => {
   return (
     <div className="flex items-center mr-2 my-auto">
       {!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={Search}
           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 items-center justify-start gap-1 rounded-md border border-transparent text-placeholder w-0 transition-[width] ease-linear overflow-hidden opacity-0",
           {
-            "w-30 md:w-64 px-2.5 py-1.5 border-custom-border-200 opacity-100": isSearchOpen,
+            "w-30 md:w-64 px-2.5 py-1.5 border-subtle opacity-100": isSearchOpen,
           }
         )}
       >
-        <Search className="h-3.5 w-3.5" />
+        <Search className="shrink-0 size-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("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 b3e6dd4e67..7081d00df4 100644
--- a/apps/web/core/components/stickies/modal/stickies.tsx
+++ b/apps/web/core/components/stickies/modal/stickies.tsx
@@ -14,7 +14,7 @@ type TProps = {
   handleClose?: () => void;
 };
 
-export const Stickies = observer((props: TProps) => {
+export const Stickies = observer(function Stickies(props: TProps) {
   const { handleClose } = props;
   // navigation
   const { workspaceSlug } = useParams();
@@ -28,9 +28,9 @@ export const Stickies = observer((props: TProps) => {
       {/* header */}
       <div className="flex items-center justify-between mb-6">
         {/* Title */}
-        <div className="text-custom-text-200 flex items-center gap-2">
+        <div className="text-secondary flex items-center gap-2">
           <RecentStickyIcon className="size-5 rotate-90 flex-shrink-0" />
-          <p className="text-xl font-medium">Your stickies</p>
+          <p className="text-18 font-medium">Your stickies</p>
         </div>
         {/* actions */}
         <div className="flex gap-2">
@@ -40,14 +40,14 @@ export const Stickies = observer((props: TProps) => {
               toggleShowNewSticky(true);
               stickyOperations.create();
             }}
-            className="flex gap-1 text-sm font-medium text-custom-primary-100 my-auto"
+            className="flex gap-1 text-13 font-medium text-accent-primary my-auto"
             disabled={creatingSticky}
           >
             <Plus className="size-4 my-auto" /> <span>Add sticky</span>
             {creatingSticky && (
               <div className="flex items-center justify-center ml-2">
                 <div
-                  className={`w-4 h-4 border-2 border-t-transparent rounded-full animate-spin border-custom-primary-100`}
+                  className={`w-4 h-4 border-2 border-t-transparent rounded-full animate-spin border-accent-strong`}
                   role="status"
                   aria-label="loading"
                 />
@@ -58,9 +58,9 @@ export const Stickies = observer((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="flex-shrink-0 grid place-items-center text-tertiary hover:text-primary hover:bg-layer-1 rounded-sm p-1 transition-colors my-auto"
             >
-              <CloseIcon className="text-custom-text-400 size-4" />
+              <CloseIcon className="text-placeholder size-4" />
             </button>
           )}
         </div>
diff --git a/apps/web/core/components/stickies/sticky/inputs.tsx b/apps/web/core/components/stickies/sticky/inputs.tsx
index 068a9aa4f0..acc393ff39 100644
--- a/apps/web/core/components/stickies/sticky/inputs.tsx
+++ b/apps/web/core/components/stickies/sticky/inputs.tsx
@@ -23,7 +23,7 @@ type TProps = {
   handleDelete: () => void;
 };
 
-export const StickyInput = (props: TProps) => {
+export function StickyInput(props: TProps) {
   const { stickyData, workspaceSlug, handleUpdate, stickyId, handleDelete, handleChange, showToolbar } = props;
   // refs
   const editorRef = useRef<EditorRefApi>(null);
@@ -80,12 +80,13 @@ export const 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",
+              "w-full min-h-[256px] max-h-[540px] overflow-y-scroll vertical-scrollbar scrollbar-sm p-4 text-14",
               {
                 "max-h-[588px]": isStickiesPage,
               }
             )}
             uploadFile={async () => ""}
+            duplicateFile={async () => ""}
             showToolbar={showToolbar}
             parentClassName="border-none p-0"
             handleDelete={handleDelete}
@@ -96,4 +97,4 @@ export const StickyInput = (props: TProps) => {
       />
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/stickies/sticky/root.tsx b/apps/web/core/components/stickies/sticky/root.tsx
index b6af634cc0..6f9c126e2c 100644
--- a/apps/web/core/components/stickies/sticky/root.tsx
+++ b/apps/web/core/components/stickies/sticky/root.tsx
@@ -22,7 +22,7 @@ type TProps = {
   showToolbar?: boolean;
   handleLayout?: () => void;
 };
-export const StickyNote = observer((props: TProps) => {
+export const StickyNote = observer(function StickyNote(props: TProps) {
   const { onClose, workspaceSlug, className = "", stickyId, showToolbar, handleLayout } = props;
   // navigation
   // const pathName = usePathname();
@@ -74,7 +74,7 @@ export const StickyNote = observer((props: TProps) => {
         handleClose={() => setIsDeleteModalOpen(false)}
       />
       <div
-        className={cn("w-full h-fit flex flex-col rounded group/sticky overflow-y-scroll", className)}
+        className={cn("w-full h-fit flex flex-col rounded-sm group/sticky overflow-y-scroll", className)}
         style={{
           backgroundColor,
         }}
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 40405dfa55..6abad84248 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,6 +1,3 @@
-"use client";
-import type { FC } from "react";
-import React from "react";
 import { observer } from "mobx-react";
 // ui
 import { DragHandle } from "@plane/ui";
@@ -11,13 +8,13 @@ type Props = {
   isDragging: boolean;
 };
 
-export const StickyItemDragHandle: FC<Props> = observer((props) => {
+export const StickyItemDragHandle = observer(function StickyItemDragHandle(props: Props) {
   const { isDragging } = 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",
+        "hidden group-hover/sticky:flex absolute top-3 left-1/2 -translate-x-1/2 items-center justify-center rounded-sm text-placeholder cursor-grab mr-2 rotate-90",
         {
           "cursor-grabbing": isDragging,
         }
diff --git a/apps/web/core/components/stickies/widget.tsx b/apps/web/core/components/stickies/widget.tsx
index 5a96ec644d..f10abb5ea8 100644
--- a/apps/web/core/components/stickies/widget.tsx
+++ b/apps/web/core/components/stickies/widget.tsx
@@ -10,7 +10,7 @@ import { StickiesTruncated } from "./layout/stickies-truncated";
 import { StickySearch } from "./modal/search";
 import { useStickyOperations } from "./sticky/use-operations";
 
-export const StickiesWidget: React.FC = observer(() => {
+export const StickiesWidget = observer(function StickiesWidget() {
   // params
   const { workspaceSlug } = useParams();
   // store hooks
@@ -24,7 +24,7 @@ export const StickiesWidget: React.FC = observer(() => {
   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="text-14 font-semibold text-tertiary">{t("stickies.title")}</div>
         {/* actions */}
         <div className="flex gap-2">
           <StickySearch />
@@ -33,14 +33,14 @@ export const StickiesWidget: React.FC = observer(() => {
               toggleShowNewSticky(true);
               stickyOperations.create();
             }}
-            className="flex gap-1 text-sm font-medium text-custom-primary-100 my-auto"
+            className="flex gap-1 text-13 font-medium text-accent-primary my-auto"
             disabled={creatingSticky}
           >
             <Plus className="size-4 my-auto" />
             <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 border-2 border-t-transparent border-accent-strong rounded-full animate-spin"
                 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 2694baa3ef..657db32c4d 100644
--- a/apps/web/core/components/ui/empty-space.tsx
+++ b/apps/web/core/components/ui/empty-space.tsx
@@ -11,33 +11,35 @@ type EmptySpaceProps = {
   link?: { text: string; href: string };
 };
 
-const EmptySpace: React.FC<EmptySpaceProps> = ({ title, description, children, Icon, link }) => (
-  <>
-    <div className="max-w-lg">
-      {Icon ? (
-        <div className="mb-4">
-          <Icon className="h-14 w-14 text-custom-text-200" />
-        </div>
-      ) : null}
+function EmptySpace({ title, description, children, Icon, link }: EmptySpaceProps) {
+  return (
+    <>
+      <div className="max-w-lg">
+        {Icon ? (
+          <div className="mb-4">
+            <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">
-        {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">
-              {link.text}
-              <span aria-hidden="true"> &rarr;</span>
-            </span>
-          </Link>
-        </div>
-      ) : null}
-    </div>
-  </>
-);
+        <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-b border-t border-subtle">
+          {children}
+        </ul>
+        {link ? (
+          <div className="mt-6 flex">
+            <Link href={link.href}>
+              <span className="text-13 font-medium text-accent-primary hover:text-accent-primary">
+                {link.text}
+                <span aria-hidden="true"> &rarr;</span>
+              </span>
+            </Link>
+          </div>
+        ) : null}
+      </div>
+    </>
+  );
+}
 
 type EmptySpaceItemProps = {
   title: string;
@@ -47,23 +49,20 @@ type EmptySpaceItemProps = {
   href?: string;
 };
 
-const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Icon, action, href }) => {
+function EmptySpaceItem({ title, description, Icon, action, href }: EmptySpaceItemProps) {
   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>
   );
@@ -79,6 +78,6 @@ const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({ title, description, Ico
       </li>
     </>
   );
-};
+}
 
 export { EmptySpace, EmptySpaceItem };
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 e05a196060..58c9250780 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
@@ -5,14 +5,16 @@ type Props = {
   description?: string;
 };
 
-export const IntegrationAndImportExportBanner: React.FC<Props> = ({ bannerName, description }) => (
-  <div className="flex items-start gap-3 border-b border-custom-border-100 py-3.5">
-    <h3 className="text-xl 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" />
-        <p className="leading-5">{description}</p>
-      </div>
-    )}
-  </div>
-);
+export function IntegrationAndImportExportBanner({ bannerName, description }: Props) {
+  return (
+    <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-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>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/ui/labels-list.tsx b/apps/web/core/components/ui/labels-list.tsx
index 1421213513..b8991c55e1 100644
--- a/apps/web/core/components/ui/labels-list.tsx
+++ b/apps/web/core/components/ui/labels-list.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 // ui
 import { Tooltip } from "@plane/propel/tooltip";
 import type { IIssueLabel } from "@plane/types";
@@ -14,7 +11,7 @@ type IssueLabelsListProps = {
   showLength?: boolean;
 };
 
-export const IssueLabelsList: FC<IssueLabelsListProps> = (props) => {
+export function IssueLabelsList(props: IssueLabelsListProps) {
   const { labels } = props;
   const { isMobile } = usePlatformOS();
   return (
@@ -27,8 +24,8 @@ export const IssueLabelsList: FC<IssueLabelsListProps> = (props) => {
             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="h-full flex 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>
@@ -37,4 +34,4 @@ export const IssueLabelsList: FC<IssueLabelsListProps> = (props) => {
       )}
     </>
   );
-};
+}
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 a4fe6b1882..f53fcdce31 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,43 +1,45 @@
 import { range } from "lodash-es";
 
-export const CycleModuleBoardLayoutLoader = () => (
-  <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">
-        {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"
-          >
-            <div className="flex items-center justify-between">
-              <span className="h-6 w-24 bg-custom-background-80 rounded" />
-              <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" />
-              </div>
-            </div>
-            <div className="flex flex-col gap-3">
+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">
+          {range(5).map((i) => (
+            <div
+              key={i}
+              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-layer-1 rounded-sm" />
                 <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-6 w-20 bg-layer-1 rounded-sm" />
+                  <span className="h-6 w-6 bg-layer-1 rounded-sm" />
                 </div>
-                <span className="h-5 w-5 bg-custom-background-80 rounded-full" />
               </div>
-              <span className="h-1.5 bg-custom-background-80 rounded" />
-              <div className="flex items-center justify-between">
-                <div className="flex items-center">
-                  <span className="h-4 w-16 bg-custom-background-80 rounded" />
+              <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-layer-1 rounded-sm" />
+                    <span className="h-5 w-20 bg-layer-1 rounded-sm" />
+                  </div>
+                  <span className="h-5 w-5 bg-layer-1 rounded-full" />
                 </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-1.5 bg-layer-1 rounded-sm" />
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center">
+                    <span className="h-4 w-16 bg-layer-1 rounded-sm" />
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="h-4 w-4 bg-layer-1 rounded-sm" />
+                    <span className="h-4 w-4 bg-layer-1 rounded-sm" />
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-        ))}
+          ))}
+        </div>
       </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 57947f0abf..106974d482 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,33 +1,35 @@
 import { range } from "lodash-es";
 
-export const CycleModuleListLayoutLoader = () => (
-  <div className="h-full overflow-y-auto animate-pulse">
-    <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"
-          >
-            <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="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" />
+export function CycleModuleListLayoutLoader() {
+  return (
+    <div className="h-full overflow-y-auto animate-pulse">
+      <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-subtle flex-col sm:flex-row px-5 py-6"
+            >
+              <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="flex items-center gap-4 truncate">
+                    <span className="h-10 w-10 bg-layer-1 rounded-full" />
+                    <span className="h-5 w-20 bg-layer-1 rounded-sm" />
+                  </div>
+                </div>
+                <span className="h-6 w-20 bg-layer-1 rounded-sm" />
+              </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-layer-1 rounded-sm" />
+                  <span className="h-5 w-5 bg-layer-1 rounded-sm" />
+                  <span className="h-5 w-5 bg-layer-1 rounded-sm" />
                 </div>
               </div>
-              <span className="h-6 w-20 bg-custom-background-80 rounded" />
             </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>
-            </div>
-          </div>
-        ))}
+          ))}
+        </div>
       </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 80a257d4b4..55d148e1ee 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,39 +1,41 @@
 import { range } from "lodash-es";
 import { getRandomInt } from "../utils";
 
-const CalendarDay = () => {
+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="h-8 w-full bg-layer-1 rounded-sm mb-2" />
   ));
 
   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" />
+        <span className="h-6 w-6 bg-layer-1 rounded-sm" />
       </div>
       <div className="flex flex-col gap-2.5 p-2">{dataBlocks}</div>
     </div>
   );
-};
+}
 
-export const CalendarLayoutLoader = () => (
-  <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">
-      {range(5).map((index) => (
-        <span key={index} className="h-11 w-full bg-custom-background-80" />
-      ))}
-    </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">
-        {range(6).map((index) => (
-          <div key={index} className="grid divide-x-[0.5px] divide-custom-border-200 grid-cols-5">
-            {range(5).map((index) => (
-              <CalendarDay key={index} />
-            ))}
-          </div>
+export function CalendarLayoutLoader() {
+  return (
+    <div className="h-full w-full overflow-y-auto bg-surface-1 animate-pulse">
+      <span className="relative grid divide-x-[0.5px] divide-subtle-1 text-13 font-medium grid-cols-5">
+        {range(5).map((index) => (
+          <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-subtle-1 overflow-y-auto">
+          {range(6).map((index) => (
+            <div key={index} className="grid divide-x-[0.5px] divide-subtle-1 grid-cols-5">
+              {range(5).map((index) => (
+                <CalendarDay key={index} />
+              ))}
+            </div>
+          ))}
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+}
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 3b0a36cafd..10285b8e51 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
@@ -3,58 +3,62 @@ import { Row } from "@plane/ui";
 import { BLOCK_HEIGHT } from "@/components/gantt-chart/constants";
 import { getRandomLength } from "../utils";
 
-export const GanttLayoutListItemLoader = () => (
-  <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>
-);
-
-export const GanttLayoutLoader = () => (
-  <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" />
+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-layer-1 rounded-sm" />
+      <div className={`px-3 h-6 w-${getRandomLength(["32", "52", "72"])} bg-layer-1 rounded-sm`} />
     </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>
-        </Row>
-        <Row className="flex flex-col gap-3 h-11 py-4 w-full">
-          {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>
-          ))}
-        </Row>
+  );
+}
+
+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-subtle ">
+        <span className="h-6 w-12 bg-layer-1 rounded-sm" />
       </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="flex items-center justify-start">
-            <span className="h-5 w-20 bg-custom-background-80 rounded" />
+      <div className="flex h-full">
+        <div className="h-full w-[25.5rem] border-r border-subtle">
+          <Row className="flex items-end h-header py-2 border-b border-subtle">
+            <div className="flex items-center justify-between w-full">
+              <span className="h-5 w-14 bg-layer-1 rounded-sm" />
+              <span className="h-5 w-16 bg-layer-1 rounded-sm" />
+            </div>
+          </Row>
+          <Row className="flex flex-col gap-3 h-11 py-4 w-full">
+            {range(6).map((index) => (
+              <div key={index} className="flex items-center gap-3  h-11 w-full">
+                <span className="h-6 w-6 bg-layer-1 rounded-sm" />
+                <span className={`h-6 w-${getRandomLength(["32", "52", "72"])} bg-layer-1 rounded-sm`} />
+              </div>
+            ))}
+          </Row>
+        </div>
+        <div className="h-full w-full border-r border-subtle">
+          <div className="flex flex-col justify-between gap-2 h-header py-1.5 px-4 border-b border-subtle">
+            <div className="flex items-center justify-start">
+              <span className="h-5 w-20 bg-layer-1 rounded-sm" />
+            </div>
+            <div className="flex items-center gap-3 justify-between w-full">
+              {range(15).map((index) => (
+                <span key={index} className="h-5 w-10 bg-layer-1 rounded-sm" />
+              ))}
+            </div>
           </div>
-          <div className="flex items-center gap-3 justify-between w-full">
-            {range(15).map((index) => (
-              <span key={index} className="h-5 w-10 bg-custom-background-80 rounded" />
+          <div className="flex flex-col gap-3 h-11 p-4 w-full">
+            {range(6).map((index) => (
+              <div
+                key={index}
+                className={`flex items-center gap-3 h-11 w-full`}
+                style={{ paddingLeft: getRandomLength(["115px", "208px", "260px"]) }}
+              >
+                <span className={`h-6 w-40 w-${getRandomLength(["32", "52", "72"])} bg-layer-1 rounded-sm`} />
+              </div>
             ))}
           </div>
         </div>
-        <div className="flex flex-col gap-3 h-11 p-4 w-full">
-          {range(6).map((index) => (
-            <div
-              key={index}
-              className={`flex items-center gap-3 h-11 w-full`}
-              style={{ paddingLeft: getRandomLength(["115px", "208px", "260px"]) }}
-            >
-              <span className={`h-6 w-40 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`} />
-            </div>
-          ))}
-        </div>
       </div>
     </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 7c21660d25..2c79c17a78 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
@@ -5,17 +5,20 @@ import { ContentWrapper } from "@plane/ui";
 // plane utils
 import { cn } from "@plane/utils";
 
-export const KanbanIssueBlockLoader = forwardRef<HTMLSpanElement, { cardHeight?: number; shouldAnimate?: boolean }>(
-  ({ cardHeight = 100, shouldAnimate = true }, ref) => (
+export const KanbanIssueBlockLoader = forwardRef(function KanbanIssueBlockLoader(
+  { cardHeight = 100, shouldAnimate = true }: { cardHeight?: number; shouldAnimate?: boolean },
+  ref: React.ForwardedRef<HTMLSpanElement>
+) {
+  return (
     <span
       ref={ref}
-      className={cn(`block bg-custom-background-80 rounded`, { " animate-pulse": shouldAnimate })}
+      className={cn(`block bg-layer-1 rounded-sm`, { " animate-pulse": shouldAnimate })}
       style={{ height: `${cardHeight}px` }}
     />
-  )
-);
+  );
+});
 
-export const KanbanColumnLoader = ({
+export function KanbanColumnLoader({
   cardsInColumn = 3,
   ignoreHeader = false,
   cardHeight = 100,
@@ -25,28 +28,32 @@ export const KanbanColumnLoader = ({
   ignoreHeader?: boolean;
   cardHeight?: number;
   shouldAnimate?: boolean;
-}) => (
-  <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 })} />
+}) {
+  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-layer-1 rounded-sm", { " animate-pulse": shouldAnimate })} />
+            <span className={cn("h-6 w-24 bg-layer-1 rounded-sm", { " animate-pulse": shouldAnimate })} />
+          </div>
         </div>
-      </div>
-    )}
-    {range(cardsInColumn).map((cardIndex) => (
-      <KanbanIssueBlockLoader key={cardIndex} cardHeight={cardHeight} shouldAnimate={shouldAnimate} />
-    ))}
-  </div>
-);
+      )}
+      {range(cardsInColumn).map((cardIndex) => (
+        <KanbanIssueBlockLoader key={cardIndex} cardHeight={cardHeight} shouldAnimate={shouldAnimate} />
+      ))}
+    </div>
+  );
+}
 
 KanbanIssueBlockLoader.displayName = "KanbanIssueBlockLoader";
 
-export const KanbanLayoutLoader = ({ cardsInEachColumn = [2, 3, 2, 4, 3] }: { cardsInEachColumn?: number[] }) => (
-  <ContentWrapper className="flex-row gap-5 py-1.5 overflow-x-auto">
-    {cardsInEachColumn.map((cardsInColumn, columnIndex) => (
-      <KanbanColumnLoader key={columnIndex} cardsInColumn={cardsInColumn} />
-    ))}
-  </ContentWrapper>
-);
+export function KanbanLayoutLoader({ cardsInEachColumn = [2, 3, 2, 4, 3] }: { cardsInEachColumn?: number[] }) {
+  return (
+    <ContentWrapper className="flex-row gap-5 py-1.5 overflow-x-auto">
+      {cardsInEachColumn.map((cardsInColumn, columnIndex) => (
+        <KanbanColumnLoader key={columnIndex} cardsInColumn={cardsInColumn} />
+      ))}
+    </ContentWrapper>
+  );
+}
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 fd0250779c..cf37bffd46 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
@@ -6,78 +6,88 @@ import { Row } from "@plane/ui";
 import { cn } from "@plane/utils";
 import { getRandomInt, getRandomLength } from "../utils";
 
-export const ListLoaderItemRow = forwardRef<
-  HTMLDivElement,
-  { shouldAnimate?: boolean; renderForPlaceHolder?: boolean; defaultPropertyCount?: number }
->(({ shouldAnimate = true, renderForPlaceHolder = false, defaultPropertyCount = 6 }, ref) => (
-  <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,
-    })}
-  >
-    <div className="flex items-center gap-3">
-      <span
-        className={cn("h-5 w-10 bg-custom-background-80 rounded", {
-          "animate-pulse": shouldAnimate,
-          "bg-custom-background-90": renderForPlaceHolder,
-        })}
-      />
-      <span
-        className={cn(`h-5 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`, {
-          "animate-pulse": shouldAnimate,
-          "bg-custom-background-90": renderForPlaceHolder,
-        })}
-      />
-    </div>
-    <div className="flex items-center gap-2">
-      {range(defaultPropertyCount).map((index) => (
-        <Fragment key={index}>
-          {getRandomInt(1, 2) % 2 === 0 ? (
-            <span
-              key={index}
-              className={cn("h-5 w-5 bg-custom-background-80 rounded", {
-                "animate-pulse": shouldAnimate,
-                "bg-custom-background-90": renderForPlaceHolder,
-              })}
-            />
-          ) : (
-            <span
-              className={cn("h-5 w-16 bg-custom-background-80 rounded", {
-                "animate-pulse": shouldAnimate,
-                "bg-custom-background-90": renderForPlaceHolder,
-              })}
-            />
-          )}
-        </Fragment>
-      ))}
-    </div>
-  </Row>
-));
+export const ListLoaderItemRow = forwardRef(function ListLoaderItemRow(
+  {
+    shouldAnimate = true,
+    renderForPlaceHolder = false,
+    defaultPropertyCount = 6,
+  }: { shouldAnimate?: boolean; renderForPlaceHolder?: boolean; defaultPropertyCount?: number },
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  return (
+    <Row
+      ref={ref}
+      className={cn("flex items-center justify-between h-11 py-3 ", {
+        "bg-surface-1": renderForPlaceHolder,
+        "border-b border-subtle": !renderForPlaceHolder,
+      })}
+    >
+      <div className="flex items-center gap-3">
+        <span
+          className={cn("h-5 w-10 bg-layer-1 rounded-sm", {
+            "animate-pulse": shouldAnimate,
+            "bg-surface-2": renderForPlaceHolder,
+          })}
+        />
+        <span
+          className={cn(`h-5 w-${getRandomLength(["32", "52", "72"])} bg-layer-1 rounded-sm`, {
+            "animate-pulse": shouldAnimate,
+            "bg-surface-2": renderForPlaceHolder,
+          })}
+        />
+      </div>
+      <div className="flex items-center gap-2">
+        {range(defaultPropertyCount).map((index) => (
+          <Fragment key={index}>
+            {getRandomInt(1, 2) % 2 === 0 ? (
+              <span
+                key={index}
+                className={cn("h-5 w-5 bg-layer-1 rounded-sm", {
+                  "animate-pulse": shouldAnimate,
+                  "bg-surface-2": renderForPlaceHolder,
+                })}
+              />
+            ) : (
+              <span
+                className={cn("h-5 w-16 bg-layer-1 rounded-sm", {
+                  "animate-pulse": shouldAnimate,
+                  "bg-surface-2": renderForPlaceHolder,
+                })}
+              />
+            )}
+          </Fragment>
+        ))}
+      </div>
+    </Row>
+  );
+});
 
 ListLoaderItemRow.displayName = "ListLoaderItemRow";
 
-const ListSection = ({ itemCount }: { itemCount: number }) => (
-  <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" />
+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-subtle bg-surface-2 py-1">
+        <div className="flex items-center gap-2 py-1.5 w-full">
+          <span className="h-6 w-6 bg-layer-1 rounded-sm animate-pulse" />
+          <span className="h-6 w-24 bg-layer-1 rounded-sm animate-pulse" />
+        </div>
+      </Row>
+      <div className="relative h-full w-full">
+        {range(itemCount).map((index) => (
+          <ListLoaderItemRow key={index} />
+        ))}
       </div>
-    </Row>
-    <div className="relative h-full w-full">
-      {range(itemCount).map((index) => (
-        <ListLoaderItemRow key={index} />
+    </div>
+  );
+}
+
+export function ListLayoutLoader() {
+  return (
+    <div className="flex flex-shrink-0 flex-col">
+      {[6, 5, 2].map((itemCount, index) => (
+        <ListSection key={index} itemCount={itemCount} />
       ))}
     </div>
-  </div>
-);
-
-export const ListLayoutLoader = () => (
-  <div className="flex flex-shrink-0 flex-col">
-    {[6, 5, 2].map((itemCount, index) => (
-      <ListSection key={index} itemCount={itemCount} />
-    ))}
-  </div>
-);
+  );
+}
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 4c011855e4..fb02d57ab5 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,15 +1,17 @@
 import { range } from "lodash-es";
-export const MembersLayoutLoader = () => (
-  <div className="flex gap-5 py-1.5 overflow-x-auto">
-    {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" />
+export function MembersLayoutLoader() {
+  return (
+    <div className="flex gap-5 py-1.5 overflow-x-auto">
+      {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-layer-1 rounded-sm animate-pulse" />
+          </div>
+          {range(2).map((cardIndex) => (
+            <span className="h-8 w-full bg-layer-1 rounded-sm animate-pulse" key={cardIndex} />
+          ))}
         </div>
-        {range(2).map((cardIndex) => (
-          <span className="h-8 w-full bg-custom-background-80 rounded animate-pulse" key={cardIndex} />
-        ))}
-      </div>
-    ))}
-  </div>
-);
+      ))}
+    </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 169481f5dc..26fd59d45c 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,25 +1,25 @@
-"use client";
-
 import React from "react";
 // ui
 import { Loader } from "@plane/ui";
 import { InboxSidebarLoader } from "./inbox-sidebar-loader";
 
-export const InboxLayoutLoader = () => (
-  <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">
-      <InboxSidebarLoader />
+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-strong">
+        <InboxSidebarLoader />
+      </div>
+      <div className="w-4/6">
+        <Loader className="flex flex-col h-full gap-5 p-5">
+          <div className="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>
+          <Loader.Item height="150px" />
+        </Loader>
+      </div>
     </div>
-    <div className="w-4/6">
-      <Loader className="flex flex-col h-full gap-5 p-5">
-        <div className="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>
-        <Loader.Item height="150px" />
-      </Loader>
-    </div>
-  </div>
-);
+  );
+}
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 a8741ef8f4..277400ff47 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,21 +1,23 @@
 import React from "react";
 import { range } from "lodash-es";
 
-export const InboxSidebarLoader = () => (
-  <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 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" />
+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-subtle p-4">
+          <div className="flex flex-col gap-2">
+            <span className="h-5 w-16 bg-layer-1 rounded-sm" />
+            <span className="h-5 w-36 bg-layer-1 rounded-sm" />
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="h-4 w-20 bg-layer-1 rounded-sm" />
+            <span className="h-2 w-2 bg-layer-1 rounded-full" />
+            <span className="h-4 w-16 bg-layer-1 rounded-sm" />
+            <span className="h-4 w-16 bg-layer-1 rounded-sm" />
+          </div>
         </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" />
-        </div>
-      </div>
-    ))}
-  </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 580c6744e0..90e9282798 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
@@ -2,45 +2,44 @@ import { range } from "lodash-es";
 import { Row } from "@plane/ui";
 import { getRandomLength } from "../utils";
 
-export const SpreadsheetIssueRowLoader = (props: { columnCount: number }) => (
-  <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">
-      <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`}
-        />
-      </Row>
-    </td>
-    {range(props.columnCount).map((colIndex) => (
-      <td key={colIndex} className="h-11 w-full min-w-[8rem] border-r border-custom-border-200 ">
-        <div className="flex items-center justify-center gap-3 px-3">
-          <span className="h-5 w-20 bg-custom-background-80 rounded animate-pulse" />
-        </div>
+export function SpreadsheetIssueRowLoader(props: { columnCount: number }) {
+  return (
+    <tr className="border-b border-subtle bg-surface-1">
+      <td className="h-11 min-w-[28rem] z-[10] sticky left-0 flex 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-layer-1 rounded-sm animate-pulse" />
+          <span className={`h-5 w-${getRandomLength(["32", "52", "72"])} bg-layer-1 rounded-sm animate-pulse`} />
+        </Row>
       </td>
-    ))}
-  </tr>
-);
+      {range(props.columnCount).map((colIndex) => (
+        <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-layer-1 rounded-sm animate-pulse" />
+          </div>
+        </td>
+      ))}
+    </tr>
+  );
+}
 
-export const SpreadsheetLayoutLoader = () => (
-  <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" />
-          {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"
-            />
+export function SpreadsheetLayoutLoader() {
+  return (
+    <div className="horizontal-scroll-enable h-full w-full overflow-y-auto ">
+      <table>
+        <thead>
+          <tr>
+            <th className="h-11 min-w-[28rem] bg-surface-2 border-r border-subtle animate-pulse" />
+            {range(10).map((index) => (
+              <th key={index} className="h-11 w-full min-w-[8rem] bg-surface-2 border-r border-subtle animate-pulse" />
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {range(16).map((rowIndex) => (
+            <SpreadsheetIssueRowLoader key={rowIndex} columnCount={10} />
           ))}
-        </tr>
-      </thead>
-      <tbody>
-        {range(16).map((rowIndex) => (
-          <SpreadsheetIssueRowLoader key={rowIndex} columnCount={10} />
-        ))}
-      </tbody>
-    </table>
-  </div>
-);
+        </tbody>
+      </table>
+    </div>
+  );
+}
diff --git a/apps/web/core/components/ui/loader/notification-loader.tsx b/apps/web/core/components/ui/loader/notification-loader.tsx
index 12a364978b..6ce421c22d 100644
--- a/apps/web/core/components/ui/loader/notification-loader.tsx
+++ b/apps/web/core/components/ui/loader/notification-loader.tsx
@@ -1,18 +1,20 @@
 import { range } from "lodash-es";
 
-export const NotificationsLoader = () => (
-  <div className="divide-y divide-custom-border-100 animate-pulse 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" />
+export function NotificationsLoader() {
+  return (
+    <div className="divide-y divide-subtle animate-pulse 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-layer-1 rounded-full" />
+          <div className="flex flex-col gap-2.5 w-full">
+            <span className="h-5 w-36 bg-layer-1 rounded-sm" />
+            <div className="flex items-center justify-between gap-2 w-full">
+              <span className="h-5 w-28 bg-layer-1 rounded-sm" />
+              <span className="h-5 w-16 bg-layer-1 rounded-sm" />
+            </div>
           </div>
         </div>
-      </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 a3d25d7512..b765a80de9 100644
--- a/apps/web/core/components/ui/loader/pages-loader.tsx
+++ b/apps/web/core/components/ui/loader/pages-loader.tsx
@@ -1,30 +1,32 @@
 import { range } from "lodash-es";
 
-export const PagesLoader = () => (
-  <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>
-    </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" />
-      ))}
-    </div>
-    <div className="divide-y divide-custom-border-200">
-      {range(5).map((i) => (
-        <div key={i} className="h-12 w-full flex 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" />
+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-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-layer-1 rounded-full" />
+        ))}
+      </div>
+      <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 className="flex items-center gap-1.5">
+              <span className="h-5 w-5 bg-layer-1 rounded-sm" />
+              <span className="h-5 w-20 bg-layer-1 rounded-sm" />
+            </div>
+            <div className="flex items-center gap-1.5">
+              <span className="h-5 w-16 bg-layer-1 rounded-sm" />
+              <span className="h-5 w-5 bg-layer-1 rounded-sm" />
+              <span className="h-5 w-5 bg-layer-1 rounded-sm" />
+              <span className="h-5 w-5 bg-layer-1 rounded-sm" />
+            </div>
           </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" />
-          </div>
-        </div>
-      ))}
+        ))}
+      </div>
     </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 bfdf7716c7..ba4ae2b18f 100644
--- a/apps/web/core/components/ui/loader/projects-loader.tsx
+++ b/apps/web/core/components/ui/loader/projects-loader.tsx
@@ -1,39 +1,38 @@
 import { range } from "lodash-es";
 
-export const ProjectsLoader = () => (
-  <div className="h-full w-full overflow-y-auto p-8 animate-pulse">
-    <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 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" />
-                  <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" />
+export function ProjectsLoader() {
+  return (
+    <div className="h-full w-full overflow-y-auto p-8 animate-pulse">
+      <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-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-layer-1 rounded-sm" />
+                    <div className="flex w-full flex-col justify-between gap-0.5 truncate">
+                      <span className="h-4 w-28 bg-layer-1 rounded-sm" />
+                      <span className="h-4 w-16 bg-layer-1 rounded-sm" />
+                    </div>
+                  </div>
+                  <div className="flex h-full flex-shrink-0 items-center gap-2">
+                    <span className="h-6 w-6 bg-layer-1 rounded-sm" />
+                    <span className="h-6 w-6 bg-layer-1 rounded-sm" />
                   </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" />
                 </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="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" />
+            <div className="flex h-[104px] w-full flex-col justify-between rounded-b-sm p-4">
+              <span className="h-4 w-36 bg-layer-1 rounded-sm" />
+              <div className="item-center flex justify-between">
+                <span className="h-5 w-20 bg-layer-1 rounded-sm" />
+                <span className="h-5 w-5 bg-layer-1 rounded-sm" />
+              </div>
             </div>
           </div>
-        </div>
-      ))}
+        ))}
+      </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 59fd18e0e2..48a8efa5d1 100644
--- a/apps/web/core/components/ui/loader/settings/activity.tsx
+++ b/apps/web/core/components/ui/loader/settings/activity.tsx
@@ -1,13 +1,15 @@
 import { range } from "lodash-es";
 import { getRandomLength } from "../utils";
 
-export const ActivitySettingsLoader = () => (
-  <div className="flex flex-col gap-3 animate-pulse">
-    {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>
-    ))}
-  </div>
-);
+export function ActivitySettingsLoader() {
+  return (
+    <div className="flex flex-col gap-3 animate-pulse">
+      {range(10).map((i) => (
+        <div key={i} className="relative flex items-center gap-2 h-12 border-b border-subtle">
+          <span className="h-6 w-6 bg-layer-1 rounded-sm" />
+          <span className={`h-6 w-${getRandomLength(["52", "72", "96"])} bg-layer-1 rounded-sm`} />
+        </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 576601b303..8d4fe11e8f 100644
--- a/apps/web/core/components/ui/loader/settings/api-token.tsx
+++ b/apps/web/core/components/ui/loader/settings/api-token.tsx
@@ -1,24 +1,24 @@
 import { range } from "lodash-es";
 import { useTranslation } from "@plane/i18n";
-export const APITokenSettingsLoader = () => {
+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 bg-layer-1 rounded-sm" />
       </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 bg-layer-1 rounded-sm" />
+              <span className="h-5 w-16 bg-layer-1 rounded-sm" />
             </div>
-            <span className="h-5 w-36 bg-custom-background-80 rounded" />
+            <span className="h-5 w-36 bg-layer-1 rounded-sm" />
           </div>
         ))}
       </div>
     </section>
   );
-};
+}
diff --git a/apps/web/core/components/ui/loader/settings/email.tsx b/apps/web/core/components/ui/loader/settings/email.tsx
index 3fecb35908..2d79088da4 100644
--- a/apps/web/core/components/ui/loader/settings/email.tsx
+++ b/apps/web/core/components/ui/loader/settings/email.tsx
@@ -1,29 +1,31 @@
 import { range } from "lodash-es";
 
-export const EmailSettingsLoader = () => (
-  <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>
-    <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" />
+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-subtle">
+        <span className="h-7 w-40 bg-layer-1 rounded-sm" />
+        <span className="h-5 w-96 bg-layer-1 rounded-sm" />
       </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" />
-          </div>
-          <div className="flex items-center">
-            <span className="h-5 w-5 bg-custom-background-80 rounded" />
-          </div>
+      <div className="flex flex-col gap-2">
+        <div className="flex items-center py-3">
+          <span className="h-7 w-32 bg-layer-1 rounded-sm" />
+        </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-layer-1 rounded-sm" />
+              <span className="h-5 w-96 bg-layer-1 rounded-sm" />
+            </div>
+            <div className="flex items-center">
+              <span className="h-5 w-5 bg-layer-1 rounded-sm" />
+            </div>
+          </div>
+        ))}
+        <div className="flex items-center py-12">
+          <span className="h-8 w-32 bg-layer-1 rounded-sm" />
         </div>
-      ))}
-      <div className="flex items-center py-12">
-        <span className="h-8 w-32 bg-custom-background-80 rounded" />
       </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 55097f02f6..0930ab7bd0 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,20 +1,22 @@
 import { range } from "lodash-es";
 
-export const ImportExportSettingsLoader = () => (
-  <div className="divide-y-[0.5px] divide-custom-border-200 animate-pulse">
-    {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" />
-          </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" />
+export function ImportExportSettingsLoader() {
+  return (
+    <div className="divide-y-[0.5px] divide-subtle-1 animate-pulse">
+      {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-layer-1 rounded-sm" />
+              <span className="h-5 w-16 bg-layer-1 rounded-sm" />
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="h-4 w-28 bg-layer-1 rounded-sm" />
+              <span className="h-4 w-28 bg-layer-1 rounded-sm" />
+            </div>
           </div>
         </div>
-      </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 d1385d2bc1..5a9dea826c 100644
--- a/apps/web/core/components/ui/loader/settings/integration.tsx
+++ b/apps/web/core/components/ui/loader/settings/integration.tsx
@@ -1,21 +1,20 @@
 import { range } from "lodash-es";
 
-export const IntegrationsSettingsLoader = () => (
-  <div className="divide-y-[0.5px] divide-custom-border-100 animate-pulse">
-    {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 className="flex items-start gap-4">
-          <span className="h-10 w-10 bg-custom-background-80 rounded-full" />
-          <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" />
+export function IntegrationsSettingsLoader() {
+  return (
+    <div className="divide-y-[0.5px] divide-subtle animate-pulse">
+      {range(2).map((i) => (
+        <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-layer-1 rounded-full" />
+            <div className="flex flex-col gap-1">
+              <span className="h-5 w-20 bg-layer-1 rounded-sm" />
+              <span className="h-4 w-60 bg-layer-1 rounded-sm" />
+            </div>
           </div>
+          <span className="h-8 w-16 bg-layer-1 rounded-sm" />
         </div>
-        <span className="h-8 w-16 bg-custom-background-80 rounded" />
-      </div>
-    ))}
-  </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 d8b975e1dd..f6abc297ec 100644
--- a/apps/web/core/components/ui/loader/settings/members.tsx
+++ b/apps/web/core/components/ui/loader/settings/members.tsx
@@ -1,17 +1,19 @@
 import { range } from "lodash-es";
 
-export const MembersSettingsLoader = () => (
-  <div className="divide-y-[0.5px] divide-custom-border-100">
-    {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" />
+export function MembersSettingsLoader() {
+  return (
+    <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-layer-1 rounded-full" />
+            <span className="h-5 w-24 bg-layer-1 rounded-sm" />
+          </div>
+          <span className="h-5 w-24 bg-layer-1 rounded-sm" />
+          <span className="h-5 w-20 bg-layer-1 rounded-sm" />
+          <span className="h-5 w-28 bg-layer-1 rounded-sm" />
         </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" />
-      </div>
-    ))}
-  </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 87ddbd19a0..f8ddd85759 100644
--- a/apps/web/core/components/ui/loader/settings/web-hook.tsx
+++ b/apps/web/core/components/ui/loader/settings/web-hook.tsx
@@ -1,20 +1,22 @@
-export const WebhookSettingsLoader = () => (
-  <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>
-      <div className="h-full w-full overflow-y-auto">
-        <div className="border-b border-custom-border-200">
-          <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>
+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-subtle pb-3.5">
+          <div className="text-18 font-medium">Webhooks</div>
+          <span className="h-8 w-28 bg-layer-1 rounded-sm" />
+        </div>
+        <div className="h-full w-full overflow-y-auto">
+          <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-layer-1 rounded-sm" />
+                <span className="h-6 w-12 bg-layer-1 rounded-sm" />
+              </span>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-);
+  );
+}
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 e9f91f09e8..ebd7542885 100644
--- a/apps/web/core/components/ui/loader/view-list-loader.tsx
+++ b/apps/web/core/components/ui/loader/view-list-loader.tsx
@@ -1,20 +1,22 @@
 import { range } from "lodash-es";
 
-export const ViewListLoader = () => (
-  <div className="flex h-full w-full flex-col animate-pulse">
-    {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 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" />
-          </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" />
+export function ViewListLoader() {
+  return (
+    <div className="flex h-full w-full flex-col animate-pulse">
+      {range(8).map((i) => (
+        <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-layer-1 rounded-sm" />
+              <span className="h-6 w-28 bg-layer-1 rounded-sm" />
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="h-5 w-5 bg-layer-1 rounded-sm" />
+              <span className="h-5 w-5 bg-layer-1 rounded-sm" />
+            </div>
           </div>
         </div>
-      </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 35b53ade62..a371f45dd9 100644
--- a/apps/web/core/components/ui/markdown-to-component.tsx
+++ b/apps/web/core/components/ui/markdown-to-component.tsx
@@ -33,31 +33,35 @@ interface Props {
   options?: any;
 }
 
-const HeadingPrimary: CustomComponent = ({ children }) => (
-  <h1 className="text-lg font-semibold text-custom-text-100">{children}</h1>
-);
+function HeadingPrimary({ children }: { children: React.ReactNode }) {
+  return <h1 className="text-16 font-semibold text-primary">{children}</h1>;
+}
 
-const HeadingSecondary: CustomComponent = ({ children }) => (
-  <h3 className="text-base font-semibold text-custom-text-100">{children}</h3>
-);
+function HeadingSecondary({ children }: { children: React.ReactNode }) {
+  return <h3 className="text-14 font-semibold text-primary">{children}</h3>;
+}
 
-const Paragraph: CustomComponent = ({ children }) => <p className="text-sm text-custom-text-200">{children}</p>;
+function Paragraph({ children }: { children: React.ReactNode }) {
+  return <p className="text-13 text-secondary">{children}</p>;
+}
 
-const OrderedList: CustomComponent = ({ children }) => (
-  <ol className="mb-4 ml-8 list-decimal text-sm text-custom-text-200">{children}</ol>
-);
+function OrderedList({ children }: { children: React.ReactNode }) {
+  return <ol className="mb-4 ml-8 list-decimal text-13 text-secondary">{children}</ol>;
+}
 
-const UnorderedList: CustomComponent = ({ children }) => (
-  <ul className="mb-4 ml-8 list-disc text-sm text-custom-text-200">{children}</ul>
-);
+function UnorderedList({ children }: { children: React.ReactNode }) {
+  return <ul className="mb-4 ml-8 list-disc text-13 text-secondary">{children}</ul>;
+}
 
-const Link: CustomComponent = ({ href, children }) => (
-  <a href={href} className="underline hover:no-underline" target="_blank" rel="noopener noreferrer">
-    {children}
-  </a>
-);
+function Link({ href, children }: CustomComponentProps) {
+  return (
+    <a href={href} className="underline hover:no-underline" target="_blank" rel="noopener noreferrer">
+      {children}
+    </a>
+  );
+}
 
-export const MarkdownRenderer: React.FC<Props> = ({ markdown, options = {} }) => {
+export function MarkdownRenderer({ markdown, options = {} }: Props) {
   const customComponents = {
     h1: HeadingPrimary,
     h3: HeadingSecondary,
@@ -72,4 +76,4 @@ export const MarkdownRenderer: React.FC<Props> = ({ markdown, options = {} }) =>
       {markdown}
     </ReactMarkdown>
   );
-};
+}
diff --git a/apps/web/core/components/ui/profile-empty-state.tsx b/apps/web/core/components/ui/profile-empty-state.tsx
index 27c8a0b1de..986250f503 100644
--- a/apps/web/core/components/ui/profile-empty-state.tsx
+++ b/apps/web/core/components/ui/profile-empty-state.tsx
@@ -6,14 +6,16 @@ type Props = {
   image: any;
 };
 
-export const ProfileEmptyState: React.FC<Props> = ({ title, description, image }) => (
-  <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} />
+export function ProfileEmptyState({ title, description, image }: Props) {
+  return (
+    <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-surface-2">
+          <img src={image} width="32" height="32" className="w-full h-full object-cover" alt={title} />
+        </div>
+        <h6 className="mb-3 mt-3.5 text-14 font-semibold">{title}</h6>
+        {description && <p className="text-13 text-tertiary">{description}</p>}
       </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>}
     </div>
-  </div>
-);
+  );
+}
diff --git a/apps/web/core/components/user/user-greetings.tsx b/apps/web/core/components/user/user-greetings.tsx
index 99f3a3e7d9..ea7c2e5224 100644
--- a/apps/web/core/components/user/user-greetings.tsx
+++ b/apps/web/core/components/user/user-greetings.tsx
@@ -1,4 +1,3 @@
-import type { FC } from "react";
 // plane types
 import { useTranslation } from "@plane/i18n";
 // hooks
@@ -10,7 +9,7 @@ export interface IUserGreetingsView {
   user: IUser;
 }
 
-export const UserGreetingsView: FC<IUserGreetingsView> = (props) => {
+export function UserGreetingsView(props: IUserGreetingsView) {
   const { user } = props;
   // current time hook
   const { currentTime } = useCurrentTime();
@@ -42,10 +41,10 @@ export const UserGreetingsView: FC<IUserGreetingsView> = (props) => {
 
   return (
     <div className="flex flex-col items-center my-6">
-      <h2 className="text-2xl font-semibold text-center">
+      <h2 className="text-20 font-semibold text-center">
         {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}
@@ -53,4 +52,4 @@ export const UserGreetingsView: FC<IUserGreetingsView> = (props) => {
       </h5>
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/views/applied-filters/access.tsx b/apps/web/core/components/views/applied-filters/access.tsx
index 95430e2c6c..480e698dbf 100644
--- a/apps/web/core/components/views/applied-filters/access.tsx
+++ b/apps/web/core/components/views/applied-filters/access.tsx
@@ -13,7 +13,7 @@ type Props = {
   values: EViewAccess[];
 };
 
-export const AppliedAccessFilters: React.FC<Props> = observer((props) => {
+export const AppliedAccessFilters = observer(function AppliedAccessFilters(props: Props) {
   const { editable, handleRemove, values } = props;
   const { t } = useTranslation();
 
@@ -30,12 +30,12 @@ export const AppliedAccessFilters: React.FC<Props> = observer((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 py-1 px-1.5 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/root.tsx b/apps/web/core/components/views/applied-filters/root.tsx
index dc8eaaa74d..bb6cc41a30 100644
--- a/apps/web/core/components/views/applied-filters/root.tsx
+++ b/apps/web/core/components/views/applied-filters/root.tsx
@@ -21,7 +21,7 @@ const MEMBERS_FILTERS = ["owned_by"];
 const DATE_FILTERS = ["created_at"];
 const VIEW_ACCESS_FILTERS = ["view_type"];
 
-export const ViewAppliedFiltersList: React.FC<Props> = (props) => {
+export function ViewAppliedFiltersList(props: Props) {
   const { appliedFilters, handleClearAllFilters, handleRemoveFilter, alwaysAllowEditing } = props;
   const { t } = useTranslation();
 
@@ -31,7 +31,7 @@ export const ViewAppliedFiltersList: React.FC<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 +40,7 @@ export const ViewAppliedFiltersList: React.FC<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 +65,7 @@ export const ViewAppliedFiltersList: React.FC<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} />
@@ -84,4 +84,4 @@ export const ViewAppliedFiltersList: React.FC<Props> = (props) => {
       )}
     </div>
   );
-};
+}
diff --git a/apps/web/core/components/views/delete-view-modal.tsx b/apps/web/core/components/views/delete-view-modal.tsx
index 755938c711..b1810b30ff 100644
--- a/apps/web/core/components/views/delete-view-modal.tsx
+++ b/apps/web/core/components/views/delete-view-modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";
@@ -21,7 +19,7 @@ type Props = {
   onClose: () => void;
 };
 
-export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
+export const DeleteProjectViewModal = observer(function DeleteProjectViewModal(props: Props) {
   const { data, isOpen, onClose } = props;
   // states
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
diff --git a/apps/web/core/components/views/filters/filter-selection.tsx b/apps/web/core/components/views/filters/filter-selection.tsx
index 6e089a2ef1..23f907b11f 100644
--- a/apps/web/core/components/views/filters/filter-selection.tsx
+++ b/apps/web/core/components/views/filters/filter-selection.tsx
@@ -20,7 +20,7 @@ type Props = {
   memberIds?: string[] | undefined;
 };
 
-export const ViewFiltersSelection: React.FC<Props> = observer((props) => {
+export const ViewFiltersSelection = observer(function ViewFiltersSelection(props: Props) {
   const { filters, handleFiltersUpdate, memberIds } = props;
   // states
   const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
@@ -53,12 +53,12 @@ export const ViewFiltersSelection: React.FC<Props> = observer((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">
+          <Search className="text-placeholder" size={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 +66,12 @@ export const ViewFiltersSelection: React.FC<Props> = observer((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="h-full w-full divide-y divide-subtle-1 overflow-y-auto px-2.5 vertical-scrollbar scrollbar-sm">
         <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 1c03f191d3..a23a813fd2 100644
--- a/apps/web/core/components/views/filters/order-by.tsx
+++ b/apps/web/core/components/views/filters/order-by.tsx
@@ -1,15 +1,10 @@
-"use client";
-
 import { ArrowDownWideNarrow, ArrowUpWideNarrow, Check } from "lucide-react";
-// types
+// 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 type { TViewFiltersSortBy, TViewFiltersSortKey } from "@plane/types";
-// ui
 import { CustomMenu } from "@plane/ui";
-// constants
 
 type Props = {
   onChange: (value: { key?: TViewFiltersSortKey; order?: TViewFiltersSortBy }) => void;
@@ -18,7 +13,7 @@ type Props = {
   isMobile?: boolean;
 };
 
-export const ViewOrderByDropdown: React.FC<Props> = (props) => {
+export function ViewOrderByDropdown(props: Props) {
   const { onChange, sortBy, sortKey, isMobile = false } = props;
   const { t } = useTranslation();
 
@@ -26,10 +21,9 @@ export const ViewOrderByDropdown: React.FC<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 " />}</>
   );
@@ -38,8 +32,7 @@ export const ViewOrderByDropdown: React.FC<Props> = (props) => {
       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"
@@ -61,7 +54,7 @@ export const ViewOrderByDropdown: React.FC<Props> = (props) => {
           {sortKey === option.key && <Check 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 (
@@ -82,4 +75,4 @@ export const ViewOrderByDropdown: React.FC<Props> = (props) => {
       })}
     </CustomMenu>
   );
-};
+}
diff --git a/apps/web/core/components/views/form.tsx b/apps/web/core/components/views/form.tsx
index d63611a457..0251c0c3e1 100644
--- a/apps/web/core/components/views/form.tsx
+++ b/apps/web/core/components/views/form.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
@@ -48,7 +46,7 @@ const DEFAULT_VALUES: Partial<IProjectView> = {
   display_filters: { ...getComputedDisplayFilters(), group_by: "state" },
 };
 
-export const ProjectViewForm: React.FC<Props> = observer((props) => {
+export const ProjectViewForm = observer(function ProjectViewForm(props: Props) {
   const { handleFormSubmit, handleClose, data, preLoadedData, projectId, workspaceSlug } = props;
   // i18n
   const { t } = useTranslation();
@@ -104,9 +102,7 @@ export const ProjectViewForm: React.FC<Props> = observer((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">
             <EmojiPicker
@@ -116,12 +112,12 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
               className="flex items-center justify-center flex-shrink0"
               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>
@@ -169,13 +165,13 @@ export const ProjectViewForm: React.FC<Props> = observer((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-red-500">{errors?.name?.message?.toString()}</span>
             </div>
           </div>
           <div>
@@ -187,7 +183,7 @@ export const ProjectViewForm: React.FC<Props> = observer((props) => {
                   id="description"
                   name="description"
                   placeholder={t("common.description")}
-                  className="w-full text-base resize-none min-h-24"
+                  className="w-full text-14 resize-none min-h-24"
                   hasError={Boolean(errors?.description)}
                   value={value}
                   onChange={onChange}
@@ -277,11 +273,11 @@ export const ProjectViewForm: React.FC<Props> = observer((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="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
+        <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 d43a004b54..91b13b46d7 100644
--- a/apps/web/core/components/views/helper.tsx
+++ b/apps/web/core/components/views/helper.tsx
@@ -17,7 +17,7 @@ export type TWorkspaceLayoutProps = {
   issuesLoading: boolean;
 };
 
-export const WorkspaceActiveLayout = (props: TWorkspaceLayoutProps) => {
+export function WorkspaceActiveLayout(props: TWorkspaceLayoutProps) {
   const {
     activeLayout = EIssueLayoutTypes.SPREADSHEET,
     isDefaultView,
@@ -48,4 +48,4 @@ export const WorkspaceActiveLayout = (props: TWorkspaceLayoutProps) => {
     default:
       return <WorkspaceAdditionalLayouts {...props} />;
   }
-};
+}
diff --git a/apps/web/core/components/views/modal.tsx b/apps/web/core/components/views/modal.tsx
index a13dd97d28..289d1d44be 100644
--- a/apps/web/core/components/views/modal.tsx
+++ b/apps/web/core/components/views/modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { observer } from "mobx-react";
 // types
@@ -28,7 +26,7 @@ type Props = {
   projectId: string;
 };
 
-export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
+export const CreateUpdateProjectViewModal = observer(function CreateUpdateProjectViewModal(props: Props) {
   const { data, isOpen, onClose, preLoadedData, workspaceSlug, projectId } = props;
   // router
   const router = useAppRouter();
diff --git a/apps/web/core/components/views/quick-actions.tsx b/apps/web/core/components/views/quick-actions.tsx
index 96cf8b4c34..dbab8280b8 100644
--- a/apps/web/core/components/views/quick-actions.tsx
+++ b/apps/web/core/components/views/quick-actions.tsx
@@ -1,9 +1,9 @@
-"use client";
-
 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 { IconButton } from "@plane/propel/icon-button";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IProjectView } from "@plane/types";
 // ui
@@ -11,10 +11,10 @@ import type { TContextMenuItem } from "@plane/ui";
 import { ContextMenu, CustomMenu } from "@plane/ui";
 import { copyUrlToClipboard, cn } from "@plane/utils";
 // helpers
+import { useViewMenuItems } from "@/components/common/quick-actions-helper";
 import { captureClick } from "@/helpers/event-tracker.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";
@@ -28,7 +28,7 @@ type Props = {
   customClassName?: string;
 };
 
-export const ViewQuickActions: React.FC<Props> = observer((props) => {
+export const ViewQuickActions = observer(function ViewQuickActions(props: Props) {
   const { parentRef, projectId, view, workspaceSlug, customClassName } = props;
   // states
   const [createUpdateViewModal, setCreateUpdateViewModal] = useState(false);
@@ -56,28 +56,34 @@ export const ViewQuickActions: React.FC<Props> = observer((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((item) => ({
-    ...item,
-    action: () => {
-      captureClick({ elementName: PROJECT_VIEW_TRACKER_ELEMENTS.LIST_ITEM_CONTEXT_MENU });
-      item.action();
-    },
-  }));
+  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();
+      },
+    };
+  });
 
   return (
     <>
@@ -90,8 +96,14 @@ export const ViewQuickActions: React.FC<Props> = observer((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 (
@@ -104,7 +116,7 @@ export const ViewQuickActions: React.FC<Props> = observer((props) => {
               className={cn(
                 "flex items-center gap-2",
                 {
-                  "text-custom-text-400": item.disabled,
+                  "text-placeholder": item.disabled,
                 },
                 item.className
               )}
@@ -115,8 +127,8 @@ export const ViewQuickActions: React.FC<Props> = observer((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("text-tertiary whitespace-pre-line", {
+                      "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 d67a4efcd5..25646de561 100644
--- a/apps/web/core/components/views/view-list-header.tsx
+++ b/apps/web/core/components/views/view-list-header.tsx
@@ -13,8 +13,9 @@ 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(() => {
+export const ViewListHeader = observer(function ViewListHeader() {
   // states
   const [isSearchOpen, setIsSearchOpen] = useState(false);
   // refs
@@ -50,29 +51,29 @@ export const ViewListHeader = observer(() => {
     <div className="h-full flex 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={Search}
+          />
         )}
         <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 items-center justify-start gap-1 rounded-md border border-transparent bg-surface-1 text-placeholder 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,
+              "w-64 px-2.5 py-1.5 border-subtle 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"
+            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)}
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 de1a1452e7..bc0955f124 100644
--- a/apps/web/core/components/views/view-list-item-action.tsx
+++ b/apps/web/core/components/views/view-list-item-action.tsx
@@ -28,7 +28,7 @@ type Props = {
   view: IProjectView;
 };
 
-export const ViewListItemAction: FC<Props> = observer((props) => {
+export const ViewListItemAction = observer(function ViewListItemAction(props: Props) {
   const { parentRef, view } = props;
   // states
   const [createUpdateViewModal, setCreateUpdateViewModal] = useState(false);
@@ -87,7 +87,7 @@ export const ViewListItemAction: FC<Props> = observer((props) => {
         />
       )}
       <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" />}
         </Tooltip>
@@ -95,7 +95,7 @@ export const ViewListItemAction: FC<Props> = observer((props) => {
 
       {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="px-3 py-1.5 bg-green-500/20 text-green-500 rounded-sm text-11 font-medium flex items-center gap-1.5 cursor-pointer"
           onClick={() => setPublishModalOpen(true)}
         >
           <span className="flex-shrink-0 rounded-full size-1.5 bg-green-500" />
diff --git a/apps/web/core/components/views/view-list-item.tsx b/apps/web/core/components/views/view-list-item.tsx
index 524739a927..de2ccdd83e 100644
--- a/apps/web/core/components/views/view-list-item.tsx
+++ b/apps/web/core/components/views/view-list-item.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useRef } from "react";
 import { observer } from "mobx-react";
@@ -20,7 +18,7 @@ type Props = {
   view: IProjectView;
 };
 
-export const ProjectViewListItem: FC<Props> = observer((props) => {
+export const ProjectViewListItem = observer(function ProjectViewListItem(props: Props) {
   const { view } = props;
   // refs
   const parentRef = useRef(null);
@@ -36,7 +34,7 @@ export const ProjectViewListItem: FC<Props> = observer((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 96889d1da6..90e91ab883 100644
--- a/apps/web/core/components/views/views-list.tsx
+++ b/apps/web/core/components/views/views-list.tsx
@@ -15,7 +15,7 @@ import { useUserPermissions } from "@/hooks/store/user";
 // local imports
 import { ProjectViewListItem } from "./view-list-item";
 
-export const ProjectViewsList = observer(() => {
+export const ProjectViewsList = observer(function ProjectViewsList() {
   const { projectId } = useParams();
   // plane hooks
   const { t } = useTranslation();
@@ -51,7 +51,7 @@ export const ProjectViewsList = observer(() => {
             {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 a956de428a..49f8b6c313 100644
--- a/apps/web/core/components/web-hooks/create-webhook-modal.tsx
+++ b/apps/web/core/components/web-hooks/create-webhook-modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import { useParams } from "next/navigation";
 // types
@@ -34,7 +32,7 @@ interface ICreateWebhookModal {
   onClose: () => void;
 }
 
-export const CreateWebhookModal: React.FC<ICreateWebhookModal> = (props) => {
+export function CreateWebhookModal(props: ICreateWebhookModal) {
   const { isOpen, onClose, currentWorkspace, createWebhook, clearSecretKey } = props;
   // states
   const [generatedWebhook, setGeneratedKey] = useState<IWebhook | null>(null);
@@ -124,4 +122,4 @@ export const CreateWebhookModal: React.FC<ICreateWebhookModal> = (props) => {
       )}
     </ModalCore>
   );
-};
+}
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 afbad67cc4..f370b8b606 100644
--- a/apps/web/core/components/web-hooks/delete-webhook-modal.tsx
+++ b/apps/web/core/components/web-hooks/delete-webhook-modal.tsx
@@ -1,7 +1,4 @@
-"use client";
-
-import type { FC } from "react";
-import React, { useState } from "react";
+import { useState } from "react";
 import { useParams } from "next/navigation";
 // ui
 import { WORKSPACE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
@@ -17,7 +14,7 @@ interface IDeleteWebhook {
   onClose: () => void;
 }
 
-export const DeleteWebhookModal: FC<IDeleteWebhook> = (props) => {
+export function DeleteWebhookModal(props: IDeleteWebhook) {
   const { isOpen, onClose } = props;
   // states
   const [isDeleting, setIsDeleting] = useState(false);
@@ -84,4 +81,4 @@ export const DeleteWebhookModal: FC<IDeleteWebhook> = (props) => {
       }
     />
   );
-};
+}
diff --git a/apps/web/core/components/web-hooks/empty-state.tsx b/apps/web/core/components/web-hooks/empty-state.tsx
index 7f655a09d5..ca148c03eb 100644
--- a/apps/web/core/components/web-hooks/empty-state.tsx
+++ b/apps/web/core/components/web-hooks/empty-state.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 // ui
 import { Button } from "@plane/propel/button";
@@ -10,22 +8,20 @@ type Props = {
   onClick: () => void;
 };
 
-export const WebhooksEmptyState: React.FC<Props> = (props) => {
+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>
+        <h6 className="mb-3 mt-6 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>
       </div>
     </div>
   );
-};
+}
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 639dc3f803..4e9c49fa1e 100644
--- a/apps/web/core/components/web-hooks/form/delete-section.tsx
+++ b/apps/web/core/components/web-hooks/form/delete-section.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { Disclosure, Transition } from "@headlessui/react";
 import { WORKSPACE_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
 import { Button } from "@plane/propel/button";
@@ -9,15 +7,15 @@ type Props = {
   openDeleteModal: () => void;
 };
 
-export const WebhookDeleteSection: React.FC<Props> = (props) => {
+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>
 
@@ -32,13 +30,14 @@ export const WebhookDeleteSection: React.FC<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}
                   >
@@ -52,4 +51,4 @@ export const WebhookDeleteSection: React.FC<Props> = (props) => {
       )}
     </Disclosure>
   );
-};
+}
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 5bb8d442d9..ff8553a7d9 100644
--- a/apps/web/core/components/web-hooks/form/event-types.tsx
+++ b/apps/web/core/components/web-hooks/form/event-types.tsx
@@ -18,13 +18,13 @@ const WEBHOOK_EVENT_TYPES: { key: TWebhookEventTypes; i18n_label: string }[] = [
   },
 ];
 
-export const WebhookOptions: React.FC<Props> = (props) => {
+export function WebhookOptions(props: Props) {
   const { value, onChange } = props;
   const { t } = useTranslation();
 
   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 +35,7 @@ export const WebhookOptions: React.FC<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>
@@ -43,4 +43,4 @@ export const WebhookOptions: React.FC<Props> = (props) => {
       </div>
     </>
   );
-};
+}
diff --git a/apps/web/core/components/web-hooks/form/form.tsx b/apps/web/core/components/web-hooks/form/form.tsx
index e2e481dadd..6a2c9cdde8 100644
--- a/apps/web/core/components/web-hooks/form/form.tsx
+++ b/apps/web/core/components/web-hooks/form/form.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
@@ -36,7 +33,7 @@ const initialWebhookPayload: Partial<IWebhook> = {
   url: "",
 };
 
-export const WebhookForm: FC<Props> = observer((props) => {
+export const WebhookForm = observer(function WebhookForm(props: Props) {
   const { data, onSubmit, handleClose } = props;
   // states
   const [webhookEventType, setWebhookEventType] = useState<TWebhookEventTypes>("all");
@@ -66,7 +63,7 @@ export const WebhookForm: FC<Props> = observer((props) => {
   return (
     <form onSubmit={handleSubmit(handleFormSubmit)}>
       <div className="space-y-5 ">
-        <div className="text-xl font-medium text-custom-text-200">
+        <div className="text-18 font-medium text-secondary">
           {data
             ? t("workspace_settings.settings.webhooks.modal.details")
             : t("workspace_settings.settings.webhooks.modal.title")}
@@ -83,7 +80,7 @@ export const WebhookForm: FC<Props> = observer((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-red-500">{errors.url.message}</div>}
           </div>
           {data && <WebhookToggle control={control} />}
           <WebhookOptions value={webhookEventType} onChange={(val) => setWebhookEventType(val)} />
@@ -96,6 +93,7 @@ export const WebhookForm: FC<Props> = observer((props) => {
         <div className="pt-0 space-y-5">
           <WebhookSecretKey data={data} />
           <Button
+            size="lg"
             type="submit"
             loading={isSubmitting}
             data-ph-element={WORKSPACE_SETTINGS_TRACKER_ELEMENTS.WEBHOOK_UPDATE_BUTTON}
@@ -104,12 +102,12 @@ export const WebhookForm: FC<Props> = observer((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="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
+          <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/individual-event-options.tsx b/apps/web/core/components/web-hooks/form/individual-event-options.tsx
index a8216c6536..7cbbb3ee36 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,7 @@
 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;
@@ -38,31 +39,27 @@ type Props = {
   control: Control<IWebhook, any>;
 };
 
-export const WebhookIndividualEventOptions = ({ control }: Props) => (
-  <div className="grid grid-cols-1 gap-x-4 gap-y-8 px-6 lg:grid-cols-2">
-    {INDIVIDUAL_WEBHOOK_OPTIONS.map((option) => (
-      <Controller
-        key={option.key}
-        control={control}
-        name={option.key}
-        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}>
-                {option.label}
-              </label>
+export function WebhookIndividualEventOptions({ control }: Props) {
+  return (
+    <div className="grid grid-cols-1 gap-x-4 gap-y-8 px-6 lg:grid-cols-2">
+      {INDIVIDUAL_WEBHOOK_OPTIONS.map((option) => (
+        <Controller
+          key={option.key}
+          control={control}
+          name={option.key}
+          render={({ field: { onChange, value } }) => (
+            <div>
+              <div className="flex items-center gap-2">
+                <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-11 text-tertiary">{option.description}</p>
             </div>
-            <p className="ml-6 mt-0.5 text-xs text-custom-text-300">{option.description}</p>
-          </div>
-        )}
-      />
-    ))}
-  </div>
-);
+          )}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/core/components/web-hooks/form/input.tsx b/apps/web/core/components/web-hooks/form/input.tsx
index c5ee281aa6..af13f89110 100644
--- a/apps/web/core/components/web-hooks/form/input.tsx
+++ b/apps/web/core/components/web-hooks/form/input.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useTranslation } from "@plane/i18n";
 import { Input } from "@plane/ui";
 
@@ -8,13 +6,13 @@ type Props = {
   onChange: (value: string) => void;
   hasError: boolean;
 };
-export const WebhookInput: React.FC<Props> = (props) => {
+export function WebhookInput(props: Props) {
   const { value, onChange, hasError } = props;
   const { t } = useTranslation();
 
   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"
@@ -27,4 +25,4 @@ export const WebhookInput: React.FC<Props> = (props) => {
       />
     </>
   );
-};
+}
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 9657d6be20..71101aa69c 100644
--- a/apps/web/core/components/web-hooks/form/secret-key.tsx
+++ b/apps/web/core/components/web-hooks/form/secret-key.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { useState } from "react";
 import { range } from "lodash-es";
@@ -27,7 +25,7 @@ type Props = {
   data: Partial<IWebhook>;
 };
 
-export const WebhookSecretKey: FC<Props> = observer((props) => {
+export const WebhookSecretKey = observer(function WebhookSecretKey(props: Props) {
   const { data } = props;
   // states
   const [isRegenerating, setIsRegenerating] = useState(false);
@@ -46,7 +44,7 @@ export const WebhookSecretKey: FC<Props> = observer((props) => {
       .then(() =>
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: `${t("success")!}`,
+          title: `${t("success")}`,
           message: t("workspace_settings.settings.webhooks.toasts.secret_key_copied.message"),
         })
       )
@@ -68,7 +66,7 @@ export const WebhookSecretKey: FC<Props> = observer((props) => {
       .then(() => {
         setToast({
           type: TOAST_TYPE.SUCCESS,
-          title: `${t("success")!}`,
+          title: `${t("success")}`,
           message: "New key regenerated successfully.",
         });
 
@@ -99,20 +97,18 @@ export const WebhookSecretKey: FC<Props> = observer((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="text-11 text-placeholder">{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="flex flex-grow max-w-lg items-center justify-between self-stretch rounded-sm border border-subtle px-2 h-8">
               <div className="select-none overflow-hidden font-medium">
                 {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">
                     {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 rounded-full bg-(--text-color-disabled) flex-shrink-0" />
                     ))}
                   </div>
                 )}
@@ -122,7 +118,7 @@ export const WebhookSecretKey: FC<Props> = observer((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>
                   ))}
@@ -131,8 +127,13 @@ export const WebhookSecretKey: FC<Props> = observer((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 7415cf545d..b83f88cc26 100644
--- a/apps/web/core/components/web-hooks/form/toggle.tsx
+++ b/apps/web/core/components/web-hooks/form/toggle.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { Control } from "react-hook-form";
 import { Controller } from "react-hook-form";
 // constants
@@ -14,24 +12,26 @@ interface IWebHookToggle {
   control: Control<IWebhook, any>;
 }
 
-export const WebhookToggle = ({ control }: IWebHookToggle) => (
-  <div className="flex gap-6">
-    <div className="text-sm font-medium">Enable webhook</div>
-    <Controller
-      control={control}
-      name="is_active"
-      render={({ field: { onChange, value } }) => (
-        <ToggleSwitch
-          value={value}
-          onChange={(val: boolean) => {
-            captureClick({
-              elementName: WORKSPACE_SETTINGS_TRACKER_ELEMENTS.WEBHOOK_DETAILS_PAGE_TOGGLE_SWITCH,
-            });
-            onChange(val);
-          }}
-          size="sm"
-        />
-      )}
-    />
-  </div>
-);
+export function WebhookToggle({ control }: IWebHookToggle) {
+  return (
+    <div className="flex gap-6">
+      <div className="text-13 font-medium">Enable webhook</div>
+      <Controller
+        control={control}
+        name="is_active"
+        render={({ field: { onChange, value } }) => (
+          <ToggleSwitch
+            value={value}
+            onChange={(val: boolean) => {
+              captureClick({
+                elementName: WORKSPACE_SETTINGS_TRACKER_ELEMENTS.WEBHOOK_DETAILS_PAGE_TOGGLE_SWITCH,
+              });
+              onChange(val);
+            }}
+            size="sm"
+          />
+        )}
+      />
+    </div>
+  );
+}
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 9ce62cffb2..d392803659 100644
--- a/apps/web/core/components/web-hooks/generated-hook-details.tsx
+++ b/apps/web/core/components/web-hooks/generated-hook-details.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 // components
 // ui
 import { useTranslation } from "@plane/i18n";
@@ -13,7 +11,7 @@ type Props = {
   webhookDetails: IWebhook;
 };
 
-export const GeneratedHookDetails: React.FC<Props> = (props) => {
+export function GeneratedHookDetails(props: Props) {
   const { handleClose, webhookDetails } = props;
   const { t } = useTranslation();
 
@@ -21,16 +19,16 @@ export const GeneratedHookDetails: React.FC<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="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
+        <Button variant="secondary" size="lg" onClick={handleClose}>
           Close
         </Button>
       </div>
     </>
   );
-};
+}
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 d78c002c51..023bb13991 100644
--- a/apps/web/core/components/web-hooks/webhooks-list-item.tsx
+++ b/apps/web/core/components/web-hooks/webhooks-list-item.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
@@ -16,7 +14,7 @@ interface IWebhookListItem {
   webhook: IWebhook;
 }
 
-export const WebhooksListItem: FC<IWebhookListItem> = (props) => {
+export function WebhooksListItem(props: IWebhookListItem) {
   const { webhook } = props;
   // router
   const { workspaceSlug } = useParams();
@@ -57,13 +55,13 @@ export const WebhooksListItem: FC<IWebhookListItem> = (props) => {
   };
 
   return (
-    <div className="border-b border-custom-border-200">
+    <div className="border-b border-subtle">
       <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>
+          <h5 className="truncate text-14 font-medium">{webhook.url}</h5>
           <ToggleSwitch value={webhook.is_active} onChange={handleToggle} />
         </span>
       </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 3aab35357e..fe21e209da 100644
--- a/apps/web/core/components/web-hooks/webhooks-list.tsx
+++ b/apps/web/core/components/web-hooks/webhooks-list.tsx
@@ -4,7 +4,7 @@ import { useWebhook } from "@/hooks/store/use-webhook";
 // components
 import { WebhooksListItem } from "./webhooks-list-item";
 
-export const WebhooksList = observer(() => {
+export const WebhooksList = observer(function WebhooksList() {
   // store hooks
   const { webhooks } = useWebhook();
 
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 487d351c42..0b83278ce0 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
@@ -20,7 +20,7 @@ type TAdditionalWorkItemFiltersProps = {
 
 type TWorkItemFiltersHOCProps = TSharedWorkItemFiltersHOCProps & TAdditionalWorkItemFiltersProps;
 
-export const WorkItemFiltersHOC = observer((props: TWorkItemFiltersHOCProps) => {
+export const WorkItemFiltersHOC = observer(function WorkItemFiltersHOC(props: TWorkItemFiltersHOCProps) {
   const { children, initialWorkItemFilters } = props;
 
   // Only initialize filter instance when initial work item filters are defined
@@ -40,7 +40,7 @@ type TWorkItemFilterProps = TSharedWorkItemFiltersProps &
     children: React.ReactNode | ((props: { filter: IWorkItemFilterInstance }) => React.ReactNode);
   };
 
-const WorkItemFilterRoot = observer((props: TWorkItemFilterProps) => {
+const WorkItemFilterRoot = observer(function WorkItemFilterRoot(props: TWorkItemFilterProps) {
   const {
     children,
     entityType,
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 8b73dba410..b076ff03fd 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
@@ -31,7 +31,9 @@ type TProjectLevelWorkItemFiltersHOCProps = TSharedWorkItemFiltersHOCProps & {
 } & TEnableSaveViewProps &
   TEnableUpdateViewProps;
 
-export const ProjectLevelWorkItemFiltersHOC = observer((props: TProjectLevelWorkItemFiltersHOCProps) => {
+export const ProjectLevelWorkItemFiltersHOC = observer(function ProjectLevelWorkItemFiltersHOC(
+  props: TProjectLevelWorkItemFiltersHOCProps
+) {
   const { children, enableSaveView, enableUpdateView, entityId, initialWorkItemFilters, projectId, workspaceSlug } =
     props;
   // states
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 86051a37ff..59842f8e94 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
@@ -25,7 +25,9 @@ type TWorkspaceLevelWorkItemFiltersHOCProps = TSharedWorkItemFiltersHOCProps & {
 } & TEnableSaveViewProps &
   TEnableUpdateViewProps;
 
-export const WorkspaceLevelWorkItemFiltersHOC = observer((props: TWorkspaceLevelWorkItemFiltersHOCProps) => {
+export const WorkspaceLevelWorkItemFiltersHOC = observer(function WorkspaceLevelWorkItemFiltersHOC(
+  props: TWorkspaceLevelWorkItemFiltersHOCProps
+) {
   const { children, enableSaveView, enableUpdateView, entityId, initialWorkItemFilters, workspaceSlug } = props;
   // states
   const [isCreateViewModalOpen, setIsCreateViewModalOpen] = useState(false);
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 8eb9b6aac6..f3a6441d3b 100644
--- a/apps/web/core/components/work-item-filters/filters-row.tsx
+++ b/apps/web/core/components/work-item-filters/filters-row.tsx
@@ -10,4 +10,6 @@ type TWorkItemFiltersRowProps = TFiltersRowProps<TWorkItemFilterProperty, TWorkI
   filter: IWorkItemFilterInstance;
 };
 
-export const WorkItemFiltersRow = observer((props: TWorkItemFiltersRowProps) => <FiltersRow {...props} />);
+export const WorkItemFiltersRow = observer(function WorkItemFiltersRow(props: TWorkItemFiltersRowProps) {
+  return <FiltersRow {...props} />;
+});
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 b1d4bde1e5..60b2073b69 100644
--- a/apps/web/core/components/work-item-filters/filters-toggle.tsx
+++ b/apps/web/core/components/work-item-filters/filters-toggle.tsx
@@ -11,7 +11,7 @@ type TWorkItemFiltersToggleProps = {
   entityId: string;
 };
 
-export const WorkItemFiltersToggle = observer((props: TWorkItemFiltersToggleProps) => {
+export const WorkItemFiltersToggle = observer(function WorkItemFiltersToggle(props: TWorkItemFiltersToggleProps) {
   const { entityType, entityId } = props;
   // store hooks
   const { getFilter } = useWorkItemFilters();
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 5c900809f9..788963fc93 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,5 +1,3 @@
-"use client";
-
 import type { FC } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
@@ -14,7 +12,9 @@ type TNotificationAppSidebarOption = {
   workspaceSlug: string;
 };
 
-export const NotificationAppSidebarOption: FC<TNotificationAppSidebarOption> = observer((props) => {
+export const NotificationAppSidebarOption = observer(function NotificationAppSidebarOption(
+  props: TNotificationAppSidebarOption
+) {
   const { workspaceSlug } = props;
   // hooks
   const { unreadNotificationsCount, getUnreadNotificationsCount } = useWorkspaceNotifications();
diff --git a/apps/web/core/components/workspace-notifications/root.tsx b/apps/web/core/components/workspace-notifications/root.tsx
index 307001dc3f..26e856bd16 100644
--- a/apps/web/core/components/workspace-notifications/root.tsx
+++ b/apps/web/core/components/workspace-notifications/root.tsx
@@ -1,11 +1,8 @@
-"use client";
-
 import { useCallback, useEffect } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // plane imports
 import { ENotificationLoader, ENotificationQueryParamType } from "@plane/constants";
-import { useTranslation } from "@plane/i18n";
 import { EmptyStateCompact } from "@plane/propel/empty-state";
 import { cn } from "@plane/utils";
 // components
@@ -24,9 +21,7 @@ type NotificationsRootProps = {
   workspaceSlug?: string;
 };
 
-export const NotificationsRoot = observer(({ workspaceSlug }: NotificationsRootProps) => {
-  // plane hooks
-  const { t } = useTranslation();
+export const NotificationsRoot = observer(function NotificationsRoot({ workspaceSlug }: NotificationsRootProps) {
   // hooks
   const { currentWorkspace } = useWorkspace();
   const {
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 cacdf7cf93..f67dc0b0dc 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/empty-state.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/empty-state.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { ENotificationTab } from "@plane/constants";
@@ -11,7 +8,9 @@ type TNotificationEmptyStateProps = {
   currentNotificationTab: ENotificationTab;
 };
 
-export const NotificationEmptyState: FC<TNotificationEmptyStateProps> = observer(({ currentNotificationTab }) => {
+export const NotificationEmptyState = observer(function NotificationEmptyState({
+  currentNotificationTab,
+}: TNotificationEmptyStateProps) {
   // plane imports
   const { t } = useTranslation();
 
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 1eee3d0cf5..45d0f80b22 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,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { ENotificationFilterType, FILTER_TYPE_OPTIONS } from "@plane/constants";
@@ -14,7 +11,7 @@ type TAppliedFilters = {
   workspaceSlug: string;
 };
 
-export const AppliedFilters: FC<TAppliedFilters> = observer((props) => {
+export const AppliedFilters = observer(function AppliedFilters(props: TAppliedFilters) {
   const { workspaceSlug } = props;
   // hooks
   const { filters, updateFilters } = useWorkspaceNotifications();
@@ -49,8 +46,8 @@ export const AppliedFilters: FC<TAppliedFilters> = observer((props) => {
               className="flex flex-wrap flex-start"
               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="w-4 h-4 flex justify-center items-center transition-all rounded-xs text-secondary hover:text-primary">
                 <CloseIcon className="h-3 w-3" />
               </div>
             </Tag>
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 2d7c835442..91b7bfc4b9 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,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { Check } from "lucide-react";
 // plane imports
@@ -10,7 +7,10 @@ import { cn } from "@plane/utils";
 // hooks
 import { useWorkspaceNotifications } from "@/hooks/store/notifications";
 
-export const NotificationFilterOptionItem: FC<{ label: string; value: ENotificationFilterType }> = observer((props) => {
+export const NotificationFilterOptionItem = observer(function NotificationFilterOptionItem(props: {
+  label: string;
+  value: ENotificationFilterType;
+}) {
   const { value, label } = props;
   // hooks
   const { filters, updateFilters } = useWorkspaceNotifications();
@@ -27,18 +27,23 @@ export const NotificationFilterOptionItem: FC<{ label: string; value: ENotificat
   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 items-center gap-2 cursor-pointer px-2 p-1 transition-all hover:bg-layer-1 rounded-xs"
       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-shrink-0 w-3 h-3 flex justify-center items-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" />}
       </div>
-      <div className={cn("whitespace-nowrap text-sm", isSelected ? "text-custom-text-100" : "text-custom-text-200")}>
+      <div
+        className={cn("whitespace-nowrap text-body-xs-medium", {
+          "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 aa856b43c6..8ff2fe2398 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,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { ListFilter } from "lucide-react";
 // plane imports
@@ -13,8 +10,9 @@ 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: FC = observer(() => {
+export const NotificationFilter = observer(function NotificationFilter() {
   // hooks
   const { isMobile } = usePlatformOS();
   const { t } = useTranslation();
@@ -29,9 +27,7 @@ export const NotificationFilter: FC = observer(() => {
       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/options/menu-option/menu-item.tsx b/apps/web/core/components/workspace-notifications/sidebar/header/options/menu-option/menu-item.tsx
index f778fe556b..e05946d2c8 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,28 +1,30 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // components
 import { cn } from "@plane/utils";
 // local imports
 import type { TPopoverMenuOptions } from "./root";
 
-export const NotificationMenuOptionItem: FC<TPopoverMenuOptions> = observer((props) => {
+export const NotificationMenuOptionItem = observer(function NotificationMenuOptionItem(props: TPopoverMenuOptions) {
   const { type, label = "", isActive, prependIcon, appendIcon, onClick } = props;
 
   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="flex items-center gap-2 cursor-pointer mx-2 px-2 p-1 transition-all hover:bg-layer-1 rounded-xs"
         onClick={() => onClick && onClick()}
       >
         {prependIcon && prependIcon}
-        <div className={cn("whitespace-nowrap text-sm", isActive ? "text-custom-text-100" : "text-custom-text-200")}>
+        <div
+          className={cn("whitespace-nowrap text-body-xs-medium", {
+            "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 cd9a759461..f86049a2c8 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,8 +1,6 @@
-"use client";
-
 import type { ReactNode } from "react";
 import { observer } from "mobx-react";
-import { Check, CheckCircle, Clock } from "lucide-react";
+import { Check, CheckCircle, Clock, MoreVertical } from "lucide-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { ArchiveIcon } from "@plane/propel/icons";
@@ -12,6 +10,7 @@ import { PopoverMenu } from "@plane/ui";
 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;
@@ -23,7 +22,7 @@ export type TPopoverMenuOptions = {
   onClick?: (() => void) | undefined;
 };
 
-export const NotificationHeaderMenuOption = observer(() => {
+export const NotificationHeaderMenuOption = observer(function NotificationHeaderMenuOption() {
   // hooks
   const { filters, updateFilters, updateBulkFilters } = useWorkspaceNotifications();
   const { t } = useTranslation();
@@ -74,9 +73,9 @@ export const NotificationHeaderMenuOption = observer(() => {
   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 2ceb203899..e1469e7cca 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,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { CheckCheck, RefreshCw } from "lucide-react";
 // plane imports
@@ -19,12 +18,15 @@ 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;
 };
 
-export const NotificationSidebarHeaderOptions: FC<TNotificationSidebarHeaderOptions> = observer((props) => {
+export const NotificationSidebarHeaderOptions = observer(function NotificationSidebarHeaderOptions(
+  props: TNotificationSidebarHeaderOptions
+) {
   const { workspaceSlug } = props;
   // hooks
   const { isMobile } = usePlatformOS();
@@ -51,35 +53,32 @@ export const NotificationSidebarHeaderOptions: FC<TNotificationSidebarHeaderOpti
   };
 
   return (
-    <div className="relative flex justify-center items-center gap-2 text-sm">
+    <div className="relative flex justify-center items-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"
+        <IconButton
+          size="base"
+          variant="ghost"
           data-ph-element={NOTIFICATION_TRACKER_ELEMENTS.MARK_ALL_AS_READ_BUTTON}
+          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 63e47a3745..29d7c186f5 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/header/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/header/root.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { useTranslation } from "@plane/i18n";
@@ -8,9 +5,6 @@ import { InboxIcon } from "@plane/propel/icons";
 import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common/breadcrumb-link";
-import { SidebarHamburgerToggle } from "@/components/core/sidebar/sidebar-menu-hamburger-toggle";
-// hooks
-import { useAppTheme } from "@/hooks/store/use-app-theme";
 // local imports
 import { NotificationSidebarHeaderOptions } from "./options";
 
@@ -18,23 +12,22 @@ type TNotificationSidebarHeader = {
   workspaceSlug: string;
 };
 
-export const NotificationSidebarHeader: FC<TNotificationSidebarHeader> = observer((props) => {
+export const NotificationSidebarHeader = observer(function NotificationSidebarHeader(
+  props: TNotificationSidebarHeader
+) {
   const { workspaceSlug } = props;
   const { t } = useTranslation();
-  const { sidebarCollapsed } = useAppTheme();
 
   if (!workspaceSlug) return <></>;
   return (
-    <Header className="my-auto bg-custom-background-100">
+    <Header className="my-auto bg-surface-1">
       <Header.LeftItem>
-        {sidebarCollapsed && <SidebarHamburgerToggle />}
-
         <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/loader.tsx b/apps/web/core/components/workspace-notifications/sidebar/loader.tsx
index 7112651dae..58573a9ea7 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/loader.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/loader.tsx
@@ -1,18 +1,20 @@
 import { range } from "lodash-es";
 
-export const NotificationsLoader = () => (
-  <div className="divide-y divide-custom-border-100 animate-pulse 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" />
+export function NotificationsLoader() {
+  return (
+    <div className="divide-y divide-subtle animate-pulse 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-layer-1 rounded-full" />
+          <div className="flex flex-col gap-2.5 w-full">
+            <span className="h-5 w-36 bg-layer-1 rounded-xs" />
+            <div className="flex items-center justify-between gap-2 w-full">
+              <span className="h-5 w-28 bg-layer-1 rounded-xs" />
+              <span className="h-5 w-16 bg-layer-1 rounded-xs" />
+            </div>
           </div>
         </div>
-      </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 44e0e7b746..9871c6c04b 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,4 +1,3 @@
-import type { FC } from "react";
 // plane imports
 import type { TNotification } from "@plane/types";
 import {
@@ -11,13 +10,19 @@ import {
 // components
 import { LiteTextEditor } from "@/components/editor/lite-text";
 
-export const NotificationContent: FC<{
+export function NotificationContent({
+  notification,
+  workspaceId,
+  workspaceSlug,
+  projectId,
+  renderCommentBox = false,
+}: {
   notification: TNotification;
   workspaceId: string;
   workspaceSlug: string;
   projectId: string;
   renderCommentBox?: boolean;
-}> = ({ notification, workspaceId, workspaceSlug, projectId, renderCommentBox = false }) => {
+}) {
   const { data, triggered_by_details: triggeredBy } = notification;
   const notificationField = data?.issue_activity.field;
   const newValue = data?.issue_activity.new_value;
@@ -25,7 +30,7 @@ export const NotificationContent: FC<{
   const verb = data?.issue_activity.verb;
 
   const renderTriggerName = () => (
-    <span className="text-custom-text-100 font-medium">
+    <span className="text-primary font-medium">
       {triggeredBy?.is_bot ? triggeredBy.first_name : triggeredBy?.display_name}{" "}
     </span>
   );
@@ -93,11 +98,11 @@ export const NotificationContent: FC<{
   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>
+          {shouldShowConnector && <span className="text-tertiary">to </span>}
+          <span className="text-primary font-medium">{renderValue()}</span>
           {notificationField === "comment" && renderCommentBox && (
             <div className="scale-75 origin-left">
               <LiteTextEditor
@@ -118,4 +123,4 @@ export const NotificationContent: FC<{
       )}
     </>
   );
-};
+}
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 eb94f39547..bed835e84e 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,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { Clock } from "lucide-react";
@@ -21,7 +18,7 @@ type TNotificationItem = {
   notificationId: string;
 };
 
-export const NotificationItem: FC<TNotificationItem> = observer((props) => {
+export const NotificationItem = observer(function NotificationItem(props: TNotificationItem) {
   const { workspaceSlug, notificationId } = props;
   // hooks
   const { currentSelectedNotificationId, setCurrentSelectedNotificationId } = useWorkspaceNotifications();
@@ -55,7 +52,9 @@ export const NotificationItem: FC<TNotificationItem> = observer((props) => {
       }
 
       if (notification?.is_inbox_issue === false) {
-        !getIsIssuePeeked(issueId) && setPeekIssue({ workspaceSlug, projectId, issueId });
+        if (!getIsIssuePeeked(issueId)) {
+          setPeekIssue({ workspaceSlug, projectId, issueId });
+        }
       }
     }
   };
@@ -66,32 +65,34 @@ export const NotificationItem: FC<TNotificationItem> = observer((props) => {
   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" : ""
+        "relative py-4 flex items-center gap-2 border-b border-subtle cursor-pointer transition-all group",
+        {
+          "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="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-accent-primary absolute top-[50%] left-2" />
       )}
 
       <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="flex-shrink-0 relative flex justify-center items-center w-12 h-12 bg-layer-1 rounded-full">
           {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="text-body-sm-medium bg-layer-1"
             />
           )}
         </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="w-full overflow-hidden whitespace-normal break-all truncate line-clamp-1 text-body-xs-medium text-primary">
               <NotificationContent
                 notification={notification}
                 workspaceId={workspace.id}
@@ -109,14 +110,14 @@ export const NotificationItem: FC<TNotificationItem> = observer((props) => {
             />
           </div>
 
-          <div className="relative flex items-center gap-3 text-xs text-custom-text-200">
+          <div className="relative flex items-center gap-3 text-caption-sm-regular text-secondary">
             <div className="w-full overflow-hidden whitespace-normal break-words truncate line-clamp-1">
               {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;
@@ -124,7 +125,7 @@ export const NotificationItem: FC<TNotificationItem> = observer((props) => {
                   </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 b77ae76898..61c2f8ac50 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,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { ArchiveRestore } from "lucide-react";
 // plane imports
@@ -22,7 +19,9 @@ type TNotificationItemArchiveOption = {
   notification: INotification;
 };
 
-export const NotificationItemArchiveOption: FC<TNotificationItemArchiveOption> = observer((props) => {
+export const NotificationItemArchiveOption = observer(function NotificationItemArchiveOption(
+  props: TNotificationItemArchiveOption
+) {
   const { workspaceSlug, notification } = props;
   // hooks
   const { currentNotificationTab } = useWorkspaceNotifications();
@@ -65,9 +64,9 @@ export const NotificationItemArchiveOption: FC<TNotificationItemArchiveOption> =
       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 3c45a46903..c5bc1e6117 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,6 +1,4 @@
-"use client";
-
-import type { FC, ReactNode } from "react";
+import type { ReactNode } from "react";
 import { Tooltip } from "@plane/propel/tooltip";
 // helpers
 import { cn } from "@plane/utils";
@@ -14,7 +12,7 @@ type TNotificationItemOptionButton = {
   children: ReactNode;
 };
 
-export const NotificationItemOptionButton: FC<TNotificationItemOptionButton> = (props) => {
+export function NotificationItemOptionButton(props: TNotificationItemOptionButton) {
   const { tooltipContent = "", buttonClassName = "", children, callBack } = props;
   // hooks
   const { isMobile } = usePlatformOS();
@@ -24,7 +22,7 @@ export const NotificationItemOptionButton: FC<TNotificationItemOptionButton> = (
       <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-shrink-0 w-5 h-5 rounded-xs flex justify-center items-center outline-none bg-layer-1 hover:bg-surface-2",
           buttonClassName
         )}
         onClick={(e) => {
@@ -37,4 +35,4 @@ export const NotificationItemOptionButton: FC<TNotificationItemOptionButton> = (
       </button>
     </Tooltip>
   );
-};
+}
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 490338209e..df3a211fde 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,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import { MessageSquare } from "lucide-react";
 // plane imports
@@ -21,7 +18,9 @@ type TNotificationItemReadOption = {
   notification: INotification;
 };
 
-export const NotificationItemReadOption: FC<TNotificationItemReadOption> = observer((props) => {
+export const NotificationItemReadOption = observer(function NotificationItemReadOption(
+  props: TNotificationItemReadOption
+) {
   const { workspaceSlug, notification } = props;
   // hooks
   const { currentNotificationTab } = useWorkspaceNotifications();
@@ -61,7 +60,7 @@ export const NotificationItemReadOption: FC<TNotificationItemReadOption> = obser
       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 981763b36b..26b0c957c7 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,6 +1,4 @@
-"use client";
-
-import type { FC, Dispatch, SetStateAction } from "react";
+import type { Dispatch, SetStateAction } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { cn } from "@plane/utils";
@@ -20,7 +18,7 @@ type TNotificationOption = {
   setCustomSnoozeModal: Dispatch<SetStateAction<boolean>>;
 };
 
-export const NotificationOption: FC<TNotificationOption> = observer((props) => {
+export const NotificationOption = observer(function NotificationOption(props: TNotificationOption) {
   const {
     workspaceSlug,
     notificationId,
@@ -33,7 +31,11 @@ export const NotificationOption: FC<TNotificationOption> = observer((props) => {
   const notification = useNotification(notificationId);
 
   return (
-    <div className={cn("flex-shrink-0 hidden group-hover:block text-sm", isSnoozeStateModalOpen ? `!block` : ``)}>
+    <div
+      className={cn("flex-shrink-0 hidden group-hover:block text-body-xs-medium", {
+        block: isSnoozeStateModalOpen,
+      })}
+    >
       <div className="relative flex justify-center items-center gap-2">
         {/* read */}
         <NotificationItemReadOption workspaceSlug={workspaceSlug} notification={notification} />
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 e67c43c771..e50e552f17 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,24 +1,18 @@
-"use client";
-
-import type { FC } from "react";
-import { Fragment } from "react";
 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;
   onClose: () => void;
-  onSubmit: (dateTime?: Date | undefined) => Promise<void>;
+  onSubmit: (dateTime?: Date) => Promise<void>;
 };
 
 type FormValues = {
@@ -35,7 +29,7 @@ const defaultValues: FormValues = {
 
 const timeStamps = allTimeIn30MinutesInterval12HoursFormat;
 
-export const NotificationSnoozeModal: FC<TNotificationSnoozeModal> = (props) => {
+export function NotificationSnoozeModal(props: TNotificationSnoozeModal) {
   const { isOpen, onClose, onSubmit: handleSubmitSnooze } = props;
 
   const { workspaceSlug } = useParams();
@@ -113,151 +107,117 @@ export const NotificationSnoozeModal: FC<TNotificationSnoozeModal> = (props) =>
   };
 
   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 2ae2723172..ef09751a01 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,6 +1,4 @@
-"use client";
-
-import type { Dispatch, FC, SetStateAction } from "react";
+import type { Dispatch, SetStateAction } from "react";
 import { Fragment } from "react";
 import { observer } from "mobx-react";
 import { Clock } from "lucide-react";
@@ -27,7 +25,9 @@ type TNotificationItemSnoozeOption = {
   setCustomSnoozeModal: Dispatch<SetStateAction<boolean>>;
 };
 
-export const NotificationItemSnoozeOption: FC<TNotificationItemSnoozeOption> = observer((props) => {
+export const NotificationItemSnoozeOption = observer(function NotificationItemSnoozeOption(
+  props: TNotificationItemSnoozeOption
+) {
   const { workspaceSlug, notification, setIsSnoozeStateModalOpen, customSnoozeModal, setCustomSnoozeModal } = props;
   // hooks
   const { isMobile } = usePlatformOS();
@@ -98,11 +98,11 @@ export const NotificationItemSnoozeOption: FC<TNotificationItemSnoozeOption> = o
               >
                 <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-shrink-0 w-5 h-5 rounded-xs flex justify-center items-center outline-none bg-layer-1 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>
 
@@ -116,10 +116,10 @@ export const NotificationItemSnoozeOption: FC<TNotificationItemSnoozeOption> = o
                 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">
+                  <div className="p-2 rounded-md border border-subtle bg-surface-1 space-y-1">
                     {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 text-left cursor-pointer px-2 p-1 transition-all hover:bg-layer-1 rounded-xs text-secondary text-body-xs-medium"
                         onClick={(e) => {
                           e.preventDefault();
                           e.stopPropagation();
@@ -133,7 +133,7 @@ export const NotificationItemSnoozeOption: FC<TNotificationItemSnoozeOption> = o
                     {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 text-left cursor-pointer px-2 p-1 transition-all hover:bg-layer-1 rounded-xs text-secondary text-body-xs-medium"
                         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 080f5afe70..6354976a40 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/root.tsx
@@ -1,7 +1,4 @@
-"use client";
-import type { FC } from "react";
 import { useCallback } from "react";
-
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
@@ -15,7 +12,7 @@ import { CountChip } from "@/components/common/count-chip";
 // hooks
 import { useWorkspaceNotifications } from "@/hooks/store/notifications";
 import { useWorkspace } from "@/hooks/store/use-workspace";
-
+// plane web components
 import { NotificationListRoot } from "@/plane-web/components/workspace-notifications/list-root";
 // local imports
 import { NotificationEmptyState } from "./empty-state";
@@ -23,7 +20,7 @@ import { AppliedFilters } from "./filters/applied-filter";
 import { NotificationSidebarHeader } from "./header";
 import { NotificationsLoader } from "./loader";
 
-export const NotificationsSidebarRoot: FC = observer(() => {
+export const NotificationsSidebarRoot = observer(function NotificationsSidebarRoot() {
   const { workspaceSlug } = useParams();
   // hooks
   const { getWorkspaceBySlug } = useWorkspace();
@@ -55,12 +52,12 @@ export const NotificationsSidebarRoot: FC = observer(() => {
   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",
-        currentSelectedNotificationId ? "w-0 md:w-2/6" : "w-full md:w-2/6"
+        "relative border-0 md:border-r border-subtle z-[10] flex-shrink-0 bg-surface-1 h-full transition-all max-md:overflow-hidden",
+        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">
+        <Row className="h-header border-b border-subtle flex flex-shrink-0">
           <NotificationSidebarHeader workspaceSlug={workspaceSlug.toString()} />
         </Row>
 
@@ -73,10 +70,11 @@ export const NotificationsSidebarRoot: FC = observer(() => {
             >
               <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 h-full flex justify-center items-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>
@@ -85,7 +83,7 @@ export const NotificationsSidebarRoot: FC = observer(() => {
                 )}
               </div>
               {currentNotificationTab === tab.value && (
-                <div className="border absolute bottom-0 right-0 left-0 rounded-t-md border-custom-primary-100" />
+                <div className="border absolute bottom-0 right-0 left-0 rounded-t-md border-accent-strong" />
               )}
             </div>
           ))}
diff --git a/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx b/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
index 3674fb5332..fd1d2add7d 100644
--- a/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
+++ b/apps/web/core/components/workspace/ConfirmWorkspaceMemberRemove.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { AlertTriangle } from "lucide-react";
@@ -8,7 +6,7 @@ import { Button } from "@plane/propel/button";
 import { useUser } from "@/hooks/store/user";
 import type { Props } from "./confirm-workspace-member-remove";
 
-export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((props) => {
+export const ConfirmWorkspaceMemberRemove = observer(function ConfirmWorkspaceMemberRemove(props: Props) {
   const { isOpen, onClose, onSubmit, userDetails } = props;
   // states
   const [isRemoving, setIsRemoving] = useState(false);
@@ -40,7 +38,7 @@ export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((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">
@@ -54,26 +52,26 @@ export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((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="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">
+                      <Dialog.Title as="h3" className="text-16 font-medium leading-6 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.
@@ -84,10 +82,10 @@ export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((props) =>
                   </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 3a40018e0f..4ab5576a56 100644
--- a/apps/web/core/components/workspace/billing/comparison/base.tsx
+++ b/apps/web/core/components/workspace/billing/comparison/base.tsx
@@ -24,7 +24,7 @@ export const shouldRenderPlanDetail = (planKey: TPlanePlans) => {
   return true;
 };
 
-export const PlansComparisonBase = observer((props: TPlansComparisonBaseProps) => {
+export const PlansComparisonBase = observer(function PlansComparisonBase(props: TPlansComparisonBaseProps) {
   const { planeDetails, isSelfManaged, isCompareAllFeaturesSectionOpen, setIsCompareAllFeaturesSectionOpen } = props;
   // plan details
   const { planDetails, planHighlights, planComparison } = PLANE_PLANS;
@@ -35,35 +35,31 @@ export const PlansComparisonBase = observer((props: TPlansComparisonBaseProps) =
   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="size-full px-2 overflow-x-auto horizontal-scrollbar scrollbar-sm">
       <div className="max-w-full" style={{ minWidth: `${numberOfPlansToRender * 280}px` }}>
         <div className="h-full flex 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("flex-shrink-0 sticky top-2 z-10 bg-layer-1 grid gap-3 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 p-3 space-y-0.5 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="grid gap-3 py-1 text-caption-md text-secondary even:bg-surface-2 rounded-xs"
               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,17 +75,17 @@ export const PlansComparisonBase = observer((props: TPlansComparisonBaseProps) =
             <>
               {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="flex gap-2 items-start text-h5-semibold text-secondary mb-2 pl-2">
                     {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="grid gap-3 text-caption-md text-secondary bg-layer-transparent even:bg-layer-1 rounded-xs"
                         style={{ gridTemplateColumns: `repeat(${numberOfPlansToRender + 1}, minmax(0, 1fr))` }}
                       >
-                        <div className="col-span-1 p-3 flex items-center text-base font-medium">
+                        <div className="col-span-1 p-3 flex items-center text-body-sm-medium">
                           <div className="w-full flex gap-2 items-start justify-between">
                             {feature.title} {feature.comingSoon && <ComingSoonBadge />}
                           </div>
@@ -99,7 +95,7 @@ export const PlansComparisonBase = observer((props: TPlansComparisonBaseProps) =
                             shouldRenderPlanDetail(planKey) && (
                               <div
                                 key={planKey}
-                                className="col-span-1 p-3 flex items-center justify-center text-center"
+                                className="col-span-1 p-3 flex items-center justify-center text-center text-body-xs-regular"
                               >
                                 <PlanFeatureDetail
                                   subscriptionType={getSubscriptionType(planKey)}
@@ -124,14 +120,13 @@ export const PlansComparisonBase = observer((props: TPlansComparisonBaseProps) =
         {/* Toggle Button */}
         <div className="flex items-center justify-center gap-1 my-4 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 67f15421f2..0d5ba24a80 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,6 @@
-import type { FC } from "react";
 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,17 +10,17 @@ type TPlanFeatureDetailProps = {
   data: TPlanFeatureData;
 };
 
-export const PlanFeatureDetail: FC<TPlanFeatureDetailProps> = (props) => {
+export function PlanFeatureDetail(props: TPlanFeatureDetailProps) {
   const { subscriptionType, 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/confirm-workspace-member-remove.tsx b/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
index bf1dc3d0da..8e38061a7d 100644
--- a/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
+++ b/apps/web/core/components/workspace/confirm-workspace-member-remove.tsx
@@ -1,12 +1,10 @@
-"use client";
-
-import React, { useState } from "react";
+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";
 
@@ -20,7 +18,7 @@ export type Props = {
   };
 };
 
-export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((props) => {
+export const ConfirmWorkspaceMemberRemove = observer(function ConfirmWorkspaceMemberRemove(props: Props) {
   const { isOpen, onClose, onSubmit, userDetails } = props;
   // states
   const [isRemoving, setIsRemoving] = useState(false);
@@ -42,79 +40,46 @@ export const ConfirmWorkspaceMemberRemove: React.FC<Props> = observer((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="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 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 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">
+            <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 6e1d6c5015..578b53d9d2 100644
--- a/apps/web/core/components/workspace/create-workspace-form.tsx
+++ b/apps/web/core/components/workspace/create-workspace-form.tsx
@@ -1,6 +1,4 @@
-"use client";
-
-import type { Dispatch, SetStateAction, FC } from "react";
+import type { Dispatch, SetStateAction } from "react";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
@@ -40,7 +38,7 @@ type Props = {
 
 const workspaceService = new WorkspaceService();
 
-export const CreateWorkspaceForm: FC<Props> = observer((props) => {
+export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props: Props) {
   const { t } = useTranslation();
   const {
     onSubmit,
@@ -69,47 +67,46 @@ export const CreateWorkspaceForm: FC<Props> = observer((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);
 
-          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"),
-              });
+        try {
+          const workspaceResponse = await createWorkspace(formData);
+          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 {
+          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"),
       });
+    }
   };
 
   useEffect(
@@ -121,9 +118,14 @@ export const CreateWorkspaceForm: FC<Props> = observer((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>
@@ -160,16 +162,16 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
                 />
               )}
             />
-            <span className="text-xs text-red-500">{errors?.name?.message}</span>
+            <span className="text-11 text-red-500">{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>
           </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 px-3 bg-layer-2">
+            <span className="whitespace-nowrap text-12 text-secondary">{window && window.location.host}/</span>
             <Controller
               control={control}
               name="slug"
@@ -193,20 +195,20 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
                   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-red-500">{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-red-500">{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-red-500">{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>
@@ -222,12 +224,12 @@ export const CreateWorkspaceForm: FC<Props> = observer((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) => (
@@ -239,26 +241,25 @@ export const CreateWorkspaceForm: FC<Props> = observer((props) => {
               )}
             />
             {errors.organization_size && (
-              <span className="text-sm text-red-500">{errors.organization_size.message}</span>
+              <span className="text-13 text-red-500">{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"
+          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 ffdfc7a27b..a184b09ef6 100644
--- a/apps/web/core/components/workspace/delete-workspace-form.tsx
+++ b/apps/web/core/components/workspace/delete-workspace-form.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
@@ -29,7 +27,7 @@ const defaultValues = {
   confirmDelete: "",
 };
 
-export const DeleteWorkspaceForm: React.FC<Props> = observer((props) => {
+export const DeleteWorkspaceForm = observer(function DeleteWorkspaceForm(props: Props) {
   const { data, onClose } = props;
   // router
   const router = useAppRouter();
@@ -95,23 +93,23 @@ export const DeleteWorkspaceForm: React.FC<Props> = observer((props) => {
       <div className="flex flex-col sm:flex-row items-center sm:items-start gap-4">
         <span
           className={cn(
-            "flex-shrink-0 grid place-items-center rounded-full size-12 sm:size-10 bg-red-500/20 text-red-100"
+            "shrink-0 grid place-items-center rounded-full size-12 sm:size-10 bg-danger-subtle text-danger"
           )}
         >
-          <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="break-words text-body-xs-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.
             </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="text-secondary mt-4">
+            <p className="break-words text-body-xs-regular ">Type in this workspace&apos;s name to continue.</p>
             <Controller
               control={control}
               name="workspaceName"
@@ -132,10 +130,10 @@ export const DeleteWorkspaceForm: React.FC<Props> = observer((props) => {
             />
           </div>
 
-          <div className="text-custom-text-200 mt-4">
-            <p className="text-sm">
+          <div className="text-secondary mt-4">
+            <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
@@ -161,10 +159,10 @@ export const DeleteWorkspaceForm: React.FC<Props> = observer((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 13330aa67b..1a7884491b 100644
--- a/apps/web/core/components/workspace/invite-modal/actions.tsx
+++ b/apps/web/core/components/workspace/invite-modal/actions.tsx
@@ -19,7 +19,7 @@ type TInvitationModalActionsProps = {
   className?: string;
 };
 
-export const InvitationModalActions: React.FC<TInvitationModalActionsProps> = observer((props) => {
+export const InvitationModalActions = observer(function InvitationModalActions(props: TInvitationModalActionsProps) {
   const {
     isInviteDisabled = false,
     isSubmitting = false,
@@ -38,7 +38,7 @@ export const InvitationModalActions: React.FC<TInvitationModalActionsProps> = ob
       <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,
           }
@@ -50,10 +50,10 @@ export const InvitationModalActions: React.FC<TInvitationModalActionsProps> = ob
         {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 00de284881..569bc28309 100644
--- a/apps/web/core/components/workspace/invite-modal/fields.tsx
+++ b/apps/web/core/components/workspace/invite-modal/fields.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import type { Control, FieldArrayWithId, FormState } from "react-hook-form";
 import { Controller } from "react-hook-form";
@@ -22,7 +20,7 @@ type TInvitationFieldsProps = {
   className?: string;
 };
 
-export const InvitationFields = observer((props: TInvitationFieldsProps) => {
+export const InvitationFields = observer(function InvitationFields(props: TInvitationFieldsProps) {
   const {
     workspaceSlug,
     fields,
@@ -41,7 +39,10 @@ export const InvitationFields = observer((props: TInvitationFieldsProps) => {
   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="relative group mb-1 flex items-start justify-between gap-x-4 text-body-xs-regular w-full"
+        >
           <div className="w-full">
             <Controller
               control={control}
@@ -64,16 +65,18 @@ export const InvitationFields = observer((props: TInvitationFieldsProps) => {
                     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">
+                      {errors.emails?.[index]?.email?.message}
+                    </span>
                   )}
                 </>
               )}
             />
           </div>
-          <div className="flex items-center justify-between gap-2 flex-shrink-0 ">
+          <div className="flex items-center justify-between gap-2 shrink-0">
             <div className="flex flex-col gap-1">
               <Controller
                 control={control}
@@ -82,7 +85,7 @@ export const InvitationFields = observer((props: TInvitationFieldsProps) => {
                 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"
                     input
@@ -101,8 +104,12 @@ export const InvitationFields = observer((props: TInvitationFieldsProps) => {
             </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 cbf53e237d..1a806cf8e7 100644
--- a/apps/web/core/components/workspace/invite-modal/form.tsx
+++ b/apps/web/core/components/workspace/invite-modal/form.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { Dialog } from "@headlessui/react";
 
@@ -12,16 +10,16 @@ type TInvitationFormProps = {
   className?: string;
 };
 
-export const InvitationForm = observer((props: TInvitationFormProps) => {
+export const InvitationForm = observer(function InvitationForm(props: TInvitationFormProps) {
   const { title, description, children, actions, onSubmit, className } = props;
 
   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 e33f5541a1..ee5a008487 100644
--- a/apps/web/core/components/workspace/logo.tsx
+++ b/apps/web/core/components/workspace/logo.tsx
@@ -9,7 +9,7 @@ type Props = {
   classNames?: string;
 };
 
-export const WorkspaceLogo = observer((props: Props) => {
+export const WorkspaceLogo = observer(function WorkspaceLogo(props: Props) {
   // translation
   const { t } = useTranslation();
 
@@ -17,7 +17,7 @@ export const WorkspaceLogo = observer((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 : ""}`
       )}
     >
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 1e62cf5056..9e538b8962 100644
--- a/apps/web/core/components/workspace/settings/invitations-list-item.tsx
+++ b/apps/web/core/components/workspace/settings/invitations-list-item.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -19,12 +16,13 @@ import { ConfirmWorkspaceMemberRemove } from "@/components/workspace/confirm-wor
 import { captureClick } from "@/helpers/event-tracker.helper";
 import { useMember } from "@/hooks/store/use-member";
 import { useUserPermissions } from "@/hooks/store/user";
+import { useWorkspace } from "@/hooks/store/use-workspace";
 
 type Props = {
   invitationId: string;
 };
 
-export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
+export const WorkspaceInvitationsListItem = observer(function WorkspaceInvitationsListItem(props: Props) {
   const { invitationId } = props;
   // router
   const { workspaceSlug } = useParams();
@@ -34,6 +32,7 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
   const { t } = useTranslation();
   // store hooks
   const { allowPermissions, workspaceInfoBySlug } = useUserPermissions();
+  const { mutateWorkspaceMembersActivity } = useWorkspace();
   const {
     workspace: { updateMemberInvitation, deleteMemberInvitation, getWorkspaceInvitationDetails },
   } = useMember();
@@ -53,36 +52,36 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
   );
 
   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.",
+      });
+      void mutateWorkspaceMembersActivity(workspaceSlug);
+    } 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);
@@ -92,7 +91,7 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
   const MENU_ITEMS: TContextMenuItem[] = [
     {
       key: "copy-link",
-      action: handleCopyText,
+      action: () => void handleCopyText(),
       title: t("common.actions.copy_link"),
       icon: LinkIcon,
       shouldRender: !!invitationDetails.invite_link,
@@ -108,8 +107,8 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
       title: t("common.remove"),
       icon: Trash2,
       shouldRender: isAdmin,
-      className: "text-red-500",
-      iconClassName: "text-red-500",
+      className: "text-danger",
+      iconClassName: "text-danger",
     },
   ];
 
@@ -124,25 +123,25 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
         }}
         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 items-center justify-between px-3 py-4 hover:bg-layer-transparent-hover w-full h-full">
         <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 capitalize text-tertiary">
             {(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]}
@@ -160,7 +159,8 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
 
               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!",
@@ -172,7 +172,11 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
             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 (
@@ -195,7 +199,7 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((props) => {
                     className={cn(
                       "flex items-center gap-2",
                       {
-                        "text-custom-text-400": item.disabled,
+                        "text-placeholder": item.disabled,
                       },
                       item.className
                     )}
@@ -206,8 +210,8 @@ export const WorkspaceInvitationsListItem: FC<Props> = observer((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("text-tertiary whitespace-pre-line", {
+                            "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 bdcb3d3a0e..d7b5843261 100644
--- a/apps/web/core/components/workspace/settings/member-columns.tsx
+++ b/apps/web/core/components/workspace/settings/member-columns.tsx
@@ -10,12 +10,13 @@ import { Pill, EPillVariant, EPillSize } from "@plane/propel/pill";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import type { IUser, IWorkspaceMember } from "@plane/types";
 // plane ui
-import { CustomSelect, PopoverMenu, cn } from "@plane/ui";
+import { CustomSelect, PopoverMenu } from "@plane/ui";
 // helpers
 import { getFileURL } from "@plane/utils";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
 import { useUser, useUserPermissions } from "@/hooks/store/user";
+import { useWorkspace } from "@/hooks/store/use-workspace";
 // plane web constants
 
 export interface RowData {
@@ -37,7 +38,7 @@ type AccountTypeProps = {
   workspaceSlug: string;
 };
 
-export const NameColumn: React.FC<NameProps> = (props) => {
+export function NameColumn(props: NameProps) {
   const { rowData, workspaceSlug, isAdmin, currentUser, setRemoveMemberModal } = props;
   // derived values
   const { avatar_url, display_name, email, first_name, id, last_name } = rowData.member;
@@ -45,17 +46,17 @@ export const NameColumn: React.FC<NameProps> = (props) => {
 
   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">
               {isSuspended ? (
-                <div className="bg-custom-background-80 rounded-full p-0.5">
-                  <SuspendedUserIcon className="h-4 w-4 text-custom-text-400" />
+                <div className="bg-layer-1 rounded-full p-0.5">
+                  <SuspendedUserIcon className="h-4 w-4 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 h-6 w-6 items-center justify-center rounded-full capitalize text-on-color">
                     <img
                       src={getFileURL(avatar_url)}
                       className="absolute left-0 top-0 h-full w-full rounded-full object-cover"
@@ -65,12 +66,12 @@ export const NameColumn: React.FC<NameProps> = (props) => {
                 </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 h-4 w-4 text-11 items-center justify-center rounded-full  capitalize text-tertiary bg-layer-3">
                     {(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,8 +84,16 @@ export const NameColumn: React.FC<NameProps> = (props) => {
                 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
+                    role="button"
+                    tabIndex={0}
                     className="flex items-center gap-x-3 cursor-pointer"
                     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 "}
@@ -97,9 +106,9 @@ export const NameColumn: React.FC<NameProps> = (props) => {
       )}
     </Disclosure>
   );
-};
+}
 
-export const AccountTypeColumn: React.FC<AccountTypeProps> = observer((props) => {
+export const AccountTypeColumn = observer(function AccountTypeColumn(props: AccountTypeProps) {
   const { rowData, workspaceSlug } = props;
   // form info
   const {
@@ -112,6 +121,7 @@ export const AccountTypeColumn: React.FC<AccountTypeProps> = observer((props) =>
   const {
     workspace: { updateMember },
   } = useMember();
+  const { mutateWorkspaceMembersActivity } = useWorkspace();
   const { data: currentUser } = useUser();
 
   // derived values
@@ -139,29 +149,31 @@ export const AccountTypeColumn: React.FC<AccountTypeProps> = observer((props) =>
           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,
+                  });
+                  void mutateWorkspaceMembersActivity(workspaceSlug);
+                } 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 ">
                   <span>{ROLE[rowData.role]}</span>
                 </div>
               }
-              buttonClassName={`!px-0 !justify-start hover:bg-custom-background-100 ${errors.role ? "border-red-500" : "border-none"}`}
+              buttonClassName={`!px-0 !justify-start hover:bg-surface-1 ${errors.role ? "border-red-500" : "border-none"}`}
               className="rounded-md p-0 w-32"
               input
             >
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 8cd3b90207..f980e4eee3 100644
--- a/apps/web/core/components/workspace/settings/members-list-item.tsx
+++ b/apps/web/core/components/workspace/settings/members-list-item.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { isEmpty } from "lodash-es";
 import { observer } from "mobx-react";
 // plane imports
@@ -12,6 +9,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";
+import type { RowData } from "@/components/workspace/settings/member-columns";
 // helpers
 import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 // hooks
@@ -26,7 +24,7 @@ type Props = {
   memberDetails: (IWorkspaceMember | null)[];
 };
 
-export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
+export const WorkspaceMembersListItem = observer(function WorkspaceMembersListItem(props: Props) {
   const { memberDetails } = props;
   const { columns, workspaceSlug, removeMemberModal, setRemoveMemberModal } = useMemberColumns();
   // router
@@ -37,7 +35,7 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
     workspace: { removeMemberFromWorkspace },
   } = useMember();
   const { leaveWorkspace } = useUserPermissions();
-  const { getWorkspaceRedirectionUrl } = useWorkspace();
+  const { getWorkspaceRedirectionUrl, mutateWorkspaceMembersActivity } = useWorkspace();
   const { fetchCurrentUserSettings } = useUserSettings();
   const { t } = useTranslation();
   // derived values
@@ -45,43 +43,48 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
   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());
+      captureSuccess({
+        eventName: MEMBER_TRACKER_EVENTS.workspace.leave,
+        payload: {
+          workspace: workspaceSlug,
+        },
       });
+    } catch (err: unknown) {
+      const error = err as { error?: string };
+      const errorForCapture: Error | string = err instanceof Error ? err : String(err);
+      captureError({
+        eventName: MEMBER_TRACKER_EVENTS.workspace.leave,
+        payload: {
+          workspace: workspaceSlug,
+        },
+        error: errorForCapture,
+      });
+      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);
+      void mutateWorkspaceMembersActivity(workspaceSlug);
+    } 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) => {
@@ -100,7 +103,7 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
   if (isEmpty(columns)) return <MembersLayoutLoader />;
 
   return (
-    <div className="border-t border-custom-border-100 grid">
+    <div className="border-t border-subtle grid">
       {removeMemberModal && (
         <ConfirmWorkspaceMemberRemove
           isOpen={removeMemberModal.member.id.length > 0}
@@ -112,14 +115,16 @@ export const WorkspaceMembersListItem: FC<Props> = observer((props) => {
           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-[40px] 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 b71ca37ede..f1560c143f 100644
--- a/apps/web/core/components/workspace/settings/members-list.tsx
+++ b/apps/web/core/components/workspace/settings/members-list.tsx
@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -17,7 +16,10 @@ import { useMember } from "@/hooks/store/use-member";
 import { WorkspaceInvitationsListItem } from "./invitations-list-item";
 import { WorkspaceMembersListItem } from "./members-list-item";
 
-export const WorkspaceMembersList: FC<{ searchQuery: string; isAdmin: boolean }> = observer((props) => {
+export const WorkspaceMembersList = observer(function WorkspaceMembersList(props: {
+  searchQuery: string;
+  isAdmin: boolean;
+}) {
   const { searchQuery, isAdmin } = props;
   const [showPendingInvites, setShowPendingInvites] = useState<boolean>(true);
 
@@ -64,10 +66,10 @@ export const WorkspaceMembersList: FC<{ searchQuery: string; isAdmin: boolean }>
 
   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 && (
@@ -79,9 +81,7 @@ export const WorkspaceMembersList: FC<{ searchQuery: string; isAdmin: boolean }>
           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="text-h5-medium pt-2 pb-2">{t("workspace_settings.settings.members.pending_invites")}</h4>
                 {searchedInvitationsIds && (
                   <CountChip count={searchedInvitationsIds.length} className="h-5  m-auto ml-2" />
                 )}
@@ -91,7 +91,7 @@ export const WorkspaceMembersList: FC<{ searchQuery: string; isAdmin: boolean }>
           }
         >
           <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 834abe61f5..432cfc18ad 100644
--- a/apps/web/core/components/workspace/settings/workspace-details.tsx
+++ b/apps/web/core/components/workspace/settings/workspace-details.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
@@ -20,9 +17,9 @@ import type { IWorkspace } from "@plane/types";
 import { CustomSelect, Input } from "@plane/ui";
 import { copyUrlToClipboard, getFileURL } from "@plane/utils";
 // components
-import { LogoSpinner } from "@/components/common/logo-spinner";
 import { WorkspaceImageUploadModal } from "@/components/core/modals/workspace-image-upload-modal";
 // helpers
+import { TimezoneSelect } from "@/components/global/timezone-select";
 import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
 import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUserPermissions } from "@/hooks/store/user";
@@ -34,9 +31,10 @@ const defaultValues: Partial<IWorkspace> = {
   url: "",
   organization_size: "2-10",
   logo_url: null,
+  timezone: "UTC",
 };
 
-export const WorkspaceDetails: FC = observer(() => {
+export const WorkspaceDetails = observer(function WorkspaceDetails() {
   // states
   const [isLoading, setIsLoading] = useState(false);
   const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
@@ -66,64 +64,69 @@ export const WorkspaceDetails: FC = observer(() => {
     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);
+      captureSuccess({
+        eventName: WORKSPACE_TRACKER_EVENTS.update,
+        payload: { slug: currentWorkspace.slug },
       });
-    setTimeout(() => {
-      setIsLoading(false);
-    }, 300);
+      setToast({
+        title: "Success!",
+        type: TOAST_TYPE.SUCCESS,
+        message: "Workspace updated successfully",
+      });
+    } catch (err: unknown) {
+      captureError({
+        eventName: WORKSPACE_TRACKER_EVENTS.update,
+        payload: { slug: currentWorkspace.slug },
+        error: err instanceof Error ? err : new Error(String(err)),
+      });
+      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(() => {
@@ -132,13 +135,7 @@ export const WorkspaceDetails: FC = observer(() => {
 
   const isAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE);
 
-  if (!currentWorkspace)
-    return (
-      <div className="grid h-full w-full place-items-center px-4 sm:px-0">
-        <LogoSpinner />
-      </div>
-    );
-
+  if (!currentWorkspace) return <></>;
   return (
     <>
       <Controller
@@ -158,7 +155,7 @@ export const WorkspaceDetails: FC = observer(() => {
         )}
       />
       <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 gap-5 border-b border-subtle pb-7 items-start">
           <div className="flex flex-col gap-1">
             <button type="button" onClick={() => setIsImageUploadModalOpen(true)} disabled={!isAdmin}>
               {workspaceLogo && workspaceLogo !== "" ? (
@@ -170,20 +167,20 @@ export const WorkspaceDetails: FC = observer(() => {
                   />
                 </div>
               ) : (
-                <div className="relative flex h-14 w-14 items-center justify-center rounded bg-[#026292] p-4 uppercase text-white">
+                <div className="relative flex h-14 w-14 items-center justify-center rounded-sm bg-accent-primary p-4 uppercase text-on-color">
                   {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="text-h5-semibold leading-6 mb:-my-5">{watch("name")}</div>
+            <button type="button" onClick={handleCopyUrl} className="text-body-xs-regular tracking-tight text-left">{`${
               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"
+                className="flex items-center gap-1.5 text-left text-caption-sm-medium text-accent-primary"
                 onClick={() => setIsImageUploadModalOpen(true)}
               >
                 {workspaceLogo && workspaceLogo !== "" ? (
@@ -202,7 +199,7 @@ export const WorkspaceDetails: FC = observer(() => {
         <div className="my-8 flex flex-col gap-8">
           <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>
+              <h4 className="text-body-xs-regular text-tertiary">{t("workspace_settings.settings.general.name")}</h4>
               <Controller
                 control={control}
                 name="name"
@@ -223,7 +220,7 @@ export const WorkspaceDetails: FC = observer(() => {
                     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}
                   />
                 )}
@@ -231,7 +228,9 @@ export const WorkspaceDetails: FC = observer(() => {
             </div>
 
             <div className="flex flex-col gap-1 ">
-              <h4 className="text-sm">{t("workspace_settings.settings.general.company_size")}</h4>
+              <h4 className="text-body-xs-regular text-tertiary">
+                {t("workspace_settings.settings.general.company_size")}
+              </h4>
               <Controller
                 name="organization_size"
                 control={control}
@@ -243,7 +242,7 @@ export const WorkspaceDetails: FC = observer(() => {
                       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}
                   >
@@ -258,7 +257,7 @@ export const WorkspaceDetails: FC = observer(() => {
             </div>
 
             <div className="flex flex-col gap-1 ">
-              <h4 className="text-sm">{t("workspace_settings.settings.general.url")}</h4>
+              <h4 className="text-body-xs-regular text-tertiary">{t("workspace_settings.settings.general.url")}</h4>
               <Controller
                 control={control}
                 name="url"
@@ -274,12 +273,32 @@ export const WorkspaceDetails: FC = observer(() => {
                     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 className="flex flex-col gap-1 ">
+              <h4 className="text-body-xs-regular text-tertiary">
+                {t("workspace_settings.settings.general.workspace_timezone")}
+              </h4>
+              <Controller
+                name="timezone"
+                control={control}
+                render={({ field: { value, onChange } }) => (
+                  <>
+                    <TimezoneSelect
+                      value={value}
+                      onChange={onChange}
+                      buttonClassName="border-none"
+                      disabled={!isAdmin}
+                    />
+                  </>
+                )}
+              />
+            </div>
           </div>
 
           {isAdmin && (
@@ -287,7 +306,10 @@ export const WorkspaceDetails: FC = observer(() => {
               <Button
                 data-ph-element={WORKSPACE_TRACKER_ELEMENTS.UPDATE_WORKSPACE_BUTTON}
                 variant="primary"
-                onClick={handleSubmit(onSubmit)}
+                size="lg"
+                onClick={(e) => {
+                  void handleSubmit(onSubmit)(e);
+                }}
                 loading={isLoading}
               >
                 {isLoading ? t("updating") : t("workspace_settings.settings.general.update_workspace")}
diff --git a/apps/web/core/components/workspace/sidebar/dropdown-item.tsx b/apps/web/core/components/workspace/sidebar/dropdown-item.tsx
index 180e690ca6..8d2857afbc 100644
--- a/apps/web/core/components/workspace/sidebar/dropdown-item.tsx
+++ b/apps/web/core/components/workspace/sidebar/dropdown-item.tsx
@@ -1,4 +1,3 @@
-"use client";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
@@ -19,7 +18,7 @@ type TProps = {
   handleWorkspaceNavigation: (workspace: IWorkspace) => void;
   handleClose: () => void;
 };
-const SidebarDropdownItem = observer((props: TProps) => {
+const SidebarDropdownItem = observer(function SidebarDropdownItem(props: TProps) {
   const { workspace, activeWorkspace, handleItemClick, handleWorkspaceNavigation, handleClose } = props;
   // router
   const { workspaceSlug } = useParams();
@@ -40,21 +39,21 @@ const SidebarDropdownItem = observer((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-between gap-1 rounded-sm p-1 text-13 text-primary ">
           <div className="flex items-center justify-start gap-2.5 w-[80%] relative">
             <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 p-2 text-14 uppercase font-medium border-subtle ${
+                !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 left-0 top-0 h-full w-full rounded-sm object-cover"
                   alt={t("workspace_logo")}
                 />
               ) : (
@@ -63,20 +62,20 @@ const SidebarDropdownItem = observer((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-ellipsis text-13 font-medium ${workspaceSlug === workspace.slug ? "" : "text-secondary"}`}
               >
                 {workspace.name}
               </div>
-              <div className="text-sm text-custom-text-300 flex gap-2 capitalize w-fit">
+              <div className="text-13 text-tertiary flex gap-2 capitalize w-fit">
                 <span>{getUserRole(workspace.role)?.toLowerCase() || "guest"}</span>
-                <div className="w-1 h-1 bg-custom-text-300/50 rounded-full m-auto" />
+                <div className="w-1 h-1 bg-layer-1/50 rounded-full m-auto" />
                 <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" />
+              <Check className="h-5 w-5 text-primary" />
             </span>
           ) : (
             <SubscriptionPill workspace={workspace} />
@@ -88,21 +87,27 @@ const SidebarDropdownItem = observer((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 border border-strong rounded-md py-1.5 px-2.5 gap-1.5 hover:text-secondary text-secondary hover:border-strong bg-layer-2 hover:shadow-raised-100 transition-colors"
                 >
-                  <Settings className="h-4 w-4 my-auto" />
-                  <span className="text-sm font-medium my-auto">{t("settings")}</span>
+                  <Settings className="h-4 w-4 my-auto flex-shrink-0" />
+                  <span className="text-13 font-medium my-auto 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 border border-strong rounded-md py-1.5 px-2.5 gap-1.5 hover:text-secondary text-secondary hover:border-strong bg-layer-2 hover:shadow-raised-100 transition-colors"
                 >
-                  <UserPlus className="h-4 w-4 my-auto" />
-                  <span className="text-sm font-medium my-auto">
+                  <UserPlus className="h-4 w-4 my-auto flex-shrink-0" />
+                  <span className="text-13 font-medium my-auto whitespace-nowrap">
                     {t("project_settings.members.invite_members.title")}
                   </span>
                 </Link>
diff --git a/apps/web/core/components/workspace/sidebar/dropdown.tsx b/apps/web/core/components/workspace/sidebar/dropdown.tsx
deleted file mode 100644
index e9f3adee0a..0000000000
--- a/apps/web/core/components/workspace/sidebar/dropdown.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-"use client";
-
-import { observer } from "mobx-react";
-// hooks
-import { useAppRail } from "@/hooks/use-app-rail";
-// components
-import { WorkspaceAppSwitcher } from "@/plane-web/components/workspace/app-switcher";
-import { UserMenuRoot } from "./user-menu-root";
-import { WorkspaceMenuRoot } from "./workspace-menu-root";
-
-export const SidebarDropdown = observer(() => {
-  // hooks
-  const { shouldRenderAppRail, isEnabled: isAppRailEnabled } = useAppRail();
-
-  return (
-    <div className="flex items-center justify-center gap-1.5 w-full">
-      <WorkspaceMenuRoot />
-      {isAppRailEnabled && !shouldRenderAppRail && <WorkspaceAppSwitcher />}
-      <UserMenuRoot />
-    </div>
-  );
-});
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 7b79701230..24418d7bf0 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import type {
@@ -42,7 +40,7 @@ type Props = {
   handleDrop: (self: DropTargetRecord, source: ElementDragPayload, location: DragLocationHistory) => void;
 };
 
-export const FavoriteFolder: React.FC<Props> = (props) => {
+export function FavoriteFolder(props: Props) {
   const { favorite, handleRemoveFromFavorites, isLastChild, handleDrop } = props;
   // store hooks
   const { fetchGroupedFavorites } = useFavorite();
@@ -82,11 +80,11 @@ export const FavoriteFolder: React.FC<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="rounded-sm flex gap-1 bg-surface-1 text-13 p-1 pr-2">
                   <div className="size-5 grid place-items-center flex-shrink-0">
                     <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();
@@ -148,23 +146,23 @@ export const FavoriteFolder: React.FC<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 w-full px-2 py-1.5 flex items-center rounded-md 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">
+              <div className="flex-shrink-0 w-3 h-3 rounded-xs absolute left-0 hidden group-hover:flex justify-center items-center transition-colors bg-surface-2 cursor-pointer text-secondary hover:text-primary">
                 <GripVertical className="w-3 h-3" />
               </div>
 
@@ -187,7 +185,7 @@ export const FavoriteFolder: React.FC<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",
+                            "hidden group-hover/project-item:flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded-sm text-placeholder cursor-grab",
                             {
                               "cursor-not-allowed opacity-60": favorite.sort_order === null,
                               "cursor-grabbing": isDragging,
@@ -200,7 +198,7 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
                       <div className="size-5 grid place-items-center flex-shrink-0">
                         <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>
@@ -208,7 +206,7 @@ export const FavoriteFolder: React.FC<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 p-0.5 text-placeholder hover:bg-layer-1 rounded-sm"
                     >
                       <MoreHorizontal className="size-3" />
                     </span>
@@ -232,7 +230,7 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
                   </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>
@@ -240,18 +238,15 @@ export const FavoriteFolder: React.FC<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 group-hover/project-item:inline-block p-0.5 rounded-sm 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,
                     })}
                   />
@@ -289,4 +284,4 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
       </Disclosure>
     </>
   );
-};
+}
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 b13c175de6..35b2d4d3df 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,5 +1,3 @@
-"use client";
-import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
 // ui
@@ -15,7 +13,7 @@ type Props = {
   isDragging: boolean;
 };
 
-export const FavoriteItemDragHandle: FC<Props> = observer((props) => {
+export const FavoriteItemDragHandle = observer(function FavoriteItemDragHandle(props: Props) {
   const { sort_order, isDragging } = props;
   // store hooks
   const { isMobile } = usePlatformOS();
@@ -29,7 +27,7 @@ export const FavoriteItemDragHandle: FC<Props> = observer((props) => {
     >
       <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",
+          "hidden group-hover/project-item:flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded-sm text-placeholder cursor-grab",
           {
             "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 995b26df1c..84deb7784a 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,5 +1,3 @@
-"use client";
-import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
 import { MoreHorizontal, Star } from "lucide-react";
@@ -18,7 +16,7 @@ type Props = {
   handleRemoveFromFavorites: (favorite: IFavorite) => void;
 };
 
-export const FavoriteItemQuickAction: FC<Props> = observer((props) => {
+export const FavoriteItemQuickAction = observer(function FavoriteItemQuickAction(props: Props) {
   const { ref, isMenuActive, onChange, handleRemoveFromFavorites, favorite } = props;
   // translation
   const { t } = useTranslation();
@@ -26,10 +24,7 @@ export const FavoriteItemQuickAction: FC<Props> = observer((props) => {
   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 p-0.5 text-placeholder hover:bg-layer-1 rounded-sm">
           <MoreHorizontal className="size-4" />
         </span>
       }
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 b408e6e867..65d42314cf 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,5 +1,3 @@
-"use client";
-import type { FC } from "react";
 import React from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -13,7 +11,7 @@ type Props = {
   icon: React.ReactNode;
 };
 
-export const FavoriteItemTitle: FC<Props> = observer((props) => {
+export const FavoriteItemTitle = observer(function FavoriteItemTitle(props: Props) {
   const { href, title, icon } = props;
   // store hooks
   const { toggleSidebar } = useAppTheme();
@@ -27,7 +25,7 @@ export const FavoriteItemTitle: FC<Props> = observer((props) => {
     <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>
+        <span className="text-13 leading-5 font-medium flex-1 truncate">{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 b04c8f02c6..2bd28f3f28 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,5 +1,3 @@
-"use client";
-import type { FC } from "react";
 import React from "react";
 // helpers
 import { cn } from "@plane/utils";
@@ -10,16 +8,16 @@ type Props = {
   isMenuActive?: boolean;
 };
 
-export const FavoriteItemWrapper: FC<Props> = (props) => {
+export function FavoriteItemWrapper(props: Props) {
   const { children, elementRef, isMenuActive = false } = props;
   return (
     <>
       <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 w-full px-2 py-1.5 flex items-center rounded-md text-primary hover:bg-layer-transparent-hover",
           {
-            "bg-custom-sidebar-background-90": isMenuActive,
+            "bg-surface-2": isMenuActive,
           }
         )}
       >
@@ -27,4 +25,4 @@ export const FavoriteItemWrapper: FC<Props> = (props) => {
       </div>
     </>
   );
-};
+}
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 17c86ea6e2..7d11050992 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,5 +1,3 @@
-"use client";
-
 import { Logo } from "@plane/propel/emoji-icon-picker";
 import { PageIcon } from "@plane/propel/icons";
 // plane imports
@@ -8,7 +6,7 @@ import type { IFavorite, TLogoProps } from "@plane/types";
 // plane web constants
 import { FAVORITE_ITEM_ICONS, FAVORITE_ITEM_LINKS } from "@/plane-web/constants/sidebar-favorites";
 
-export const getFavoriteItemIcon = (type: string, logo?: TLogoProps | undefined) => {
+export const getFavoriteItemIcon = (type: string, logo?: TLogoProps) => {
   const Icon = FAVORITE_ITEM_ICONS[type] || PageIcon;
 
   return (
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 0aa4b22e22..733367663a 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,7 +1,4 @@
-"use client";
-
-import type { FC } from "react";
-import React, { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import type {
   DropTargetRecord,
@@ -33,7 +30,7 @@ type Props = {
   handleDrop: (self: DropTargetRecord, source: ElementDragPayload, location: DragLocationHistory) => void;
 };
 
-export const FavoriteRoot: FC<Props> = observer((props) => {
+export const FavoriteRoot = observer(function FavoriteRoot(props: Props) {
   // props
   const { isLastChild, parentId, workspaceSlug, favorite, handleRemoveFromFavorites, handleDrop } = props;
   // store hooks
@@ -72,7 +69,7 @@ export const FavoriteRoot: FC<Props> = observer((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 text-13 p-1 pr-2">
                   <FavoriteItemTitle href={itemLink} icon={itemIcon} title={itemTitle} />
                 </div>
               );
@@ -123,7 +120,7 @@ export const FavoriteRoot: FC<Props> = observer((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 02eb45acd2..43262fac8d 100644
--- a/apps/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
+++ b/apps/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import type {
@@ -34,7 +32,7 @@ import type { TargetData } from "./favorites.helpers";
 import { getInstructionFromPayload } from "./favorites.helpers";
 import { NewFavoriteFolder } from "./new-fav-folder";
 
-export const SidebarFavoritesMenu = observer(() => {
+export const SidebarFavoritesMenu = observer(function SidebarFavoritesMenu() {
   // states
   const [createNewFolder, setCreateNewFolder] = useState<boolean | string | null>(null);
   const [isDragging, setIsDragging] = useState(false);
@@ -180,16 +178,16 @@ export const SidebarFavoritesMenu = observer(() => {
         <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 w-full flex items-center justify-between px-2 py-1.5 rounded-sm 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",
+              "w-full flex items-center gap-1 whitespace-nowrap text-left text-13 font-semibold text-placeholder",
               {
-                "bg-custom-sidebar-background-80 opacity-60": isDragging,
+                "bg-layer-1 opacity-60": isDragging,
               }
             )}
             onClick={() => toggleFavoriteMenu(!isFavoriteMenuOpen)}
@@ -199,13 +197,13 @@ export const SidebarFavoritesMenu = observer(() => {
                 : "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">
             <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"
+                className="p-0.5 rounded-sm hover:bg-layer-transparent-hover flex-shrink-0 grid place-items-center"
                 onClick={() => {
                   setCreateNewFolder(true);
                   if (!isFavoriteMenuOpen) toggleFavoriteMenu(!isFavoriteMenuOpen);
@@ -218,7 +216,7 @@ export const SidebarFavoritesMenu = observer(() => {
             <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="p-0.5 rounded-sm hover:bg-layer-transparent-hover flex-shrink-0 grid place-items-center"
               onClick={() => toggleFavoriteMenu(!isFavoriteMenuOpen)}
               aria-label={t(
                 isFavoriteMenuOpen
@@ -248,7 +246,7 @@ export const SidebarFavoritesMenu = observer(() => {
               {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="text-placeholder text-11 font-medium px-8 py-1.5">{t("no_favorites_yet")}</span>
                 </>
               ) : (
                 orderBy(Object.values(groupedFavorites), "sequence", "desc")
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 f8be94eb60..724b237930 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
@@ -26,7 +26,7 @@ type TProps = {
   defaultName?: string;
   favoriteId?: string;
 };
-export const NewFavoriteFolder = observer((props: TProps) => {
+export const NewFavoriteFolder = observer(function NewFavoriteFolder(props: TProps) {
   const { setCreateNewFolder, actionType, defaultName, favoriteId } = props;
   const { t } = useTranslation();
   const { workspaceSlug } = useParams();
diff --git a/apps/web/core/components/workspace/sidebar/help-menu.tsx b/apps/web/core/components/workspace/sidebar/help-menu.tsx
deleted file mode 100644
index d2bb71506f..0000000000
--- a/apps/web/core/components/workspace/sidebar/help-menu.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { observer } from "mobx-react";
-import { HelpCircle, MessagesSquare, User } from "lucide-react";
-import { useTranslation } from "@plane/i18n";
-import { PageIcon } from "@plane/propel/icons";
-// ui
-import { Tooltip } from "@plane/propel/tooltip";
-import { CustomMenu } from "@plane/ui";
-// components
-import { cn } from "@plane/utils";
-import { ProductUpdatesModal } from "@/components/global";
-// helpers
-// hooks
-import { useInstance } from "@/hooks/store/use-instance";
-import { usePowerK } from "@/hooks/store/use-power-k";
-import { useTransient } from "@/hooks/store/use-transient";
-import { usePlatformOS } from "@/hooks/use-platform-os";
-// plane web components
-import { PlaneVersionNumber } from "@/plane-web/components/global";
-
-export interface WorkspaceHelpSectionProps {
-  setSidebarActive?: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-export const HelpMenu: React.FC<WorkspaceHelpSectionProps> = observer(() => {
-  // store hooks
-  const { t } = useTranslation();
-  const { toggleShortcutsListModal } = usePowerK();
-  const { isMobile } = usePlatformOS();
-  const { config } = useInstance();
-  const { isIntercomToggle, toggleIntercom } = useTransient();
-  // states
-  const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
-  const [isProductUpdatesModalOpen, setProductUpdatesModalOpen] = useState(false);
-
-  const handleCrispWindowShow = () => {
-    toggleIntercom(!isIntercomToggle);
-  };
-
-  return (
-    <>
-      <ProductUpdatesModal isOpen={isProductUpdatesModalOpen} handleClose={() => setProductUpdatesModalOpen(false)} />
-      <div className="relative flex flex-shrink-0 items-center gap-1 justify-evenly">
-        <CustomMenu
-          customButton={
-            <div
-              className={cn(
-                "grid place-items-center rounded-md p-1 outline-none text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90",
-                {
-                  "bg-custom-background-90": isNeedHelpOpen,
-                }
-              )}
-            >
-              <Tooltip tooltipContent="Help" isMobile={isMobile} disabled={isNeedHelpOpen}>
-                <HelpCircle className="h-[18px] w-[18px] outline-none" />
-              </Tooltip>
-            </div>
-          }
-          customButtonClassName="relative grid place-items-center rounded-md p-1.5 outline-none"
-          menuButtonOnClick={() => !isNeedHelpOpen && setIsNeedHelpOpen(true)}
-          onMenuClose={() => setIsNeedHelpOpen(false)}
-          placement="top-end"
-          maxHeight="lg"
-          closeOnSelect
-        >
-          <CustomMenu.MenuItem
-            onClick={() => window.open("https://go.plane.so/p-docs", "_blank", "noopener,noreferrer")}
-          >
-            <div className="flex items-center gap-x-2 rounded text-xs hover:bg-custom-background-80">
-              <PageIcon className="h-3.5 w-3.5 text-custom-text-200" height={14} width={14} />
-              <span className="text-xs">{t("documentation")}</span>
-            </div>
-          </CustomMenu.MenuItem>
-          {config?.intercom_app_id && config?.is_intercom_enabled && (
-            <CustomMenu.MenuItem>
-              <button
-                type="button"
-                onClick={handleCrispWindowShow}
-                className="flex w-full items-center gap-x-2 rounded text-xs hover:bg-custom-background-80"
-              >
-                <MessagesSquare className="h-3.5 w-3.5 text-custom-text-200" />
-                <span className="text-xs">{t("message_support")}</span>
-              </button>
-            </CustomMenu.MenuItem>
-          )}
-          <CustomMenu.MenuItem onClick={() => window.open("mailto:sales@plane.so", "_blank", "noopener,noreferrer")}>
-            <div className="flex items-center gap-x-2 rounded text-xs hover:bg-custom-background-80">
-              <User className="h-3.5 w-3.5 text-custom-text-200" size={14} />
-              <span className="text-xs">{t("contact_sales")}</span>
-            </div>
-          </CustomMenu.MenuItem>
-          <div className="my-1 border-t border-custom-border-200" />
-          <CustomMenu.MenuItem>
-            <button
-              type="button"
-              onClick={() => toggleShortcutsListModal(true)}
-              className="flex w-full items-center justify-start text-xs hover:bg-custom-background-80"
-            >
-              <span className="text-xs">{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"
-            >
-              <span className="text-xs">{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 hover:bg-custom-background-80">
-              <span className="text-xs">Discord</span>
-            </div>
-          </CustomMenu.MenuItem>
-          <div className="px-1 pt-2 mt-1 text-xs text-custom-text-200 border-t border-custom-border-200">
-            <PlaneVersionNumber />
-          </div>
-        </CustomMenu>
-      </div>
-    </>
-  );
-});
diff --git a/apps/web/core/components/workspace/sidebar/help-section.tsx b/apps/web/core/components/workspace/sidebar/help-section.tsx
deleted file mode 100644
index 704085d108..0000000000
--- a/apps/web/core/components/workspace/sidebar/help-section.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { observer } from "mobx-react";
-import { HelpCircle, MessagesSquare, MoveLeft, User } from "lucide-react";
-// plane imports
-import { useTranslation } from "@plane/i18n";
-import { PageIcon } from "@plane/propel/icons";
-import { Tooltip } from "@plane/propel/tooltip";
-import { CustomMenu } from "@plane/ui";
-import { cn } from "@plane/utils";
-// components
-import { ProductUpdatesModal } from "@/components/global";
-// hooks
-import { useAppTheme } from "@/hooks/store/use-app-theme";
-import { useInstance } from "@/hooks/store/use-instance";
-import { usePowerK } from "@/hooks/store/use-power-k";
-import { useTransient } from "@/hooks/store/use-transient";
-import { usePlatformOS } from "@/hooks/use-platform-os";
-// plane web components
-import { PlaneVersionNumber } from "@/plane-web/components/global";
-import { WorkspaceEditionBadge } from "@/plane-web/components/workspace/edition-badge";
-
-export interface WorkspaceHelpSectionProps {
-  setSidebarActive?: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(() => {
-  // store hooks
-  const { t } = useTranslation();
-  const { sidebarCollapsed: isCollapsed, toggleSidebar, sidebarPeek, toggleSidebarPeek } = useAppTheme();
-  const { toggleShortcutsListModal } = usePowerK();
-  const { isMobile } = usePlatformOS();
-  const { config } = useInstance();
-  const { isIntercomToggle, toggleIntercom } = useTransient();
-  // states
-  const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
-  const [isProductUpdatesModalOpen, setProductUpdatesModalOpen] = useState(false);
-
-  const handleCrispWindowShow = () => {
-    toggleIntercom(!isIntercomToggle);
-  };
-
-  return (
-    <>
-      <ProductUpdatesModal isOpen={isProductUpdatesModalOpen} handleClose={() => setProductUpdatesModalOpen(false)} />
-      <div className="flex w-full items-center justify-between px-2 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 h-12 flex-shrink-0">
-        <div className="relative flex flex-shrink-0 items-center gap-1 justify-evenly">
-          <CustomMenu
-            customButton={
-              <div
-                className={cn(
-                  "grid place-items-center rounded-md p-1 outline-none text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90",
-                  {
-                    "bg-custom-background-90": isNeedHelpOpen,
-                  }
-                )}
-              >
-                <Tooltip tooltipContent="Help" isMobile={isMobile} disabled={isNeedHelpOpen}>
-                  <HelpCircle className="h-[18px] w-[18px] outline-none" />
-                </Tooltip>
-              </div>
-            }
-            customButtonClassName="relative grid place-items-center rounded-md p-1.5 outline-none"
-            menuButtonOnClick={() => !isNeedHelpOpen && setIsNeedHelpOpen(true)}
-            onMenuClose={() => setIsNeedHelpOpen(false)}
-            placement="top-end"
-            maxHeight="lg"
-            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>
-            </CustomMenu.MenuItem>
-            {config?.intercom_app_id && config?.is_intercom_enabled && (
-              <CustomMenu.MenuItem>
-                <button
-                  type="button"
-                  onClick={handleCrispWindowShow}
-                  className="flex w-full items-center gap-x-2 rounded text-xs hover:bg-custom-background-80"
-                >
-                  <MessagesSquare className="h-3.5 w-3.5 text-custom-text-200" />
-                  <span className="text-xs">{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>
-            </CustomMenu.MenuItem>
-            <div className="my-1 border-t border-custom-border-200" />
-            <CustomMenu.MenuItem>
-              <button
-                type="button"
-                onClick={() => toggleShortcutsListModal(true)}
-                className="flex w-full items-center justify-start text-xs hover:bg-custom-background-80"
-              >
-                <span className="text-xs">{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"
-              >
-                <span className="text-xs">{t("whats_new")}</span>
-              </button>
-            </CustomMenu.MenuItem>
-            <CustomMenu.MenuItem onClick={() => window.open("https://go.plane.so/p-discord", "_blank")}>
-              <div className="flex items-center gap-x-2 rounded text-xs">
-                <span className="text-xs">Discord</span>
-              </div>
-            </CustomMenu.MenuItem>
-            <div className="px-1 pt-2 mt-1 text-xs text-custom-text-200 border-t border-custom-border-200">
-              <PlaneVersionNumber />
-            </div>
-          </CustomMenu>
-        </div>
-        <div className="w-full flex-grow px-0.5">
-          <WorkspaceEditionBadge />
-        </div>
-        <div className="flex flex-shrink-0 items-center gap-1 justify-evenly">
-          <Tooltip tooltipContent={`${isCollapsed ? "Expand" : "Hide"}`} isMobile={isMobile}>
-            <button
-              type="button"
-              className="grid place-items-center rounded-md p-1 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100"
-              onClick={() => {
-                if (sidebarPeek) toggleSidebarPeek(false);
-                toggleSidebar();
-              }}
-              aria-label={t(
-                isCollapsed
-                  ? "aria_labels.projects_sidebar.expand_sidebar"
-                  : "aria_labels.projects_sidebar.collapse_sidebar"
-              )}
-            >
-              <MoveLeft className={`size-4 duration-300 ${isCollapsed ? "rotate-180" : ""}`} />
-            </button>
-          </Tooltip>
-        </div>
-      </div>
-    </>
-  );
-});
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 690175860c..55bd9d430f 100644
--- a/apps/web/core/components/workspace/sidebar/help-section/root.tsx
+++ b/apps/web/core/components/workspace/sidebar/help-section/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { HelpCircle, MessagesSquare, User } from "lucide-react";
@@ -11,26 +9,20 @@ import { CustomMenu } from "@plane/ui";
 import { ProductUpdatesModal } from "@/components/global";
 import { AppSidebarItem } from "@/components/sidebar/sidebar-item";
 // hooks
-import { useInstance } from "@/hooks/store/use-instance";
 import { usePowerK } from "@/hooks/store/use-power-k";
-import { useTransient } from "@/hooks/store/use-transient";
+import { useChatSupport } from "@/hooks/use-chat-support";
 // plane web components
 import { PlaneVersionNumber } from "@/plane-web/components/global";
 
-export const HelpMenuRoot = observer(() => {
+export const HelpMenuRoot = observer(function HelpMenuRoot() {
   // store hooks
   const { t } = useTranslation();
   const { toggleShortcutsListModal } = usePowerK();
-  const { config } = useInstance();
-  const { isIntercomToggle, toggleIntercom } = useTransient();
+  const { openChatSupport, isEnabled: isChatSupportEnabled } = useChatSupport();
   // states
   const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
   const [isProductUpdatesModalOpen, setProductUpdatesModalOpen] = useState(false);
 
-  const handleCrispWindowShow = () => {
-    toggleIntercom(!isIntercomToggle);
-  };
-
   return (
     <>
       <ProductUpdatesModal isOpen={isProductUpdatesModalOpen} handleClose={() => setProductUpdatesModalOpen(false)} />
@@ -48,61 +40,61 @@ export const HelpMenuRoot = observer(() => {
         // customButtonClassName="relative grid place-items-center rounded-md p-1.5 outline-none"
         menuButtonOnClick={() => !isNeedHelpOpen && setIsNeedHelpOpen(true)}
         onMenuClose={() => setIsNeedHelpOpen(false)}
-        placement="top-end"
+        placement="bottom-end"
         maxHeight="lg"
         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>
-        {config?.intercom_app_id && config?.is_intercom_enabled && (
+        {isChatSupportEnabled && (
           <CustomMenu.MenuItem>
             <button
               type="button"
-              onClick={handleCrispWindowShow}
-              className="flex w-full items-center gap-x-2 rounded text-xs hover:bg-custom-background-80"
+              onClick={openChatSupport}
+              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="flex w-full items-center justify-sbg-layer-211 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="flex w-full items-center justify-sbg-layer-211 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>
+          <div className="flex items-center gap-x-2 rounded-sm text-11">
+            <span className="text-11">Discord</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="px-1 pt-2 mt-1 text-11 text-secondary border-t border-subtle">
           <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 7b678e4e98..481f5929e6 100644
--- a/apps/web/core/components/workspace/sidebar/project-navigation.tsx
+++ b/apps/web/core/components/workspace/sidebar/project-navigation.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import type { FC } from "react";
 import React, { useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -35,7 +32,7 @@ type TProjectItemsProps = {
   additionalNavigationItems?: (workspaceSlug: string, projectId: string) => TNavigationItem[];
 };
 
-export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
+export const ProjectNavigation = observer(function ProjectNavigation(props: TProjectItemsProps) {
   const { workspaceSlug, projectId, additionalNavigationItems } = props;
   const { workItem: workItemIdentifierFromRoute } = useParams();
   // store hooks
@@ -61,8 +58,6 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
     }
   };
 
-  if (!project) return null;
-
   const baseNavigation = useCallback(
     (workspaceSlug: string, projectId: string): TNavigationItem[] => [
       {
@@ -82,7 +77,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
         href: `/${workspaceSlug}/projects/${projectId}/cycles`,
         icon: CycleIcon,
         access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-        shouldRender: project.cycle_view,
+        shouldRender: project?.cycle_view ?? false,
         sortOrder: 2,
       },
       {
@@ -92,7 +87,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
         href: `/${workspaceSlug}/projects/${projectId}/modules`,
         icon: ModuleIcon,
         access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-        shouldRender: project.module_view,
+        shouldRender: project?.module_view ?? false,
         sortOrder: 3,
       },
       {
@@ -102,7 +97,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
         href: `/${workspaceSlug}/projects/${projectId}/views`,
         icon: ViewsIcon,
         access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
-        shouldRender: project.issue_views_view,
+        shouldRender: project?.issue_views_view ?? false,
         sortOrder: 4,
       },
       {
@@ -112,7 +107,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
         href: `/${workspaceSlug}/projects/${projectId}/pages`,
         icon: PageIcon,
         access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
-        shouldRender: project.page_view,
+        shouldRender: project?.page_view ?? false,
         sortOrder: 5,
       },
       {
@@ -122,7 +117,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
         href: `/${workspaceSlug}/projects/${projectId}/intake`,
         icon: IntakeIcon,
         access: [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
-        shouldRender: project.inbox_view,
+        shouldRender: project?.inbox_view ?? false,
         sortOrder: 6,
       },
     ],
@@ -166,6 +161,8 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
     [pathname, workItem, workItemId, projectId]
   );
 
+  if (!project) return null;
+
   return (
     <>
       {navigationItemsMemo.map((item) => {
@@ -179,7 +176,7 @@ export const ProjectNavigation: FC<TProjectItemsProps> = observer((props) => {
             <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>
+                <span className="text-11 font-medium">{t(item.i18n_key)}</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 65f6c32dee..04edd67bc0 100644
--- a/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
+++ b/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
@@ -1,6 +1,4 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
+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";
 import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview";
@@ -9,6 +7,7 @@ import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-
 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 { Disclosure, Transition } from "@headlessui/react";
 // plane imports
@@ -17,10 +16,13 @@ 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 { 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";
 // components
+import { DEFAULT_TAB_KEY, getTabUrl } from "@/components/navigation/tab-navigation-utils";
+import { useTabPreferences } from "@/components/navigation/use-tab-preferences";
 import { LeaveProjectModal } from "@/components/project/leave-project-modal";
 import { PublishProjectModal } from "@/components/project/publish-project/modal";
 // hooks
@@ -28,8 +30,10 @@ import { useAppTheme } from "@/hooks/store/use-app-theme";
 import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";
+import { useProjectNavigationPreferences } from "@/hooks/use-navigation-preferences";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // plane web imports
+import { useNavigationItems } from "@/plane-web/components/navigations";
 import { ProjectNavigationRoot } from "@/plane-web/components/sidebar";
 // local imports
 import { HIGHLIGHT_CLASS, highlightIssueOnDrop } from "../../issues/issue-layouts/utils";
@@ -49,7 +53,7 @@ type Props = {
   renderInExtendedSidebar?: boolean;
 };
 
-export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
+export const SidebarProjectsListItem = observer(function SidebarProjectsListItem(props: Props) {
   const {
     projectId,
     handleCopyText,
@@ -66,7 +70,8 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
   const { isMobile } = usePlatformOS();
   const { allowPermissions } = useUserPermissions();
   const { getIsProjectListOpen, toggleProjectListOpen } = useCommandPalette();
-  const { toggleAnySidebarDropdown } = useAppTheme();
+  const { preferences: projectPreferences } = useProjectNavigationPreferences();
+  const { isExtendedProjectSidebarOpened, toggleExtendedProjectSidebar, toggleAnySidebarDropdown } = useAppTheme();
 
   // states
   const [leaveProjectModalOpen, setLeaveProjectModal] = useState(false);
@@ -76,7 +81,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
   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
@@ -84,8 +89,28 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
   const router = useRouter();
   // derived values
   const project = getPartialProjectById(projectId);
+
+  // Get available navigation items for this project
+  const navigationItems = useNavigationItems({
+    workspaceSlug: workspaceSlug.toString(),
+    projectId,
+    project,
+    allowPermissions,
+  });
+  const availableTabKeys = navigationItems.map((item) => item.key);
+
+  // Get preferences from hook
+  const { tabPreferences } = useTabPreferences(workspaceSlug.toString(), projectId);
+  const defaultTabKey = tabPreferences.defaultTab;
+  // Validate that the default tab is available
+  const validatedDefaultTabKey = availableTabKeys.includes(defaultTabKey) ? defaultTabKey : DEFAULT_TAB_KEY;
+  const defaultTabUrl = project ? getTabUrl(workspaceSlug.toString(), project.id, validatedDefaultTabKey) : "";
+
   // toggle project list open
-  const setIsProjectListOpen = (value: boolean) => toggleProjectListOpen(projectId, value);
+  const setIsProjectListOpen = useCallback(
+    (value: boolean) => toggleProjectListOpen(projectId, value),
+    [projectId, toggleProjectListOpen]
+  );
   // auth
   const isAdmin = allowPermissions(
     [EUserPermissions.ADMIN],
@@ -129,11 +154,11 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
             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="rounded-sm flex items-center bg-surface-1 text-13 p-1 pr-2">
                   <div className="size-4 grid place-items-center flex-shrink-0">
                     {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();
@@ -196,18 +221,55 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
   useEffect(() => {
     if (isMenuActive) toggleAnySidebarDropdown(true);
     else toggleAnySidebarDropdown(false);
-  }, [isMenuActive]);
+  }, [isMenuActive, toggleAnySidebarDropdown]);
 
   useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
   useOutsideClickDetector(projectRef, () => projectRef?.current?.classList?.remove(HIGHLIGHT_CLASS));
 
+  useEffect(() => {
+    let timeoutId: ReturnType<typeof setTimeout> | undefined;
+
+    if (URLProjectId === project?.id) {
+      setIsProjectListOpen(true);
+      // Scroll to active project
+      if (projectRef.current) {
+        timeoutId = setTimeout(() => {
+          if (projectRef.current) {
+            scrollIntoView(projectRef.current, {
+              behavior: "smooth",
+              block: "center",
+              scrollMode: "if-needed",
+            });
+          }
+        }, 200);
+      }
+    }
+
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [URLProjectId, project?.id, setIsProjectListOpen]);
+
   if (!project) return null;
 
-  useEffect(() => {
-    if (URLProjectId === project.id) setIsProjectListOpen(true);
-  }, [URLProjectId]);
+  const handleItemClick = () => {
+    if (projectPreferences.navigationMode === "accordion") {
+      setIsProjectListOpen(!isProjectListOpen);
+    } else {
+      router.push(defaultTabUrl);
+    }
+    // close the extended sidebar if it is open
+    if (isExtendedProjectSidebarOpened) {
+      toggleExtendedProjectSidebar(false);
+    }
+  };
+
+  const isAccordionMode = projectPreferences.navigationMode === "accordion";
+
+  const shouldHighlightProject = URLProjectId === project?.id && projectPreferences.navigationMode !== "accordion";
 
-  const handleItemClick = () => setIsProjectListOpen(!isProjectListOpen);
   return (
     <>
       <PublishProjectModal isOpen={publishModalOpen} projectId={projectId} onClose={() => setPublishModal(false)} />
@@ -216,16 +278,17 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
         <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 w-full px-2 py-1.5 flex items-center rounded-md 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}`}
@@ -242,7 +305,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((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",
+                    "hidden group-hover/project-item:flex items-center justify-center absolute top-1/2 -left-3 -translate-y-1/2 rounded-sm text-placeholder cursor-grab",
                     {
                       "cursor-not-allowed opacity-60": project.sort_order === null,
                       "cursor-grabbing": isDragging,
@@ -256,52 +319,59 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
               </Tooltip>
             )}
             <>
-              <ControlLink
-                href={`/${workspaceSlug}/projects/${project.id}/issues`}
-                className="flex-grow flex truncate"
-                onClick={handleItemClick}
-              >
-                <Disclosure.Button
-                  as="button"
-                  type="button"
-                  className={cn("flex-grow flex items-center gap-1.5 text-left select-none w-full", {})}
-                  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">
-                    <Logo logo={project.logo_props} size={16} />
-                  </div>
-                  <p className="truncate text-sm font-medium text-custom-sidebar-text-200">{project.name}</p>
-                </Disclosure.Button>
-              </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)}
+              <ControlLink href={defaultTabUrl} className="flex-grow flex 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", {})}
+                    aria-label={
+                      isProjectListOpen
+                        ? t("aria_labels.projects_sidebar.close_project_menu")
+                        : t("aria_labels.projects_sidebar.open_project_menu")
+                    }
                   >
-                    <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="size-4 grid place-items-center flex-shrink-0">
+                      <Logo logo={project.logo_props} size={16} />
+                    </div>
+                    <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">
+                      <Logo logo={project.logo_props} size={16} />
+                    </div>
+                    <p className="truncate text-13 font-medium text-secondary">{project.name}</p>
+                  </div>
                 )}
-                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 && (
+              </ControlLink>
+              <div className="flex items-center gap-1">
+                <CustomMenu
+                  customButton={
+                    <IconButton
+                      ref={actionSectionRef}
+                      variant="ghost"
+                      size="sm"
+                      icon={MoreHorizontal}
+                      onClick={() => setIsMenuActive(!isMenuActive)}
+                      className="text-placeholder"
+                    />
+                  }
+                  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,
+                    }
+                  )}
+                  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}
                     >
@@ -316,98 +386,98 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
                     </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 items-center justify-start gap-2 cursor-pointer">
+                        <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>
+                      <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 && (
+                  <IconButton
+                    variant="ghost"
+                    size="sm"
+                    icon={ChevronRightIcon}
+                    onClick={() => setIsProjectListOpen(!isProjectListOpen)}
+                    className={cn("hidden group-hover/project-item:inline-flex text-placeholder", {
+                      "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"
+                    )}
+                  />
                 )}
-                <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>
-              <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,
-                  }
-                )}
-                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", {
-                    "rotate-90": isProjectListOpen,
-                  })}
-                />
-              </Disclosure.Button>
+              </div>
             </>
           </div>
-          <Transition
-            show={isProjectListOpen}
-            enter="transition duration-100 ease-out"
-            enterFrom="transform scale-95 opacity-0"
-            enterTo="transform scale-100 opacity-100"
-            leave="transition duration-75 ease-out"
-            leaveFrom="transform scale-100 opacity-100"
-            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" />
-                <ProjectNavigationRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
-              </Disclosure.Panel>
-            )}
-          </Transition>
+          {isAccordionMode && (
+            <Transition
+              show={isProjectListOpen}
+              enter="transition duration-100 ease-out"
+              enterFrom="transform scale-95 opacity-0"
+              enterTo="transform scale-100 opacity-100"
+              leave="transition duration-75 ease-out"
+              leaveFrom="transform scale-100 opacity-100"
+              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-layer-3" />
+                  <ProjectNavigationRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
+                </Disclosure.Panel>
+              )}
+            </Transition>
+          )}
           {isLastChild && <DropIndicator isVisible={instruction === "DRAG_BELOW"} />}
         </div>
       </Disclosure>
diff --git a/apps/web/core/components/workspace/sidebar/projects-list.tsx b/apps/web/core/components/workspace/sidebar/projects-list.tsx
index f3d97e9685..cc2d24f689 100644
--- a/apps/web/core/components/workspace/sidebar/projects-list.tsx
+++ b/apps/web/core/components/workspace/sidebar/projects-list.tsx
@@ -1,33 +1,34 @@
-"use client";
-
-import type { FC } from "react";
 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 } from "lucide-react";
+import { Plus, 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 { 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";
 import { copyUrlToClipboard, cn, orderJoinedProjects } from "@plane/utils";
 // components
 import { CreateProjectModal } from "@/components/project/create-project-modal";
+import { SidebarNavItem } from "@/components/sidebar/sidebar-navigation";
 // 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 { useUserPermissions } from "@/hooks/store/user";
+import { useProjectNavigationPreferences } from "@/hooks/use-navigation-preferences";
 // plane web imports
 import type { TProject } from "@/plane-web/types";
 // local imports
 import { SidebarProjectsListItem } from "./projects-list-item";
 
-export const SidebarProjectsList: FC = observer(() => {
+export const SidebarProjectsList = observer(function SidebarProjectsList() {
   // states
   const [isAllProjectsListOpen, setIsAllProjectsListOpen] = useState(true);
   const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
@@ -38,6 +39,8 @@ export const SidebarProjectsList: FC = observer(() => {
   const { t } = useTranslation();
   const { toggleCreateProjectModal } = useCommandPalette();
   const { allowPermissions } = useUserPermissions();
+  const { preferences: projectPreferences } = useProjectNavigationPreferences();
+  const { isExtendedProjectSidebarOpened, toggleExtendedProjectSidebar } = useAppTheme();
 
   const { loader, getPartialProjectById, joinedProjectIds: joinedProjects, updateProjectView } = useProject();
   // router params
@@ -50,6 +53,15 @@ export const SidebarProjectsList: FC = observer(() => {
     EUserPermissionsLevel.WORKSPACE
   );
 
+  // Compute limited projects for main sidebar
+  const displayedProjects = projectPreferences.showLimitedProjects
+    ? joinedProjects.slice(0, projectPreferences.limitedProjectsCount)
+    : joinedProjects;
+
+  // Check if there are more projects to show
+  const hasMoreProjects =
+    projectPreferences.showLimitedProjects && joinedProjects.length > projectPreferences.limitedProjectsCount;
+
   const handleCopyText = (projectId: string) => {
     copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/issues`).then(() => {
       setToast({
@@ -148,16 +160,16 @@ export const SidebarProjectsList: FC = observer(() => {
       <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 w-full flex items-center justify-between px-2 py-1.5 rounded-sm 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="w-full flex items-center gap-1 whitespace-nowrap text-left text-13 font-semibold text-placeholder"
                 onClick={() => toggleListDisclosure(!isAllProjectsListOpen)}
                 aria-label={t(
                   isAllProjectsListOpen
@@ -165,41 +177,39 @@ export const SidebarProjectsList: FC = observer(() => {
                     : "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={Plus}
                       onClick={() => {
                         setIsProjectModalOpen(true);
                       }}
+                      data-ph-element={PROJECT_TRACKER_ELEMENTS.SIDEBAR_CREATE_PROJECT_TOOLTIP}
+                      className="hidden group-hover:inline-flex text-placeholder"
                       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
@@ -221,7 +231,7 @@ export const SidebarProjectsList: FC = observer(() => {
               {isAllProjectsListOpen && (
                 <Disclosure.Panel as="div" className="flex flex-col gap-0.5" static>
                   <>
-                    {joinedProjects.map((projectId, index) => (
+                    {displayedProjects.map((projectId, index) => (
                       <SidebarProjectsListItem
                         key={projectId}
                         projectId={projectId}
@@ -229,10 +239,28 @@ export const SidebarProjectsList: FC = observer(() => {
                         projectListType={"JOINED"}
                         disableDrag={false}
                         disableDrop={false}
-                        isLastChild={index === joinedProjects.length - 1}
+                        isLastChild={index === displayedProjects.length - 1}
                         handleOnProjectDrop={handleOnProjectDrop}
                       />
                     ))}
+                    {hasMoreProjects && (
+                      <SidebarNavItem>
+                        <button
+                          type="button"
+                          onClick={() => toggleExtendedProjectSidebar()}
+                          className="flex items-center gap-1.5 text-13 font-medium flex-grow text-tertiary"
+                          id="extended-project-sidebar-toggle"
+                          aria-label={t(
+                            isExtendedProjectSidebarOpened
+                              ? "aria_labels.app_sidebar.close_extended_sidebar"
+                              : "aria_labels.app_sidebar.open_extended_sidebar"
+                          )}
+                        >
+                          <Ellipsis className="flex-shrink-0 size-4" />
+                          <span>{isExtendedProjectSidebarOpened ? "Hide" : "More"}</span>
+                        </button>
+                      </SidebarNavItem>
+                    )}
                   </>
                 </Disclosure.Panel>
               )}
@@ -244,7 +272,7 @@ export const SidebarProjectsList: FC = observer(() => {
           <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="w-full flex items-center gap-1.5 px-2 py-1.5 text-13 leading-5 font-medium text-secondary hover:bg-surface-2 rounded-md"
             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 06fbc190bd..0f5cdf98a2 100644
--- a/apps/web/core/components/workspace/sidebar/quick-actions.tsx
+++ b/apps/web/core/components/workspace/sidebar/quick-actions.tsx
@@ -4,9 +4,8 @@ import { useParams } from "next/navigation";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel, SIDEBAR_TRACKER_ELEMENTS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
-import { AddIcon } from "@plane/propel/icons";
+import { AddWorkItemIcon } from "@plane/propel/icons";
 import type { TIssue } from "@plane/types";
-import { cn } from "@plane/utils";
 // components
 import { CreateUpdateIssueModal } from "@/components/issues/issue-modal/modal";
 import { SidebarAddButton } from "@/components/sidebar/add-button";
@@ -15,14 +14,12 @@ import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useProject } from "@/hooks/store/use-project";
 import { useUserPermissions } from "@/hooks/store/user";
 import useLocalStorage from "@/hooks/use-local-storage";
-// plane web components
-import { AppSearch } from "@/plane-web/components/workspace/sidebar/app-search";
 
-export const SidebarQuickActions = observer(() => {
+export const SidebarQuickActions = observer(function SidebarQuickActions() {
   const { t } = useTranslation();
   // states
   const [isDraftIssueModalOpen, setIsDraftIssueModalOpen] = useState(false);
-  const [isDraftButtonOpen, setIsDraftButtonOpen] = useState(false);
+  const [_isDraftButtonOpen, setIsDraftButtonOpen] = useState(false);
   // refs
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const timeoutRef = useRef<any>();
@@ -78,8 +75,8 @@ export const SidebarQuickActions = observer(() => {
         <SidebarAddButton
           label={
             <>
-              <AddIcon className="size-4" />
-              <span className="text-sm font-medium truncate max-w-[145px]">{t("sidebar.new_work_item")}</span>
+              <AddWorkItemIcon className="size-4" />
+              <span className="text-13 font-medium truncate max-w-[145px]">{t("sidebar.new_work_item")}</span>
             </>
           }
           onClick={() => toggleCreateIssueModal(true)}
@@ -88,7 +85,6 @@ export const SidebarQuickActions = observer(() => {
           onMouseLeave={handleMouseLeave}
           data-ph-element={SIDEBAR_TRACKER_ELEMENTS.CREATE_WORK_ITEM_BUTTON}
         />
-        <AppSearch />
       </div>
     </>
   );
diff --git a/apps/web/core/components/workspace/sidebar/sidebar-item.tsx b/apps/web/core/components/workspace/sidebar/sidebar-item.tsx
index 1ed760ab4d..a852856dbf 100644
--- a/apps/web/core/components/workspace/sidebar/sidebar-item.tsx
+++ b/apps/web/core/components/workspace/sidebar/sidebar-item.tsx
@@ -1,6 +1,4 @@
-// SidebarItemBase.tsx
-"use client";
-import type { FC, ReactNode } from "react";
+import type { ReactNode } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
@@ -11,11 +9,10 @@ import { useTranslation } from "@plane/i18n";
 import { joinUrlPath } from "@plane/utils";
 // components
 import { SidebarNavItem } from "@/components/sidebar/sidebar-navigation";
-import { NotificationAppSidebarOption } from "@/components/workspace-notifications/notification-app-sidebar-option";
 // hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
-import { useWorkspace } from "@/hooks/store/use-workspace";
 import { useUser, useUserPermissions } from "@/hooks/store/user";
+import { useWorkspaceNavigationPreferences } from "@/hooks/use-navigation-preferences";
 // plane web imports
 import { getSidebarNavigationItemIcon } from "@/plane-web/components/workspace/sidebar/helper";
 
@@ -25,12 +22,16 @@ type Props = {
   additionalStaticItems?: string[];
 };
 
-export const SidebarItemBase: FC<Props> = observer(({ item, additionalRender, additionalStaticItems }) => {
+export const SidebarItemBase = observer(function SidebarItemBase({
+  item,
+  additionalRender,
+  additionalStaticItems,
+}: Props) {
   const { t } = useTranslation();
   const pathname = usePathname();
   const { workspaceSlug } = useParams();
   const { allowPermissions } = useUserPermissions();
-  const { getNavigationPreferences } = useWorkspace();
+  const { isWorkspaceItemPinned } = useWorkspaceNavigationPreferences();
   const { data } = useUser();
 
   const { toggleSidebar, isExtendedSidebarOpened, toggleExtendedSidebar } = useAppTheme();
@@ -40,13 +41,20 @@ export const SidebarItemBase: FC<Props> = observer(({ item, additionalRender, ad
     if (isExtendedSidebarOpened) toggleExtendedSidebar(false);
   };
 
-  const staticItems = ["home", "inbox", "pi_chat", "projects", "your_work", ...(additionalStaticItems || [])];
+  const staticItems = [
+    "home",
+    "pi_chat",
+    "projects",
+    "your_work",
+    "stickies",
+    "drafts",
+    ...(additionalStaticItems || []),
+  ];
   const slug = workspaceSlug?.toString() || "";
 
   if (!allowPermissions(item.access, EUserPermissionsLevel.WORKSPACE, slug)) return null;
 
-  const sidebarPreference = getNavigationPreferences(slug);
-  const isPinned = sidebarPreference?.[item.key]?.is_pinned;
+  const isPinned = isWorkspaceItemPinned(item.key);
   if (!isPinned && !staticItems.includes(item.key)) return null;
 
   const itemHref =
@@ -58,9 +66,8 @@ export const SidebarItemBase: FC<Props> = observer(({ item, additionalRender, ad
       <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>
-        {item.key === "inbox" && <NotificationAppSidebarOption workspaceSlug={slug} />}
         {additionalRender?.(item.key, slug)}
       </SidebarNavItem>
     </Link>
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 f4e5f138c8..b6597524da 100644
--- a/apps/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
+++ b/apps/web/core/components/workspace/sidebar/sidebar-menu-items.tsx
@@ -1,12 +1,11 @@
-"use client";
 import React, { useMemo } from "react";
 import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
 import { Ellipsis } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // plane imports
 import {
   WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS,
+  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS,
   WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS,
   WORKSPACE_SIDEBAR_STATIC_PINNED_NAVIGATION_ITEMS_LINKS,
 } from "@plane/constants";
@@ -17,14 +16,16 @@ import { cn } from "@plane/utils";
 import { SidebarNavItem } from "@/components/sidebar/sidebar-navigation";
 // store hooks
 import { useAppTheme } from "@/hooks/store/use-app-theme";
-import { useWorkspace } from "@/hooks/store/use-workspace";
 import useLocalStorage from "@/hooks/use-local-storage";
+import {
+  usePersonalNavigationPreferences,
+  useWorkspaceNavigationPreferences,
+} from "@/hooks/use-navigation-preferences";
 // plane-web imports
 import { SidebarItem } from "@/plane-web/components/workspace/sidebar/sidebar-item";
 
-export const SidebarMenuItems = observer(() => {
+export const SidebarMenuItems = observer(function SidebarMenuItems() {
   // routers
-  const { workspaceSlug } = useParams();
   const { setValue: toggleWorkspaceMenu, storedValue: isWorkspaceMenuOpen } = useLocalStorage<boolean>(
     "is_workspace_menu_open",
     true
@@ -32,41 +33,74 @@ export const SidebarMenuItems = observer(() => {
 
   // store hooks
   const { isExtendedSidebarOpened, toggleExtendedSidebar } = useAppTheme();
-  const { getNavigationPreferences } = useWorkspace();
+  // hooks
+  const { preferences: personalPreferences } = usePersonalNavigationPreferences();
+  const { preferences: workspacePreferences } = useWorkspaceNavigationPreferences();
   // translation
   const { t } = useTranslation();
-  // derived values
-  const currentWorkspaceNavigationPreferences = getNavigationPreferences(workspaceSlug.toString());
 
   const toggleListDisclosure = (isOpen: boolean) => {
     toggleWorkspaceMenu(isOpen);
   };
 
+  // Filter static navigation items based on personal preferences
+  const filteredStaticNavigationItems = useMemo(() => {
+    const items = [...WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS];
+    const personalItems: Array<(typeof items)[0] & { sort_order: number }> = [];
+
+    // Add personal items based on preferences with their sort_order
+    const stickiesItem = WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["stickies"];
+    if (personalPreferences.items.stickies?.enabled && stickiesItem) {
+      personalItems.push({
+        ...stickiesItem,
+        sort_order: personalPreferences.items.stickies.sort_order,
+      });
+    }
+    if (personalPreferences.items.your_work?.enabled && WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["your-work"]) {
+      personalItems.push({
+        ...WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["your-work"],
+        sort_order: personalPreferences.items.your_work.sort_order,
+      });
+    }
+    if (personalPreferences.items.drafts?.enabled && WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["drafts"]) {
+      personalItems.push({
+        ...WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["drafts"],
+        sort_order: personalPreferences.items.drafts.sort_order,
+      });
+    }
+
+    // Sort personal items by sort_order
+    personalItems.sort((a, b) => a.sort_order - b.sort_order);
+
+    // Merge static items with sorted personal items
+    return [...items, ...personalItems];
+  }, [personalPreferences]);
+
   const sortedNavigationItems = useMemo(
     () =>
       WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS.map((item) => {
-        const preference = currentWorkspaceNavigationPreferences?.[item.key];
+        const preference = workspacePreferences.items[item.key];
         return {
           ...item,
           sort_order: preference ? preference.sort_order : 0,
         };
       }).sort((a, b) => a.sort_order - b.sort_order),
-    [currentWorkspaceNavigationPreferences]
+    [workspacePreferences]
   );
 
   return (
     <>
       <div className="flex flex-col gap-0.5">
-        {WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS.map((item, _index) => (
+        {filteredStaticNavigationItems.map((item, _index) => (
           <SidebarItem key={`static_${_index}`} item={item} />
         ))}
       </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 w-full flex items-center justify-between px-2 py-1.5 rounded-sm 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="w-full flex items-center gap-1 whitespace-nowrap text-left text-13 font-semibold text-placeholder"
             onClick={() => toggleListDisclosure(!isWorkspaceMenuOpen)}
             aria-label={t(
               isWorkspaceMenuOpen
@@ -74,13 +108,13 @@ export const SidebarMenuItems = observer(() => {
                 : "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">
             <Disclosure.Button
               as="button"
               type="button"
-              className="p-0.5 rounded hover:bg-custom-sidebar-background-80 flex-shrink-0"
+              className="p-0.5 rounded-sm hover:bg-layer-1 flex-shrink-0"
               onClick={() => toggleListDisclosure(!isWorkspaceMenuOpen)}
               aria-label={t(
                 isWorkspaceMenuOpen
@@ -118,7 +152,7 @@ export const SidebarMenuItems = observer(() => {
                   <button
                     type="button"
                     onClick={() => toggleExtendedSidebar()}
-                    className="flex items-center gap-1.5 text-sm font-medium flex-grow text-custom-text-350"
+                    className="flex items-center gap-1.5 text-13 font-medium flex-grow text-tertiary"
                     id="extended-sidebar-toggle"
                     aria-label={t(
                       isExtendedSidebarOpened
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 d53a547b21..183332502c 100644
--- a/apps/web/core/components/workspace/sidebar/user-menu-item.tsx
+++ b/apps/web/core/components/workspace/sidebar/user-menu-item.tsx
@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
@@ -27,7 +26,7 @@ export interface SidebarUserMenuItemProps {
   draftIssueCount: number;
 }
 
-export const SidebarUserMenuItem: FC<SidebarUserMenuItemProps> = observer((props) => {
+export const SidebarUserMenuItem = observer(function SidebarUserMenuItem(props: SidebarUserMenuItemProps) {
   const { item, draftIssueCount } = props;
   // nextjs hooks
   const { workspaceSlug } = useParams();
@@ -62,7 +61,7 @@ export const SidebarUserMenuItem: FC<SidebarUserMenuItemProps> = observer((props
       <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 ae2eda14b3..2183492c53 100644
--- a/apps/web/core/components/workspace/sidebar/user-menu-root.tsx
+++ b/apps/web/core/components/workspace/sidebar/user-menu-root.tsx
@@ -1,54 +1,38 @@
-"use client";
-
-import type { Ref } from "react";
-import { Fragment, useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { observer } from "mobx-react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
-import { usePopper } from "react-popper";
+import { useParams, useRouter } from "next/navigation";
 // icons
-import { LogOut, PanelLeftDashed, Settings } from "lucide-react";
-// ui
-import { Menu, Transition } from "@headlessui/react";
+import { LogOut, Settings, Settings2 } from "lucide-react";
 // plane imports
 import { GOD_MODE_URL } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
-import { Avatar } from "@plane/ui";
+import { Avatar, CustomMenu } from "@plane/ui";
 import { getFileURL } from "@plane/utils";
 // hooks
+import { AppSidebarItem } from "@/components/sidebar/sidebar-item";
 import { useAppTheme } from "@/hooks/store/use-app-theme";
 import { useUser } from "@/hooks/store/user";
-import { useAppRail } from "@/hooks/use-app-rail";
 
 type Props = {
-  size?: "sm" | "md";
+  size?: "xs" | "sm" | "md";
 };
 
-export const UserMenuRoot = observer((props: Props) => {
+export const UserMenuRoot = observer(function UserMenuRoot(props: Props) {
   const { size = "sm" } = props;
   const { workspaceSlug } = useParams();
+  // router
+  const router = useRouter();
   // store hooks
-  const { toggleAnySidebarDropdown, sidebarPeek, toggleSidebarPeek } = useAppTheme();
-
-  const { isEnabled, shouldRenderAppRail, toggleAppRail } = useAppRail();
+  const { toggleAnySidebarDropdown } = useAppTheme();
   const { data: currentUser } = useUser();
   const { signOut } = useUser();
   // derived values
-
   const isUserInstanceAdmin = false;
   // translation
   const { t } = useTranslation();
   // local state
   const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
-  // popper-js refs
-  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-  // popper-js init
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: "right",
-    modifiers: [{ name: "preventOverflow", options: { padding: 12 } }],
-  });
 
   const handleSignOut = async () => {
     await signOut().catch(() =>
@@ -60,103 +44,77 @@ export const UserMenuRoot = observer((props: Props) => {
     );
   };
 
-  // Toggle sidebar dropdown state when either menu is open
+  // Toggle sidebar dropdown state when menu is open
   useEffect(() => {
     if (isUserMenuOpen) toggleAnySidebarDropdown(true);
     else toggleAnySidebarDropdown(false);
   }, [isUserMenuOpen]);
 
   return (
-    <Menu as="div" className="relative flex-shrink-0">
-      {({ open, close }: { open: boolean; close: () => void }) => {
-        // Update local state directly
-        if (isUserMenuOpen !== open) {
-          setIsUserMenuOpen(open);
-        }
-
-        return (
-          <>
-            <Menu.Button
-              className="grid place-items-center outline-none"
-              ref={setReferenceElement}
-              aria-label={t("aria_labels.projects_sidebar.open_user_menu")}
-            >
+    <CustomMenu
+      className="flex items-center"
+      customButton={
+        <AppSidebarItem
+          variant="button"
+          item={{
+            icon: (
               <Avatar
                 name={currentUser?.display_name}
                 src={getFileURL(currentUser?.avatar_url ?? "")}
-                size={size === "sm" ? 24 : 28}
+                size={size === "xs" ? 20 : size === "sm" ? 24 : 28}
                 shape="circle"
-                className="!text-base"
               />
-            </Menu.Button>
-            <Transition
-              as={Fragment}
-              enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
-              leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
-            >
-              <Menu.Items
-                className="absolute left-0 z-[21] mt-1 flex w-44 origin-top-left flex-col divide-y
-              divide-custom-sidebar-border-200 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
-                ref={setPopperElement as Ref<HTMLDivElement>}
-                style={styles.popper}
-                {...attributes.popper}
-              >
-                <div className="flex flex-col gap-2.5 pb-2">
-                  <span className="px-2 text-custom-sidebar-text-200 truncate">{currentUser?.email}</span>
-                  <Link href={`/${workspaceSlug}/settings/account`}>
-                    <Menu.Item as="div">
-                      <span className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">
-                        <Settings className="h-4 w-4 stroke-[1.5]" />
-                        <span>{t("settings")}</span>
-                      </span>
-                    </Menu.Item>
-                  </Link>
-                  {isEnabled && (
-                    <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"
-                      onClick={() => {
-                        if (sidebarPeek) toggleSidebarPeek(false);
-                        toggleAppRail();
-                      }}
-                    >
-                      <PanelLeftDashed className="h-4 w-4 stroke-[1.5]" />
-                      <span>{shouldRenderAppRail ? "Undock AppRail" : "Dock AppRail"}</span>
-                    </Menu.Item>
-                  )}
-                </div>
-                <div className={`pt-2 ${isUserInstanceAdmin || false ? "pb-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"
-                    onClick={handleSignOut}
-                  >
-                    <LogOut className="size-4 stroke-[1.5]" />
-                    {t("sign_out")}
-                  </Menu.Item>
-                </div>
-                {isUserInstanceAdmin && (
-                  <div className="p-2 pb-0">
-                    <Link href={GOD_MODE_URL}>
-                      <Menu.Item as="button" type="button" className="w-full">
-                        <span className="flex w-full items-center justify-center rounded bg-custom-primary-100/20 px-2 py-1 text-sm font-medium text-custom-primary-100 hover:bg-custom-primary-100/30 hover:text-custom-primary-200">
-                          {t("enter_god_mode")}
-                        </span>
-                      </Menu.Item>
-                    </Link>
-                  </div>
-                )}
-              </Menu.Items>
-            </Transition>
-          </>
-        );
-      }}
-    </Menu>
+            ),
+            isActive: isUserMenuOpen,
+          }}
+        />
+      }
+      menuButtonOnClick={() => !isUserMenuOpen && setIsUserMenuOpen(true)}
+      onMenuClose={() => setIsUserMenuOpen(false)}
+      placement="bottom-end"
+      maxHeight="lg"
+      closeOnSelect
+    >
+      <div className="flex flex-col gap-2">
+        <span className="px-2 text-secondary truncate">{currentUser?.email}</span>
+        <CustomMenu.MenuItem onClick={() => router.push(`/${workspaceSlug}/settings/account`)}>
+          <div className="flex w-full items-center gap-2 rounded-sm text-11">
+            <Settings className="h-4 w-4 stroke-[1.5]" />
+            <span>{t("settings")}</span>
+          </div>
+        </CustomMenu.MenuItem>
+        <CustomMenu.MenuItem onClick={() => router.push(`/${workspaceSlug}/settings/account/preferences`)}>
+          <div className="flex w-full items-center gap-2 rounded-sm text-11">
+            <Settings2 className="h-4 w-4 stroke-[1.5]" />
+            <span>Preferences</span>
+          </div>
+        </CustomMenu.MenuItem>
+      </div>
+      <div className="my-1 border-t border-subtle" />
+      <div className={`${isUserInstanceAdmin ? "pb-2" : ""}`}>
+        <CustomMenu.MenuItem>
+          <button
+            type="button"
+            className="flex w-full items-center gap-2 rounded-sm text-11 hover:bg-layer-1"
+            onClick={handleSignOut}
+          >
+            <LogOut className="size-4 stroke-[1.5]" />
+            {t("sign_out")}
+          </button>
+        </CustomMenu.MenuItem>
+      </div>
+      {isUserInstanceAdmin && (
+        <>
+          <div className="my-1 border-t border-subtle" />
+          <div className="px-1">
+            <CustomMenu.MenuItem onClick={() => router.push(GOD_MODE_URL)}>
+              <div className="flex w-full items-center justify-center rounded-sm bg-accent-primary/20 px-2 py-1 text-11 font-medium text-accent-primary hover:bg-accent-primary/30 hover:text-accent-secondary">
+                {t("enter_god_mode")}
+              </div>
+            </CustomMenu.MenuItem>
+          </div>
+        </>
+      )}
+    </CustomMenu>
   );
 });
diff --git a/apps/web/core/components/workspace/sidebar/user-menu.tsx b/apps/web/core/components/workspace/sidebar/user-menu.tsx
index 5d46f738eb..53ee7b747f 100644
--- a/apps/web/core/components/workspace/sidebar/user-menu.tsx
+++ b/apps/web/core/components/workspace/sidebar/user-menu.tsx
@@ -1,18 +1,18 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane imports
-import { DraftIcon, HomeIcon, InboxIcon, YourWorkIcon } from "@plane/propel/icons";
+import { DraftIcon, HomeIcon, PiChatLogo, YourWorkIcon, DashboardIcon } from "@plane/propel/icons";
 import { EUserWorkspaceRoles } from "@plane/types";
 // hooks
 import { useUserPermissions, useUser } from "@/hooks/store/user";
 // local imports
 import { SidebarUserMenuItem } from "./user-menu-item";
 
-export const SidebarUserMenu = observer(() => {
+export const SidebarUserMenu = observer(function SidebarUserMenu() {
+  // navigation
   const { workspaceSlug } = useParams();
+  // store hooks
   const { workspaceUserInfo } = useUserPermissions();
   const { data: currentUser } = useUser();
 
@@ -24,6 +24,13 @@ export const SidebarUserMenu = observer(() => {
       access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
       Icon: HomeIcon,
     },
+    {
+      key: "dashboards",
+      labelTranslationKey: "workspace_dashboards",
+      href: `/${workspaceSlug.toString()}/dashboards/`,
+      access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+      Icon: DashboardIcon,
+    },
     {
       key: "your-work",
       labelTranslationKey: "sidebar.your_work",
@@ -31,13 +38,6 @@ export const SidebarUserMenu = observer(() => {
       access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
       Icon: YourWorkIcon,
     },
-    {
-      key: "notifications",
-      labelTranslationKey: "sidebar.inbox",
-      href: `/${workspaceSlug.toString()}/notifications/`,
-      access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
-      Icon: InboxIcon,
-    },
     {
       key: "drafts",
       labelTranslationKey: "sidebar.drafts",
@@ -45,6 +45,13 @@ export const SidebarUserMenu = observer(() => {
       access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
       Icon: DraftIcon,
     },
+    {
+      key: "pi-chat",
+      labelTranslationKey: "sidebar.pi_chat",
+      href: `/${workspaceSlug.toString()}/pi-chat/`,
+      access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+      Icon: PiChatLogo,
+    },
   ];
 
   const draftIssueCount = workspaceUserInfo[workspaceSlug.toString()]?.draft_issue_count;
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 ff69427bc7..a8ce79e9df 100644
--- a/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu-header.tsx
@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { useState, useRef } from "react";
 import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";
@@ -20,7 +19,9 @@ export type SidebarWorkspaceMenuHeaderProps = {
   toggleWorkspaceMenu: (value: boolean) => void;
 };
 
-export const SidebarWorkspaceMenuHeader: FC<SidebarWorkspaceMenuHeaderProps> = observer((props) => {
+export const SidebarWorkspaceMenuHeader = observer(function SidebarWorkspaceMenuHeader(
+  props: SidebarWorkspaceMenuHeaderProps
+) {
   const { isWorkspaceMenuOpen, toggleWorkspaceMenu } = props;
   // state
   const [isMenuActive, setIsMenuActive] = useState(false);
@@ -39,10 +40,10 @@ export const SidebarWorkspaceMenuHeader: FC<SidebarWorkspaceMenuHeaderProps> = o
   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="flex px-2 bg-surface-1 group/workspace-button hover:bg-surface-2 rounded-sm mt-2.5">
       <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="flex-1 sticky top-0  z-10  w-full  py-1.5 flex items-center justify-between gap-1 text-placeholder  text-13 font-semibold"
         onClick={() => toggleWorkspaceMenu(!isWorkspaceMenuOpen)}
       >
         <span>{t("workspace")}</span>
@@ -51,7 +52,7 @@ export const SidebarWorkspaceMenuHeader: FC<SidebarWorkspaceMenuHeaderProps> = o
         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="grid place-items-center p-0.5 text-placeholder hover:bg-layer-1 rounded-sm my-auto"
             onClick={() => {
               setIsMenuActive(!isMenuActive);
             }}
@@ -86,13 +87,13 @@ export const SidebarWorkspaceMenuHeader: FC<SidebarWorkspaceMenuHeaderProps> = o
       </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="sticky top-0 z-10 group/workspace-button px-0.5 py-1.5 flex items-center justify-between gap-1 text-placeholder hover:bg-surface-2 rounded-sm text-11 font-semibold"
         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="flex-shrink-0 opacity-0 pointer-events-none group-hover/workspace-button:opacity-100 group-hover/workspace-button:pointer-events-auto rounded-sm 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 3ae8f64017..2707612e0c 100644
--- a/apps/web/core/components/workspace/sidebar/workspace-menu-item.tsx
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu-item.tsx
@@ -1,4 +1,3 @@
-import type { FC } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
@@ -25,7 +24,9 @@ export type SidebarWorkspaceMenuItemProps = {
   };
 };
 
-export const SidebarWorkspaceMenuItem: FC<SidebarWorkspaceMenuItemProps> = observer((props) => {
+export const SidebarWorkspaceMenuItem = observer(function SidebarWorkspaceMenuItem(
+  props: SidebarWorkspaceMenuItemProps
+) {
   const { item } = props;
 
   const { t } = useTranslation();
@@ -57,7 +58,7 @@ export const SidebarWorkspaceMenuItem: FC<SidebarWorkspaceMenuItemProps> = obser
               "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 e574f6e30d..8c491671e8 100644
--- a/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu-root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { Fragment, useState, useEffect } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -27,11 +25,11 @@ import { WorkspaceLogo } from "../logo";
 import SidebarDropdownItem from "./dropdown-item";
 
 type WorkspaceMenuRootProps = {
-  renderLogoOnly?: boolean;
+  variant: "sidebar" | "top-navigation";
 };
 
-export const WorkspaceMenuRoot = observer((props: WorkspaceMenuRootProps) => {
-  const { renderLogoOnly } = props;
+export const WorkspaceMenuRoot = observer(function WorkspaceMenuRoot(props: WorkspaceMenuRootProps) {
+  const { variant } = props;
   // store hooks
   const { toggleSidebar, toggleAnySidebarDropdown } = useAppTheme();
   const { data: currentUser } = useUser();
@@ -67,16 +65,15 @@ export const WorkspaceMenuRoot = observer((props: WorkspaceMenuRootProps) => {
 
   // Toggle sidebar dropdown state when either menu is open
   useEffect(() => {
-    if (isWorkspaceMenuOpen) toggleAnySidebarDropdown(true);
-    else toggleAnySidebarDropdown(false);
-  }, [isWorkspaceMenuOpen]);
+    toggleAnySidebarDropdown(isWorkspaceMenuOpen);
+  }, [isWorkspaceMenuOpen, toggleAnySidebarDropdown]);
 
   return (
     <Menu
       as="div"
-      className={cn("relative h-full flex ", {
-        "justify-center text-center": renderLogoOnly,
-        "flex-grow justify-stretch text-left truncate": !renderLogoOnly,
+      className={cn("relative h-full flex max-w-48 w-fit whitespace-nowrap truncate", {
+        "w-full justify-center text-center": variant === "sidebar",
+        "flex-grow justify-stretch text-left truncate": variant === "top-navigation",
       })}
     >
       {({ open, close }: { open: boolean; close: () => void }) => {
@@ -87,8 +84,12 @@ export const WorkspaceMenuRoot = observer((props: WorkspaceMenuRootProps) => {
 
         return (
           <>
-            {renderLogoOnly ? (
-              <Menu.Button className="flex items-center justify-center size-8">
+            {variant === "sidebar" && (
+              <Menu.Button
+                className={cn("flex w-full items-center justify-center size-8 rounded-md", {
+                  "bg-layer-1": open,
+                })}
+              >
                 <AppSidebarItem
                   variant="button"
                   item={{
@@ -96,38 +97,38 @@ export const WorkspaceMenuRoot = observer((props: WorkspaceMenuRootProps) => {
                       <WorkspaceLogo
                         logo={activeWorkspace?.logo_url}
                         name={activeWorkspace?.name}
-                        classNames="size-8 rounded-md"
+                        classNames="size-8 rounded-md border border-subtle"
                       />
                     ),
                   }}
                 />
               </Menu.Button>
-            ) : (
+            )}
+            {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 ",
+                  "group/menu-button flex items-center gap-1 p-1 truncate rounded-sm text-13 font-medium text-secondary hover:bg-layer-1 focus:outline-none justify-between flex-grow",
                   {
-                    "justify-center text-center": renderLogoOnly,
-                    "justify-between flex-grow": !renderLogoOnly,
+                    "bg-layer-1": open,
                   }
                 )}
                 aria-label={t("aria_labels.projects_sidebar.open_workspace_switcher")}
               >
                 <div className="flex-grow flex items-center gap-2 truncate">
-                  <WorkspaceLogo logo={activeWorkspace?.logo_url} name={activeWorkspace?.name} />
-                  <h4 className="truncate text-base font-medium text-custom-text-100">
-                    {activeWorkspace?.name ?? t("loading")}
-                  </h4>
+                  <WorkspaceLogo
+                    logo={activeWorkspace?.logo_url}
+                    name={activeWorkspace?.name}
+                    classNames="border border-subtle rounded-md size-7"
+                  />
+                  <h4 className="truncate text-14 font-medium text-primary">{activeWorkspace?.name ?? t("loading")}</h4>
                 </div>
                 <ChevronDownIcon
-                  className={cn(
-                    "flex-shrink-0 mx-1 hidden size-4 group-hover/menu-button:block text-custom-sidebar-text-400 duration-300",
-                    { "rotate-180": open }
-                  )}
+                  className={cn("flex-shrink-0 size-4 text-placeholder duration-300", {
+                    "rotate-180": open,
+                  })}
                 />
               </Menu.Button>
             )}
-
             <Transition
               as={Fragment}
               enter="transition ease-out duration-100"
@@ -138,9 +139,17 @@ export const WorkspaceMenuRoot = observer((props: WorkspaceMenuRootProps) => {
               leaveTo="transform opacity-0 scale-95"
             >
               <Menu.Items as={Fragment}>
-                <div className="fixed top-12 left-4 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">
+                <div
+                  className={cn(
+                    "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">
+                    <span className="rounded-md text-left px-4 sticky top-0 z-21 h-full w-full bg-surface-1 pb-1 pt-3 text-13 font-medium text-placeholder truncate flex-shrink-0">
                       {currentUser?.email}
                     </span>
                     {workspacesList ? (
@@ -171,12 +180,12 @@ export const WorkspaceMenuRoot = observer((props: WorkspaceMenuRootProps) => {
                       </div>
                     )}
                   </div>
-                  <div className="w-full flex flex-col items-start justify-start gap-2 px-4 py-2 text-sm">
+                  <div className="w-full flex flex-col items-start justify-start gap-2 px-4 py-2 text-13">
                     {isWorkspaceCreationEnabled && (
                       <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")}
@@ -187,7 +196,7 @@ export const WorkspaceMenuRoot = observer((props: WorkspaceMenuRootProps) => {
                     <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")}
@@ -198,7 +207,7 @@ export const WorkspaceMenuRoot = observer((props: WorkspaceMenuRootProps) => {
                       <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 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 dd2238a8b0..569c74c4ba 100644
--- a/apps/web/core/components/workspace/sidebar/workspace-menu.tsx
+++ b/apps/web/core/components/workspace/sidebar/workspace-menu.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -13,7 +11,7 @@ import useLocalStorage from "@/hooks/use-local-storage";
 import { SidebarWorkspaceMenuHeader } from "./workspace-menu-header";
 import { SidebarWorkspaceMenuItem } from "./workspace-menu-item";
 
-export const SidebarWorkspaceMenu = observer(() => {
+export const SidebarWorkspaceMenu = observer(function SidebarWorkspaceMenu() {
   // router params
   const { workspaceSlug } = useParams();
   // local storage
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 536d7ff8ac..d906894d61 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
@@ -7,20 +7,20 @@ import { truncateText } from "@plane/utils";
 
 type Props = { view: { key: string; i18n_label: string } };
 
-export const GlobalDefaultViewListItem: React.FC<Props> = observer((props) => {
+export const GlobalDefaultViewListItem = observer(function GlobalDefaultViewListItem(props: Props) {
   const { view } = props;
   // router
   const { workspaceSlug } = useParams();
   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 w-full h-[52px] 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 font-medium leading-4">{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 203de83774..ade0834b40 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,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { ExternalLink, LinkIcon } from "lucide-react";
 // plane imports
@@ -19,7 +17,7 @@ type Props = {
   };
 };
 
-export const DefaultWorkspaceViewQuickActions: React.FC<Props> = observer((props) => {
+export const DefaultWorkspaceViewQuickActions = observer(function DefaultWorkspaceViewQuickActions(props: Props) {
   const { workspaceSlug, view } = props;
 
   const { t } = useTranslation();
@@ -56,7 +54,7 @@ export const DefaultWorkspaceViewQuickActions: React.FC<Props> = observer((props
         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;
@@ -69,7 +67,7 @@ export const DefaultWorkspaceViewQuickActions: React.FC<Props> = observer((props
               className={cn(
                 "flex items-center gap-2",
                 {
-                  "text-custom-text-400": item.disabled,
+                  "text-placeholder": item.disabled,
                 },
                 item.className
               )}
@@ -80,8 +78,8 @@ export const DefaultWorkspaceViewQuickActions: React.FC<Props> = observer((props
                 <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("text-tertiary whitespace-pre-line", {
+                      "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 75c8e32e16..744807a0e6 100644
--- a/apps/web/core/components/workspace/views/delete-view-modal.tsx
+++ b/apps/web/core/components/workspace/views/delete-view-modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -21,7 +19,7 @@ type Props = {
   onClose: () => void;
 };
 
-export const DeleteGlobalViewModal: React.FC<Props> = observer((props) => {
+export const DeleteGlobalViewModal = observer(function DeleteGlobalViewModal(props: Props) {
   const { data, isOpen, onClose } = props;
   // states
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
diff --git a/apps/web/core/components/workspace/views/form.tsx b/apps/web/core/components/workspace/views/form.tsx
index a97d15ef89..f0665ee773 100644
--- a/apps/web/core/components/workspace/views/form.tsx
+++ b/apps/web/core/components/workspace/views/form.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { observer } from "mobx-react";
 import { Controller, useForm } from "react-hook-form";
 // plane imports
@@ -36,7 +34,7 @@ const DEFAULT_VALUES: Partial<IWorkspaceView> = {
   }),
 };
 
-export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
+export const WorkspaceViewForm = observer(function WorkspaceViewForm(props: Props) {
   const { handleFormSubmit, handleClose, data, preLoadedData, workspaceSlug } = props;
   // i18n
   const { t } = useTranslation();
@@ -73,9 +71,7 @@ export const WorkspaceViewForm: React.FC<Props> = observer((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="space-y-1">
             <Controller
@@ -98,11 +94,11 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
                   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-red-500">{errors?.name?.message}</span>
           </div>
           <div>
             <Controller
@@ -115,7 +111,7 @@ export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
                   value={value}
                   placeholder={t("common.description")}
                   onChange={onChange}
-                  className="w-full text-base resize-none min-h-24"
+                  className="w-full text-14 resize-none min-h-24"
                   hasError={Boolean(errors?.description)}
                 />
               )}
@@ -183,11 +179,11 @@ export const WorkspaceViewForm: React.FC<Props> = observer((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}>
+      <div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
+        <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 0b76e08696..449d33df70 100644
--- a/apps/web/core/components/workspace/views/header.tsx
+++ b/apps/web/core/components/workspace/views/header.tsx
@@ -22,7 +22,7 @@ import { DefaultWorkspaceViewQuickActions } from "./default-view-quick-action";
 import { CreateUpdateWorkspaceViewModal } from "./modal";
 import { WorkspaceViewQuickActions } from "./quick-action";
 
-const ViewTab = observer((props: { viewId: string }) => {
+const ViewTab = observer(function ViewTab(props: { viewId: string }) {
   const { viewId } = props;
   // refs
   const parentRef = useRef<HTMLDivElement>(null);
@@ -42,12 +42,12 @@ const ViewTab = observer((props: { viewId: string }) => {
   );
 });
 
-const DefaultViewTab = (props: {
+function DefaultViewTab(props: {
   tab: {
     key: TStaticViewTypes;
     i18n_label: string;
   };
-}) => {
+}) {
   const { tab } = props;
   // refs
   const parentRef = useRef<HTMLDivElement>(null);
@@ -60,9 +60,9 @@ const DefaultViewTab = (props: {
       <DefaultWorkspaceViewQuickActions workspaceSlug={workspaceSlug?.toString()} view={tab} />
     </div>
   );
-};
+}
 
-export const GlobalViewsHeader: React.FC = observer(() => {
+export const GlobalViewsHeader = observer(function GlobalViewsHeader() {
   // states
   const [createViewModal, setCreateViewModal] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -100,7 +100,7 @@ export const GlobalViewsHeader: React.FC = observer(() => {
   );
 
   return (
-    <Header variant={EHeaderVariant.SECONDARY} className="min-h-[44px] z-[12] bg-custom-background-100">
+    <Header variant={EHeaderVariant.SECONDARY} className="min-h-[44px] z-[12] bg-surface-1">
       <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
       <div
         ref={containerRef}
@@ -119,10 +119,10 @@ export const GlobalViewsHeader: React.FC = observer(() => {
         <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" />
+          <Plus 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 77bad27ab6..71483d7126 100644
--- a/apps/web/core/components/workspace/views/modal.tsx
+++ b/apps/web/core/components/workspace/views/modal.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
@@ -25,7 +23,7 @@ type Props = {
   preLoadedData?: Partial<IWorkspaceView>;
 };
 
-export const CreateUpdateWorkspaceViewModal: React.FC<Props> = observer((props) => {
+export const CreateUpdateWorkspaceViewModal = observer(function CreateUpdateWorkspaceViewModal(props: Props) {
   const { isOpen, onClose, data, preLoadedData } = props;
   // router
   const router = useAppRouter();
diff --git a/apps/web/core/components/workspace/views/quick-action.tsx b/apps/web/core/components/workspace/views/quick-action.tsx
index 7998e7255a..4739b2d076 100644
--- a/apps/web/core/components/workspace/views/quick-action.tsx
+++ b/apps/web/core/components/workspace/views/quick-action.tsx
@@ -1,19 +1,16 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 // plane imports
 import { EUserPermissions, EUserPermissionsLevel, GLOBAL_VIEW_TRACKER_ELEMENTS } 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 { useViewMenuItems } from "@/components/common/quick-actions-helper";
 import { captureClick } from "@/helpers/event-tracker.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";
@@ -23,7 +20,7 @@ type Props = {
   view: IWorkspaceView;
 };
 
-export const WorkspaceViewQuickActions: React.FC<Props> = observer((props) => {
+export const WorkspaceViewQuickActions = observer(function WorkspaceViewQuickActions(props: Props) {
   const { workspaceSlug, view } = props;
   // states
   const [updateViewModal, setUpdateViewModal] = useState(false);
@@ -46,16 +43,15 @@ export const WorkspaceViewQuickActions: React.FC<Props> = observer((props) => {
     });
   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 (
@@ -66,9 +62,9 @@ export const WorkspaceViewQuickActions: React.FC<Props> = observer((props) => {
         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
@@ -82,7 +78,7 @@ export const WorkspaceViewQuickActions: React.FC<Props> = observer((props) => {
               className={cn(
                 "flex items-center gap-2",
                 {
-                  "text-custom-text-400": item.disabled,
+                  "text-placeholder": item.disabled,
                 },
                 item.className
               )}
@@ -93,8 +89,8 @@ export const WorkspaceViewQuickActions: React.FC<Props> = observer((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("text-tertiary whitespace-pre-line", {
+                      "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 1f1d11c6cc..7a1b3357e4 100644
--- a/apps/web/core/components/workspace/views/view-list-item.tsx
+++ b/apps/web/core/components/workspace/views/view-list-item.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useState } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -19,7 +17,7 @@ import { CreateUpdateWorkspaceViewModal } from "./modal";
 
 type Props = { viewId: string };
 
-export const GlobalViewListItem: React.FC<Props> = observer((props) => {
+export const GlobalViewListItem = observer(function GlobalViewListItem(props: Props) {
   const { viewId } = props;
   // states
   const [updateViewModal, setUpdateViewModal] = useState(false);
@@ -37,14 +35,14 @@ export const GlobalViewListItem: React.FC<Props> = observer((props) => {
     <>
       <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 font-medium leading-4">{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">
diff --git a/apps/web/core/components/workspace/views/views-list.tsx b/apps/web/core/components/workspace/views/views-list.tsx
index b6c2d6aef0..6adb4e428c 100644
--- a/apps/web/core/components/workspace/views/views-list.tsx
+++ b/apps/web/core/components/workspace/views/views-list.tsx
@@ -12,7 +12,7 @@ type Props = {
   searchQuery: string;
 };
 
-export const GlobalViewsList: React.FC<Props> = observer((props) => {
+export const GlobalViewsList = observer(function GlobalViewsList(props: Props) {
   const { searchQuery } = props;
   // router
   const { workspaceSlug } = useParams();
diff --git a/apps/web/core/constants/fetch-keys.ts b/apps/web/core/constants/fetch-keys.ts
index 61b718d922..0a54ccc196 100644
--- a/apps/web/core/constants/fetch-keys.ts
+++ b/apps/web/core/constants/fetch-keys.ts
@@ -1,4 +1,4 @@
-import type { IJiraMetadata } from "@plane/types";
+import type { EUserPermissions, IJiraMetadata } from "@plane/types";
 
 const paramsToKey = (params: any) => {
   const {
@@ -62,11 +62,17 @@ export const WORKSPACE_LABELS = (workspaceSlug: string) => `WORKSPACE_LABELS_${w
 
 export const WORKSPACE_ESTIMATES = (workspaceSlug: string) => `WORKSPACE_ESTIMATES_${workspaceSlug.toUpperCase()}`;
 
+export const WORKSPACE_WORKFLOW_STATES = (workspaceSlug: string) =>
+  `WORKSPACE_WORKFLOW_STATES_${workspaceSlug.toUpperCase()}`;
+
 export const WORKSPACE_INVITATION = (invitationId: string) => `WORKSPACE_INVITATION_${invitationId}`;
 
 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 +86,8 @@ export const WORKSPACE_SIDEBAR_PREFERENCES = (workspaceSlug: string) =>
 export const PROJECT_GITHUB_REPOSITORY = (projectId: string) => `PROJECT_GITHUB_REPOSITORY_${projectId.toUpperCase()}`;
 
 // cycles
+export const WORKSPACE_ACTIVE_CYCLES_LIST = (workspaceSlug: string, cursor: string, per_page: string) =>
+  `WORKSPACE_ACTIVE_CYCLES_LIST_${workspaceSlug.toUpperCase()}_${cursor.toUpperCase()}_${per_page.toUpperCase()}`;
 export const CYCLE_ISSUES_WITH_PARAMS = (cycleId: string, params?: any) => {
   if (!params) return `CYCLE_ISSUES_WITH_PARAMS_${cycleId.toUpperCase()}`;
 
@@ -136,6 +144,12 @@ export const USER_PROFILE_PROJECT_SEGREGATION = (workspaceSlug: string, userId:
 // api-tokens
 export const API_TOKENS_LIST = `API_TOKENS_LIST`;
 
+// marketplace
+export const APPLICATIONS_LIST = (workspaceSlug: string) => `APPLICATIONS_LIST_${workspaceSlug.toUpperCase()}`;
+export const APPLICATION_DETAILS = (applicationId: string) => `APPLICATION_DETAILS_${applicationId.toUpperCase()}`;
+export const APPLICATION_BY_CLIENT_ID = (clientId: string) => `APPLICATION_BY_CLIENT_ID_${clientId.toUpperCase()}`;
+export const APPLICATION_CATEGORIES_LIST = () => `APPLICATION_CATEGORIES_LIST`;
+
 // project level keys
 export const PROJECT_DETAILS = (workspaceSlug: string, projectId: string) =>
   `PROJECT_DETAILS_${projectId.toString().toUpperCase()}`;
@@ -143,23 +157,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_ESTIMATES = (workspaceSlug: string, projectId: string) =>
-  `PROJECT_ESTIMATES_${projectId.toString().toUpperCase()}`;
+export const PROJECT_INTAKE_STATE = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_INTAKE_STATE_${projectId.toString().toUpperCase()}_${projectRole}`;
 
-export const PROJECT_ALL_CYCLES = (workspaceSlug: string, projectId: string) =>
-  `PROJECT_ALL_CYCLES_${projectId.toString().toUpperCase()}`;
+export const PROJECT_ESTIMATES = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_ESTIMATES_${projectId.toString().toUpperCase()}_${projectRole}`;
 
-export const PROJECT_MODULES = (workspaceSlug: string, projectId: string) =>
-  `PROJECT_MODULES_${projectId.toString().toUpperCase()}`;
+export const PROJECT_ALL_CYCLES = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_ALL_CYCLES_${projectId.toString().toUpperCase()}_${projectRole}`;
 
-export const PROJECT_VIEWS = (workspaceSlug: string, projectId: string) =>
-  `PROJECT_VIEWS_${projectId.toString().toUpperCase()}`;
+export const PROJECT_MODULES = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_MODULES_${projectId.toString().toUpperCase()}_${projectRole}`;
+
+export const PROJECT_VIEWS = (projectId: string, projectRole: EUserPermissions | undefined) =>
+  `PROJECT_VIEWS_${projectId.toString().toUpperCase()}_${projectRole}`;
+
+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/plans.tsx b/apps/web/core/constants/plans.tsx
index 717e2ac7d0..c664132b44 100644
--- a/apps/web/core/constants/plans.tsx
+++ b/apps/web/core/constants/plans.tsx
@@ -45,20 +45,22 @@ type PlanePlans = {
   planComparison: TPlansComparisonDetails[];
 };
 
-const RiDiscordFill = ({ className }: { className?: string }) => (
-  <DiscordIcon className={cn(className, "size-5 text-custom-text-200")} />
-);
+function RiDiscordFill({ className }: { className?: string }) {
+  return <DiscordIcon className={cn(className, "size-5 text-secondary")} />;
+}
 
-export const ComingSoonBadge = ({ className }: { className?: string }) => (
-  <span
-    className={cn(
-      "bg-[#3f76ff] text-white font-semibold text-[8px] py-0.5 px-1.5 w-fit whitespace-nowrap rounded",
-      className
-    )}
-  >
-    COMING SOON
-  </span>
-);
+export function ComingSoonBadge({ className }: { className?: string }) {
+  return (
+    <span
+      className={cn(
+        "bg-accent-primary text-on-color font-semibold text-9 py-0.5 px-1.5 w-fit whitespace-nowrap rounded-sm",
+        className
+      )}
+    >
+      COMING SOON
+    </span>
+  );
+}
 
 export const PLANS_LIST: TPlanePlans[] = ["free", "one", "pro", "business", "enterprise"];
 
@@ -623,7 +625,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
@@ -631,7 +633,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
@@ -639,7 +641,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
diff --git a/apps/web/core/custom-events/chat-support.ts b/apps/web/core/custom-events/chat-support.ts
new file mode 100644
index 0000000000..01c27b18e4
--- /dev/null
+++ b/apps/web/core/custom-events/chat-support.ts
@@ -0,0 +1,13 @@
+type ChatSupportType = "open";
+
+type ChatSupportEventType = `chat-support:${ChatSupportType}`;
+
+export const CHAT_SUPPORT_EVENTS = {
+  open: "chat-support:open",
+} satisfies Record<ChatSupportType, ChatSupportEventType>;
+
+export class ChatSupportEvent extends CustomEvent<ChatSupportType> {
+  constructor(type: ChatSupportType) {
+    super(CHAT_SUPPORT_EVENTS[type]);
+  }
+}
diff --git a/apps/web/core/hooks/context/app-rail-context.tsx b/apps/web/core/hooks/context/app-rail-context.tsx
deleted file mode 100644
index 7303a52018..0000000000
--- a/apps/web/core/hooks/context/app-rail-context.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-import React, { createContext } from "react";
-import { observer } from "mobx-react";
-import { useParams } from "next/navigation";
-// hooks
-import useLocalStorage from "@/hooks/use-local-storage";
-
-export interface AppRailContextType {
-  isEnabled: boolean;
-  shouldRenderAppRail: boolean;
-  toggleAppRail: (value?: boolean) => void;
-}
-
-const AppRailContext = createContext<AppRailContextType | undefined>(undefined);
-
-export { AppRailContext };
-
-interface AppRailProviderProps {
-  children: ReactNode;
-}
-
-export const AppRailProvider = observer(({ children }: AppRailProviderProps) => {
-  const { workspaceSlug } = useParams();
-  const { storedValue: isAppRailVisible, setValue: setIsAppRailVisible } = useLocalStorage<boolean>(
-    `APP_RAIL_${workspaceSlug}`,
-    false
-  );
-
-  const isEnabled = false;
-
-  const toggleAppRail = (value?: boolean) => {
-    if (value === undefined) {
-      setIsAppRailVisible(!isAppRailVisible);
-    } else {
-      setIsAppRailVisible(value);
-    }
-  };
-
-  const contextValue: AppRailContextType = {
-    isEnabled,
-    shouldRenderAppRail: !!isAppRailVisible && isEnabled,
-    toggleAppRail,
-  };
-
-  return <AppRailContext.Provider value={contextValue}>{children}</AppRailContext.Provider>;
-});
diff --git a/apps/web/core/hooks/editor/use-editor-config.ts b/apps/web/core/hooks/editor/use-editor-config.ts
index 6b1e6c59a8..cee66cca43 100644
--- a/apps/web/core/hooks/editor/use-editor-config.ts
+++ b/apps/web/core/hooks/editor/use-editor-config.ts
@@ -14,6 +14,7 @@ const fileService = new FileService();
 type TArgs = {
   projectId?: string;
   uploadFile: TFileHandler["upload"];
+  duplicateFile: TFileHandler["duplicate"];
   workspaceId: string;
   workspaceSlug: string;
 };
@@ -27,7 +28,7 @@ export const useEditorConfig = () => {
 
   const getEditorFileHandlers = useCallback(
     (args: TArgs): TFileHandler => {
-      const { projectId, uploadFile, workspaceId, workspaceSlug } = args;
+      const { projectId, uploadFile, duplicateFile, workspaceId, workspaceSlug } = args;
 
       return {
         assetsUploadStatus: assetsUploadPercentage,
@@ -85,6 +86,7 @@ export const useEditorConfig = () => {
           }
         },
         upload: uploadFile,
+        duplicate: duplicateFile,
         validation: {
           maxFileSize,
         },
diff --git a/apps/web/core/hooks/oauth/extended.tsx b/apps/web/core/hooks/oauth/extended.tsx
index d6793f9de6..a23ee8e18d 100644
--- a/apps/web/core/hooks/oauth/extended.tsx
+++ b/apps/web/core/hooks/oauth/extended.tsx
@@ -1,7 +1,9 @@
 // plane imports
 import type { TOAuthConfigs } from "@plane/types";
 
-export const useExtendedOAuthConfig = (_oauthActionText: string): TOAuthConfigs => ({
-  isOAuthEnabled: false,
-  oAuthOptions: [],
-});
+export const useExtendedOAuthConfig = (_oauthActionText: string): TOAuthConfigs => {
+  return {
+    isOAuthEnabled: false,
+    oAuthOptions: [],
+  };
+};
diff --git a/apps/web/core/hooks/store/use-transient.ts b/apps/web/core/hooks/store/use-transient.ts
deleted file mode 100644
index a269ee5dfd..0000000000
--- a/apps/web/core/hooks/store/use-transient.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { useContext } from "react";
-// mobx store
-import { StoreContext } from "@/lib/store-context";
-// types
-import type { ITransientStore } from "@/store/transient.store";
-
-export const useTransient = (): ITransientStore => {
-  const context = useContext(StoreContext);
-  if (context === undefined) throw new Error("useTransient must be used within StoreProvider");
-  return context.transient;
-};
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 0cc356f860..686b5c6e83 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
@@ -6,8 +6,8 @@ import { useWorkItemFilters } from "./use-work-item-filters";
 
 export const useWorkItemFilterInstance = (
   entityType: EIssuesStoreType,
-  entityId: string
+  entityId: string | undefined
 ): IWorkItemFilterInstance | undefined => {
   const { getFilter } = useWorkItemFilters();
-  return getFilter(entityType, entityId);
+  return entityId ? getFilter(entityType, entityId) : undefined;
 };
diff --git a/apps/web/core/hooks/use-app-rail.tsx b/apps/web/core/hooks/use-app-rail.tsx
deleted file mode 100644
index 5318f80df7..0000000000
--- a/apps/web/core/hooks/use-app-rail.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { useContext } from "react";
-import { AppRailContext } from "./context/app-rail-context";
-
-export const useAppRail = () => {
-  const context = useContext(AppRailContext);
-  if (context === undefined) {
-    throw new Error("useAppRail must be used within AppRailProvider");
-  }
-  return context;
-};
diff --git a/apps/web/core/hooks/use-chat-support.ts b/apps/web/core/hooks/use-chat-support.ts
new file mode 100644
index 0000000000..9e284275dd
--- /dev/null
+++ b/apps/web/core/hooks/use-chat-support.ts
@@ -0,0 +1,25 @@
+import { useCallback } from "react";
+// custom events
+import { ChatSupportEvent } from "@/custom-events/chat-support";
+// hooks
+import { useInstance } from "@/hooks/store/use-instance";
+import { useUser } from "@/hooks/store/user";
+
+export interface IUseChatSupport {
+  openChatSupport: () => void;
+  isEnabled: boolean;
+}
+
+export const useChatSupport = (): IUseChatSupport => {
+  const { data: user } = useUser();
+  const { config } = useInstance();
+  // derived values
+  const isEnabled = Boolean(user && config?.is_intercom_enabled && config?.intercom_app_id);
+
+  const openChatSupport = useCallback(() => {
+    if (!isEnabled) return;
+    window.dispatchEvent(new ChatSupportEvent("open"));
+  }, [isEnabled]);
+
+  return { openChatSupport, isEnabled };
+};
diff --git a/apps/web/core/hooks/use-current-time.tsx b/apps/web/core/hooks/use-current-time.tsx
index fc37129c6d..4f361cea86 100644
--- a/apps/web/core/hooks/use-current-time.tsx
+++ b/apps/web/core/hooks/use-current-time.tsx
@@ -2,11 +2,11 @@ import { useEffect, useState } from "react";
 
 export const useCurrentTime = () => {
   const [currentTime, setCurrentTime] = useState(new Date());
-  // update the current time every second
+  // update the current time every minute (60000ms)
   useEffect(() => {
     const intervalId = setInterval(() => {
       setCurrentTime(new Date());
-    }, 1000);
+    }, 60000);
 
     return () => clearInterval(intervalId);
   }, []);
diff --git a/apps/web/core/hooks/use-debounce.tsx b/apps/web/core/hooks/use-debounce.tsx
index e8e57226b3..80a02a1626 100644
--- a/apps/web/core/hooks/use-debounce.tsx
+++ b/apps/web/core/hooks/use-debounce.tsx
@@ -1,6 +1,6 @@
 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-expandable-search.ts b/apps/web/core/hooks/use-expandable-search.ts
new file mode 100644
index 0000000000..3b9c380685
--- /dev/null
+++ b/apps/web/core/hooks/use-expandable-search.ts
@@ -0,0 +1,93 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useOutsideClickDetector } from "@plane/hooks";
+
+type UseExpandableSearchOptions = {
+  onClose?: () => void;
+};
+
+/**
+ * Custom hook for expandable search input behavior
+ * Handles focus management to prevent unwanted opening on programmatic focus restoration
+ * Opens on click, typing, or keyboard shortcut (via PowerK Cmd+F)
+ */
+export const useExpandableSearch = (options?: UseExpandableSearchOptions) => {
+  const { onClose } = options || {};
+
+  // states
+  const [isOpen, setIsOpen] = useState(false);
+
+  // refs
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const wasClickedRef = useRef<boolean>(false);
+  const wasKeyboardTriggeredRef = useRef<boolean>(false);
+
+  // Handle close
+  const handleClose = useCallback(() => {
+    setIsOpen(false);
+    inputRef.current?.blur();
+    onClose?.();
+  }, [onClose]);
+
+  // Outside click handler - memoized to prevent unnecessary re-registrations
+  const handleOutsideClick = useCallback(() => {
+    if (isOpen) {
+      handleClose();
+    }
+  }, [isOpen, handleClose]);
+
+  // Outside click detection
+  useOutsideClickDetector(containerRef, handleOutsideClick);
+
+  // Track keyboard shortcuts that trigger focus (Cmd+F / Ctrl+F)
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "f") {
+        // Mark as keyboard triggered so handleFocus knows to open
+        wasKeyboardTriggeredRef.current = true;
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
+  // Track explicit clicks
+  const handleMouseDown = useCallback(() => {
+    wasClickedRef.current = true;
+  }, []);
+
+  // Open on explicit clicks or keyboard shortcut, not programmatic focus restoration
+  const handleFocus = useCallback(() => {
+    if (wasClickedRef.current || wasKeyboardTriggeredRef.current) {
+      setIsOpen(true);
+      wasClickedRef.current = false;
+      wasKeyboardTriggeredRef.current = false;
+    }
+  }, []);
+
+  // Helper to open panel (for typing/onChange)
+  const openPanel = useCallback(() => {
+    if (!isOpen) {
+      setIsOpen(true);
+    }
+  }, [isOpen]);
+
+  return {
+    // State
+    isOpen,
+    setIsOpen,
+
+    // Refs
+    containerRef,
+    inputRef,
+
+    // Handlers
+    handleClose,
+    handleMouseDown,
+    handleFocus,
+    openPanel,
+  };
+};
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 cb654eacf1..ebe873f6c5 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,42 +1,44 @@
 import type React from "react";
-import { useEffect } from "react";
+import { useEffect, useCallback } from "react";
 
 const useExtendedSidebarOutsideClickDetector = (
   ref: React.RefObject<HTMLElement>,
   callback: () => void,
   targetId: string
 ) => {
-  const handleClick = (event: MouseEvent) => {
-    if (ref.current && !ref.current.contains(event.target as Node)) {
-      // check for the closest element with attribute name data-prevent-outside-click
-      const preventOutsideClickElement = (event.target as HTMLElement | undefined)?.closest(
-        "[data-prevent-outside-click]"
-      );
-      // if the closest element with attribute name data-prevent-outside-click is found, return
-      if (preventOutsideClickElement) {
-        return;
-      }
-      // check if the click target is the current issue element or its children
-      let targetElement = event.target as HTMLElement | null;
-      while (targetElement) {
-        if (targetElement.id === targetId) {
-          // if the click target is the current issue element, return
+  const handleClick = useCallback(
+    (event: MouseEvent) => {
+      if (!(event.target instanceof HTMLElement)) return;
+      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 (preventOutsideClickElement) {
           return;
         }
-        targetElement = targetElement.parentElement;
+        // check if the click target is the current issue element or its children
+        let targetElement: HTMLElement | null = event.target;
+        while (targetElement) {
+          if (targetElement.id === targetId) {
+            // if the click target is the current issue element, return
+            return;
+          }
+          targetElement = targetElement.parentElement;
+        }
+        const delayOutsideClickElement = event.target.closest("[data-delay-outside-click]");
+        if (delayOutsideClickElement) {
+          // if the click target is the closest element with attribute name data-delay-outside-click, delay the callback
+          setTimeout(() => {
+            callback();
+          }, 0);
+          return;
+        }
+        // else, call the callback immediately
+        callback();
       }
-      const delayOutsideClickElement = (event.target as HTMLElement | undefined)?.closest("[data-delay-outside-click]");
-      if (delayOutsideClickElement) {
-        // if the click target is the closest element with attribute name data-delay-outside-click, delay the callback
-        setTimeout(() => {
-          callback();
-        }, 0);
-        return;
-      }
-      // else, call the callback immediately
-      callback();
-    }
-  };
+    },
+    [ref, callback, targetId]
+  );
 
   useEffect(() => {
     document.addEventListener("mousedown", handleClick);
@@ -44,7 +46,7 @@ const useExtendedSidebarOutsideClickDetector = (
     return () => {
       document.removeEventListener("mousedown", handleClick);
     };
-  }, []);
+  }, [handleClick]);
 };
 
 export default useExtendedSidebarOutsideClickDetector;
diff --git a/apps/web/core/hooks/use-group-dragndrop.ts b/apps/web/core/hooks/use-group-dragndrop.ts
index e2dfe85637..f1929283b0 100644
--- a/apps/web/core/hooks/use-group-dragndrop.ts
+++ b/apps/web/core/hooks/use-group-dragndrop.ts
@@ -1,5 +1,3 @@
-"use client";
-
 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-intersection-observer.ts b/apps/web/core/hooks/use-intersection-observer.ts
index 5fd2840edf..982894d13e 100644
--- a/apps/web/core/hooks/use-intersection-observer.ts
+++ b/apps/web/core/hooks/use-intersection-observer.ts
@@ -30,7 +30,6 @@ export const useIntersectionObserver = (
       observer.observe(elementRef);
       return () => {
         if (elementRef) {
-          // eslint-disable-next-line react-hooks/exhaustive-deps
           observer.unobserve(elementRef);
         }
       };
diff --git a/apps/web/core/hooks/use-local-storage.tsx b/apps/web/core/hooks/use-local-storage.tsx
index 6ba44662a9..66c92cf9b0 100644
--- a/apps/web/core/hooks/use-local-storage.tsx
+++ b/apps/web/core/hooks/use-local-storage.tsx
@@ -5,7 +5,7 @@ export const getValueFromLocalStorage = (key: string, defaultValue: any) => {
   try {
     const item = window.localStorage.getItem(key);
     return item ? JSON.parse(item) : defaultValue;
-  } catch (error) {
+  } catch (_error) {
     window.localStorage.removeItem(key);
     return defaultValue;
   }
@@ -16,7 +16,7 @@ export const setValueIntoLocalStorage = (key: string, value: any) => {
   try {
     window.localStorage.setItem(key, JSON.stringify(value));
     return true;
-  } catch (error) {
+  } catch (_error) {
     return false;
   }
 };
diff --git a/apps/web/core/hooks/use-multiple-select.ts b/apps/web/core/hooks/use-multiple-select.ts
index 60130bcb6a..609bf335a1 100644
--- a/apps/web/core/hooks/use-multiple-select.ts
+++ b/apps/web/core/hooks/use-multiple-select.ts
@@ -1,5 +1,3 @@
-"use client";
-
 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
new file mode 100644
index 0000000000..1672936ccd
--- /dev/null
+++ b/apps/web/core/hooks/use-navigation-preferences.ts
@@ -0,0 +1,276 @@
+import { useCallback, useMemo } from "react";
+import { useParams } from "next/navigation";
+import type {
+  TPersonalNavigationItemKey,
+  TPersonalNavigationPreferences,
+  TProjectNavigationPreferences,
+  TProjectNavigationMode,
+  TWorkspaceNavigationPreferences,
+  TWorkspaceNavigationItemState,
+  TAppRailPreferences,
+  TAppRailDisplayMode,
+} from "@/types/navigation-preferences";
+import {
+  DEFAULT_PERSONAL_PREFERENCES,
+  DEFAULT_PROJECT_PREFERENCES,
+  DEFAULT_WORKSPACE_PREFERENCES,
+  DEFAULT_APP_RAIL_PREFERENCES,
+} from "@/types/navigation-preferences";
+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 = () => {
+  const { workspaceSlug } = useParams();
+  const { getNavigationPreferences, updateBulkSidebarPreferences } = useWorkspace();
+
+  // Get preferences from the store
+  const storePreferences = getNavigationPreferences(workspaceSlug?.toString() || "");
+
+  // Convert store format to hook format for personal items
+  const preferences: TPersonalNavigationPreferences = useMemo(() => {
+    if (!storePreferences) {
+      return DEFAULT_PERSONAL_PREFERENCES;
+    }
+
+    // Extract personal items from the store (stickies, your_work, drafts)
+    const personalItems: Record<TPersonalNavigationItemKey, { enabled: boolean; sort_order: number }> = {
+      stickies: {
+        enabled: storePreferences.stickies?.is_pinned ?? DEFAULT_PERSONAL_PREFERENCES.items.stickies.enabled,
+        sort_order: storePreferences.stickies?.sort_order ?? DEFAULT_PERSONAL_PREFERENCES.items.stickies.sort_order,
+      },
+      your_work: {
+        enabled: storePreferences.your_work?.is_pinned ?? DEFAULT_PERSONAL_PREFERENCES.items.your_work.enabled,
+        sort_order: storePreferences.your_work?.sort_order ?? DEFAULT_PERSONAL_PREFERENCES.items.your_work.sort_order,
+      },
+      drafts: {
+        enabled: storePreferences.drafts?.is_pinned ?? DEFAULT_PERSONAL_PREFERENCES.items.drafts.enabled,
+        sort_order: storePreferences.drafts?.sort_order ?? DEFAULT_PERSONAL_PREFERENCES.items.drafts.sort_order,
+      },
+    };
+
+    return {
+      items: personalItems,
+    };
+  }, [storePreferences]);
+
+  const togglePersonalItem = useCallback(
+    async (key: TPersonalNavigationItemKey, enabled: boolean) => {
+      if (!workspaceSlug) return;
+
+      const currentItem = preferences.items[key] || { enabled: false, sort_order: 0 };
+
+      await updateBulkSidebarPreferences(workspaceSlug.toString(), [
+        {
+          key,
+          is_pinned: enabled,
+          sort_order: currentItem.sort_order,
+        },
+      ]);
+    },
+    [workspaceSlug, preferences, updateBulkSidebarPreferences]
+  );
+
+  const updatePersonalItemOrder = useCallback(
+    async (items: Array<{ key: TPersonalNavigationItemKey; sortOrder: number }>) => {
+      if (!workspaceSlug) return;
+
+      const bulkData = items.map((item) => {
+        const currentItem = preferences.items[item.key] || { enabled: true, sort_order: 0 };
+        return {
+          key: item.key,
+          is_pinned: currentItem.enabled,
+          sort_order: item.sortOrder,
+        };
+      });
+
+      await updateBulkSidebarPreferences(workspaceSlug.toString(), bulkData);
+    },
+    [workspaceSlug, preferences, updateBulkSidebarPreferences]
+  );
+
+  const isPersonalItemEnabled = useCallback(
+    (key: TPersonalNavigationItemKey): boolean => preferences.items[key]?.enabled ?? true,
+    [preferences]
+  );
+
+  return {
+    preferences,
+    togglePersonalItem,
+    updatePersonalItemOrder,
+    isPersonalItemEnabled,
+  };
+};
+
+export const useProjectNavigationPreferences = () => {
+  const { storedValue, setValue } = useLocalStorage<TProjectNavigationPreferences>(
+    PROJECT_PREFERENCES_KEY,
+    DEFAULT_PROJECT_PREFERENCES
+  );
+
+  const updateNavigationMode = useCallback(
+    (mode: TProjectNavigationMode) => {
+      const currentPreferences = storedValue || DEFAULT_PROJECT_PREFERENCES;
+      setValue({
+        navigationMode: mode,
+        showLimitedProjects: currentPreferences.showLimitedProjects,
+        limitedProjectsCount: currentPreferences.limitedProjectsCount,
+      });
+    },
+    [storedValue, setValue]
+  );
+
+  const updateShowLimitedProjects = useCallback(
+    (show: boolean) => {
+      const currentPreferences = storedValue || DEFAULT_PROJECT_PREFERENCES;
+      setValue({
+        navigationMode: currentPreferences.navigationMode,
+        showLimitedProjects: show,
+        limitedProjectsCount: currentPreferences.limitedProjectsCount,
+      });
+    },
+    [storedValue, setValue]
+  );
+
+  const updateLimitedProjectsCount = useCallback(
+    (count: number) => {
+      const currentPreferences = storedValue || DEFAULT_PROJECT_PREFERENCES;
+      setValue({
+        navigationMode: currentPreferences.navigationMode,
+        showLimitedProjects: currentPreferences.showLimitedProjects,
+        limitedProjectsCount: count,
+      });
+    },
+    [storedValue, setValue]
+  );
+
+  return {
+    preferences: storedValue || DEFAULT_PROJECT_PREFERENCES,
+    updateNavigationMode,
+    updateShowLimitedProjects,
+    updateLimitedProjectsCount,
+  };
+};
+
+export const useWorkspaceNavigationPreferences = () => {
+  const { workspaceSlug } = useParams();
+  const { getNavigationPreferences, updateBulkSidebarPreferences } = useWorkspace();
+
+  // Get preferences from the store
+  const storePreferences = getNavigationPreferences(workspaceSlug?.toString() || "");
+
+  // Convert store format to hook format
+  const preferences: TWorkspaceNavigationPreferences = useMemo(() => {
+    if (!storePreferences) {
+      return DEFAULT_WORKSPACE_PREFERENCES;
+    }
+
+    return {
+      items: storePreferences,
+    };
+  }, [storePreferences]);
+
+  const toggleWorkspaceItem = useCallback(
+    async (key: string, isPinned: boolean) => {
+      if (!workspaceSlug) return;
+
+      const currentItem = preferences.items[key] || { is_pinned: false, sort_order: 0 };
+
+      await updateBulkSidebarPreferences(workspaceSlug.toString(), [
+        {
+          key,
+          is_pinned: isPinned,
+          sort_order: currentItem.sort_order,
+        },
+      ]);
+    },
+    [workspaceSlug, preferences, updateBulkSidebarPreferences]
+  );
+
+  const updateWorkspaceItemOrder = useCallback(
+    async (items: Array<{ key: string; sortOrder: number }>) => {
+      if (!workspaceSlug) return;
+
+      const bulkData = items.map((item) => {
+        const currentItem = preferences.items[item.key] || { is_pinned: true, sort_order: 0 };
+        return {
+          key: item.key,
+          is_pinned: currentItem.is_pinned,
+          sort_order: item.sortOrder,
+        };
+      });
+
+      await updateBulkSidebarPreferences(workspaceSlug.toString(), bulkData);
+    },
+    [workspaceSlug, preferences, updateBulkSidebarPreferences]
+  );
+
+  const getWorkspaceItemState = useCallback(
+    (key: string): TWorkspaceNavigationItemState => preferences.items[key] || { is_pinned: false, sort_order: 0 },
+    [preferences]
+  );
+
+  const isWorkspaceItemPinned = useCallback(
+    (key: string): boolean => {
+      const state = getWorkspaceItemState(key);
+      return state.is_pinned;
+    },
+    [getWorkspaceItemState]
+  );
+
+  const updateWorkspaceItemSortOrder = useCallback(
+    async (key: string, sortOrder: number) => {
+      if (!workspaceSlug) return;
+
+      const currentItem = preferences.items[key] || { is_pinned: false, sort_order: 0 };
+
+      await updateBulkSidebarPreferences(workspaceSlug.toString(), [
+        {
+          key,
+          is_pinned: currentItem.is_pinned,
+          sort_order: sortOrder,
+        },
+      ]);
+    },
+    [workspaceSlug, preferences, updateBulkSidebarPreferences]
+  );
+
+  return {
+    preferences,
+    toggleWorkspaceItem,
+    updateWorkspaceItemOrder,
+    updateWorkspaceItemSortOrder,
+    getWorkspaceItemState,
+    isWorkspaceItemPinned,
+  };
+};
+
+export const useAppRailPreferences = () => {
+  const { storedValue, setValue } = useLocalStorage<TAppRailPreferences>(
+    APP_RAIL_PREFERENCES_KEY,
+    DEFAULT_APP_RAIL_PREFERENCES
+  );
+
+  const updateDisplayMode = useCallback(
+    (mode: TAppRailDisplayMode) => {
+      setValue({
+        displayMode: mode,
+      });
+    },
+    [setValue]
+  );
+
+  const toggleDisplayMode = useCallback(() => {
+    const currentPreferences = storedValue || DEFAULT_APP_RAIL_PREFERENCES;
+    const newMode = currentPreferences.displayMode === "icon_only" ? "icon_with_label" : "icon_only";
+    updateDisplayMode(newMode);
+  }, [storedValue, updateDisplayMode]);
+
+  return {
+    preferences: storedValue || DEFAULT_APP_RAIL_PREFERENCES,
+    updateDisplayMode,
+    toggleDisplayMode,
+  };
+};
diff --git a/apps/web/core/hooks/use-page-fallback.ts b/apps/web/core/hooks/use-page-fallback.ts
index 4551031d1d..2b88b0d5af 100644
--- a/apps/web/core/hooks/use-page-fallback.ts
+++ b/apps/web/core/hooks/use-page-fallback.ts
@@ -1,34 +1,54 @@
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { EditorRefApi, CollaborationState } from "@plane/editor";
 // plane editor
 import { convertBinaryDataToBase64String, getBinaryDataFromDocumentEditorHTMLString } from "@plane/editor";
-import type { EditorRefApi } from "@plane/editor";
 // plane types
 import type { TDocumentPayload } from "@plane/types";
 // hooks
 import useAutoSave from "@/hooks/use-auto-save";
+import type { TPageInstance } from "@/store/pages/base-page";
 
 type TArgs = {
   editorRef: React.RefObject<EditorRefApi>;
   fetchPageDescription: () => Promise<ArrayBuffer>;
-  hasConnectionFailed: boolean;
+  collaborationState: CollaborationState | null;
   updatePageDescription: (data: TDocumentPayload) => Promise<void>;
+  page: TPageInstance;
 };
 
 export const usePageFallback = (args: TArgs) => {
-  const { editorRef, fetchPageDescription, hasConnectionFailed, updatePageDescription } = args;
+  const { editorRef, fetchPageDescription, collaborationState, updatePageDescription, page } = args;
+  const hasShownFallbackToast = useRef(false);
+
+  const [isFetchingFallbackBinary, setIsFetchingFallbackBinary] = useState(false);
+
+  // Derive connection failure from collaboration state
+  const hasConnectionFailed = collaborationState?.stage.kind === "disconnected";
 
   const handleUpdateDescription = useCallback(async () => {
     if (!hasConnectionFailed) return;
     const editor = editorRef.current;
     if (!editor) return;
 
+    // Show toast notification when fallback mechanism kicks in (only once)
+    if (!hasShownFallbackToast.current) {
+      console.warn("Websocket Connection lost, your changes are being saved using backup mechanism.");
+      hasShownFallbackToast.current = true;
+    }
+
     try {
+      setIsFetchingFallbackBinary(true);
+
       const latestEncodedDescription = await fetchPageDescription();
       let latestDecodedDescription: Uint8Array;
       if (latestEncodedDescription && latestEncodedDescription.byteLength > 0) {
         latestDecodedDescription = new Uint8Array(latestEncodedDescription);
       } else {
-        latestDecodedDescription = getBinaryDataFromDocumentEditorHTMLString("<p></p>");
+        const pageDescriptionHtml = page.description_html;
+        latestDecodedDescription = getBinaryDataFromDocumentEditorHTMLString(
+          pageDescriptionHtml ?? "<p></p>",
+          page.name
+        );
       }
 
       editor.setProviderDocument(latestDecodedDescription);
@@ -41,16 +61,23 @@ export const usePageFallback = (args: TArgs) => {
         description_html: html,
         description: json,
       });
-    } catch (error) {
-      console.error("Error in updating description using fallback logic:", error);
+    } catch (error: any) {
+      console.error(error);
+    } finally {
+      setIsFetchingFallbackBinary(false);
     }
-  }, [editorRef, fetchPageDescription, hasConnectionFailed, updatePageDescription]);
+  }, [editorRef, fetchPageDescription, hasConnectionFailed, updatePageDescription, page.description_html, page.name]);
 
   useEffect(() => {
     if (hasConnectionFailed) {
       handleUpdateDescription();
+    } else {
+      // Reset toast flag when connection is restored
+      hasShownFallbackToast.current = false;
     }
   }, [handleUpdateDescription, hasConnectionFailed]);
 
   useAutoSave(handleUpdateDescription);
+
+  return { isFetchingFallbackBinary };
 };
diff --git a/apps/web/core/hooks/use-parse-editor-content.ts b/apps/web/core/hooks/use-parse-editor-content.ts
index bf52fff084..840317fa6b 100644
--- a/apps/web/core/hooks/use-parse-editor-content.ts
+++ b/apps/web/core/hooks/use-parse-editor-content.ts
@@ -1,17 +1,21 @@
 import { useCallback } from "react";
-import { useParams } from "next/navigation";
 // plane types
 import type { TSearchEntities } from "@plane/types";
 // helpers
-import { getBase64Image } from "@plane/utils";
+import { getBase64Image, getEditorAssetSrc } from "@plane/utils";
+import type { TCustomComponentsMetaData } from "@plane/utils";
 // hooks
 import { useMember } from "@/hooks/store/use-member";
 // plane web hooks
 import { useAdditionalEditorMention } from "@/plane-web/hooks/use-additional-editor-mention";
 
-export const useParseEditorContent = () => {
-  // params
-  const { workspaceSlug } = useParams();
+type TArgs = {
+  projectId?: string;
+  workspaceSlug: string;
+};
+
+export const useParseEditorContent = (args: TArgs) => {
+  const { projectId, workspaceSlug } = args;
   // store hooks
   const { getUserDetails } = useMember();
   // parse additional content
@@ -150,7 +154,7 @@ export const useParseEditorContent = () => {
       serializedDoc = serializedDoc.replace(/background-color: null/g, "").replace(/color: null/g, "");
       return serializedDoc;
     },
-    [getUserDetails]
+    [getUserDetails, parseAdditionalEditorContent]
   );
 
   /**
@@ -160,7 +164,6 @@ export const useParseEditorContent = () => {
    */
   const replaceCustomComponentsFromMarkdownContent = useCallback(
     (props: { markdownContent: string; noAssets?: boolean }): string => {
-      const start = performance.now();
       const { markdownContent, noAssets = false } = props;
       let parsedMarkdownContent = markdownContent;
       // replace the matched mention components with [display_name](redirect_url)
@@ -203,15 +206,68 @@ export const useParseEditorContent = () => {
       // remove all issue-embed components
       const issueEmbedRegex = /<issue-embed-component[^>]*>[^]*<\/issue-embed-component>/g;
       parsedMarkdownContent = parsedMarkdownContent.replace(issueEmbedRegex, "");
-      const end = performance.now();
-      console.log("Exec time:", end - start);
       return parsedMarkdownContent;
     },
-    [getUserDetails, workspaceSlug]
+    [getUserDetails, parseAdditionalEditorContent, workspaceSlug]
+  );
+
+  const getEditorMetaData = useCallback(
+    (htmlContent: string): TCustomComponentsMetaData => {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(htmlContent, "text/html");
+      const imageMetaData: TCustomComponentsMetaData["file_assets"] = [];
+      // process image components
+      const imageComponents = doc.querySelectorAll("image-component");
+      imageComponents.forEach((element) => {
+        const src = element.getAttribute("src");
+        if (src) {
+          const assetSrc = src.startsWith("http")
+            ? src
+            : getEditorAssetSrc({
+                assetId: src,
+                projectId,
+                workspaceSlug,
+              });
+          if (assetSrc) {
+            imageMetaData.push({
+              id: src,
+              name: src,
+              url: assetSrc,
+            });
+          }
+        }
+      });
+      // process user mentions
+      const userMentions: TCustomComponentsMetaData["user_mentions"] = [];
+      const mentionComponents = doc.querySelectorAll("mention-component");
+      mentionComponents.forEach((element) => {
+        const id = element.getAttribute("entity_identifier");
+        if (id) {
+          const userDetails = getUserDetails(id);
+          const originUrl = typeof window !== "undefined" && (window.location.origin ?? "");
+          const path = `${workspaceSlug}/profile/${id}`;
+          const url = `${originUrl}/${path}`;
+          if (userDetails) {
+            userMentions.push({
+              id,
+              display_name: userDetails.display_name,
+              url,
+            });
+          }
+        }
+      });
+
+      return {
+        file_assets: imageMetaData,
+        user_mentions: userMentions,
+      };
+    },
+    [getUserDetails, projectId, workspaceSlug]
   );
 
   return {
     replaceCustomComponentsFromHTMLContent,
     replaceCustomComponentsFromMarkdownContent,
+    getEditorMetaData,
   };
 };
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 02908ca112..1183a1c124 100644
--- a/apps/web/core/hooks/use-peek-overview-outside-click.tsx
+++ b/apps/web/core/hooks/use-peek-overview-outside-click.tsx
@@ -1,42 +1,44 @@
 import type React from "react";
-import { useEffect } from "react";
+import { useEffect, useCallback } from "react";
 
 const usePeekOverviewOutsideClickDetector = (
   ref: React.RefObject<HTMLElement>,
   callback: () => void,
   issueId: string
 ) => {
-  const handleClick = (event: MouseEvent) => {
-    if (ref.current && !ref.current.contains(event.target as Node)) {
-      // check for the closest element with attribute name data-prevent-outside-click
-      const preventOutsideClickElement = (event.target as HTMLElement | undefined)?.closest(
-        "[data-prevent-outside-click]"
-      );
-      // if the closest element with attribute name data-prevent-outside-click is found, return
-      if (preventOutsideClickElement) {
-        return;
-      }
-      // check if the click target is the current issue element or its children
-      let targetElement = event.target as HTMLElement | null;
-      while (targetElement) {
-        if (targetElement.id === `issue-${issueId}`) {
-          // if the click target is the current issue element, return
+  const handleClick = useCallback(
+    (event: MouseEvent) => {
+      if (!(event.target instanceof HTMLElement)) return;
+      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 (preventOutsideClickElement) {
           return;
         }
-        targetElement = targetElement.parentElement;
+        // check if the click target is the current issue element or its children
+        let targetElement: HTMLElement | null = event.target;
+        while (targetElement) {
+          if (targetElement.id === `issue-${issueId}`) {
+            // if the click target is the current issue element, return
+            return;
+          }
+          targetElement = targetElement.parentElement;
+        }
+        const delayOutsideClickElement = event.target.closest("[data-delay-outside-click]");
+        if (delayOutsideClickElement) {
+          // if the click target is the closest element with attribute name data-delay-outside-click, delay the callback
+          setTimeout(() => {
+            callback();
+          }, 0);
+          return;
+        }
+        // else, call the callback immediately
+        callback();
       }
-      const delayOutsideClickElement = (event.target as HTMLElement | undefined)?.closest("[data-delay-outside-click]");
-      if (delayOutsideClickElement) {
-        // if the click target is the closest element with attribute name data-delay-outside-click, delay the callback
-        setTimeout(() => {
-          callback();
-        }, 0);
-        return;
-      }
-      // else, call the callback immediately
-      callback();
-    }
-  };
+    },
+    [ref, callback, issueId]
+  );
 
   useEffect(() => {
     document.addEventListener("mousedown", handleClick);
@@ -44,7 +46,7 @@ const usePeekOverviewOutsideClickDetector = (
     return () => {
       document.removeEventListener("mousedown", handleClick);
     };
-  });
+  }, [handleClick]);
 };
 
 export default usePeekOverviewOutsideClickDetector;
diff --git a/apps/web/core/hooks/use-platform-os.tsx b/apps/web/core/hooks/use-platform-os.tsx
index cef4e785cf..771706d1d3 100644
--- a/apps/web/core/hooks/use-platform-os.tsx
+++ b/apps/web/core/hooks/use-platform-os.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 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-realtime-page-events.tsx b/apps/web/core/hooks/use-realtime-page-events.tsx
index 630c899548..2b849764e0 100644
--- a/apps/web/core/hooks/use-realtime-page-events.tsx
+++ b/apps/web/core/hooks/use-realtime-page-events.tsx
@@ -51,7 +51,7 @@ export const useRealtimePageEvents = ({
     (userId: string | undefined) => {
       if (!userId) return "";
       try {
-        const userDetails = getUserDetails(userId as string);
+        const userDetails = getUserDetails(userId);
         return userDetails?.display_name ? ` by ${userDetails.display_name}` : "";
       } catch {
         return "";
@@ -60,107 +60,114 @@ export const useRealtimePageEvents = ({
     [getUserDetails]
   );
 
-  const ACTION_HANDLERS = useMemo<
-    Partial<{
-      [K in keyof EventToPayloadMap]: PageUpdateHandler<K>;
-    }>
-  >(
-    () => ({
-      archived: ({ pageIds, data }) => {
-        pageIds.forEach((pageId) => {
-          const pageItem = getPageById(pageId);
-          if (pageItem) pageItem.archive({ archived_at: data.archived_at, shouldSync: false });
-        });
-      },
-      unarchived: ({ pageIds }) => {
-        pageIds.forEach((pageId) => {
-          const pageItem = getPageById(pageId);
-          if (pageItem) pageItem.restore({ shouldSync: false });
-        });
-      },
-      locked: ({ pageIds }) => {
-        pageIds.forEach((pageId) => {
-          const pageItem = getPageById(pageId);
-          if (pageItem) pageItem.lock({ shouldSync: false, recursive: false });
-        });
-      },
-      unlocked: ({ pageIds }) => {
-        pageIds.forEach((pageId) => {
-          const pageItem = getPageById(pageId);
-          if (pageItem) pageItem.unlock({ shouldSync: false, recursive: false });
-        });
-      },
-      "made-public": ({ pageIds }) => {
-        pageIds.forEach((pageId) => {
-          const pageItem = getPageById(pageId);
-          if (pageItem) pageItem.makePublic({ shouldSync: false });
-        });
-      },
-      "made-private": ({ pageIds }) => {
-        pageIds.forEach((pageId) => {
-          const pageItem = getPageById(pageId);
-          if (pageItem) pageItem.makePrivate({ shouldSync: false });
-        });
-      },
-      deleted: ({ pageIds, data }) => {
-        pageIds.forEach((pageId) => {
-          const pageItem = getPageById(pageId);
-          if (pageItem) {
-            removePage({ pageId, shouldSync: false });
-            if (page.id === pageId && data?.user_id !== currentUser?.id) {
-              setToast({
-                type: TOAST_TYPE.ERROR,
-                title: "Page deleted",
-                message: `Page deleted${getUserDisplayText(data.user_id)}`,
-              });
-              router.push(handlers.getRedirectionLink());
-            } else if (page.id === pageId) {
-              router.push(handlers.getRedirectionLink());
-            }
-          }
-        });
-      },
-      property_updated: ({ pageIds, data }) => {
-        pageIds.forEach((pageId) => {
-          const pageInstance = getPageById(pageId);
-          const { name: updatedName, ...rest } = data;
-          if (updatedName != null) pageInstance?.updateTitle(updatedName);
-          pageInstance?.mutateProperties(rest);
-        });
-      },
-      error: ({ pageIds, data }) => {
-        const errorType = data.error_type;
-        const errorMessage = data.error_message || "An error occurred";
-        const errorCode = data.error_code;
-
-        if (page.id && pageIds.includes(page.id)) {
-          // Show toast notification
-          setToast({
-            type: TOAST_TYPE.ERROR,
-            title: errorType === "fetch" ? "Failed to load page" : "Failed to save page",
-            message: errorMessage,
+  const ACTION_HANDLERS = useMemo(
+    function ACTION_HANDLERS() {
+      return {
+        archived: ({ pageIds, data }: { pageIds: string[]; data: EventToPayloadMap["archived"] }) => {
+          pageIds.forEach((pageId) => {
+            const pageItem = getPageById(pageId);
+            if (pageItem) pageItem.archive({ archived_at: data.archived_at, shouldSync: false });
           });
+        },
 
-          // Handle specific error codes
-          const pageInstance = getPageById(page.id);
-          if (pageInstance) {
-            if (errorCode === "page_locked") {
-              // Lock the page if not already locked
-              if (!pageInstance.is_locked) {
-                pageInstance.mutateProperties({ is_locked: true });
+        unarchived: ({ pageIds }: { pageIds: string[] }) => {
+          pageIds.forEach((pageId) => {
+            const pageItem = getPageById(pageId);
+            if (pageItem) pageItem.restore({ shouldSync: false });
+          });
+        },
+
+        locked: ({ pageIds }: { pageIds: string[] }) => {
+          pageIds.forEach((pageId) => {
+            const pageItem = getPageById(pageId);
+            if (pageItem) pageItem.lock({ shouldSync: false, recursive: false });
+          });
+        },
+
+        unlocked: ({ pageIds }: { pageIds: string[] }) => {
+          pageIds.forEach((pageId) => {
+            const pageItem = getPageById(pageId);
+            if (pageItem) pageItem.unlock({ shouldSync: false, recursive: false });
+          });
+        },
+
+        "made-public": ({ pageIds }: { pageIds: string[] }) => {
+          pageIds.forEach((pageId) => {
+            const pageItem = getPageById(pageId);
+            if (pageItem) pageItem.makePublic({ shouldSync: false });
+          });
+        },
+
+        "made-private": ({ pageIds }: { pageIds: string[] }) => {
+          pageIds.forEach((pageId) => {
+            const pageItem = getPageById(pageId);
+            if (pageItem) pageItem.makePrivate({ shouldSync: false });
+          });
+        },
+
+        deleted: ({ pageIds, data }: { pageIds: string[]; data: EventToPayloadMap["deleted"] }) => {
+          pageIds.forEach((pageId) => {
+            const pageItem = getPageById(pageId);
+            if (pageItem) {
+              removePage({ pageId, shouldSync: false });
+              if (page.id === pageId && data?.user_id !== currentUser?.id) {
+                setToast({
+                  type: TOAST_TYPE.ERROR,
+                  title: "Page deleted",
+                  message: `Page deleted${getUserDisplayText(data.user_id)}`,
+                });
+                router.push(handlers.getRedirectionLink());
+              } else if (page.id === pageId) {
+                router.push(handlers.getRedirectionLink());
               }
-            } else if (errorCode === "page_archived") {
-              // Mark page as archived if not already
-              if (!pageInstance.archived_at) {
-                pageInstance.mutateProperties({ archived_at: new Date().toISOString() });
+            }
+          });
+        },
+
+        property_updated: ({ pageIds, data }: { pageIds: string[]; data: EventToPayloadMap["property_updated"] }) => {
+          pageIds.forEach((pageId) => {
+            const pageInstance = getPageById(pageId);
+            const { name: updatedName, ...rest } = data;
+            if (updatedName != null) pageInstance?.updateTitle(updatedName);
+            pageInstance?.mutateProperties(rest);
+          });
+        },
+
+        error: ({ pageIds, data }: { pageIds: string[]; data: EventToPayloadMap["error"] }) => {
+          const errorType = data.error_type;
+          const errorMessage = data.error_message || "An error occurred";
+          const errorCode = data.error_code;
+
+          if (page.id && pageIds.includes(page.id)) {
+            // Show toast notification
+            setToast({
+              type: TOAST_TYPE.ERROR,
+              title: errorType === "fetch" ? "Failed to load page" : "Failed to save page",
+              message: errorMessage,
+            });
+
+            // Handle specific error codes
+            const pageInstance = getPageById(page.id);
+            if (pageInstance) {
+              if (errorCode === "page_locked") {
+                // Lock the page if not already locked
+                if (!pageInstance.is_locked) {
+                  pageInstance.mutateProperties({ is_locked: true });
+                }
+              } else if (errorCode === "page_archived") {
+                // Mark page as archived if not already
+                if (!pageInstance.archived_at) {
+                  pageInstance.mutateProperties({ archived_at: new Date().toISOString() });
+                }
               }
             }
           }
-        }
-      },
-      ...customRealtimeEventHandlers,
-    }),
-    [getPageById, page, router, getUserDisplayText, removePage, currentUser, customRealtimeEventHandlers, handlers]
+        },
+
+        ...customRealtimeEventHandlers,
+      };
+    },
+    [getPageById, removePage, page, currentUser, getUserDisplayText, router, handlers, customRealtimeEventHandlers]
   );
 
   // The main function that will be returned from this hook
@@ -177,7 +184,7 @@ export const useRealtimePageEvents = ({
       if (normalizedPageIds.length === 0) return;
 
       // Get the handler for this message type
-      const handler = ACTION_HANDLERS[actionType];
+      const handler = ACTION_HANDLERS[actionType] as PageUpdateHandler<T> | undefined;
 
       if (handler) {
         // Now TypeScript knows that handler and data match in type
diff --git a/apps/web/core/hooks/use-timezone.tsx b/apps/web/core/hooks/use-timezone.tsx
index 488fa69409..2356317cfa 100644
--- a/apps/web/core/hooks/use-timezone.tsx
+++ b/apps/web/core/hooks/use-timezone.tsx
@@ -43,8 +43,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>
     );
   };
@@ -59,11 +59,6 @@ const useTimezone = () => {
       query: "utc, coordinated universal time",
       content: "UTC",
     },
-    {
-      value: "Universal",
-      query: "universal, coordinated universal time",
-      content: "Universal",
-    },
   ];
 
   const selectedTimezone = (value: string | undefined) => options.find((option) => option.value === value)?.content;
diff --git a/apps/web/core/hooks/use-workspace-paths.ts b/apps/web/core/hooks/use-workspace-paths.ts
index fd0e742191..f0d1c9b52e 100644
--- a/apps/web/core/hooks/use-workspace-paths.ts
+++ b/apps/web/core/hooks/use-workspace-paths.ts
@@ -1,5 +1,3 @@
-"use client";
-
 import { useParams, usePathname } from "next/navigation";
 
 /**
@@ -11,14 +9,16 @@ export const useWorkspacePaths = () => {
   const pathname = usePathname();
 
   const isSettingsPath = pathname.includes(`/${workspaceSlug}/settings`);
-  const isWikiPath = pathname.includes(`/${workspaceSlug}/pages`);
+  const isWikiPath = pathname.includes(`/${workspaceSlug}/wiki`);
   const isAiPath = pathname.includes(`/${workspaceSlug}/pi-chat`);
   const isProjectsPath = pathname.includes(`/${workspaceSlug}/`) && !isWikiPath && !isAiPath && !isSettingsPath;
+  const isNotificationsPath = pathname.includes(`/${workspaceSlug}/notifications`);
 
   return {
     isSettingsPath,
     isWikiPath,
     isAiPath,
     isProjectsPath,
+    isNotificationsPath,
   };
 };
diff --git a/apps/web/core/layouts/auth-layout/project-wrapper.tsx b/apps/web/core/layouts/auth-layout/project-wrapper.tsx
index 3ed74d0bd0..6df49cbea5 100644
--- a/apps/web/core/layouts/auth-layout/project-wrapper.tsx
+++ b/apps/web/core/layouts/auth-layout/project-wrapper.tsx
@@ -1,32 +1,27 @@
-"use client";
-
-import type { FC, ReactNode } from "react";
-import { useEffect } from "react";
+import type { ReactNode } from "react";
+import { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // plane imports
-import { EUserPermissions, EUserPermissionsLevel, PROJECT_TRACKER_ELEMENTS } from "@plane/constants";
-import { useTranslation } from "@plane/i18n";
-import { EmptyStateDetailed } from "@plane/propel/empty-state";
-import { EProjectNetwork, GANTT_TIMELINE_TYPE } from "@plane/types";
+import { EUserPermissions, EUserPermissionsLevel } from "@plane/constants";
+import { GANTT_TIMELINE_TYPE } from "@plane/types";
 // components
-import { JoinProject } from "@/components/auth-screens/project/join-project";
-import { LogoSpinner } from "@/components/common/logo-spinner";
+import { ProjectAccessRestriction } from "@/components/auth-screens/project/project-access-restriction";
 import {
   PROJECT_DETAILS,
   PROJECT_ME_INFORMATION,
   PROJECT_LABELS,
   PROJECT_MEMBERS,
+  PROJECT_MEMBER_PREFERENCES,
   PROJECT_STATES,
   PROJECT_ESTIMATES,
   PROJECT_ALL_CYCLES,
   PROJECT_MODULES,
   PROJECT_VIEWS,
+  PROJECT_INTAKE_STATE,
 } from "@/constants/fetch-keys";
-import { captureClick } from "@/helpers/event-tracker.helper";
 // hooks
 import { useProjectEstimates } from "@/hooks/store/estimates";
-import { useCommandPalette } from "@/hooks/store/use-command-palette";
 import { useCycle } from "@/hooks/store/use-cycle";
 import { useLabel } from "@/hooks/store/use-label";
 import { useMember } from "@/hooks/store/use-member";
@@ -34,46 +29,44 @@ import { useModule } from "@/hooks/store/use-module";
 import { useProject } from "@/hooks/store/use-project";
 import { useProjectState } from "@/hooks/store/use-project-state";
 import { useProjectView } from "@/hooks/store/use-project-view";
-import { useUserPermissions } from "@/hooks/store/user";
+import { useUser, useUserPermissions } from "@/hooks/store/user";
 import { useTimeLineChart } from "@/hooks/use-timeline-chart";
 
 interface IProjectAuthWrapper {
   workspaceSlug: string;
-  projectId?: string;
+  projectId: string;
   children: ReactNode;
   isLoading?: boolean;
 }
 
-export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
+export const ProjectAuthWrapper = observer(function ProjectAuthWrapper(props: IProjectAuthWrapper) {
   const { workspaceSlug, projectId, children, isLoading: isParentLoading = false } = props;
-  // plane hooks
-  const { t } = useTranslation();
+  // states
+  const [isJoiningProject, setIsJoiningProject] = useState(false);
   // store hooks
-  const { toggleCreateProjectModal } = useCommandPalette();
   const { fetchUserProjectInfo, allowPermissions, getProjectRoleByWorkspaceSlugAndProjectId } = useUserPermissions();
-  const { loader, getProjectById, fetchProjectDetails } = useProject();
+  const { fetchProjectDetails } = useProject();
+  const { joinProject } = useUserPermissions();
   const { fetchAllCycles } = useCycle();
   const { fetchModulesSlim, fetchModules } = useModule();
   const { initGantt } = useTimeLineChart(GANTT_TIMELINE_TYPE.MODULE);
   const { fetchViews } = useProjectView();
   const {
-    project: { fetchProjectMembers },
+    project: { fetchProjectMembers, fetchProjectMemberPreferences },
   } = useMember();
-  const { fetchProjectStates } = useProjectState();
+  const { fetchProjectStates, fetchProjectIntakeState } = useProjectState();
+  const { data: currentUserData } = useUser();
   const { fetchProjectLabels } = useLabel();
   const { getProjectEstimates } = useProjectEstimates();
-
   // derived values
-  const projectExists = projectId ? getProjectById(projectId) : null;
-  const projectMemberInfo = getProjectRoleByWorkspaceSlugAndProjectId(workspaceSlug, projectId);
   const hasPermissionToCurrentProject = allowPermissions(
     [EUserPermissions.ADMIN, EUserPermissions.MEMBER, EUserPermissions.GUEST],
     EUserPermissionsLevel.PROJECT,
     workspaceSlug,
     projectId
   );
+  const currentProjectRole = getProjectRoleByWorkspaceSlugAndProjectId(workspaceSlug, projectId);
   const isWorkspaceAdmin = allowPermissions([EUserPermissions.ADMIN], EUserPermissionsLevel.WORKSPACE, workspaceSlug);
-
   // Initialize module timeline chart
   useEffect(() => {
     initGantt();
@@ -81,111 +74,82 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
   }, []);
 
   // fetching project details
-  useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => fetchProjectDetails(workspaceSlug, projectId) : null
+  const { isLoading: isProjectDetailsLoading, error: projectDetailsError } = useSWR(
+    PROJECT_DETAILS(workspaceSlug, projectId),
+    () => fetchProjectDetails(workspaceSlug, projectId)
   );
-
   // fetching user project member information
+  useSWR(PROJECT_ME_INFORMATION(workspaceSlug, projectId), () => fetchUserProjectInfo(workspaceSlug, projectId));
+  // fetching project member preferences
   useSWR(
-    workspaceSlug && projectId ? PROJECT_ME_INFORMATION(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => fetchUserProjectInfo(workspaceSlug, projectId) : null
+    currentUserData?.id ? PROJECT_MEMBER_PREFERENCES(projectId, currentProjectRole) : null,
+    currentUserData?.id ? () => fetchProjectMemberPreferences(workspaceSlug, projectId, currentUserData.id) : null,
+    { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project labels
-  useSWR(
-    workspaceSlug && projectId ? PROJECT_LABELS(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug, projectId) : null,
-    { revalidateIfStale: false, revalidateOnFocus: false }
-  );
+  useSWR(PROJECT_LABELS(projectId, currentProjectRole), () => fetchProjectLabels(workspaceSlug, projectId), {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+  });
   // fetching project members
-  useSWR(
-    workspaceSlug && projectId ? PROJECT_MEMBERS(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => fetchProjectMembers(workspaceSlug, projectId) : null,
-    { revalidateIfStale: false, revalidateOnFocus: false }
-  );
+  useSWR(PROJECT_MEMBERS(projectId, currentProjectRole), () => fetchProjectMembers(workspaceSlug, projectId), {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+  });
   // fetching project states
-  useSWR(
-    workspaceSlug && projectId ? PROJECT_STATES(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => fetchProjectStates(workspaceSlug, projectId) : null,
-    { revalidateIfStale: false, revalidateOnFocus: false }
-  );
+  useSWR(PROJECT_STATES(projectId, currentProjectRole), () => fetchProjectStates(workspaceSlug, projectId), {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+  });
+  // fetching project intake state
+  useSWR(PROJECT_INTAKE_STATE(projectId, currentProjectRole), () => fetchProjectIntakeState(workspaceSlug, projectId), {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+  });
   // fetching project estimates
-  useSWR(
-    workspaceSlug && projectId ? PROJECT_ESTIMATES(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => getProjectEstimates(workspaceSlug, projectId) : null,
-    { revalidateIfStale: false, revalidateOnFocus: false }
-  );
+  useSWR(PROJECT_ESTIMATES(projectId, currentProjectRole), () => getProjectEstimates(workspaceSlug, projectId), {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+  });
   // fetching project cycles
-  useSWR(
-    workspaceSlug && projectId ? PROJECT_ALL_CYCLES(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => fetchAllCycles(workspaceSlug, projectId) : null,
-    { revalidateIfStale: false, revalidateOnFocus: false }
-  );
+  useSWR(PROJECT_ALL_CYCLES(projectId, currentProjectRole), () => fetchAllCycles(workspaceSlug, projectId), {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+  });
   // fetching project modules
   useSWR(
-    workspaceSlug && projectId ? PROJECT_MODULES(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId
-      ? async () => {
-          await fetchModulesSlim(workspaceSlug, projectId);
-          await fetchModules(workspaceSlug, projectId);
-        }
-      : null,
+    PROJECT_MODULES(projectId, currentProjectRole),
+    async () => {
+      await Promise.all([fetchModulesSlim(workspaceSlug, projectId), fetchModules(workspaceSlug, projectId)]);
+    },
     { revalidateIfStale: false, revalidateOnFocus: false }
   );
   // fetching project views
-  useSWR(
-    workspaceSlug && projectId ? PROJECT_VIEWS(workspaceSlug, projectId) : null,
-    workspaceSlug && projectId ? () => fetchViews(workspaceSlug, projectId) : null,
-    { revalidateIfStale: false, revalidateOnFocus: false }
-  );
+  useSWR(PROJECT_VIEWS(projectId, currentProjectRole), () => fetchViews(workspaceSlug, projectId), {
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+  });
 
-  // permissions
-  const canPerformEmptyStateActions = allowPermissions(
-    [EUserPermissions.ADMIN, EUserPermissions.MEMBER],
-    EUserPermissionsLevel.WORKSPACE
-  );
+  // handle join project
+  const handleJoinProject = () => {
+    setIsJoiningProject(true);
+    joinProject(workspaceSlug, projectId).finally(() => setIsJoiningProject(false));
+  };
 
-  // check if the project member apis is loading
-  if (isParentLoading || (!projectMemberInfo && projectId && hasPermissionToCurrentProject === null))
+  const isProjectLoading = (isParentLoading || isProjectDetailsLoading) && !projectDetailsError;
+
+  if (isProjectLoading) return null;
+
+  if (!isProjectLoading && hasPermissionToCurrentProject === false) {
     return (
-      <div className="grid h-full place-items-center bg-custom-background-100 p-4 rounded-lg border border-custom-border-200">
-        <div className="flex flex-col items-center gap-3 text-center">
-          <LogoSpinner />
-        </div>
-      </div>
-    );
-
-  // check if the user don't have permission to access the project
-  if (
-    ((projectExists?.network && projectExists?.network !== EProjectNetwork.PRIVATE) || isWorkspaceAdmin) &&
-    projectId &&
-    hasPermissionToCurrentProject === false
-  )
-    return <JoinProject projectId={projectId} />;
-
-  // check if the project info is not found.
-  if (loader === "loaded" && projectId && !!hasPermissionToCurrentProject === false)
-    return (
-      <div className="grid h-full place-items-center bg-custom-background-100">
-        <EmptyStateDetailed
-          title={t("workspace_projects.empty_state.general.title")}
-          description={t("workspace_projects.empty_state.general.description")}
-          assetKey="project"
-          assetClassName="size-40"
-          actions={[
-            {
-              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",
-            },
-          ]}
-        />
-      </div>
+      <ProjectAccessRestriction
+        errorStatusCode={projectDetailsError?.status}
+        isWorkspaceAdmin={isWorkspaceAdmin}
+        handleJoinProject={handleJoinProject}
+        isJoinButtonDisabled={isJoiningProject}
+      />
     );
+  }
 
   return <>{children}</>;
 });
diff --git a/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx b/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
index a484bce975..b8c000e386 100644
--- a/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
+++ b/apps/web/core/layouts/auth-layout/workspace-wrapper.tsx
@@ -1,6 +1,4 @@
-"use client";
-
-import type { FC, ReactNode } from "react";
+import type { ReactNode } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
@@ -12,13 +10,12 @@ import { Button, getButtonStyling } from "@plane/propel/button";
 import { PlaneLogo } from "@plane/propel/icons";
 import { TOAST_TYPE, setToast } from "@plane/propel/toast";
 import { Tooltip } from "@plane/propel/tooltip";
-// components
 import { cn } from "@plane/utils";
 // assets
 import WorkSpaceNotAvailable from "@/app/assets/workspace/workspace-not-available.png?url";
 // components
 import { LogoSpinner } from "@/components/common/logo-spinner";
-// hooks
+// constants
 import {
   WORKSPACE_MEMBERS,
   WORKSPACE_PARTIAL_PROJECTS,
@@ -28,6 +25,7 @@ import {
   WORKSPACE_STATES,
   WORKSPACE_SIDEBAR_PREFERENCES,
 } from "@/constants/fetch-keys";
+// hooks
 import { useFavorite } from "@/hooks/store/use-favorite";
 import { useMember } from "@/hooks/store/use-member";
 import { useProject } from "@/hooks/store/use-project";
@@ -41,7 +39,7 @@ interface IWorkspaceAuthWrapper {
   isLoading?: boolean;
 }
 
-export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props) => {
+export const WorkspaceAuthWrapper = observer(function WorkspaceAuthWrapper(props: IWorkspaceAuthWrapper) {
   const { children, isLoading: isParentLoading = false } = props;
   // router params
   const { workspaceSlug } = useParams();
@@ -128,7 +126,7 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((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 p-4 rounded-lg border border-subtle">
         <div className="flex flex-col items-center gap-3 text-center">
           <LogoSpinner />
         </div>
@@ -139,16 +137,16 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((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="relative flex h-full w-full flex-col items-center justify-center bg-surface-2 ">
         <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 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}>
@@ -159,35 +157,35 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((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"))}
+                  className={cn(getButtonStyling("secondary", "base"))}
                 >
                   Visit Profile
                 </Link>
               )}
               {allWorkspaces && allWorkspaces.length === 0 && (
-                <Link href={`/`} className={cn(getButtonStyling("neutral-primary", "md"))}>
+                <Link href={`/`} 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 bottom-0 left-4 top-0 w-0 bg-layer-1 md:w-0.5" />
         </div>
       </div>
     );
@@ -196,12 +194,12 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((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>
@@ -209,16 +207,12 @@ export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((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 aca10dde5f..ca7e5db442 100644
--- a/apps/web/core/layouts/default-layout/index.tsx
+++ b/apps/web/core/layouts/default-layout/index.tsx
@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from "react";
+import type { ReactNode } from "react";
 import { cn } from "@plane/utils";
 
 type Props = {
@@ -7,10 +7,10 @@ type Props = {
   className?: string;
 };
 
-const DefaultLayout: FC<Props> = ({ children, gradient = false, className }) => (
-  <div className={cn(`h-screen w-full overflow-hidden ${gradient ? "" : "bg-custom-background-100"}`, className)}>
-    {children}
-  </div>
-);
+function DefaultLayout({ children, gradient = false, className }: Props) {
+  return (
+    <div className={cn(`h-screen w-full overflow-hidden ${gradient ? "" : "bg-surface-1"}`, className)}>{children}</div>
+  );
+}
 
 export default DefaultLayout;
diff --git a/apps/web/core/lib/app-rail/context.tsx b/apps/web/core/lib/app-rail/context.tsx
new file mode 100644
index 0000000000..e2e871e4c8
--- /dev/null
+++ b/apps/web/core/lib/app-rail/context.tsx
@@ -0,0 +1,23 @@
+import { createContext, useContext } from "react";
+import type { IAppRailVisibilityContext } from "./types";
+
+/**
+ * Context for app-rail visibility control
+ * Provides access to app rail enabled state, collapse state, and toggle function
+ */
+export const AppRailVisibilityContext = createContext<IAppRailVisibilityContext | undefined>(undefined);
+
+/**
+ * Hook to consume the AppRailVisibilityContext
+ * Must be used within an AppRailVisibilityProvider
+ *
+ * @returns The app rail visibility context
+ * @throws Error if used outside of AppRailVisibilityProvider
+ */
+export const useAppRailVisibility = (): IAppRailVisibilityContext => {
+  const context = useContext(AppRailVisibilityContext);
+  if (context === undefined) {
+    throw new Error("useAppRailVisibility must be used within AppRailVisibilityProvider");
+  }
+  return context;
+};
diff --git a/apps/web/core/lib/app-rail/index.ts b/apps/web/core/lib/app-rail/index.ts
new file mode 100644
index 0000000000..053a94f0c6
--- /dev/null
+++ b/apps/web/core/lib/app-rail/index.ts
@@ -0,0 +1,3 @@
+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
new file mode 100644
index 0000000000..e51e82c9ce
--- /dev/null
+++ b/apps/web/core/lib/app-rail/provider.tsx
@@ -0,0 +1,47 @@
+import React, { useCallback, useMemo } from "react";
+import { observer } from "mobx-react";
+import { useParams } from "next/navigation";
+import useLocalStorage from "@/hooks/use-local-storage";
+import { AppRailVisibilityContext } from "./context";
+import type { IAppRailVisibilityContext } from "./types";
+
+interface AppRailVisibilityProviderProps {
+  children: React.ReactNode;
+  isEnabled?: boolean; // Allow override, default false
+}
+
+/**
+ * AppRailVisibilityProvider - manages app rail visibility state
+ * Base provider that accepts isEnabled as a prop
+ */
+export const AppRailVisibilityProvider = observer(function AppRailVisibilityProvider({
+  children,
+  isEnabled = false,
+}: AppRailVisibilityProviderProps) {
+  const { workspaceSlug } = useParams();
+
+  // User preference from localStorage
+  const { storedValue: isCollapsed, setValue: setIsCollapsed } = useLocalStorage<boolean>(
+    `APP_RAIL_${workspaceSlug}`,
+    false // Default: not collapsed (app rail visible)
+  );
+
+  const toggleAppRail = useCallback(() => {
+    setIsCollapsed(!isCollapsed);
+  }, [isCollapsed, setIsCollapsed]);
+
+  // Compute final visibility: enabled and not collapsed
+  const shouldRenderAppRail = isEnabled && !isCollapsed;
+
+  const value: IAppRailVisibilityContext = useMemo(
+    () => ({
+      isEnabled,
+      isCollapsed: isCollapsed ?? false,
+      shouldRenderAppRail,
+      toggleAppRail,
+    }),
+    [isEnabled, isCollapsed, shouldRenderAppRail, toggleAppRail]
+  );
+
+  return <AppRailVisibilityContext.Provider value={value}>{children}</AppRailVisibilityContext.Provider>;
+});
diff --git a/apps/web/core/lib/app-rail/types.ts b/apps/web/core/lib/app-rail/types.ts
new file mode 100644
index 0000000000..36dbcb129e
--- /dev/null
+++ b/apps/web/core/lib/app-rail/types.ts
@@ -0,0 +1,26 @@
+/**
+ * Type definitions for app-rail visibility context
+ */
+
+export interface IAppRailVisibilityContext {
+  /**
+   * Whether the app rail is enabled
+   */
+  isEnabled: boolean;
+
+  /**
+   * Whether the app rail is collapsed (user preference from localStorage)
+   */
+  isCollapsed: boolean;
+
+  /**
+   * Computed property: whether the app rail should actually render
+   * True only if isEnabled && !isCollapsed
+   */
+  shouldRenderAppRail: boolean;
+
+  /**
+   * Toggle the collapse state of the app rail
+   */
+  toggleAppRail: () => void;
+}
diff --git a/apps/web/core/lib/b-progress/AppProgressBar.tsx b/apps/web/core/lib/b-progress/AppProgressBar.tsx
index 915b19ff99..b07f0ffb28 100644
--- a/apps/web/core/lib/b-progress/AppProgressBar.tsx
+++ b/apps/web/core/lib/b-progress/AppProgressBar.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect, useRef } from "react";
 import { BProgress } from "@bprogress/core";
 import { useNavigation } from "react-router";
@@ -62,7 +60,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 7b531da2b2..0000000000
--- a/apps/web/core/lib/b-progress/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./AppProgressBar";
diff --git a/apps/web/core/lib/intercom-provider.tsx b/apps/web/core/lib/intercom-provider.tsx
deleted file mode 100644
index c302a0d84b..0000000000
--- a/apps/web/core/lib/intercom-provider.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-"use client";
-
-import type { FC } from "react";
-import React, { useEffect } from "react";
-import { Intercom, show, hide, onHide } from "@intercom/messenger-js-sdk";
-import { observer } from "mobx-react";
-// store hooks
-import { useInstance } from "@/hooks/store/use-instance";
-import { useTransient } from "@/hooks/store/use-transient";
-import { useUser } from "@/hooks/store/user";
-
-export type IntercomProviderProps = {
-  children: React.ReactNode;
-};
-
-const IntercomProvider: FC<IntercomProviderProps> = observer((props) => {
-  const { children } = props;
-  // hooks
-  const { data: user } = useUser();
-  const { config } = useInstance();
-  const { isIntercomToggle, toggleIntercom } = useTransient();
-
-  useEffect(() => {
-    if (isIntercomToggle) show();
-    else hide();
-  }, [isIntercomToggle]);
-
-  onHide(() => {
-    toggleIntercom(false);
-  });
-
-  useEffect(() => {
-    if (user && config?.is_intercom_enabled && config.intercom_app_id) {
-      Intercom({
-        app_id: config.intercom_app_id || "",
-        user_id: user.id,
-        name: `${user.first_name} ${user.last_name}`,
-        email: user.email,
-        hide_default_launcher: true,
-      });
-    }
-  }, [user, config, toggleIntercom]);
-
-  return <>{children}</>;
-});
-
-export default IntercomProvider;
diff --git a/apps/web/core/lib/polyfills/index.ts b/apps/web/core/lib/polyfills/index.ts
index 20b3b476c0..e006a090f1 100644
--- a/apps/web/core/lib/polyfills/index.ts
+++ b/apps/web/core/lib/polyfills/index.ts
@@ -1 +1,24 @@
-export * from "./requestIdleCallback";
+if (typeof window !== "undefined" && window) {
+  // Add request callback polyfill to browser in case it does not exist
+  window.requestIdleCallback =
+    window.requestIdleCallback ??
+    function (cb) {
+      const start = Date.now();
+      return setTimeout(function () {
+        cb({
+          didTimeout: false,
+          timeRemaining: function () {
+            return Math.max(0, 50 - (Date.now() - start));
+          },
+        });
+      }, 1);
+    };
+
+  window.cancelIdleCallback =
+    window.cancelIdleCallback ??
+    function (id) {
+      clearTimeout(id);
+    };
+}
+
+export {};
diff --git a/apps/web/core/lib/polyfills/requestIdleCallback.ts b/apps/web/core/lib/polyfills/requestIdleCallback.ts
deleted file mode 100644
index e006a090f1..0000000000
--- a/apps/web/core/lib/polyfills/requestIdleCallback.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-if (typeof window !== "undefined" && window) {
-  // Add request callback polyfill to browser in case it does not exist
-  window.requestIdleCallback =
-    window.requestIdleCallback ??
-    function (cb) {
-      const start = Date.now();
-      return setTimeout(function () {
-        cb({
-          didTimeout: false,
-          timeRemaining: function () {
-            return Math.max(0, 50 - (Date.now() - start));
-          },
-        });
-      }, 1);
-    };
-
-  window.cancelIdleCallback =
-    window.cancelIdleCallback ??
-    function (id) {
-      clearTimeout(id);
-    };
-}
-
-export {};
diff --git a/apps/web/core/lib/posthog-provider.tsx b/apps/web/core/lib/posthog-provider.tsx
index 84d65a172d..cb3d691a98 100644
--- a/apps/web/core/lib/posthog-provider.tsx
+++ b/apps/web/core/lib/posthog-provider.tsx
@@ -1,7 +1,5 @@
-"use client";
-
-import type { FC, ReactNode } from "react";
-import { lazy, Suspense, useEffect, useState } from "react";
+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";
@@ -16,19 +14,23 @@ 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(() => import("@/lib/posthog-view"));
+const PostHogPageView = lazy(function PostHogPageView() {
+  return import("@/lib/posthog-view");
+});
 
 export interface IPosthogWrapper {
   children: ReactNode;
 }
 
-const PostHogProvider: FC<IPosthogWrapper> = observer((props) => {
+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
@@ -61,10 +63,11 @@ const PostHogProvider: FC<IPosthogWrapper> = observer((props) => {
   }, [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) {
+    if (posthogKey && posthogHost && !posthog.__loaded) {
       posthog.init(posthogKey, {
         api_host: posthogHost,
         ui_host: posthogHost,
@@ -74,31 +77,32 @@ const PostHogProvider: FC<IPosthogWrapper> = observer((props) => {
         capture_pageleave: true,
         disable_session_recording: true,
       });
+      isInitializedRef.current = true;
       setHydrated(true);
     }
   }, []);
 
-  useEffect(() => {
-    const clickHandler = (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 });
-        }
+  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 });
       }
-    };
-
-    if (is_posthog_enabled && hydrated) {
-      document.addEventListener("click", clickHandler);
     }
+  }, []);
+
+  useEffect(() => {
+    if (!is_posthog_enabled || !hydrated) return;
+
+    document.addEventListener("click", clickHandler);
 
     return () => {
       document.removeEventListener("click", clickHandler);
     };
-  }, [hydrated, is_posthog_enabled]);
+  }, [hydrated, is_posthog_enabled, clickHandler]);
 
   if (is_posthog_enabled && hydrated)
     return (
diff --git a/apps/web/core/lib/posthog-view.tsx b/apps/web/core/lib/posthog-view.tsx
index 4192e8930e..1c29ea5670 100644
--- a/apps/web/core/lib/posthog-view.tsx
+++ b/apps/web/core/lib/posthog-view.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { useEffect } from "react";
 import { usePathname, useSearchParams } from "next/navigation";
 // posthog
diff --git a/apps/web/core/lib/store-context.tsx b/apps/web/core/lib/store-context.tsx
index dde0269eee..5402bb9fe4 100644
--- a/apps/web/core/lib/store-context.tsx
+++ b/apps/web/core/lib/store-context.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import type { ReactElement } from "react";
 import { createContext } from "react";
 // plane web store
@@ -18,6 +16,6 @@ const initializeStore = () => {
 
 export const store = initializeStore();
 
-export const StoreProvider = ({ children }: { children: ReactElement }) => (
-  <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
-);
+export function StoreProvider({ children }: { children: ReactElement }) {
+  return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
+}
diff --git a/apps/web/core/lib/wrappers/authentication-wrapper.tsx b/apps/web/core/lib/wrappers/authentication-wrapper.tsx
index c8802b311a..5d8ae189b4 100644
--- a/apps/web/core/lib/wrappers/authentication-wrapper.tsx
+++ b/apps/web/core/lib/wrappers/authentication-wrapper.tsx
@@ -1,6 +1,4 @@
-"use client";
-
-import type { FC, ReactNode } from "react";
+import type { ReactNode } from "react";
 import { observer } from "mobx-react";
 import { useSearchParams, usePathname } from "next/navigation";
 import useSWR from "swr";
@@ -25,7 +23,7 @@ const isValidURL = (url: string): boolean => {
   return !disallowedSchemes.test(url);
 };
 
-export const AuthenticationWrapper: FC<TAuthenticationWrapper> = observer((props) => {
+export const AuthenticationWrapper = observer(function AuthenticationWrapper(props: TAuthenticationWrapper) {
   const pathname = usePathname();
   const router = useAppRouter();
   const searchParams = useSearchParams();
diff --git a/apps/web/core/lib/wrappers/instance-wrapper.tsx b/apps/web/core/lib/wrappers/instance-wrapper.tsx
index 5f25900343..fb082107fa 100644
--- a/apps/web/core/lib/wrappers/instance-wrapper.tsx
+++ b/apps/web/core/lib/wrappers/instance-wrapper.tsx
@@ -1,4 +1,4 @@
-import type { FC, ReactNode } from "react";
+import type { ReactNode } from "react";
 import { observer } from "mobx-react";
 import useSWR from "swr";
 // components
@@ -11,7 +11,7 @@ type TInstanceWrapper = {
   children: ReactNode;
 };
 
-export const InstanceWrapper: FC<TInstanceWrapper> = observer((props) => {
+const InstanceWrapper = observer(function InstanceWrapper(props: TInstanceWrapper) {
   const { children } = props;
   // store
   const { isLoading, instance, error, fetchInstanceInfo } = useInstance();
@@ -40,3 +40,5 @@ export const InstanceWrapper: FC<TInstanceWrapper> = observer((props) => {
 
   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 a2681c9af6..5dad12826c 100644
--- a/apps/web/core/lib/wrappers/store-wrapper.tsx
+++ b/apps/web/core/lib/wrappers/store-wrapper.tsx
@@ -1,12 +1,12 @@
-import type { ReactNode, FC } from "react";
-import { useEffect } from "react";
+import type { ReactNode } 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 +16,7 @@ type TStoreWrapper = {
   children: ReactNode;
 };
 
-const StoreWrapper: FC<TStoreWrapper> = observer((props) => {
+function StoreWrapper(props: TStoreWrapper) {
   const { children } = props;
   // theme
   const { setTheme } = useTheme();
@@ -28,6 +28,13 @@ const StoreWrapper: FC<TStoreWrapper> = observer((props) => {
   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 +45,61 @@ const StoreWrapper: FC<TStoreWrapper> = observer((props) => {
   }, [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 +112,6 @@ const StoreWrapper: FC<TStoreWrapper> = observer((props) => {
   }, [params, setQuery]);
 
   return <>{children}</>;
-});
+}
 
-export default StoreWrapper;
+export default observer(StoreWrapper);
diff --git a/apps/web/core/services/file.service.ts b/apps/web/core/services/file.service.ts
index 680772c638..cfa367376a 100644
--- a/apps/web/core/services/file.service.ts
+++ b/apps/web/core/services/file.service.ts
@@ -2,7 +2,7 @@ import type { AxiosRequestConfig } from "axios";
 // plane types
 import { API_BASE_URL } from "@plane/constants";
 import { getFileMetaDataForUpload, generateFileUploadPayload } from "@plane/services";
-import type { TFileEntityInfo, TFileSignedURLResponse } from "@plane/types";
+import type { EFileAssetType, TFileEntityInfo, TFileSignedURLResponse } from "@plane/types";
 import { getAssetIdFromUrl } from "@plane/utils";
 // helpers
 // services
@@ -274,11 +274,20 @@ export class FileService extends APIService {
         throw err?.response?.data;
       });
   }
-  async getProjectCoverImages(): Promise<string[]> {
-    return this.get(`/api/project-covers/`)
-      .then((res) => res?.data)
-      .catch((err) => {
-        throw err?.response?.data;
+
+  async duplicateAsset(
+    workspaceSlug: string,
+    assetId: string,
+    data: {
+      entity_id?: string;
+      entity_type: EFileAssetType;
+      project_id?: string;
+    }
+  ): Promise<{ asset_id: string }> {
+    return this.post(`/api/assets/v2/workspaces/${workspaceSlug}/duplicate-assets/${assetId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
       });
   }
 }
diff --git a/apps/web/core/services/project/project-member.service.ts b/apps/web/core/services/project/project-member.service.ts
index ce5a19a579..04d62d1537 100644
--- a/apps/web/core/services/project/project-member.service.ts
+++ b/apps/web/core/services/project/project-member.service.ts
@@ -1,6 +1,12 @@
 // types
 import { API_BASE_URL } from "@plane/constants";
-import type { IProjectBulkAddFormData, TProjectMembership } from "@plane/types";
+import type {
+  IProjectBulkAddFormData,
+  IProjectMemberPreferencesFullResponse,
+  IProjectMemberPreferencesResponse,
+  IProjectMemberPreferencesUpdate,
+  TProjectMembership,
+} from "@plane/types";
 // services
 import { APIService } from "@/services/api.service";
 
@@ -58,13 +64,38 @@ export class ProjectMemberService extends APIService {
       });
   }
 
-  async deleteProjectMember(workspaceSlug: string, projectId: string, memberId: string): Promise<any> {
+  async deleteProjectMember(workspaceSlug: string, projectId: string, memberId: string): Promise<void> {
     return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`)
       .then((response) => response?.data)
       .catch((error) => {
         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-state.service.ts b/apps/web/core/services/project/project-state.service.ts
index d74fc1391a..ca0d344d03 100644
--- a/apps/web/core/services/project/project-state.service.ts
+++ b/apps/web/core/services/project/project-state.service.ts
@@ -1,6 +1,6 @@
 // services
 import { API_BASE_URL } from "@plane/constants";
-import type { IState } from "@plane/types";
+import type { IIntakeState, IState } from "@plane/types";
 import { APIService } from "@/services/api.service";
 // helpers
 // types
@@ -34,6 +34,14 @@ export class ProjectStateService extends APIService {
       });
   }
 
+  async getIntakeState(workspaceSlug: string, projectId: string): Promise<IIntakeState> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/intake-state/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
   async getState(workspaceSlug: string, projectId: string, stateId: string): Promise<any> {
     return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/`)
       .then((response) => response?.data)
diff --git a/apps/web/core/services/project/project.service.ts b/apps/web/core/services/project/project.service.ts
index 266ffe95df..5915c7608d 100644
--- a/apps/web/core/services/project/project.service.ts
+++ b/apps/web/core/services/project/project.service.ts
@@ -57,7 +57,7 @@ export class ProjectService extends APIService {
     return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`)
       .then((response) => response?.data)
       .catch((error) => {
-        throw error?.response?.data;
+        throw error?.response;
       });
   }
 
diff --git a/apps/web/core/services/user.service.ts b/apps/web/core/services/user.service.ts
index 379ac95211..33fffc2ee1 100644
--- a/apps/web/core/services/user.service.ts
+++ b/apps/web/core/services/user.service.ts
@@ -11,6 +11,7 @@ import type {
   IUserEmailNotificationSettings,
   TIssuesResponse,
   TUserProfile,
+  IEmailCheckResponse,
 } from "@plane/types";
 import { APIService } from "@/services/api.service";
 // types
@@ -258,6 +259,38 @@ export class UserService extends APIService {
         throw error?.response?.data;
       });
   }
+
+  async checkEmail(token: string, email: string): Promise<IEmailCheckResponse> {
+    return this.post(
+      "/auth/email-check/",
+      { email },
+      {
+        headers: {
+          "X-CSRFTOKEN": token,
+        },
+      }
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async generateEmailCode(data: { email: string }): Promise<any> {
+    return this.post("/api/users/me/email/generate-code/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async verifyEmailCode(data: { email: string; code: string }): Promise<any> {
+    return this.patch("/api/users/me/email/", data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
 }
 
 const userService = new UserService();
diff --git a/apps/web/core/services/workspace.service.ts b/apps/web/core/services/workspace.service.ts
index 5531ba386b..0811a562ad 100644
--- a/apps/web/core/services/workspace.service.ts
+++ b/apps/web/core/services/workspace.service.ts
@@ -386,4 +386,15 @@ export class WorkspaceService extends APIService {
         throw error?.response;
       });
   }
+
+  async updateBulkSidebarPreferences(
+    workspaceSlug: string,
+    data: Array<{ key: string; is_pinned: boolean; sort_order: number }>
+  ): Promise<IWorkspaceSidebarNavigation> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/sidebar-preferences/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
 }
diff --git a/apps/web/core/store/base-command-palette.store.ts b/apps/web/core/store/base-command-palette.store.ts
index eff132ef35..d48769f7e2 100644
--- a/apps/web/core/store/base-command-palette.store.ts
+++ b/apps/web/core/store/base-command-palette.store.ts
@@ -89,15 +89,15 @@ export abstract class BaseCommandPaletteStore implements IBaseCommandPaletteStor
   protected getCoreModalsState(): boolean {
     return Boolean(
       this.isCreateIssueModalOpen ||
-        this.isCreateCycleModalOpen ||
-        this.isCreateProjectModalOpen ||
-        this.isCreateModuleModalOpen ||
-        this.isCreateViewModalOpen ||
-        store.powerK.isShortcutsListModalOpen ||
-        this.isBulkDeleteIssueModalOpen ||
-        this.isDeleteIssueModalOpen ||
-        this.createPageModal.isOpen ||
-        this.allStickiesModal
+      this.isCreateCycleModalOpen ||
+      this.isCreateProjectModalOpen ||
+      this.isCreateModuleModalOpen ||
+      this.isCreateViewModalOpen ||
+      store.powerK.isShortcutsListModalOpen ||
+      this.isBulkDeleteIssueModalOpen ||
+      this.isDeleteIssueModalOpen ||
+      this.createPageModal.isOpen ||
+      this.allStickiesModal
     );
   }
   // computedFn
diff --git a/apps/web/core/store/base-power-k.store.ts b/apps/web/core/store/base-power-k.store.ts
index e8a5c2b771..a5182bd105 100644
--- a/apps/web/core/store/base-power-k.store.ts
+++ b/apps/web/core/store/base-power-k.store.ts
@@ -18,8 +18,12 @@ export interface IBasePowerKStore {
   commandRegistry: IPowerKCommandRegistry;
   activeContext: TPowerKContextType | null;
   activePage: TPowerKPageType | null;
+  topNavInputRef: React.RefObject<HTMLInputElement> | null;
+  topNavSearchInputRef: React.RefObject<HTMLInputElement> | null;
   setActiveContext: (entity: TPowerKContextType | null) => void;
   setActivePage: (page: TPowerKPageType | null) => void;
+  setTopNavInputRef: (ref: React.RefObject<HTMLInputElement> | null) => void;
+  setTopNavSearchInputRef: (ref: React.RefObject<HTMLInputElement> | null) => void;
   // toggle actions
   togglePowerKModal: (value?: boolean) => void;
   toggleShortcutsListModal: (value?: boolean) => void;
@@ -32,6 +36,8 @@ export abstract class BasePowerKStore implements IBasePowerKStore {
   commandRegistry: IPowerKCommandRegistry = new PowerKCommandRegistry();
   activeContext: TPowerKContextType | null = null;
   activePage: TPowerKPageType | null = null;
+  topNavInputRef: React.RefObject<HTMLInputElement> | null = null;
+  topNavSearchInputRef: React.RefObject<HTMLInputElement> | null = null;
 
   constructor() {
     makeObservable(this, {
@@ -41,11 +47,15 @@ export abstract class BasePowerKStore implements IBasePowerKStore {
       commandRegistry: observable.ref,
       activeContext: observable,
       activePage: observable,
+      topNavInputRef: observable.ref,
+      topNavSearchInputRef: observable.ref,
       // toggle actions
       togglePowerKModal: action,
       toggleShortcutsListModal: action,
       setActiveContext: action,
       setActivePage: action,
+      setTopNavInputRef: action,
+      setTopNavSearchInputRef: action,
     });
   }
 
@@ -65,6 +75,22 @@ export abstract class BasePowerKStore implements IBasePowerKStore {
     this.activePage = page;
   };
 
+  /**
+   * Sets the top nav input ref for keyboard shortcut access
+   * @param ref
+   */
+  setTopNavInputRef = (ref: React.RefObject<HTMLInputElement> | null) => {
+    this.topNavInputRef = ref;
+  };
+
+  /**
+   * Sets the top nav search input ref for keyboard shortcut access
+   * @param ref
+   */
+  setTopNavSearchInputRef = (ref: React.RefObject<HTMLInputElement> | null) => {
+    this.topNavSearchInputRef = ref;
+  };
+
   /**
    * Toggles the command palette modal
    * @param value
diff --git a/apps/web/core/store/editor/asset.store.ts b/apps/web/core/store/editor/asset.store.ts
index 7dd6f1c44b..7974f02b96 100644
--- a/apps/web/core/store/editor/asset.store.ts
+++ b/apps/web/core/store/editor/asset.store.ts
@@ -3,7 +3,7 @@ import { action, computed, makeObservable, observable, runInAction } from "mobx"
 import { computedFn } from "mobx-utils";
 import { v4 as uuidv4 } from "uuid";
 // plane types
-import type { TFileEntityInfo, TFileSignedURLResponse } from "@plane/types";
+import type { EFileAssetType, TFileEntityInfo, TFileSignedURLResponse } from "@plane/types";
 // services
 import { FileService } from "@/services/file.service";
 import type { TAttachmentUploadStatus } from "../issue/issue-details/attachment.store";
@@ -27,6 +27,19 @@ export interface IEditorAssetStore {
     projectId?: string;
     workspaceSlug: string;
   }) => Promise<TFileSignedURLResponse>;
+  duplicateEditorAsset: ({
+    assetId,
+    entityId,
+    entityType,
+    projectId,
+    workspaceSlug,
+  }: {
+    assetId: string;
+    entityId?: string;
+    entityType: EFileAssetType;
+    projectId?: string;
+    workspaceSlug: string;
+  }) => Promise<{ asset_id: string }>;
 }
 
 export class EditorAssetStore implements IEditorAssetStore {
@@ -117,4 +130,13 @@ export class EditorAssetStore implements IEditorAssetStore {
       });
     }
   };
+  duplicateEditorAsset: IEditorAssetStore["duplicateEditorAsset"] = async (args) => {
+    const { assetId, entityId, entityType, projectId, workspaceSlug } = args;
+    const { asset_id } = await this.fileService.duplicateAsset(workspaceSlug, assetId, {
+      entity_id: entityId,
+      entity_type: entityType,
+      project_id: projectId,
+    });
+    return { asset_id };
+  };
 }
diff --git a/apps/web/core/store/global-view.store.ts b/apps/web/core/store/global-view.store.ts
index eba2c44445..fea40218cb 100644
--- a/apps/web/core/store/global-view.store.ts
+++ b/apps/web/core/store/global-view.store.ts
@@ -174,7 +174,7 @@ export class GlobalViewStore implements IGlobalViewStore {
         );
         this.rootStore.issue.workspaceIssues.fetchIssuesWithExistingPagination(workspaceSlug, viewId, "mutation");
       }
-      return currentView as IWorkspaceView;
+      return currentView;
     } catch {
       Object.keys(data).forEach((key) => {
         const currentKey = key as keyof IWorkspaceView;
diff --git a/apps/web/core/store/inbox/project-inbox.store.ts b/apps/web/core/store/inbox/project-inbox.store.ts
index 5d58686243..788db2dc7f 100644
--- a/apps/web/core/store/inbox/project-inbox.store.ts
+++ b/apps/web/core/store/inbox/project-inbox.store.ts
@@ -64,7 +64,7 @@ export interface IProjectInboxStore {
     workspaceSlug: string,
     projectId: string,
     loadingType?: TLoader,
-    tab?: TInboxIssueCurrentTab | undefined
+    tab?: TInboxIssueCurrentTab
   ) => Promise<void>;
   fetchInboxPaginationIssues: (workspaceSlug: string, projectId: string) => Promise<void>;
   fetchInboxIssueById: (workspaceSlug: string, projectId: string, inboxIssueId: string) => Promise<TInboxIssue>;
@@ -125,18 +125,16 @@ export class ProjectInboxStore implements IProjectInboxStore {
    * @description computed project inbox filters
    */
   get inboxFilters() {
-    const { projectId } = this.store.router;
-    if (!projectId) return {} as TInboxIssueFilter;
-    return this.filtersMap?.[projectId];
+    if (!this.currentInboxProjectId) return {} as TInboxIssueFilter;
+    return this.filtersMap?.[this.currentInboxProjectId];
   }
 
   /**
    * @description computed project inbox sorting
    */
   get inboxSorting() {
-    const { projectId } = this.store.router;
-    if (!projectId) return {} as TInboxIssueSorting;
-    return this.sortingMap?.[projectId];
+    if (!this.currentInboxProjectId) return {} as TInboxIssueSorting;
+    return this.sortingMap?.[this.currentInboxProjectId];
   }
 
   get getAppliedFiltersCount() {
@@ -274,7 +272,8 @@ export class ProjectInboxStore implements IProjectInboxStore {
   };
 
   handleInboxIssueFilters = <T extends keyof TInboxIssueFilter>(key: T, value: TInboxIssueFilter[T]) => {
-    const { workspaceSlug, projectId } = this.store.router;
+    const { workspaceSlug } = this.store.router;
+    const projectId = this.currentInboxProjectId;
     if (workspaceSlug && projectId) {
       runInAction(() => {
         set(this.filtersMap, [projectId, key], value);
@@ -285,7 +284,8 @@ export class ProjectInboxStore implements IProjectInboxStore {
   };
 
   handleInboxIssueSorting = <T extends keyof TInboxIssueSorting>(key: T, value: TInboxIssueSorting[T]) => {
-    const { workspaceSlug, projectId } = this.store.router;
+    const { workspaceSlug } = this.store.router;
+    const projectId = this.currentInboxProjectId;
     if (workspaceSlug && projectId) {
       runInAction(() => {
         set(this.sortingMap, [projectId, key], value);
@@ -469,8 +469,9 @@ export class ProjectInboxStore implements IProjectInboxStore {
           );
         });
       return inboxIssueResponse;
-    } catch {
+    } catch (error) {
       console.error("Error creating the intake issue");
+      throw error;
     }
   };
 
diff --git a/apps/web/core/store/issue/cycle/filter.store.ts b/apps/web/core/store/issue/cycle/filter.store.ts
index c5234b9826..c6544936e0 100644
--- a/apps/web/core/store/issue/cycle/filter.store.ts
+++ b/apps/web/core/store/issue/cycle/filter.store.ts
@@ -202,7 +202,7 @@ export class CycleIssuesFilter extends IssueFilterHelperStore implements ICycleI
       if (isEmpty(this.filters) || isEmpty(this.filters[cycleId])) return;
 
       const _filters = {
-        richFilters: this.filters[cycleId].richFilters as TWorkItemFilterExpression,
+        richFilters: this.filters[cycleId].richFilters,
         displayFilters: this.filters[cycleId].displayFilters as IIssueDisplayFilterOptions,
         displayProperties: this.filters[cycleId].displayProperties as IIssueDisplayProperties,
         kanbanFilters: this.filters[cycleId].kanbanFilters as TIssueKanbanFilters,
diff --git a/apps/web/core/store/issue/cycle/issue.store.ts b/apps/web/core/store/issue/cycle/issue.store.ts
index 00f7309e4e..a64ac449a0 100644
--- a/apps/web/core/store/issue/cycle/issue.store.ts
+++ b/apps/web/core/store/issue/cycle/issue.store.ts
@@ -131,7 +131,7 @@ export class CycleIssues extends BaseIssuesStore implements ICycleIssues {
    * @param projectId
    * @param id is the cycle Id
    */
-  fetchParentStats = (workspaceSlug: string, projectId?: string | undefined, id?: string | undefined) => {
+  fetchParentStats = (workspaceSlug: string, projectId?: string, id?: string) => {
     const cycleId = id ?? this.cycleId;
 
     if (projectId && cycleId) {
@@ -150,7 +150,7 @@ export class CycleIssues extends BaseIssuesStore implements ICycleIssues {
     }
   };
 
-  updateParentStats = (prevIssueState?: TIssue, nextIssueState?: TIssue, id?: string | undefined) => {
+  updateParentStats = (prevIssueState?: TIssue, nextIssueState?: TIssue, id?: string) => {
     try {
       const distributionUpdates = getDistributionPathsPostUpdate(
         prevIssueState,
@@ -163,7 +163,7 @@ export class CycleIssues extends BaseIssuesStore implements ICycleIssues {
       if (cycleId) {
         this.rootIssueStore.rootStore.cycle.updateCycleDistribution(distributionUpdates, cycleId);
       }
-    } catch (e) {
+    } catch (_e) {
       console.warn("could not update cycle statistics");
     }
   };
@@ -305,12 +305,7 @@ export class CycleIssues extends BaseIssuesStore implements ICycleIssues {
     }
   ) => {
     // call API call to transfer issues
-    const response = await this.cycleService.transferIssues(
-      workspaceSlug as string,
-      projectId as string,
-      cycleId as string,
-      payload
-    );
+    const response = await this.cycleService.transferIssues(workspaceSlug, projectId, cycleId, payload);
     // call fetch issues
     if (this.paginationOptions) {
       await this.fetchIssues(workspaceSlug, projectId, "mutation", this.paginationOptions, cycleId);
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 a0f710b115..b0ae994087 100644
--- a/apps/web/core/store/issue/helpers/base-issues-utils.ts
+++ b/apps/web/core/store/issue/helpers/base-issues-utils.ts
@@ -249,12 +249,12 @@ export const getFilteredWorkItems = (workItems: TIssue[], filters: IIssueFilterO
     activeFilters.every(([filterKey, filterValues]) => {
       // Handle date filters separately
       if (filterKey === "start_date" || filterKey === "target_date") {
-        return checkIssueDateFilter(workItem, filterKey as "start_date" | "target_date", filterValues as string[]);
+        return checkIssueDateFilter(workItem, filterKey, filterValues as string[]);
       }
       // Handle regular filters
       const issueKey = FILTER_TO_ISSUE_MAP[filterKey as keyof IIssueFilterOptions];
       if (!issueKey) return true; // Skip if no mapping exists
-      const issueValue = workItem[issueKey as keyof TIssue];
+      const issueValue = workItem[issueKey];
       // Handle array-based properties vs single value properties
       if (Array.isArray(issueValue)) {
         return filterValues!.some((filterValue: any) => issueValue.includes(filterValue));
@@ -338,7 +338,7 @@ export const getGroupedWorkItemIds = (
   // Convert to Record type
   const groupedWorkItemsRecord: Record<string, string[]> = {};
   Object.entries(groupedWorkItems).forEach(([key, items]) => {
-    groupedWorkItemsRecord[key] = getOrderedWorkItems(items as TIssue[], orderByKey);
+    groupedWorkItemsRecord[key] = getOrderedWorkItems(items, orderByKey);
   });
 
   return groupedWorkItemsRecord;
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 cdf039a9e1..2948834886 100644
--- a/apps/web/core/store/issue/helpers/base-issues.store.ts
+++ b/apps/web/core/store/issue/helpers/base-issues.store.ts
@@ -307,15 +307,15 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
 
     const allIssues = groupedIssueIds[ALL_ISSUES] ?? [];
     if (!this.groupBy && !this.subGroupBy && allIssues && Array.isArray(allIssues)) {
-      return allIssues as string[];
+      return allIssues;
     }
 
     if (this.groupBy && groupId && groupedIssueIds?.[groupId] && Array.isArray(groupedIssueIds[groupId])) {
-      return (groupedIssueIds[groupId] ?? []) as string[];
+      return groupedIssueIds[groupId] ?? [];
     }
 
     if (this.groupBy && this.subGroupBy && groupId && subGroupId) {
-      return ((groupedIssueIds as TSubGroupedIssues)[groupId]?.[subGroupId] ?? []) as string[];
+      return (groupedIssueIds as TSubGroupedIssues)[groupId]?.[subGroupId] ?? [];
     }
 
     return undefined;
@@ -1405,7 +1405,7 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
     // if groupedIssueIds is an array, update the `groupedIssueIds` store at the issuePath
     if (groupedIssueIds && Array.isArray(groupedIssueIds)) {
       update(this, ["groupedIssueIds", ...issuePath], (issueIds: string[] = []) =>
-        this.issuesSortWithOrderBy(uniq(concat(issueIds, groupedIssueIds as string[])), this.orderBy)
+        this.issuesSortWithOrderBy(uniq(concat(issueIds, groupedIssueIds)), this.orderBy)
       );
       // return true to indicate the store has been updated
       return true;
@@ -1617,7 +1617,7 @@ export abstract class BaseIssuesStore implements IBaseIssuesStore {
   getArrayStringArray = (
     issueObject: Partial<TIssue> | undefined,
     value: string | string[] | undefined | null,
-    groupByKey?: TIssueGroupByOptions | undefined
+    groupByKey?: TIssueGroupByOptions
   ): string[] => {
     // if issue object is undefined return empty array
     if (!issueObject) return [];
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 895b78693a..42b3cbaa9c 100644
--- a/apps/web/core/store/issue/issue-details/root.store.ts
+++ b/apps/web/core/store/issue/issue-details/root.store.ts
@@ -60,7 +60,8 @@ export type TIssueCrudOperationState = {
 };
 
 export interface IIssueDetail
-  extends IIssueStoreActions,
+  extends
+    IIssueStoreActions,
     IIssueReactionStoreActions,
     IIssueLinkStoreActions,
     IIssueSubIssuesStoreActions,
@@ -206,7 +207,7 @@ export abstract class IssueDetail implements IIssueDetail {
     this.issue = new IssueStore(this, serviceType);
     this.reaction = new IssueReactionStore(this, serviceType);
     this.attachment = new IssueAttachmentStore(rootStore, serviceType);
-    this.activity = new IssueActivityStore(rootStore.rootStore as RootStore, serviceType);
+    this.activity = new IssueActivityStore(rootStore.rootStore, serviceType);
     this.comment = new IssueCommentStore(this, serviceType);
     this.commentReaction = new IssueCommentReactionStore(this);
     this.subIssues = new IssueSubIssuesStore(this, serviceType);
diff --git a/apps/web/core/store/issue/module/filter.store.ts b/apps/web/core/store/issue/module/filter.store.ts
index 42d18c8f51..a2421436f2 100644
--- a/apps/web/core/store/issue/module/filter.store.ts
+++ b/apps/web/core/store/issue/module/filter.store.ts
@@ -207,7 +207,7 @@ export class ModuleIssuesFilter extends IssueFilterHelperStore implements IModul
       if (isEmpty(this.filters) || isEmpty(this.filters[moduleId])) return;
 
       const _filters = {
-        richFilters: this.filters[moduleId].richFilters as TWorkItemFilterExpression,
+        richFilters: this.filters[moduleId].richFilters,
         displayFilters: this.filters[moduleId].displayFilters as IIssueDisplayFilterOptions,
         displayProperties: this.filters[moduleId].displayProperties as IIssueDisplayProperties,
         kanbanFilters: this.filters[moduleId].kanbanFilters as TIssueKanbanFilters,
diff --git a/apps/web/core/store/issue/module/issue.store.ts b/apps/web/core/store/issue/module/issue.store.ts
index 540d0aa940..488d183d3d 100644
--- a/apps/web/core/store/issue/module/issue.store.ts
+++ b/apps/web/core/store/issue/module/issue.store.ts
@@ -85,7 +85,7 @@ export class ModuleIssues extends BaseIssuesStore implements IModuleIssues {
    * @param projectId
    * @param id is the module Id
    */
-  fetchParentStats = (workspaceSlug: string, projectId?: string | undefined, id?: string | undefined) => {
+  fetchParentStats = (workspaceSlug: string, projectId?: string, id?: string) => {
     const moduleId = id ?? this.moduleId;
     projectId &&
       moduleId &&
@@ -98,7 +98,7 @@ export class ModuleIssues extends BaseIssuesStore implements IModuleIssues {
    * @param nextIssueState
    * @param id
    */
-  updateParentStats = (prevIssueState?: TIssue, nextIssueState?: TIssue, id?: string | undefined) => {
+  updateParentStats = (prevIssueState?: TIssue, nextIssueState?: TIssue, id?: string) => {
     try {
       // get distribution updates
       const distributionUpdates = getDistributionPathsPostUpdate(
diff --git a/apps/web/core/store/issue/profile/filter.store.ts b/apps/web/core/store/issue/profile/filter.store.ts
index fa3f209543..3e2da337af 100644
--- a/apps/web/core/store/issue/profile/filter.store.ts
+++ b/apps/web/core/store/issue/profile/filter.store.ts
@@ -183,7 +183,7 @@ export class ProfileIssuesFilter extends IssueFilterHelperStore implements IProf
       if (isEmpty(this.filters) || isEmpty(this.filters[userId])) return;
 
       const _filters = {
-        richFilters: this.filters[userId].richFilters as TWorkItemFilterExpression,
+        richFilters: this.filters[userId].richFilters,
         displayFilters: this.filters[userId].displayFilters as IIssueDisplayFilterOptions,
         displayProperties: this.filters[userId].displayProperties as IIssueDisplayProperties,
         kanbanFilters: this.filters[userId].kanbanFilters as TIssueKanbanFilters,
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 ca7f9e6099..efeacc8b6e 100644
--- a/apps/web/core/store/issue/project-views/filter.store.ts
+++ b/apps/web/core/store/issue/project-views/filter.store.ts
@@ -216,7 +216,7 @@ export class ProjectViewIssuesFilter extends IssueFilterHelperStore implements I
       if (isEmpty(this.filters) || isEmpty(this.filters[viewId])) return;
 
       const _filters = {
-        richFilters: this.filters[viewId].richFilters as TWorkItemFilterExpression,
+        richFilters: this.filters[viewId].richFilters,
         displayFilters: this.filters[viewId].displayFilters as IIssueDisplayFilterOptions,
         displayProperties: this.filters[viewId].displayProperties as IIssueDisplayProperties,
         kanbanFilters: this.filters[viewId].kanbanFilters as TIssueKanbanFilters,
diff --git a/apps/web/core/store/issue/project/filter.store.ts b/apps/web/core/store/issue/project/filter.store.ts
index 28af59adfd..1768606c5e 100644
--- a/apps/web/core/store/issue/project/filter.store.ts
+++ b/apps/web/core/store/issue/project/filter.store.ts
@@ -190,7 +190,7 @@ export class ProjectIssuesFilter extends IssueFilterHelperStore implements IProj
       if (isEmpty(this.filters) || isEmpty(this.filters[projectId])) return;
 
       const _filters = {
-        richFilters: this.filters[projectId].richFilters as TWorkItemFilterExpression,
+        richFilters: this.filters[projectId].richFilters,
         displayFilters: this.filters[projectId].displayFilters as IIssueDisplayFilterOptions,
         displayProperties: this.filters[projectId].displayProperties as IIssueDisplayProperties,
         kanbanFilters: this.filters[projectId].kanbanFilters as TIssueKanbanFilters,
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 1ef5a94a56..49941ccfca 100644
--- a/apps/web/core/store/issue/workspace-draft/filter.store.ts
+++ b/apps/web/core/store/issue/workspace-draft/filter.store.ts
@@ -189,7 +189,7 @@ export class WorkspaceDraftIssuesFilter extends IssueFilterHelperStore implement
       if (isEmpty(this.filters) || isEmpty(this.filters[workspaceSlug])) return;
 
       const _filters = {
-        richFilters: this.filters[workspaceSlug].richFilters as TWorkItemFilterExpression,
+        richFilters: this.filters[workspaceSlug].richFilters,
         displayFilters: this.filters[workspaceSlug].displayFilters as IIssueDisplayFilterOptions,
         displayProperties: this.filters[workspaceSlug].displayProperties as IIssueDisplayProperties,
         kanbanFilters: this.filters[workspaceSlug].kanbanFilters as TIssueKanbanFilters,
diff --git a/apps/web/core/store/issue/workspace/filter.store.ts b/apps/web/core/store/issue/workspace/filter.store.ts
index b3dfbe9285..630429bb38 100644
--- a/apps/web/core/store/issue/workspace/filter.store.ts
+++ b/apps/web/core/store/issue/workspace/filter.store.ts
@@ -24,7 +24,7 @@ import type { IBaseIssueFilterStore, IIssueFilterHelperStore } from "../helpers/
 import { IssueFilterHelperStore } from "../helpers/issue-filter-helper.store";
 import type { IIssueRootStore } from "../root.store";
 
-type TWorkspaceFilters = TStaticViewTypes | string;
+type TWorkspaceFilters = TStaticViewTypes;
 
 export type TBaseFilterStore = IBaseIssueFilterStore & IIssueFilterHelperStore;
 
@@ -132,7 +132,7 @@ export class WorkspaceIssuesFilter extends IssueFilterHelperStore implements IWo
 
       if (STATIC_VIEW_TYPES.includes(viewId)) {
         const currentUserId = this.rootIssueStore.currentUserId;
-        const paramForStaticView = this.getFilterConditionBasedOnViews(currentUserId, viewId as TStaticViewTypes);
+        const paramForStaticView = this.getFilterConditionBasedOnViews(currentUserId, viewId);
         if (paramForStaticView) {
           filterParams = { ...filterParams, ...paramForStaticView };
         }
@@ -212,7 +212,7 @@ export class WorkspaceIssuesFilter extends IssueFilterHelperStore implements IWo
       if (!issueFilters) return;
 
       const _filters = {
-        richFilters: issueFilters.richFilters as TWorkItemFilterExpression,
+        richFilters: issueFilters.richFilters,
         displayFilters: issueFilters.displayFilters as IIssueDisplayFilterOptions,
         displayProperties: issueFilters.displayProperties as IIssueDisplayProperties,
         kanbanFilters: issueFilters.kanbanFilters as TIssueKanbanFilters,
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 8154c2f376..eb135868aa 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
@@ -3,7 +3,13 @@ import { action, computed, makeObservable, observable, runInAction } from "mobx"
 import { computedFn } from "mobx-utils";
 // plane imports
 import { EUserPermissions } from "@plane/constants";
-import type { EUserProjectRoles, IProjectBulkAddFormData, IUserLite, TProjectMembership } from "@plane/types";
+import type {
+  EUserProjectRoles,
+  IProjectBulkAddFormData,
+  IProjectMemberNavigationPreferences,
+  IUserLite,
+  TProjectMembership,
+} from "@plane/types";
 // plane web imports
 import type { RootStore } from "@/plane-web/store/root.store";
 // services
@@ -30,6 +36,9 @@ export interface IBaseProjectMemberStore {
   projectMemberMap: {
     [projectId: string]: Record<string, TProjectMembership>;
   };
+  projectMemberPreferencesMap: {
+    [projectId: string]: IProjectMemberNavigationPreferences;
+  };
   // filters store
   filters: IProjectMemberFiltersStore;
   // computed
@@ -39,12 +48,25 @@ 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;
   // fetch actions
   fetchProjectMembers: (
     workspaceSlug: string,
     projectId: string,
     clearExistingMembers?: boolean
   ) => Promise<TProjectMembership[]>;
+  fetchProjectMemberPreferences: (
+    workspaceSlug: string,
+    projectId: string,
+    memberId: string
+  ) => Promise<IProjectMemberNavigationPreferences>;
+  // update actions
+  updateProjectMemberPreferences: (
+    workspaceSlug: string,
+    projectId: string,
+    memberId: string,
+    preferences: IProjectMemberNavigationPreferences
+  ) => Promise<void>;
   // bulk operation actions
   bulkAddMembersToProject: (
     workspaceSlug: string,
@@ -69,6 +91,9 @@ export abstract class BaseProjectMemberStore implements IBaseProjectMemberStore
   projectMemberMap: {
     [projectId: string]: Record<string, TProjectMembership>;
   } = {};
+  projectMemberPreferencesMap: {
+    [projectId: string]: IProjectMemberNavigationPreferences;
+  } = {};
   // filters store
   filters: IProjectMemberFiltersStore;
   // stores
@@ -84,10 +109,13 @@ export abstract class BaseProjectMemberStore implements IBaseProjectMemberStore
     makeObservable(this, {
       // observables
       projectMemberMap: observable,
+      projectMemberPreferencesMap: observable,
       // computed
       projectMemberIds: computed,
       // actions
       fetchProjectMembers: action,
+      fetchProjectMemberPreferences: action,
+      updateProjectMemberPreferences: action,
       bulkAddMembersToProject: action,
       updateMemberRole: action,
       removeMemberFromProject: action,
@@ -407,4 +435,70 @@ export abstract class BaseProjectMemberStore implements IBaseProjectMemberStore
       });
     });
   };
+
+  /**
+   * @description get project member preferences
+   * @param projectId
+   */
+  getProjectMemberPreferences = computedFn(
+    (projectId: string): IProjectMemberNavigationPreferences | null =>
+      this.projectMemberPreferencesMap[projectId] || null
+  );
+
+  /**
+   * @description fetch project member preferences
+   * @param workspaceSlug
+   * @param projectId
+   * @param memberId
+   */
+  fetchProjectMemberPreferences = 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 || [],
+    };
+    runInAction(() => {
+      set(this.projectMemberPreferencesMap, [projectId], preferences);
+    });
+    return preferences;
+  };
+
+  /**
+   * @description update project member preferences
+   * @param workspaceSlug
+   * @param projectId
+   * @param memberId
+   * @param preferences
+   */
+  updateProjectMemberPreferences = async (
+    workspaceSlug: string,
+    projectId: string,
+    memberId: string,
+    preferences: IProjectMemberNavigationPreferences
+  ): Promise<void> => {
+    const previousPreferences = this.projectMemberPreferencesMap[projectId];
+    try {
+      // Optimistically update the store
+      runInAction(() => {
+        set(this.projectMemberPreferencesMap, [projectId], preferences);
+      });
+      await this.projectMemberService.updateProjectMemberPreferences(workspaceSlug, projectId, memberId, {
+        navigation: preferences,
+      });
+    } catch (error) {
+      // Revert on error
+      runInAction(() => {
+        if (previousPreferences) {
+          set(this.projectMemberPreferencesMap, [projectId], previousPreferences);
+        } else {
+          unset(this.projectMemberPreferencesMap, [projectId]);
+        }
+      });
+      throw error;
+    }
+  };
 }
diff --git a/apps/web/core/store/notifications/workspace-notifications.store.ts b/apps/web/core/store/notifications/workspace-notifications.store.ts
index 7923d8b659..0767179299 100644
--- a/apps/web/core/store/notifications/workspace-notifications.store.ts
+++ b/apps/web/core/store/notifications/workspace-notifications.store.ts
@@ -144,7 +144,7 @@ export class WorkspaceNotificationStore implements IWorkspaceNotificationStore {
         }
       })
       // .filter((n) => (this.filters.read ? (n.read_at ? true : false) : n.read_at ? false : true))
-      .map((n) => n.id) as string[];
+      .map((n) => n.id);
     return workspaceNotificationIds;
   });
 
diff --git a/apps/web/core/store/pages/base-page.ts b/apps/web/core/store/pages/base-page.ts
index b9381f248f..bf8d53671d 100644
--- a/apps/web/core/store/pages/base-page.ts
+++ b/apps/web/core/store/pages/base-page.ts
@@ -13,6 +13,7 @@ import { PageEditorInstance } from "./page-editor-info";
 export type TBasePage = TPage & {
   // observables
   isSubmitting: TNameDescriptionLoader;
+  isSyncingWithServer: "syncing" | "synced" | "error";
   // computed
   asJSON: TPage | undefined;
   isCurrentUserOwner: boolean;
@@ -35,6 +36,7 @@ export type TBasePage = TPage & {
   removePageFromFavorites: () => Promise<void>;
   duplicate: () => Promise<TPage | undefined>;
   mutateProperties: (data: Partial<TPage>, shouldUpdateName?: boolean) => void;
+  setSyncingStatus: (status: "syncing" | "synced" | "error") => void;
   // sub-store
   editor: PageEditorInstance;
 };
@@ -73,6 +75,7 @@ export type TPageInstance = TBasePage &
 export class BasePage extends ExtendedBasePage implements TBasePage {
   // loaders
   isSubmitting: TNameDescriptionLoader = "saved";
+  isSyncingWithServer: "syncing" | "synced" | "error" = "syncing";
   // page properties
   id: string | undefined;
   name: string | undefined;
@@ -155,6 +158,7 @@ export class BasePage extends ExtendedBasePage implements TBasePage {
       created_at: observable.ref,
       updated_at: observable.ref,
       deleted_at: observable.ref,
+      isSyncingWithServer: observable.ref,
       // helpers
       oldName: observable.ref,
       setIsSubmitting: action,
@@ -535,4 +539,10 @@ export class BasePage extends ExtendedBasePage implements TBasePage {
       set(this, key, value);
     });
   };
+
+  setSyncingStatus = (status: "syncing" | "synced" | "error") => {
+    runInAction(() => {
+      this.isSyncingWithServer = status;
+    });
+  };
 }
diff --git a/apps/web/core/store/pages/project-page.store.ts b/apps/web/core/store/pages/project-page.store.ts
index 0169a9eb99..040fea59a7 100644
--- a/apps/web/core/store/pages/project-page.store.ts
+++ b/apps/web/core/store/pages/project-page.store.ts
@@ -217,6 +217,7 @@ export class ProjectPageStore implements IProjectPageStore {
             const existingPage = this.getPageById(page.id);
             if (existingPage) {
               // If page already exists, update all fields except name
+
               const { name, ...otherFields } = page;
               existingPage.mutateProperties(otherFields, false);
             } else {
diff --git a/apps/web/core/store/project-view.store.ts b/apps/web/core/store/project-view.store.ts
index 11c56eed60..17167c0a59 100644
--- a/apps/web/core/store/project-view.store.ts
+++ b/apps/web/core/store/project-view.store.ts
@@ -169,7 +169,7 @@ export class ProjectViewStore implements IProjectViewStore {
         });
         return response;
       });
-    } catch (error) {
+    } catch (_error) {
       this.loader = false;
       return undefined;
     }
diff --git a/apps/web/core/store/project/project.store.ts b/apps/web/core/store/project/project.store.ts
index 3dce91b05a..422fac379f 100644
--- a/apps/web/core/store/project/project.store.ts
+++ b/apps/web/core/store/project/project.store.ts
@@ -30,6 +30,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 +108,7 @@ export class ProjectStore implements IProjectStore {
       currentProjectDetails: computed,
       joinedProjectIds: computed,
       favoriteProjectIds: computed,
+      currentProjectNextSequenceId: computed,
       // helper actions
       processProjectAfterCreation: action,
       // fetch actions
@@ -216,6 +218,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
    */
diff --git a/apps/web/core/store/root.store.ts b/apps/web/core/store/root.store.ts
index f74cb0f4c4..db08030a49 100644
--- a/apps/web/core/store/root.store.ts
+++ b/apps/web/core/store/root.store.ts
@@ -13,6 +13,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";
@@ -58,12 +59,9 @@ import type { IStickyStore } from "./sticky/sticky.store";
 import { StickyStore } from "./sticky/sticky.store";
 import type { IThemeStore } from "./theme.store";
 import { ThemeStore } from "./theme.store";
-import type { ITransientStore } from "./transient.store";
-import { TransientStore } from "./transient.store";
 import type { IUserStore } from "./user";
 import { UserStore } from "./user";
 import type { IWorkspaceRootStore } from "./workspace";
-import { WorkspaceRootStore } from "./workspace";
 
 enableStaticRendering(typeof window === "undefined");
 
@@ -93,7 +91,6 @@ export class CoreRootStore {
   multipleSelect: IMultipleSelectStore;
   workspaceNotification: IWorkspaceNotificationStore;
   favorite: IFavoriteStore;
-  transient: ITransientStore;
   stickyStore: IStickyStore;
   editorAssetStore: IEditorAssetStore;
   workItemFilters: IWorkItemFilterStore;
@@ -105,7 +102,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);
@@ -124,7 +121,6 @@ export class CoreRootStore {
     this.projectEstimate = new ProjectEstimateStore(this);
     this.workspaceNotification = new WorkspaceNotificationStore(this);
     this.favorite = new FavoriteStore(this);
-    this.transient = new TransientStore();
     this.stickyStore = new StickyStore();
     this.editorAssetStore = new EditorAssetStore();
     this.analytics = new AnalyticsStore();
@@ -140,7 +136,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);
@@ -159,7 +155,6 @@ export class CoreRootStore {
     this.projectEstimate = new ProjectEstimateStore(this);
     this.workspaceNotification = new WorkspaceNotificationStore(this);
     this.favorite = new FavoriteStore(this);
-    this.transient = new TransientStore();
     this.stickyStore = new StickyStore();
     this.editorAssetStore = new EditorAssetStore();
     this.workItemFilters = new WorkItemFilterStore();
diff --git a/apps/web/core/store/state.store.ts b/apps/web/core/store/state.store.ts
index 9085ab0d9a..91130b8268 100644
--- a/apps/web/core/store/state.store.ts
+++ b/apps/web/core/store/state.store.ts
@@ -3,7 +3,7 @@ import { action, computed, makeObservable, observable, runInAction } from "mobx"
 import { computedFn } from "mobx-utils";
 // plane imports
 import { STATE_GROUPS } from "@plane/constants";
-import type { IState } from "@plane/types";
+import type { IIntakeState, IState } from "@plane/types";
 // helpers
 import { sortStates } from "@plane/utils";
 // plane web
@@ -13,19 +13,25 @@ import type { RootStore } from "@/plane-web/store/root.store";
 export interface IStateStore {
   //Loaders
   fetchedMap: Record<string, boolean>;
+  fetchedIntakeMap: Record<string, boolean>;
   // observables
   stateMap: Record<string, IState>;
+  intakeStateMap: Record<string, IIntakeState>;
   // computed
   workspaceStates: IState[] | undefined;
   projectStates: IState[] | undefined;
   groupedProjectStates: Record<string, IState[]> | undefined;
   // computed actions
   getStateById: (stateId: string | null | undefined) => IState | undefined;
+  getIntakeStateById: (intakeStateId: string | null | undefined) => IIntakeState | undefined;
   getProjectStates: (projectId: string | null | undefined) => IState[] | undefined;
+  getProjectIntakeState: (projectId: string | null | undefined) => IIntakeState | undefined;
   getProjectStateIds: (projectId: string | null | undefined) => string[] | undefined;
+  getProjectIntakeStateIds: (projectId: string | null | undefined) => string[] | undefined;
   getProjectDefaultStateId: (projectId: string | null | undefined) => string | undefined;
   // fetch actions
   fetchProjectStates: (workspaceSlug: string, projectId: string) => Promise<IState[]>;
+  fetchProjectIntakeState: (workspaceSlug: string, projectId: string) => Promise<IIntakeState>;
   fetchWorkspaceStates: (workspaceSlug: string) => Promise<IState[]>;
   // crud actions
   createState: (workspaceSlug: string, projectId: string, data: Partial<IState>) => Promise<IState>;
@@ -49,8 +55,10 @@ export interface IStateStore {
 
 export class StateStore implements IStateStore {
   stateMap: Record<string, IState> = {};
+  intakeStateMap: Record<string, IIntakeState> = {};
   //loaders
   fetchedMap: Record<string, boolean> = {};
+  fetchedIntakeMap: Record<string, boolean> = {};
   rootStore: RootStore;
   router;
   stateService: ProjectStateService;
@@ -59,12 +67,15 @@ export class StateStore implements IStateStore {
     makeObservable(this, {
       // observables
       stateMap: observable,
+      intakeStateMap: observable,
       fetchedMap: observable,
+      fetchedIntakeMap: observable,
       // computed
       projectStates: computed,
       groupedProjectStates: computed,
       // fetch action
       fetchProjectStates: action,
+      fetchProjectIntakeState: action,
       // CRUD actions
       createState: action,
       updateState: action,
@@ -127,6 +138,15 @@ export class StateStore implements IStateStore {
     return this.stateMap[stateId] ?? undefined;
   });
 
+  /**
+   * @description returns intake state details using intake state id
+   * @param intakeStateId
+   */
+  getIntakeStateById = computedFn((intakeStateId: string | null | undefined) => {
+    if (!this.intakeStateMap || !intakeStateId) return;
+    return this.intakeStateMap[intakeStateId] ?? undefined;
+  });
+
   /**
    * Returns the stateMap belongs to a project by projectId
    * @param projectId
@@ -138,6 +158,16 @@ export class StateStore implements IStateStore {
     return sortStates(Object.values(this.stateMap).filter((state) => state.project_id === projectId));
   });
 
+  /**
+   * Returns the intake state for a project by projectId
+   * @param projectId
+   * @returns IIntakeState | undefined
+   */
+  getProjectIntakeState = computedFn((projectId: string | null | undefined) => {
+    if (!projectId || !this.fetchedIntakeMap[projectId]) return;
+    return Object.values(this.intakeStateMap).find((state) => state.project_id === projectId);
+  });
+
   /**
    * Returns the state ids for a project by projectId
    * @param projectId
@@ -151,6 +181,18 @@ export class StateStore implements IStateStore {
     return projectStates?.map((state) => state.id) ?? [];
   });
 
+  /**
+   * Returns the intake state ids for a project by projectId
+   * @param projectId
+   * @returns string[]
+   */
+  getProjectIntakeStateIds = computedFn((projectId: string | null | undefined) => {
+    const workspaceSlug = this.router.workspaceSlug;
+    if (!workspaceSlug || !projectId || !this.fetchedIntakeMap[projectId]) return undefined;
+    const projectIntakeState = this.getProjectIntakeState(projectId);
+    return projectIntakeState?.id ? [projectIntakeState.id] : [];
+  });
+
   /**
    * Returns the default state id for a project
    * @param projectId
@@ -178,6 +220,21 @@ export class StateStore implements IStateStore {
     return statesResponse;
   };
 
+  /**
+   * fetches the intakeStateMap of a project
+   * @param workspaceSlug
+   * @param projectId
+   * @returns
+   */
+  fetchProjectIntakeState = async (workspaceSlug: string, projectId: string) => {
+    const intakeStateResponse = await this.stateService.getIntakeState(workspaceSlug, projectId);
+    runInAction(() => {
+      set(this.intakeStateMap, [intakeStateResponse.id], intakeStateResponse);
+      set(this.fetchedIntakeMap, projectId, true);
+    });
+    return intakeStateResponse;
+  };
+
   /**
    * fetches the stateMap of all the states in workspace
    * @param workspaceSlug
diff --git a/apps/web/core/store/transient.store.ts b/apps/web/core/store/transient.store.ts
deleted file mode 100644
index c7bacce616..0000000000
--- a/apps/web/core/store/transient.store.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { action, observable, makeObservable } from "mobx";
-
-export interface ITransientStore {
-  // observables
-  isIntercomToggle: boolean;
-  // actions
-  toggleIntercom: (intercomToggle: boolean) => void;
-}
-
-export class TransientStore implements ITransientStore {
-  // observables
-  isIntercomToggle: boolean = false;
-
-  constructor() {
-    makeObservable(this, {
-      // observable
-      isIntercomToggle: observable.ref,
-      // action
-      toggleIntercom: action,
-    });
-  }
-
-  /**
-   * @description Toggle the intercom collapsed state
-   * @param { boolean } intercomToggle
-   */
-  toggleIntercom = (intercomToggle: boolean) => (this.isIntercomToggle = intercomToggle);
-}
diff --git a/apps/web/core/store/user/base-permissions.store.ts b/apps/web/core/store/user/base-permissions.store.ts
index 0d9e28612d..a4b34a05d1 100644
--- a/apps/web/core/store/user/base-permissions.store.ts
+++ b/apps/web/core/store/user/base-permissions.store.ts
@@ -36,6 +36,7 @@ export interface IBaseUserPermissionStore {
     workspaceSlug: string,
     projectId?: string
   ) => EUserPermissions | undefined;
+  fetchWorkspaceLevelProjectEntities: (workspaceSlug: string, projectId: string) => void;
   allowPermissions: (
     allowPermissions: ETempUserRole[],
     level: TUserPermissionsLevel,
@@ -148,6 +149,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 +319,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/profile.store.ts b/apps/web/core/store/user/profile.store.ts
index ca8ce0cc56..5e9d67de69 100644
--- a/apps/web/core/store/user/profile.store.ts
+++ b/apps/web/core/store/user/profile.store.ts
@@ -36,13 +36,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 +215,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/workspace/index.ts b/apps/web/core/store/workspace/index.ts
index 50aed6e0e4..eea83642f2 100644
--- a/apps/web/core/store/workspace/index.ts
+++ b/apps/web/core/store/workspace/index.ts
@@ -40,14 +40,19 @@ export interface IWorkspaceRootStore {
     key: string,
     data: Partial<IWorkspaceSidebarNavigationItem>
   ) => Promise<IWorkspaceSidebarNavigationItem | undefined>;
+  updateBulkSidebarPreferences: (
+    workspaceSlug: string,
+    data: Array<{ key: string; is_pinned: boolean; sort_order: number }>
+  ) => Promise<void>;
   getNavigationPreferences: (workspaceSlug: string) => IWorkspaceSidebarNavigation | undefined;
+  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> = {};
@@ -82,6 +87,7 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
       deleteWorkspace: action,
       fetchSidebarNavigationPreferences: action,
       updateSidebarPreference: action,
+      updateBulkSidebarPreferences: action,
     });
 
     // services
@@ -200,7 +206,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");
@@ -214,15 +220,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 {
@@ -272,4 +282,42 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
   getNavigationPreferences = computedFn(
     (workspaceSlug: string): IWorkspaceSidebarNavigation | undefined => this.navigationPreferencesMap[workspaceSlug]
   );
+
+  updateBulkSidebarPreferences = async (
+    workspaceSlug: string,
+    data: Array<{ key: string; is_pinned: boolean; sort_order: number }>
+  ) => {
+    const beforeUpdateData = clone(this.navigationPreferencesMap[workspaceSlug]);
+
+    try {
+      // Optimistically update store
+      const updatedPreferences: IWorkspaceSidebarNavigation = {};
+      data.forEach((item) => {
+        updatedPreferences[item.key] = item;
+      });
+
+      runInAction(() => {
+        this.navigationPreferencesMap[workspaceSlug] = {
+          ...this.navigationPreferencesMap[workspaceSlug],
+          ...updatedPreferences,
+        };
+      });
+
+      // Call API to persist changes
+      await this.workspaceService.updateBulkSidebarPreferences(workspaceSlug, data);
+    } catch (error) {
+      // Rollback on failure
+      runInAction(() => {
+        this.navigationPreferencesMap[workspaceSlug] = beforeUpdateData;
+      });
+      console.error("Failed to update bulk sidebar preferences:", error);
+      throw error;
+    }
+  };
+
+  /**
+   * Mutate workspace members activity
+   * @param workspaceSlug
+   */
+  abstract mutateWorkspaceMembersActivity(workspaceSlug: string): Promise<void>;
 }
diff --git a/apps/web/core/types/navigation-preferences.ts b/apps/web/core/types/navigation-preferences.ts
new file mode 100644
index 0000000000..357593a5aa
--- /dev/null
+++ b/apps/web/core/types/navigation-preferences.ts
@@ -0,0 +1,75 @@
+export type TPersonalNavigationItemKey = "stickies" | "your_work" | "drafts";
+
+export interface TPersonalNavigationItem {
+  key: TPersonalNavigationItemKey;
+  labelTranslationKey: string;
+  enabled: boolean;
+}
+
+export interface TPersonalNavigationItemState {
+  enabled: boolean;
+  sort_order: number;
+}
+
+export type TProjectNavigationMode = "accordion" | "horizontal";
+
+export interface TProjectDisplaySettings {
+  navigationMode: TProjectNavigationMode;
+  showLimitedProjects: boolean;
+  limitedProjectsCount: number;
+}
+
+export interface TPersonalNavigationPreferences {
+  items: Record<TPersonalNavigationItemKey, TPersonalNavigationItemState>;
+}
+
+export interface TProjectNavigationPreferences {
+  navigationMode: TProjectNavigationMode;
+  showLimitedProjects: boolean;
+  limitedProjectsCount: number;
+}
+
+export interface TWorkspaceNavigationItemState {
+  is_pinned: boolean;
+  sort_order: number;
+}
+
+export interface TWorkspaceNavigationPreferences {
+  items: Record<string, TWorkspaceNavigationItemState>;
+}
+
+export interface TNavigationPreferences {
+  personal: TPersonalNavigationPreferences;
+  workspace: TWorkspaceNavigationPreferences;
+  projects: TProjectNavigationPreferences;
+}
+
+// Default preferences
+export const DEFAULT_PERSONAL_PREFERENCES: TPersonalNavigationPreferences = {
+  items: {
+    stickies: { enabled: false, sort_order: 0 },
+    your_work: { enabled: true, sort_order: 1 },
+    drafts: { enabled: true, sort_order: 2 },
+  },
+};
+
+export const DEFAULT_PROJECT_PREFERENCES: TProjectNavigationPreferences = {
+  navigationMode: "accordion",
+  showLimitedProjects: false,
+  limitedProjectsCount: 10,
+};
+
+export const DEFAULT_WORKSPACE_PREFERENCES: TWorkspaceNavigationPreferences = {
+  items: {},
+};
+
+// App Rail preferences
+export type TAppRailDisplayMode = "icon_only" | "icon_with_label";
+
+export interface TAppRailPreferences {
+  displayMode: TAppRailDisplayMode;
+}
+
+export const DEFAULT_APP_RAIL_PREFERENCES: TAppRailPreferences = {
+  displayMode: "icon_with_label",
+};
diff --git a/apps/web/ee/components/home/header.tsx b/apps/web/ee/components/home/header.tsx
index c95736c9eb..ac905596ee 100644
--- a/apps/web/ee/components/home/header.tsx
+++ b/apps/web/ee/components/home/header.tsx
@@ -1 +1,3 @@
-export const HomePageHeader = () => <></>;
+export function HomePageHeader() {
+  return <></>;
+}
diff --git a/apps/web/ee/components/navigations/index.ts b/apps/web/ee/components/navigations/index.ts
new file mode 100644
index 0000000000..86a88758b1
--- /dev/null
+++ b/apps/web/ee/components/navigations/index.ts
@@ -0,0 +1 @@
+export * from "ce/components/navigations";
diff --git a/apps/web/ee/hooks/app-rail/index.ts b/apps/web/ee/hooks/app-rail/index.ts
new file mode 100644
index 0000000000..0bfcd74e04
--- /dev/null
+++ b/apps/web/ee/hooks/app-rail/index.ts
@@ -0,0 +1 @@
+export * from "ce/hooks/app-rail";
diff --git a/apps/web/google.d.ts b/apps/web/google.d.ts
index 3befff4da9..0a8bf46979 100644
--- a/apps/web/google.d.ts
+++ b/apps/web/google.d.ts
@@ -34,7 +34,7 @@ interface GsiButtonConfiguration {
   type: "standard" | "icon";
   theme?: "outline" | "filled_blue" | "filled_black";
   size?: "large" | "medium" | "small";
-  text?: "signin_with" | "signup_with" | "continue_with" | "signup_with";
+  text?: "signin_with" | "signup_with" | "continue_with";
   shape?: "rectangular" | "pill" | "circle" | "square";
   logo_alignment?: "left" | "center";
   width?: number;
diff --git a/apps/web/helpers/authentication.helper.tsx b/apps/web/helpers/authentication.helper.tsx
index de73675091..4a493e5eda 100644
--- a/apps/web/helpers/authentication.helper.tsx
+++ b/apps/web/helpers/authentication.helper.tsx
@@ -102,7 +102,7 @@ export type TAuthErrorInfo = {
 };
 
 const errorCodeMessages: {
-  [key in EAuthenticationErrorCodes]: { title: string; message: (email?: string | undefined) => ReactNode };
+  [key in EAuthenticationErrorCodes]: { title: string; message: (email?: string) => ReactNode };
 } = {
   // global
   [EAuthenticationErrorCodes.INSTANCE_NOT_CONFIGURED]: {
@@ -131,7 +131,7 @@ const errorCodeMessages: {
   },
   [EAuthenticationErrorCodes.USER_ACCOUNT_DEACTIVATED]: {
     title: `User account deactivated`,
-    message: () => `User account deactivated. Please contact ${!!SUPPORT_EMAIL ? SUPPORT_EMAIL : "administrator"}.`,
+    message: () => `User account deactivated. Please contact ${SUPPORT_EMAIL ? SUPPORT_EMAIL : "administrator"}.`,
   },
   [EAuthenticationErrorCodes.INVALID_PASSWORD]: {
     title: `Invalid password`,
@@ -360,10 +360,7 @@ const errorCodeMessages: {
   },
 };
 
-export const authErrorHandler = (
-  errorCode: EAuthenticationErrorCodes,
-  email?: string | undefined
-): TAuthErrorInfo | undefined => {
+export const authErrorHandler = (errorCode: EAuthenticationErrorCodes, email?: string): TAuthErrorInfo | undefined => {
   const bannerAlertErrorCodes = [
     EAuthenticationErrorCodes.INSTANCE_NOT_CONFIGURED,
     EAuthenticationErrorCodes.INVALID_EMAIL,
diff --git a/apps/web/helpers/cover-image.helper.ts b/apps/web/helpers/cover-image.helper.ts
new file mode 100644
index 0000000000..23928107dc
--- /dev/null
+++ b/apps/web/helpers/cover-image.helper.ts
@@ -0,0 +1,284 @@
+import type { EFileAssetType } from "@plane/types";
+import { getFileURL } from "@plane/utils";
+
+import CoverImage1 from "@/app/assets/cover-images/image_1.jpg?url";
+import CoverImage10 from "@/app/assets/cover-images/image_10.jpg?url";
+import CoverImage11 from "@/app/assets/cover-images/image_11.jpg?url";
+import CoverImage12 from "@/app/assets/cover-images/image_12.jpg?url";
+import CoverImage13 from "@/app/assets/cover-images/image_13.jpg?url";
+import CoverImage14 from "@/app/assets/cover-images/image_14.jpg?url";
+import CoverImage15 from "@/app/assets/cover-images/image_15.jpg?url";
+import CoverImage16 from "@/app/assets/cover-images/image_16.jpg?url";
+import CoverImage17 from "@/app/assets/cover-images/image_17.jpg?url";
+import CoverImage18 from "@/app/assets/cover-images/image_18.jpg?url";
+import CoverImage19 from "@/app/assets/cover-images/image_19.jpg?url";
+import CoverImage2 from "@/app/assets/cover-images/image_2.jpg?url";
+import CoverImage20 from "@/app/assets/cover-images/image_20.jpg?url";
+import CoverImage21 from "@/app/assets/cover-images/image_21.jpg?url";
+import CoverImage22 from "@/app/assets/cover-images/image_22.jpg?url";
+import CoverImage23 from "@/app/assets/cover-images/image_23.jpg?url";
+import CoverImage24 from "@/app/assets/cover-images/image_24.jpg?url";
+import CoverImage25 from "@/app/assets/cover-images/image_25.jpg?url";
+import CoverImage26 from "@/app/assets/cover-images/image_26.jpg?url";
+import CoverImage27 from "@/app/assets/cover-images/image_27.jpg?url";
+import CoverImage28 from "@/app/assets/cover-images/image_28.jpg?url";
+import CoverImage29 from "@/app/assets/cover-images/image_29.jpg?url";
+import CoverImage3 from "@/app/assets/cover-images/image_3.jpg?url";
+import CoverImage4 from "@/app/assets/cover-images/image_4.jpg?url";
+import CoverImage5 from "@/app/assets/cover-images/image_5.jpg?url";
+import CoverImage6 from "@/app/assets/cover-images/image_6.jpg?url";
+import CoverImage7 from "@/app/assets/cover-images/image_7.jpg?url";
+import CoverImage8 from "@/app/assets/cover-images/image_8.jpg?url";
+import CoverImage9 from "@/app/assets/cover-images/image_9.jpg?url";
+
+import { FileService } from "@/services/file.service";
+
+const fileService = new FileService();
+
+/**
+ * Map of all available static cover images
+ * These are pre-loaded images available in the assets/cover-images folder
+ */
+export const STATIC_COVER_IMAGES = {
+  IMAGE_1: CoverImage1,
+  IMAGE_2: CoverImage2,
+  IMAGE_3: CoverImage3,
+  IMAGE_4: CoverImage4,
+  IMAGE_5: CoverImage5,
+  IMAGE_6: CoverImage6,
+  IMAGE_7: CoverImage7,
+  IMAGE_8: CoverImage8,
+  IMAGE_9: CoverImage9,
+  IMAGE_10: CoverImage10,
+  IMAGE_11: CoverImage11,
+  IMAGE_12: CoverImage12,
+  IMAGE_13: CoverImage13,
+  IMAGE_14: CoverImage14,
+  IMAGE_15: CoverImage15,
+  IMAGE_16: CoverImage16,
+  IMAGE_17: CoverImage17,
+  IMAGE_18: CoverImage18,
+  IMAGE_19: CoverImage19,
+  IMAGE_20: CoverImage20,
+  IMAGE_21: CoverImage21,
+  IMAGE_22: CoverImage22,
+  IMAGE_23: CoverImage23,
+  IMAGE_24: CoverImage24,
+  IMAGE_25: CoverImage25,
+  IMAGE_26: CoverImage26,
+  IMAGE_27: CoverImage27,
+  IMAGE_28: CoverImage28,
+  IMAGE_29: CoverImage29,
+} as const;
+
+export const DEFAULT_COVER_IMAGE_URL = STATIC_COVER_IMAGES.IMAGE_1;
+
+/**
+ * Set of static image URLs for fast O(1) lookup
+ */
+const STATIC_COVER_IMAGES_SET = new Set<string>(Object.values(STATIC_COVER_IMAGES));
+
+export type TCoverImageType = "local_static" | "uploaded_asset";
+
+export type TCoverImageResult = {
+  needsUpload: boolean;
+  imageType: TCoverImageType;
+  shouldUpdate: boolean;
+};
+
+export type TCoverImagePayload = {
+  cover_image?: string | null;
+  cover_image_url?: string | null;
+  cover_image_asset?: string | null;
+};
+
+/**
+ * Checks if a given URL is a valid static cover image
+ */
+export const isStaticCoverImage = (imageUrl: string | null | undefined): boolean => {
+  if (!imageUrl) return false;
+  return STATIC_COVER_IMAGES_SET.has(imageUrl);
+};
+
+/**
+ * Determines the type of cover image URL
+ * Uses explicit validation against known static images for better accuracy
+ */
+export const getCoverImageType = (imageUrl: string): TCoverImageType => {
+  // Check against the explicit set of static images
+  if (isStaticCoverImage(imageUrl)) return "local_static";
+
+  if (imageUrl.startsWith("http")) return "uploaded_asset";
+
+  return "uploaded_asset";
+};
+
+/**
+ * Gets the correct display URL for a cover image
+ * - Local static images: returned as-is (served from assets folder)
+ * - Uploaded assets: processed through getFileURL (adds backend URL)
+ */
+export function getCoverImageDisplayURL(imageUrl: string | null | undefined, fallbackUrl: string): string;
+export function getCoverImageDisplayURL(imageUrl: string | null | undefined, fallbackUrl: null): string | null;
+export function getCoverImageDisplayURL(
+  imageUrl: string | null | undefined,
+  fallbackUrl: string | null
+): string | null {
+  if (!imageUrl) {
+    return fallbackUrl;
+  }
+
+  const imageType = getCoverImageType(imageUrl);
+
+  if (imageType === "local_static") {
+    return imageUrl;
+  }
+
+  if (imageType === "uploaded_asset") {
+    return getFileURL(imageUrl) || imageUrl;
+  }
+
+  return imageUrl;
+}
+
+/**
+ * Analyzes cover image change and determines what action to take
+ */
+export const analyzeCoverImageChange = (
+  currentImage: string | null | undefined,
+  newImage: string | null | undefined
+): TCoverImageResult => {
+  const hasChanged = currentImage !== newImage;
+
+  if (!hasChanged) {
+    return {
+      needsUpload: false,
+      imageType: "uploaded_asset",
+      shouldUpdate: false,
+    };
+  }
+
+  const imageType = getCoverImageType(newImage ?? "");
+
+  return {
+    needsUpload: imageType === "local_static",
+    imageType,
+    shouldUpdate: hasChanged,
+  };
+};
+
+/**
+ * Uploads a local static image to S3
+ */
+export const uploadCoverImage = async (
+  imageUrl: string,
+  uploadConfig: {
+    workspaceSlug?: string;
+    entityIdentifier: string;
+    entityType: EFileAssetType;
+    isUserAsset?: boolean;
+  }
+): Promise<string> => {
+  const { workspaceSlug, entityIdentifier, entityType, isUserAsset = false } = uploadConfig;
+
+  // Fetch the local image
+  const response = await fetch(imageUrl);
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch image: ${response.statusText}`);
+  }
+
+  const blob = await response.blob();
+
+  // Validate it's actually an image
+  if (!blob.type.startsWith("image/")) {
+    throw new Error("Invalid file type. Please select an image.");
+  }
+
+  const fileName = imageUrl.split("/").pop() || "cover.jpg";
+  const file = new File([blob], fileName, { type: blob.type });
+
+  // Upload based on context
+  if (isUserAsset) {
+    const uploadResult = await fileService.uploadUserAsset(
+      {
+        entity_identifier: entityIdentifier,
+        entity_type: entityType,
+      },
+      file
+    );
+    return uploadResult.asset_url;
+  } else {
+    if (!workspaceSlug) {
+      throw new Error("Workspace slug is required for workspace asset upload");
+    }
+
+    const uploadResult = await fileService.uploadWorkspaceAsset(
+      workspaceSlug,
+      {
+        entity_identifier: entityIdentifier,
+        entity_type: entityType,
+      },
+      file
+    );
+    return uploadResult.asset_url;
+  }
+};
+
+/**
+ * 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,
+  newImage: string | null | undefined,
+  uploadConfig: {
+    workspaceSlug?: string;
+    entityIdentifier: string;
+    entityType: EFileAssetType;
+    isUserAsset?: boolean;
+  }
+): Promise<TCoverImagePayload | null> => {
+  const analysis = analyzeCoverImageChange(currentImage, newImage);
+
+  // No change detected
+  if (!analysis.shouldUpdate) {
+    return null;
+  }
+
+  // Image removed
+  if (!newImage) {
+    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;
+    }
+  }
+
+  return null;
+};
+
+/**
+ * Returns a random cover image from the STATIC_COVER_IMAGES object
+ * @returns {string} A random cover image URL
+ */
+export const getRandomCoverImage = (): string =>
+  Object.values(STATIC_COVER_IMAGES)[Math.floor(Math.random() * Object.keys(STATIC_COVER_IMAGES).length)];
diff --git a/apps/web/package.json b/apps/web/package.json
index 1230e2a819..f775fd5c06 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": true,
   "license": "AGPL-3.0",
   "type": "module",
@@ -10,17 +10,20 @@
     "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 821",
+    "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=14367",
     "check:types": "react-router typegen && tsc --noEmit",
-    "check:format": "prettier --check \"**/*.{ts,tsx,md,json,css,scss}\"",
-    "fix:lint": "eslint . --fix",
-    "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\""
+    "check:format": "prettier . --cache --check",
+    "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=14367",
+    "fix:format": "prettier . --cache --write"
   },
   "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:*",
@@ -36,7 +39,7 @@
     "@popperjs/core": "^2.11.8",
     "@posthog/react": "^1.4.0",
     "@react-pdf/renderer": "^3.4.5",
-    "@react-router/node": "^7.9.3",
+    "@react-router/node": "catalog:",
     "@sentry/react-router": "catalog:",
     "@tanstack/react-table": "^8.21.3",
     "axios": "catalog:",
@@ -52,7 +55,7 @@
     "mobx": "catalog:",
     "mobx-react": "catalog:",
     "mobx-utils": "catalog:",
-    "next-themes": "^0.2.1",
+    "next-themes": "0.4.6",
     "posthog-js": "^1.255.1",
     "react": "catalog:",
     "react-color": "^2.19.3",
@@ -65,28 +68,26 @@
     "react-masonry-component": "^6.3.0",
     "react-pdf-html": "^2.1.2",
     "react-popper": "^2.3.0",
-    "react-router": "^7.9.1",
-    "react-router-dom": "^7.9.1",
+    "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": {
-    "@plane/eslint-config": "workspace:*",
+    "@dotenvx/dotenvx": "catalog:",
     "@plane/tailwind-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
-    "@react-router/dev": "^7.9.1",
+    "@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": "^16.4.5",
-    "prettier": "^3.2.5",
     "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 3764bc499b..0000000000
--- a/apps/web/postcss.config.cjs
+++ /dev/null
@@ -1,3 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-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 0000000000..3ad28f15f3
--- /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/public/sw.js b/apps/web/public/sw.js
index d215cdd5ce..afb1d51381 100644
--- a/apps/web/public/sw.js
+++ b/apps/web/public/sw.js
@@ -21,22 +21,20 @@ if (!self.define) {
 
   const singleRequire = (uri, parentUri) => {
     uri = new URL(uri + ".js", parentUri).href;
-    return registry[uri] || (
-      
-        new Promise(resolve => {
-          if ("document" in self) {
-            const script = document.createElement("script");
-            script.src = uri;
-            script.onload = resolve;
-            document.head.appendChild(script);
-          } else {
-            nextDefineUri = uri;
-            importScripts(uri);
-            resolve();
-          }
-        })
-      
-      .then(() => {
+    return (
+      registry[uri] ||
+      new Promise((resolve) => {
+        if ("document" in self) {
+          const script = document.createElement("script");
+          script.src = uri;
+          script.onload = resolve;
+          document.head.appendChild(script);
+        } else {
+          nextDefineUri = uri;
+          importScripts(uri);
+          resolve();
+        }
+      }).then(() => {
         let promise = registry[uri];
         if (!promise) {
           throw new Error(`Module ${uri} didn’t register its module`);
@@ -53,49 +51,52 @@ if (!self.define) {
       return;
     }
     let exports = {};
-    const require = depUri => singleRequire(depUri, uri);
+    const require = (depUri) => singleRequire(depUri, uri);
     const specialDeps = {
       module: { uri },
       exports,
-      require
+      require,
     };
-    registry[uri] = Promise.all(depsNames.map(
-      depName => specialDeps[depName] || require(depName)
-    )).then(deps => {
+    registry[uri] = Promise.all(depsNames.map((depName) => specialDeps[depName] || require(depName))).then((deps) => {
       factory(...deps);
       return exports;
     });
   };
 }
-define(['./workbox-9f2f79cf'], (function (workbox) { 'use strict';
+define(["./workbox-9f2f79cf"], function (workbox) {
+  "use strict";
 
   importScripts();
   self.skipWaiting();
   workbox.clientsClaim();
-  workbox.registerRoute("/", new workbox.NetworkFirst({
-    "cacheName": "start-url",
-    plugins: [{
-      cacheWillUpdate: async ({
-        request,
-        response,
-        event,
-        state
-      }) => {
-        if (response && response.type === 'opaqueredirect') {
-          return new Response(response.body, {
-            status: 200,
-            statusText: 'OK',
-            headers: response.headers
-          });
-        }
-        return response;
-      }
-    }]
-  }), 'GET');
-  workbox.registerRoute(/.*/i, new workbox.NetworkOnly({
-    "cacheName": "dev",
-    plugins: []
-  }), 'GET');
-
-}));
+  workbox.registerRoute(
+    "/",
+    new workbox.NetworkFirst({
+      cacheName: "start-url",
+      plugins: [
+        {
+          cacheWillUpdate: async ({ request, response, event, state }) => {
+            if (response && response.type === "opaqueredirect") {
+              return new Response(response.body, {
+                status: 200,
+                statusText: "OK",
+                headers: response.headers,
+              });
+            }
+            return response;
+          },
+        },
+      ],
+    }),
+    "GET"
+  );
+  workbox.registerRoute(
+    /.*/i,
+    new workbox.NetworkOnly({
+      cacheName: "dev",
+      plugins: [],
+    }),
+    "GET"
+  );
+});
 //# sourceMappingURL=sw.js.map
diff --git a/apps/web/public/workbox-9f2f79cf.js b/apps/web/public/workbox-9f2f79cf.js
index bb4e93dc18..8596f66121 100644
--- a/apps/web/public/workbox-9f2f79cf.js
+++ b/apps/web/public/workbox-9f2f79cf.js
@@ -1,2456 +1,2479 @@
-define(['exports'], (function (exports) { 'use strict';
+define(["exports"], function (exports) {
+  "use strict";
 
-    // @ts-ignore
-    try {
-      self['workbox:core:6.6.0'] && _();
-    } catch (e) {}
+  // @ts-ignore
+  try {
+    self["workbox:core:6.6.0"] && _();
+  } catch (e) {}
 
-    /*
+  /*
       Copyright 2019 Google LLC
       Use of this source code is governed by an MIT-style
       license that can be found in the LICENSE file or at
       https://opensource.org/licenses/MIT.
     */
-    const logger = (() => {
-      // Don't overwrite this value if it's already set.
-      // See https://github.com/GoogleChrome/workbox/pull/2284#issuecomment-560470923
-      if (!('__WB_DISABLE_DEV_LOGS' in globalThis)) {
-        self.__WB_DISABLE_DEV_LOGS = false;
+  const logger = (() => {
+    // Don't overwrite this value if it's already set.
+    // See https://github.com/GoogleChrome/workbox/pull/2284#issuecomment-560470923
+    if (!("__WB_DISABLE_DEV_LOGS" in globalThis)) {
+      self.__WB_DISABLE_DEV_LOGS = false;
+    }
+    let inGroup = false;
+    const methodToColorMap = {
+      debug: `#7f8c8d`,
+      log: `#2ecc71`,
+      warn: `#f39c12`,
+      error: `#c0392b`,
+      groupCollapsed: `#3498db`,
+      groupEnd: null, // No colored prefix on groupEnd
+    };
+    const print = function (method, args) {
+      if (self.__WB_DISABLE_DEV_LOGS) {
+        return;
       }
-      let inGroup = false;
-      const methodToColorMap = {
-        debug: `#7f8c8d`,
-        log: `#2ecc71`,
-        warn: `#f39c12`,
-        error: `#c0392b`,
-        groupCollapsed: `#3498db`,
-        groupEnd: null // No colored prefix on groupEnd
-      };
-      const print = function (method, args) {
-        if (self.__WB_DISABLE_DEV_LOGS) {
+      if (method === "groupCollapsed") {
+        // Safari doesn't print all console.groupCollapsed() arguments:
+        // https://bugs.webkit.org/show_bug.cgi?id=182754
+        if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
+          console[method](...args);
           return;
         }
-        if (method === 'groupCollapsed') {
-          // Safari doesn't print all console.groupCollapsed() arguments:
-          // https://bugs.webkit.org/show_bug.cgi?id=182754
-          if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
-            console[method](...args);
-            return;
-          }
-        }
-        const styles = [`background: ${methodToColorMap[method]}`, `border-radius: 0.5em`, `color: white`, `font-weight: bold`, `padding: 2px 0.5em`];
-        // When in a group, the workbox prefix is not displayed.
-        const logPrefix = inGroup ? [] : ['%cworkbox', styles.join(';')];
-        console[method](...logPrefix, ...args);
-        if (method === 'groupCollapsed') {
-          inGroup = true;
-        }
-        if (method === 'groupEnd') {
-          inGroup = false;
-        }
+      }
+      const styles = [
+        `background: ${methodToColorMap[method]}`,
+        `border-radius: 0.5em`,
+        `color: white`,
+        `font-weight: bold`,
+        `padding: 2px 0.5em`,
+      ];
+      // When in a group, the workbox prefix is not displayed.
+      const logPrefix = inGroup ? [] : ["%cworkbox", styles.join(";")];
+      console[method](...logPrefix, ...args);
+      if (method === "groupCollapsed") {
+        inGroup = true;
+      }
+      if (method === "groupEnd") {
+        inGroup = false;
+      }
+    };
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    const api = {};
+    const loggerMethods = Object.keys(methodToColorMap);
+    for (const key of loggerMethods) {
+      const method = key;
+      api[method] = (...args) => {
+        print(method, args);
       };
-      // eslint-disable-next-line @typescript-eslint/ban-types
-      const api = {};
-      const loggerMethods = Object.keys(methodToColorMap);
-      for (const key of loggerMethods) {
-        const method = key;
-        api[method] = (...args) => {
-          print(method, args);
-        };
-      }
-      return api;
-    })();
-
-    /*
-      Copyright 2018 Google LLC
-
-      Use of this source code is governed by an MIT-style
-      license that can be found in the LICENSE file or at
-      https://opensource.org/licenses/MIT.
-    */
-    const messages$1 = {
-      'invalid-value': ({
-        paramName,
-        validValueDescription,
-        value
-      }) => {
-        if (!paramName || !validValueDescription) {
-          throw new Error(`Unexpected input to 'invalid-value' error.`);
-        }
-        return `The '${paramName}' parameter was given a value with an ` + `unexpected value. ${validValueDescription} Received a value of ` + `${JSON.stringify(value)}.`;
-      },
-      'not-an-array': ({
-        moduleName,
-        className,
-        funcName,
-        paramName
-      }) => {
-        if (!moduleName || !className || !funcName || !paramName) {
-          throw new Error(`Unexpected input to 'not-an-array' error.`);
-        }
-        return `The parameter '${paramName}' passed into ` + `'${moduleName}.${className}.${funcName}()' must be an array.`;
-      },
-      'incorrect-type': ({
-        expectedType,
-        paramName,
-        moduleName,
-        className,
-        funcName
-      }) => {
-        if (!expectedType || !paramName || !moduleName || !funcName) {
-          throw new Error(`Unexpected input to 'incorrect-type' error.`);
-        }
-        const classNameStr = className ? `${className}.` : '';
-        return `The parameter '${paramName}' passed into ` + `'${moduleName}.${classNameStr}` + `${funcName}()' must be of type ${expectedType}.`;
-      },
-      'incorrect-class': ({
-        expectedClassName,
-        paramName,
-        moduleName,
-        className,
-        funcName,
-        isReturnValueProblem
-      }) => {
-        if (!expectedClassName || !moduleName || !funcName) {
-          throw new Error(`Unexpected input to 'incorrect-class' error.`);
-        }
-        const classNameStr = className ? `${className}.` : '';
-        if (isReturnValueProblem) {
-          return `The return value from ` + `'${moduleName}.${classNameStr}${funcName}()' ` + `must be an instance of class ${expectedClassName}.`;
-        }
-        return `The parameter '${paramName}' passed into ` + `'${moduleName}.${classNameStr}${funcName}()' ` + `must be an instance of class ${expectedClassName}.`;
-      },
-      'missing-a-method': ({
-        expectedMethod,
-        paramName,
-        moduleName,
-        className,
-        funcName
-      }) => {
-        if (!expectedMethod || !paramName || !moduleName || !className || !funcName) {
-          throw new Error(`Unexpected input to 'missing-a-method' error.`);
-        }
-        return `${moduleName}.${className}.${funcName}() expected the ` + `'${paramName}' parameter to expose a '${expectedMethod}' method.`;
-      },
-      'add-to-cache-list-unexpected-type': ({
-        entry
-      }) => {
-        return `An unexpected entry was passed to ` + `'workbox-precaching.PrecacheController.addToCacheList()' The entry ` + `'${JSON.stringify(entry)}' isn't supported. You must supply an array of ` + `strings with one or more characters, objects with a url property or ` + `Request objects.`;
-      },
-      'add-to-cache-list-conflicting-entries': ({
-        firstEntry,
-        secondEntry
-      }) => {
-        if (!firstEntry || !secondEntry) {
-          throw new Error(`Unexpected input to ` + `'add-to-cache-list-duplicate-entries' error.`);
-        }
-        return `Two of the entries passed to ` + `'workbox-precaching.PrecacheController.addToCacheList()' had the URL ` + `${firstEntry} but different revision details. Workbox is ` + `unable to cache and version the asset correctly. Please remove one ` + `of the entries.`;
-      },
-      'plugin-error-request-will-fetch': ({
-        thrownErrorMessage
-      }) => {
-        if (!thrownErrorMessage) {
-          throw new Error(`Unexpected input to ` + `'plugin-error-request-will-fetch', error.`);
-        }
-        return `An error was thrown by a plugins 'requestWillFetch()' method. ` + `The thrown error message was: '${thrownErrorMessage}'.`;
-      },
-      'invalid-cache-name': ({
-        cacheNameId,
-        value
-      }) => {
-        if (!cacheNameId) {
-          throw new Error(`Expected a 'cacheNameId' for error 'invalid-cache-name'`);
-        }
-        return `You must provide a name containing at least one character for ` + `setCacheDetails({${cacheNameId}: '...'}). Received a value of ` + `'${JSON.stringify(value)}'`;
-      },
-      'unregister-route-but-not-found-with-method': ({
-        method
-      }) => {
-        if (!method) {
-          throw new Error(`Unexpected input to ` + `'unregister-route-but-not-found-with-method' error.`);
-        }
-        return `The route you're trying to unregister was not  previously ` + `registered for the method type '${method}'.`;
-      },
-      'unregister-route-route-not-registered': () => {
-        return `The route you're trying to unregister was not previously ` + `registered.`;
-      },
-      'queue-replay-failed': ({
-        name
-      }) => {
-        return `Replaying the background sync queue '${name}' failed.`;
-      },
-      'duplicate-queue-name': ({
-        name
-      }) => {
-        return `The Queue name '${name}' is already being used. ` + `All instances of backgroundSync.Queue must be given unique names.`;
-      },
-      'expired-test-without-max-age': ({
-        methodName,
-        paramName
-      }) => {
-        return `The '${methodName}()' method can only be used when the ` + `'${paramName}' is used in the constructor.`;
-      },
-      'unsupported-route-type': ({
-        moduleName,
-        className,
-        funcName,
-        paramName
-      }) => {
-        return `The supplied '${paramName}' parameter was an unsupported type. ` + `Please check the docs for ${moduleName}.${className}.${funcName} for ` + `valid input types.`;
-      },
-      'not-array-of-class': ({
-        value,
-        expectedClass,
-        moduleName,
-        className,
-        funcName,
-        paramName
-      }) => {
-        return `The supplied '${paramName}' parameter must be an array of ` + `'${expectedClass}' objects. Received '${JSON.stringify(value)},'. ` + `Please check the call to ${moduleName}.${className}.${funcName}() ` + `to fix the issue.`;
-      },
-      'max-entries-or-age-required': ({
-        moduleName,
-        className,
-        funcName
-      }) => {
-        return `You must define either config.maxEntries or config.maxAgeSeconds` + `in ${moduleName}.${className}.${funcName}`;
-      },
-      'statuses-or-headers-required': ({
-        moduleName,
-        className,
-        funcName
-      }) => {
-        return `You must define either config.statuses or config.headers` + `in ${moduleName}.${className}.${funcName}`;
-      },
-      'invalid-string': ({
-        moduleName,
-        funcName,
-        paramName
-      }) => {
-        if (!paramName || !moduleName || !funcName) {
-          throw new Error(`Unexpected input to 'invalid-string' error.`);
-        }
-        return `When using strings, the '${paramName}' parameter must start with ` + `'http' (for cross-origin matches) or '/' (for same-origin matches). ` + `Please see the docs for ${moduleName}.${funcName}() for ` + `more info.`;
-      },
-      'channel-name-required': () => {
-        return `You must provide a channelName to construct a ` + `BroadcastCacheUpdate instance.`;
-      },
-      'invalid-responses-are-same-args': () => {
-        return `The arguments passed into responsesAreSame() appear to be ` + `invalid. Please ensure valid Responses are used.`;
-      },
-      'expire-custom-caches-only': () => {
-        return `You must provide a 'cacheName' property when using the ` + `expiration plugin with a runtime caching strategy.`;
-      },
-      'unit-must-be-bytes': ({
-        normalizedRangeHeader
-      }) => {
-        if (!normalizedRangeHeader) {
-          throw new Error(`Unexpected input to 'unit-must-be-bytes' error.`);
-        }
-        return `The 'unit' portion of the Range header must be set to 'bytes'. ` + `The Range header provided was "${normalizedRangeHeader}"`;
-      },
-      'single-range-only': ({
-        normalizedRangeHeader
-      }) => {
-        if (!normalizedRangeHeader) {
-          throw new Error(`Unexpected input to 'single-range-only' error.`);
-        }
-        return `Multiple ranges are not supported. Please use a  single start ` + `value, and optional end value. The Range header provided was ` + `"${normalizedRangeHeader}"`;
-      },
-      'invalid-range-values': ({
-        normalizedRangeHeader
-      }) => {
-        if (!normalizedRangeHeader) {
-          throw new Error(`Unexpected input to 'invalid-range-values' error.`);
-        }
-        return `The Range header is missing both start and end values. At least ` + `one of those values is needed. The Range header provided was ` + `"${normalizedRangeHeader}"`;
-      },
-      'no-range-header': () => {
-        return `No Range header was found in the Request provided.`;
-      },
-      'range-not-satisfiable': ({
-        size,
-        start,
-        end
-      }) => {
-        return `The start (${start}) and end (${end}) values in the Range are ` + `not satisfiable by the cached response, which is ${size} bytes.`;
-      },
-      'attempt-to-cache-non-get-request': ({
-        url,
-        method
-      }) => {
-        return `Unable to cache '${url}' because it is a '${method}' request and ` + `only 'GET' requests can be cached.`;
-      },
-      'cache-put-with-no-response': ({
-        url
-      }) => {
-        return `There was an attempt to cache '${url}' but the response was not ` + `defined.`;
-      },
-      'no-response': ({
-        url,
-        error
-      }) => {
-        let message = `The strategy could not generate a response for '${url}'.`;
-        if (error) {
-          message += ` The underlying error is ${error}.`;
-        }
-        return message;
-      },
-      'bad-precaching-response': ({
-        url,
-        status
-      }) => {
-        return `The precaching request for '${url}' failed` + (status ? ` with an HTTP status of ${status}.` : `.`);
-      },
-      'non-precached-url': ({
-        url
-      }) => {
-        return `createHandlerBoundToURL('${url}') was called, but that URL is ` + `not precached. Please pass in a URL that is precached instead.`;
-      },
-      'add-to-cache-list-conflicting-integrities': ({
-        url
-      }) => {
-        return `Two of the entries passed to ` + `'workbox-precaching.PrecacheController.addToCacheList()' had the URL ` + `${url} with different integrity values. Please remove one of them.`;
-      },
-      'missing-precache-entry': ({
-        cacheName,
-        url
-      }) => {
-        return `Unable to find a precached response in ${cacheName} for ${url}.`;
-      },
-      'cross-origin-copy-response': ({
-        origin
-      }) => {
-        return `workbox-core.copyResponse() can only be used with same-origin ` + `responses. It was passed a response with origin ${origin}.`;
-      },
-      'opaque-streams-source': ({
-        type
-      }) => {
-        const message = `One of the workbox-streams sources resulted in an ` + `'${type}' response.`;
-        if (type === 'opaqueredirect') {
-          return `${message} Please do not use a navigation request that results ` + `in a redirect as a source.`;
-        }
-        return `${message} Please ensure your sources are CORS-enabled.`;
-      }
-    };
-
-    /*
-      Copyright 2018 Google LLC
-
-      Use of this source code is governed by an MIT-style
-      license that can be found in the LICENSE file or at
-      https://opensource.org/licenses/MIT.
-    */
-    const generatorFunction = (code, details = {}) => {
-      const message = messages$1[code];
-      if (!message) {
-        throw new Error(`Unable to find message for code '${code}'.`);
-      }
-      return message(details);
-    };
-    const messageGenerator = generatorFunction;
-
-    /*
-      Copyright 2018 Google LLC
-
-      Use of this source code is governed by an MIT-style
-      license that can be found in the LICENSE file or at
-      https://opensource.org/licenses/MIT.
-    */
-    /**
-     * Workbox errors should be thrown with this class.
-     * This allows use to ensure the type easily in tests,
-     * helps developers identify errors from workbox
-     * easily and allows use to optimise error
-     * messages correctly.
-     *
-     * @private
-     */
-    class WorkboxError extends Error {
-      /**
-       *
-       * @param {string} errorCode The error code that
-       * identifies this particular error.
-       * @param {Object=} details Any relevant arguments
-       * that will help developers identify issues should
-       * be added as a key on the context object.
-       */
-      constructor(errorCode, details) {
-        const message = messageGenerator(errorCode, details);
-        super(message);
-        this.name = errorCode;
-        this.details = details;
-      }
     }
+    return api;
+  })();
 
-    /*
+  /*
       Copyright 2018 Google LLC
 
       Use of this source code is governed by an MIT-style
       license that can be found in the LICENSE file or at
       https://opensource.org/licenses/MIT.
     */
-    /*
-     * This method throws if the supplied value is not an array.
-     * The destructed values are required to produce a meaningful error for users.
-     * The destructed and restructured object is so it's clear what is
-     * needed.
+  const messages$1 = {
+    "invalid-value": ({ paramName, validValueDescription, value }) => {
+      if (!paramName || !validValueDescription) {
+        throw new Error(`Unexpected input to 'invalid-value' error.`);
+      }
+      return (
+        `The '${paramName}' parameter was given a value with an ` +
+        `unexpected value. ${validValueDescription} Received a value of ` +
+        `${JSON.stringify(value)}.`
+      );
+    },
+    "not-an-array": ({ moduleName, className, funcName, paramName }) => {
+      if (!moduleName || !className || !funcName || !paramName) {
+        throw new Error(`Unexpected input to 'not-an-array' error.`);
+      }
+      return (
+        `The parameter '${paramName}' passed into ` + `'${moduleName}.${className}.${funcName}()' must be an array.`
+      );
+    },
+    "incorrect-type": ({ expectedType, paramName, moduleName, className, funcName }) => {
+      if (!expectedType || !paramName || !moduleName || !funcName) {
+        throw new Error(`Unexpected input to 'incorrect-type' error.`);
+      }
+      const classNameStr = className ? `${className}.` : "";
+      return (
+        `The parameter '${paramName}' passed into ` +
+        `'${moduleName}.${classNameStr}` +
+        `${funcName}()' must be of type ${expectedType}.`
+      );
+    },
+    "incorrect-class": ({ expectedClassName, paramName, moduleName, className, funcName, isReturnValueProblem }) => {
+      if (!expectedClassName || !moduleName || !funcName) {
+        throw new Error(`Unexpected input to 'incorrect-class' error.`);
+      }
+      const classNameStr = className ? `${className}.` : "";
+      if (isReturnValueProblem) {
+        return (
+          `The return value from ` +
+          `'${moduleName}.${classNameStr}${funcName}()' ` +
+          `must be an instance of class ${expectedClassName}.`
+        );
+      }
+      return (
+        `The parameter '${paramName}' passed into ` +
+        `'${moduleName}.${classNameStr}${funcName}()' ` +
+        `must be an instance of class ${expectedClassName}.`
+      );
+    },
+    "missing-a-method": ({ expectedMethod, paramName, moduleName, className, funcName }) => {
+      if (!expectedMethod || !paramName || !moduleName || !className || !funcName) {
+        throw new Error(`Unexpected input to 'missing-a-method' error.`);
+      }
+      return (
+        `${moduleName}.${className}.${funcName}() expected the ` +
+        `'${paramName}' parameter to expose a '${expectedMethod}' method.`
+      );
+    },
+    "add-to-cache-list-unexpected-type": ({ entry }) => {
+      return (
+        `An unexpected entry was passed to ` +
+        `'workbox-precaching.PrecacheController.addToCacheList()' The entry ` +
+        `'${JSON.stringify(entry)}' isn't supported. You must supply an array of ` +
+        `strings with one or more characters, objects with a url property or ` +
+        `Request objects.`
+      );
+    },
+    "add-to-cache-list-conflicting-entries": ({ firstEntry, secondEntry }) => {
+      if (!firstEntry || !secondEntry) {
+        throw new Error(`Unexpected input to ` + `'add-to-cache-list-duplicate-entries' error.`);
+      }
+      return (
+        `Two of the entries passed to ` +
+        `'workbox-precaching.PrecacheController.addToCacheList()' had the URL ` +
+        `${firstEntry} but different revision details. Workbox is ` +
+        `unable to cache and version the asset correctly. Please remove one ` +
+        `of the entries.`
+      );
+    },
+    "plugin-error-request-will-fetch": ({ thrownErrorMessage }) => {
+      if (!thrownErrorMessage) {
+        throw new Error(`Unexpected input to ` + `'plugin-error-request-will-fetch', error.`);
+      }
+      return (
+        `An error was thrown by a plugins 'requestWillFetch()' method. ` +
+        `The thrown error message was: '${thrownErrorMessage}'.`
+      );
+    },
+    "invalid-cache-name": ({ cacheNameId, value }) => {
+      if (!cacheNameId) {
+        throw new Error(`Expected a 'cacheNameId' for error 'invalid-cache-name'`);
+      }
+      return (
+        `You must provide a name containing at least one character for ` +
+        `setCacheDetails({${cacheNameId}: '...'}). Received a value of ` +
+        `'${JSON.stringify(value)}'`
+      );
+    },
+    "unregister-route-but-not-found-with-method": ({ method }) => {
+      if (!method) {
+        throw new Error(`Unexpected input to ` + `'unregister-route-but-not-found-with-method' error.`);
+      }
+      return (
+        `The route you're trying to unregister was not  previously ` + `registered for the method type '${method}'.`
+      );
+    },
+    "unregister-route-route-not-registered": () => {
+      return `The route you're trying to unregister was not previously ` + `registered.`;
+    },
+    "queue-replay-failed": ({ name }) => {
+      return `Replaying the background sync queue '${name}' failed.`;
+    },
+    "duplicate-queue-name": ({ name }) => {
+      return (
+        `The Queue name '${name}' is already being used. ` +
+        `All instances of backgroundSync.Queue must be given unique names.`
+      );
+    },
+    "expired-test-without-max-age": ({ methodName, paramName }) => {
+      return `The '${methodName}()' method can only be used when the ` + `'${paramName}' is used in the constructor.`;
+    },
+    "unsupported-route-type": ({ moduleName, className, funcName, paramName }) => {
+      return (
+        `The supplied '${paramName}' parameter was an unsupported type. ` +
+        `Please check the docs for ${moduleName}.${className}.${funcName} for ` +
+        `valid input types.`
+      );
+    },
+    "not-array-of-class": ({ value, expectedClass, moduleName, className, funcName, paramName }) => {
+      return (
+        `The supplied '${paramName}' parameter must be an array of ` +
+        `'${expectedClass}' objects. Received '${JSON.stringify(value)},'. ` +
+        `Please check the call to ${moduleName}.${className}.${funcName}() ` +
+        `to fix the issue.`
+      );
+    },
+    "max-entries-or-age-required": ({ moduleName, className, funcName }) => {
+      return (
+        `You must define either config.maxEntries or config.maxAgeSeconds` + `in ${moduleName}.${className}.${funcName}`
+      );
+    },
+    "statuses-or-headers-required": ({ moduleName, className, funcName }) => {
+      return `You must define either config.statuses or config.headers` + `in ${moduleName}.${className}.${funcName}`;
+    },
+    "invalid-string": ({ moduleName, funcName, paramName }) => {
+      if (!paramName || !moduleName || !funcName) {
+        throw new Error(`Unexpected input to 'invalid-string' error.`);
+      }
+      return (
+        `When using strings, the '${paramName}' parameter must start with ` +
+        `'http' (for cross-origin matches) or '/' (for same-origin matches). ` +
+        `Please see the docs for ${moduleName}.${funcName}() for ` +
+        `more info.`
+      );
+    },
+    "channel-name-required": () => {
+      return `You must provide a channelName to construct a ` + `BroadcastCacheUpdate instance.`;
+    },
+    "invalid-responses-are-same-args": () => {
+      return (
+        `The arguments passed into responsesAreSame() appear to be ` +
+        `invalid. Please ensure valid Responses are used.`
+      );
+    },
+    "expire-custom-caches-only": () => {
+      return (
+        `You must provide a 'cacheName' property when using the ` + `expiration plugin with a runtime caching strategy.`
+      );
+    },
+    "unit-must-be-bytes": ({ normalizedRangeHeader }) => {
+      if (!normalizedRangeHeader) {
+        throw new Error(`Unexpected input to 'unit-must-be-bytes' error.`);
+      }
+      return (
+        `The 'unit' portion of the Range header must be set to 'bytes'. ` +
+        `The Range header provided was "${normalizedRangeHeader}"`
+      );
+    },
+    "single-range-only": ({ normalizedRangeHeader }) => {
+      if (!normalizedRangeHeader) {
+        throw new Error(`Unexpected input to 'single-range-only' error.`);
+      }
+      return (
+        `Multiple ranges are not supported. Please use a  single start ` +
+        `value, and optional end value. The Range header provided was ` +
+        `"${normalizedRangeHeader}"`
+      );
+    },
+    "invalid-range-values": ({ normalizedRangeHeader }) => {
+      if (!normalizedRangeHeader) {
+        throw new Error(`Unexpected input to 'invalid-range-values' error.`);
+      }
+      return (
+        `The Range header is missing both start and end values. At least ` +
+        `one of those values is needed. The Range header provided was ` +
+        `"${normalizedRangeHeader}"`
+      );
+    },
+    "no-range-header": () => {
+      return `No Range header was found in the Request provided.`;
+    },
+    "range-not-satisfiable": ({ size, start, end }) => {
+      return (
+        `The start (${start}) and end (${end}) values in the Range are ` +
+        `not satisfiable by the cached response, which is ${size} bytes.`
+      );
+    },
+    "attempt-to-cache-non-get-request": ({ url, method }) => {
+      return `Unable to cache '${url}' because it is a '${method}' request and ` + `only 'GET' requests can be cached.`;
+    },
+    "cache-put-with-no-response": ({ url }) => {
+      return `There was an attempt to cache '${url}' but the response was not ` + `defined.`;
+    },
+    "no-response": ({ url, error }) => {
+      let message = `The strategy could not generate a response for '${url}'.`;
+      if (error) {
+        message += ` The underlying error is ${error}.`;
+      }
+      return message;
+    },
+    "bad-precaching-response": ({ url, status }) => {
+      return `The precaching request for '${url}' failed` + (status ? ` with an HTTP status of ${status}.` : `.`);
+    },
+    "non-precached-url": ({ url }) => {
+      return (
+        `createHandlerBoundToURL('${url}') was called, but that URL is ` +
+        `not precached. Please pass in a URL that is precached instead.`
+      );
+    },
+    "add-to-cache-list-conflicting-integrities": ({ url }) => {
+      return (
+        `Two of the entries passed to ` +
+        `'workbox-precaching.PrecacheController.addToCacheList()' had the URL ` +
+        `${url} with different integrity values. Please remove one of them.`
+      );
+    },
+    "missing-precache-entry": ({ cacheName, url }) => {
+      return `Unable to find a precached response in ${cacheName} for ${url}.`;
+    },
+    "cross-origin-copy-response": ({ origin }) => {
+      return (
+        `workbox-core.copyResponse() can only be used with same-origin ` +
+        `responses. It was passed a response with origin ${origin}.`
+      );
+    },
+    "opaque-streams-source": ({ type }) => {
+      const message = `One of the workbox-streams sources resulted in an ` + `'${type}' response.`;
+      if (type === "opaqueredirect") {
+        return `${message} Please do not use a navigation request that results ` + `in a redirect as a source.`;
+      }
+      return `${message} Please ensure your sources are CORS-enabled.`;
+    },
+  };
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  const generatorFunction = (code, details = {}) => {
+    const message = messages$1[code];
+    if (!message) {
+      throw new Error(`Unable to find message for code '${code}'.`);
+    }
+    return message(details);
+  };
+  const messageGenerator = generatorFunction;
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /**
+   * Workbox errors should be thrown with this class.
+   * This allows use to ensure the type easily in tests,
+   * helps developers identify errors from workbox
+   * easily and allows use to optimise error
+   * messages correctly.
+   *
+   * @private
+   */
+  class WorkboxError extends Error {
+    /**
+     *
+     * @param {string} errorCode The error code that
+     * identifies this particular error.
+     * @param {Object=} details Any relevant arguments
+     * that will help developers identify issues should
+     * be added as a key on the context object.
      */
-    const isArray = (value, details) => {
-      if (!Array.isArray(value)) {
-        throw new WorkboxError('not-an-array', details);
-      }
-    };
-    const hasMethod = (object, expectedMethod, details) => {
-      const type = typeof object[expectedMethod];
-      if (type !== 'function') {
-        details['expectedMethod'] = expectedMethod;
-        throw new WorkboxError('missing-a-method', details);
-      }
-    };
-    const isType = (object, expectedType, details) => {
-      if (typeof object !== expectedType) {
-        details['expectedType'] = expectedType;
-        throw new WorkboxError('incorrect-type', details);
-      }
-    };
-    const isInstance = (object,
+    constructor(errorCode, details) {
+      const message = messageGenerator(errorCode, details);
+      super(message);
+      this.name = errorCode;
+      this.details = details;
+    }
+  }
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /*
+   * This method throws if the supplied value is not an array.
+   * The destructed values are required to produce a meaningful error for users.
+   * The destructed and restructured object is so it's clear what is
+   * needed.
+   */
+  const isArray = (value, details) => {
+    if (!Array.isArray(value)) {
+      throw new WorkboxError("not-an-array", details);
+    }
+  };
+  const hasMethod = (object, expectedMethod, details) => {
+    const type = typeof object[expectedMethod];
+    if (type !== "function") {
+      details["expectedMethod"] = expectedMethod;
+      throw new WorkboxError("missing-a-method", details);
+    }
+  };
+  const isType = (object, expectedType, details) => {
+    if (typeof object !== expectedType) {
+      details["expectedType"] = expectedType;
+      throw new WorkboxError("incorrect-type", details);
+    }
+  };
+  const isInstance = (
+    object,
     // Need the general type to do the check later.
     // eslint-disable-next-line @typescript-eslint/ban-types
-    expectedClass, details) => {
-      if (!(object instanceof expectedClass)) {
-        details['expectedClassName'] = expectedClass.name;
-        throw new WorkboxError('incorrect-class', details);
-      }
-    };
-    const isOneOf = (value, validValues, details) => {
-      if (!validValues.includes(value)) {
-        details['validValueDescription'] = `Valid values are ${JSON.stringify(validValues)}.`;
-        throw new WorkboxError('invalid-value', details);
-      }
-    };
-    const isArrayOfClass = (value,
+    expectedClass,
+    details
+  ) => {
+    if (!(object instanceof expectedClass)) {
+      details["expectedClassName"] = expectedClass.name;
+      throw new WorkboxError("incorrect-class", details);
+    }
+  };
+  const isOneOf = (value, validValues, details) => {
+    if (!validValues.includes(value)) {
+      details["validValueDescription"] = `Valid values are ${JSON.stringify(validValues)}.`;
+      throw new WorkboxError("invalid-value", details);
+    }
+  };
+  const isArrayOfClass = (
+    value,
     // Need general type to do check later.
     expectedClass,
     // eslint-disable-line
-    details) => {
-      const error = new WorkboxError('not-array-of-class', details);
-      if (!Array.isArray(value)) {
+    details
+  ) => {
+    const error = new WorkboxError("not-array-of-class", details);
+    if (!Array.isArray(value)) {
+      throw error;
+    }
+    for (const item of value) {
+      if (!(item instanceof expectedClass)) {
         throw error;
       }
-      for (const item of value) {
-        if (!(item instanceof expectedClass)) {
-          throw error;
-        }
-      }
-    };
-    const finalAssertExports = {
-      hasMethod,
-      isArray,
-      isInstance,
-      isOneOf,
-      isType,
-      isArrayOfClass
-    };
-
-    // @ts-ignore
-    try {
-      self['workbox:routing:6.6.0'] && _();
-    } catch (e) {}
-
-    /*
-      Copyright 2018 Google LLC
-
-      Use of this source code is governed by an MIT-style
-      license that can be found in the LICENSE file or at
-      https://opensource.org/licenses/MIT.
-    */
-    /**
-     * The default HTTP method, 'GET', used when there's no specific method
-     * configured for a route.
-     *
-     * @type {string}
-     *
-     * @private
-     */
-    const defaultMethod = 'GET';
-    /**
-     * The list of valid HTTP methods associated with requests that could be routed.
-     *
-     * @type {Array<string>}
-     *
-     * @private
-     */
-    const validMethods = ['DELETE', 'GET', 'HEAD', 'PATCH', 'POST', 'PUT'];
-
-    /*
-      Copyright 2018 Google LLC
-
-      Use of this source code is governed by an MIT-style
-      license that can be found in the LICENSE file or at
-      https://opensource.org/licenses/MIT.
-    */
-    /**
-     * @param {function()|Object} handler Either a function, or an object with a
-     * 'handle' method.
-     * @return {Object} An object with a handle method.
-     *
-     * @private
-     */
-    const normalizeHandler = handler => {
-      if (handler && typeof handler === 'object') {
-        {
-          finalAssertExports.hasMethod(handler, 'handle', {
-            moduleName: 'workbox-routing',
-            className: 'Route',
-            funcName: 'constructor',
-            paramName: 'handler'
-          });
-        }
-        return handler;
-      } else {
-        {
-          finalAssertExports.isType(handler, 'function', {
-            moduleName: 'workbox-routing',
-            className: 'Route',
-            funcName: 'constructor',
-            paramName: 'handler'
-          });
-        }
-        return {
-          handle: handler
-        };
-      }
-    };
-
-    /*
-      Copyright 2018 Google LLC
-
-      Use of this source code is governed by an MIT-style
-      license that can be found in the LICENSE file or at
-      https://opensource.org/licenses/MIT.
-    */
-    /**
-     * A `Route` consists of a pair of callback functions, "match" and "handler".
-     * The "match" callback determine if a route should be used to "handle" a
-     * request by returning a non-falsy value if it can. The "handler" callback
-     * is called when there is a match and should return a Promise that resolves
-     * to a `Response`.
-     *
-     * @memberof workbox-routing
-     */
-    class Route {
-      /**
-       * Constructor for Route class.
-       *
-       * @param {workbox-routing~matchCallback} match
-       * A callback function that determines whether the route matches a given
-       * `fetch` event by returning a non-falsy value.
-       * @param {workbox-routing~handlerCallback} handler A callback
-       * function that returns a Promise resolving to a Response.
-       * @param {string} [method='GET'] The HTTP method to match the Route
-       * against.
-       */
-      constructor(match, handler, method = defaultMethod) {
-        {
-          finalAssertExports.isType(match, 'function', {
-            moduleName: 'workbox-routing',
-            className: 'Route',
-            funcName: 'constructor',
-            paramName: 'match'
-          });
-          if (method) {
-            finalAssertExports.isOneOf(method, validMethods, {
-              paramName: 'method'
-            });
-          }
-        }
-        // These values are referenced directly by Router so cannot be
-        // altered by minificaton.
-        this.handler = normalizeHandler(handler);
-        this.match = match;
-        this.method = method;
-      }
-      /**
-       *
-       * @param {workbox-routing-handlerCallback} handler A callback
-       * function that returns a Promise resolving to a Response
-       */
-      setCatchHandler(handler) {
-        this.catchHandler = normalizeHandler(handler);
-      }
     }
+  };
+  const finalAssertExports = {
+    hasMethod,
+    isArray,
+    isInstance,
+    isOneOf,
+    isType,
+    isArrayOfClass,
+  };
 
-    /*
+  // @ts-ignore
+  try {
+    self["workbox:routing:6.6.0"] && _();
+  } catch (e) {}
+
+  /*
       Copyright 2018 Google LLC
 
       Use of this source code is governed by an MIT-style
       license that can be found in the LICENSE file or at
       https://opensource.org/licenses/MIT.
     */
-    /**
-     * RegExpRoute makes it easy to create a regular expression based
-     * {@link workbox-routing.Route}.
-     *
-     * For same-origin requests the RegExp only needs to match part of the URL. For
-     * requests against third-party servers, you must define a RegExp that matches
-     * the start of the URL.
-     *
-     * @memberof workbox-routing
-     * @extends workbox-routing.Route
-     */
-    class RegExpRoute extends Route {
-      /**
-       * If the regular expression contains
-       * [capture groups]{@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#grouping-back-references},
-       * the captured values will be passed to the
-       * {@link workbox-routing~handlerCallback} `params`
-       * argument.
-       *
-       * @param {RegExp} regExp The regular expression to match against URLs.
-       * @param {workbox-routing~handlerCallback} handler A callback
-       * function that returns a Promise resulting in a Response.
-       * @param {string} [method='GET'] The HTTP method to match the Route
-       * against.
-       */
-      constructor(regExp, handler, method) {
-        {
-          finalAssertExports.isInstance(regExp, RegExp, {
-            moduleName: 'workbox-routing',
-            className: 'RegExpRoute',
-            funcName: 'constructor',
-            paramName: 'pattern'
-          });
-        }
-        const match = ({
-          url
-        }) => {
-          const result = regExp.exec(url.href);
-          // Return immediately if there's no match.
-          if (!result) {
-            return;
-          }
-          // Require that the match start at the first character in the URL string
-          // if it's a cross-origin request.
-          // See https://github.com/GoogleChrome/workbox/issues/281 for the context
-          // behind this behavior.
-          if (url.origin !== location.origin && result.index !== 0) {
-            {
-              logger.debug(`The regular expression '${regExp.toString()}' only partially matched ` + `against the cross-origin URL '${url.toString()}'. RegExpRoute's will only ` + `handle cross-origin requests if they match the entire URL.`);
-            }
-            return;
-          }
-          // If the route matches, but there aren't any capture groups defined, then
-          // this will return [], which is truthy and therefore sufficient to
-          // indicate a match.
-          // If there are capture groups, then it will return their values.
-          return result.slice(1);
-        };
-        super(match, handler, method);
-      }
-    }
+  /**
+   * The default HTTP method, 'GET', used when there's no specific method
+   * configured for a route.
+   *
+   * @type {string}
+   *
+   * @private
+   */
+  const defaultMethod = "GET";
+  /**
+   * The list of valid HTTP methods associated with requests that could be routed.
+   *
+   * @type {Array<string>}
+   *
+   * @private
+   */
+  const validMethods = ["DELETE", "GET", "HEAD", "PATCH", "POST", "PUT"];
 
-    /*
+  /*
       Copyright 2018 Google LLC
 
       Use of this source code is governed by an MIT-style
       license that can be found in the LICENSE file or at
       https://opensource.org/licenses/MIT.
     */
-    const getFriendlyURL = url => {
-      const urlObj = new URL(String(url), location.href);
-      // See https://github.com/GoogleChrome/workbox/issues/2323
-      // We want to include everything, except for the origin if it's same-origin.
-      return urlObj.href.replace(new RegExp(`^${location.origin}`), '');
-    };
-
-    /*
-      Copyright 2018 Google LLC
-
-      Use of this source code is governed by an MIT-style
-      license that can be found in the LICENSE file or at
-      https://opensource.org/licenses/MIT.
-    */
-    /**
-     * The Router can be used to process a `FetchEvent` using one or more
-     * {@link workbox-routing.Route}, responding with a `Response` if
-     * a matching route exists.
-     *
-     * If no route matches a given a request, the Router will use a "default"
-     * handler if one is defined.
-     *
-     * Should the matching Route throw an error, the Router will use a "catch"
-     * handler if one is defined to gracefully deal with issues and respond with a
-     * Request.
-     *
-     * If a request matches multiple routes, the **earliest** registered route will
-     * be used to respond to the request.
-     *
-     * @memberof workbox-routing
-     */
-    class Router {
-      /**
-       * Initializes a new Router.
-       */
-      constructor() {
-        this._routes = new Map();
-        this._defaultHandlerMap = new Map();
-      }
-      /**
-       * @return {Map<string, Array<workbox-routing.Route>>} routes A `Map` of HTTP
-       * method name ('GET', etc.) to an array of all the corresponding `Route`
-       * instances that are registered.
-       */
-      get routes() {
-        return this._routes;
-      }
-      /**
-       * Adds a fetch event listener to respond to events when a route matches
-       * the event's request.
-       */
-      addFetchListener() {
-        // See https://github.com/Microsoft/TypeScript/issues/28357#issuecomment-436484705
-        self.addEventListener('fetch', event => {
-          const {
-            request
-          } = event;
-          const responsePromise = this.handleRequest({
-            request,
-            event
-          });
-          if (responsePromise) {
-            event.respondWith(responsePromise);
-          }
+  /**
+   * @param {function()|Object} handler Either a function, or an object with a
+   * 'handle' method.
+   * @return {Object} An object with a handle method.
+   *
+   * @private
+   */
+  const normalizeHandler = (handler) => {
+    if (handler && typeof handler === "object") {
+      {
+        finalAssertExports.hasMethod(handler, "handle", {
+          moduleName: "workbox-routing",
+          className: "Route",
+          funcName: "constructor",
+          paramName: "handler",
         });
       }
-      /**
-       * Adds a message event listener for URLs to cache from the window.
-       * This is useful to cache resources loaded on the page prior to when the
-       * service worker started controlling it.
-       *
-       * The format of the message data sent from the window should be as follows.
-       * Where the `urlsToCache` array may consist of URL strings or an array of
-       * URL string + `requestInit` object (the same as you'd pass to `fetch()`).
-       *
-       * ```
-       * {
-       *   type: 'CACHE_URLS',
-       *   payload: {
-       *     urlsToCache: [
-       *       './script1.js',
-       *       './script2.js',
-       *       ['./script3.js', {mode: 'no-cors'}],
-       *     ],
-       *   },
-       * }
-       * ```
-       */
-      addCacheListener() {
-        // See https://github.com/Microsoft/TypeScript/issues/28357#issuecomment-436484705
-        self.addEventListener('message', event => {
-          // event.data is type 'any'
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-          if (event.data && event.data.type === 'CACHE_URLS') {
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            const {
-              payload
-            } = event.data;
-            {
-              logger.debug(`Caching URLs from the window`, payload.urlsToCache);
-            }
-            const requestPromises = Promise.all(payload.urlsToCache.map(entry => {
-              if (typeof entry === 'string') {
+      return handler;
+    } else {
+      {
+        finalAssertExports.isType(handler, "function", {
+          moduleName: "workbox-routing",
+          className: "Route",
+          funcName: "constructor",
+          paramName: "handler",
+        });
+      }
+      return {
+        handle: handler,
+      };
+    }
+  };
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /**
+   * A `Route` consists of a pair of callback functions, "match" and "handler".
+   * The "match" callback determine if a route should be used to "handle" a
+   * request by returning a non-falsy value if it can. The "handler" callback
+   * is called when there is a match and should return a Promise that resolves
+   * to a `Response`.
+   *
+   * @memberof workbox-routing
+   */
+  class Route {
+    /**
+     * Constructor for Route class.
+     *
+     * @param {workbox-routing~matchCallback} match
+     * A callback function that determines whether the route matches a given
+     * `fetch` event by returning a non-falsy value.
+     * @param {workbox-routing~handlerCallback} handler A callback
+     * function that returns a Promise resolving to a Response.
+     * @param {string} [method='GET'] The HTTP method to match the Route
+     * against.
+     */
+    constructor(match, handler, method = defaultMethod) {
+      {
+        finalAssertExports.isType(match, "function", {
+          moduleName: "workbox-routing",
+          className: "Route",
+          funcName: "constructor",
+          paramName: "match",
+        });
+        if (method) {
+          finalAssertExports.isOneOf(method, validMethods, {
+            paramName: "method",
+          });
+        }
+      }
+      // These values are referenced directly by Router so cannot be
+      // altered by minificaton.
+      this.handler = normalizeHandler(handler);
+      this.match = match;
+      this.method = method;
+    }
+    /**
+     *
+     * @param {workbox-routing-handlerCallback} handler A callback
+     * function that returns a Promise resolving to a Response
+     */
+    setCatchHandler(handler) {
+      this.catchHandler = normalizeHandler(handler);
+    }
+  }
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /**
+   * RegExpRoute makes it easy to create a regular expression based
+   * {@link workbox-routing.Route}.
+   *
+   * For same-origin requests the RegExp only needs to match part of the URL. For
+   * requests against third-party servers, you must define a RegExp that matches
+   * the start of the URL.
+   *
+   * @memberof workbox-routing
+   * @extends workbox-routing.Route
+   */
+  class RegExpRoute extends Route {
+    /**
+     * If the regular expression contains
+     * [capture groups]{@link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#grouping-back-references},
+     * the captured values will be passed to the
+     * {@link workbox-routing~handlerCallback} `params`
+     * argument.
+     *
+     * @param {RegExp} regExp The regular expression to match against URLs.
+     * @param {workbox-routing~handlerCallback} handler A callback
+     * function that returns a Promise resulting in a Response.
+     * @param {string} [method='GET'] The HTTP method to match the Route
+     * against.
+     */
+    constructor(regExp, handler, method) {
+      {
+        finalAssertExports.isInstance(regExp, RegExp, {
+          moduleName: "workbox-routing",
+          className: "RegExpRoute",
+          funcName: "constructor",
+          paramName: "pattern",
+        });
+      }
+      const match = ({ url }) => {
+        const result = regExp.exec(url.href);
+        // Return immediately if there's no match.
+        if (!result) {
+          return;
+        }
+        // Require that the match start at the first character in the URL string
+        // if it's a cross-origin request.
+        // See https://github.com/GoogleChrome/workbox/issues/281 for the context
+        // behind this behavior.
+        if (url.origin !== location.origin && result.index !== 0) {
+          {
+            logger.debug(
+              `The regular expression '${regExp.toString()}' only partially matched ` +
+                `against the cross-origin URL '${url.toString()}'. RegExpRoute's will only ` +
+                `handle cross-origin requests if they match the entire URL.`
+            );
+          }
+          return;
+        }
+        // If the route matches, but there aren't any capture groups defined, then
+        // this will return [], which is truthy and therefore sufficient to
+        // indicate a match.
+        // If there are capture groups, then it will return their values.
+        return result.slice(1);
+      };
+      super(match, handler, method);
+    }
+  }
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  const getFriendlyURL = (url) => {
+    const urlObj = new URL(String(url), location.href);
+    // See https://github.com/GoogleChrome/workbox/issues/2323
+    // We want to include everything, except for the origin if it's same-origin.
+    return urlObj.href.replace(new RegExp(`^${location.origin}`), "");
+  };
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /**
+   * The Router can be used to process a `FetchEvent` using one or more
+   * {@link workbox-routing.Route}, responding with a `Response` if
+   * a matching route exists.
+   *
+   * If no route matches a given a request, the Router will use a "default"
+   * handler if one is defined.
+   *
+   * Should the matching Route throw an error, the Router will use a "catch"
+   * handler if one is defined to gracefully deal with issues and respond with a
+   * Request.
+   *
+   * If a request matches multiple routes, the **earliest** registered route will
+   * be used to respond to the request.
+   *
+   * @memberof workbox-routing
+   */
+  class Router {
+    /**
+     * Initializes a new Router.
+     */
+    constructor() {
+      this._routes = new Map();
+      this._defaultHandlerMap = new Map();
+    }
+    /**
+     * @return {Map<string, Array<workbox-routing.Route>>} routes A `Map` of HTTP
+     * method name ('GET', etc.) to an array of all the corresponding `Route`
+     * instances that are registered.
+     */
+    get routes() {
+      return this._routes;
+    }
+    /**
+     * Adds a fetch event listener to respond to events when a route matches
+     * the event's request.
+     */
+    addFetchListener() {
+      // See https://github.com/Microsoft/TypeScript/issues/28357#issuecomment-436484705
+      self.addEventListener("fetch", (event) => {
+        const { request } = event;
+        const responsePromise = this.handleRequest({
+          request,
+          event,
+        });
+        if (responsePromise) {
+          event.respondWith(responsePromise);
+        }
+      });
+    }
+    /**
+     * Adds a message event listener for URLs to cache from the window.
+     * This is useful to cache resources loaded on the page prior to when the
+     * service worker started controlling it.
+     *
+     * The format of the message data sent from the window should be as follows.
+     * Where the `urlsToCache` array may consist of URL strings or an array of
+     * URL string + `requestInit` object (the same as you'd pass to `fetch()`).
+     *
+     * ```
+     * {
+     *   type: 'CACHE_URLS',
+     *   payload: {
+     *     urlsToCache: [
+     *       './script1.js',
+     *       './script2.js',
+     *       ['./script3.js', {mode: 'no-cors'}],
+     *     ],
+     *   },
+     * }
+     * ```
+     */
+    addCacheListener() {
+      // See https://github.com/Microsoft/TypeScript/issues/28357#issuecomment-436484705
+      self.addEventListener("message", (event) => {
+        // event.data is type 'any'
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        if (event.data && event.data.type === "CACHE_URLS") {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          const { payload } = event.data;
+          {
+            logger.debug(`Caching URLs from the window`, payload.urlsToCache);
+          }
+          const requestPromises = Promise.all(
+            payload.urlsToCache.map((entry) => {
+              if (typeof entry === "string") {
                 entry = [entry];
               }
               const request = new Request(...entry);
               return this.handleRequest({
                 request,
-                event
+                event,
               });
               // TODO(philipwalton): TypeScript errors without this typecast for
               // some reason (probably a bug). The real type here should work but
               // doesn't: `Array<Promise<Response> | undefined>`.
-            })); // TypeScript
-            event.waitUntil(requestPromises);
-            // If a MessageChannel was used, reply to the message on success.
-            if (event.ports && event.ports[0]) {
-              void requestPromises.then(() => event.ports[0].postMessage(true));
-            }
+            })
+          ); // TypeScript
+          event.waitUntil(requestPromises);
+          // If a MessageChannel was used, reply to the message on success.
+          if (event.ports && event.ports[0]) {
+            void requestPromises.then(() => event.ports[0].postMessage(true));
           }
+        }
+      });
+    }
+    /**
+     * Apply the routing rules to a FetchEvent object to get a Response from an
+     * appropriate Route's handler.
+     *
+     * @param {Object} options
+     * @param {Request} options.request The request to handle.
+     * @param {ExtendableEvent} options.event The event that triggered the
+     *     request.
+     * @return {Promise<Response>|undefined} A promise is returned if a
+     *     registered route can handle the request. If there is no matching
+     *     route and there's no `defaultHandler`, `undefined` is returned.
+     */
+    handleRequest({ request, event }) {
+      {
+        finalAssertExports.isInstance(request, Request, {
+          moduleName: "workbox-routing",
+          className: "Router",
+          funcName: "handleRequest",
+          paramName: "options.request",
         });
       }
-      /**
-       * Apply the routing rules to a FetchEvent object to get a Response from an
-       * appropriate Route's handler.
-       *
-       * @param {Object} options
-       * @param {Request} options.request The request to handle.
-       * @param {ExtendableEvent} options.event The event that triggered the
-       *     request.
-       * @return {Promise<Response>|undefined} A promise is returned if a
-       *     registered route can handle the request. If there is no matching
-       *     route and there's no `defaultHandler`, `undefined` is returned.
-       */
-      handleRequest({
+      const url = new URL(request.url, location.href);
+      if (!url.protocol.startsWith("http")) {
+        {
+          logger.debug(`Workbox Router only supports URLs that start with 'http'.`);
+        }
+        return;
+      }
+      const sameOrigin = url.origin === location.origin;
+      const { params, route } = this.findMatchingRoute({
+        event,
         request,
-        event
-      }) {
-        {
-          finalAssertExports.isInstance(request, Request, {
-            moduleName: 'workbox-routing',
-            className: 'Router',
-            funcName: 'handleRequest',
-            paramName: 'options.request'
-          });
-        }
-        const url = new URL(request.url, location.href);
-        if (!url.protocol.startsWith('http')) {
-          {
-            logger.debug(`Workbox Router only supports URLs that start with 'http'.`);
+        sameOrigin,
+        url,
+      });
+      let handler = route && route.handler;
+      const debugMessages = [];
+      {
+        if (handler) {
+          debugMessages.push([`Found a route to handle this request:`, route]);
+          if (params) {
+            debugMessages.push([`Passing the following params to the route's handler:`, params]);
           }
-          return;
         }
-        const sameOrigin = url.origin === location.origin;
-        const {
-          params,
-          route
-        } = this.findMatchingRoute({
-          event,
-          request,
-          sameOrigin,
-          url
+      }
+      // If we don't have a handler because there was no matching route, then
+      // fall back to defaultHandler if that's defined.
+      const method = request.method;
+      if (!handler && this._defaultHandlerMap.has(method)) {
+        {
+          debugMessages.push(
+            `Failed to find a matching route. Falling ` + `back to the default handler for ${method}.`
+          );
+        }
+        handler = this._defaultHandlerMap.get(method);
+      }
+      if (!handler) {
+        {
+          // No handler so Workbox will do nothing. If logs is set of debug
+          // i.e. verbose, we should print out this information.
+          logger.debug(`No route found for: ${getFriendlyURL(url)}`);
+        }
+        return;
+      }
+      {
+        // We have a handler, meaning Workbox is going to handle the route.
+        // print the routing details to the console.
+        logger.groupCollapsed(`Router is responding to: ${getFriendlyURL(url)}`);
+        debugMessages.forEach((msg) => {
+          if (Array.isArray(msg)) {
+            logger.log(...msg);
+          } else {
+            logger.log(msg);
+          }
         });
-        let handler = route && route.handler;
-        const debugMessages = [];
-        {
-          if (handler) {
-            debugMessages.push([`Found a route to handle this request:`, route]);
-            if (params) {
-              debugMessages.push([`Passing the following params to the route's handler:`, params]);
+        logger.groupEnd();
+      }
+      // Wrap in try and catch in case the handle method throws a synchronous
+      // error. It should still callback to the catch handler.
+      let responsePromise;
+      try {
+        responsePromise = handler.handle({
+          url,
+          request,
+          event,
+          params,
+        });
+      } catch (err) {
+        responsePromise = Promise.reject(err);
+      }
+      // Get route's catch handler, if it exists
+      const catchHandler = route && route.catchHandler;
+      if (responsePromise instanceof Promise && (this._catchHandler || catchHandler)) {
+        responsePromise = responsePromise.catch(async (err) => {
+          // If there's a route catch handler, process that first
+          if (catchHandler) {
+            {
+              // Still include URL here as it will be async from the console group
+              // and may not make sense without the URL
+              logger.groupCollapsed(
+                `Error thrown when responding to: ` + ` ${getFriendlyURL(url)}. Falling back to route's Catch Handler.`
+              );
+              logger.error(`Error thrown by:`, route);
+              logger.error(err);
+              logger.groupEnd();
             }
-          }
-        }
-        // If we don't have a handler because there was no matching route, then
-        // fall back to defaultHandler if that's defined.
-        const method = request.method;
-        if (!handler && this._defaultHandlerMap.has(method)) {
-          {
-            debugMessages.push(`Failed to find a matching route. Falling ` + `back to the default handler for ${method}.`);
-          }
-          handler = this._defaultHandlerMap.get(method);
-        }
-        if (!handler) {
-          {
-            // No handler so Workbox will do nothing. If logs is set of debug
-            // i.e. verbose, we should print out this information.
-            logger.debug(`No route found for: ${getFriendlyURL(url)}`);
-          }
-          return;
-        }
-        {
-          // We have a handler, meaning Workbox is going to handle the route.
-          // print the routing details to the console.
-          logger.groupCollapsed(`Router is responding to: ${getFriendlyURL(url)}`);
-          debugMessages.forEach(msg => {
-            if (Array.isArray(msg)) {
-              logger.log(...msg);
-            } else {
-              logger.log(msg);
-            }
-          });
-          logger.groupEnd();
-        }
-        // Wrap in try and catch in case the handle method throws a synchronous
-        // error. It should still callback to the catch handler.
-        let responsePromise;
-        try {
-          responsePromise = handler.handle({
-            url,
-            request,
-            event,
-            params
-          });
-        } catch (err) {
-          responsePromise = Promise.reject(err);
-        }
-        // Get route's catch handler, if it exists
-        const catchHandler = route && route.catchHandler;
-        if (responsePromise instanceof Promise && (this._catchHandler || catchHandler)) {
-          responsePromise = responsePromise.catch(async err => {
-            // If there's a route catch handler, process that first
-            if (catchHandler) {
-              {
-                // Still include URL here as it will be async from the console group
-                // and may not make sense without the URL
-                logger.groupCollapsed(`Error thrown when responding to: ` + ` ${getFriendlyURL(url)}. Falling back to route's Catch Handler.`);
-                logger.error(`Error thrown by:`, route);
-                logger.error(err);
-                logger.groupEnd();
-              }
-              try {
-                return await catchHandler.handle({
-                  url,
-                  request,
-                  event,
-                  params
-                });
-              } catch (catchErr) {
-                if (catchErr instanceof Error) {
-                  err = catchErr;
-                }
-              }
-            }
-            if (this._catchHandler) {
-              {
-                // Still include URL here as it will be async from the console group
-                // and may not make sense without the URL
-                logger.groupCollapsed(`Error thrown when responding to: ` + ` ${getFriendlyURL(url)}. Falling back to global Catch Handler.`);
-                logger.error(`Error thrown by:`, route);
-                logger.error(err);
-                logger.groupEnd();
-              }
-              return this._catchHandler.handle({
+            try {
+              return await catchHandler.handle({
                 url,
                 request,
-                event
+                event,
+                params,
               });
-            }
-            throw err;
-          });
-        }
-        return responsePromise;
-      }
-      /**
-       * Checks a request and URL (and optionally an event) against the list of
-       * registered routes, and if there's a match, returns the corresponding
-       * route along with any params generated by the match.
-       *
-       * @param {Object} options
-       * @param {URL} options.url
-       * @param {boolean} options.sameOrigin The result of comparing `url.origin`
-       *     against the current origin.
-       * @param {Request} options.request The request to match.
-       * @param {Event} options.event The corresponding event.
-       * @return {Object} An object with `route` and `params` properties.
-       *     They are populated if a matching route was found or `undefined`
-       *     otherwise.
-       */
-      findMatchingRoute({
-        url,
-        sameOrigin,
-        request,
-        event
-      }) {
-        const routes = this._routes.get(request.method) || [];
-        for (const route of routes) {
-          let params;
-          // route.match returns type any, not possible to change right now.
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-          const matchResult = route.match({
-            url,
-            sameOrigin,
-            request,
-            event
-          });
-          if (matchResult) {
-            {
-              // Warn developers that using an async matchCallback is almost always
-              // not the right thing to do.
-              if (matchResult instanceof Promise) {
-                logger.warn(`While routing ${getFriendlyURL(url)}, an async ` + `matchCallback function was used. Please convert the ` + `following route to use a synchronous matchCallback function:`, route);
+            } catch (catchErr) {
+              if (catchErr instanceof Error) {
+                err = catchErr;
               }
             }
-            // See https://github.com/GoogleChrome/workbox/issues/2079
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            params = matchResult;
-            if (Array.isArray(params) && params.length === 0) {
-              // Instead of passing an empty array in as params, use undefined.
-              params = undefined;
-            } else if (matchResult.constructor === Object &&
-            // eslint-disable-line
-            Object.keys(matchResult).length === 0) {
-              // Instead of passing an empty object in as params, use undefined.
-              params = undefined;
-            } else if (typeof matchResult === 'boolean') {
-              // For the boolean value true (rather than just something truth-y),
-              // don't set params.
-              // See https://github.com/GoogleChrome/workbox/pull/2134#issuecomment-513924353
-              params = undefined;
-            }
-            // Return early if have a match.
-            return {
-              route,
-              params
-            };
           }
-        }
-        // If no match was found above, return and empty object.
-        return {};
-      }
-      /**
-       * Define a default `handler` that's called when no routes explicitly
-       * match the incoming request.
-       *
-       * Each HTTP method ('GET', 'POST', etc.) gets its own default handler.
-       *
-       * Without a default handler, unmatched requests will go against the
-       * network as if there were no service worker present.
-       *
-       * @param {workbox-routing~handlerCallback} handler A callback
-       * function that returns a Promise resulting in a Response.
-       * @param {string} [method='GET'] The HTTP method to associate with this
-       * default handler. Each method has its own default.
-       */
-      setDefaultHandler(handler, method = defaultMethod) {
-        this._defaultHandlerMap.set(method, normalizeHandler(handler));
-      }
-      /**
-       * If a Route throws an error while handling a request, this `handler`
-       * will be called and given a chance to provide a response.
-       *
-       * @param {workbox-routing~handlerCallback} handler A callback
-       * function that returns a Promise resulting in a Response.
-       */
-      setCatchHandler(handler) {
-        this._catchHandler = normalizeHandler(handler);
-      }
-      /**
-       * Registers a route with the router.
-       *
-       * @param {workbox-routing.Route} route The route to register.
-       */
-      registerRoute(route) {
-        {
-          finalAssertExports.isType(route, 'object', {
-            moduleName: 'workbox-routing',
-            className: 'Router',
-            funcName: 'registerRoute',
-            paramName: 'route'
-          });
-          finalAssertExports.hasMethod(route, 'match', {
-            moduleName: 'workbox-routing',
-            className: 'Router',
-            funcName: 'registerRoute',
-            paramName: 'route'
-          });
-          finalAssertExports.isType(route.handler, 'object', {
-            moduleName: 'workbox-routing',
-            className: 'Router',
-            funcName: 'registerRoute',
-            paramName: 'route'
-          });
-          finalAssertExports.hasMethod(route.handler, 'handle', {
-            moduleName: 'workbox-routing',
-            className: 'Router',
-            funcName: 'registerRoute',
-            paramName: 'route.handler'
-          });
-          finalAssertExports.isType(route.method, 'string', {
-            moduleName: 'workbox-routing',
-            className: 'Router',
-            funcName: 'registerRoute',
-            paramName: 'route.method'
-          });
-        }
-        if (!this._routes.has(route.method)) {
-          this._routes.set(route.method, []);
-        }
-        // Give precedence to all of the earlier routes by adding this additional
-        // route to the end of the array.
-        this._routes.get(route.method).push(route);
-      }
-      /**
-       * Unregisters a route with the router.
-       *
-       * @param {workbox-routing.Route} route The route to unregister.
-       */
-      unregisterRoute(route) {
-        if (!this._routes.has(route.method)) {
-          throw new WorkboxError('unregister-route-but-not-found-with-method', {
-            method: route.method
-          });
-        }
-        const routeIndex = this._routes.get(route.method).indexOf(route);
-        if (routeIndex > -1) {
-          this._routes.get(route.method).splice(routeIndex, 1);
-        } else {
-          throw new WorkboxError('unregister-route-route-not-registered');
-        }
-      }
-    }
-
-    /*
-      Copyright 2019 Google LLC
-
-      Use of this source code is governed by an MIT-style
-      license that can be found in the LICENSE file or at
-      https://opensource.org/licenses/MIT.
-    */
-    let defaultRouter;
-    /**
-     * Creates a new, singleton Router instance if one does not exist. If one
-     * does already exist, that instance is returned.
-     *
-     * @private
-     * @return {Router}
-     */
-    const getOrCreateDefaultRouter = () => {
-      if (!defaultRouter) {
-        defaultRouter = new Router();
-        // The helpers that use the default Router assume these listeners exist.
-        defaultRouter.addFetchListener();
-        defaultRouter.addCacheListener();
-      }
-      return defaultRouter;
-    };
-
-    /*
-      Copyright 2019 Google LLC
-
-      Use of this source code is governed by an MIT-style
-      license that can be found in the LICENSE file or at
-      https://opensource.org/licenses/MIT.
-    */
-    /**
-     * Easily register a RegExp, string, or function with a caching
-     * strategy to a singleton Router instance.
-     *
-     * This method will generate a Route for you if needed and
-     * call {@link workbox-routing.Router#registerRoute}.
-     *
-     * @param {RegExp|string|workbox-routing.Route~matchCallback|workbox-routing.Route} capture
-     * If the capture param is a `Route`, all other arguments will be ignored.
-     * @param {workbox-routing~handlerCallback} [handler] A callback
-     * function that returns a Promise resulting in a Response. This parameter
-     * is required if `capture` is not a `Route` object.
-     * @param {string} [method='GET'] The HTTP method to match the Route
-     * against.
-     * @return {workbox-routing.Route} The generated `Route`.
-     *
-     * @memberof workbox-routing
-     */
-    function registerRoute(capture, handler, method) {
-      let route;
-      if (typeof capture === 'string') {
-        const captureUrl = new URL(capture, location.href);
-        {
-          if (!(capture.startsWith('/') || capture.startsWith('http'))) {
-            throw new WorkboxError('invalid-string', {
-              moduleName: 'workbox-routing',
-              funcName: 'registerRoute',
-              paramName: 'capture'
-            });
-          }
-          // We want to check if Express-style wildcards are in the pathname only.
-          // TODO: Remove this log message in v4.
-          const valueToCheck = capture.startsWith('http') ? captureUrl.pathname : capture;
-          // See https://github.com/pillarjs/path-to-regexp#parameters
-          const wildcards = '[*:?+]';
-          if (new RegExp(`${wildcards}`).exec(valueToCheck)) {
-            logger.debug(`The '$capture' parameter contains an Express-style wildcard ` + `character (${wildcards}). Strings are now always interpreted as ` + `exact matches; use a RegExp for partial or wildcard matches.`);
-          }
-        }
-        const matchCallback = ({
-          url
-        }) => {
-          {
-            if (url.pathname === captureUrl.pathname && url.origin !== captureUrl.origin) {
-              logger.debug(`${capture} only partially matches the cross-origin URL ` + `${url.toString()}. This route will only handle cross-origin requests ` + `if they match the entire URL.`);
-            }
-          }
-          return url.href === captureUrl.href;
-        };
-        // If `capture` is a string then `handler` and `method` must be present.
-        route = new Route(matchCallback, handler, method);
-      } else if (capture instanceof RegExp) {
-        // If `capture` is a `RegExp` then `handler` and `method` must be present.
-        route = new RegExpRoute(capture, handler, method);
-      } else if (typeof capture === 'function') {
-        // If `capture` is a function then `handler` and `method` must be present.
-        route = new Route(capture, handler, method);
-      } else if (capture instanceof Route) {
-        route = capture;
-      } else {
-        throw new WorkboxError('unsupported-route-type', {
-          moduleName: 'workbox-routing',
-          funcName: 'registerRoute',
-          paramName: 'capture'
-        });
-      }
-      const defaultRouter = getOrCreateDefaultRouter();
-      defaultRouter.registerRoute(route);
-      return route;
-    }
-
-    // @ts-ignore
-    try {
-      self['workbox:strategies:6.6.0'] && _();
-    } catch (e) {}
-
-    /*
-      Copyright 2018 Google LLC
-
-      Use of this source code is governed by an MIT-style
-      license that can be found in the LICENSE file or at
-      https://opensource.org/licenses/MIT.
-    */
-    const cacheOkAndOpaquePlugin = {
-      /**
-       * Returns a valid response (to allow caching) if the status is 200 (OK) or
-       * 0 (opaque).
-       *
-       * @param {Object} options
-       * @param {Response} options.response
-       * @return {Response|null}
-       *
-       * @private
-       */
-      cacheWillUpdate: async ({
-        response
-      }) => {
-        if (response.status === 200 || response.status === 0) {
-          return response;
-        }
-        return null;
-      }
-    };
-
-    /*
-      Copyright 2018 Google LLC
-
-      Use of this source code is governed by an MIT-style
-      license that can be found in the LICENSE file or at
-      https://opensource.org/licenses/MIT.
-    */
-    const _cacheNameDetails = {
-      googleAnalytics: 'googleAnalytics',
-      precache: 'precache-v2',
-      prefix: 'workbox',
-      runtime: 'runtime',
-      suffix: typeof registration !== 'undefined' ? registration.scope : ''
-    };
-    const _createCacheName = cacheName => {
-      return [_cacheNameDetails.prefix, cacheName, _cacheNameDetails.suffix].filter(value => value && value.length > 0).join('-');
-    };
-    const eachCacheNameDetail = fn => {
-      for (const key of Object.keys(_cacheNameDetails)) {
-        fn(key);
-      }
-    };
-    const cacheNames = {
-      updateDetails: details => {
-        eachCacheNameDetail(key => {
-          if (typeof details[key] === 'string') {
-            _cacheNameDetails[key] = details[key];
-          }
-        });
-      },
-      getGoogleAnalyticsName: userCacheName => {
-        return userCacheName || _createCacheName(_cacheNameDetails.googleAnalytics);
-      },
-      getPrecacheName: userCacheName => {
-        return userCacheName || _createCacheName(_cacheNameDetails.precache);
-      },
-      getPrefix: () => {
-        return _cacheNameDetails.prefix;
-      },
-      getRuntimeName: userCacheName => {
-        return userCacheName || _createCacheName(_cacheNameDetails.runtime);
-      },
-      getSuffix: () => {
-        return _cacheNameDetails.suffix;
-      }
-    };
-
-    /*
-      Copyright 2020 Google LLC
-      Use of this source code is governed by an MIT-style
-      license that can be found in the LICENSE file or at
-      https://opensource.org/licenses/MIT.
-    */
-    function stripParams(fullURL, ignoreParams) {
-      const strippedURL = new URL(fullURL);
-      for (const param of ignoreParams) {
-        strippedURL.searchParams.delete(param);
-      }
-      return strippedURL.href;
-    }
-    /**
-     * Matches an item in the cache, ignoring specific URL params. This is similar
-     * to the `ignoreSearch` option, but it allows you to ignore just specific
-     * params (while continuing to match on the others).
-     *
-     * @private
-     * @param {Cache} cache
-     * @param {Request} request
-     * @param {Object} matchOptions
-     * @param {Array<string>} ignoreParams
-     * @return {Promise<Response|undefined>}
-     */
-    async function cacheMatchIgnoreParams(cache, request, ignoreParams, matchOptions) {
-      const strippedRequestURL = stripParams(request.url, ignoreParams);
-      // If the request doesn't include any ignored params, match as normal.
-      if (request.url === strippedRequestURL) {
-        return cache.match(request, matchOptions);
-      }
-      // Otherwise, match by comparing keys
-      const keysOptions = Object.assign(Object.assign({}, matchOptions), {
-        ignoreSearch: true
-      });
-      const cacheKeys = await cache.keys(request, keysOptions);
-      for (const cacheKey of cacheKeys) {
-        const strippedCacheKeyURL = stripParams(cacheKey.url, ignoreParams);
-        if (strippedRequestURL === strippedCacheKeyURL) {
-          return cache.match(cacheKey, matchOptions);
-        }
-      }
-      return;
-    }
-
-    /*
-      Copyright 2018 Google LLC
-
-      Use of this source code is governed by an MIT-style
-      license that can be found in the LICENSE file or at
-      https://opensource.org/licenses/MIT.
-    */
-    /**
-     * The Deferred class composes Promises in a way that allows for them to be
-     * resolved or rejected from outside the constructor. In most cases promises
-     * should be used directly, but Deferreds can be necessary when the logic to
-     * resolve a promise must be separate.
-     *
-     * @private
-     */
-    class Deferred {
-      /**
-       * Creates a promise and exposes its resolve and reject functions as methods.
-       */
-      constructor() {
-        this.promise = new Promise((resolve, reject) => {
-          this.resolve = resolve;
-          this.reject = reject;
-        });
-      }
-    }
-
-    /*
-      Copyright 2018 Google LLC
-
-      Use of this source code is governed by an MIT-style
-      license that can be found in the LICENSE file or at
-      https://opensource.org/licenses/MIT.
-    */
-    // Callbacks to be executed whenever there's a quota error.
-    // Can't change Function type right now.
-    // eslint-disable-next-line @typescript-eslint/ban-types
-    const quotaErrorCallbacks = new Set();
-
-    /*
-      Copyright 2018 Google LLC
-
-      Use of this source code is governed by an MIT-style
-      license that can be found in the LICENSE file or at
-      https://opensource.org/licenses/MIT.
-    */
-    /**
-     * Runs all of the callback functions, one at a time sequentially, in the order
-     * in which they were registered.
-     *
-     * @memberof workbox-core
-     * @private
-     */
-    async function executeQuotaErrorCallbacks() {
-      {
-        logger.log(`About to run ${quotaErrorCallbacks.size} ` + `callbacks to clean up caches.`);
-      }
-      for (const callback of quotaErrorCallbacks) {
-        await callback();
-        {
-          logger.log(callback, 'is complete.');
-        }
-      }
-      {
-        logger.log('Finished running callbacks.');
-      }
-    }
-
-    /*
-      Copyright 2019 Google LLC
-      Use of this source code is governed by an MIT-style
-      license that can be found in the LICENSE file or at
-      https://opensource.org/licenses/MIT.
-    */
-    /**
-     * Returns a promise that resolves and the passed number of milliseconds.
-     * This utility is an async/await-friendly version of `setTimeout`.
-     *
-     * @param {number} ms
-     * @return {Promise}
-     * @private
-     */
-    function timeout(ms) {
-      return new Promise(resolve => setTimeout(resolve, ms));
-    }
-
-    /*
-      Copyright 2020 Google LLC
-
-      Use of this source code is governed by an MIT-style
-      license that can be found in the LICENSE file or at
-      https://opensource.org/licenses/MIT.
-    */
-    function toRequest(input) {
-      return typeof input === 'string' ? new Request(input) : input;
-    }
-    /**
-     * A class created every time a Strategy instance instance calls
-     * {@link workbox-strategies.Strategy~handle} or
-     * {@link workbox-strategies.Strategy~handleAll} that wraps all fetch and
-     * cache actions around plugin callbacks and keeps track of when the strategy
-     * is "done" (i.e. all added `event.waitUntil()` promises have resolved).
-     *
-     * @memberof workbox-strategies
-     */
-    class StrategyHandler {
-      /**
-       * Creates a new instance associated with the passed strategy and event
-       * that's handling the request.
-       *
-       * The constructor also initializes the state that will be passed to each of
-       * the plugins handling this request.
-       *
-       * @param {workbox-strategies.Strategy} strategy
-       * @param {Object} options
-       * @param {Request|string} options.request A request to run this strategy for.
-       * @param {ExtendableEvent} options.event The event associated with the
-       *     request.
-       * @param {URL} [options.url]
-       * @param {*} [options.params] The return value from the
-       *     {@link workbox-routing~matchCallback} (if applicable).
-       */
-      constructor(strategy, options) {
-        this._cacheKeys = {};
-        /**
-         * The request the strategy is performing (passed to the strategy's
-         * `handle()` or `handleAll()` method).
-         * @name request
-         * @instance
-         * @type {Request}
-         * @memberof workbox-strategies.StrategyHandler
-         */
-        /**
-         * The event associated with this request.
-         * @name event
-         * @instance
-         * @type {ExtendableEvent}
-         * @memberof workbox-strategies.StrategyHandler
-         */
-        /**
-         * A `URL` instance of `request.url` (if passed to the strategy's
-         * `handle()` or `handleAll()` method).
-         * Note: the `url` param will be present if the strategy was invoked
-         * from a workbox `Route` object.
-         * @name url
-         * @instance
-         * @type {URL|undefined}
-         * @memberof workbox-strategies.StrategyHandler
-         */
-        /**
-         * A `param` value (if passed to the strategy's
-         * `handle()` or `handleAll()` method).
-         * Note: the `param` param will be present if the strategy was invoked
-         * from a workbox `Route` object and the
-         * {@link workbox-routing~matchCallback} returned
-         * a truthy value (it will be that value).
-         * @name params
-         * @instance
-         * @type {*|undefined}
-         * @memberof workbox-strategies.StrategyHandler
-         */
-        {
-          finalAssertExports.isInstance(options.event, ExtendableEvent, {
-            moduleName: 'workbox-strategies',
-            className: 'StrategyHandler',
-            funcName: 'constructor',
-            paramName: 'options.event'
-          });
-        }
-        Object.assign(this, options);
-        this.event = options.event;
-        this._strategy = strategy;
-        this._handlerDeferred = new Deferred();
-        this._extendLifetimePromises = [];
-        // Copy the plugins list (since it's mutable on the strategy),
-        // so any mutations don't affect this handler instance.
-        this._plugins = [...strategy.plugins];
-        this._pluginStateMap = new Map();
-        for (const plugin of this._plugins) {
-          this._pluginStateMap.set(plugin, {});
-        }
-        this.event.waitUntil(this._handlerDeferred.promise);
-      }
-      /**
-       * Fetches a given request (and invokes any applicable plugin callback
-       * methods) using the `fetchOptions` (for non-navigation requests) and
-       * `plugins` defined on the `Strategy` object.
-       *
-       * The following plugin lifecycle methods are invoked when using this method:
-       * - `requestWillFetch()`
-       * - `fetchDidSucceed()`
-       * - `fetchDidFail()`
-       *
-       * @param {Request|string} input The URL or request to fetch.
-       * @return {Promise<Response>}
-       */
-      async fetch(input) {
-        const {
-          event
-        } = this;
-        let request = toRequest(input);
-        if (request.mode === 'navigate' && event instanceof FetchEvent && event.preloadResponse) {
-          const possiblePreloadResponse = await event.preloadResponse;
-          if (possiblePreloadResponse) {
+          if (this._catchHandler) {
             {
-              logger.log(`Using a preloaded navigation response for ` + `'${getFriendlyURL(request.url)}'`);
+              // Still include URL here as it will be async from the console group
+              // and may not make sense without the URL
+              logger.groupCollapsed(
+                `Error thrown when responding to: ` + ` ${getFriendlyURL(url)}. Falling back to global Catch Handler.`
+              );
+              logger.error(`Error thrown by:`, route);
+              logger.error(err);
+              logger.groupEnd();
             }
-            return possiblePreloadResponse;
-          }
-        }
-        // If there is a fetchDidFail plugin, we need to save a clone of the
-        // original request before it's either modified by a requestWillFetch
-        // plugin or before the original request's body is consumed via fetch().
-        const originalRequest = this.hasCallback('fetchDidFail') ? request.clone() : null;
-        try {
-          for (const cb of this.iterateCallbacks('requestWillFetch')) {
-            request = await cb({
-              request: request.clone(),
-              event
-            });
-          }
-        } catch (err) {
-          if (err instanceof Error) {
-            throw new WorkboxError('plugin-error-request-will-fetch', {
-              thrownErrorMessage: err.message
-            });
-          }
-        }
-        // The request can be altered by plugins with `requestWillFetch` making
-        // the original request (most likely from a `fetch` event) different
-        // from the Request we make. Pass both to `fetchDidFail` to aid debugging.
-        const pluginFilteredRequest = request.clone();
-        try {
-          let fetchResponse;
-          // See https://github.com/GoogleChrome/workbox/issues/1796
-          fetchResponse = await fetch(request, request.mode === 'navigate' ? undefined : this._strategy.fetchOptions);
-          if ("development" !== 'production') {
-            logger.debug(`Network request for ` + `'${getFriendlyURL(request.url)}' returned a response with ` + `status '${fetchResponse.status}'.`);
-          }
-          for (const callback of this.iterateCallbacks('fetchDidSucceed')) {
-            fetchResponse = await callback({
+            return this._catchHandler.handle({
+              url,
+              request,
               event,
-              request: pluginFilteredRequest,
-              response: fetchResponse
             });
           }
-          return fetchResponse;
-        } catch (error) {
+          throw err;
+        });
+      }
+      return responsePromise;
+    }
+    /**
+     * Checks a request and URL (and optionally an event) against the list of
+     * registered routes, and if there's a match, returns the corresponding
+     * route along with any params generated by the match.
+     *
+     * @param {Object} options
+     * @param {URL} options.url
+     * @param {boolean} options.sameOrigin The result of comparing `url.origin`
+     *     against the current origin.
+     * @param {Request} options.request The request to match.
+     * @param {Event} options.event The corresponding event.
+     * @return {Object} An object with `route` and `params` properties.
+     *     They are populated if a matching route was found or `undefined`
+     *     otherwise.
+     */
+    findMatchingRoute({ url, sameOrigin, request, event }) {
+      const routes = this._routes.get(request.method) || [];
+      for (const route of routes) {
+        let params;
+        // route.match returns type any, not possible to change right now.
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        const matchResult = route.match({
+          url,
+          sameOrigin,
+          request,
+          event,
+        });
+        if (matchResult) {
           {
-            logger.log(`Network request for ` + `'${getFriendlyURL(request.url)}' threw an error.`, error);
+            // Warn developers that using an async matchCallback is almost always
+            // not the right thing to do.
+            if (matchResult instanceof Promise) {
+              logger.warn(
+                `While routing ${getFriendlyURL(url)}, an async ` +
+                  `matchCallback function was used. Please convert the ` +
+                  `following route to use a synchronous matchCallback function:`,
+                route
+              );
+            }
           }
-          // `originalRequest` will only exist if a `fetchDidFail` callback
-          // is being used (see above).
-          if (originalRequest) {
-            await this.runCallbacks('fetchDidFail', {
-              error: error,
-              event,
-              originalRequest: originalRequest.clone(),
-              request: pluginFilteredRequest.clone()
-            });
+          // See https://github.com/GoogleChrome/workbox/issues/2079
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          params = matchResult;
+          if (Array.isArray(params) && params.length === 0) {
+            // Instead of passing an empty array in as params, use undefined.
+            params = undefined;
+          } else if (
+            matchResult.constructor === Object &&
+            // eslint-disable-line
+            Object.keys(matchResult).length === 0
+          ) {
+            // Instead of passing an empty object in as params, use undefined.
+            params = undefined;
+          } else if (typeof matchResult === "boolean") {
+            // For the boolean value true (rather than just something truth-y),
+            // don't set params.
+            // See https://github.com/GoogleChrome/workbox/pull/2134#issuecomment-513924353
+            params = undefined;
           }
-          throw error;
+          // Return early if have a match.
+          return {
+            route,
+            params,
+          };
         }
       }
-      /**
-       * Calls `this.fetch()` and (in the background) runs `this.cachePut()` on
-       * the response generated by `this.fetch()`.
-       *
-       * The call to `this.cachePut()` automatically invokes `this.waitUntil()`,
-       * so you do not have to manually call `waitUntil()` on the event.
-       *
-       * @param {Request|string} input The request or URL to fetch and cache.
-       * @return {Promise<Response>}
-       */
-      async fetchAndCachePut(input) {
-        const response = await this.fetch(input);
-        const responseClone = response.clone();
-        void this.waitUntil(this.cachePut(input, responseClone));
+      // If no match was found above, return and empty object.
+      return {};
+    }
+    /**
+     * Define a default `handler` that's called when no routes explicitly
+     * match the incoming request.
+     *
+     * Each HTTP method ('GET', 'POST', etc.) gets its own default handler.
+     *
+     * Without a default handler, unmatched requests will go against the
+     * network as if there were no service worker present.
+     *
+     * @param {workbox-routing~handlerCallback} handler A callback
+     * function that returns a Promise resulting in a Response.
+     * @param {string} [method='GET'] The HTTP method to associate with this
+     * default handler. Each method has its own default.
+     */
+    setDefaultHandler(handler, method = defaultMethod) {
+      this._defaultHandlerMap.set(method, normalizeHandler(handler));
+    }
+    /**
+     * If a Route throws an error while handling a request, this `handler`
+     * will be called and given a chance to provide a response.
+     *
+     * @param {workbox-routing~handlerCallback} handler A callback
+     * function that returns a Promise resulting in a Response.
+     */
+    setCatchHandler(handler) {
+      this._catchHandler = normalizeHandler(handler);
+    }
+    /**
+     * Registers a route with the router.
+     *
+     * @param {workbox-routing.Route} route The route to register.
+     */
+    registerRoute(route) {
+      {
+        finalAssertExports.isType(route, "object", {
+          moduleName: "workbox-routing",
+          className: "Router",
+          funcName: "registerRoute",
+          paramName: "route",
+        });
+        finalAssertExports.hasMethod(route, "match", {
+          moduleName: "workbox-routing",
+          className: "Router",
+          funcName: "registerRoute",
+          paramName: "route",
+        });
+        finalAssertExports.isType(route.handler, "object", {
+          moduleName: "workbox-routing",
+          className: "Router",
+          funcName: "registerRoute",
+          paramName: "route",
+        });
+        finalAssertExports.hasMethod(route.handler, "handle", {
+          moduleName: "workbox-routing",
+          className: "Router",
+          funcName: "registerRoute",
+          paramName: "route.handler",
+        });
+        finalAssertExports.isType(route.method, "string", {
+          moduleName: "workbox-routing",
+          className: "Router",
+          funcName: "registerRoute",
+          paramName: "route.method",
+        });
+      }
+      if (!this._routes.has(route.method)) {
+        this._routes.set(route.method, []);
+      }
+      // Give precedence to all of the earlier routes by adding this additional
+      // route to the end of the array.
+      this._routes.get(route.method).push(route);
+    }
+    /**
+     * Unregisters a route with the router.
+     *
+     * @param {workbox-routing.Route} route The route to unregister.
+     */
+    unregisterRoute(route) {
+      if (!this._routes.has(route.method)) {
+        throw new WorkboxError("unregister-route-but-not-found-with-method", {
+          method: route.method,
+        });
+      }
+      const routeIndex = this._routes.get(route.method).indexOf(route);
+      if (routeIndex > -1) {
+        this._routes.get(route.method).splice(routeIndex, 1);
+      } else {
+        throw new WorkboxError("unregister-route-route-not-registered");
+      }
+    }
+  }
+
+  /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  let defaultRouter;
+  /**
+   * Creates a new, singleton Router instance if one does not exist. If one
+   * does already exist, that instance is returned.
+   *
+   * @private
+   * @return {Router}
+   */
+  const getOrCreateDefaultRouter = () => {
+    if (!defaultRouter) {
+      defaultRouter = new Router();
+      // The helpers that use the default Router assume these listeners exist.
+      defaultRouter.addFetchListener();
+      defaultRouter.addCacheListener();
+    }
+    return defaultRouter;
+  };
+
+  /*
+      Copyright 2019 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /**
+   * Easily register a RegExp, string, or function with a caching
+   * strategy to a singleton Router instance.
+   *
+   * This method will generate a Route for you if needed and
+   * call {@link workbox-routing.Router#registerRoute}.
+   *
+   * @param {RegExp|string|workbox-routing.Route~matchCallback|workbox-routing.Route} capture
+   * If the capture param is a `Route`, all other arguments will be ignored.
+   * @param {workbox-routing~handlerCallback} [handler] A callback
+   * function that returns a Promise resulting in a Response. This parameter
+   * is required if `capture` is not a `Route` object.
+   * @param {string} [method='GET'] The HTTP method to match the Route
+   * against.
+   * @return {workbox-routing.Route} The generated `Route`.
+   *
+   * @memberof workbox-routing
+   */
+  function registerRoute(capture, handler, method) {
+    let route;
+    if (typeof capture === "string") {
+      const captureUrl = new URL(capture, location.href);
+      {
+        if (!(capture.startsWith("/") || capture.startsWith("http"))) {
+          throw new WorkboxError("invalid-string", {
+            moduleName: "workbox-routing",
+            funcName: "registerRoute",
+            paramName: "capture",
+          });
+        }
+        // We want to check if Express-style wildcards are in the pathname only.
+        // TODO: Remove this log message in v4.
+        const valueToCheck = capture.startsWith("http") ? captureUrl.pathname : capture;
+        // See https://github.com/pillarjs/path-to-regexp#parameters
+        const wildcards = "[*:?+]";
+        if (new RegExp(`${wildcards}`).exec(valueToCheck)) {
+          logger.debug(
+            `The '$capture' parameter contains an Express-style wildcard ` +
+              `character (${wildcards}). Strings are now always interpreted as ` +
+              `exact matches; use a RegExp for partial or wildcard matches.`
+          );
+        }
+      }
+      const matchCallback = ({ url }) => {
+        {
+          if (url.pathname === captureUrl.pathname && url.origin !== captureUrl.origin) {
+            logger.debug(
+              `${capture} only partially matches the cross-origin URL ` +
+                `${url.toString()}. This route will only handle cross-origin requests ` +
+                `if they match the entire URL.`
+            );
+          }
+        }
+        return url.href === captureUrl.href;
+      };
+      // If `capture` is a string then `handler` and `method` must be present.
+      route = new Route(matchCallback, handler, method);
+    } else if (capture instanceof RegExp) {
+      // If `capture` is a `RegExp` then `handler` and `method` must be present.
+      route = new RegExpRoute(capture, handler, method);
+    } else if (typeof capture === "function") {
+      // If `capture` is a function then `handler` and `method` must be present.
+      route = new Route(capture, handler, method);
+    } else if (capture instanceof Route) {
+      route = capture;
+    } else {
+      throw new WorkboxError("unsupported-route-type", {
+        moduleName: "workbox-routing",
+        funcName: "registerRoute",
+        paramName: "capture",
+      });
+    }
+    const defaultRouter = getOrCreateDefaultRouter();
+    defaultRouter.registerRoute(route);
+    return route;
+  }
+
+  // @ts-ignore
+  try {
+    self["workbox:strategies:6.6.0"] && _();
+  } catch (e) {}
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  const cacheOkAndOpaquePlugin = {
+    /**
+     * Returns a valid response (to allow caching) if the status is 200 (OK) or
+     * 0 (opaque).
+     *
+     * @param {Object} options
+     * @param {Response} options.response
+     * @return {Response|null}
+     *
+     * @private
+     */
+    cacheWillUpdate: async ({ response }) => {
+      if (response.status === 200 || response.status === 0) {
         return response;
       }
-      /**
-       * Matches a request from the cache (and invokes any applicable plugin
-       * callback methods) using the `cacheName`, `matchOptions`, and `plugins`
-       * defined on the strategy object.
-       *
-       * The following plugin lifecycle methods are invoked when using this method:
-       * - cacheKeyWillByUsed()
-       * - cachedResponseWillByUsed()
-       *
-       * @param {Request|string} key The Request or URL to use as the cache key.
-       * @return {Promise<Response|undefined>} A matching response, if found.
-       */
-      async cacheMatch(key) {
-        const request = toRequest(key);
-        let cachedResponse;
-        const {
-          cacheName,
-          matchOptions
-        } = this._strategy;
-        const effectiveRequest = await this.getCacheKey(request, 'read');
-        const multiMatchOptions = Object.assign(Object.assign({}, matchOptions), {
-          cacheName
-        });
-        cachedResponse = await caches.match(effectiveRequest, multiMatchOptions);
-        {
-          if (cachedResponse) {
-            logger.debug(`Found a cached response in '${cacheName}'.`);
-          } else {
-            logger.debug(`No cached response found in '${cacheName}'.`);
-          }
+      return null;
+    },
+  };
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  const _cacheNameDetails = {
+    googleAnalytics: "googleAnalytics",
+    precache: "precache-v2",
+    prefix: "workbox",
+    runtime: "runtime",
+    suffix: typeof registration !== "undefined" ? registration.scope : "",
+  };
+  const _createCacheName = (cacheName) => {
+    return [_cacheNameDetails.prefix, cacheName, _cacheNameDetails.suffix]
+      .filter((value) => value && value.length > 0)
+      .join("-");
+  };
+  const eachCacheNameDetail = (fn) => {
+    for (const key of Object.keys(_cacheNameDetails)) {
+      fn(key);
+    }
+  };
+  const cacheNames = {
+    updateDetails: (details) => {
+      eachCacheNameDetail((key) => {
+        if (typeof details[key] === "string") {
+          _cacheNameDetails[key] = details[key];
         }
-        for (const callback of this.iterateCallbacks('cachedResponseWillBeUsed')) {
-          cachedResponse = (await callback({
+      });
+    },
+    getGoogleAnalyticsName: (userCacheName) => {
+      return userCacheName || _createCacheName(_cacheNameDetails.googleAnalytics);
+    },
+    getPrecacheName: (userCacheName) => {
+      return userCacheName || _createCacheName(_cacheNameDetails.precache);
+    },
+    getPrefix: () => {
+      return _cacheNameDetails.prefix;
+    },
+    getRuntimeName: (userCacheName) => {
+      return userCacheName || _createCacheName(_cacheNameDetails.runtime);
+    },
+    getSuffix: () => {
+      return _cacheNameDetails.suffix;
+    },
+  };
+
+  /*
+      Copyright 2020 Google LLC
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  function stripParams(fullURL, ignoreParams) {
+    const strippedURL = new URL(fullURL);
+    for (const param of ignoreParams) {
+      strippedURL.searchParams.delete(param);
+    }
+    return strippedURL.href;
+  }
+  /**
+   * Matches an item in the cache, ignoring specific URL params. This is similar
+   * to the `ignoreSearch` option, but it allows you to ignore just specific
+   * params (while continuing to match on the others).
+   *
+   * @private
+   * @param {Cache} cache
+   * @param {Request} request
+   * @param {Object} matchOptions
+   * @param {Array<string>} ignoreParams
+   * @return {Promise<Response|undefined>}
+   */
+  async function cacheMatchIgnoreParams(cache, request, ignoreParams, matchOptions) {
+    const strippedRequestURL = stripParams(request.url, ignoreParams);
+    // If the request doesn't include any ignored params, match as normal.
+    if (request.url === strippedRequestURL) {
+      return cache.match(request, matchOptions);
+    }
+    // Otherwise, match by comparing keys
+    const keysOptions = Object.assign(Object.assign({}, matchOptions), {
+      ignoreSearch: true,
+    });
+    const cacheKeys = await cache.keys(request, keysOptions);
+    for (const cacheKey of cacheKeys) {
+      const strippedCacheKeyURL = stripParams(cacheKey.url, ignoreParams);
+      if (strippedRequestURL === strippedCacheKeyURL) {
+        return cache.match(cacheKey, matchOptions);
+      }
+    }
+    return;
+  }
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /**
+   * The Deferred class composes Promises in a way that allows for them to be
+   * resolved or rejected from outside the constructor. In most cases promises
+   * should be used directly, but Deferreds can be necessary when the logic to
+   * resolve a promise must be separate.
+   *
+   * @private
+   */
+  class Deferred {
+    /**
+     * Creates a promise and exposes its resolve and reject functions as methods.
+     */
+    constructor() {
+      this.promise = new Promise((resolve, reject) => {
+        this.resolve = resolve;
+        this.reject = reject;
+      });
+    }
+  }
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  // Callbacks to be executed whenever there's a quota error.
+  // Can't change Function type right now.
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  const quotaErrorCallbacks = new Set();
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /**
+   * Runs all of the callback functions, one at a time sequentially, in the order
+   * in which they were registered.
+   *
+   * @memberof workbox-core
+   * @private
+   */
+  async function executeQuotaErrorCallbacks() {
+    {
+      logger.log(`About to run ${quotaErrorCallbacks.size} ` + `callbacks to clean up caches.`);
+    }
+    for (const callback of quotaErrorCallbacks) {
+      await callback();
+      {
+        logger.log(callback, "is complete.");
+      }
+    }
+    {
+      logger.log("Finished running callbacks.");
+    }
+  }
+
+  /*
+      Copyright 2019 Google LLC
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /**
+   * Returns a promise that resolves and the passed number of milliseconds.
+   * This utility is an async/await-friendly version of `setTimeout`.
+   *
+   * @param {number} ms
+   * @return {Promise}
+   * @private
+   */
+  function timeout(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  /*
+      Copyright 2020 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  function toRequest(input) {
+    return typeof input === "string" ? new Request(input) : input;
+  }
+  /**
+   * A class created every time a Strategy instance instance calls
+   * {@link workbox-strategies.Strategy~handle} or
+   * {@link workbox-strategies.Strategy~handleAll} that wraps all fetch and
+   * cache actions around plugin callbacks and keeps track of when the strategy
+   * is "done" (i.e. all added `event.waitUntil()` promises have resolved).
+   *
+   * @memberof workbox-strategies
+   */
+  class StrategyHandler {
+    /**
+     * Creates a new instance associated with the passed strategy and event
+     * that's handling the request.
+     *
+     * The constructor also initializes the state that will be passed to each of
+     * the plugins handling this request.
+     *
+     * @param {workbox-strategies.Strategy} strategy
+     * @param {Object} options
+     * @param {Request|string} options.request A request to run this strategy for.
+     * @param {ExtendableEvent} options.event The event associated with the
+     *     request.
+     * @param {URL} [options.url]
+     * @param {*} [options.params] The return value from the
+     *     {@link workbox-routing~matchCallback} (if applicable).
+     */
+    constructor(strategy, options) {
+      this._cacheKeys = {};
+      /**
+       * The request the strategy is performing (passed to the strategy's
+       * `handle()` or `handleAll()` method).
+       * @name request
+       * @instance
+       * @type {Request}
+       * @memberof workbox-strategies.StrategyHandler
+       */
+      /**
+       * The event associated with this request.
+       * @name event
+       * @instance
+       * @type {ExtendableEvent}
+       * @memberof workbox-strategies.StrategyHandler
+       */
+      /**
+       * A `URL` instance of `request.url` (if passed to the strategy's
+       * `handle()` or `handleAll()` method).
+       * Note: the `url` param will be present if the strategy was invoked
+       * from a workbox `Route` object.
+       * @name url
+       * @instance
+       * @type {URL|undefined}
+       * @memberof workbox-strategies.StrategyHandler
+       */
+      /**
+       * A `param` value (if passed to the strategy's
+       * `handle()` or `handleAll()` method).
+       * Note: the `param` param will be present if the strategy was invoked
+       * from a workbox `Route` object and the
+       * {@link workbox-routing~matchCallback} returned
+       * a truthy value (it will be that value).
+       * @name params
+       * @instance
+       * @type {*|undefined}
+       * @memberof workbox-strategies.StrategyHandler
+       */
+      {
+        finalAssertExports.isInstance(options.event, ExtendableEvent, {
+          moduleName: "workbox-strategies",
+          className: "StrategyHandler",
+          funcName: "constructor",
+          paramName: "options.event",
+        });
+      }
+      Object.assign(this, options);
+      this.event = options.event;
+      this._strategy = strategy;
+      this._handlerDeferred = new Deferred();
+      this._extendLifetimePromises = [];
+      // Copy the plugins list (since it's mutable on the strategy),
+      // so any mutations don't affect this handler instance.
+      this._plugins = [...strategy.plugins];
+      this._pluginStateMap = new Map();
+      for (const plugin of this._plugins) {
+        this._pluginStateMap.set(plugin, {});
+      }
+      this.event.waitUntil(this._handlerDeferred.promise);
+    }
+    /**
+     * Fetches a given request (and invokes any applicable plugin callback
+     * methods) using the `fetchOptions` (for non-navigation requests) and
+     * `plugins` defined on the `Strategy` object.
+     *
+     * The following plugin lifecycle methods are invoked when using this method:
+     * - `requestWillFetch()`
+     * - `fetchDidSucceed()`
+     * - `fetchDidFail()`
+     *
+     * @param {Request|string} input The URL or request to fetch.
+     * @return {Promise<Response>}
+     */
+    async fetch(input) {
+      const { event } = this;
+      let request = toRequest(input);
+      if (request.mode === "navigate" && event instanceof FetchEvent && event.preloadResponse) {
+        const possiblePreloadResponse = await event.preloadResponse;
+        if (possiblePreloadResponse) {
+          {
+            logger.log(`Using a preloaded navigation response for ` + `'${getFriendlyURL(request.url)}'`);
+          }
+          return possiblePreloadResponse;
+        }
+      }
+      // If there is a fetchDidFail plugin, we need to save a clone of the
+      // original request before it's either modified by a requestWillFetch
+      // plugin or before the original request's body is consumed via fetch().
+      const originalRequest = this.hasCallback("fetchDidFail") ? request.clone() : null;
+      try {
+        for (const cb of this.iterateCallbacks("requestWillFetch")) {
+          request = await cb({
+            request: request.clone(),
+            event,
+          });
+        }
+      } catch (err) {
+        if (err instanceof Error) {
+          throw new WorkboxError("plugin-error-request-will-fetch", {
+            thrownErrorMessage: err.message,
+          });
+        }
+      }
+      // The request can be altered by plugins with `requestWillFetch` making
+      // the original request (most likely from a `fetch` event) different
+      // from the Request we make. Pass both to `fetchDidFail` to aid debugging.
+      const pluginFilteredRequest = request.clone();
+      try {
+        let fetchResponse;
+        // See https://github.com/GoogleChrome/workbox/issues/1796
+        fetchResponse = await fetch(request, request.mode === "navigate" ? undefined : this._strategy.fetchOptions);
+        if ("development" !== "production") {
+          logger.debug(
+            `Network request for ` +
+              `'${getFriendlyURL(request.url)}' returned a response with ` +
+              `status '${fetchResponse.status}'.`
+          );
+        }
+        for (const callback of this.iterateCallbacks("fetchDidSucceed")) {
+          fetchResponse = await callback({
+            event,
+            request: pluginFilteredRequest,
+            response: fetchResponse,
+          });
+        }
+        return fetchResponse;
+      } catch (error) {
+        {
+          logger.log(`Network request for ` + `'${getFriendlyURL(request.url)}' threw an error.`, error);
+        }
+        // `originalRequest` will only exist if a `fetchDidFail` callback
+        // is being used (see above).
+        if (originalRequest) {
+          await this.runCallbacks("fetchDidFail", {
+            error: error,
+            event,
+            originalRequest: originalRequest.clone(),
+            request: pluginFilteredRequest.clone(),
+          });
+        }
+        throw error;
+      }
+    }
+    /**
+     * Calls `this.fetch()` and (in the background) runs `this.cachePut()` on
+     * the response generated by `this.fetch()`.
+     *
+     * The call to `this.cachePut()` automatically invokes `this.waitUntil()`,
+     * so you do not have to manually call `waitUntil()` on the event.
+     *
+     * @param {Request|string} input The request or URL to fetch and cache.
+     * @return {Promise<Response>}
+     */
+    async fetchAndCachePut(input) {
+      const response = await this.fetch(input);
+      const responseClone = response.clone();
+      void this.waitUntil(this.cachePut(input, responseClone));
+      return response;
+    }
+    /**
+     * Matches a request from the cache (and invokes any applicable plugin
+     * callback methods) using the `cacheName`, `matchOptions`, and `plugins`
+     * defined on the strategy object.
+     *
+     * The following plugin lifecycle methods are invoked when using this method:
+     * - cacheKeyWillByUsed()
+     * - cachedResponseWillByUsed()
+     *
+     * @param {Request|string} key The Request or URL to use as the cache key.
+     * @return {Promise<Response|undefined>} A matching response, if found.
+     */
+    async cacheMatch(key) {
+      const request = toRequest(key);
+      let cachedResponse;
+      const { cacheName, matchOptions } = this._strategy;
+      const effectiveRequest = await this.getCacheKey(request, "read");
+      const multiMatchOptions = Object.assign(Object.assign({}, matchOptions), {
+        cacheName,
+      });
+      cachedResponse = await caches.match(effectiveRequest, multiMatchOptions);
+      {
+        if (cachedResponse) {
+          logger.debug(`Found a cached response in '${cacheName}'.`);
+        } else {
+          logger.debug(`No cached response found in '${cacheName}'.`);
+        }
+      }
+      for (const callback of this.iterateCallbacks("cachedResponseWillBeUsed")) {
+        cachedResponse =
+          (await callback({
             cacheName,
             matchOptions,
             cachedResponse,
             request: effectiveRequest,
-            event: this.event
+            event: this.event,
           })) || undefined;
-        }
-        return cachedResponse;
       }
-      /**
-       * Puts a request/response pair in the cache (and invokes any applicable
-       * plugin callback methods) using the `cacheName` and `plugins` defined on
-       * the strategy object.
-       *
-       * The following plugin lifecycle methods are invoked when using this method:
-       * - cacheKeyWillByUsed()
-       * - cacheWillUpdate()
-       * - cacheDidUpdate()
-       *
-       * @param {Request|string} key The request or URL to use as the cache key.
-       * @param {Response} response The response to cache.
-       * @return {Promise<boolean>} `false` if a cacheWillUpdate caused the response
-       * not be cached, and `true` otherwise.
-       */
-      async cachePut(key, response) {
-        const request = toRequest(key);
-        // Run in the next task to avoid blocking other cache reads.
-        // https://github.com/w3c/ServiceWorker/issues/1397
-        await timeout(0);
-        const effectiveRequest = await this.getCacheKey(request, 'write');
-        {
-          if (effectiveRequest.method && effectiveRequest.method !== 'GET') {
-            throw new WorkboxError('attempt-to-cache-non-get-request', {
-              url: getFriendlyURL(effectiveRequest.url),
-              method: effectiveRequest.method
-            });
-          }
-          // See https://github.com/GoogleChrome/workbox/issues/2818
-          const vary = response.headers.get('Vary');
-          if (vary) {
-            logger.debug(`The response for ${getFriendlyURL(effectiveRequest.url)} ` + `has a 'Vary: ${vary}' header. ` + `Consider setting the {ignoreVary: true} option on your strategy ` + `to ensure cache matching and deletion works as expected.`);
-          }
-        }
-        if (!response) {
-          {
-            logger.error(`Cannot cache non-existent response for ` + `'${getFriendlyURL(effectiveRequest.url)}'.`);
-          }
-          throw new WorkboxError('cache-put-with-no-response', {
-            url: getFriendlyURL(effectiveRequest.url)
+      return cachedResponse;
+    }
+    /**
+     * Puts a request/response pair in the cache (and invokes any applicable
+     * plugin callback methods) using the `cacheName` and `plugins` defined on
+     * the strategy object.
+     *
+     * The following plugin lifecycle methods are invoked when using this method:
+     * - cacheKeyWillByUsed()
+     * - cacheWillUpdate()
+     * - cacheDidUpdate()
+     *
+     * @param {Request|string} key The request or URL to use as the cache key.
+     * @param {Response} response The response to cache.
+     * @return {Promise<boolean>} `false` if a cacheWillUpdate caused the response
+     * not be cached, and `true` otherwise.
+     */
+    async cachePut(key, response) {
+      const request = toRequest(key);
+      // Run in the next task to avoid blocking other cache reads.
+      // https://github.com/w3c/ServiceWorker/issues/1397
+      await timeout(0);
+      const effectiveRequest = await this.getCacheKey(request, "write");
+      {
+        if (effectiveRequest.method && effectiveRequest.method !== "GET") {
+          throw new WorkboxError("attempt-to-cache-non-get-request", {
+            url: getFriendlyURL(effectiveRequest.url),
+            method: effectiveRequest.method,
           });
         }
-        const responseToCache = await this._ensureResponseSafeToCache(response);
-        if (!responseToCache) {
-          {
-            logger.debug(`Response '${getFriendlyURL(effectiveRequest.url)}' ` + `will not be cached.`, responseToCache);
-          }
-          return false;
+        // See https://github.com/GoogleChrome/workbox/issues/2818
+        const vary = response.headers.get("Vary");
+        if (vary) {
+          logger.debug(
+            `The response for ${getFriendlyURL(effectiveRequest.url)} ` +
+              `has a 'Vary: ${vary}' header. ` +
+              `Consider setting the {ignoreVary: true} option on your strategy ` +
+              `to ensure cache matching and deletion works as expected.`
+          );
         }
-        const {
+      }
+      if (!response) {
+        {
+          logger.error(`Cannot cache non-existent response for ` + `'${getFriendlyURL(effectiveRequest.url)}'.`);
+        }
+        throw new WorkboxError("cache-put-with-no-response", {
+          url: getFriendlyURL(effectiveRequest.url),
+        });
+      }
+      const responseToCache = await this._ensureResponseSafeToCache(response);
+      if (!responseToCache) {
+        {
+          logger.debug(`Response '${getFriendlyURL(effectiveRequest.url)}' ` + `will not be cached.`, responseToCache);
+        }
+        return false;
+      }
+      const { cacheName, matchOptions } = this._strategy;
+      const cache = await self.caches.open(cacheName);
+      const hasCacheUpdateCallback = this.hasCallback("cacheDidUpdate");
+      const oldResponse = hasCacheUpdateCallback
+        ? await cacheMatchIgnoreParams(
+            // TODO(philipwalton): the `__WB_REVISION__` param is a precaching
+            // feature. Consider into ways to only add this behavior if using
+            // precaching.
+            cache,
+            effectiveRequest.clone(),
+            ["__WB_REVISION__"],
+            matchOptions
+          )
+        : null;
+      {
+        logger.debug(
+          `Updating the '${cacheName}' cache with a new Response ` + `for ${getFriendlyURL(effectiveRequest.url)}.`
+        );
+      }
+      try {
+        await cache.put(effectiveRequest, hasCacheUpdateCallback ? responseToCache.clone() : responseToCache);
+      } catch (error) {
+        if (error instanceof Error) {
+          // See https://developer.mozilla.org/en-US/docs/Web/API/DOMException#exception-QuotaExceededError
+          if (error.name === "QuotaExceededError") {
+            await executeQuotaErrorCallbacks();
+          }
+          throw error;
+        }
+      }
+      for (const callback of this.iterateCallbacks("cacheDidUpdate")) {
+        await callback({
           cacheName,
-          matchOptions
-        } = this._strategy;
-        const cache = await self.caches.open(cacheName);
-        const hasCacheUpdateCallback = this.hasCallback('cacheDidUpdate');
-        const oldResponse = hasCacheUpdateCallback ? await cacheMatchIgnoreParams(
-        // TODO(philipwalton): the `__WB_REVISION__` param is a precaching
-        // feature. Consider into ways to only add this behavior if using
-        // precaching.
-        cache, effectiveRequest.clone(), ['__WB_REVISION__'], matchOptions) : null;
-        {
-          logger.debug(`Updating the '${cacheName}' cache with a new Response ` + `for ${getFriendlyURL(effectiveRequest.url)}.`);
-        }
-        try {
-          await cache.put(effectiveRequest, hasCacheUpdateCallback ? responseToCache.clone() : responseToCache);
-        } catch (error) {
-          if (error instanceof Error) {
-            // See https://developer.mozilla.org/en-US/docs/Web/API/DOMException#exception-QuotaExceededError
-            if (error.name === 'QuotaExceededError') {
-              await executeQuotaErrorCallbacks();
-            }
-            throw error;
-          }
-        }
-        for (const callback of this.iterateCallbacks('cacheDidUpdate')) {
-          await callback({
-            cacheName,
-            oldResponse,
-            newResponse: responseToCache.clone(),
-            request: effectiveRequest,
-            event: this.event
-          });
-        }
-        return true;
+          oldResponse,
+          newResponse: responseToCache.clone(),
+          request: effectiveRequest,
+          event: this.event,
+        });
       }
-      /**
-       * Checks the list of plugins for the `cacheKeyWillBeUsed` callback, and
-       * executes any of those callbacks found in sequence. The final `Request`
-       * object returned by the last plugin is treated as the cache key for cache
-       * reads and/or writes. If no `cacheKeyWillBeUsed` plugin callbacks have
-       * been registered, the passed request is returned unmodified
-       *
-       * @param {Request} request
-       * @param {string} mode
-       * @return {Promise<Request>}
-       */
-      async getCacheKey(request, mode) {
-        const key = `${request.url} | ${mode}`;
-        if (!this._cacheKeys[key]) {
-          let effectiveRequest = request;
-          for (const callback of this.iterateCallbacks('cacheKeyWillBeUsed')) {
-            effectiveRequest = toRequest(await callback({
+      return true;
+    }
+    /**
+     * Checks the list of plugins for the `cacheKeyWillBeUsed` callback, and
+     * executes any of those callbacks found in sequence. The final `Request`
+     * object returned by the last plugin is treated as the cache key for cache
+     * reads and/or writes. If no `cacheKeyWillBeUsed` plugin callbacks have
+     * been registered, the passed request is returned unmodified
+     *
+     * @param {Request} request
+     * @param {string} mode
+     * @return {Promise<Request>}
+     */
+    async getCacheKey(request, mode) {
+      const key = `${request.url} | ${mode}`;
+      if (!this._cacheKeys[key]) {
+        let effectiveRequest = request;
+        for (const callback of this.iterateCallbacks("cacheKeyWillBeUsed")) {
+          effectiveRequest = toRequest(
+            await callback({
               mode,
               request: effectiveRequest,
               event: this.event,
               // params has a type any can't change right now.
-              params: this.params // eslint-disable-line
-            }));
-          }
-          this._cacheKeys[key] = effectiveRequest;
+              params: this.params, // eslint-disable-line
+            })
+          );
         }
-        return this._cacheKeys[key];
+        this._cacheKeys[key] = effectiveRequest;
       }
-      /**
-       * Returns true if the strategy has at least one plugin with the given
-       * callback.
-       *
-       * @param {string} name The name of the callback to check for.
-       * @return {boolean}
-       */
-      hasCallback(name) {
-        for (const plugin of this._strategy.plugins) {
-          if (name in plugin) {
-            return true;
-          }
-        }
-        return false;
-      }
-      /**
-       * Runs all plugin callbacks matching the given name, in order, passing the
-       * given param object (merged ith the current plugin state) as the only
-       * argument.
-       *
-       * Note: since this method runs all plugins, it's not suitable for cases
-       * where the return value of a callback needs to be applied prior to calling
-       * the next callback. See
-       * {@link workbox-strategies.StrategyHandler#iterateCallbacks}
-       * below for how to handle that case.
-       *
-       * @param {string} name The name of the callback to run within each plugin.
-       * @param {Object} param The object to pass as the first (and only) param
-       *     when executing each callback. This object will be merged with the
-       *     current plugin state prior to callback execution.
-       */
-      async runCallbacks(name, param) {
-        for (const callback of this.iterateCallbacks(name)) {
-          // TODO(philipwalton): not sure why `any` is needed. It seems like
-          // this should work with `as WorkboxPluginCallbackParam[C]`.
-          await callback(param);
+      return this._cacheKeys[key];
+    }
+    /**
+     * Returns true if the strategy has at least one plugin with the given
+     * callback.
+     *
+     * @param {string} name The name of the callback to check for.
+     * @return {boolean}
+     */
+    hasCallback(name) {
+      for (const plugin of this._strategy.plugins) {
+        if (name in plugin) {
+          return true;
         }
       }
-      /**
-       * Accepts a callback and returns an iterable of matching plugin callbacks,
-       * where each callback is wrapped with the current handler state (i.e. when
-       * you call each callback, whatever object parameter you pass it will
-       * be merged with the plugin's current state).
-       *
-       * @param {string} name The name fo the callback to run
-       * @return {Array<Function>}
-       */
-      *iterateCallbacks(name) {
-        for (const plugin of this._strategy.plugins) {
-          if (typeof plugin[name] === 'function') {
-            const state = this._pluginStateMap.get(plugin);
-            const statefulCallback = param => {
-              const statefulParam = Object.assign(Object.assign({}, param), {
-                state
-              });
-              // TODO(philipwalton): not sure why `any` is needed. It seems like
-              // this should work with `as WorkboxPluginCallbackParam[C]`.
-              return plugin[name](statefulParam);
-            };
-            yield statefulCallback;
-          }
+      return false;
+    }
+    /**
+     * Runs all plugin callbacks matching the given name, in order, passing the
+     * given param object (merged ith the current plugin state) as the only
+     * argument.
+     *
+     * Note: since this method runs all plugins, it's not suitable for cases
+     * where the return value of a callback needs to be applied prior to calling
+     * the next callback. See
+     * {@link workbox-strategies.StrategyHandler#iterateCallbacks}
+     * below for how to handle that case.
+     *
+     * @param {string} name The name of the callback to run within each plugin.
+     * @param {Object} param The object to pass as the first (and only) param
+     *     when executing each callback. This object will be merged with the
+     *     current plugin state prior to callback execution.
+     */
+    async runCallbacks(name, param) {
+      for (const callback of this.iterateCallbacks(name)) {
+        // TODO(philipwalton): not sure why `any` is needed. It seems like
+        // this should work with `as WorkboxPluginCallbackParam[C]`.
+        await callback(param);
+      }
+    }
+    /**
+     * Accepts a callback and returns an iterable of matching plugin callbacks,
+     * where each callback is wrapped with the current handler state (i.e. when
+     * you call each callback, whatever object parameter you pass it will
+     * be merged with the plugin's current state).
+     *
+     * @param {string} name The name fo the callback to run
+     * @return {Array<Function>}
+     */
+    *iterateCallbacks(name) {
+      for (const plugin of this._strategy.plugins) {
+        if (typeof plugin[name] === "function") {
+          const state = this._pluginStateMap.get(plugin);
+          const statefulCallback = (param) => {
+            const statefulParam = Object.assign(Object.assign({}, param), {
+              state,
+            });
+            // TODO(philipwalton): not sure why `any` is needed. It seems like
+            // this should work with `as WorkboxPluginCallbackParam[C]`.
+            return plugin[name](statefulParam);
+          };
+          yield statefulCallback;
         }
       }
-      /**
-       * Adds a promise to the
-       * [extend lifetime promises]{@link https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises}
-       * of the event event associated with the request being handled (usually a
-       * `FetchEvent`).
-       *
-       * Note: you can await
-       * {@link workbox-strategies.StrategyHandler~doneWaiting}
-       * to know when all added promises have settled.
-       *
-       * @param {Promise} promise A promise to add to the extend lifetime promises
-       *     of the event that triggered the request.
-       */
-      waitUntil(promise) {
-        this._extendLifetimePromises.push(promise);
-        return promise;
+    }
+    /**
+     * Adds a promise to the
+     * [extend lifetime promises]{@link https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises}
+     * of the event event associated with the request being handled (usually a
+     * `FetchEvent`).
+     *
+     * Note: you can await
+     * {@link workbox-strategies.StrategyHandler~doneWaiting}
+     * to know when all added promises have settled.
+     *
+     * @param {Promise} promise A promise to add to the extend lifetime promises
+     *     of the event that triggered the request.
+     */
+    waitUntil(promise) {
+      this._extendLifetimePromises.push(promise);
+      return promise;
+    }
+    /**
+     * Returns a promise that resolves once all promises passed to
+     * {@link workbox-strategies.StrategyHandler~waitUntil}
+     * have settled.
+     *
+     * Note: any work done after `doneWaiting()` settles should be manually
+     * passed to an event's `waitUntil()` method (not this handler's
+     * `waitUntil()` method), otherwise the service worker thread my be killed
+     * prior to your work completing.
+     */
+    async doneWaiting() {
+      let promise;
+      while ((promise = this._extendLifetimePromises.shift())) {
+        await promise;
       }
-      /**
-       * Returns a promise that resolves once all promises passed to
-       * {@link workbox-strategies.StrategyHandler~waitUntil}
-       * have settled.
-       *
-       * Note: any work done after `doneWaiting()` settles should be manually
-       * passed to an event's `waitUntil()` method (not this handler's
-       * `waitUntil()` method), otherwise the service worker thread my be killed
-       * prior to your work completing.
-       */
-      async doneWaiting() {
-        let promise;
-        while (promise = this._extendLifetimePromises.shift()) {
-          await promise;
-        }
-      }
-      /**
-       * Stops running the strategy and immediately resolves any pending
-       * `waitUntil()` promises.
-       */
-      destroy() {
-        this._handlerDeferred.resolve(null);
-      }
-      /**
-       * This method will call cacheWillUpdate on the available plugins (or use
-       * status === 200) to determine if the Response is safe and valid to cache.
-       *
-       * @param {Request} options.request
-       * @param {Response} options.response
-       * @return {Promise<Response|undefined>}
-       *
-       * @private
-       */
-      async _ensureResponseSafeToCache(response) {
-        let responseToCache = response;
-        let pluginsUsed = false;
-        for (const callback of this.iterateCallbacks('cacheWillUpdate')) {
-          responseToCache = (await callback({
+    }
+    /**
+     * Stops running the strategy and immediately resolves any pending
+     * `waitUntil()` promises.
+     */
+    destroy() {
+      this._handlerDeferred.resolve(null);
+    }
+    /**
+     * This method will call cacheWillUpdate on the available plugins (or use
+     * status === 200) to determine if the Response is safe and valid to cache.
+     *
+     * @param {Request} options.request
+     * @param {Response} options.response
+     * @return {Promise<Response|undefined>}
+     *
+     * @private
+     */
+    async _ensureResponseSafeToCache(response) {
+      let responseToCache = response;
+      let pluginsUsed = false;
+      for (const callback of this.iterateCallbacks("cacheWillUpdate")) {
+        responseToCache =
+          (await callback({
             request: this.request,
             response: responseToCache,
-            event: this.event
+            event: this.event,
           })) || undefined;
-          pluginsUsed = true;
-          if (!responseToCache) {
-            break;
-          }
+        pluginsUsed = true;
+        if (!responseToCache) {
+          break;
         }
-        if (!pluginsUsed) {
-          if (responseToCache && responseToCache.status !== 200) {
-            responseToCache = undefined;
-          }
-          {
-            if (responseToCache) {
-              if (responseToCache.status !== 200) {
-                if (responseToCache.status === 0) {
-                  logger.warn(`The response for '${this.request.url}' ` + `is an opaque response. The caching strategy that you're ` + `using will not cache opaque responses by default.`);
-                } else {
-                  logger.debug(`The response for '${this.request.url}' ` + `returned a status code of '${response.status}' and won't ` + `be cached as a result.`);
-                }
+      }
+      if (!pluginsUsed) {
+        if (responseToCache && responseToCache.status !== 200) {
+          responseToCache = undefined;
+        }
+        {
+          if (responseToCache) {
+            if (responseToCache.status !== 200) {
+              if (responseToCache.status === 0) {
+                logger.warn(
+                  `The response for '${this.request.url}' ` +
+                    `is an opaque response. The caching strategy that you're ` +
+                    `using will not cache opaque responses by default.`
+                );
+              } else {
+                logger.debug(
+                  `The response for '${this.request.url}' ` +
+                    `returned a status code of '${response.status}' and won't ` +
+                    `be cached as a result.`
+                );
               }
             }
           }
         }
-        return responseToCache;
       }
+      return responseToCache;
     }
+  }
 
-    /*
+  /*
       Copyright 2020 Google LLC
 
       Use of this source code is governed by an MIT-style
       license that can be found in the LICENSE file or at
       https://opensource.org/licenses/MIT.
     */
+  /**
+   * An abstract base class that all other strategy classes must extend from:
+   *
+   * @memberof workbox-strategies
+   */
+  class Strategy {
     /**
-     * An abstract base class that all other strategy classes must extend from:
+     * Creates a new instance of the strategy and sets all documented option
+     * properties as public instance properties.
      *
-     * @memberof workbox-strategies
+     * Note: if a custom strategy class extends the base Strategy class and does
+     * not need more than these properties, it does not need to define its own
+     * constructor.
+     *
+     * @param {Object} [options]
+     * @param {string} [options.cacheName] Cache name to store and retrieve
+     * requests. Defaults to the cache names provided by
+     * {@link workbox-core.cacheNames}.
+     * @param {Array<Object>} [options.plugins] [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}
+     * to use in conjunction with this caching strategy.
+     * @param {Object} [options.fetchOptions] Values passed along to the
+     * [`init`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters)
+     * of [non-navigation](https://github.com/GoogleChrome/workbox/issues/1796)
+     * `fetch()` requests made by this strategy.
+     * @param {Object} [options.matchOptions] The
+     * [`CacheQueryOptions`]{@link https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions}
+     * for any `cache.match()` or `cache.put()` calls made by this strategy.
      */
-    class Strategy {
+    constructor(options = {}) {
       /**
-       * Creates a new instance of the strategy and sets all documented option
-       * properties as public instance properties.
-       *
-       * Note: if a custom strategy class extends the base Strategy class and does
-       * not need more than these properties, it does not need to define its own
-       * constructor.
-       *
-       * @param {Object} [options]
-       * @param {string} [options.cacheName] Cache name to store and retrieve
+       * Cache name to store and retrieve
        * requests. Defaults to the cache names provided by
        * {@link workbox-core.cacheNames}.
-       * @param {Array<Object>} [options.plugins] [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}
-       * to use in conjunction with this caching strategy.
-       * @param {Object} [options.fetchOptions] Values passed along to the
-       * [`init`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters)
-       * of [non-navigation](https://github.com/GoogleChrome/workbox/issues/1796)
-       * `fetch()` requests made by this strategy.
-       * @param {Object} [options.matchOptions] The
+       *
+       * @type {string}
+       */
+      this.cacheName = cacheNames.getRuntimeName(options.cacheName);
+      /**
+       * The list
+       * [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}
+       * used by this strategy.
+       *
+       * @type {Array<Object>}
+       */
+      this.plugins = options.plugins || [];
+      /**
+       * Values passed along to the
+       * [`init`]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters}
+       * of all fetch() requests made by this strategy.
+       *
+       * @type {Object}
+       */
+      this.fetchOptions = options.fetchOptions;
+      /**
+       * The
        * [`CacheQueryOptions`]{@link https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions}
        * for any `cache.match()` or `cache.put()` calls made by this strategy.
+       *
+       * @type {Object}
        */
-      constructor(options = {}) {
-        /**
-         * Cache name to store and retrieve
-         * requests. Defaults to the cache names provided by
-         * {@link workbox-core.cacheNames}.
-         *
-         * @type {string}
-         */
-        this.cacheName = cacheNames.getRuntimeName(options.cacheName);
-        /**
-         * The list
-         * [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}
-         * used by this strategy.
-         *
-         * @type {Array<Object>}
-         */
-        this.plugins = options.plugins || [];
-        /**
-         * Values passed along to the
-         * [`init`]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters}
-         * of all fetch() requests made by this strategy.
-         *
-         * @type {Object}
-         */
-        this.fetchOptions = options.fetchOptions;
-        /**
-         * The
-         * [`CacheQueryOptions`]{@link https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions}
-         * for any `cache.match()` or `cache.put()` calls made by this strategy.
-         *
-         * @type {Object}
-         */
-        this.matchOptions = options.matchOptions;
+      this.matchOptions = options.matchOptions;
+    }
+    /**
+     * Perform a request strategy and returns a `Promise` that will resolve with
+     * a `Response`, invoking all relevant plugin callbacks.
+     *
+     * When a strategy instance is registered with a Workbox
+     * {@link workbox-routing.Route}, this method is automatically
+     * called when the route matches.
+     *
+     * Alternatively, this method can be used in a standalone `FetchEvent`
+     * listener by passing it to `event.respondWith()`.
+     *
+     * @param {FetchEvent|Object} options A `FetchEvent` or an object with the
+     *     properties listed below.
+     * @param {Request|string} options.request A request to run this strategy for.
+     * @param {ExtendableEvent} options.event The event associated with the
+     *     request.
+     * @param {URL} [options.url]
+     * @param {*} [options.params]
+     */
+    handle(options) {
+      const [responseDone] = this.handleAll(options);
+      return responseDone;
+    }
+    /**
+     * Similar to {@link workbox-strategies.Strategy~handle}, but
+     * instead of just returning a `Promise` that resolves to a `Response` it
+     * it will return an tuple of `[response, done]` promises, where the former
+     * (`response`) is equivalent to what `handle()` returns, and the latter is a
+     * Promise that will resolve once any promises that were added to
+     * `event.waitUntil()` as part of performing the strategy have completed.
+     *
+     * You can await the `done` promise to ensure any extra work performed by
+     * the strategy (usually caching responses) completes successfully.
+     *
+     * @param {FetchEvent|Object} options A `FetchEvent` or an object with the
+     *     properties listed below.
+     * @param {Request|string} options.request A request to run this strategy for.
+     * @param {ExtendableEvent} options.event The event associated with the
+     *     request.
+     * @param {URL} [options.url]
+     * @param {*} [options.params]
+     * @return {Array<Promise>} A tuple of [response, done]
+     *     promises that can be used to determine when the response resolves as
+     *     well as when the handler has completed all its work.
+     */
+    handleAll(options) {
+      // Allow for flexible options to be passed.
+      if (options instanceof FetchEvent) {
+        options = {
+          event: options,
+          request: options.request,
+        };
       }
-      /**
-       * Perform a request strategy and returns a `Promise` that will resolve with
-       * a `Response`, invoking all relevant plugin callbacks.
-       *
-       * When a strategy instance is registered with a Workbox
-       * {@link workbox-routing.Route}, this method is automatically
-       * called when the route matches.
-       *
-       * Alternatively, this method can be used in a standalone `FetchEvent`
-       * listener by passing it to `event.respondWith()`.
-       *
-       * @param {FetchEvent|Object} options A `FetchEvent` or an object with the
-       *     properties listed below.
-       * @param {Request|string} options.request A request to run this strategy for.
-       * @param {ExtendableEvent} options.event The event associated with the
-       *     request.
-       * @param {URL} [options.url]
-       * @param {*} [options.params]
-       */
-      handle(options) {
-        const [responseDone] = this.handleAll(options);
-        return responseDone;
-      }
-      /**
-       * Similar to {@link workbox-strategies.Strategy~handle}, but
-       * instead of just returning a `Promise` that resolves to a `Response` it
-       * it will return an tuple of `[response, done]` promises, where the former
-       * (`response`) is equivalent to what `handle()` returns, and the latter is a
-       * Promise that will resolve once any promises that were added to
-       * `event.waitUntil()` as part of performing the strategy have completed.
-       *
-       * You can await the `done` promise to ensure any extra work performed by
-       * the strategy (usually caching responses) completes successfully.
-       *
-       * @param {FetchEvent|Object} options A `FetchEvent` or an object with the
-       *     properties listed below.
-       * @param {Request|string} options.request A request to run this strategy for.
-       * @param {ExtendableEvent} options.event The event associated with the
-       *     request.
-       * @param {URL} [options.url]
-       * @param {*} [options.params]
-       * @return {Array<Promise>} A tuple of [response, done]
-       *     promises that can be used to determine when the response resolves as
-       *     well as when the handler has completed all its work.
-       */
-      handleAll(options) {
-        // Allow for flexible options to be passed.
-        if (options instanceof FetchEvent) {
-          options = {
-            event: options,
-            request: options.request
-          };
+      const event = options.event;
+      const request = typeof options.request === "string" ? new Request(options.request) : options.request;
+      const params = "params" in options ? options.params : undefined;
+      const handler = new StrategyHandler(this, {
+        event,
+        request,
+        params,
+      });
+      const responseDone = this._getResponse(handler, request, event);
+      const handlerDone = this._awaitComplete(responseDone, handler, request, event);
+      // Return an array of promises, suitable for use with Promise.all().
+      return [responseDone, handlerDone];
+    }
+    async _getResponse(handler, request, event) {
+      await handler.runCallbacks("handlerWillStart", {
+        event,
+        request,
+      });
+      let response = undefined;
+      try {
+        response = await this._handle(request, handler);
+        // The "official" Strategy subclasses all throw this error automatically,
+        // but in case a third-party Strategy doesn't, ensure that we have a
+        // consistent failure when there's no response or an error response.
+        if (!response || response.type === "error") {
+          throw new WorkboxError("no-response", {
+            url: request.url,
+          });
         }
-        const event = options.event;
-        const request = typeof options.request === 'string' ? new Request(options.request) : options.request;
-        const params = 'params' in options ? options.params : undefined;
-        const handler = new StrategyHandler(this, {
-          event,
-          request,
-          params
-        });
-        const responseDone = this._getResponse(handler, request, event);
-        const handlerDone = this._awaitComplete(responseDone, handler, request, event);
-        // Return an array of promises, suitable for use with Promise.all().
-        return [responseDone, handlerDone];
-      }
-      async _getResponse(handler, request, event) {
-        await handler.runCallbacks('handlerWillStart', {
-          event,
-          request
-        });
-        let response = undefined;
-        try {
-          response = await this._handle(request, handler);
-          // The "official" Strategy subclasses all throw this error automatically,
-          // but in case a third-party Strategy doesn't, ensure that we have a
-          // consistent failure when there's no response or an error response.
-          if (!response || response.type === 'error') {
-            throw new WorkboxError('no-response', {
-              url: request.url
+      } catch (error) {
+        if (error instanceof Error) {
+          for (const callback of handler.iterateCallbacks("handlerDidError")) {
+            response = await callback({
+              error,
+              event,
+              request,
             });
-          }
-        } catch (error) {
-          if (error instanceof Error) {
-            for (const callback of handler.iterateCallbacks('handlerDidError')) {
-              response = await callback({
-                error,
-                event,
-                request
-              });
-              if (response) {
-                break;
-              }
+            if (response) {
+              break;
             }
           }
-          if (!response) {
-            throw error;
-          } else {
-            logger.log(`While responding to '${getFriendlyURL(request.url)}', ` + `an ${error instanceof Error ? error.toString() : ''} error occurred. Using a fallback response provided by ` + `a handlerDidError plugin.`);
-          }
         }
-        for (const callback of handler.iterateCallbacks('handlerWillRespond')) {
-          response = await callback({
-            event,
-            request,
-            response
-          });
+        if (!response) {
+          throw error;
+        } else {
+          logger.log(
+            `While responding to '${getFriendlyURL(request.url)}', ` +
+              `an ${error instanceof Error ? error.toString() : ""} error occurred. Using a fallback response provided by ` +
+              `a handlerDidError plugin.`
+          );
         }
-        return response;
       }
-      async _awaitComplete(responseDone, handler, request, event) {
-        let response;
-        let error;
-        try {
-          response = await responseDone;
-        } catch (error) {
-          // Ignore errors, as response errors should be caught via the `response`
-          // promise above. The `done` promise will only throw for errors in
-          // promises passed to `handler.waitUntil()`.
-        }
-        try {
-          await handler.runCallbacks('handlerDidRespond', {
-            event,
-            request,
-            response
-          });
-          await handler.doneWaiting();
-        } catch (waitUntilError) {
-          if (waitUntilError instanceof Error) {
-            error = waitUntilError;
-          }
-        }
-        await handler.runCallbacks('handlerDidComplete', {
+      for (const callback of handler.iterateCallbacks("handlerWillRespond")) {
+        response = await callback({
           event,
           request,
           response,
-          error: error
         });
-        handler.destroy();
-        if (error) {
-          throw error;
+      }
+      return response;
+    }
+    async _awaitComplete(responseDone, handler, request, event) {
+      let response;
+      let error;
+      try {
+        response = await responseDone;
+      } catch (error) {
+        // Ignore errors, as response errors should be caught via the `response`
+        // promise above. The `done` promise will only throw for errors in
+        // promises passed to `handler.waitUntil()`.
+      }
+      try {
+        await handler.runCallbacks("handlerDidRespond", {
+          event,
+          request,
+          response,
+        });
+        await handler.doneWaiting();
+      } catch (waitUntilError) {
+        if (waitUntilError instanceof Error) {
+          error = waitUntilError;
+        }
+      }
+      await handler.runCallbacks("handlerDidComplete", {
+        event,
+        request,
+        response,
+        error: error,
+      });
+      handler.destroy();
+      if (error) {
+        throw error;
+      }
+    }
+  }
+  /**
+   * Classes extending the `Strategy` based class should implement this method,
+   * and leverage the {@link workbox-strategies.StrategyHandler}
+   * arg to perform all fetching and cache logic, which will ensure all relevant
+   * cache, cache options, fetch options and plugins are used (per the current
+   * strategy instance).
+   *
+   * @name _handle
+   * @instance
+   * @abstract
+   * @function
+   * @param {Request} request
+   * @param {workbox-strategies.StrategyHandler} handler
+   * @return {Promise<Response>}
+   *
+   * @memberof workbox-strategies.Strategy
+   */
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  const messages = {
+    strategyStart: (strategyName, request) => `Using ${strategyName} to respond to '${getFriendlyURL(request.url)}'`,
+    printFinalResponse: (response) => {
+      if (response) {
+        logger.groupCollapsed(`View the final response here.`);
+        logger.log(response || "[No response returned]");
+        logger.groupEnd();
+      }
+    },
+  };
+
+  /*
+      Copyright 2018 Google LLC
+
+      Use of this source code is governed by an MIT-style
+      license that can be found in the LICENSE file or at
+      https://opensource.org/licenses/MIT.
+    */
+  /**
+   * An implementation of a
+   * [network first](https://developer.chrome.com/docs/workbox/caching-strategies-overview/#network-first-falling-back-to-cache)
+   * request strategy.
+   *
+   * By default, this strategy will cache responses with a 200 status code as
+   * well as [opaque responses](https://developer.chrome.com/docs/workbox/caching-resources-during-runtime/#opaque-responses).
+   * Opaque responses are are cross-origin requests where the response doesn't
+   * support [CORS](https://enable-cors.org/).
+   *
+   * If the network request fails, and there is no cache match, this will throw
+   * a `WorkboxError` exception.
+   *
+   * @extends workbox-strategies.Strategy
+   * @memberof workbox-strategies
+   */
+  class NetworkFirst extends Strategy {
+    /**
+     * @param {Object} [options]
+     * @param {string} [options.cacheName] Cache name to store and retrieve
+     * requests. Defaults to cache names provided by
+     * {@link workbox-core.cacheNames}.
+     * @param {Array<Object>} [options.plugins] [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}
+     * to use in conjunction with this caching strategy.
+     * @param {Object} [options.fetchOptions] Values passed along to the
+     * [`init`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters)
+     * of [non-navigation](https://github.com/GoogleChrome/workbox/issues/1796)
+     * `fetch()` requests made by this strategy.
+     * @param {Object} [options.matchOptions] [`CacheQueryOptions`](https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions)
+     * @param {number} [options.networkTimeoutSeconds] If set, any network requests
+     * that fail to respond within the timeout will fallback to the cache.
+     *
+     * This option can be used to combat
+     * "[lie-fi]{@link https://developers.google.com/web/fundamentals/performance/poor-connectivity/#lie-fi}"
+     * scenarios.
+     */
+    constructor(options = {}) {
+      super(options);
+      // If this instance contains no plugins with a 'cacheWillUpdate' callback,
+      // prepend the `cacheOkAndOpaquePlugin` plugin to the plugins list.
+      if (!this.plugins.some((p) => "cacheWillUpdate" in p)) {
+        this.plugins.unshift(cacheOkAndOpaquePlugin);
+      }
+      this._networkTimeoutSeconds = options.networkTimeoutSeconds || 0;
+      {
+        if (this._networkTimeoutSeconds) {
+          finalAssertExports.isType(this._networkTimeoutSeconds, "number", {
+            moduleName: "workbox-strategies",
+            className: this.constructor.name,
+            funcName: "constructor",
+            paramName: "networkTimeoutSeconds",
+          });
         }
       }
     }
     /**
-     * Classes extending the `Strategy` based class should implement this method,
-     * and leverage the {@link workbox-strategies.StrategyHandler}
-     * arg to perform all fetching and cache logic, which will ensure all relevant
-     * cache, cache options, fetch options and plugins are used (per the current
-     * strategy instance).
-     *
-     * @name _handle
-     * @instance
-     * @abstract
-     * @function
-     * @param {Request} request
-     * @param {workbox-strategies.StrategyHandler} handler
+     * @private
+     * @param {Request|string} request A request to run this strategy for.
+     * @param {workbox-strategies.StrategyHandler} handler The event that
+     *     triggered the request.
      * @return {Promise<Response>}
-     *
-     * @memberof workbox-strategies.Strategy
      */
-
-    /*
-      Copyright 2018 Google LLC
-
-      Use of this source code is governed by an MIT-style
-      license that can be found in the LICENSE file or at
-      https://opensource.org/licenses/MIT.
-    */
-    const messages = {
-      strategyStart: (strategyName, request) => `Using ${strategyName} to respond to '${getFriendlyURL(request.url)}'`,
-      printFinalResponse: response => {
-        if (response) {
-          logger.groupCollapsed(`View the final response here.`);
-          logger.log(response || '[No response returned]');
-          logger.groupEnd();
-        }
+    async _handle(request, handler) {
+      const logs = [];
+      {
+        finalAssertExports.isInstance(request, Request, {
+          moduleName: "workbox-strategies",
+          className: this.constructor.name,
+          funcName: "handle",
+          paramName: "makeRequest",
+        });
       }
-    };
-
-    /*
-      Copyright 2018 Google LLC
-
-      Use of this source code is governed by an MIT-style
-      license that can be found in the LICENSE file or at
-      https://opensource.org/licenses/MIT.
-    */
-    /**
-     * An implementation of a
-     * [network first](https://developer.chrome.com/docs/workbox/caching-strategies-overview/#network-first-falling-back-to-cache)
-     * request strategy.
-     *
-     * By default, this strategy will cache responses with a 200 status code as
-     * well as [opaque responses](https://developer.chrome.com/docs/workbox/caching-resources-during-runtime/#opaque-responses).
-     * Opaque responses are are cross-origin requests where the response doesn't
-     * support [CORS](https://enable-cors.org/).
-     *
-     * If the network request fails, and there is no cache match, this will throw
-     * a `WorkboxError` exception.
-     *
-     * @extends workbox-strategies.Strategy
-     * @memberof workbox-strategies
-     */
-    class NetworkFirst extends Strategy {
-      /**
-       * @param {Object} [options]
-       * @param {string} [options.cacheName] Cache name to store and retrieve
-       * requests. Defaults to cache names provided by
-       * {@link workbox-core.cacheNames}.
-       * @param {Array<Object>} [options.plugins] [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}
-       * to use in conjunction with this caching strategy.
-       * @param {Object} [options.fetchOptions] Values passed along to the
-       * [`init`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters)
-       * of [non-navigation](https://github.com/GoogleChrome/workbox/issues/1796)
-       * `fetch()` requests made by this strategy.
-       * @param {Object} [options.matchOptions] [`CacheQueryOptions`](https://w3c.github.io/ServiceWorker/#dictdef-cachequeryoptions)
-       * @param {number} [options.networkTimeoutSeconds] If set, any network requests
-       * that fail to respond within the timeout will fallback to the cache.
-       *
-       * This option can be used to combat
-       * "[lie-fi]{@link https://developers.google.com/web/fundamentals/performance/poor-connectivity/#lie-fi}"
-       * scenarios.
-       */
-      constructor(options = {}) {
-        super(options);
-        // If this instance contains no plugins with a 'cacheWillUpdate' callback,
-        // prepend the `cacheOkAndOpaquePlugin` plugin to the plugins list.
-        if (!this.plugins.some(p => 'cacheWillUpdate' in p)) {
-          this.plugins.unshift(cacheOkAndOpaquePlugin);
-        }
-        this._networkTimeoutSeconds = options.networkTimeoutSeconds || 0;
-        {
-          if (this._networkTimeoutSeconds) {
-            finalAssertExports.isType(this._networkTimeoutSeconds, 'number', {
-              moduleName: 'workbox-strategies',
-              className: this.constructor.name,
-              funcName: 'constructor',
-              paramName: 'networkTimeoutSeconds'
-            });
-          }
-        }
-      }
-      /**
-       * @private
-       * @param {Request|string} request A request to run this strategy for.
-       * @param {workbox-strategies.StrategyHandler} handler The event that
-       *     triggered the request.
-       * @return {Promise<Response>}
-       */
-      async _handle(request, handler) {
-        const logs = [];
-        {
-          finalAssertExports.isInstance(request, Request, {
-            moduleName: 'workbox-strategies',
-            className: this.constructor.name,
-            funcName: 'handle',
-            paramName: 'makeRequest'
-          });
-        }
-        const promises = [];
-        let timeoutId;
-        if (this._networkTimeoutSeconds) {
-          const {
-            id,
-            promise
-          } = this._getTimeoutPromise({
-            request,
-            logs,
-            handler
-          });
-          timeoutId = id;
-          promises.push(promise);
-        }
-        const networkPromise = this._getNetworkPromise({
-          timeoutId,
+      const promises = [];
+      let timeoutId;
+      if (this._networkTimeoutSeconds) {
+        const { id, promise } = this._getTimeoutPromise({
           request,
           logs,
-          handler
+          handler,
         });
-        promises.push(networkPromise);
-        const response = await handler.waitUntil((async () => {
-          // Promise.race() will resolve as soon as the first promise resolves.
-          return (await handler.waitUntil(Promise.race(promises))) || (
-          // If Promise.race() resolved with null, it might be due to a network
-          // timeout + a cache miss. If that were to happen, we'd rather wait until
-          // the networkPromise resolves instead of returning null.
-          // Note that it's fine to await an already-resolved promise, so we don't
-          // have to check to see if it's still "in flight".
-          await networkPromise);
-        })());
-        {
-          logger.groupCollapsed(messages.strategyStart(this.constructor.name, request));
-          for (const log of logs) {
-            logger.log(log);
-          }
-          messages.printFinalResponse(response);
-          logger.groupEnd();
-        }
-        if (!response) {
-          throw new WorkboxError('no-response', {
-            url: request.url
-          });
-        }
-        return response;
+        timeoutId = id;
+        promises.push(promise);
       }
-      /**
-       * @param {Object} options
-       * @param {Request} options.request
-       * @param {Array} options.logs A reference to the logs array
-       * @param {Event} options.event
-       * @return {Promise<Response>}
-       *
-       * @private
-       */
-      _getTimeoutPromise({
-        request,
-        logs,
-        handler
-      }) {
-        let timeoutId;
-        const timeoutPromise = new Promise(resolve => {
-          const onNetworkTimeout = async () => {
-            {
-              logs.push(`Timing out the network response at ` + `${this._networkTimeoutSeconds} seconds.`);
-            }
-            resolve(await handler.cacheMatch(request));
-          };
-          timeoutId = setTimeout(onNetworkTimeout, this._networkTimeoutSeconds * 1000);
-        });
-        return {
-          promise: timeoutPromise,
-          id: timeoutId
-        };
-      }
-      /**
-       * @param {Object} options
-       * @param {number|undefined} options.timeoutId
-       * @param {Request} options.request
-       * @param {Array} options.logs A reference to the logs Array.
-       * @param {Event} options.event
-       * @return {Promise<Response>}
-       *
-       * @private
-       */
-      async _getNetworkPromise({
+      const networkPromise = this._getNetworkPromise({
         timeoutId,
         request,
         logs,
-        handler
-      }) {
-        let error;
-        let response;
-        try {
-          response = await handler.fetchAndCachePut(request);
-        } catch (fetchError) {
-          if (fetchError instanceof Error) {
-            error = fetchError;
+        handler,
+      });
+      promises.push(networkPromise);
+      const response = await handler.waitUntil(
+        (async () => {
+          // Promise.race() will resolve as soon as the first promise resolves.
+          return (
+            (await handler.waitUntil(Promise.race(promises))) ||
+            // If Promise.race() resolved with null, it might be due to a network
+            // timeout + a cache miss. If that were to happen, we'd rather wait until
+            // the networkPromise resolves instead of returning null.
+            // Note that it's fine to await an already-resolved promise, so we don't
+            // have to check to see if it's still "in flight".
+            (await networkPromise)
+          );
+        })()
+      );
+      {
+        logger.groupCollapsed(messages.strategyStart(this.constructor.name, request));
+        for (const log of logs) {
+          logger.log(log);
+        }
+        messages.printFinalResponse(response);
+        logger.groupEnd();
+      }
+      if (!response) {
+        throw new WorkboxError("no-response", {
+          url: request.url,
+        });
+      }
+      return response;
+    }
+    /**
+     * @param {Object} options
+     * @param {Request} options.request
+     * @param {Array} options.logs A reference to the logs array
+     * @param {Event} options.event
+     * @return {Promise<Response>}
+     *
+     * @private
+     */
+    _getTimeoutPromise({ request, logs, handler }) {
+      let timeoutId;
+      const timeoutPromise = new Promise((resolve) => {
+        const onNetworkTimeout = async () => {
+          {
+            logs.push(`Timing out the network response at ` + `${this._networkTimeoutSeconds} seconds.`);
           }
+          resolve(await handler.cacheMatch(request));
+        };
+        timeoutId = setTimeout(onNetworkTimeout, this._networkTimeoutSeconds * 1000);
+      });
+      return {
+        promise: timeoutPromise,
+        id: timeoutId,
+      };
+    }
+    /**
+     * @param {Object} options
+     * @param {number|undefined} options.timeoutId
+     * @param {Request} options.request
+     * @param {Array} options.logs A reference to the logs Array.
+     * @param {Event} options.event
+     * @return {Promise<Response>}
+     *
+     * @private
+     */
+    async _getNetworkPromise({ timeoutId, request, logs, handler }) {
+      let error;
+      let response;
+      try {
+        response = await handler.fetchAndCachePut(request);
+      } catch (fetchError) {
+        if (fetchError instanceof Error) {
+          error = fetchError;
         }
-        if (timeoutId) {
-          clearTimeout(timeoutId);
+      }
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      {
+        if (response) {
+          logs.push(`Got response from network.`);
+        } else {
+          logs.push(`Unable to get a response from the network. Will respond ` + `with a cached response.`);
         }
+      }
+      if (error || !response) {
+        response = await handler.cacheMatch(request);
         {
           if (response) {
-            logs.push(`Got response from network.`);
+            logs.push(`Found a cached response in the '${this.cacheName}'` + ` cache.`);
           } else {
-            logs.push(`Unable to get a response from the network. Will respond ` + `with a cached response.`);
+            logs.push(`No response found in the '${this.cacheName}' cache.`);
           }
         }
-        if (error || !response) {
-          response = await handler.cacheMatch(request);
-          {
-            if (response) {
-              logs.push(`Found a cached response in the '${this.cacheName}'` + ` cache.`);
-            } else {
-              logs.push(`No response found in the '${this.cacheName}' cache.`);
-            }
-          }
-        }
-        return response;
       }
+      return response;
     }
+  }
 
-    /*
+  /*
       Copyright 2018 Google LLC
 
       Use of this source code is governed by an MIT-style
       license that can be found in the LICENSE file or at
       https://opensource.org/licenses/MIT.
     */
+  /**
+   * An implementation of a
+   * [network-only](https://developer.chrome.com/docs/workbox/caching-strategies-overview/#network-only)
+   * request strategy.
+   *
+   * This class is useful if you want to take advantage of any
+   * [Workbox plugins](https://developer.chrome.com/docs/workbox/using-plugins/).
+   *
+   * If the network request fails, this will throw a `WorkboxError` exception.
+   *
+   * @extends workbox-strategies.Strategy
+   * @memberof workbox-strategies
+   */
+  class NetworkOnly extends Strategy {
     /**
-     * An implementation of a
-     * [network-only](https://developer.chrome.com/docs/workbox/caching-strategies-overview/#network-only)
-     * request strategy.
-     *
-     * This class is useful if you want to take advantage of any
-     * [Workbox plugins](https://developer.chrome.com/docs/workbox/using-plugins/).
-     *
-     * If the network request fails, this will throw a `WorkboxError` exception.
-     *
-     * @extends workbox-strategies.Strategy
-     * @memberof workbox-strategies
+     * @param {Object} [options]
+     * @param {Array<Object>} [options.plugins] [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}
+     * to use in conjunction with this caching strategy.
+     * @param {Object} [options.fetchOptions] Values passed along to the
+     * [`init`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters)
+     * of [non-navigation](https://github.com/GoogleChrome/workbox/issues/1796)
+     * `fetch()` requests made by this strategy.
+     * @param {number} [options.networkTimeoutSeconds] If set, any network requests
+     * that fail to respond within the timeout will result in a network error.
      */
-    class NetworkOnly extends Strategy {
-      /**
-       * @param {Object} [options]
-       * @param {Array<Object>} [options.plugins] [Plugins]{@link https://developers.google.com/web/tools/workbox/guides/using-plugins}
-       * to use in conjunction with this caching strategy.
-       * @param {Object} [options.fetchOptions] Values passed along to the
-       * [`init`](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch#Parameters)
-       * of [non-navigation](https://github.com/GoogleChrome/workbox/issues/1796)
-       * `fetch()` requests made by this strategy.
-       * @param {number} [options.networkTimeoutSeconds] If set, any network requests
-       * that fail to respond within the timeout will result in a network error.
-       */
-      constructor(options = {}) {
-        super(options);
-        this._networkTimeoutSeconds = options.networkTimeoutSeconds || 0;
-      }
-      /**
-       * @private
-       * @param {Request|string} request A request to run this strategy for.
-       * @param {workbox-strategies.StrategyHandler} handler The event that
-       *     triggered the request.
-       * @return {Promise<Response>}
-       */
-      async _handle(request, handler) {
-        {
-          finalAssertExports.isInstance(request, Request, {
-            moduleName: 'workbox-strategies',
-            className: this.constructor.name,
-            funcName: '_handle',
-            paramName: 'request'
-          });
-        }
-        let error = undefined;
-        let response;
-        try {
-          const promises = [handler.fetch(request)];
-          if (this._networkTimeoutSeconds) {
-            const timeoutPromise = timeout(this._networkTimeoutSeconds * 1000);
-            promises.push(timeoutPromise);
-          }
-          response = await Promise.race(promises);
-          if (!response) {
-            throw new Error(`Timed out the network response after ` + `${this._networkTimeoutSeconds} seconds.`);
-          }
-        } catch (err) {
-          if (err instanceof Error) {
-            error = err;
-          }
-        }
-        {
-          logger.groupCollapsed(messages.strategyStart(this.constructor.name, request));
-          if (response) {
-            logger.log(`Got response from network.`);
-          } else {
-            logger.log(`Unable to get a response from the network.`);
-          }
-          messages.printFinalResponse(response);
-          logger.groupEnd();
-        }
-        if (!response) {
-          throw new WorkboxError('no-response', {
-            url: request.url,
-            error
-          });
-        }
-        return response;
-      }
+    constructor(options = {}) {
+      super(options);
+      this._networkTimeoutSeconds = options.networkTimeoutSeconds || 0;
     }
+    /**
+     * @private
+     * @param {Request|string} request A request to run this strategy for.
+     * @param {workbox-strategies.StrategyHandler} handler The event that
+     *     triggered the request.
+     * @return {Promise<Response>}
+     */
+    async _handle(request, handler) {
+      {
+        finalAssertExports.isInstance(request, Request, {
+          moduleName: "workbox-strategies",
+          className: this.constructor.name,
+          funcName: "_handle",
+          paramName: "request",
+        });
+      }
+      let error = undefined;
+      let response;
+      try {
+        const promises = [handler.fetch(request)];
+        if (this._networkTimeoutSeconds) {
+          const timeoutPromise = timeout(this._networkTimeoutSeconds * 1000);
+          promises.push(timeoutPromise);
+        }
+        response = await Promise.race(promises);
+        if (!response) {
+          throw new Error(`Timed out the network response after ` + `${this._networkTimeoutSeconds} seconds.`);
+        }
+      } catch (err) {
+        if (err instanceof Error) {
+          error = err;
+        }
+      }
+      {
+        logger.groupCollapsed(messages.strategyStart(this.constructor.name, request));
+        if (response) {
+          logger.log(`Got response from network.`);
+        } else {
+          logger.log(`Unable to get a response from the network.`);
+        }
+        messages.printFinalResponse(response);
+        logger.groupEnd();
+      }
+      if (!response) {
+        throw new WorkboxError("no-response", {
+          url: request.url,
+          error,
+        });
+      }
+      return response;
+    }
+  }
 
-    /*
+  /*
       Copyright 2019 Google LLC
 
       Use of this source code is governed by an MIT-style
       license that can be found in the LICENSE file or at
       https://opensource.org/licenses/MIT.
     */
-    /**
-     * Claim any currently available clients once the service worker
-     * becomes active. This is normally used in conjunction with `skipWaiting()`.
-     *
-     * @memberof workbox-core
-     */
-    function clientsClaim() {
-      self.addEventListener('activate', () => self.clients.claim());
-    }
+  /**
+   * Claim any currently available clients once the service worker
+   * becomes active. This is normally used in conjunction with `skipWaiting()`.
+   *
+   * @memberof workbox-core
+   */
+  function clientsClaim() {
+    self.addEventListener("activate", () => self.clients.claim());
+  }
 
-    exports.NetworkFirst = NetworkFirst;
-    exports.NetworkOnly = NetworkOnly;
-    exports.clientsClaim = clientsClaim;
-    exports.registerRoute = registerRoute;
-
-}));
+  exports.NetworkFirst = NetworkFirst;
+  exports.NetworkOnly = NetworkOnly;
+  exports.clientsClaim = clientsClaim;
+  exports.registerRoute = registerRoute;
+});
 //# sourceMappingURL=workbox-9f2f79cf.js.map
diff --git a/apps/web/styles/emoji.css b/apps/web/styles/emoji.css
index 2fe3ddab32..50e50648e0 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 509910022c..ab520abe29 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 d0fc52dd13..f795461018 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 d1f2e7f4c7..0000000000
--- a/apps/web/tailwind.config.cjs
+++ /dev/null
@@ -1,8 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-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 a49eef8470..3084e156b4 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -1,18 +1,24 @@
 {
-  "extends": "@plane/typescript-config/react-router.json",
   "compilerOptions": {
-    "baseUrl": ".",
     "rootDirs": [".", "./.react-router/types"],
-    "types": ["node", "vite/client"],
     "paths": {
-      "@/app/*": ["app/*"],
-      "@/*": ["core/*"],
-      "@/helpers/*": ["helpers/*"],
-      "@/styles/*": ["styles/*"],
-      "@/plane-web/*": ["ce/*"]
+      "@/*": ["./core/*"],
+      "@/app/*": ["./app/*"],
+      "@/helpers/*": ["./helpers/*"],
+      "@/plane-web/*": ["./ce/*"],
+      "@/styles/*": ["./styles/*"],
+      "app/*": ["./app/*"],
+      "package.json": ["./package.json"],
+      "ce/*": ["./ce/*"]
     },
-    "strictNullChecks": true
+    "strictNullChecks": true,
+    "exactOptionalPropertyTypes": false,
+    "noUnusedParameters": false,
+    "noUnusedLocals": false,
+    "noImplicitReturns": false,
+    "noImplicitOverride": false,
+    "types": ["vite/client"]
   },
-  "include": ["**/*", "**/.server/**/*", "**/.client/**/*", ".react-router/types/**/*"],
-  "exclude": ["node_modules"]
+  "extends": "@plane/typescript-config/react-router.json",
+  "include": ["**/*", "**/.server/**/*", "**/.client/**/*", ".react-router/types/**/*"]
 }
diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
index aa869e458b..b80e3b65ee 100644
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@@ -1,6 +1,6 @@
 import path from "node:path";
+import * as dotenv from "@dotenvx/dotenvx";
 import { reactRouter } from "@react-router/dev/vite";
-import dotenv from "dotenv";
 import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
diff --git a/deployments/aio/community/Dockerfile b/deployments/aio/community/Dockerfile
index b217d09f8b..47e1227d97 100644
--- a/deployments/aio/community/Dockerfile
+++ b/deployments/aio/community/Dockerfile
@@ -31,14 +31,12 @@ COPY --from=node /usr/local/lib /usr/local/lib
 COPY --from=node /usr/local/include /usr/local/include
 COPY --from=node /usr/local/bin /usr/local/bin
 
-COPY --from=web-img /app /app/web
+COPY --from=web-img /usr/share/nginx/html /app/web
 COPY --from=space-img /app /app/space
-COPY --from=admin-img /app /app/admin
+COPY --from=admin-img /usr/share/nginx/html/god-mode /app/admin
 COPY --from=live-img /app /app/live
 
-RUN rm -rf /app/web/apps/web/.next/cache && \
-    rm -rf /app/space/apps/space/.next/cache && \
-    rm -rf /app/admin/apps/admin/.next/cache
+RUN rm -rf /app/space/apps/space/.next/cache
 
 COPY --from=proxy-img /usr/bin/caddy /usr/bin/caddy
 COPY dist/Caddyfile /app/proxy/Caddyfile
diff --git a/deployments/aio/community/build.sh b/deployments/aio/community/build.sh
index e69ac9a50b..5c9573a8be 100755
--- a/deployments/aio/community/build.sh
+++ b/deployments/aio/community/build.sh
@@ -95,7 +95,7 @@ update_env_file(){
 
 build_dist_files(){
     cp ./variables.env $DIST_DIR/plane.env
-    cp ../../../apps/proxy/Caddyfile.ce $DIST_DIR/Caddyfile
+    cp ../../../apps/proxy/Caddyfile.aio.ce $DIST_DIR/Caddyfile
 
     echo "" >> $DIST_DIR/plane.env
     echo "" >> $DIST_DIR/plane.env
@@ -108,16 +108,6 @@ build_dist_files(){
     update_env_file $DIST_DIR/plane.env "API_BASE_URL" "http://localhost:3004"
     update_env_file $DIST_DIR/plane.env "SITE_ADDRESS" ":80"
 
-    # remove this line containing `plane-minio:9000`
-    remove_line $DIST_DIR/Caddyfile "plane-minio:9000" ""
-
-    # in caddyfile, update `reverse_proxy /spaces/* space:3000` to `reverse_proxy /spaces/* space:3002` 
-    string_replace $DIST_DIR/Caddyfile "web:3000" "localhost:3001"
-    string_replace $DIST_DIR/Caddyfile "space:3000" "localhost:3002"
-    string_replace $DIST_DIR/Caddyfile "admin:3000" "localhost:3003"
-    string_replace $DIST_DIR/Caddyfile "api:8000" "localhost:3004"
-    string_replace $DIST_DIR/Caddyfile "live:3000" "localhost:3005"
-    
 
     # print docker build command
     echo "------------------------------------------------"
diff --git a/deployments/aio/community/supervisor.conf b/deployments/aio/community/supervisor.conf
index 5e1e4683e1..33b12985e4 100644
--- a/deployments/aio/community/supervisor.conf
+++ b/deployments/aio/community/supervisor.conf
@@ -17,20 +17,9 @@ stderr_logfile_backups=5
 priority=10
 
 
-[program:web]
-command=sh -c "node /app/web/apps/web/server.js"
-autostart=true
-autorestart=true
-stdout_logfile=/app/logs/access/web.log
-stderr_logfile=/app/logs/error/web.err.log
-# stderr_logfile=/dev/stderr
-stderr_logfile_maxbytes=50MB
-stderr_logfile_backups=5
-environment=PORT=3001,HOSTNAME=0.0.0.0
-priority=15
-
 [program:space]
-command=sh -c "node /app/space/apps/space/server.js"
+directory=/app/space/apps/space/build/server
+command=sh -c "npx react-router-serve index.js"
 autostart=true
 autorestart=true
 stdout_logfile=/app/logs/access/space.log
@@ -41,18 +30,6 @@ stderr_logfile_backups=5
 environment=PORT=3002,HOSTNAME=0.0.0.0
 priority=15
 
-[program:admin]
-command=sh -c "node /app/admin/apps/admin/server.js"
-autostart=true
-autorestart=true
-stdout_logfile=/app/logs/access/admin.log
-stderr_logfile=/app/logs/error/admin.err.log
-# stderr_logfile=/dev/stderr
-stderr_logfile_maxbytes=50MB
-stderr_logfile_backups=5
-environment=PORT=3003,HOSTNAME=0.0.0.0
-priority=15
-
 [program:api]
 directory=/app/backend
 command=sh -c "./bin/docker-entrypoint-api.sh"
@@ -96,7 +73,7 @@ priority=20
 
 
 [program:live]
-command=sh -c "node /app/live/apps/live/dist/start.js"
+command=sh -c "node /app/live/apps/live"
 autostart=true
 autorestart=true
 stdout_logfile=/app/logs/access/live.log
diff --git a/docs/eslint.md b/docs/eslint.md
new file mode 100644
index 0000000000..eeb7b81d3b
--- /dev/null
+++ b/docs/eslint.md
@@ -0,0 +1,103 @@
+# 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/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 0000000000..7f8f36e2e7
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,183 @@
+// @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 turboPlugin from "eslint-plugin-turbo";
+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,
+  turboPlugin.configs["flat/recommended"],
+  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",
+      "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",
+        { allowExportNames: ["meta", "links", "headers", "loader", "action"] },
+      ],
+      "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/consistent-type-specifier-style": ["error", "prefer-top-level"],
+      "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 2300cd7607..108487a482 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "plane",
   "description": "Open-source project management that unlocks customer value",
   "repository": "https://github.com/makeplane/plane.git",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "AGPL-3.0",
   "private": true,
   "scripts": {
@@ -12,17 +12,50 @@
     "clean": "turbo run clean && rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist",
     "fix": "turbo run fix",
     "fix:format": "turbo run fix:format",
+    "fix:lint": "turbo run fix:lint",
     "check": "turbo run check",
     "check:lint": "turbo run check:lint",
-    "check:format": "turbo run check:format"
+    "check:format": "turbo run check:format",
+    "check:types": "turbo run check:types",
+    "prepare": "husky"
   },
   "devDependencies": {
-    "prettier": "latest",
-    "prettier-plugin-tailwindcss": "^0.6.14",
-    "turbo": "2.6.1"
+    "@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",
+    "eslint-plugin-turbo": "2.6.3",
+    "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"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,cjs,mjs,cts,mts,json,css,md}": [
+      "pnpm exec prettier --write --ignore-unknown"
+    ],
+    "*.{js,jsx,ts,tsx,cjs,mjs,cts,mts}": [
+      "pnpm exec eslint --fix --max-warnings=0 --no-warn-ignored"
+    ]
   },
   "pnpm": {
     "overrides": {
+      "express": "catalog:",
+      "mdast-util-to-hast": "13.2.1",
+      "valibot": "1.2.0",
       "glob": "11.1.0",
       "js-yaml": "4.1.1",
       "brace-expansion": "2.0.2",
@@ -39,14 +72,14 @@
       "vite": "catalog:"
     },
     "onlyBuiltDependencies": [
-      "@swc/core",
-      "core-js",
-      "esbuild",
-      "turbo",
-      "unrs-resolver"
+      "@sentry/cli",
+      "turbo"
+    ],
+    "ignoredBuiltDependencies": [
+      "sharp"
     ]
   },
-  "packageManager": "pnpm@10.21.0",
+  "packageManager": "pnpm@10.24.0+sha512.01ff8ae71b4419903b65c60fb2dc9d34cf8bb6e06d03bde112ef38f7a34d6904c424ba66bea5cdcf12890230bf39f9580473140ed9c946fef328b6e5238a345a",
   "engines": {
     "node": ">=22.18.0"
   }
diff --git a/packages/codemods/.prettierignore b/packages/codemods/.prettierignore
new file mode 100644
index 0000000000..b0b8bc622a
--- /dev/null
+++ b/packages/codemods/.prettierignore
@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/codemods/function-declaration.ts b/packages/codemods/function-declaration.ts
new file mode 100644
index 0000000000..45f185053d
--- /dev/null
+++ b/packages/codemods/function-declaration.ts
@@ -0,0 +1,531 @@
+import { CommentKind } from "ast-types/gen/kinds";
+import {
+  API,
+  FileInfo,
+  Options,
+  JSCodeshift,
+  TSTypeReference,
+  Identifier,
+  BlockStatement,
+  Expression,
+  Pattern,
+  SpreadElement,
+  JSXNamespacedName,
+  ASTNode,
+  Node,
+  FunctionDeclaration,
+  TSType,
+  VariableDeclarator,
+  ArrowFunctionExpression,
+  FunctionExpression,
+} from "jscodeshift";
+
+const COMPONENT_TYPE_NAMES = new Set([
+  "FC",
+  "FunctionComponent",
+  "VFC",
+  "VoidFunctionComponent",
+]);
+
+const COMPONENT_NAME_PATTERN = /^[A-Z]/;
+
+function isReactComponentType(typeReference: TSTypeReference, j: JSCodeshift) {
+  const typeName = typeReference.typeName;
+
+  if (!typeName) {
+    return false;
+  }
+
+  if (j.Identifier.check(typeName)) {
+    return COMPONENT_TYPE_NAMES.has(typeName.name);
+  }
+
+  if (
+    j.TSQualifiedName.check(typeName) &&
+    j.Identifier.check(typeName.left) &&
+    j.Identifier.check(typeName.right)
+  ) {
+    return (
+      typeName.left.name === "React" &&
+      COMPONENT_TYPE_NAMES.has(typeName.right.name)
+    );
+  }
+
+  return false;
+}
+
+function isComponentNameIdentifier(identifier: Identifier | null | undefined) {
+  if (!identifier) {
+    return false;
+  }
+
+  // Must start with uppercase
+  if (!COMPONENT_NAME_PATTERN.test(identifier.name)) {
+    return false;
+  }
+
+  // Ignore CONSTANT_CASE (all uppercase)
+  if (
+    identifier.name.toUpperCase() === identifier.name &&
+    identifier.name.length > 1
+  ) {
+    return false;
+  }
+
+  return true;
+}
+
+function addComments(target: Node, comments: CommentKind[]) {
+  if (!comments || comments.length === 0) {
+    return;
+  }
+  target.comments ||= [];
+  target.comments.push(...comments);
+}
+
+function copyOuterComments(source: Node, target: Node, j: JSCodeshift) {
+  if (!j.Node.check(source) || !j.Node.check(target) || !source.comments) {
+    return;
+  }
+  const outerComments = source.comments.filter((c) => c.leading || c.trailing);
+  addComments(target, outerComments);
+}
+
+function ensureParamType(
+  param: Pattern,
+  propsType: TSType | null | undefined,
+  j: JSCodeshift
+) {
+  if (!j.Pattern.check(param)) {
+    return;
+  }
+
+  if (!("typeAnnotation" in param)) {
+    return;
+  }
+
+  if (!propsType) {
+    return;
+  }
+
+  if (j.TSTypeReference.check(propsType) && propsType.typeName) {
+    param.typeAnnotation = j.tsTypeAnnotation(
+      propsType.typeParameters
+        ? j.tsTypeReference(propsType.typeName, propsType.typeParameters)
+        : j.tsTypeReference(propsType.typeName)
+    );
+    return;
+  }
+
+  if (j.TSType.check(propsType)) {
+    // @ts-expect-error: jscodeshift types are too strict here
+    param.typeAnnotation = j.tsTypeAnnotation(propsType);
+  }
+}
+
+function toBlockBody(j: JSCodeshift, body: BlockStatement | Expression) {
+  if (j.BlockStatement.check(body)) {
+    return body;
+  }
+
+  // @ts-expect-error: jscodeshift types are too strict here
+  const returnStatement = j.returnStatement(body);
+
+  return j.blockStatement([returnStatement]);
+}
+
+function isFunction(
+  node: Node,
+  j: JSCodeshift
+): node is ArrowFunctionExpression | FunctionExpression {
+  return (
+    j.ArrowFunctionExpression.check(node) || j.FunctionExpression.check(node)
+  );
+}
+
+function extractArrowFunction(
+  init: Expression | SpreadElement | JSXNamespacedName,
+  j: JSCodeshift
+): ArrowFunctionExpression | FunctionExpression | undefined {
+  if (isFunction(init, j)) {
+    return init;
+  }
+
+  // If it's a CallExpression like observer(() => {}), extract the arrow function
+  if (j.CallExpression.check(init)) {
+    const firstArg = init.arguments?.[0];
+    if (firstArg && isFunction(firstArg, j)) {
+      return firstArg;
+    }
+  }
+
+  return;
+}
+
+function extractPropsTypeFromWrapper(
+  init: Expression | SpreadElement | JSXNamespacedName,
+  j: JSCodeshift
+) {
+  // If it's a CallExpression like observer<React.FC<Props>>((props) => {})
+  // Extract the Props type from React.FC<Props>
+  if (!j.CallExpression.check(init)) {
+    return;
+  }
+
+  if (!("typeParameters" in init)) {
+    return;
+  }
+
+  const typeParameters = init.typeParameters;
+  if (!j.TSTypeParameterInstantiation.check(typeParameters)) {
+    return;
+  }
+
+  const typeParam = typeParameters.params?.[0];
+
+  if (!typeParam) {
+    return;
+  }
+
+  if (
+    j.TSTypeReference.check(typeParam) &&
+    isReactComponentType(typeParam, j)
+  ) {
+    // Extract the generic type from React.FC<PropsType>
+    return typeParam.typeParameters?.params?.[0];
+  }
+
+  // Check for memo<Props>
+  const callee = init.callee;
+  let isMemo = false;
+  if (j.Identifier.check(callee) && callee.name === "memo") {
+    isMemo = true;
+  } else if (
+    j.MemberExpression.check(callee) &&
+    j.Identifier.check(callee.property) &&
+    callee.property.name === "memo"
+  ) {
+    isMemo = true;
+  }
+
+  if (isMemo) {
+    // For memo<Props>, the first type parameter is the props type
+    // @ts-expect-error: jscodeshift types are too strict here
+    return typeParam;
+  }
+
+  return;
+}
+
+function isReactForwardRef(
+  init: Expression | SpreadElement | JSXNamespacedName,
+  j: JSCodeshift
+) {
+  if (!j.CallExpression.check(init)) {
+    return false;
+  }
+
+  const callee = init.callee;
+
+  // Check for React.forwardRef
+  if (
+    j.MemberExpression.check(callee) &&
+    j.Identifier.check(callee.object) &&
+    j.Identifier.check(callee.property)
+  ) {
+    return (
+      callee.object.name === "React" && callee.property.name === "forwardRef"
+    );
+  }
+
+  // Check for forwardRef (imported directly)
+  if (j.Identifier.check(callee)) {
+    return callee.name === "forwardRef";
+  }
+
+  return false;
+}
+
+function extractForwardRefTypes(
+  init: Expression | SpreadElement | JSXNamespacedName,
+  j: JSCodeshift
+) {
+  if (!isReactForwardRef(init, j)) {
+    return;
+  }
+
+  if (!j.CallExpression.check(init) || !("typeParameters" in init)) {
+    return;
+  }
+
+  const typeParameters = init.typeParameters;
+
+  // If no type parameters, we still want to apply default empty object for props
+  if (
+    !j.TSTypeParameterInstantiation.check(typeParameters) ||
+    typeParameters.params.length === 0
+  ) {
+    return; // Let the default props type handling take care of it
+  }
+
+  const typeParams = typeParameters.params;
+
+  // React.forwardRef<ElementType, PropsType>
+  // If PropsType is not specified, use Record<string, unknown> to avoid ESLint errors
+  const [elementType] = typeParams;
+
+  if (!elementType) {
+    return;
+  }
+
+  const propsType =
+    typeParams.length >= 2 && typeParams[1]
+      ? typeParams[1]
+      : j.tsTypeReference(
+          j.identifier("Record"),
+          j.tsTypeParameterInstantiation([
+            j.tsStringKeyword(),
+            j.tsUnknownKeyword(),
+          ])
+        );
+
+  // Create React.ForwardedRef<ElementType> for the ref parameter
+  const refType = j.tsTypeReference(
+    j.tsQualifiedName(j.identifier("React"), j.identifier("ForwardedRef")),
+    j.tsTypeParameterInstantiation([elementType])
+  );
+
+  return { propsType, refType };
+}
+
+function isEmptyObjectType(type: TSType, j: JSCodeshift) {
+  return j.TSTypeLiteral.check(type) && type.members.length === 0;
+}
+
+function convertToFunction(
+  j: JSCodeshift,
+  declaration: VariableDeclarator,
+  init: Expression | SpreadElement | JSXNamespacedName,
+  propsType: TSType | null | undefined
+) {
+  if (!j.Identifier.check(declaration.id)) {
+    throw new Error("Declaration id must be an identifier");
+  }
+  const componentName = declaration.id.name;
+  const arrowFn = extractArrowFunction(init, j);
+
+  if (!arrowFn) {
+    throw new Error("Expected ArrowFunctionExpression or FunctionExpression");
+  }
+
+  const params = arrowFn.params;
+  const body = toBlockBody(j, arrowFn.body);
+
+  const newFunction = j.functionDeclaration(
+    j.identifier(componentName),
+    params,
+    body
+  );
+
+  // Check if this is React.forwardRef and extract types for props and ref
+  const forwardRefTypes = extractForwardRefTypes(init, j);
+
+  if (forwardRefTypes) {
+    // Apply props type to first parameter
+    const [firstParam, secondParam] = newFunction.params;
+    if (j.Pattern.check(firstParam) && "typeAnnotation" in firstParam) {
+      ensureParamType(firstParam, forwardRefTypes.propsType, j);
+    }
+    // Apply ref type to second parameter
+    if (j.Pattern.check(secondParam) && "typeAnnotation" in secondParam) {
+      ensureParamType(secondParam, forwardRefTypes.refType, j);
+    }
+  } else if (newFunction.params.length > 0) {
+    const [firstParam] = newFunction.params;
+    if (firstParam) {
+      ensureParamType(firstParam, propsType, j);
+    }
+  } else if (propsType && !isEmptyObjectType(propsType, j)) {
+    // If there are no params but a non-empty propsType exists, add _props parameter
+    const propsParam = j.identifier("_props");
+    ensureParamType(propsParam, propsType, j);
+    newFunction.params.push(propsParam);
+  }
+
+  if (arrowFn.returnType) {
+    newFunction.returnType = arrowFn.returnType;
+  }
+
+  // Preserve type parameters (generics) from arrow function
+  if (arrowFn.typeParameters) {
+    newFunction.typeParameters = arrowFn.typeParameters;
+  }
+
+  newFunction.async = arrowFn.async;
+  newFunction.generator = arrowFn.generator;
+
+  return newFunction;
+}
+
+function containsJsx(j: JSCodeshift, body: ASTNode) {
+  return (
+    j(body).find(j.JSXElement).paths().length > 0 ||
+    j(body).find(j.JSXFragment).paths().length > 0
+  );
+}
+
+function toFunctionExpression(
+  j: JSCodeshift,
+  declaration: FunctionDeclaration
+) {
+  const expression = j.functionExpression(
+    declaration.id,
+    declaration.params,
+    declaration.body,
+    declaration.generator,
+    declaration.async
+  );
+  expression.returnType = declaration.returnType;
+  expression.typeParameters = declaration.typeParameters;
+  return expression;
+}
+
+export default function transform(file: FileInfo, api: API, options: Options) {
+  const baseJ = api.jscodeshift;
+  const j =
+    typeof baseJ.withParser === "function" ? baseJ.withParser("tsx") : baseJ;
+  const root = j(file.source);
+
+  root
+    .find(j.VariableDeclaration)
+    .filter((path) => {
+      const [firstDeclaration] = path.node.declarations;
+
+      if (!j.VariableDeclarator.check(firstDeclaration)) {
+        return false;
+      }
+
+      if (
+        !j.Identifier.check(firstDeclaration.id) ||
+        !isComponentNameIdentifier(firstDeclaration.id)
+      ) {
+        return false;
+      }
+
+      const init = firstDeclaration.init;
+
+      if (!init) {
+        return false;
+      }
+
+      const functionToCheck = extractArrowFunction(init, j);
+
+      if (!functionToCheck) {
+        return false;
+      }
+
+      if (file.path && !file.path.endsWith(".tsx")) {
+        if (!containsJsx(j, functionToCheck)) {
+          return false;
+        }
+      }
+
+      return true;
+    })
+    .forEach((path) => {
+      const [firstDeclaration] = path.node.declarations;
+      if (!j.VariableDeclarator.check(firstDeclaration)) {
+        return;
+      }
+      const init = firstDeclaration.init;
+
+      if (!init) {
+        return;
+      }
+
+      let typeAnnotation: ASTNode | null | undefined;
+      if (j.Identifier.check(firstDeclaration.id)) {
+        typeAnnotation = firstDeclaration.id.typeAnnotation?.typeAnnotation;
+      }
+
+      // Try to get props type from variable type annotation first
+      let propsType: TSType | undefined = undefined;
+
+      if (
+        j.TSTypeReference.check(typeAnnotation) &&
+        isReactComponentType(typeAnnotation, j)
+      ) {
+        propsType = typeAnnotation.typeParameters?.params?.[0];
+      }
+
+      // If no props type from variable annotation, try to extract from wrapper's type parameters
+      if (!propsType) {
+        propsType = extractPropsTypeFromWrapper(init, j);
+      }
+
+      const newFunction = convertToFunction(
+        j,
+        firstDeclaration,
+        init,
+        propsType
+      );
+
+      const originalNode = path.node;
+
+      // Check if init is wrapped in a call expression (e.g., observer(...))
+      const hasWrapper = j.CallExpression.check(init);
+
+      if (hasWrapper) {
+        // Preserve the wrapper by keeping it as a const assignment
+        // e.g., export const Foo = observer(() => {}) becomes export const Foo = observer(function Foo() {...})
+
+        // Convert function declaration to function expression for wrapping
+        const functionExpression = toFunctionExpression(j, newFunction);
+
+        const wrappedFunction = j.callExpression(init.callee, [
+          functionExpression,
+          ...init.arguments.slice(1),
+        ]);
+
+        if (!j.Identifier.check(firstDeclaration.id)) {
+          return;
+        }
+
+        const newDeclarator = j.variableDeclarator(
+          j.identifier(firstDeclaration.id.name),
+          wrappedFunction
+        );
+
+        const newVarDecl = j.variableDeclaration("const", [newDeclarator]);
+
+        // Copy comments from original declaration to new function
+        copyOuterComments(originalNode, newVarDecl, j);
+
+        j(path).replaceWith(newVarDecl);
+        return;
+      }
+
+      // Copy outer comments from original declaration to new function
+      copyOuterComments(originalNode, newFunction, j);
+
+      // Copy comments from VariableDeclarator (e.g. export /* comment */ const Foo)
+      if (firstDeclaration.comments) {
+        addComments(newFunction, firstDeclaration.comments);
+      }
+
+      // Copy comments from arrow function
+      if (init.comments) {
+        addComments(newFunction, init.comments);
+      }
+
+      j(path).replaceWith(newFunction);
+    });
+
+  const quote = options.quote ?? '"';
+
+  const source = root.toSource({
+    quote,
+  });
+
+  return source;
+}
diff --git a/packages/codemods/instructions.md b/packages/codemods/instructions.md
new file mode 100644
index 0000000000..4848c203a3
--- /dev/null
+++ b/packages/codemods/instructions.md
@@ -0,0 +1,366 @@
+# jscodeshift Instructions
+
+## API Reference
+
+### Core API
+
+#### `jscodeshift`
+
+The main function that returns the jscodeshift instance.
+
+- **Parameters**: `source` (String)
+- **Example**:
+  ```javascript
+  const j = jscodeshift(sourceCode);
+  ```
+
+### Node Traversal APIs
+
+#### `find`
+
+Finds nodes that match the provided type.
+
+- **Parameters**: `type` (String or Function)
+- **Example**:
+  ```javascript
+  const variableDeclarations = j.find(j.VariableDeclaration);
+  ```
+
+#### `findImportDeclarations`
+
+Finds all ImportDeclarations optionally filtered by name.
+
+- **Parameters**: `sourcePath` (String)
+- **Example**:
+  ```javascript
+  const routerImports = j.findImportDeclarations("react-router-dom");
+  ```
+
+#### `closestScope`
+
+Finds the closest enclosing scope of a node.
+
+- **Example**:
+  ```javascript
+  const closestScopes = j.find(j.Identifier).closestScope();
+  ```
+
+#### `closest`
+
+Finds the nearest parent node that matches the specified type.
+
+- **Parameters**: `type` (String or Function)
+- **Example**:
+  ```javascript
+  const closestFunction = j.find(j.Identifier).closest(j.FunctionDeclaration);
+  ```
+
+#### `getVariableDeclarators`
+
+Retrieves variable declarators from the current collection.
+
+- **Parameters**: `callback` (Function)
+- **Example**:
+  ```javascript
+  const variableDeclarators = j.find(j.Identifier).getVariableDeclarators((path) => path.value.name);
+  ```
+
+#### `findVariableDeclarators`
+
+Finds variable declarators by name.
+
+- **Parameters**: `name` (String)
+- **Example**:
+  ```javascript
+  const variableDeclarators = j.findVariableDeclarators("a");
+  ```
+
+#### `filter`
+
+Filters nodes based on a predicate function.
+
+- **Parameters**: `predicate` (Function)
+- **Example**:
+  ```javascript
+  const constDeclarations = j.find(j.VariableDeclaration).filter((path) => path.node.kind === "const");
+  ```
+
+#### `forEach`
+
+Iterates over each node in the collection.
+
+- **Parameters**: `callback` (Function)
+- **Example**:
+  ```javascript
+  j.find(j.VariableDeclaration).forEach((path) => {
+    console.log(path.node);
+  });
+  ```
+
+#### `some`
+
+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");
+  ```
+
+#### `every`
+
+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");
+  ```
+
+#### `map`
+
+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));
+  ```
+
+#### `size`
+
+Returns the number of nodes in the collection.
+
+- **Example**:
+  ```javascript
+  const numberOfNodes = j.find(j.VariableDeclaration).size();
+  ```
+
+#### `length`
+
+Returns the number of elements in the collection.
+
+- **Example**:
+  ```javascript
+  const varCount = root.find(j.VariableDeclarator).length;
+  ```
+
+#### `nodes`
+
+Returns the AST nodes in the collection.
+
+- **Example**:
+  ```javascript
+  const nodes = j.find(j.VariableDeclaration).nodes();
+  ```
+
+#### `paths`
+
+Returns the paths of the found nodes.
+
+- **Example**:
+  ```javascript
+  const paths = j.find(j.VariableDeclaration).paths();
+  ```
+
+#### `getAST`
+
+Returns the root AST node of the collection.
+
+- **Example**:
+  ```javascript
+  const ast = root.getAST();
+  ```
+
+#### `get`
+
+Gets the first node in the collection.
+
+- **Example**:
+  ```javascript
+  const firstVariableDeclaration = j.find(j.VariableDeclaration).get();
+  ```
+
+#### `at`
+
+Navigates to a specific path in the AST.
+
+- **Parameters**: `index` (Number)
+- **Example**:
+  ```javascript
+  const secondVariableDeclaration = j.find(j.VariableDeclaration).at(1);
+  ```
+
+#### `getTypes`
+
+Returns the set of node types present in the collection.
+
+- **Example**:
+  ```javascript
+  const types = root.find(j.VariableDeclarator).getTypes();
+  ```
+
+#### `isOfType`
+
+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");
+  ```
+
+### Node Transformation APIs
+
+#### `replaceWith`
+
+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()));
+  ```
+
+#### `insertBefore`
+
+Inserts a node before the current node.
+
+- **Parameters**: `newNode` (Node)
+- **Example**:
+  ```javascript
+  j.find(j.FunctionDeclaration).insertBefore(j.expressionStatement(j.stringLiteral("Inserted before")));
+  ```
+
+#### `insertAfter`
+
+Inserts a node after the current node.
+
+- **Parameters**: `newNode` (Node)
+- **Example**:
+  ```javascript
+  j.find(j.FunctionDeclaration).insertAfter(j.expressionStatement(j.stringLiteral("Inserted after")));
+  ```
+
+#### `remove`
+
+Removes the current node(s).
+
+- **Example**:
+  ```javascript
+  j.find(j.VariableDeclaration).remove();
+  ```
+
+#### `renameTo`
+
+Renames the nodes in the collection to a new name.
+
+- **Parameters**: `newName` (String)
+- **Example**:
+  ```javascript
+  root.find(j.Identifier, { name: "a" }).renameTo("x");
+  ```
+
+#### `toSource`
+
+Converts the transformed AST back to source code.
+
+- **Parameters**: `options` (Object)
+- **Example**:
+  ```javascript
+  const transformedSource = j.toSource({ quote: "single" });
+  ```
+
+## AST Grammar
+
+jscodeshift provides 278 node types which are mapped to their corresponding node type in `ast-types`.
+
+### Common Node Types
+
+- **AnyTypeAnnotation**: A type annotation representing any type.
+- **ArrayExpression**: Represents an array literal.
+- **ArrayPattern**: A pattern that matches an array from a destructuring assignment.
+- **ArrayTypeAnnotation**: A type annotation for arrays.
+- **ArrowFunctionExpression**: An arrow function expression.
+- **AssignmentExpression**: Represents an assignment expression.
+- **AssignmentPattern**: A pattern that matches an assignment from a destructuring assignment.
+- **AwaitExpression**: Represents an await expression.
+- **BigIntLiteral**: A literal representing a big integer.
+- **BinaryExpression**: Represents a binary expression.
+- **BlockStatement**: Represents a block statement.
+- **BooleanLiteral**: A literal representing a boolean value.
+- **BreakStatement**: Represents a break statement.
+- **CallExpression**: Represents a call expression.
+- **CatchClause**: Represents a catch clause in a try statement.
+- **ClassDeclaration**: Represents a class declaration.
+- **ClassExpression**: Represents a class expression.
+- **ClassMethod**: Represents a method of a class.
+- **ClassProperty**: Represents a property of a class.
+- **Comment**: Represents a comment in the code.
+- **ConditionalExpression**: Represents a conditional expression (ternary).
+- **ContinueStatement**: Represents a continue statement.
+- **DebuggerStatement**: Represents a debugger statement.
+- **Declaration**: Represents a declaration in the code.
+- **DoWhileStatement**: Represents a do…while statement.
+- **ExportAllDeclaration**: Represents an export all declaration.
+- **ExportDeclaration**: Represents an export declaration.
+- **ExportDefaultDeclaration**: Represents an export default declaration.
+- **ExportNamedDeclaration**: Represents a named export declaration.
+- **ExpressionStatement**: Represents an expression statement.
+- **File**: Represents a file in the AST.
+- **ForInStatement**: Represents a for-in statement.
+- **ForOfStatement**: Represents a for-of statement.
+- **ForStatement**: Represents a for statement.
+- **FunctionDeclaration**: Represents a function declaration.
+- **FunctionExpression**: Represents a function expression.
+- **Identifier**: Represents an identifier.
+- **IfStatement**: Represents an if statement.
+- **ImportDeclaration**: Represents an import declaration.
+- **ImportDefaultSpecifier**: Represents a default import specifier.
+- **ImportNamespaceSpecifier**: Represents a namespace import specifier.
+- **ImportSpecifier**: Represents an import specifier.
+- **InterfaceDeclaration**: Represents an interface declaration.
+- **JSXAttribute**: Represents an attribute in a JSX element.
+- **JSXElement**: Represents a JSX element.
+- **JSXExpressionContainer**: Represents an expression container in JSX.
+- **JSXFragment**: Represents a JSX fragment.
+- **JSXIdentifier**: Represents an identifier in JSX.
+- **JSXText**: Represents text in JSX.
+- **Literal**: Represents a literal value.
+- **LogicalExpression**: Represents a logical expression.
+- **MemberExpression**: Represents a member expression.
+- **MethodDefinition**: Represents a method definition.
+- **NewExpression**: Represents a new expression.
+- **ObjectExpression**: Represents an object expression.
+- **ObjectPattern**: Represents an object pattern for destructuring.
+- **ObjectProperty**: Represents a property in an object.
+- **Program**: Represents the entire program.
+- **Property**: Represents a property in an object.
+- **ReturnStatement**: Represents a return statement.
+- **SpreadElement**: Represents a spread element in an array or function call.
+- **StringLiteral**: Represents a string literal.
+- **SwitchCase**: Represents a case in a switch statement.
+- **SwitchStatement**: Represents a switch statement.
+- **TemplateLiteral**: Represents a template literal.
+- **ThisExpression**: Represents the `this` expression.
+- **ThrowStatement**: Represents a throw statement.
+- **TryStatement**: Represents a try statement.
+- **TSAnyKeyword**: Represents the TypeScript `any` keyword.
+- **TSArrayType**: Represents a TypeScript array type.
+- **TSAsExpression**: Represents a TypeScript as-expression.
+- **TSBooleanKeyword**: Represents the TypeScript `boolean` keyword.
+- **TSDeclareFunction**: Represents a TypeScript function declaration.
+- **TSEnumDeclaration**: Represents a TypeScript enum declaration.
+- **TSInterfaceDeclaration**: Represents a TypeScript interface declaration.
+- **TSNumberKeyword**: Represents the TypeScript `number` keyword.
+- **TSStringKeyword**: Represents the TypeScript `string` keyword.
+- **TSTypeAliasDeclaration**: Represents a TypeScript type alias declaration.
+- **TSTypeAnnotation**: Represents a TypeScript type annotation.
+- **TSTypeReference**: Represents a type reference in TypeScript.
+- **TSUnionType**: Represents a union type in TypeScript.
+- **UnaryExpression**: Represents a unary expression.
+- **VariableDeclaration**: Represents a variable declaration.
+- **VariableDeclarator**: Represents a variable declarator.
+- **WhileStatement**: Represents a while statement.
+
+For a complete list and detailed structure of each node, refer to the [AST Grammar documentation](https://jscodeshift.com/build/ast-grammar/).
diff --git a/packages/codemods/package.json b/packages/codemods/package.json
new file mode 100644
index 0000000000..e2bac61cd8
--- /dev/null
+++ b/packages/codemods/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "@plane/codemods",
+  "version": "1.2.0",
+  "private": true,
+  "scripts": {
+    "test": "vitest run",
+    "function-declaration": "jscodeshift -t ./function-declaration.ts --extensions=tsx --parser=tsx ../../apps/*/app ../../apps/*/ce ../../apps/*/core ../../apps/*/ee ../../apps/*/helpers ../../packages/*/src --ignore-pattern='**/node_modules/**' --ignore-pattern='**/dist/**' --ignore-pattern='**/build/**' --ignore-pattern='**/*.d.ts'",
+    "remove-directives": "jscodeshift -t ./remove-directives.ts --extensions=ts,tsx --parser=tsx ../../apps/*/app ../../apps/*/ce ../../apps/*/core ../../apps/*/ee ../../apps/*/helpers ../../apps/*/src ../../packages/*/src --ignore-pattern='**/node_modules/**' --ignore-pattern='**/dist/**' --ignore-pattern='**/build/**' --ignore-pattern='**/*.d.ts'"
+  },
+  "devDependencies": {
+    "@hypermod/utils": "^0.7.1",
+    "@types/jscodeshift": "^17.3.0",
+    "ast-types": "0.14.2",
+    "jscodeshift": "^17.3.0",
+    "vitest": "^4.0.8"
+  }
+}
diff --git a/packages/codemods/remove-directives.ts b/packages/codemods/remove-directives.ts
new file mode 100644
index 0000000000..3e1e48ca80
--- /dev/null
+++ b/packages/codemods/remove-directives.ts
@@ -0,0 +1,97 @@
+import { API, FileInfo, Options } from "jscodeshift";
+import type { CommentKind, DirectiveKind } from "ast-types/gen/kinds";
+
+export default function transform(file: FileInfo, api: API, options: Options) {
+    const j = api.jscodeshift;
+    const root = j(file.source);
+
+    const directivesToRemove = new Set(["use client", "use server", "use-client", "use-server"]);
+
+    root.find(j.Program).forEach((path) => {
+        // Handle ASTs where directives are stored in 'directives' property (Babel/TS)
+        if (path.node.directives) {
+            const newDirectives: DirectiveKind[] = [];
+            let capturedComments: CommentKind[] = [];
+
+            path.node.directives.forEach((directive) => {
+                if (directive.type === 'Directive' && directive.value.type === 'DirectiveLiteral' && typeof directive.value.value === 'string' && directivesToRemove.has(directive.value.value)) {
+                    // Directive is being removed. Capture its comments.
+                    if (directive.comments) {
+                        capturedComments.push(...directive.comments);
+                    }
+                } else {
+                    // Keep this directive
+                    // If we have captured comments from previous removed directives, attach them here?
+                    // Usually comments belong to the next node.
+                    if (capturedComments.length > 0) {
+                        directive.comments = directive.comments || [];
+                        directive.comments.unshift(...capturedComments);
+                        capturedComments = [];
+                    }
+                    newDirectives.push(directive);
+                }
+            });
+
+            path.node.directives = newDirectives;
+
+            // If we still have captured comments (e.g. all directives removed, or last one removed),
+            // attach them to the first body node.
+            if (capturedComments.length > 0) {
+                if (path.node.body.length > 0) {
+                    const firstBodyNode = path.node.body[0];
+                    if (firstBodyNode) {
+                        firstBodyNode.comments = firstBodyNode.comments || [];
+                        firstBodyNode.comments.unshift(...capturedComments);
+                    }
+                } else {
+                    // If empty body, attach to Program?
+                    // jscodeshift might not print Program comments easily if they are not attached to children.
+                    // But let's try attaching to the Program node itself if possible, or leave them (they might be lost).
+                    path.node.comments = path.node.comments || [];
+                    path.node.comments.push(...capturedComments);
+                }
+            }
+        }
+
+        // Also handle the case where they might be in body as ExpressionStatements
+        if (path.node.body) {
+            const newBody: any[] = [];
+            let capturedComments: any[] = [];
+
+            path.node.body.forEach((node) => {
+                let shouldRemove = false;
+                if (j.ExpressionStatement.check(node)) {
+                    const expression = node.expression;
+                    if (j.StringLiteral.check(expression) && directivesToRemove.has(expression.value)) {
+                        shouldRemove = true;
+                    } else if (j.Literal.check(expression) && typeof expression.value === 'string' && directivesToRemove.has(expression.value)) {
+                        shouldRemove = true;
+                    }
+                }
+
+                if (shouldRemove) {
+                    if (node.comments) {
+                        capturedComments.push(...node.comments);
+                    }
+                } else {
+                    if (capturedComments.length > 0) {
+                        node.comments = node.comments || [];
+                        node.comments.unshift(...capturedComments);
+                        capturedComments = [];
+                    }
+                    newBody.push(node);
+                }
+            });
+
+            // If comments left at the end (e.g. removed last statement), usually they are trailing comments of the file.
+            // But if we removed the ONLY statement, they become dangling.
+            // We attached to next node, so if we are at the end, there is no next node.
+            // If we removed a directive at the top, and there are more statements, they got attached.
+
+            path.node.body = newBody;
+        }
+    });
+
+    return root.toSource(options);
+}
+
diff --git a/packages/codemods/tests/function-declaration.spec.ts b/packages/codemods/tests/function-declaration.spec.ts
new file mode 100644
index 0000000000..31473548a5
--- /dev/null
+++ b/packages/codemods/tests/function-declaration.spec.ts
@@ -0,0 +1,566 @@
+import { describe, it, expect } from "vitest";
+import { applyTransform } from "@hypermod/utils";
+import * as transformer from "../function-declaration";
+
+describe("function-declaration", () => {
+  it("should convert arrow function components to function declarations", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import React from "react";
+
+      export const MyComponent: React.FC<{}> = () => {
+        return <div>Hello, world!</div>;
+      };
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import React from "react";
+
+            export function MyComponent() {
+              return <div>Hello, world!</div>;
+            }"
+    `);
+  });
+
+  it("should handle components with props", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import React from "react";
+
+      interface IMyComponentProps {
+        name: string;
+      }
+
+      export const MyComponent: React.FC<IMyComponentProps> = ({ name }) => {
+        return <div>Hello, {name}!</div>;
+      };
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import React from "react";
+
+            interface IMyComponentProps {
+              name: string;
+            }
+
+            export function MyComponent(
+              {
+                name
+              }: IMyComponentProps
+            ) {
+              return <div>Hello, {name}!</div>;
+            }"
+    `);
+  });
+
+  it("should preserve default props", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import React from "react";
+
+      interface IMyComponentProps {
+        name?: string;
+      }
+
+      export const MyComponent: React.FC<IMyComponentProps> = ({ name = "world" }) => {
+        return <div>Hello, {name}!</div>;
+      };
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import React from "react";
+
+            interface IMyComponentProps {
+              name?: string;
+            }
+
+            export function MyComponent(
+              {
+                name = "world"
+              }: IMyComponentProps
+            ) {
+              return <div>Hello, {name}!</div>;
+            }"
+    `);
+  });
+
+  it("should not transform non-component arrow functions", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      const myFunction = () => {
+        return "hello";
+      };
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "const myFunction = () => {
+              return "hello";
+            };"
+    `);
+  });
+
+  it("should handle observer-wrapped components", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import { observer } from "mobx-react";
+
+      export const WorkspaceAnalyticsHeader = observer(() => {
+        return <div>Analytics</div>;
+      });
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import { observer } from "mobx-react";
+
+            export const WorkspaceAnalyticsHeader = observer(function WorkspaceAnalyticsHeader() {
+              return <div>Analytics</div>;
+            });"
+    `);
+  });
+
+  it("should handle inline arrow function components", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      export const StarUsOnGitHubLink = () => {
+        return <a href="https://github.com">Star us</a>;
+      };
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "export function StarUsOnGitHubLink() {
+              return <a href="https://github.com">Star us</a>;
+            }"
+    `);
+  });
+
+  it("should handle React.FC type without generics", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import type { FC } from "react";
+
+      export const ProjectAppSidebar: FC = observer(() => {
+        return <div>Sidebar</div>;
+      });
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import type { FC } from "react";
+
+            export const ProjectAppSidebar = observer(function ProjectAppSidebar() {
+              return <div>Sidebar</div>;
+            });"
+    `);
+  });
+
+  it("should handle inline JSX arrow function", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      export const DateAlert = (props: TDateAlertProps) => <></>;
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "export function DateAlert(props: TDateAlertProps) {
+                  return <></>;
+            }"
+    `);
+  });
+
+  it("should handle observer with generic type parameters", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import { observer } from "mobx-react";
+
+      export const InstanceProvider = observer<React.FC<React.PropsWithChildren>>((props) => {
+        const { children } = props;
+        return <>{children}</>;
+      });
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import { observer } from "mobx-react";
+
+            export const InstanceProvider = observer(function InstanceProvider(props: React.PropsWithChildren) {
+              const { children } = props;
+              return <>{children}</>;
+            });"
+    `);
+  });
+
+  it("should not add double semicolons after use client directive", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      "use client";
+      import { observer } from "mobx-react";
+
+      export const MyComponent = observer(() => {
+        return <div>Hello</div>;
+      });
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      ""use client";
+            import { observer } from "mobx-react";
+
+            export const MyComponent = observer(function MyComponent() {
+              return <div>Hello</div>;
+            });"
+    `);
+  });
+
+  it("should preserve generic type parameters in wrapper functions", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import React from "react";
+
+      export const ScatterChart = React.memo(<K extends string, T extends string>(props: TScatterChartProps<K, T>) => {
+        return <div>Chart</div>;
+      });
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import React from "react";
+
+            export const ScatterChart = React.memo(
+              function ScatterChart<K extends string, T extends string>(props: TScatterChartProps<K, T>) {
+                return <div>Chart</div>;
+              }
+            );"
+    `);
+  });
+
+  it("should preserve generic type parameters on React.forwardRef", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import React from "react";
+
+      const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+        return <button ref={ref}>Click me</button>;
+      });
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import React from "react";
+
+            const Button = React.forwardRef(
+              function Button(props: ButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) {
+                return <button ref={ref}>Click me</button>;
+              }
+            );"
+    `);
+  });
+
+  it("should prefix unused props parameter with underscore", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import type { TCallbackMentionComponentProps } from "@plane/editor";
+
+      export const EditorAdditionalMentionsRoot: React.FC<TCallbackMentionComponentProps> = () => null;
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import type { TCallbackMentionComponentProps } from "@plane/editor";
+
+            export function EditorAdditionalMentionsRoot(_props: TCallbackMentionComponentProps) {
+                  return null;
+            }"
+    `);
+  });
+
+  it("should add Record<string, unknown> type for React.forwardRef with only element type", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import { forwardRef } from "react";
+
+      const ListLoaderItemRow = forwardRef<HTMLDivElement>((props, ref) => (
+        <div ref={ref}>Content</div>
+      ));
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import { forwardRef } from "react";
+
+            const ListLoaderItemRow = forwardRef(
+              function ListLoaderItemRow(props: Record<string, unknown>, ref: React.ForwardedRef<HTMLDivElement>) {
+                return (<div ref={ref}>Content</div>);
+              }
+            );"
+    `);
+  });
+
+  it("should preserve comments in function body", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      export const PreloadResources = () => (
+        // usePreloadResources();
+        null
+      );
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "export function PreloadResources() {
+              return (
+                // usePreloadResources();
+                (null)
+              );
+            }"
+    `);
+  });
+
+  it("should preserve leading comments before export declaration", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+"use client";
+
+// TODO: Check if we need this
+// https://nextjs.org/docs/app/api-reference/functions/generate-metadata#link-relpreload
+// export const usePreloadResources = () => {
+//   useEffect(() => {
+//     const preloadItem = (url: string) => {
+//       ReactDOM.preload(url, { as: "fetch", crossOrigin: "use-credentials" });
+//     };
+//
+//     const urls = [
+//       \`\${process.env.VITE_API_BASE_URL}/api/instances/\`,
+//       \`\${process.env.VITE_API_BASE_URL}/api/users/me/\`,
+//       \`\${process.env.VITE_API_BASE_URL}/api/users/me/profile/\`,
+//       \`\${process.env.VITE_API_BASE_URL}/api/users/me/settings/\`,
+//       \`\${process.env.VITE_API_BASE_URL}/api/users/me/workspaces/?v=\${Date.now()}\`,
+//     ];
+//
+//     urls.forEach((url) => preloadItem(url));
+//   }, []);
+// };
+
+export const PreloadResources = () =>
+  // usePreloadResources();
+  null;
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      ""use client";
+
+      // TODO: Check if we need this
+      // https://nextjs.org/docs/app/api-reference/functions/generate-metadata#link-relpreload
+      // export const usePreloadResources = () => {
+      //   useEffect(() => {
+      //     const preloadItem = (url: string) => {
+      //       ReactDOM.preload(url, { as: "fetch", crossOrigin: "use-credentials" });
+      //     };
+      //
+      //     const urls = [
+      //       \`\${process.env.VITE_API_BASE_URL}/api/instances/\`,
+      //       \`\${process.env.VITE_API_BASE_URL}/api/users/me/\`,
+      //       \`\${process.env.VITE_API_BASE_URL}/api/users/me/profile/\`,
+      //       \`\${process.env.VITE_API_BASE_URL}/api/users/me/settings/\`,
+      //       \`\${process.env.VITE_API_BASE_URL}/api/users/me/workspaces/?v=\${Date.now()}\`,
+      //     ];
+      //
+      //     urls.forEach((url) => preloadItem(url));
+      //   }, []);
+      // };
+
+      export function PreloadResources() {
+        return (
+          // usePreloadResources();
+          null
+        );
+      }"
+    `);
+  });
+
+  it("should preserve leading comments before wrapped export declaration", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+// This is a wrapped component
+// It uses observer for reactivity
+export const MyObserverComponent = observer(() => {
+  return <div>Observer component</div>;
+});
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "// This is a wrapped component
+      // It uses observer for reactivity
+      export const MyObserverComponent = observer(function MyObserverComponent() {
+        return <div>Observer component</div>;
+      });"
+    `);
+  });
+
+  it("should preserve trailing comments on exported variable declaration", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      export const Foo = () => <div />; // trailing comment
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toContain("// trailing comment");
+  });
+
+  it("should preserve leading comments on exported variable declaration inside export", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      export /* leading comment */ const Foo = () => <div />;
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toContain("/* leading comment */");
+  });
+
+  it("should preserve dependency arrays when transforming wrapped components", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import { useMemo } from "react";
+
+      const MyComponent = useMemo(() => {
+        return () => <div>Hello</div>;
+      }, [dep]);
+      `,
+      { parser: "tsx", path: "file.tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import { useMemo } from "react";
+
+            const MyComponent = useMemo(function MyComponent() {
+              return () => <div>Hello</div>;
+            }, [dep]);"
+    `);
+  });
+
+  it("should preserve dependency arrays for constants that look like components", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import { useMemo } from "react";
+
+      const ACTION_HANDLERS = useMemo(function ACTION_HANDLERS() {
+        return {
+          archived: () => {},
+        };
+      }, []);
+      `,
+      { parser: "tsx", path: "file.tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import { useMemo } from "react";
+
+            const ACTION_HANDLERS = useMemo(function ACTION_HANDLERS() {
+              return {
+                archived: () => {},
+              };
+            }, []);"
+    `);
+  });
+
+  it("should handle memo with generic type arguments correctly", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import { memo } from "react";
+
+      type TAccessMenuProps = {
+        currentAccess: number;
+      };
+
+      export const AccessMenu = memo<TAccessMenuProps>(
+        ({ currentAccess }) => {
+          return <div>{currentAccess}</div>;
+        }
+      );
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import { memo } from "react";
+
+            type TAccessMenuProps = {
+              currentAccess: number;
+            };
+
+            export const AccessMenu = memo(function AccessMenu(
+              {
+                currentAccess
+              }: TAccessMenuProps
+            ) {
+              return <div>{currentAccess}</div>;
+            });"
+    `);
+  });
+
+  it("should not transform CONSTANT_CASE variables", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      export const MY_CONSTANT = () => {
+        return "value";
+      };
+      `,
+      { parser: "tsx" }
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "export const MY_CONSTANT = () => {
+              return "value";
+            };"
+    `);
+  });
+});
diff --git a/packages/codemods/tests/remove-directives.spec.ts b/packages/codemods/tests/remove-directives.spec.ts
new file mode 100644
index 0000000000..8dfe6bd425
--- /dev/null
+++ b/packages/codemods/tests/remove-directives.spec.ts
@@ -0,0 +1,290 @@
+import { describe, it, expect } from "vitest";
+import { applyTransform } from "@hypermod/utils";
+import * as transformer from "../remove-directives";
+
+describe("remove-directives", () => {
+  it("should remove 'use client' directive", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      "use client";
+      import React from "react";
+
+      export const MyComponent = () => {
+        return <div>Hello, world!</div>;
+      };
+      `,
+      { parser: "tsx" },
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import React from "react";
+
+            export const MyComponent = () => {
+              return <div>Hello, world!</div>;
+            };"
+    `);
+  });
+
+  it("should remove 'use server' directive", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      "use server";
+      import db from "./db";
+
+      export const getData = async () => {
+        return db.query("SELECT * FROM users");
+      };
+      `,
+      { parser: "ts" },
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import db from "./db";
+
+            export const getData = async () => {
+              return db.query("SELECT * FROM users");
+            };"
+    `);
+  });
+
+  it("should remove 'use client' directive with single quotes", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      'use client';
+      import React from "react";
+
+      export const MyComponent = () => {
+        return <div>Hello, world!</div>;
+      };
+      `,
+      { parser: "tsx" },
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import React from "react";
+
+            export const MyComponent = () => {
+              return <div>Hello, world!</div>;
+            };"
+    `);
+  });
+
+  it("should remove multiple directives", async () => {
+      const result = await applyTransform(
+        transformer,
+        `
+        "use client";
+        "use strict";
+        import React from "react";
+
+        export const MyComponent = () => {
+          return <div>Hello, world!</div>;
+        };
+        `,
+        { parser: "tsx" },
+      );
+
+      expect(result).toMatchInlineSnapshot(`
+        ""use strict";;
+                import React from "react";
+
+                export const MyComponent = () => {
+                  return <div>Hello, world!</div>;
+                };"
+      `);
+    });
+
+  it("should ignore directives inside functions", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      import React from "react";
+
+      export const MyComponent = () => {
+        "use client";
+        return <div>Hello, world!</div>;
+      };
+      `,
+      { parser: "tsx" },
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import React from "react";
+
+            export const MyComponent = () => {
+              "use client";
+              return <div>Hello, world!</div>;
+            };"
+    `);
+  });
+  
+  it("should preserve comments", async () => {
+     const result = await applyTransform(
+      transformer,
+      `
+      // comment before
+      "use client";
+      // comment after
+      import React from "react";
+      `,
+      { parser: "tsx" }
+     );
+     
+     expect(result).toMatchInlineSnapshot(`
+       "// comment before
+             // comment after
+             import React from "react";"
+     `);
+  });
+
+  it("should remove 'use-client' directive with hyphen", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      "use-client";
+      import type { FC } from "react";
+      // types
+      import type { TDeDupeIssue } from "@plane/types";
+
+      type TDuplicateModalRootProps = {
+        workspaceSlug: string;
+        issues: TDeDupeIssue[];
+        handleDuplicateIssueModal: (value: boolean) => void;
+      };
+
+      export function DuplicateModalRoot(props: TDuplicateModalRootProps) {
+        const { workspaceSlug, issues, handleDuplicateIssueModal } = props;
+        return <></>;
+      }
+      `,
+      { parser: "tsx" },
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import type { FC } from "react";
+            // types
+            import type { TDeDupeIssue } from "@plane/types";
+
+            type TDuplicateModalRootProps = {
+              workspaceSlug: string;
+              issues: TDeDupeIssue[];
+              handleDuplicateIssueModal: (value: boolean) => void;
+            };
+
+            export function DuplicateModalRoot(props: TDuplicateModalRootProps) {
+              const { workspaceSlug, issues, handleDuplicateIssueModal } = props;
+              return <></>;
+            }"
+    `);
+  });
+
+  it("should remove 'use-client' directive with hyphen and single quotes", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      'use-client';
+      import type { FC } from "react";
+      import { useState } from "react";
+      // plane imports
+      import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+
+      export function MyComponent() {
+        return <div>Hello</div>;
+      }
+      `,
+      { parser: "tsx" },
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import type { FC } from "react";
+            import { useState } from "react";
+            // plane imports
+            import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+
+            export function MyComponent() {
+              return <div>Hello</div>;
+            }"
+    `);
+  });
+
+  it("should remove 'use-server' directive with hyphen", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      "use-server";
+      import db from "./db";
+
+      export const getData = async () => {
+        return db.query("SELECT * FROM users");
+      };
+      `,
+      { parser: "ts" },
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import db from "./db";
+
+            export const getData = async () => {
+              return db.query("SELECT * FROM users");
+            };"
+    `);
+  });
+
+  it("should handle 'use-client' in modal component structure", async () => {
+    const result = await applyTransform(
+      transformer,
+      `
+      "use-client";
+
+      import type { FC } from "react";
+      import { useState } from "react";
+      // plane imports
+      import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+      // hooks
+      import useKeypress from "@/hooks/use-keypress";
+      // local imports
+      import { InboxIssueCreateRoot } from "./create-root";
+
+      type TInboxIssueCreateModalRoot = {
+        workspaceSlug: string;
+        projectId: string;
+        modalState: boolean;
+        handleModalClose: () => void;
+      };
+
+      export function InboxIssueCreateModalRoot(props: TInboxIssueCreateModalRoot) {
+        const { workspaceSlug, projectId, modalState, handleModalClose } = props;
+        return <></>;
+      }
+      `,
+      { parser: "tsx" },
+    );
+
+    expect(result).toMatchInlineSnapshot(`
+      "import type { FC } from "react";
+            import { useState } from "react";
+            // plane imports
+            import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
+            // hooks
+            import useKeypress from "@/hooks/use-keypress";
+            // local imports
+            import { InboxIssueCreateRoot } from "./create-root";
+
+            type TInboxIssueCreateModalRoot = {
+              workspaceSlug: string;
+              projectId: string;
+              modalState: boolean;
+              handleModalClose: () => void;
+            };
+
+            export function InboxIssueCreateModalRoot(props: TInboxIssueCreateModalRoot) {
+              const { workspaceSlug, projectId, modalState, handleModalClose } = props;
+              return <></>;
+            }"
+    `);
+  });
+});
+
diff --git a/packages/codemods/tsconfig.json b/packages/codemods/tsconfig.json
new file mode 100644
index 0000000000..07945fef92
--- /dev/null
+++ b/packages/codemods/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  }
+}
diff --git a/packages/codemods/vitest.config.ts b/packages/codemods/vitest.config.ts
new file mode 100644
index 0000000000..f624398e8d
--- /dev/null
+++ b/packages/codemods/vitest.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "node",
+  },
+});
diff --git a/packages/constants/.eslintignore b/packages/constants/.eslintignore
deleted file mode 100644
index 31ca214177..0000000000
--- a/packages/constants/.eslintignore
+++ /dev/null
@@ -1,4 +0,0 @@
-node_modules
-build/*
-dist/*
-out/*
diff --git a/packages/constants/.eslintrc.js b/packages/constants/.eslintrc.js
deleted file mode 100644
index ba0e590e8e..0000000000
--- a/packages/constants/.eslintrc.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["@plane/eslint-config/library.js"],
-};
diff --git a/packages/constants/.prettierignore b/packages/constants/.prettierignore
index e841c6b328..b0b8bc622a 100644
--- a/packages/constants/.prettierignore
+++ b/packages/constants/.prettierignore
@@ -1,5 +1,10 @@
-.next
-.turbo
-out/
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
 dist/
-build/
\ No newline at end of file
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/constants/.prettierrc b/packages/constants/.prettierrc
deleted file mode 100644
index 87d988f1b2..0000000000
--- a/packages/constants/.prettierrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "printWidth": 120,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}
diff --git a/packages/constants/package.json b/packages/constants/package.json
index 4e498758c0..abce9b9577 100644
--- a/packages/constants/package.json
+++ b/packages/constants/package.json
@@ -1,37 +1,34 @@
 {
   "name": "@plane/constants",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": true,
   "license": "AGPL-3.0",
+  "type": "module",
   "scripts": {
     "dev": "tsdown --watch",
     "build": "tsdown",
-    "check:lint": "eslint . --max-warnings 0",
+    "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=30",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check \"**/*.{ts,tsx,md,json,css,scss}\"",
-    "fix:lint": "eslint . --fix",
-    "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\"",
+    "check:format": "prettier . --cache --check",
+    "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=30",
+    "fix:format": "prettier . --cache --write",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
     "@plane/types": "workspace:*"
   },
   "devDependencies": {
-    "@plane/eslint-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "tsdown": "catalog:",
     "typescript": "catalog:"
   },
-  "main": "./dist/index.js",
+  "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
+  "types": "./dist/index.d.mts",
   "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    },
+    ".": "./dist/index.mjs",
     "./package.json": "./package.json"
   }
 }
diff --git a/packages/constants/src/auth/core.ts b/packages/constants/src/auth/core.ts
new file mode 100644
index 0000000000..a769348792
--- /dev/null
+++ b/packages/constants/src/auth/core.ts
@@ -0,0 +1,10 @@
+import type { TCoreLoginMediums } from "@plane/types";
+
+export const CORE_LOGIN_MEDIUM_LABELS: Record<TCoreLoginMediums, string> = {
+  email: "Email",
+  "magic-code": "Magic code",
+  github: "GitHub",
+  gitlab: "GitLab",
+  google: "Google",
+  gitea: "Gitea",
+};
diff --git a/packages/constants/src/auth/extended.ts b/packages/constants/src/auth/extended.ts
new file mode 100644
index 0000000000..97eb974bd1
--- /dev/null
+++ b/packages/constants/src/auth/extended.ts
@@ -0,0 +1,3 @@
+import type { TExtendedLoginMediums } from "@plane/types";
+
+export const EXTENDED_LOGIN_MEDIUM_LABELS: Record<TExtendedLoginMediums, string> = {};
diff --git a/packages/constants/src/auth.ts b/packages/constants/src/auth/index.ts
similarity index 93%
rename from packages/constants/src/auth.ts
rename to packages/constants/src/auth/index.ts
index 953375c0e5..2c52598e33 100644
--- a/packages/constants/src/auth.ts
+++ b/packages/constants/src/auth/index.ts
@@ -1,3 +1,7 @@
+import type { TLoginMediums } from "@plane/types";
+import { CORE_LOGIN_MEDIUM_LABELS } from "./core";
+import { EXTENDED_LOGIN_MEDIUM_LABELS } from "./extended";
+
 export enum E_PASSWORD_STRENGTH {
   EMPTY = "empty",
   LENGTH_NOT_VALID = "length_not_valid",
@@ -156,3 +160,8 @@ export enum EAuthErrorCodes {
   // Rate limit
   RATE_LIMIT_EXCEEDED = "5900",
 }
+
+export const LOGIN_MEDIUM_LABELS: Record<TLoginMediums, string> = {
+  ...CORE_LOGIN_MEDIUM_LABELS,
+  ...EXTENDED_LOGIN_MEDIUM_LABELS,
+} as const;
diff --git a/packages/constants/src/chart.ts b/packages/constants/src/chart.ts
index 67141cd57a..a42cfb5f1b 100644
--- a/packages/constants/src/chart.ts
+++ b/packages/constants/src/chart.ts
@@ -1,8 +1,8 @@
 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 752f23dbee..4f85351959 100644
--- a/packages/constants/src/cycle.ts
+++ b/packages/constants/src/cycle.ts
@@ -36,7 +36,7 @@ export const CYCLE_STATUS: {
     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/graph.ts b/packages/constants/src/graph.ts
index 1ed7e4f9dd..43058bdf86 100644
--- a/packages/constants/src/graph.ts
+++ b/packages/constants/src/graph.ts
@@ -1,27 +1,27 @@
 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/issue/filter.ts b/packages/constants/src/issue/filter.ts
index 54775ac557..5a8c35a4fd 100644
--- a/packages/constants/src/issue/filter.ts
+++ b/packages/constants/src/issue/filter.ts
@@ -61,31 +61,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",
   },
 ];
diff --git a/packages/constants/src/module.ts b/packages/constants/src/module.ts
index 1d9a7ab960..833a5cec53 100644
--- a/packages/constants/src/module.ts
+++ b/packages/constants/src/module.ts
@@ -23,8 +23,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,8 +44,8 @@ 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",
diff --git a/packages/constants/src/project.ts b/packages/constants/src/project.ts
index b7dd9d6644..f28f5c9336 100644
--- a/packages/constants/src/project.ts
+++ b/packages/constants/src/project.ts
@@ -1,7 +1,6 @@
 // plane imports
-import type { IProject, TProjectAppliedDisplayFilterKeys, TProjectOrderByOptions } from "@plane/types";
+import type { TProjectAppliedDisplayFilterKeys, TProjectOrderByOptions } from "@plane/types";
 // local imports
-import { RANDOM_EMOJI_CODES } from "./emoji";
 
 export type TNetworkChoiceIconKey = "Lock" | "Globe2";
 
@@ -61,25 +60,6 @@ export const PROJECT_AUTOMATION_MONTHS = [
   { i18n_label: "workspace_projects.common.months_count", value: 12 },
 ];
 
-export const PROJECT_UNSPLASH_COVERS = [
-  "https://images.unsplash.com/photo-1531045535792-b515d59c3d1f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
-  "https://images.unsplash.com/photo-1693027407934-e3aa8a54c7ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
-  "https://images.unsplash.com/photo-1518837695005-2083093ee35b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
-  "https://images.unsplash.com/photo-1464925257126-6450e871c667?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
-  "https://images.unsplash.com/photo-1606768666853-403c90a981ad?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
-  "https://images.unsplash.com/photo-1627556592933-ffe99c1cd9eb?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
-  "https://images.unsplash.com/photo-1643330683233-ff2ac89b002c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
-  "https://images.unsplash.com/photo-1542202229-7d93c33f5d07?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
-  "https://images.unsplash.com/photo-1511497584788-876760111969?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
-  "https://images.unsplash.com/photo-1475738972911-5b44ce984c42?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
-  "https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
-  "https://images.unsplash.com/photo-1673393058808-50e9baaf4d2c?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
-  "https://images.unsplash.com/photo-1696643830146-44a8755f1905?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80",
-  "https://images.unsplash.com/photo-1693868769698-6c7440636a09?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
-  "https://images.unsplash.com/photo-1691230995681-480d86cbc135?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
-  "https://images.unsplash.com/photo-1675351066828-6fc770b90dd2?auto=format&fit=crop&q=80&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=870&q=80",
-];
-
 export const PROJECT_ORDER_BY_OPTIONS: {
   key: TProjectOrderByOptions;
   i18n_label: string;
@@ -135,21 +115,6 @@ export const PROJECT_ERROR_MESSAGES = {
   },
 };
 
-export const DEFAULT_PROJECT_FORM_VALUES: Partial<IProject> = {
-  cover_image_url: PROJECT_UNSPLASH_COVERS[Math.floor(Math.random() * PROJECT_UNSPLASH_COVERS.length)],
-  description: "",
-  logo_props: {
-    in_use: "emoji",
-    emoji: {
-      value: RANDOM_EMOJI_CODES[Math.floor(Math.random() * RANDOM_EMOJI_CODES.length)],
-    },
-  },
-  identifier: "",
-  name: "",
-  network: 2,
-  project_lead: null,
-};
-
 export enum EProjectFeatureKey {
   WORK_ITEMS = "work_items",
   CYCLES = "cycles",
diff --git a/packages/constants/src/workspace.ts b/packages/constants/src/workspace.ts
index 15aee9d82c..9610333c0e 100644
--- a/packages/constants/src/workspace.ts
+++ b/packages/constants/src/workspace.ts
@@ -254,7 +254,7 @@ export const WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS: Record<string, IWorkspa
     labelTranslationKey: "views",
     href: `/workspace-views/all-issues/`,
     access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
-    highlight: (pathname: string, url: string) => pathname === url,
+    highlight: (pathname: string, url: string) => pathname.includes(url),
   },
   analytics: {
     key: "analytics",
@@ -263,13 +263,6 @@ export const WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS: Record<string, IWorkspa
     access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
     highlight: (pathname: string, url: string) => pathname.includes(url),
   },
-  drafts: {
-    key: "drafts",
-    labelTranslationKey: "drafts",
-    href: `/drafts/`,
-    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
-    highlight: (pathname: string, url: string) => pathname.includes(url),
-  },
   archives: {
     key: "archives",
     labelTranslationKey: "archives",
@@ -280,10 +273,9 @@ export const WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS: Record<string, IWorkspa
 };
 
 export const WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS_LINKS: IWorkspaceSidebarNavigationItem[] = [
-  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["views"]!,
-  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["analytics"]!,
-  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["drafts"]!,
-  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["archives"]!,
+  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["views"],
+  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["analytics"],
+  WORKSPACE_SIDEBAR_DYNAMIC_NAVIGATION_ITEMS["archives"],
 ];
 
 export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS: Record<string, IWorkspaceSidebarNavigationItem> = {
@@ -308,6 +300,20 @@ export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS: Record<string, IWorkspac
     access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
     highlight: (pathname: string, url: string) => pathname.includes(url),
   },
+  stickies: {
+    key: "stickies",
+    labelTranslationKey: "sidebar.stickies",
+    href: `/stickies/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.GUEST],
+    highlight: (pathname: string, url: string) => pathname.includes(url),
+  },
+  drafts: {
+    key: "drafts",
+    labelTranslationKey: "drafts",
+    href: `/drafts/`,
+    access: [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER],
+    highlight: (pathname: string, url: string) => pathname.includes(url),
+  },
   projects: {
     key: "projects",
     labelTranslationKey: "projects",
@@ -318,13 +324,11 @@ export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS: Record<string, IWorkspac
 };
 
 export const WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS_LINKS: IWorkspaceSidebarNavigationItem[] = [
-  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["home"]!,
-  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["inbox"]!,
-  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["your-work"]!,
+  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["home"],
 ];
 
 export const WORKSPACE_SIDEBAR_STATIC_PINNED_NAVIGATION_ITEMS_LINKS: IWorkspaceSidebarNavigationItem[] = [
-  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["projects"]!,
+  WORKSPACE_SIDEBAR_STATIC_NAVIGATION_ITEMS["projects"],
 ];
 
 export const IS_FAVORITE_MENU_OPEN = "is_favorite_menu_open";
diff --git a/packages/constants/tsconfig.json b/packages/constants/tsconfig.json
index 076ae87754..3cb67805ac 100644
--- a/packages/constants/tsconfig.json
+++ b/packages/constants/tsconfig.json
@@ -1,12 +1,5 @@
 {
-  "extends": "@plane/typescript-config/base.json",
-  "compilerOptions": {
-    "outDir": "dist",
-    "rootDir": "src",
-    "sourceMap": true,
-    "strictNullChecks": true,
-    "allowSyntheticDefaultImports": true
-  },
+  "extends": "@plane/typescript-config/node-library.json",
   "include": ["src/**/*.ts"],
   "exclude": ["node_modules", "dist"]
 }
diff --git a/packages/constants/tsdown.config.ts b/packages/constants/tsdown.config.ts
index 9ca1c1af8e..5f7ccadb7d 100644
--- a/packages/constants/tsdown.config.ts
+++ b/packages/constants/tsdown.config.ts
@@ -2,10 +2,7 @@ import { defineConfig } from "tsdown";
 
 export default defineConfig({
   entry: ["src/index.ts"],
-  outDir: "dist",
-  format: ["esm", "cjs"],
-  exports: true,
+  format: ["esm"],
   dts: true,
-  clean: true,
-  sourcemap: false,
+  exports: true,
 });
diff --git a/packages/decorators/.eslintignore b/packages/decorators/.eslintignore
deleted file mode 100644
index 31ca214177..0000000000
--- a/packages/decorators/.eslintignore
+++ /dev/null
@@ -1,4 +0,0 @@
-node_modules
-build/*
-dist/*
-out/*
diff --git a/packages/decorators/.eslintrc.js b/packages/decorators/.eslintrc.js
deleted file mode 100644
index ba0e590e8e..0000000000
--- a/packages/decorators/.eslintrc.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["@plane/eslint-config/library.js"],
-};
diff --git a/packages/decorators/.prettierignore b/packages/decorators/.prettierignore
index 21fab153a1..b0b8bc622a 100644
--- a/packages/decorators/.prettierignore
+++ b/packages/decorators/.prettierignore
@@ -1,2 +1,10 @@
-# Ignore generated build artifacts
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
 dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/decorators/.prettierrc b/packages/decorators/.prettierrc
deleted file mode 100644
index 87d988f1b2..0000000000
--- a/packages/decorators/.prettierrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "printWidth": 120,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}
diff --git a/packages/decorators/package.json b/packages/decorators/package.json
index a3fcc3fa6d..a64ae40cae 100644
--- a/packages/decorators/package.json
+++ b/packages/decorators/package.json
@@ -4,25 +4,22 @@
   "description": "Controller and route decorators for Express.js applications",
   "license": "AGPL-3.0",
   "private": true,
+  "type": "module",
   "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    },
+    ".": "./dist/index.mjs",
     "./package.json": "./package.json"
   },
   "scripts": {
     "build": "tsdown",
     "dev": "tsdown --watch",
-    "check:lint": "eslint . --max-warnings 2",
+    "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=29",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check \"**/*.{ts,tsx,md,json,css,scss}\"",
-    "fix:lint": "eslint . --fix",
-    "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\"",
+    "check:format": "prettier . --cache --check",
+    "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=29",
+    "fix:format": "prettier . --cache --write",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "devDependencies": {
-    "@plane/eslint-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
     "@types/express": "4.17.23",
     "@types/node": "catalog:",
@@ -31,7 +28,7 @@
     "tsdown": "catalog:",
     "typescript": "catalog:"
   },
-  "main": "./dist/index.js",
+  "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts"
+  "types": "./dist/index.d.mts"
 }
diff --git a/packages/decorators/tsconfig.json b/packages/decorators/tsconfig.json
index 0fd863c96a..f87ea2e3d6 100644
--- a/packages/decorators/tsconfig.json
+++ b/packages/decorators/tsconfig.json
@@ -3,13 +3,10 @@
   "compilerOptions": {
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
-    "lib": ["ES2020"],
-    "rootDir": ".",
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
     }
   },
-  "include": ["./src", "./*.ts"],
+  "include": ["src"],
   "exclude": ["dist", "build", "node_modules"]
 }
diff --git a/packages/decorators/tsdown.config.ts b/packages/decorators/tsdown.config.ts
index 9ca1c1af8e..5f7ccadb7d 100644
--- a/packages/decorators/tsdown.config.ts
+++ b/packages/decorators/tsdown.config.ts
@@ -2,10 +2,7 @@ import { defineConfig } from "tsdown";
 
 export default defineConfig({
   entry: ["src/index.ts"],
-  outDir: "dist",
-  format: ["esm", "cjs"],
-  exports: true,
+  format: ["esm"],
   dts: true,
-  clean: true,
-  sourcemap: false,
+  exports: true,
 });
diff --git a/packages/editor/.eslintignore b/packages/editor/.eslintignore
deleted file mode 100644
index 31ca214177..0000000000
--- a/packages/editor/.eslintignore
+++ /dev/null
@@ -1,4 +0,0 @@
-node_modules
-build/*
-dist/*
-out/*
diff --git a/packages/editor/.eslintrc.cjs b/packages/editor/.eslintrc.cjs
deleted file mode 100644
index ba0e590e8e..0000000000
--- a/packages/editor/.eslintrc.cjs
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["@plane/eslint-config/library.js"],
-};
diff --git a/packages/editor/.prettierignore b/packages/editor/.prettierignore
index 3cd6b08a0f..b0b8bc622a 100644
--- a/packages/editor/.prettierignore
+++ b/packages/editor/.prettierignore
@@ -1,6 +1,10 @@
-.next
-.vercel
-.tubro
-out/
-dist/
+.next/
+.react-router/
+.turbo/
+.vite/
 build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/editor/.prettierrc b/packages/editor/.prettierrc
deleted file mode 100644
index 87d988f1b2..0000000000
--- a/packages/editor/.prettierrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "printWidth": 120,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}
diff --git a/packages/editor/package.json b/packages/editor/package.json
index 343ec75cb7..e981bfa3f6 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -1,22 +1,16 @@
 {
   "name": "@plane/editor",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Core Editor that powers Plane",
   "license": "AGPL-3.0",
   "private": true,
   "type": "module",
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "types": "./dist/index.d.cts",
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./lib": {
-      "import": "./dist/lib.js",
-      "require": "./dist/lib.cjs"
-    },
+    ".": "./dist/index.js",
+    "./lib": "./dist/lib.js",
     "./package.json": "./package.json",
     "./styles.css": "./dist/styles/index.css",
     "./styles": "./dist/styles/index.css"
@@ -24,11 +18,11 @@
   "scripts": {
     "build": "tsc && tsdown",
     "dev": "tsdown --watch",
-    "check:lint": "eslint . --max-warnings 30",
+    "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=1435",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check \"**/*.{ts,tsx,md,json,css,scss}\"",
-    "fix:lint": "eslint . --fix",
-    "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\"",
+    "check:format": "prettier . --cache --check",
+    "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=1435",
+    "fix:format": "prettier . --cache --write",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "peerDependencies": {
@@ -42,22 +36,24 @@
     "@hocuspocus/provider": "2.15.2",
     "@plane/constants": "workspace:*",
     "@plane/hooks": "workspace:*",
+    "@plane/propel": "workspace:*",
     "@plane/types": "workspace:*",
     "@plane/ui": "workspace:*",
-    "@plane/propel": "workspace:*",
     "@plane/utils": "workspace:*",
     "@tiptap/core": "catalog:",
     "@tiptap/extension-blockquote": "^2.22.3",
     "@tiptap/extension-character-count": "^2.22.3",
-    "buffer": "^6.0.3",
     "@tiptap/extension-collaboration": "^2.22.3",
+    "@tiptap/extension-document": "^2.22.3",
     "@tiptap/extension-emoji": "^2.22.3",
+    "@tiptap/extension-heading": "^2.22.3",
     "@tiptap/extension-image": "^2.22.3",
     "@tiptap/extension-list-item": "^2.22.3",
     "@tiptap/extension-mention": "^2.22.3",
     "@tiptap/extension-placeholder": "^2.22.3",
     "@tiptap/extension-task-item": "^2.22.3",
     "@tiptap/extension-task-list": "^2.22.3",
+    "@tiptap/extension-text": "^2.22.3",
     "@tiptap/extension-text-align": "^2.22.3",
     "@tiptap/extension-text-style": "^2.22.3",
     "@tiptap/extension-underline": "^2.22.3",
@@ -66,6 +62,8 @@
     "@tiptap/react": "^2.22.3",
     "@tiptap/starter-kit": "^2.22.3",
     "@tiptap/suggestion": "^2.22.3",
+    "lodash-es": "catalog:",
+    "buffer": "^6.0.3",
     "emoji-regex": "^10.3.0",
     "highlight.js": "^11.8.0",
     "is-emoji-supported": "^0.0.5",
@@ -83,12 +81,12 @@
     "yjs": "^13.6.20"
   },
   "devDependencies": {
-    "@plane/eslint-config": "workspace:*",
     "@plane/tailwind-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
+    "@types/lodash-es": "catalog:",
     "postcss": "^8.4.38",
     "tsdown": "catalog:",
     "typescript": "catalog:"
diff --git a/packages/editor/postcss.config.js b/packages/editor/postcss.config.js
index 07aa434b2b..3ad28f15f3 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/link-container.tsx b/packages/editor/src/ce/components/link-container.tsx
index a31a8c1108..4994ae1240 100644
--- a/packages/editor/src/ce/components/link-container.tsx
+++ b/packages/editor/src/ce/components/link-container.tsx
@@ -1,14 +1,16 @@
 import type { Editor } from "@tiptap/core";
 import { LinkViewContainer } from "@/components/editors/link-view-container";
 
-export const LinkContainer = ({
+export function LinkContainer({
   editor,
   containerRef,
 }: {
   editor: Editor;
   containerRef: React.RefObject<HTMLDivElement>;
-}) => (
-  <>
-    <LinkViewContainer editor={editor} containerRef={containerRef} />
-  </>
-);
+}) {
+  return (
+    <>
+      <LinkViewContainer editor={editor} containerRef={containerRef} />
+    </>
+  );
+}
diff --git a/packages/editor/src/ce/extensions/document-extensions.tsx b/packages/editor/src/ce/extensions/document-extensions.tsx
index abdb282e70..28a470c679 100644
--- a/packages/editor/src/ce/extensions/document-extensions.tsx
+++ b/packages/editor/src/ce/extensions/document-extensions.tsx
@@ -26,7 +26,7 @@ const extensionRegistry: TDocumentEditorAdditionalExtensionsRegistry[] = [
   },
 ];
 
-export const DocumentEditorAdditionalExtensions = (props: TDocumentEditorAdditionalExtensionsProps) => {
+export function DocumentEditorAdditionalExtensions(props: TDocumentEditorAdditionalExtensionsProps) {
   const { disabledExtensions, flaggedExtensions } = props;
 
   const documentExtensions = extensionRegistry
@@ -34,4 +34,4 @@ export const DocumentEditorAdditionalExtensions = (props: TDocumentEditorAdditio
     .map((config) => config.getExtension(props));
 
   return documentExtensions;
-};
+}
diff --git a/packages/editor/src/ce/extensions/rich-text-extensions.tsx b/packages/editor/src/ce/extensions/rich-text-extensions.tsx
index 204c0435ba..6cd6ad06ca 100644
--- a/packages/editor/src/ce/extensions/rich-text-extensions.tsx
+++ b/packages/editor/src/ce/extensions/rich-text-extensions.tsx
@@ -30,7 +30,7 @@ const extensionRegistry: TRichTextEditorAdditionalExtensionsRegistry[] = [
   },
 ];
 
-export const RichTextEditorAdditionalExtensions = (props: TRichTextEditorAdditionalExtensionsProps) => {
+export function RichTextEditorAdditionalExtensions(props: TRichTextEditorAdditionalExtensionsProps) {
   const { disabledExtensions, flaggedExtensions } = props;
 
   const extensions: Extensions = extensionRegistry
@@ -39,4 +39,4 @@ export const RichTextEditorAdditionalExtensions = (props: TRichTextEditorAdditio
     .filter((extension): extension is AnyExtension => extension !== undefined);
 
   return extensions;
-};
+}
diff --git a/packages/editor/src/ce/helpers/asset-duplication.ts b/packages/editor/src/ce/helpers/asset-duplication.ts
new file mode 100644
index 0000000000..2a2a6e4079
--- /dev/null
+++ b/packages/editor/src/ce/helpers/asset-duplication.ts
@@ -0,0 +1,40 @@
+import { v4 as uuidv4 } from "uuid";
+import { ECustomImageAttributeNames, ECustomImageStatus } from "@/extensions/custom-image/types";
+
+export type AssetDuplicationContext = {
+  element: Element;
+  originalHtml: string;
+};
+
+export type AssetDuplicationResult = {
+  modifiedHtml: string;
+  shouldProcess: boolean;
+};
+
+export type AssetDuplicationHandler = (context: AssetDuplicationContext) => AssetDuplicationResult;
+
+const imageComponentHandler: AssetDuplicationHandler = ({ element, originalHtml }) => {
+  const src = element.getAttribute("src");
+
+  if (!src || src.startsWith("http")) {
+    return { modifiedHtml: originalHtml, shouldProcess: false };
+  }
+
+  // Capture the original HTML BEFORE making any modifications
+  const originalTag = element.outerHTML;
+
+  // Use setAttribute to update attributes
+  const newId = uuidv4();
+  element.setAttribute(ECustomImageAttributeNames.STATUS, ECustomImageStatus.DUPLICATING);
+  element.setAttribute(ECustomImageAttributeNames.ID, newId);
+
+  // Get the modified HTML AFTER the changes
+  const modifiedTag = element.outerHTML;
+  const modifiedHtml = originalHtml.replaceAll(originalTag, modifiedTag);
+
+  return { modifiedHtml, shouldProcess: true };
+};
+
+export const assetDuplicationHandlers: Record<string, AssetDuplicationHandler> = {
+  "image-component": imageComponentHandler,
+};
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 ea78216b8b..7ea5b23b4a 100644
--- a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
+++ b/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
@@ -1,20 +1,21 @@
-import React from "react";
+import React, { useMemo } from "react";
 // plane imports
 import { cn } from "@plane/utils";
 // components
 import { PageRenderer } from "@/components/editors";
 // constants
 import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
+// contexts
+import { CollaborationProvider, useCollaboration } from "@/contexts/collaboration-context";
 // helpers
 import { getEditorClassNames } from "@/helpers/common";
 // hooks
 import { useCollaborativeEditor } from "@/hooks/use-collaborative-editor";
-// constants
-import { DocumentEditorSideEffects } from "@/plane-editor/components/document-editor-side-effects";
 // types
 import type { EditorRefApi, ICollaborativeDocumentEditorProps } from "@/types";
 
-const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> = (props) => {
+// Inner component that has access to collaboration context
+function CollaborativeDocumentEditorInner(props: ICollaborativeDocumentEditorProps) {
   const {
     aiHandler,
     bubbleMenuEnabled = true,
@@ -30,6 +31,7 @@ const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> =
     fileHandler,
     flaggedExtensions,
     forwardedRef,
+    getEditorMetaData,
     handleEditorReady,
     id,
     dragDropEnabled = true,
@@ -40,15 +42,20 @@ const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> =
     onEditorFocus,
     onTransaction,
     placeholder,
-    realtimeConfig,
-    serverHandler,
     tabIndex,
     user,
     extendedDocumentEditorProps,
+    titleRef,
+    updatePageProperties,
+    isFetchingFallbackBinary,
   } = props;
 
-  // use document editor
-  const { editor, hasServerConnectionFailed, hasServerSynced } = useCollaborativeEditor({
+  // Get non-null provider from context
+  const { provider, state, actions } = useCollaboration();
+
+  // Editor initialization with guaranteed non-null provider
+  const { editor, titleEditor } = useCollaborativeEditor({
+    provider,
     disabledExtensions,
     editable,
     editorClassName,
@@ -57,6 +64,7 @@ const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> =
     extensions,
     fileHandler,
     flaggedExtensions,
+    getEditorMetaData,
     forwardedRef,
     handleEditorReady,
     id,
@@ -68,11 +76,11 @@ const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> =
     onEditorFocus,
     onTransaction,
     placeholder,
-    realtimeConfig,
-    serverHandler,
     tabIndex,
+    titleRef,
+    updatePageProperties,
     user,
-    extendedDocumentEditorProps,
+    actions,
   });
 
   const editorContainerClassNames = getEditorClassNames({
@@ -81,35 +89,74 @@ const CollaborativeDocumentEditor: React.FC<ICollaborativeDocumentEditorProps> =
     containerClassName,
   });
 
-  if (!editor) return null;
+  // Show loader ONLY when cache is known empty and server hasn't synced yet
+  const shouldShowSyncLoader = state.isCacheReady && !state.hasCachedContent && !state.isServerSynced;
+  const shouldWaitForFallbackBinary = isFetchingFallbackBinary && !state.hasCachedContent && state.isServerDisconnected;
+  const isLoading = shouldShowSyncLoader || shouldWaitForFallbackBinary;
+
+  // Gate content rendering on isDocReady to prevent empty editor flash
+  const showContentSkeleton = !state.isDocReady;
+
+  if (!editor || !titleEditor) return null;
 
   return (
     <>
-      <DocumentEditorSideEffects editor={editor} id={id} extendedEditorProps={extendedEditorProps} />
-      <PageRenderer
-        aiHandler={aiHandler}
-        bubbleMenuEnabled={bubbleMenuEnabled}
-        displayConfig={displayConfig}
-        documentLoaderClassName={documentLoaderClassName}
-        editor={editor}
-        editorContainerClassName={cn(editorContainerClassNames, "document-editor")}
-        id={id}
-        isTouchDevice={!!isTouchDevice}
-        isLoading={!hasServerSynced && !hasServerConnectionFailed}
-        tabIndex={tabIndex}
-        flaggedExtensions={flaggedExtensions}
-        disabledExtensions={disabledExtensions}
-        extendedDocumentEditorProps={extendedDocumentEditorProps}
-      />
+      <div
+        className={cn(
+          "transition-opacity duration-200",
+          showContentSkeleton && !isLoading && "opacity-0 pointer-events-none"
+        )}
+      >
+        <PageRenderer
+          aiHandler={aiHandler}
+          bubbleMenuEnabled={bubbleMenuEnabled}
+          displayConfig={displayConfig}
+          documentLoaderClassName={documentLoaderClassName}
+          disabledExtensions={disabledExtensions}
+          extendedDocumentEditorProps={extendedDocumentEditorProps}
+          editor={editor}
+          flaggedExtensions={flaggedExtensions}
+          titleEditor={titleEditor}
+          editorContainerClassName={cn(editorContainerClassNames, "document-editor")}
+          extendedEditorProps={extendedEditorProps}
+          id={id}
+          isLoading={isLoading}
+          isTouchDevice={!!isTouchDevice}
+          tabIndex={tabIndex}
+          provider={provider}
+          state={state}
+        />
+      </div>
     </>
   );
-};
+}
 
-const CollaborativeDocumentEditorWithRef = React.forwardRef<EditorRefApi, ICollaborativeDocumentEditorProps>(
-  (props, ref) => (
-    <CollaborativeDocumentEditor {...props} forwardedRef={ref as React.MutableRefObject<EditorRefApi | null>} />
-  )
-);
+// Outer component that provides collaboration context
+function CollaborativeDocumentEditor(props: ICollaborativeDocumentEditorProps) {
+  const { id, realtimeConfig, serverHandler, user } = props;
+
+  const token = useMemo(() => JSON.stringify(user), [user]);
+
+  return (
+    <CollaborationProvider
+      docId={id}
+      serverUrl={realtimeConfig.url}
+      authToken={token}
+      onStateChange={serverHandler?.onStateChange}
+    >
+      <CollaborativeDocumentEditorInner {...props} />
+    </CollaborationProvider>
+  );
+}
+
+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 a4adf49f37..9e30e87729 100644
--- a/packages/editor/src/core/components/editors/document/editor.tsx
+++ b/packages/editor/src/core/components/editors/document/editor.tsx
@@ -18,7 +18,7 @@ import { DocumentEditorAdditionalExtensions } from "@/plane-editor/extensions";
 // types
 import type { EditorRefApi, IDocumentEditorProps } from "@/types";
 
-const DocumentEditor = (props: IDocumentEditorProps) => {
+function DocumentEditor(props: IDocumentEditorProps) {
   const {
     bubbleMenuEnabled = false,
     containerClassName,
@@ -30,9 +30,10 @@ const DocumentEditor = (props: IDocumentEditorProps) => {
     fileHandler,
     flaggedExtensions,
     forwardedRef,
+    getEditorMetaData,
+    handleEditorReady,
     id,
     isTouchDevice,
-    handleEditorReady,
     mentionHandler,
     onChange,
     user,
@@ -72,6 +73,7 @@ const DocumentEditor = (props: IDocumentEditorProps) => {
     fileHandler,
     flaggedExtensions,
     forwardedRef,
+    getEditorMetaData,
     handleEditorReady,
     id,
     initialValue: value,
@@ -91,17 +93,21 @@ const DocumentEditor = (props: IDocumentEditorProps) => {
       displayConfig={displayConfig}
       editor={editor}
       editorContainerClassName={cn(editorContainerClassName, "document-editor")}
+      extendedEditorProps={extendedEditorProps}
       id={id}
       flaggedExtensions={flaggedExtensions}
       disabledExtensions={disabledExtensions}
       isTouchDevice={!!isTouchDevice}
     />
   );
-};
+}
 
-const DocumentEditorWithRef = forwardRef<EditorRefApi, IDocumentEditorProps>((props, ref) => (
-  <DocumentEditor {...props} forwardedRef={ref as MutableRefObject<EditorRefApi | null>} />
-));
+const DocumentEditorWithRef = forwardRef(function DocumentEditorWithRef(
+  props: IDocumentEditorProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
+  return <DocumentEditor {...props} forwardedRef={ref as MutableRefObject<EditorRefApi | null>} />;
+});
 
 DocumentEditorWithRef.displayName = "DocumentEditorWithRef";
 
diff --git a/packages/editor/src/core/components/editors/document/loader.tsx b/packages/editor/src/core/components/editors/document/loader.tsx
index 36194f7c7b..f24eedb018 100644
--- a/packages/editor/src/core/components/editors/document/loader.tsx
+++ b/packages/editor/src/core/components/editors/document/loader.tsx
@@ -6,7 +6,7 @@ type Props = {
   className?: string;
 };
 
-export const DocumentContentLoader = (props: Props) => {
+export function DocumentContentLoader(props: Props) {
   const { className } = props;
 
   return (
@@ -48,4 +48,4 @@ export const DocumentContentLoader = (props: Props) => {
       </Loader>
     </div>
   );
-};
+}
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 c32646825a..591c5e55b2 100644
--- a/packages/editor/src/core/components/editors/document/page-renderer.tsx
+++ b/packages/editor/src/core/components/editors/document/page-renderer.tsx
@@ -1,44 +1,58 @@
+import type { HocuspocusProvider } from "@hocuspocus/provider";
 import type { Editor } from "@tiptap/react";
 // plane imports
 import { cn } from "@plane/utils";
 // components
 import { DocumentContentLoader, EditorContainer, EditorContentWrapper } from "@/components/editors";
-import { AIFeaturesMenu, BlockMenu, EditorBubbleMenu } from "@/components/menus";
+import { BlockMenu, EditorBubbleMenu } from "@/components/menus";
 // types
-import type { ICollaborativeDocumentEditorPropsExtended, IEditorProps, TAIHandler, TDisplayConfig } from "@/types";
+import type { TCollabValue } from "@/contexts";
+import type {
+  ICollaborativeDocumentEditorPropsExtended,
+  IEditorProps,
+  IEditorPropsExtended,
+  TAIHandler,
+  TDisplayConfig,
+} from "@/types";
 
 type Props = {
   aiHandler?: TAIHandler;
   bubbleMenuEnabled: boolean;
+  disabledExtensions: IEditorProps["disabledExtensions"];
   displayConfig: TDisplayConfig;
   documentLoaderClassName?: string;
   editor: Editor;
+  titleEditor?: Editor;
   editorContainerClassName: string;
   extendedDocumentEditorProps?: ICollaborativeDocumentEditorPropsExtended;
+  extendedEditorProps: IEditorPropsExtended;
+  flaggedExtensions: IEditorProps["flaggedExtensions"];
   id: string;
   isLoading?: boolean;
   isTouchDevice: boolean;
   tabIndex?: number;
-  flaggedExtensions: IEditorProps["flaggedExtensions"];
-  disabledExtensions: IEditorProps["disabledExtensions"];
+  provider?: HocuspocusProvider;
+  state?: TCollabValue["state"];
 };
 
-export const PageRenderer = (props: Props) => {
+export function PageRenderer(props: Props) {
   const {
-    aiHandler,
     bubbleMenuEnabled,
+    disabledExtensions,
     displayConfig,
     documentLoaderClassName,
     editor,
     editorContainerClassName,
+    extendedEditorProps,
+    flaggedExtensions,
     id,
     isLoading,
     isTouchDevice,
     tabIndex,
-    flaggedExtensions,
-    disabledExtensions,
+    titleEditor,
+    provider,
+    state,
   } = props;
-
   return (
     <div
       className={cn("frame-renderer flex-grow w-full", {
@@ -48,27 +62,55 @@ export const PageRenderer = (props: Props) => {
       {isLoading ? (
         <DocumentContentLoader className={documentLoaderClassName} />
       ) : (
-        <EditorContainer
-          displayConfig={displayConfig}
-          editor={editor}
-          editorContainerClassName={editorContainerClassName}
-          id={id}
-          isTouchDevice={isTouchDevice}
-        >
-          <EditorContentWrapper editor={editor} id={id} tabIndex={tabIndex} />
-          {editor.isEditable && !isTouchDevice && (
-            <div>
-              {bubbleMenuEnabled && <EditorBubbleMenu editor={editor} />}
-              <BlockMenu
-                editor={editor}
-                flaggedExtensions={flaggedExtensions}
-                disabledExtensions={disabledExtensions}
-              />
-              <AIFeaturesMenu menu={aiHandler?.menu} />
+        <>
+          {titleEditor && (
+            <div className="relative w-full py-3">
+              <EditorContainer
+                editor={titleEditor}
+                id={id + "-title"}
+                isTouchDevice={isTouchDevice}
+                editorContainerClassName="page-title-editor bg-transparent py-3 border-none"
+                displayConfig={displayConfig}
+              >
+                <EditorContentWrapper
+                  editor={titleEditor}
+                  id={id + "-title"}
+                  tabIndex={tabIndex}
+                  className="no-scrollbar placeholder-placeholder bg-transparent tracking-[-2%] font-bold text-[2rem] leading-[2.375rem] w-full outline-none p-0 border-none resize-none rounded-none"
+                />
+              </EditorContainer>
             </div>
           )}
-        </EditorContainer>
+          <EditorContainer
+            displayConfig={displayConfig}
+            editor={editor}
+            editorContainerClassName={editorContainerClassName}
+            id={id}
+            isTouchDevice={isTouchDevice}
+            provider={provider}
+            state={state}
+          >
+            <EditorContentWrapper editor={editor} id={id} tabIndex={tabIndex} />
+            {editor.isEditable && !isTouchDevice && (
+              <div>
+                {bubbleMenuEnabled && (
+                  <EditorBubbleMenu
+                    editor={editor}
+                    disabledExtensions={disabledExtensions}
+                    extendedEditorProps={extendedEditorProps}
+                    flaggedExtensions={flaggedExtensions}
+                  />
+                )}
+                <BlockMenu
+                  editor={editor}
+                  flaggedExtensions={flaggedExtensions}
+                  disabledExtensions={disabledExtensions}
+                />
+              </div>
+            )}
+          </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 b2b7309c77..c6ba43ad89 100644
--- a/packages/editor/src/core/components/editors/editor-container.tsx
+++ b/packages/editor/src/core/components/editors/editor-container.tsx
@@ -1,13 +1,17 @@
+import type { HocuspocusProvider } from "@hocuspocus/provider";
 import type { Editor } from "@tiptap/react";
 import type { FC, ReactNode } from "react";
-import { useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 // plane utils
 import { cn } from "@plane/utils";
 // constants
 import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config";
 import { CORE_EXTENSIONS } from "@/constants/extension";
 // components
+import type { TCollabValue } from "@/contexts";
 import { LinkContainer } from "@/plane-editor/components/link-container";
+// plugins
+import { nodeHighlightPluginKey } from "@/plugins/highlight";
 // types
 import type { TDisplayConfig } from "@/types";
 
@@ -18,12 +22,85 @@ type Props = {
   editorContainerClassName: string;
   id: string;
   isTouchDevice: boolean;
+  provider?: HocuspocusProvider | undefined;
+  state?: TCollabValue["state"];
 };
 
-export const EditorContainer: FC<Props> = (props) => {
-  const { children, displayConfig, editor, editorContainerClassName, id, isTouchDevice } = props;
+export function EditorContainer(props: Props) {
+  const { children, displayConfig, editor, editorContainerClassName, id, isTouchDevice, provider, state } = props;
   // refs
   const containerRef = useRef<HTMLDivElement>(null);
+  const hasScrolledOnce = useRef(false);
+  const scrollToNode = useCallback(
+    (nodeId: string) => {
+      if (!editor) return false;
+
+      const doc = editor.state.doc;
+      let pos: number | null = null;
+
+      doc.descendants((node, position) => {
+        if (node.attrs && node.attrs.id === nodeId) {
+          pos = position;
+          return false;
+        }
+      });
+
+      if (pos === null) {
+        return false;
+      }
+
+      const nodePosition = pos;
+      const tr = editor.state.tr.setMeta(nodeHighlightPluginKey, { nodeId });
+      editor.view.dispatch(tr);
+
+      requestAnimationFrame(() => {
+        const domNode = editor.view.nodeDOM(nodePosition);
+        if (domNode instanceof HTMLElement) {
+          domNode.scrollIntoView({ behavior: "instant", block: "center" });
+        }
+      });
+
+      editor.once("focus", () => {
+        const clearTr = editor.state.tr.setMeta(nodeHighlightPluginKey, { nodeId: null });
+        editor.view.dispatch(clearTr);
+      });
+
+      hasScrolledOnce.current = true;
+      return true;
+    },
+
+    [editor]
+  );
+
+  useEffect(() => {
+    const nodeId = window.location.href.split("#")[1];
+
+    const handleSynced = () => scrollToNode(nodeId);
+
+    if (nodeId && !hasScrolledOnce.current) {
+      if (provider && state) {
+        const { hasCachedContent } = state;
+        // If the provider is synced or the cached content is available and the server is disconnected, scroll to the node
+        if (hasCachedContent) {
+          const hasScrolled = handleSynced();
+          if (!hasScrolled) {
+            provider.on("synced", handleSynced);
+          }
+        } else if (provider.isSynced) {
+          handleSynced();
+        } else {
+          provider.on("synced", handleSynced);
+        }
+      } else {
+        handleSynced();
+      }
+      return () => {
+        if (provider) {
+          provider.off("synced", handleSynced);
+        }
+      };
+    }
+  }, [scrollToNode, provider, state]);
 
   const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     if (event.target !== event.currentTarget) return;
@@ -88,7 +165,6 @@ export const EditorContainer: FC<Props> = (props) => {
           `editor-container cursor-text relative line-spacing-${displayConfig.lineSpacing ?? DEFAULT_DISPLAY_CONFIG.lineSpacing}`,
           {
             "active-editor": editor?.isFocused && editor?.isEditable,
-            "wide-layout": displayConfig.wideLayout,
           },
           displayConfig.fontSize ?? DEFAULT_DISPLAY_CONFIG.fontSize,
           displayConfig.fontStyle ?? DEFAULT_DISPLAY_CONFIG.fontStyle,
@@ -100,4 +176,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 623dc55461..20ee7d4295 100644
--- a/packages/editor/src/core/components/editors/editor-content.tsx
+++ b/packages/editor/src/core/components/editors/editor-content.tsx
@@ -1,21 +1,26 @@
 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;
   children?: ReactNode;
   editor: Editor | null;
   id: string;
   tabIndex?: number;
 };
 
-export const EditorContentWrapper: FC<Props> = (props) => {
-  const { editor, children, tabIndex, id } = props;
+export function EditorContentWrapper(props: Props) {
+  const { editor, className, children, tabIndex, id } = props;
 
   return (
-    <div tabIndex={tabIndex} onFocus={() => editor?.chain().focus(undefined, { scrollIntoView: false }).run()}>
+    <div
+      tabIndex={tabIndex}
+      onFocus={() => editor?.chain().focus(undefined, { scrollIntoView: false }).run()}
+      className={className}
+    >
       <EditorContent editor={editor} id={id} />
       {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 617cb3b152..5c0ba9c248 100644
--- a/packages/editor/src/core/components/editors/editor-wrapper.tsx
+++ b/packages/editor/src/core/components/editors/editor-wrapper.tsx
@@ -16,7 +16,7 @@ type Props = IEditorProps & {
   extensions: Extensions;
 };
 
-export const EditorWrapper: React.FC<Props> = (props) => {
+export function EditorWrapper(props: Props) {
   const {
     children,
     containerClassName,
@@ -27,6 +27,7 @@ export const EditorWrapper: React.FC<Props> = (props) => {
     editorProps,
     extendedEditorProps,
     extensions,
+    getEditorMetaData,
     id,
     initialValue,
     isTouchDevice,
@@ -40,6 +41,7 @@ export const EditorWrapper: React.FC<Props> = (props) => {
     handleEditorReady,
     autofocus,
     placeholder,
+    showPlaceholderOnEmpty,
     tabIndex,
     value,
   } = props;
@@ -55,6 +57,7 @@ export const EditorWrapper: React.FC<Props> = (props) => {
     fileHandler,
     flaggedExtensions,
     forwardedRef,
+    getEditorMetaData,
     id,
     isTouchDevice,
     initialValue,
@@ -65,6 +68,7 @@ export const EditorWrapper: React.FC<Props> = (props) => {
     handleEditorReady,
     autofocus,
     placeholder,
+    showPlaceholderOnEmpty,
     tabIndex,
     value,
   });
@@ -91,4 +95,4 @@ export const EditorWrapper: React.FC<Props> = (props) => {
       </div>
     </EditorContainer>
   );
-};
+}
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 5800930799..3b1c6132ae 100644
--- a/packages/editor/src/core/components/editors/link-view-container.tsx
+++ b/packages/editor/src/core/components/editors/link-view-container.tsx
@@ -13,7 +13,7 @@ type Props = {
   containerRef: React.RefObject<HTMLDivElement>;
 };
 
-export const LinkViewContainer: FC<Props> = ({ editor, containerRef }) => {
+export function LinkViewContainer({ editor, containerRef }: Props) {
   const [linkViewProps, setLinkViewProps] = useState<LinkViewProps>();
   const [isOpen, setIsOpen] = useState(false);
   const [virtualElement, setVirtualElement] = useState<Element | null>(null);
@@ -201,4 +201,4 @@ export const LinkViewContainer: FC<Props> = ({ editor, containerRef }) => {
       )}
     </>
   );
-};
+}
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 d4dccd996c..6734058d19 100644
--- a/packages/editor/src/core/components/editors/lite-text/editor.tsx
+++ b/packages/editor/src/core/components/editors/lite-text/editor.tsx
@@ -6,7 +6,7 @@ import { EnterKeyExtension } from "@/extensions";
 // types
 import type { EditorRefApi, ILiteTextEditorProps } from "@/types";
 
-const LiteTextEditor: React.FC<ILiteTextEditorProps> = (props) => {
+function LiteTextEditor(props: ILiteTextEditorProps) {
   const { onEnterKeyPress, disabledExtensions, extensions: externalExtensions = [] } = props;
 
   const extensions = useMemo(() => {
@@ -20,11 +20,14 @@ const LiteTextEditor: React.FC<ILiteTextEditorProps> = (props) => {
   }, [externalExtensions, disabledExtensions, onEnterKeyPress]);
 
   return <EditorWrapper {...props} extensions={extensions} />;
-};
+}
 
-const LiteTextEditorWithRef = forwardRef<EditorRefApi, ILiteTextEditorProps>((props, ref) => (
-  <LiteTextEditor {...props} forwardedRef={ref as React.MutableRefObject<EditorRefApi | null>} />
-));
+const LiteTextEditorWithRef = forwardRef(function LiteTextEditorWithRef(
+  props: ILiteTextEditorProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
+  return <LiteTextEditor {...props} forwardedRef={ref as React.MutableRefObject<EditorRefApi | null>} />;
+});
 
 LiteTextEditorWithRef.displayName = "LiteTextEditorWithRef";
 
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 6820eed79c..557ab7660a 100644
--- a/packages/editor/src/core/components/editors/rich-text/editor.tsx
+++ b/packages/editor/src/core/components/editors/rich-text/editor.tsx
@@ -9,7 +9,7 @@ import { RichTextEditorAdditionalExtensions } from "@/plane-editor/extensions/ri
 // types
 import type { EditorRefApi, IRichTextEditorProps } from "@/types";
 
-const RichTextEditor: React.FC<IRichTextEditorProps> = (props) => {
+function RichTextEditor(props: IRichTextEditorProps) {
   const {
     bubbleMenuEnabled = true,
     disabledExtensions,
@@ -43,7 +43,14 @@ const RichTextEditor: React.FC<IRichTextEditorProps> = (props) => {
     <EditorWrapper {...props} extensions={getExtensions()}>
       {(editor) => (
         <>
-          {editor && bubbleMenuEnabled && <EditorBubbleMenu editor={editor} />}
+          {editor && bubbleMenuEnabled && (
+            <EditorBubbleMenu
+              disabledExtensions={disabledExtensions}
+              editor={editor}
+              extendedEditorProps={extendedEditorProps}
+              flaggedExtensions={flaggedExtensions}
+            />
+          )}
           <BlockMenu
             editor={editor}
             flaggedExtensions={flaggedExtensions}
@@ -54,11 +61,14 @@ const RichTextEditor: React.FC<IRichTextEditorProps> = (props) => {
       )}
     </EditorWrapper>
   );
-};
+}
 
-const RichTextEditorWithRef = forwardRef<EditorRefApi, IRichTextEditorProps>((props, ref) => (
-  <RichTextEditor {...props} forwardedRef={ref as React.MutableRefObject<EditorRefApi | null>} />
-));
+const RichTextEditorWithRef = forwardRef(function RichTextEditorWithRef(
+  props: IRichTextEditorProps,
+  ref: React.ForwardedRef<EditorRefApi>
+) {
+  return <RichTextEditor {...props} forwardedRef={ref as React.MutableRefObject<EditorRefApi | null>} />;
+});
 
 RichTextEditorWithRef.displayName = "RichTextEditorWithRef";
 
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 34e4eb2cfb..61aed14dc3 100644
--- a/packages/editor/src/core/components/links/link-edit-view.tsx
+++ b/packages/editor/src/core/components/links/link-edit-view.tsx
@@ -14,26 +14,28 @@ type InputViewProps = {
   autoFocus?: boolean;
 };
 
-const InputView = ({ label, value, placeholder, onChange, autoFocus }: InputViewProps) => (
-  <div className="flex flex-col gap-1">
-    <label className="inline-block font-semibold text-xs text-custom-text-400">{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"
-      value={value}
-      onChange={(e) => onChange(e.target.value)}
-      autoFocus={autoFocus}
-    />
-  </div>
-);
+function InputView({ label, value, placeholder, onChange, autoFocus }: InputViewProps) {
+  return (
+    <div className="flex flex-col gap-1">
+      <label className="inline-block font-semibold text-11 text-placeholder">{label}</label>
+      <input
+        placeholder={placeholder}
+        onClick={(e) => e.stopPropagation()}
+        className="w-[280px] outline-none bg-layer-1 text-primary text-13 border border-strong rounded-md p-2"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        autoFocus={autoFocus}
+      />
+    </div>
+  );
+}
 
 type LinkEditViewProps = {
   viewProps: LinkViewProps;
   switchView: (view: LinkViews) => void;
 };
 
-export const LinkEditView = ({ viewProps }: LinkEditViewProps) => {
+export function LinkEditView({ viewProps }: LinkEditViewProps) {
   const { editor, from, to, url: initialUrl, text: initialText, closeLinkView } = viewProps;
 
   // State
@@ -130,7 +132,7 @@ export const 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 rounded-sm p-2 flex flex-col gap-3 bg-layer-1 border-subtle border-2 animate-in fade-in translate-y-1"
       style={{
         transition: "all 0.1s cubic-bezier(.55, .085, .68, .53)",
       }}
@@ -138,13 +140,13 @@ export const 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="mb-1 bg-strong h-[1px] w-full gap-2" />
+      <div className="flex text-13 text-secondary gap-2 items-center">
         <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 hover:text-placeholder transition-colors">
           Remove Link
         </button>
       </div>
     </div>
   );
-};
+}
diff --git a/packages/editor/src/core/components/links/link-preview.tsx b/packages/editor/src/core/components/links/link-preview.tsx
index 65803e37b1..56c2243da9 100644
--- a/packages/editor/src/core/components/links/link-preview.tsx
+++ b/packages/editor/src/core/components/links/link-preview.tsx
@@ -2,13 +2,13 @@ import { Copy, GlobeIcon, Link2Off, PencilIcon } from "lucide-react";
 // components
 import type { LinkViewProps, LinkViews } from "@/components/links";
 
-export const LinkPreview = ({
+export function LinkPreview({
   viewProps,
   switchView,
 }: {
   viewProps: LinkViewProps;
   switchView: (view: LinkViews) => void;
-}) => {
+}) {
   const { editor, from, to, url } = viewProps;
 
   const removeLink = () => {
@@ -28,22 +28,22 @@ export const LinkPreview = ({
         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">
+      <div className="shadow-md items-center rounded-sm p-2 flex gap-3 bg-layer-1 border-subtle border-2 text-tertiary text-11">
         <GlobeIcon size={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">
+          <button onClick={copyLinkToClipboard} className="cursor-pointer hover:text-primary transition-colors">
             <Copy size={14} className="inline-block" />
           </button>
           {editor.isEditable && (
             <>
               <button
                 onClick={() => switchView("LinkEditView")}
-                className="cursor-pointer hover:text-custom-text-100 transition-colors"
+                className="cursor-pointer hover:text-primary transition-colors"
               >
                 <PencilIcon size={14} className="inline-block" />
               </button>
-              <button onClick={removeLink} className="cursor-pointer hover:text-custom-text-100 transition-colors">
+              <button onClick={removeLink} className="cursor-pointer hover:text-primary transition-colors">
                 <Link2Off size={14} className="inline-block" />
               </button>
             </>
@@ -52,4 +52,4 @@ export const LinkPreview = ({
       </div>
     </div>
   );
-};
+}
diff --git a/packages/editor/src/core/components/links/link-view.tsx b/packages/editor/src/core/components/links/link-view.tsx
index ab04ab8d86..4bf0996fc2 100644
--- a/packages/editor/src/core/components/links/link-view.tsx
+++ b/packages/editor/src/core/components/links/link-view.tsx
@@ -16,7 +16,7 @@ export type LinkViewProps = {
   closeLinkView: () => void;
 };
 
-export const LinkView = (props: LinkViewProps & { style: CSSProperties }) => {
+export function LinkView(props: LinkViewProps & { style: CSSProperties }) {
   const [currentView, setCurrentView] = useState<LinkViews>(props.view ?? "LinkPreview");
   const [prevFrom, setPrevFrom] = useState(props.from);
 
@@ -37,4 +37,4 @@ export const LinkView = (props: LinkViewProps & { style: CSSProperties }) => {
       {currentView === "LinkEditView" && <LinkEditView viewProps={props} switchView={switchView} />}
     </>
   );
-};
+}
diff --git a/packages/editor/src/core/components/menus/ai-menu.tsx b/packages/editor/src/core/components/menus/ai-menu.tsx
index 14d6474a27..be7a4cf98f 100644
--- a/packages/editor/src/core/components/menus/ai-menu.tsx
+++ b/packages/editor/src/core/components/menus/ai-menu.tsx
@@ -10,7 +10,7 @@ type Props = {
   menu: TAIHandler["menu"];
 };
 
-export const AIFeaturesMenu: React.FC<Props> = (props) => {
+export function AIFeaturesMenu(props: Props) {
   const { menu } = props;
   // states
   const [isPopupVisible, setIsPopupVisible] = useState(false);
@@ -94,4 +94,4 @@ export const AIFeaturesMenu: React.FC<Props> = (props) => {
       </div>
     </div>
   );
-};
+}
diff --git a/packages/editor/src/core/components/menus/block-menu.tsx b/packages/editor/src/core/components/menus/block-menu.tsx
index 5ad8463399..69d9f3cc16 100644
--- a/packages/editor/src/core/components/menus/block-menu.tsx
+++ b/packages/editor/src/core/components/menus/block-menu.tsx
@@ -12,6 +12,7 @@ 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 type { ISvgIcons } from "@plane/propel/icons";
 import { cn } from "@plane/utils";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
@@ -27,14 +28,14 @@ type Props = {
   workItemIdentifier?: IEditorProps["workItemIdentifier"];
 };
 export type BlockMenuOption = {
-  icon: LucideIcon;
+  icon: LucideIcon | React.FC<ISvgIcons>;
   key: string;
   label: string;
   onClick: (e: React.MouseEvent) => void;
   isDisabled?: boolean;
 };
 
-export const BlockMenu = (props: Props) => {
+export function BlockMenu(props: Props) {
   const { editor, workItemIdentifier } = props;
   const [isOpen, setIsOpen] = useState(false);
   const [isAnimatedIn, setIsAnimatedIn] = useState(false);
@@ -215,7 +216,7 @@ export const 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",
+          "max-h-60 min-w-[7rem] overflow-y-scroll rounded-lg border border-subtle bg-surface-1 p-1.5 shadow-raised-200",
           "transition-all duration-300 transform origin-top-right",
           isAnimatedIn ? "opacity-100 scale-100" : "opacity-0 scale-75"
         )}
@@ -228,7 +229,7 @@ export const 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();
@@ -245,4 +246,4 @@ export const BlockMenu = (props: Props) => {
       </div>
     </FloatingPortal>
   );
-};
+}
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 8bd490f8b4..4a1aac352a 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
@@ -14,7 +14,7 @@ type Props = {
   editorState: EditorStateType;
 };
 
-export const TextAlignmentSelector: React.FC<Props> = (props) => {
+export function TextAlignmentSelector(props: Props) {
   const { editor, editorState } = props;
   const menuItem = TextAlignItem(editor);
 
@@ -69,9 +69,9 @@ export const TextAlignmentSelector: React.FC<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",
+            "size-7 grid place-items-center rounded-sm text-tertiary hover:bg-layer-1 active:bg-layer-1 transition-colors",
             {
-              "bg-custom-background-80 text-custom-text-100": item.isActive(),
+              "bg-layer-1 text-primary": item.isActive(),
             }
           )}
         >
@@ -80,4 +80,4 @@ export const TextAlignmentSelector: React.FC<Props> = (props) => {
       ))}
     </div>
   );
-};
+}
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 41fee1ca42..c6fc542ed7 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
@@ -17,7 +17,7 @@ type Props = {
   editorState: EditorStateType;
 };
 
-export const BubbleMenuColorSelector: FC<Props> = (props) => {
+export function BubbleMenuColorSelector(props: Props) {
   const { editor, editorState } = props;
   // floating ui
   const { options, getReferenceProps, getFloatingProps } = useFloatingMenu({});
@@ -30,25 +30,22 @@ export const BubbleMenuColorSelector: FC<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("flex-shrink-0 size-6 grid 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 +58,15 @@ export const BubbleMenuColorSelector: FC<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 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 space-y-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 text-tertiary 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"
+                className="flex-shrink-0 size-6 rounded-sm border-[0.5px] border-strong-1 hover:opacity-60 transition-opacity"
                 style={{
                   backgroundColor: color.textColor,
                 }}
@@ -78,7 +75,7 @@ export const BubbleMenuColorSelector: FC<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={() => TextColorItem(editor).command({ color: undefined })}
             >
               <Ban className="size-4" />
@@ -86,13 +83,13 @@ export const BubbleMenuColorSelector: FC<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 text-tertiary 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"
+                className="flex-shrink-0 size-6 rounded-sm border-[0.5px] border-strong-1 hover:opacity-60 transition-opacity"
                 style={{
                   backgroundColor: color.backgroundColor,
                 }}
@@ -101,7 +98,7 @@ export const BubbleMenuColorSelector: FC<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={() => BackgroundColorItem(editor).command({ color: undefined })}
             >
               <Ban className="size-4" />
@@ -111,4 +108,4 @@ export const BubbleMenuColorSelector: FC<Props> = (props) => {
       </section>
     </FloatingMenuRoot>
   );
-};
+}
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 14e93c1ee9..57d50c31a2 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
@@ -16,7 +16,7 @@ type Props = {
   editor: Editor;
 };
 
-export const BubbleMenuLinkSelector: FC<Props> = (props) => {
+export function BubbleMenuLinkSelector(props: Props) {
   const { editor } = props;
   // states
   const [error, setError] = useState(false);
@@ -46,10 +46,10 @@ export const BubbleMenuLinkSelector: FC<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",
+          "h-full flex items-center gap-1 px-3 text-13 font-medium text-tertiary hover:bg-layer-1 active:bg-layer-1 rounded-sm whitespace-nowrap transition-colors",
           {
-            "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),
           }
         ),
       }}
@@ -63,9 +63,9 @@ export const BubbleMenuLinkSelector: FC<Props> = (props) => {
       }
       options={options}
     >
-      <div className="w-60 mt-1 rounded-md bg-custom-background-100 shadow-custom-shadow-rg">
+      <div className="w-60 mt-1 rounded-md bg-surface-1 shadow-raised-200">
         <div
-          className={cn("flex rounded  border-[0.5px] border-custom-border-300 transition-colors", {
+          className={cn("flex rounded-sm  border-[0.5px] border-strong transition-colors", {
             "border-red-500": error,
           })}
         >
@@ -74,7 +74,7 @@ export const BubbleMenuLinkSelector: FC<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 border-r-[0.5px] border-strong bg-surface-1 py-2 px-1.5 text-11 outline-none placeholder:text-placeholder rounded-sm"
             defaultValue={editor.getAttributes("link").href || ""}
             onKeyDown={(e) => {
               setError(false);
@@ -89,7 +89,7 @@ export const BubbleMenuLinkSelector: FC<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-red-500 hover:bg-red-500/20 transition-all"
               onClick={(e) => {
                 unsetLinkEditor(editor);
                 e.stopPropagation();
@@ -101,7 +101,7 @@ export const BubbleMenuLinkSelector: FC<Props> = (props) => {
           ) : (
             <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="h-full aspect-square grid place-items-center p-1 rounded-xs text-tertiary hover:bg-layer-1 transition-all"
               onClick={(e) => {
                 e.stopPropagation();
                 handleLinkSubmit();
@@ -112,11 +112,11 @@ export const BubbleMenuLinkSelector: FC<Props> = (props) => {
           )}
         </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="text-11 text-red-500 my-1 px-2 pointer-events-none animate-in fade-in slide-in-from-top-0">
             Please enter a valid URL
           </p>
         )}
       </div>
     </FloatingMenuRoot>
   );
-};
+}
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 a4e382207d..d28ee912b0 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
@@ -30,7 +30,7 @@ type Props = {
   editor: Editor;
 };
 
-export const BubbleMenuNodeSelector: FC<Props> = (props) => {
+export function BubbleMenuNodeSelector(props: Props) {
   const { editor } = props;
   // floating ui
   const { options, getReferenceProps, getFloatingProps } = useFloatingMenu({});
@@ -59,9 +59,9 @@ export const BubbleMenuNodeSelector: FC<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",
+          "h-full flex items-center gap-1 px-3 text-13 font-medium text-tertiary hover:bg-layer-1 active:bg-layer-1 rounded-sm whitespace-nowrap transition-colors",
           {
-            "bg-custom-background-80": context.open,
+            "bg-layer-1": context.open,
           }
         ),
       }}
@@ -75,7 +75,7 @@ export const BubbleMenuNodeSelector: FC<Props> = (props) => {
       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="w-48 max-h-[90vh] mt-1 flex 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 +86,9 @@ export const BubbleMenuNodeSelector: FC<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,10 +96,10 @@ export const BubbleMenuNodeSelector: FC<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 && <Check className="size-3 text-tertiary flex-shrink-0" />}
           </button>
         ))}
       </section>
     </FloatingMenuRoot>
   );
-};
+}
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 8700a2c27a..0de70f9aa3 100644
--- a/packages/editor/src/core/components/menus/bubble-menu/root.tsx
+++ b/packages/editor/src/core/components/menus/bubble-menu/root.tsx
@@ -26,7 +26,7 @@ import { CORE_EXTENSIONS } from "@/constants/extension";
 // extensions
 import { isCellSelection } from "@/extensions/table/table/utilities/helpers";
 // types
-import type { TEditorCommands } from "@/types";
+import type { IEditorPropsExtended, TEditorCommands, TExtensions } from "@/types";
 // local imports
 import { TextAlignmentSelector } from "./alignment-selector";
 import { BubbleMenuLinkSelector } from "./link-selector";
@@ -61,10 +61,13 @@ export type EditorStateType = {
 };
 
 type Props = {
+  disabledExtensions: TExtensions[];
   editor: Editor;
+  extendedEditorProps: IEditorPropsExtended;
+  flaggedExtensions: TExtensions[];
 };
 
-export const EditorBubbleMenu: FC<Props> = (props) => {
+export function EditorBubbleMenu(props: Props) {
   const { editor } = props;
   // states
   const [isSelecting, setIsSelecting] = useState(false);
@@ -183,7 +186,7 @@ export const EditorBubbleMenu: FC<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="flex py-2 divide-x divide-subtle-1 rounded-lg border border-subtle bg-surface-1 shadow-raised-200 overflow-x-scroll horizontal-scrollbar scrollbar-xs"
         >
           <div className="px-2">
             <BubbleMenuNodeSelector editor={editor} />
@@ -208,9 +211,9 @@ export const EditorBubbleMenu: FC<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",
+                  "size-7 grid place-items-center rounded-sm text-tertiary hover:bg-layer-1 active:bg-layer-1 transition-colors",
                   {
-                    "bg-custom-background-80 text-custom-text-100": editorState[item.key],
+                    "bg-layer-1 text-primary": editorState[item.key],
                   }
                 )}
               >
@@ -223,4 +226,4 @@ export const EditorBubbleMenu: FC<Props> = (props) => {
       )}
     </BubbleMenu>
   );
-};
+}
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 2e1f59f986..33896c1cef 100644
--- a/packages/editor/src/core/components/menus/floating-menu/root.tsx
+++ b/packages/editor/src/core/components/menus/floating-menu/root.tsx
@@ -14,7 +14,7 @@ type Props = {
   options: UseFloatingReturn;
 };
 
-export const FloatingMenuRoot: React.FC<Props> = (props) => {
+export function FloatingMenuRoot(props: Props) {
   const { children, classNames, getFloatingProps, getReferenceProps, menuButton, onClick, options } = props;
   // derived values
   const { refs, floatingStyles, context } = options;
@@ -58,4 +58,4 @@ export const FloatingMenuRoot: React.FC<Props> = (props) => {
       )}
     </>
   );
-};
+}
diff --git a/packages/editor/src/core/components/menus/menu-items.ts b/packages/editor/src/core/components/menus/menu-items.ts
index 075b871472..6fc6cfe309 100644
--- a/packages/editor/src/core/components/menus/menu-items.ts
+++ b/packages/editor/src/core/components/menus/menu-items.ts
@@ -206,11 +206,13 @@ export const LinkItem = (editor: Editor): EditorMenuItem<"link"> =>
     key: "link",
     name: "Link",
     isActive: () => editor?.isActive("link"),
+
     command: (props) => {
       if (!props) return;
       if (props.url) setLinkEditor(editor, props.url, props.text);
       else unsetLinkEditor(editor);
     },
+
     icon: LinkIcon,
   }) as const;
 
diff --git a/packages/editor/src/core/contexts/collaboration-context.tsx b/packages/editor/src/core/contexts/collaboration-context.tsx
new file mode 100644
index 0000000000..272f029df4
--- /dev/null
+++ b/packages/editor/src/core/contexts/collaboration-context.tsx
@@ -0,0 +1,32 @@
+import React, { createContext, useContext } from "react";
+// hooks
+import { useYjsSetup } from "@/hooks/use-yjs-setup";
+
+export type TCollabValue = NonNullable<ReturnType<typeof useYjsSetup>>;
+
+const CollabContext = createContext<TCollabValue | null>(null);
+
+type CollabProviderProps = Parameters<typeof useYjsSetup>[0] & {
+  fallback?: React.ReactNode;
+  children: React.ReactNode;
+};
+
+export function CollaborationProvider({ fallback = null, children, ...args }: CollabProviderProps) {
+  const setup = useYjsSetup(args);
+
+  // Only wait for provider setup, not content ready
+  // Consumers can check state.isDocReady to gate content rendering
+  if (!setup) {
+    return <>{fallback}</>;
+  }
+
+  return <CollabContext.Provider value={setup}>{children}</CollabContext.Provider>;
+}
+
+export function useCollaboration(): TCollabValue {
+  const ctx = useContext(CollabContext);
+  if (!ctx) {
+    throw new Error("useCollaboration must be used inside <CollaborationProvider>");
+  }
+  return ctx; // guaranteed non-null
+}
diff --git a/packages/editor/src/core/contexts/index.ts b/packages/editor/src/core/contexts/index.ts
new file mode 100644
index 0000000000..f536f2b212
--- /dev/null
+++ b/packages/editor/src/core/contexts/index.ts
@@ -0,0 +1 @@
+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 2471469b08..e1ad8ca1bf 100644
--- a/packages/editor/src/core/extensions/callout/block.tsx
+++ b/packages/editor/src/core/extensions/callout/block.tsx
@@ -1,6 +1,6 @@
 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
@@ -19,7 +19,7 @@ export type CustomCalloutNodeViewProps = NodeViewProps & {
   updateAttributes: (attrs: Partial<TCalloutBlockAttributes>) => void;
 };
 
-export const CustomCalloutBlock: React.FC<CustomCalloutNodeViewProps> = (props) => {
+export function CustomCalloutBlock(props: CustomCalloutNodeViewProps) {
   const { editor, node, updateAttributes } = props;
   // states
   const [isEmojiPickerOpen, setIsEmojiPickerOpen] = useState(false);
@@ -29,7 +29,7 @@ export const CustomCalloutBlock: React.FC<CustomCalloutNodeViewProps> = (props)
 
   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"
+      className="editor-callout-component group/callout-node relative bg-layer-3 rounded-lg text-primary p-4 my-2 flex items-start gap-4 transition-colors duration-500 break-words"
       style={{
         backgroundColor: activeBackgroundColor,
       }}
@@ -55,4 +55,4 @@ export const CustomCalloutBlock: React.FC<CustomCalloutNodeViewProps> = (props)
       <NodeViewContent as="div" className="w-full break-words" />
     </NodeViewWrapper>
   );
-};
+}
diff --git a/packages/editor/src/core/extensions/callout/color-selector.tsx b/packages/editor/src/core/extensions/callout/color-selector.tsx
index 0419fd8fc3..db032d4e8c 100644
--- a/packages/editor/src/core/extensions/callout/color-selector.tsx
+++ b/packages/editor/src/core/extensions/callout/color-selector.tsx
@@ -12,7 +12,7 @@ type Props = {
   toggleDropdown: () => void;
 };
 
-export const CalloutBlockColorSelector: React.FC<Props> = (props) => {
+export function CalloutBlockColorSelector(props: Props) {
   const { disabled, isOpen, onSelect, toggleDropdown } = props;
 
   const handleColorSelect = (val: string | null) => {
@@ -36,24 +36,24 @@ export const CalloutBlockColorSelector: React.FC<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 items-center gap-1 h-full whitespace-nowrap py-1 px-2.5 text-13 font-medium text-tertiary hover:bg-layer-1-hover active:bg-layer-1-active rounded-sm transition-colors",
             {
-              "bg-white/10": isOpen,
+              "bg-layer-1": isOpen,
             }
           )}
           disabled={disabled}
         >
-          <span>Color</span>
+          <span className="text-12">Color</span>
           <ChevronDownIcon className="flex-shrink-0 size-3" />
         </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="absolute top-full right-0 z-10 mt-1 rounded-md border-[0.5px] border-strong bg-surface-1 p-2 shadow-raised-200 animate-in fade-in slide-in-from-top-1">
             <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="flex-shrink-0 size-6 rounded-sm border-[0.5px] border-strong-1 hover:opacity-60 transition-opacity"
                   style={{
                     backgroundColor: color.backgroundColor,
                   }}
@@ -62,7 +62,7 @@ export const CalloutBlockColorSelector: React.FC<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-hover transition-colors"
                 onClick={() => handleColorSelect(null)}
               >
                 <Ban className="size-4" />
@@ -73,4 +73,4 @@ export const CalloutBlockColorSelector: React.FC<Props> = (props) => {
       </div>
     </div>
   );
-};
+}
diff --git a/packages/editor/src/core/extensions/callout/logo-selector.tsx b/packages/editor/src/core/extensions/callout/logo-selector.tsx
index f4133ae692..66b2872386 100644
--- a/packages/editor/src/core/extensions/callout/logo-selector.tsx
+++ b/packages/editor/src/core/extensions/callout/logo-selector.tsx
@@ -15,7 +15,7 @@ type Props = {
   updateAttributes: (attrs: Partial<TCalloutBlockAttributes>) => void;
 };
 
-export const CalloutBlockLogoSelector: React.FC<Props> = (props) => {
+export function CalloutBlockLogoSelector(props: Props) {
   const { blockAttributes, disabled, handleOpen, isOpen, updateAttributes } = props;
 
   const logoValue: TLogoProps = {
@@ -37,8 +37,8 @@ export const CalloutBlockLogoSelector: React.FC<Props> = (props) => {
         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,
+        buttonClassName={cn("flex-shrink-0 size-8 grid place-items-center rounded-lg text-primary", {
+          "hover:bg-layer-1-hover": !disabled,
         })}
         label={<Logo logo={logoValue} size={18} type="lucide" />}
         onChange={(val) => {
@@ -53,27 +53,29 @@ export const CalloutBlockLogoSelector: React.FC<Props> = (props) => {
           };
           if (val.type === "emoji") {
             // val.value is now a string in decimal format (e.g. "128512")
+            const emojiValue = val.value;
             newLogoValue = {
-              "data-emoji-unicode": val.value,
+              "data-emoji-unicode": emojiValue,
               "data-emoji-url": undefined,
             };
             newLogoValueToStoreInLocalStorage = {
               in_use: "emoji",
               emoji: {
-                value: val.value,
+                value: emojiValue,
                 url: undefined,
               },
             };
           } else if (val.type === "icon") {
+            const iconValue = val.value as { name: string; color: string };
             newLogoValue = {
-              "data-icon-name": val.value.name,
-              "data-icon-color": val.value.color,
+              "data-icon-name": iconValue.name,
+              "data-icon-color": iconValue.color,
             };
             newLogoValueToStoreInLocalStorage = {
               in_use: "icon",
               icon: {
-                name: val.value.name,
-                color: val.value.color,
+                name: iconValue.name,
+                color: iconValue.color,
               },
             };
           }
@@ -93,4 +95,4 @@ export const CalloutBlockLogoSelector: React.FC<Props> = (props) => {
       />
     </div>
   );
-};
+}
diff --git a/packages/editor/src/core/extensions/code-inline/index.tsx b/packages/editor/src/core/extensions/code-inline/index.tsx
index 690f92b997..0de3545fd6 100644
--- a/packages/editor/src/core/extensions/code-inline/index.tsx
+++ b/packages/editor/src/core/extensions/code-inline/index.tsx
@@ -35,7 +35,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-node-view.tsx b/packages/editor/src/core/extensions/code/code-block-node-view.tsx
index 6e13924a1c..2d4cbe95d1 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,5 +1,3 @@
-"use client";
-
 import type { Node as ProseMirrorNode } from "@tiptap/pm/model";
 import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
 import ts from "highlight.js/lib/languages/typescript";
@@ -7,7 +5,7 @@ import { common, createLowlight } from "lowlight";
 import { CopyIcon, CheckIcon } from "lucide-react";
 import { useState } from "react";
 // ui
-import { Tooltip } from "@plane/ui";
+import { Tooltip } from "@plane/propel/tooltip";
 // plane utils
 import { cn } from "@plane/utils";
 
@@ -19,7 +17,7 @@ type Props = {
   node: ProseMirrorNode;
 };
 
-export const CodeBlockComponent: React.FC<Props> = ({ node }) => {
+export function CodeBlockComponent({ node }: Props) {
   const [copied, setCopied] = useState(false);
 
   const copyToClipboard = async (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
@@ -40,7 +38,7 @@ export const CodeBlockComponent: React.FC<Props> = ({ node }) => {
         <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 hidden group-hover/code:flex items-center justify-center absolute top-2 right-2 z-10 size-8 rounded-md bg-layer-1 border border-subtle transition duration-150 ease-in-out backdrop-blur-sm",
             {
               "bg-green-500/30 hover:bg-green-500/30 active:bg-green-500/30": copied,
             }
@@ -50,14 +48,14 @@ export const CodeBlockComponent: React.FC<Props> = ({ node }) => {
           {copied ? (
             <CheckIcon className="h-3 w-3 text-green-500" 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="bg-layer-3 text-primary rounded-lg p-4 my-2">
         <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 e3ae01033e..8b83c78d76 100644
--- a/packages/editor/src/core/extensions/code/code-block.ts
+++ b/packages/editor/src/core/extensions/code/code-block.ts
@@ -70,7 +70,6 @@ export const CodeBlock = Node.create<CodeBlockOptions>({
         default: null,
         parseHTML: (element) => {
           const { languageClassPrefix } = this.options;
-          // @ts-expect-error element is a DOM element
           const classNames = [...(element.firstElementChild?.classList || [])];
           const languages = classNames
             .filter((className) => className.startsWith(languageClassPrefix))
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 a7c68552a8..bbfab66aa9 100644
--- a/packages/editor/src/core/extensions/custom-image/components/block.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/block.tsx
@@ -4,7 +4,7 @@ import React, { useRef, useState, useCallback, useLayoutEffect, useEffect } from
 import { cn } from "@plane/utils";
 // local imports
 import type { Pixel, TCustomImageAttributes, TCustomImageSize } from "../types";
-import { ensurePixelString, getImageBlockId } from "../utils";
+import { ensurePixelString, getImageBlockId, isImageDuplicating } from "../utils";
 import type { CustomImageNodeViewProps } from "./node-view";
 import { ImageToolbarRoot } from "./toolbar";
 import { ImageUploadStatus } from "./upload-status";
@@ -20,7 +20,7 @@ type CustomImageBlockProps = CustomImageNodeViewProps & {
   downloadSrc: string | undefined;
 };
 
-export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
+export function CustomImageBlock(props: CustomImageBlockProps) {
   // props
   const {
     editor,
@@ -42,6 +42,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
     aspectRatio: nodeAspectRatio,
     src: imgNodeSrc,
     alignment: nodeAlignment,
+    status,
   } = node.attrs;
   // states
   const [size, setSize] = useState<TCustomImageSize>({
@@ -79,7 +80,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
     if (editorContainer) {
       closestEditorContainer = editorContainer;
     } else {
-      closestEditorContainer = img.closest(".editor-container") as HTMLDivElement | null;
+      closestEditorContainer = img.closest(".editor-container");
       if (!closestEditorContainer) {
         console.error("Editor container not found");
         return;
@@ -202,15 +203,16 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
     [editor, getPos, isTouchDevice]
   );
 
+  const isDuplicating = isImageDuplicating(status);
   // show the image loader if the remote image's src or preview image from filesystem is not set yet (while loading the image post upload) (or)
   // if the initial resize (from 35% width and "auto" height attrs to the actual size in px) is not complete
-  const showImageLoader = !(resolvedImageSrc || imageFromFileSystem) || !initialResizeComplete || hasErroredOnFirstLoad;
-  // show the image upload status only when the resolvedImageSrc is not ready
-  const showUploadStatus = !resolvedImageSrc;
+  const showImageLoader =
+    (!resolvedImageSrc && !isDuplicating) || !initialResizeComplete || hasErroredOnFirstLoad || isDuplicating; // show the image upload status only when the resolvedImageSrc is not ready
+  const showUploadStatus = !resolvedImageSrc && !isDuplicating;
   // show the image utils only if the remote image's (post upload) src is set and the initial resize is complete (but not while we're showing the preview imageFromFileSystem)
-  const showImageToolbar = resolvedImageSrc && resolvedDownloadSrc && initialResizeComplete;
+  const showImageToolbar = resolvedImageSrc && resolvedDownloadSrc && initialResizeComplete && !isDuplicating;
   // show the image resizer only if the editor is editable, the remote image's (post upload) src is set and the initial resize is complete (but not while we're showing the preview imageFromFileSystem)
-  const showImageResizer = editor.isEditable && resolvedImageSrc && initialResizeComplete;
+  const showImageResizer = editor.isEditable && resolvedImageSrc && initialResizeComplete && !isDuplicating;
   // show the preview image from the file system if the remote image's src is not set
   const displayedImageSrc = resolvedImageSrc || imageFromFileSystem;
 
@@ -232,10 +234,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
         }}
       >
         {showImageLoader && (
-          <div
-            className="animate-pulse bg-custom-background-80 rounded-md"
-            style={{ width: size.width, height: size.height }}
-          />
+          <div className="animate-pulse bg-layer-1 rounded-md" style={{ width: size.width, height: size.height }} />
         )}
         <img
           ref={imageRef}
@@ -305,13 +304,13 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
           />
         )}
         {selected && displayedImageSrc === resolvedImageSrc && (
-          <div className="absolute inset-0 size-full bg-custom-primary-500/30 pointer-events-none" />
+          <div className="absolute inset-0 size-full bg-accent-primary/30 pointer-events-none" />
         )}
         {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",
+                "absolute inset-0 border-2 border-accent-strong pointer-events-none rounded-md transition-opacity duration-100 ease-in-out",
                 {
                   "opacity-100": isResizing,
                   "opacity-0 group-hover/image-component:opacity-100": !isResizing,
@@ -320,7 +319,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
             />
             <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 translate-y-1/2 size-4 rounded-full bg-accent-primary border-2 border-white 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":
@@ -337,4 +336,4 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
       </div>
     </div>
   );
-};
+}
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 7ccfb9a288..3ad4e46187 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
@@ -3,6 +3,8 @@ 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 { hasImageDuplicationFailed } from "../utils";
 import { CustomImageBlock } from "./block";
 import { CustomImageUploader } from "./uploader";
 
@@ -14,9 +16,9 @@ export type CustomImageNodeViewProps = Omit<NodeViewProps, "extension" | "update
   updateAttributes: (attrs: Partial<TCustomImageAttributes>) => void;
 };
 
-export const CustomImageNodeView: React.FC<CustomImageNodeViewProps> = (props) => {
-  const { editor, extension, node } = props;
-  const { src: imgNodeSrc } = node.attrs;
+export function CustomImageNodeView(props: CustomImageNodeViewProps) {
+  const { editor, extension, node, updateAttributes } = props;
+  const { src: imgNodeSrc, status } = node.attrs;
 
   const [isUploaded, setIsUploaded] = useState(!!imgNodeSrc);
   const [resolvedSrc, setResolvedSrc] = useState<string | undefined>(undefined);
@@ -26,6 +28,8 @@ export const CustomImageNodeView: React.FC<CustomImageNodeViewProps> = (props) =
 
   const [editorContainer, setEditorContainer] = useState<HTMLDivElement | null>(null);
   const imageComponentRef = useRef<HTMLDivElement>(null);
+  const hasRetriedOnMount = useRef(false);
+  const isDuplicatingRef = useRef(false);
 
   useEffect(() => {
     const closestEditorContainer = imageComponentRef.current?.closest(".editor-container");
@@ -52,19 +56,82 @@ export const CustomImageNodeView: React.FC<CustomImageNodeViewProps> = (props) =
       return;
     }
 
+    setResolvedSrc(undefined);
+    setResolvedDownloadSrc(undefined);
+    setFailedToLoadImage(false);
+
     const getImageSource = async () => {
-      const url = await extension.options.getImageSource?.(imgNodeSrc);
-      setResolvedSrc(url);
-      const downloadUrl = await extension.options.getImageDownloadSource?.(imgNodeSrc);
-      setResolvedDownloadSrc(downloadUrl);
+      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);
+      }
     };
     getImageSource();
   }, [imgNodeSrc, extension.options]);
 
+  useEffect(() => {
+    const handleDuplication = async () => {
+      if (status !== ECustomImageStatus.DUPLICATING || !extension.options.duplicateImage || !imgNodeSrc) {
+        return;
+      }
+
+      // Prevent duplicate calls - check if already duplicating this asset
+      if (isDuplicatingRef.current) {
+        return;
+      }
+
+      isDuplicatingRef.current = true;
+      try {
+        hasRetriedOnMount.current = true;
+
+        const newAssetId = await extension.options.duplicateImage(imgNodeSrc);
+
+        if (!newAssetId) {
+          throw new Error("Duplication returned invalid asset ID");
+        }
+
+        setFailedToLoadImage(false);
+        updateAttributes({ src: newAssetId, status: ECustomImageStatus.UPLOADED });
+      } catch (error: unknown) {
+        console.error("Failed to duplicate image:", error);
+        // Update status to failed
+        updateAttributes({ status: ECustomImageStatus.DUPLICATION_FAILED });
+      } finally {
+        isDuplicatingRef.current = false;
+      }
+    };
+
+    handleDuplication();
+  }, [status, imgNodeSrc, extension.options.duplicateImage, updateAttributes]);
+
+  useEffect(() => {
+    if (hasImageDuplicationFailed(status) && !hasRetriedOnMount.current && imgNodeSrc) {
+      hasRetriedOnMount.current = true;
+      // Add a small delay before retrying to avoid immediate retries
+      updateAttributes({ status: ECustomImageStatus.DUPLICATING });
+    }
+  }, [status, imgNodeSrc, updateAttributes]);
+
+  useEffect(() => {
+    if (status === ECustomImageStatus.UPLOADED) {
+      hasRetriedOnMount.current = false;
+      setFailedToLoadImage(false);
+    }
+  }, [status]);
+
+  const hasDuplicationFailed = hasImageDuplicationFailed(status);
+  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}>
-        {(isUploaded || imageFromFileSystem) && !failedToLoadImage ? (
+        {shouldShowBlock && !hasDuplicationFailed ? (
           <CustomImageBlock
             editorContainer={editorContainer}
             imageFromFileSystem={imageFromFileSystem}
@@ -77,6 +144,7 @@ export const CustomImageNodeView: React.FC<CustomImageNodeViewProps> = (props) =
         ) : (
           <CustomImageUploader
             failedToLoadImage={failedToLoadImage}
+            hasDuplicationFailed={hasDuplicationFailed}
             loadImageFromFileSystem={setImageFromFileSystem}
             maxFileSize={editor.storage.imageComponent?.maxFileSize}
             setIsUploaded={setIsUploaded}
@@ -86,4 +154,4 @@ export const CustomImageNodeView: React.FC<CustomImageNodeViewProps> = (props) =
       </div>
     </NodeViewWrapper>
   );
-};
+}
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 d6706c6bbe..e35dc4b45e 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
@@ -2,7 +2,7 @@ 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";
@@ -14,7 +14,7 @@ type Props = {
   toggleToolbarViewStatus: (val: boolean) => void;
 };
 
-export const ImageAlignmentAction: React.FC<Props> = (props) => {
+export function ImageAlignmentAction(props: Props) {
   const { activeAlignment, handleChange, isTouchDevice, toggleToolbarViewStatus } = props;
   // states
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -34,7 +34,7 @@ export const ImageAlignmentAction: React.FC<Props> = (props) => {
       <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="h-full flex items-center gap-1 text-alpha-white-800 hover:text-alpha-white-1200 transition-colors"
           onClick={() => setIsDropdownOpen((prev) => !prev)}
         >
           {activeAlignmentDetails && <activeAlignmentDetails.icon className="flex-shrink-0 size-3" />}
@@ -42,12 +42,12 @@ export const ImageAlignmentAction: React.FC<Props> = (props) => {
         </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 -translate-x-1/2 mt-0.5 h-7 bg-alpha-black-1000 flex items-center gap-2 px-2 rounded-sm">
           {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="flex-shrink-0 h-full grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 transition-colors"
                 onClick={() => {
                   handleChange(option.value);
                   setIsDropdownOpen(false);
@@ -61,4 +61,4 @@ export const ImageAlignmentAction: React.FC<Props> = (props) => {
       )}
     </div>
   );
-};
+}
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 2f0a665ae5..d9a3eff971 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,12 +1,12 @@
 import { Download } from "lucide-react";
 // plane imports
-import { Tooltip } from "@plane/ui";
+import { Tooltip } from "@plane/propel/tooltip";
 
 type Props = {
   src: string;
 };
 
-export const ImageDownloadAction: React.FC<Props> = (props) => {
+export function ImageDownloadAction(props: Props) {
   const { src } = props;
 
   return (
@@ -14,11 +14,11 @@ export const ImageDownloadAction: React.FC<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="flex-shrink-0 h-full grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 transition-colors"
         aria-label="Download image"
       >
         <Download className="size-3" />
       </button>
     </Tooltip>
   );
-};
+}
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 82e3298155..1f693c4b23 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
@@ -20,7 +20,7 @@ type Props = {
   width: string;
 };
 
-const ImageFullScreenModalWithoutPortal = (props: Props) => {
+function ImageFullScreenModalWithoutPortal(props: Props) {
   const { aspectRatio, isFullScreenEnabled, isTouchDevice, downloadSrc, src, toggleFullScreenMode, width } = props;
   // refs
   const dragStart = useRef({ x: 0, y: 0 });
@@ -193,11 +193,14 @@ const 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,
-        "cursor-default": !isDragging,
-        "cursor-grabbing": isDragging,
-      })}
+      className={cn(
+        "fixed inset-0 size-full z-50 bg-alpha-black-1100 opacity-0 pointer-events-none transition-opacity",
+        {
+          "opacity-100 pointer-events-auto editor-image-full-screen-modal": isFullScreenEnabled,
+          "cursor-default": !isDragging,
+          "cursor-grabbing": isDragging,
+        }
+      )}
       role="dialog"
       aria-modal="true"
       aria-label="Fullscreen image viewer"
@@ -213,7 +216,7 @@ const ImageFullScreenModalWithoutPortal = (props: Props) => {
           className="absolute top-10 right-10 size-8 grid 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-alpha-white-800 hover:text-alpha-white-1200 transition-colors" />
         </button>
         <img
           ref={setImageRef}
@@ -231,7 +234,7 @@ const 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 -translate-x-1/2 flex items-center justify-center gap-1 rounded-md border border-subtle-1 py-2 divide-x divide-subtle-1 bg-alpha-black-1200">
           <div className="flex items-center">
             <button
               type="button"
@@ -242,13 +245,13 @@ const 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="size-6 grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 disabled:text-alpha-white-500 transition-colors duration-200"
               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="text-13 w-12 text-center text-alpha-white-1200">{Math.round(100 * magnification)}%</span>
             <button
               type="button"
               onClick={(e) => {
@@ -258,7 +261,7 @@ const 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="size-6 grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 disabled:text-alpha-white-500 transition-colors duration-200"
               disabled={magnification >= MAX_ZOOM}
               aria-label="Zoom in"
             >
@@ -269,7 +272,7 @@ const ImageFullScreenModalWithoutPortal = (props: Props) => {
             <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="flex-shrink-0 size-8 grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 transition-colors duration-200"
               aria-label="Download image"
             >
               <Download className="size-4" />
@@ -279,7 +282,7 @@ const 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="flex-shrink-0 size-8 grid place-items-center text-alpha-white-800 hover:text-alpha-white-1200 transition-colors duration-200"
               aria-label="Open image in new tab"
             >
               <ExternalLink className="size-4" />
@@ -289,9 +292,9 @@ const ImageFullScreenModalWithoutPortal = (props: Props) => {
       </div>
     </div>
   );
-};
+}
 
-export const ImageFullScreenModal: React.FC<Props> = (props) => {
+export function ImageFullScreenModal(props: Props) {
   let modal = <ImageFullScreenModalWithoutPortal {...props} />;
   const portal = document.querySelector("#editor-portal");
   if (portal) {
@@ -303,4 +306,4 @@ export const ImageFullScreenModal: React.FC<Props> = (props) => {
     }
   }
   return modal;
-};
+}
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 2d8e736061..bd4ceb69c8 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,7 @@
 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";
 
@@ -17,7 +17,7 @@ type Props = {
   toggleToolbarViewStatus: (val: boolean) => void;
 };
 
-export const ImageFullScreenActionRoot: React.FC<Props> = (props) => {
+export function ImageFullScreenActionRoot(props: Props) {
   const { image, isTouchDevice, toggleToolbarViewStatus } = props;
   // states
   const [isFullScreenEnabled, setIsFullScreenEnabled] = useState(false);
@@ -47,7 +47,7 @@ export const ImageFullScreenActionRoot: React.FC<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="flex-shrink-0 h-full grid place-items-center text-on-color/60 hover:text-on-color transition-colors"
           aria-label="View image in full screen"
         >
           <Maximize className="size-3" />
@@ -55,4 +55,4 @@ export const ImageFullScreenActionRoot: React.FC<Props> = (props) => {
       </Tooltip>
     </>
   );
-};
+}
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 1011050de7..0edf9f8580 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
@@ -20,7 +20,7 @@ type Props = {
   width: string;
 };
 
-export const ImageToolbarRoot: React.FC<Props> = (props) => {
+export function ImageToolbarRoot(props: Props) {
   const { alignment, editor, downloadSrc, handleAlignmentChange, isTouchDevice } = props;
   // states
   const [shouldShowToolbar, setShouldShowToolbar] = useState(false);
@@ -31,7 +31,7 @@ export const ImageToolbarRoot: React.FC<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",
+          "absolute top-1 right-1 h-7 z-20 bg-alpha-black-1000 rounded-sm 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",
           {
             "opacity-100 pointer-events-auto": shouldShowToolbar,
           }
@@ -54,4 +54,4 @@ export const ImageToolbarRoot: React.FC<Props> = (props) => {
       </div>
     </>
   );
-};
+}
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 7b6e0a081f..5a5aea5814 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
@@ -7,7 +7,7 @@ type Props = {
   nodeId: string;
 };
 
-export const ImageUploadStatus: React.FC<Props> = (props) => {
+export function ImageUploadStatus(props: Props) {
   const { editor, nodeId } = props;
   // Displayed status that will animate smoothly
   const [displayStatus, setDisplayStatus] = useState(0);
@@ -53,8 +53,8 @@ export const ImageUploadStatus: React.FC<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 bg-alpha-black-800 rounded-sm text-11 font-medium w-10 text-center">
       {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 447d3120d0..273121944d 100644
--- a/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
@@ -1,4 +1,4 @@
-import { ImageIcon } from "lucide-react";
+import { ImageIcon, RotateCcw } from "lucide-react";
 import type { ChangeEvent } from "react";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 // plane imports
@@ -11,17 +11,19 @@ import type { EFileError } from "@/helpers/file";
 // hooks
 import { useUploader, useDropZone, uploadFirstFileAndInsertRemaining } from "@/hooks/use-file-upload";
 // local imports
+import { ECustomImageStatus } from "../types";
 import { getImageComponentImageFileMap } from "../utils";
 import type { CustomImageNodeViewProps } from "./node-view";
 
 type CustomImageUploaderProps = CustomImageNodeViewProps & {
   failedToLoadImage: boolean;
+  hasDuplicationFailed: boolean;
   loadImageFromFileSystem: (file: string) => void;
   maxFileSize: number;
   setIsUploaded: (isUploaded: boolean) => void;
 };
 
-export const CustomImageUploader = (props: CustomImageUploaderProps) => {
+export function CustomImageUploader(props: CustomImageUploaderProps) {
   const {
     editor,
     extension,
@@ -33,10 +35,12 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
     selected,
     setIsUploaded,
     updateAttributes,
+    hasDuplicationFailed,
   } = props;
   // refs
   const fileInputRef = useRef<HTMLInputElement>(null);
   const hasTriggeredFilePickerRef = useRef(false);
+  const hasTriedUploadingOnMountRef = useRef(false);
   const { id: imageEntityId } = node.attrs;
   // derived values
   const imageComponentImageFileMap = useMemo(() => getImageComponentImageFileMap(editor), [editor]);
@@ -50,6 +54,7 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
         // Update the node view's src attribute post upload
         updateAttributes({
           src: url,
+          status: ECustomImageStatus.UPLOADED,
         });
         imageComponentImageFileMap?.delete(imageEntityId);
 
@@ -84,8 +89,11 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
   );
 
   const uploadImageEditorCommand = useCallback(
-    async (file: File) => await extension.options.uploadImage?.(imageEntityId ?? "", file),
-    [extension.options, imageEntityId]
+    async (file: File) => {
+      updateAttributes({ status: ECustomImageStatus.UPLOADING });
+      return await extension.options.uploadImage?.(imageEntityId ?? "", file);
+    },
+    [extension.options, imageEntityId, updateAttributes]
   );
 
   const handleProgressStatus = useCallback(
@@ -117,17 +125,16 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
     uploader: uploadFile,
   });
 
-  // the meta data of the image component
-  const meta = useMemo(
-    () => imageComponentImageFileMap?.get(imageEntityId ?? ""),
-    [imageComponentImageFileMap, imageEntityId]
-  );
-
   // after the image component is mounted we start the upload process based on
   // it's uploaded
   useEffect(() => {
+    if (hasTriedUploadingOnMountRef.current) return;
+
+    // the meta data of the image component
+    const meta = imageComponentImageFileMap?.get(imageEntityId ?? "");
     if (meta) {
       if (meta.event === "drop" && "file" in meta) {
+        hasTriedUploadingOnMountRef.current = true;
         uploadFile(meta.file);
       } else if (meta.event === "insert" && fileInputRef.current && !hasTriggeredFilePickerRef.current) {
         if (meta.hasOpenedFileInputOnce) return;
@@ -137,8 +144,10 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
         hasTriggeredFilePickerRef.current = true;
         imageComponentImageFileMap?.set(imageEntityId ?? "", { ...meta, hasOpenedFileInputOnce: true });
       }
+    } else {
+      hasTriedUploadingOnMountRef.current = true;
     }
-  }, [meta, uploadFile, imageComponentImageFileMap, imageEntityId, isTouchDevice]);
+  }, [imageEntityId, isTouchDevice, uploadFile, imageComponentImageFileMap]);
 
   const onFileChange = useCallback(
     async (e: ChangeEvent<HTMLInputElement>) => {
@@ -159,9 +168,16 @@ export const 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) {
+    if (isErrorState) {
       return "Error loading image";
     }
 
@@ -174,35 +190,63 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
     }
 
     return "Add an image";
-  }, [draggedInside, editor.isEditable, failedToLoadImage, isImageBeingUploaded]);
+  }, [draggedInside, editor.isEditable, isErrorState, isImageBeingUploaded]);
+
+  const handleRetryClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (hasDuplicationFailed && editor.isEditable) {
+        updateAttributes({ status: ECustomImageStatus.DUPLICATING });
+      }
+    },
+    [hasDuplicationFailed, editor.isEditable, updateAttributes]
+  );
 
   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 items-center justify-start gap-2 py-3 px-2 rounded-lg text-tertiary bg-layer-3 border border-dashed transition-all duration-200 ease-in-out cursor-default",
         {
-          "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,
-          "hover:text-red-500": failedToLoadImage && editor.isEditable,
-          "bg-red-500/10": failedToLoadImage && selected,
-          "hover:bg-red-500/10": failedToLoadImage && selected && editor.isEditable,
+          "border-subtle": !(selected && editor.isEditable && !isErrorState),
+          "hover:text-secondary hover:bg-layer-3-hover cursor-pointer": editor.isEditable && !isErrorState,
+          "bg-layer-3-hover text-secondary": draggedInside && editor.isEditable && !isErrorState,
+          "text-accent-secondary bg-accent-primary/10 hover:bg-accent-primary/10 hover:text-accent-secondary":
+            selected && editor.isEditable && !isErrorState,
+          "text-red-500 cursor-default": isErrorState,
+          "hover:text-red-500 hover:bg-red-500/10": isErrorState && editor.isEditable,
+          "bg-red-500/10": isErrorState && selected,
+          "hover:bg-red-500/20": isErrorState && selected && editor.isEditable,
         }
       )}
+      style={borderColor ? { borderColor } : undefined}
       onDrop={onDrop}
       onDragOver={onDragEnter}
       onDragLeave={onDragLeave}
       contentEditable={false}
       onClick={() => {
-        if (!failedToLoadImage && editor.isEditable) {
+        if (!failedToLoadImage && editor.isEditable && !hasDuplicationFailed) {
           fileInputRef.current?.click();
         }
       }}
     >
       <ImageIcon className="size-4" />
-      <div className="text-base font-medium">{getDisplayMessage()}</div>
+      <div className="text-14 font-medium flex-1">{getDisplayMessage()}</div>
+      {hasDuplicationFailed && editor.isEditable && (
+        <button
+          type="button"
+          onClick={handleRetryClick}
+          className={cn(
+            "flex items-center gap-1 px-2 py-1 font-medium text-red-500 rounded-md transition-all duration-200 ease-in-out hover:bg-red-500/20 hover:text-red-500",
+            {
+              "hover:bg-red-500/20": selected,
+            }
+          )}
+          title="Retry duplication"
+        >
+          <RotateCcw className="size-3" />
+          <span className="text-11">Retry</span>
+        </button>
+      )}
       <input
         className="size-0 overflow-hidden"
         ref={fileInputRef}
@@ -214,4 +258,4 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
       />
     </div>
   );
-};
+}
diff --git a/packages/editor/src/core/extensions/custom-image/extension.tsx b/packages/editor/src/core/extensions/custom-image/extension.tsx
index e43997bfac..941ac66862 100644
--- a/packages/editor/src/core/extensions/custom-image/extension.tsx
+++ b/packages/editor/src/core/extensions/custom-image/extension.tsx
@@ -12,6 +12,7 @@ import type { CustomImageNodeViewProps } from "./components/node-view";
 import { CustomImageNodeView } from "./components/node-view";
 import { CustomImageExtensionConfig } from "./extension-config";
 import type { CustomImageExtensionOptions, CustomImageExtensionStorage } from "./types";
+import { ECustomImageAttributeNames, ECustomImageStatus } from "./types";
 import { getImageComponentImageFileMap } from "./utils";
 
 type Props = {
@@ -19,7 +20,7 @@ type Props = {
   isEditable: boolean;
 };
 
-export const CustomImageExtension = (props: Props) => {
+export function CustomImageExtension(props: Props) {
   const { fileHandler, isEditable } = props;
   // derived values
   const { getAssetSrc, getAssetDownloadSrc, restore: restoreImageFn } = fileHandler;
@@ -30,13 +31,14 @@ export const CustomImageExtension = (props: Props) => {
 
     addOptions() {
       const upload = "upload" in fileHandler ? fileHandler.upload : undefined;
-
+      const duplicate = "duplicate" in fileHandler ? fileHandler.duplicate : undefined;
       return {
         ...this.parent?.(),
         getImageDownloadSource: getAssetDownloadSrc,
         getImageSource: getAssetSrc,
         restoreImage: restoreImageFn,
         uploadImage: upload,
+        duplicateImage: duplicate,
       };
     },
 
@@ -93,7 +95,8 @@ export const CustomImageExtension = (props: Props) => {
             }
 
             const attributes = {
-              id: fileId,
+              [ECustomImageAttributeNames.ID]: fileId,
+              [ECustomImageAttributeNames.STATUS]: ECustomImageStatus.PENDING,
             };
 
             if (props.pos) {
@@ -116,11 +119,10 @@ export const CustomImageExtension = (props: Props) => {
         ArrowUp: insertEmptyParagraphAtNodeBoundaries("up", this.name),
       };
     },
-
     addNodeView() {
       return ReactNodeViewRenderer((props) => (
         <CustomImageNodeView {...props} node={props.node as CustomImageNodeViewProps["node"]} />
       ));
     },
   });
-};
+}
diff --git a/packages/editor/src/core/extensions/custom-image/types.ts b/packages/editor/src/core/extensions/custom-image/types.ts
index 9d6f84d264..eed345ff78 100644
--- a/packages/editor/src/core/extensions/custom-image/types.ts
+++ b/packages/editor/src/core/extensions/custom-image/types.ts
@@ -9,6 +9,7 @@ export enum ECustomImageAttributeNames {
   ASPECT_RATIO = "aspectRatio",
   SOURCE = "src",
   ALIGNMENT = "alignment",
+  STATUS = "status",
 }
 
 export type Pixel = `${number}px`;
@@ -23,6 +24,14 @@ export type TCustomImageSize = {
 
 export type TCustomImageAlignment = "left" | "center" | "right";
 
+export enum ECustomImageStatus {
+  PENDING = "pending",
+  UPLOADING = "uploading",
+  UPLOADED = "uploaded",
+  DUPLICATING = "duplicating",
+  DUPLICATION_FAILED = "duplication-failed",
+}
+
 export type TCustomImageAttributes = {
   [ECustomImageAttributeNames.ID]: string | null;
   [ECustomImageAttributeNames.WIDTH]: PixelAttribute<"35%" | number> | null;
@@ -30,6 +39,7 @@ export type TCustomImageAttributes = {
   [ECustomImageAttributeNames.ASPECT_RATIO]: number | null;
   [ECustomImageAttributeNames.SOURCE]: string | null;
   [ECustomImageAttributeNames.ALIGNMENT]: TCustomImageAlignment;
+  [ECustomImageAttributeNames.STATUS]: ECustomImageStatus;
 };
 
 export type UploadEntity = ({ event: "insert" } | { event: "drop"; file: File }) & { hasOpenedFileInputOnce?: boolean };
@@ -45,6 +55,7 @@ export type CustomImageExtensionOptions = {
   getImageSource: TFileHandler["getAssetSrc"];
   restoreImage: TFileHandler["restore"];
   uploadImage?: TFileHandler["upload"];
+  duplicateImage?: TFileHandler["duplicate"];
 };
 
 export type CustomImageExtensionStorage = {
diff --git a/packages/editor/src/core/extensions/custom-image/utils.ts b/packages/editor/src/core/extensions/custom-image/utils.ts
index 0b0d17ffd0..86faf55ec6 100644
--- a/packages/editor/src/core/extensions/custom-image/utils.ts
+++ b/packages/editor/src/core/extensions/custom-image/utils.ts
@@ -2,7 +2,7 @@ import type { Editor } from "@tiptap/core";
 import { AlignCenter, AlignLeft, AlignRight } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 // local imports
-import { ECustomImageAttributeNames } from "./types";
+import { ECustomImageAttributeNames, ECustomImageStatus } from "./types";
 import type { TCustomImageAlignment, Pixel, TCustomImageAttributes } from "./types";
 
 export const DEFAULT_CUSTOM_IMAGE_ATTRIBUTES: TCustomImageAttributes = {
@@ -12,6 +12,7 @@ export const DEFAULT_CUSTOM_IMAGE_ATTRIBUTES: TCustomImageAttributes = {
   [ECustomImageAttributeNames.HEIGHT]: "auto",
   [ECustomImageAttributeNames.ASPECT_RATIO]: null,
   [ECustomImageAttributeNames.ALIGNMENT]: "left",
+  [ECustomImageAttributeNames.STATUS]: ECustomImageStatus.PENDING,
 };
 
 export const getImageComponentImageFileMap = (editor: Editor) => editor.storage.imageComponent?.fileMap;
@@ -53,3 +54,11 @@ export const IMAGE_ALIGNMENT_OPTIONS: {
   },
 ];
 export const getImageBlockId = (id: string) => `editor-image-block-${id}`;
+
+export const isImageDuplicating = (status: ECustomImageStatus) => status === ECustomImageStatus.DUPLICATING;
+
+export const isImageDuplicationComplete = (status: ECustomImageStatus) =>
+  status === ECustomImageStatus.UPLOADED || status === ECustomImageStatus.DUPLICATION_FAILED;
+
+export const hasImageDuplicationFailed = (status: ECustomImageStatus) =>
+  status === ECustomImageStatus.DUPLICATION_FAILED;
diff --git a/packages/editor/src/core/extensions/custom-link/extension.tsx b/packages/editor/src/core/extensions/custom-link/extension.tsx
index dbc81a2bd3..e64c700f12 100644
--- a/packages/editor/src/core/extensions/custom-link/extension.tsx
+++ b/packages/editor/src/core/extensions/custom-link/extension.tsx
@@ -124,7 +124,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/emoji/components/emojis-list.tsx b/packages/editor/src/core/extensions/emoji/components/emojis-list.tsx
index 25b2977e77..faf31601e0 100644
--- a/packages/editor/src/core/extensions/emoji/components/emojis-list.tsx
+++ b/packages/editor/src/core/extensions/emoji/components/emojis-list.tsx
@@ -21,7 +21,10 @@ export type EmojisListDropdownProps = SuggestionProps<EmojiItem, { name: string
   forceOpen?: boolean;
 };
 
-export const EmojisListDropdown = forwardRef<EmojiListRef, EmojisListDropdownProps>((props, ref) => {
+export const EmojisListDropdown = forwardRef(function EmojisListDropdown(
+  props: EmojisListDropdownProps,
+  ref: React.ForwardedRef<EmojiListRef>
+) {
   const { items, command, query, onClose, forceOpen = false } = props;
   // states
   const [selectedIndex, setSelectedIndex] = useState<number>(0);
@@ -121,7 +124,7 @@ export const EmojisListDropdown = forwardRef<EmojiListRef, EmojisListDropdownPro
       <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",
+          "relative max-h-80 w-[14rem] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200 space-y-2 opacity-0 invisible transition-opacity",
           {
             "opacity-100 visible": isVisible,
           }
@@ -147,15 +150,15 @@ export const EmojisListDropdown = forwardRef<EmojiListRef, EmojisListDropdownPro
                 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 items-center gap-2 w-full rounded-sm px-2 py-1.5 text-13 text-left truncate text-secondary hover:bg-layer-1-hover transition-colors duration-150",
                   {
-                    "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="size-5 grid place-items-center flex-shrink-0 text-14">{item.emoji}</span>
                 <span className="flex-grow truncate">
                   <span className="font-medium">:{item.name}:</span>
                 </span>
@@ -163,7 +166,7 @@ export const EmojisListDropdown = forwardRef<EmojiListRef, EmojisListDropdownPro
             );
           })
         ) : (
-          <div className="text-center text-sm text-custom-text-400 py-2">No emojis found</div>
+          <div className="text-center text-13 text-placeholder py-2">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 d2d659328c..d61623c39a 100644
--- a/packages/editor/src/core/extensions/emoji/emoji.ts
+++ b/packages/editor/src/core/extensions/emoji/emoji.ts
@@ -152,7 +152,7 @@ export const Emoji = Node.create<EmojiOptions, EmojiStorage>({
 
         return {
           ...versions,
-          [version as number]: emoji ? isEmojiSupported(emoji.emoji as string) : false,
+          [version]: emoji ? isEmojiSupported(emoji.emoji as string) : false,
         };
       }, {});
 
diff --git a/packages/editor/src/core/extensions/emoji/extension.ts b/packages/editor/src/core/extensions/emoji/extension.ts
index 10f854faa8..e9be90d390 100644
--- a/packages/editor/src/core/extensions/emoji/extension.ts
+++ b/packages/editor/src/core/extensions/emoji/extension.ts
@@ -25,7 +25,7 @@ export const EmojiExtension = Emoji.extend({
   },
 }).configure({
   // Filter out emojis without emoji value and remove fallbackImage property to prevent CDN calls
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
   emojis: gitHubEmojis.filter((item) => item.emoji).map(({ fallbackImage, ...emoji }) => emoji),
   suggestion: emojiSuggestion,
   enableEmoticons: true,
diff --git a/packages/editor/src/core/extensions/extensions.ts b/packages/editor/src/core/extensions/extensions.ts
index 855440df8f..460ae7dc3b 100644
--- a/packages/editor/src/core/extensions/extensions.ts
+++ b/packages/editor/src/core/extensions/extensions.ts
@@ -43,9 +43,11 @@ type TArguments = Pick<
   | "disabledExtensions"
   | "flaggedExtensions"
   | "fileHandler"
+  | "getEditorMetaData"
   | "isTouchDevice"
   | "mentionHandler"
   | "placeholder"
+  | "showPlaceholderOnEmpty"
   | "tabIndex"
   | "extendedEditorProps"
 > & {
@@ -60,9 +62,11 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
     enableHistory,
     fileHandler,
     flaggedExtensions,
+    getEditorMetaData,
     isTouchDevice = false,
     mentionHandler,
     placeholder,
+    showPlaceholderOnEmpty,
     tabIndex,
     editable,
     extendedEditorProps,
@@ -106,14 +110,16 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
     TableCell,
     TableRow,
     CustomMentionExtension(mentionHandler),
-    CustomPlaceholderExtension({ placeholder }),
+    CustomPlaceholderExtension({ placeholder, showPlaceholderOnEmpty }),
     CharacterCount,
     CustomColorExtension,
     CustomTextAlignExtension,
     CustomCalloutExtension,
     UtilityExtension({
       disabledExtensions,
+      flaggedExtensions,
       fileHandler,
+      getEditorMetaData,
       isEditable: editable,
       isTouchDevice,
     }),
diff --git a/packages/editor/src/core/extensions/horizontal-rule.ts b/packages/editor/src/core/extensions/horizontal-rule.ts
index e5bb1f60b8..ee3fb09cbe 100644
--- a/packages/editor/src/core/extensions/horizontal-rule.ts
+++ b/packages/editor/src/core/extensions/horizontal-rule.ts
@@ -25,7 +25,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.tsx b/packages/editor/src/core/extensions/image/extension.tsx
index 2e40361729..61c1421d1d 100644
--- a/packages/editor/src/core/extensions/image/extension.tsx
+++ b/packages/editor/src/core/extensions/image/extension.tsx
@@ -24,7 +24,7 @@ type Props = {
   fileHandler: TFileHandler;
 };
 
-export const ImageExtension = (props: Props) => {
+export function ImageExtension(props: Props) {
   const { fileHandler } = props;
   // derived values
   const { getAssetSrc } = fileHandler;
@@ -61,4 +61,4 @@ export const ImageExtension = (props: Props) => {
       ));
     },
   });
-};
+}
diff --git a/packages/editor/src/core/extensions/keymap.ts b/packages/editor/src/core/extensions/keymap.ts
index 1a7e9a4ac8..7000dc73dc 100644
--- a/packages/editor/src/core/extensions/keymap.ts
+++ b/packages/editor/src/core/extensions/keymap.ts
@@ -7,7 +7,6 @@ import { canJoin } from "@tiptap/pm/transform";
 import { CORE_EXTENSIONS } from "@/constants/extension";
 
 declare module "@tiptap/core" {
-  // eslint-disable-next-line no-unused-vars
   interface Commands<ReturnType> {
     customKeymap: {
       /**
diff --git a/packages/editor/src/core/extensions/mentions/extension.tsx b/packages/editor/src/core/extensions/mentions/extension.tsx
index 921667566d..96001cbea1 100644
--- a/packages/editor/src/core/extensions/mentions/extension.tsx
+++ b/packages/editor/src/core/extensions/mentions/extension.tsx
@@ -9,7 +9,7 @@ import { MentionNodeView } from "./mention-node-view";
 // utils
 import { renderMentionsDropdown } from "./utils";
 
-export const CustomMentionExtension = (props: TMentionHandler) => {
+export function CustomMentionExtension(props: TMentionHandler) {
   const { searchCallback, renderComponent, getMentionedEntityDetails } = props;
   return CustomMentionExtensionConfig.extend({
     addOptions(this) {
@@ -30,6 +30,7 @@ export const CustomMentionExtension = (props: TMentionHandler) => {
       render: renderMentionsDropdown({
         searchCallback,
       }),
+      allowSpaces: true,
     },
   });
-};
+}
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 6be87fb579..a7290b4539 100644
--- a/packages/editor/src/core/extensions/mentions/mention-node-view.tsx
+++ b/packages/editor/src/core/extensions/mentions/mention-node-view.tsx
@@ -12,7 +12,7 @@ export type MentionNodeViewProps = NodeViewProps & {
   };
 };
 
-export const MentionNodeView: React.FC<MentionNodeViewProps> = (props) => {
+export function MentionNodeView(props: MentionNodeViewProps) {
   const {
     extension,
     node: { attrs },
@@ -26,4 +26,4 @@ export const MentionNodeView: React.FC<MentionNodeViewProps> = (props) => {
       })}
     </NodeViewWrapper>
   );
-};
+}
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 8e7a64b4bb..3d00c04cbe 100644
--- a/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx
+++ b/packages/editor/src/core/extensions/mentions/mentions-list-dropdown.tsx
@@ -1,9 +1,8 @@
-"use client";
-
 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";
@@ -17,7 +16,7 @@ export type MentionsListDropdownProps = SuggestionProps<TMentionSection, TMentio
     onClose: () => void;
   };
 
-export const MentionsListDropdown = forwardRef((props: MentionsListDropdownProps, ref) => {
+export const MentionsListDropdown = forwardRef(function MentionsListDropdown(props: MentionsListDropdownProps, ref) {
   const { command, query, searchCallback, onClose } = props;
   // states
   const [sections, setSections] = useState<TMentionSection[]>([]);
@@ -77,12 +76,11 @@ export const MentionsListDropdown = forwardRef((props: MentionsListDropdownProps
     });
   }, [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);
         }
@@ -91,9 +89,25 @@ export const MentionsListDropdown = forwardRef((props: MentionsListDropdownProps
       } 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(() => {
@@ -126,7 +140,7 @@ export const MentionsListDropdown = forwardRef((props: MentionsListDropdownProps
       />
       <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] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200 space-y-2"
         style={{
           zIndex: 100,
         }}
@@ -138,11 +152,11 @@ export const MentionsListDropdown = forwardRef((props: MentionsListDropdownProps
         }}
       >
         {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;
 
@@ -152,9 +166,9 @@ export const MentionsListDropdown = forwardRef((props: MentionsListDropdownProps
                     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 items-center gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1-hover",
                       {
-                        "bg-custom-background-80": isSelected,
+                        "bg-layer-1-hover": isSelected,
                       }
                     )}
                     onClick={(e) => {
@@ -171,7 +185,7 @@ export const MentionsListDropdown = forwardRef((props: MentionsListDropdownProps
                   >
                     <span className="size-5 grid place-items-center flex-shrink-0">{item.icon}</span>
                     {item.subTitle && (
-                      <h5 className="whitespace-nowrap text-xs text-custom-text-300 flex-shrink-0">{item.subTitle}</h5>
+                      <h5 className="whitespace-nowrap text-11 text-tertiary flex-shrink-0">{item.subTitle}</h5>
                     )}
                     <p className="flex-grow truncate">{item.title}</p>
                   </button>
@@ -180,7 +194,7 @@ export const MentionsListDropdown = forwardRef((props: MentionsListDropdownProps
             </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/placeholder.ts b/packages/editor/src/core/extensions/placeholder.ts
index 7a236332cd..ade422d266 100644
--- a/packages/editor/src/core/extensions/placeholder.ts
+++ b/packages/editor/src/core/extensions/placeholder.ts
@@ -6,10 +6,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 +30,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/slash-commands/command-items-list.tsx b/packages/editor/src/core/extensions/slash-commands/command-items-list.tsx
index 2285e582a6..81050caf58 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
@@ -215,14 +215,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(
@@ -233,6 +226,7 @@ export const getSlashCommandFilteredSections =
                 title: color.label,
                 description: "Change text color",
                 searchTerms: ["color", "text", color.label],
+
                 icon: (
                   <ALargeSmall
                     className="size-3.5"
@@ -241,6 +235,7 @@ export const getSlashCommandFilteredSections =
                     }}
                   />
                 ),
+
                 command: ({ editor, range }) => toggleTextColor(color.key, editor, range),
               }) as ISlashCommandItem
           ),
@@ -259,8 +254,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),
           },
@@ -273,10 +268,12 @@ export const getSlashCommandFilteredSections =
                 description: "Change background color",
                 searchTerms: ["color", "bg", "background", color.label],
                 icon: <ALargeSmall className="size-3.5" />,
+
                 iconContainerStyle: {
                   borderRadius: "4px",
                   backgroundColor: color.backgroundColor,
                 },
+
                 command: ({ editor, range }) => toggleBackgroundColor(color.key, editor, range),
               }) as ISlashCommandItem
           ),
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 52c8d7aec0..622eb5509c 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
@@ -30,7 +30,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}
       </>
     );
@@ -40,7 +40,7 @@ const highlightMatch = (text: string, query: string): React.ReactNode => {
   return text;
 };
 
-export const CommandMenuItem: React.FC<Props> = (props) => {
+export function CommandMenuItem(props: Props) {
   const { isSelected, item, itemIndex, onClick, onMouseEnter, sectionIndex, query } = props;
 
   return (
@@ -48,9 +48,9 @@ export const CommandMenuItem: React.FC<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 items-center gap-2 w-full rounded-sm px-1 py-1.5 text-13 text-left truncate text-secondary hover:bg-layer-1-hover",
         {
-          "bg-custom-background-80": isSelected,
+          "bg-layer-1-hover": isSelected,
         }
       )}
       onClick={onClick}
@@ -59,8 +59,8 @@ export const CommandMenuItem: React.FC<Props> = (props) => {
       <span className="size-5 grid place-items-center flex-shrink-0" 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 7d8bbab381..6ab15766af 100644
--- a/packages/editor/src/core/extensions/slash-commands/command-menu.tsx
+++ b/packages/editor/src/core/extensions/slash-commands/command-menu.tsx
@@ -15,7 +15,7 @@ export type SlashCommandsMenuProps = SuggestionProps<TSlashCommandSection, ISlas
   onClose: () => void;
 };
 
-export const SlashCommandsMenu = forwardRef((props: SlashCommandsMenuProps, ref) => {
+export const SlashCommandsMenu = forwardRef(function SlashCommandsMenu(props: SlashCommandsMenuProps, ref) {
   const { items: sections, command, query, onClose } = props;
   // states
   const [selectedIndex, setSelectedIndex] = useState({
@@ -131,7 +131,7 @@ export const SlashCommandsMenu = forwardRef((props: SlashCommandsMenuProps, ref)
       <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] overflow-y-auto rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 shadow-raised-200 space-y-2"
         style={{
           zIndex: 100,
         }}
@@ -144,7 +144,7 @@ export const SlashCommandsMenu = forwardRef((props: SlashCommandsMenuProps, ref)
       >
         {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/root.tsx b/packages/editor/src/core/extensions/slash-commands/root.tsx
index 2bd66471b1..11751e27fb 100644
--- a/packages/editor/src/core/extensions/slash-commands/root.tsx
+++ b/packages/editor/src/core/extensions/slash-commands/root.tsx
@@ -121,9 +121,10 @@ export type TExtensionProps = Pick<IEditorProps, "disabledExtensions" | "flagged
   additionalOptions?: TSlashCommandAdditionalOption[];
 };
 
-export const SlashCommands = (props: TExtensionProps) =>
-  Command.configure({
+export function SlashCommands(props: TExtensionProps) {
+  return Command.configure({
     suggestion: {
       items: getSlashCommandFilteredSections(props),
     },
   });
+}
diff --git a/packages/editor/src/core/extensions/starter-kit.ts b/packages/editor/src/core/extensions/starter-kit.ts
index e6a4c968d7..a07bba55a6 100644
--- a/packages/editor/src/core/extensions/starter-kit.ts
+++ b/packages/editor/src/core/extensions/starter-kit.ts
@@ -10,12 +10,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 +39,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/plugins/drag-handles/color-selector.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/color-selector.tsx
index 5b8aac23ae..724f0d7cf9 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
@@ -35,7 +35,7 @@ const handleBackgroundColorChange = (editor: Editor, color: string | null) => {
 //     .run();
 // };
 
-export const TableDragHandleDropdownColorSelector: React.FC<Props> = (props) => {
+export function TableDragHandleDropdownColorSelector(props: Props) {
   const { editor, onSelect } = props;
 
   return (
@@ -43,7 +43,7 @@ export const TableDragHandleDropdownColorSelector: React.FC<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 items-center justify-between gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1"
       >
         {({ open }) => (
           <>
@@ -61,13 +61,13 @@ export const TableDragHandleDropdownColorSelector: React.FC<Props> = (props) =>
       </Disclosure.Button>
       <Disclosure.Panel className="p-1 space-y-2 mb-1.5">
         {/* <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 +76,7 @@ export const TableDragHandleDropdownColorSelector: React.FC<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 +84,13 @@ export const TableDragHandleDropdownColorSelector: React.FC<Props> = (props) =>
           </div>
         </div> */}
         <div className="space-y-1">
-          <p className="text-xs text-custom-text-300 font-semibold">Background colors</p>
+          <p className="text-11 text-tertiary font-semibold">Background 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.backgroundColor,
                 }}
@@ -102,7 +102,7 @@ export const TableDragHandleDropdownColorSelector: React.FC<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-hover transition-colors"
               onClick={() => {
                 handleBackgroundColorChange(editor, null);
                 onSelect(null);
@@ -115,4 +115,4 @@ export const TableDragHandleDropdownColorSelector: React.FC<Props> = (props) =>
       </Disclosure.Panel>
     </Disclosure>
   );
-};
+}
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 b285de93ae..ed344a0703 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
@@ -12,7 +12,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
@@ -45,10 +45,29 @@ export type ColumnDragHandleProps = {
   editor: Editor;
 };
 
-export const ColumnDragHandle: React.FC<ColumnDragHandleProps> = (props) => {
+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 +113,17 @@ export const ColumnDragHandle: React.FC<ColumnDragHandleProps> = (props) => {
       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;
 
@@ -133,6 +163,9 @@ export const ColumnDragHandle: React.FC<ColumnDragHandleProps> = (props) => {
         }
         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 +202,9 @@ export const ColumnDragHandle: React.FC<ColumnDragHandleProps> = (props) => {
       };
 
       try {
+        // Store references for cleanup
+        activeListenersRef.current.mouseup = handleFinish;
+        activeListenersRef.current.mousemove = handleMove;
         window.addEventListener("mouseup", handleFinish);
         window.addEventListener("mousemove", handleMove);
       } catch (error) {
@@ -187,15 +223,12 @@ export const ColumnDragHandle: React.FC<ColumnDragHandleProps> = (props) => {
           {...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("px-1 bg-layer-1 border border-strong-1 rounded-sm outline-none transition-all duration-200", {
+            "!opacity-100 bg-accent-primary border-accent-strong": 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 +241,7 @@ export const ColumnDragHandle: React.FC<ColumnDragHandleProps> = (props) => {
             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={{
@@ -222,4 +255,4 @@ export const ColumnDragHandle: React.FC<ColumnDragHandleProps> = (props) => {
       )}
     </>
   );
-};
+}
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 937347076d..581949fcf4 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
@@ -62,14 +62,14 @@ type Props = {
   onClose: () => void;
 };
 
-export const ColumnOptionsDropdown: React.FC<Props> = (props) => {
+export function ColumnOptionsDropdown(props: Props) {
   const { editor, onClose } = props;
 
   return (
     <>
       <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 items-center justify-between gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1"
         onClick={(e) => {
           e.preventDefault();
           e.stopPropagation();
@@ -80,13 +80,13 @@ export const ColumnOptionsDropdown: React.FC<Props> = (props) => {
         <div className="flex-grow truncate">Header column</div>
         <ToggleRight className="shrink-0 size-3" />
       </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 items-center gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1"
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -100,4 +100,4 @@ export const ColumnOptionsDropdown: React.FC<Props> = (props) => {
       ))}
     </>
   );
-};
+}
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 e0039ecd25..b425a1c782 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
@@ -18,6 +18,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 +60,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 +88,7 @@ export const TableColumnDragHandlePlugin = (editor: Editor): Plugin<TableColumnD
             editor,
           });
 
+          renderers.push(dragHandleComponent);
           decorations.push(Decoration.widget(pos, () => dragHandleComponent.element));
         }
 
@@ -82,12 +96,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/row/drag-handle.tsx b/packages/editor/src/core/extensions/table/plugins/drag-handles/row/drag-handle.tsx
index 3aede22052..3425d0cdea 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
@@ -12,7 +12,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
@@ -45,10 +45,29 @@ export type RowDragHandleProps = {
   row: number;
 };
 
-export const RowDragHandle: React.FC<RowDragHandleProps> = (props) => {
+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 +113,17 @@ export const RowDragHandle: React.FC<RowDragHandleProps> = (props) => {
       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;
 
@@ -133,6 +163,9 @@ export const RowDragHandle: React.FC<RowDragHandleProps> = (props) => {
         }
         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 +201,9 @@ export const RowDragHandle: React.FC<RowDragHandleProps> = (props) => {
       };
 
       try {
+        // Store references for cleanup
+        activeListenersRef.current.mouseup = handleFinish;
+        activeListenersRef.current.mousemove = handleMove;
         window.addEventListener("mouseup", handleFinish);
         window.addEventListener("mousemove", handleMove);
       } catch (error) {
@@ -186,15 +222,12 @@ export const RowDragHandle: React.FC<RowDragHandleProps> = (props) => {
           {...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("py-1 bg-layer-1 border border-strong-1 rounded-sm outline-none transition-all duration-200", {
+            "!opacity-100 bg-accent-primary border-accent-strong": isDropdownOpen,
+            "hover:bg-layer-1-hover": !isDropdownOpen,
+          })}
         >
-          <Ellipsis className="size-4 text-custom-text-100 rotate-90" />
+          <Ellipsis className="size-4 text-primary rotate-90" />
         </button>
       </div>
       {isDropdownOpen && (
@@ -207,7 +240,7 @@ export const RowDragHandle: React.FC<RowDragHandleProps> = (props) => {
             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={{
@@ -221,4 +254,4 @@ export const RowDragHandle: React.FC<RowDragHandleProps> = (props) => {
       )}
     </>
   );
-};
+}
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 377e9f417f..a47317cc13 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
@@ -62,14 +62,14 @@ type Props = {
   onClose: () => void;
 };
 
-export const RowOptionsDropdown: React.FC<Props> = (props) => {
+export function RowOptionsDropdown(props: Props) {
   const { editor, onClose } = props;
 
   return (
     <>
       <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 items-center justify-between gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1"
         onClick={(e) => {
           e.preventDefault();
           e.stopPropagation();
@@ -80,13 +80,13 @@ export const RowOptionsDropdown: React.FC<Props> = (props) => {
         <div className="flex-grow truncate">Header row</div>
         <ToggleRight className="shrink-0 size-3" />
       </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 items-center gap-2 w-full rounded-sm px-1 py-1.5 text-11 text-left truncate text-secondary hover:bg-layer-1"
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
@@ -100,4 +100,4 @@ export const RowOptionsDropdown: React.FC<Props> = (props) => {
       ))}
     </>
   );
-};
+}
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 18ac677c46..71b7e1c1b1 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
@@ -18,6 +18,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 +60,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 +88,7 @@ export const TableRowDragHandlePlugin = (editor: Editor): Plugin<TableRowDragHan
             editor,
           });
 
+          renderers.push(dragHandleComponent);
           decorations.push(Decoration.widget(pos, () => dragHandleComponent.element));
         }
 
@@ -82,12 +96,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/utils.ts b/packages/editor/src/core/extensions/table/plugins/drag-handles/utils.ts
index 591d435760..810b801ef5 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
@@ -13,7 +13,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);
diff --git a/packages/editor/src/core/extensions/table/table/icons.ts b/packages/editor/src/core/extensions/table/table/icons.ts
index 51c7784113..96c0dbcbe1 100644
--- a/packages/editor/src/core/extensions/table/table/icons.ts
+++ b/packages/editor/src/core/extensions/table/table/icons.ts
@@ -1,5 +1,5 @@
 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 +9,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 +20,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 +31,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 +44,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/title-extension.ts b/packages/editor/src/core/extensions/title-extension.ts
new file mode 100644
index 0000000000..cf4f52f975
--- /dev/null
+++ b/packages/editor/src/core/extensions/title-extension.ts
@@ -0,0 +1,14 @@
+import type { AnyExtension, Extensions } from "@tiptap/core";
+import Document from "@tiptap/extension-document";
+import Heading from "@tiptap/extension-heading";
+import Text from "@tiptap/extension-text";
+
+export const TitleExtensions: Extensions = [
+  Document.extend({
+    content: "heading",
+  }),
+  Heading.configure({
+    levels: [1],
+  }) as AnyExtension,
+  Text,
+];
diff --git a/packages/editor/src/core/extensions/trailing-node.ts b/packages/editor/src/core/extensions/trailing-node.ts
index 7fe084beee..5f9624e969 100644
--- a/packages/editor/src/core/extensions/trailing-node.ts
+++ b/packages/editor/src/core/extensions/trailing-node.ts
@@ -44,7 +44,6 @@ export const TrailingNode = Extension.create<TrailingNodeOptions>({
             return;
           }
 
-          // eslint-disable-next-line consistent-return
           return tr.insert(endPosition, type.create());
         },
         state: {
diff --git a/packages/editor/src/core/extensions/unique-id/plugin.ts b/packages/editor/src/core/extensions/unique-id/plugin.ts
index 5b0773adb3..c7f09860b5 100644
--- a/packages/editor/src/core/extensions/unique-id/plugin.ts
+++ b/packages/editor/src/core/extensions/unique-id/plugin.ts
@@ -94,7 +94,8 @@ export const createUniqueIDPlugin = (options: UniqueIDOptions) => {
       tr.setStoredMarks(newState.tr.storedMarks);
 
       // Don't add ID generation to undo history
-      tr.setMeta("addToHistory", false);
+      // since its causing issue with undo feature we are commmeting it out for now
+      // tr.setMeta("addToHistory", false);
 
       return tr;
     },
diff --git a/packages/editor/src/core/extensions/unique-id/utils.ts b/packages/editor/src/core/extensions/unique-id/utils.ts
index 617ff5dc62..22606c9c6e 100644
--- a/packages/editor/src/core/extensions/unique-id/utils.ts
+++ b/packages/editor/src/core/extensions/unique-id/utils.ts
@@ -30,6 +30,7 @@ export const createIdsForView = (view: EditorView, options: UniqueIDOptions) =>
   });
 
   tr.setMeta("addToHistory", false);
+  tr.setMeta("uniqueIdOnlyChange", true);
 
   view.dispatch(tr);
 };
diff --git a/packages/editor/src/core/extensions/utility.ts b/packages/editor/src/core/extensions/utility.ts
index 347f1800a1..558136347e 100644
--- a/packages/editor/src/core/extensions/utility.ts
+++ b/packages/editor/src/core/extensions/utility.ts
@@ -1,14 +1,13 @@
 import { Extension } from "@tiptap/core";
 import codemark from "prosemirror-codemark";
 // helpers
-import type { CORE_EXTENSIONS } from "@/constants/extension";
+import { CORE_EXTENSIONS } from "@/constants/extension";
 import { restorePublicImages } from "@/helpers/image-helpers";
 // plugins
 import type { TAdditionalActiveDropbarExtensions } from "@/plane-editor/types/utils";
 import { DropHandlerPlugin } from "@/plugins/drop";
 import { FilePlugins } from "@/plugins/file/root";
 import { MarkdownClipboardPlugin } from "@/plugins/markdown-clipboard";
-// types
 import type { IEditorProps, TEditorAsset, TFileHandler } from "@/types";
 
 type TActiveDropbarExtensions =
@@ -50,18 +49,18 @@ export type UtilityExtensionStorage = {
   isTouchDevice: boolean;
 };
 
-type Props = Pick<IEditorProps, "disabledExtensions"> & {
+type Props = Pick<IEditorProps, "disabledExtensions" | "flaggedExtensions" | "getEditorMetaData"> & {
   fileHandler: TFileHandler;
   isEditable: boolean;
   isTouchDevice: boolean;
 };
 
 export const UtilityExtension = (props: Props) => {
-  const { disabledExtensions, fileHandler, isEditable, isTouchDevice } = props;
+  const { disabledExtensions, flaggedExtensions, fileHandler, getEditorMetaData, isEditable, isTouchDevice } = props;
   const { restore } = fileHandler;
 
   return Extension.create<Record<string, unknown>, UtilityExtensionStorage>({
-    name: "utility",
+    name: CORE_EXTENSIONS.UTILITY,
     priority: 1000,
 
     addProseMirrorPlugins() {
@@ -72,9 +71,13 @@ export const UtilityExtension = (props: Props) => {
           fileHandler,
         }),
         ...codemark({ markType: this.editor.schema.marks.code }),
-        MarkdownClipboardPlugin(this.editor),
+        MarkdownClipboardPlugin({
+          editor: this.editor,
+          getEditorMetaData,
+        }),
         DropHandlerPlugin({
           disabledExtensions,
+          flaggedExtensions,
           editor: this.editor,
         }),
       ];
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 5b2f51d3c6..819214cef9 100644
--- a/packages/editor/src/core/extensions/work-item-embed/extension.tsx
+++ b/packages/editor/src/core/extensions/work-item-embed/extension.tsx
@@ -15,8 +15,8 @@ type Props = {
   }) => React.ReactNode;
 };
 
-export const WorkItemEmbedExtension = (props: Props) =>
-  WorkItemEmbedExtensionConfig.extend({
+export function WorkItemEmbedExtension(props: Props) {
+  return WorkItemEmbedExtensionConfig.extend({
     addNodeView() {
       return ReactNodeViewRenderer((issueProps: NodeViewProps) => (
         <NodeViewWrapper>
@@ -29,3 +29,4 @@ export const WorkItemEmbedExtension = (props: Props) =>
       ));
     },
   });
+}
diff --git a/packages/editor/src/core/helpers/common.ts b/packages/editor/src/core/helpers/common.ts
index e4a61b3ac8..d81d066b24 100644
--- a/packages/editor/src/core/helpers/common.ts
+++ b/packages/editor/src/core/helpers/common.ts
@@ -15,8 +15,8 @@ export const getEditorClassNames = ({ noBorder, borderOnFocus, containerClassNam
   cn(
     "w-full max-w-full sm:rounded-lg focus:outline-none focus:border-0",
     {
-      "border border-custom-border-200": !noBorder,
-      "focus:border border-custom-border-300": borderOnFocus,
+      "border border-subtle-1": !noBorder,
+      "focus:border border-strong": borderOnFocus,
     },
     containerClassName
   );
diff --git a/packages/editor/src/core/helpers/editor-ref.ts b/packages/editor/src/core/helpers/editor-ref.ts
index 958624ee1a..c7be617bcc 100644
--- a/packages/editor/src/core/helpers/editor-ref.ts
+++ b/packages/editor/src/core/helpers/editor-ref.ts
@@ -2,25 +2,27 @@ import type { HocuspocusProvider } from "@hocuspocus/provider";
 import type { Editor } from "@tiptap/core";
 import { DOMSerializer } from "@tiptap/pm/model";
 import * as Y from "yjs";
+// plane imports
+import { convertHTMLToMarkdown } from "@plane/utils";
 // components
 import { getEditorMenuItems } from "@/components/menus";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
 import { CORE_EDITOR_META } from "@/constants/meta";
 // types
-import type { EditorRefApi, TEditorCommands } from "@/types";
+import type { EditorRefApi, IEditorProps, TEditorCommands } from "@/types";
 // local imports
 import { getParagraphCount } from "./common";
 import { insertContentAtSavedSelection } from "./insert-content-at-cursor-position";
 import { scrollSummary, scrollToNodeViaDOMCoordinates } from "./scroll-to-node";
 
-type TArgs = {
+type TArgs = Pick<IEditorProps, "getEditorMetaData"> & {
   editor: Editor | null;
   provider: HocuspocusProvider | undefined;
 };
 
 export const getEditorRefHelpers = (args: TArgs): EditorRefApi => {
-  const { editor, provider } = args;
+  const { editor, getEditorMetaData, provider } = args;
 
   return {
     blur: () => editor?.commands.blur(),
@@ -77,8 +79,36 @@ export const getEditorRefHelpers = (args: TArgs): EditorRefApi => {
     }),
     getHeadings: () => (editor ? editor.storage.headingsList?.headings : []),
     getMarkDown: () => {
-      const markdownOutput = editor?.storage?.markdown?.getMarkdown?.() ?? "";
-      return markdownOutput;
+      if (!editor) return "";
+      const editorHTML = editor.getHTML();
+      const metaData = getEditorMetaData(editorHTML);
+      // convert to markdown
+      const markdown = convertHTMLToMarkdown({
+        description_html: editorHTML,
+        metaData,
+      });
+      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;
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 0000000000..c60e23aaa5
--- /dev/null
+++ b/packages/editor/src/core/helpers/paste-asset.ts
@@ -0,0 +1,28 @@
+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 06c781719f..0cc089c527 100644
--- a/packages/editor/src/core/helpers/scroll-to-node.ts
+++ b/packages/editor/src/core/helpers/scroll-to-node.ts
@@ -27,7 +27,6 @@ function scrollToNode(editor: Editor, pos: number): void {
   }
 }
 
-// eslint-disable-next-line no-undef
 export function scrollToNodeViaDOMCoordinates(editor: Editor, pos: number, behavior?: ScrollBehavior): void {
   const view = editor.view;
 
diff --git a/packages/editor/src/core/helpers/yjs-utils.ts b/packages/editor/src/core/helpers/yjs-utils.ts
index ab2ca92d83..bb7d1fef68 100644
--- a/packages/editor/src/core/helpers/yjs-utils.ts
+++ b/packages/editor/src/core/helpers/yjs-utils.ts
@@ -1,4 +1,5 @@
 import { Buffer } from "buffer";
+import type { Extensions, JSONContent } from "@tiptap/core";
 import { getSchema } from "@tiptap/core";
 import { generateHTML, generateJSON } from "@tiptap/html";
 import { prosemirrorJSONToYDoc, yXmlFragmentToProseMirrorRootNode } from "y-prosemirror";
@@ -9,10 +10,13 @@ import {
   CoreEditorExtensionsWithoutProps,
   DocumentEditorExtensionsWithoutProps,
 } from "@/extensions/core-without-props";
+import { TitleExtensions } from "@/extensions/title-extension";
+import { sanitizeHTML } from "@plane/utils";
 
 // editor extension configs
 const RICH_TEXT_EDITOR_EXTENSIONS = CoreEditorExtensionsWithoutProps;
 const DOCUMENT_EDITOR_EXTENSIONS = [...CoreEditorExtensionsWithoutProps, ...DocumentEditorExtensionsWithoutProps];
+export const TITLE_EDITOR_EXTENSIONS: Extensions = TitleExtensions;
 // editor schemas
 const richTextEditorSchema = getSchema(RICH_TEXT_EDITOR_EXTENSIONS);
 const documentEditorSchema = getSchema(DOCUMENT_EDITOR_EXTENSIONS);
@@ -45,9 +49,10 @@ export const convertBinaryDataToBase64String = (document: Uint8Array): string =>
 /**
  * @description this function decodes base64 string to binary data
  * @param {string} document
- * @returns {ArrayBuffer}
+ * @returns {Buffer<ArrayBuffer>}
  */
-export const convertBase64StringToBinaryData = (document: string): ArrayBuffer => Buffer.from(document, "base64");
+export const convertBase64StringToBinaryData = (document: string): Buffer<ArrayBuffer> =>
+  Buffer.from(document, "base64");
 
 /**
  * @description this function generates the binary equivalent of html content for the rich text editor
@@ -64,16 +69,49 @@ export const getBinaryDataFromRichTextEditorHTMLString = (descriptionHTML: strin
   return encodedData;
 };
 
+export const generateTitleProsemirrorJson = (text: string): JSONContent => {
+  return {
+    type: "doc",
+    content: [
+      {
+        type: "heading",
+        attrs: { level: 1 },
+        ...(text
+          ? {
+              content: [
+                {
+                  type: "text",
+                  text,
+                },
+              ],
+            }
+          : {}),
+      },
+    ],
+  };
+};
+
 /**
  * @description this function generates the binary equivalent of html content for the document editor
- * @param {string} descriptionHTML
+ * @param {string} descriptionHTML - The HTML content to convert
+ * @param {string} [title] - Optional title to append to the document
  * @returns {Uint8Array}
  */
-export const getBinaryDataFromDocumentEditorHTMLString = (descriptionHTML: string): Uint8Array => {
+export const getBinaryDataFromDocumentEditorHTMLString = (descriptionHTML: string, title?: string): Uint8Array => {
   // convert HTML to JSON
   const contentJSON = generateJSON(descriptionHTML ?? "<p></p>", DOCUMENT_EDITOR_EXTENSIONS);
   // convert JSON to Y.Doc format
   const transformedData = prosemirrorJSONToYDoc(documentEditorSchema, contentJSON, "default");
+
+  // If title is provided, merge it into the document
+  if (title != null) {
+    const titleJSON = generateTitleProsemirrorJson(title);
+    const titleField = prosemirrorJSONToYDoc(documentEditorSchema, titleJSON, "title");
+    // Encode the title YDoc to updates and apply them to the main document
+    const titleUpdates = Y.encodeStateAsUpdate(titleField);
+    Y.applyUpdate(transformedData, titleUpdates);
+  }
+
   // convert Y.Doc to Uint8Array format
   const encodedData = Y.encodeStateAsUpdate(transformedData);
   return encodedData;
@@ -114,11 +152,13 @@ export const getAllDocumentFormatsFromRichTextEditorBinaryData = (
  * @returns
  */
 export const getAllDocumentFormatsFromDocumentEditorBinaryData = (
-  description: Uint8Array
+  description: Uint8Array,
+  updateTitle: boolean
 ): {
   contentBinaryEncoded: string;
   contentJSON: object;
   contentHTML: string;
+  titleHTML?: string;
 } => {
   // encode binary description data
   const base64Data = convertBinaryDataToBase64String(description);
@@ -130,11 +170,24 @@ export const getAllDocumentFormatsFromDocumentEditorBinaryData = (
   // convert to HTML
   const contentHTML = generateHTML(contentJSON, DOCUMENT_EDITOR_EXTENSIONS);
 
-  return {
-    contentBinaryEncoded: base64Data,
-    contentJSON,
-    contentHTML,
-  };
+  if (updateTitle) {
+    const title = yDoc.getXmlFragment("title");
+    const titleJSON = yXmlFragmentToProseMirrorRootNode(title, documentEditorSchema).toJSON();
+    const titleHTML = extractTextFromHTML(generateHTML(titleJSON, DOCUMENT_EDITOR_EXTENSIONS));
+
+    return {
+      contentBinaryEncoded: base64Data,
+      contentJSON,
+      contentHTML,
+      titleHTML,
+    };
+  } else {
+    return {
+      contentBinaryEncoded: base64Data,
+      contentJSON,
+      contentHTML,
+    };
+  }
 };
 
 type TConvertHTMLDocumentToAllFormatsArgs = {
@@ -170,8 +223,10 @@ export const convertHTMLDocumentToAllFormats = (args: TConvertHTMLDocumentToAllF
     // Convert HTML to binary format for document editor
     const contentBinary = getBinaryDataFromDocumentEditorHTMLString(document_html);
     // Generate all document formats from the binary data
-    const { contentBinaryEncoded, contentHTML, contentJSON } =
-      getAllDocumentFormatsFromDocumentEditorBinaryData(contentBinary);
+    const { contentBinaryEncoded, contentHTML, contentJSON } = getAllDocumentFormatsFromDocumentEditorBinaryData(
+      contentBinary,
+      false
+    );
     allFormats = {
       description: contentJSON,
       description_html: contentHTML,
@@ -183,3 +238,11 @@ export const convertHTMLDocumentToAllFormats = (args: TConvertHTMLDocumentToAllF
 
   return allFormats;
 };
+
+export const extractTextFromHTML = (html: string): string => {
+  // Use DOMPurify 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
+  const sanitizedText = sanitizeHTML(html); // sanitize the string to remove all HTML tags
+  return sanitizedText.trim() || ""; // trim the string to remove leading and trailing whitespaces
+};
diff --git a/packages/editor/src/core/hooks/use-collaborative-editor.ts b/packages/editor/src/core/hooks/use-collaborative-editor.ts
index abbb3a82a5..23077f7244 100644
--- a/packages/editor/src/core/hooks/use-collaborative-editor.ts
+++ b/packages/editor/src/core/hooks/use-collaborative-editor.ts
@@ -1,7 +1,9 @@
-import { HocuspocusProvider } from "@hocuspocus/provider";
+import type { HocuspocusProvider } from "@hocuspocus/provider";
+import type { Extensions } from "@tiptap/core";
 import Collaboration from "@tiptap/extension-collaboration";
-import { useEffect, useMemo, useState } from "react";
-import { IndexeddbPersistence } from "y-indexeddb";
+// react
+import type React from "react";
+import { useEffect, useMemo } from "react";
 // extensions
 import { HeadingListExtension, SideMenuExtension } from "@/extensions";
 // hooks
@@ -9,10 +11,29 @@ import { useEditor } from "@/hooks/use-editor";
 // plane editor extensions
 import { DocumentEditorAdditionalExtensions } from "@/plane-editor/extensions";
 // types
-import type { TCollaborativeEditorHookProps } from "@/types";
+import type {
+  TCollaborativeEditorHookProps,
+  ICollaborativeDocumentEditorProps,
+  IEditorPropsExtended,
+  IEditorProps,
+  TEditorHookProps,
+  EditorTitleRefApi,
+} from "@/types";
+// local imports
+import { useEditorNavigation } from "./use-editor-navigation";
+import { useTitleEditor } from "./use-title-editor";
 
-export const useCollaborativeEditor = (props: TCollaborativeEditorHookProps) => {
+type UseCollaborativeEditorArgs = Omit<TCollaborativeEditorHookProps, "realtimeConfig" | "serverHandler" | "user"> & {
+  provider: HocuspocusProvider;
+  user: TCollaborativeEditorHookProps["user"];
+  actions: {
+    signalForcedClose: (value: boolean) => void;
+  };
+};
+
+export const useCollaborativeEditor = (props: UseCollaborativeEditorArgs) => {
   const {
+    provider,
     onAssetChange,
     onChange,
     onTransaction,
@@ -25,68 +46,27 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorHookProps) =>
     fileHandler,
     flaggedExtensions,
     forwardedRef,
+    getEditorMetaData,
     handleEditorReady,
     id,
+    mentionHandler,
     dragDropEnabled = true,
     isTouchDevice,
-    mentionHandler,
     onEditorFocus,
     placeholder,
-    realtimeConfig,
-    serverHandler,
+    showPlaceholderOnEmpty,
     tabIndex,
+    titleRef,
+    updatePageProperties,
     user,
+    actions,
   } = props;
-  // states
-  const [hasServerConnectionFailed, setHasServerConnectionFailed] = useState(false);
-  const [hasServerSynced, setHasServerSynced] = useState(false);
-  // initialize Hocuspocus provider
-  const provider = useMemo(
-    () =>
-      new HocuspocusProvider({
-        name: id,
-        // using user id as a token to verify the user on the server
-        token: JSON.stringify(user),
-        url: realtimeConfig.url,
-        onAuthenticationFailed: () => {
-          serverHandler?.onServerError?.();
-          setHasServerConnectionFailed(true);
-        },
-        onConnect: () => serverHandler?.onConnect?.(),
-        onClose: (data) => {
-          if (data.event.code === 1006) {
-            serverHandler?.onServerError?.();
-            setHasServerConnectionFailed(true);
-          }
-        },
-        onSynced: () => setHasServerSynced(true),
-      }),
-    [id, realtimeConfig, serverHandler, user]
-  );
 
-  const localProvider = useMemo(
-    () => (id ? new IndexeddbPersistence(id, provider.document) : undefined),
-    [id, provider]
-  );
+  const { mainNavigationExtension, titleNavigationExtension, setMainEditor, setTitleEditor } = useEditorNavigation();
 
-  // destroy and disconnect all providers connection on unmount
-  useEffect(
-    () => () => {
-      provider?.destroy();
-      localProvider?.destroy();
-    },
-    [provider, localProvider]
-  );
-
-  const editor = useEditor({
-    disabledExtensions,
-    extendedEditorProps,
-    id,
-    editable,
-    editorProps,
-    editorClassName,
-    enableHistory: false,
-    extensions: [
+  // Memoize extensions to avoid unnecessary editor recreations
+  const editorExtensions = useMemo(
+    () => [
       SideMenuExtension({
         aiEnabled: !disabledExtensions?.includes("ai"),
         dragDropEnabled,
@@ -94,6 +74,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorHookProps) =>
       HeadingListExtension,
       Collaboration.configure({
         document: provider.document,
+        field: "default",
       }),
       ...extensions,
       ...DocumentEditorAdditionalExtensions({
@@ -105,25 +86,122 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorHookProps) =>
         provider,
         userDetails: user,
       }),
+      mainNavigationExtension,
     ],
-    fileHandler,
-    flaggedExtensions,
-    forwardedRef,
-    handleEditorReady,
-    isTouchDevice,
-    mentionHandler,
-    onAssetChange,
-    onChange,
-    onEditorFocus,
-    onTransaction,
-    placeholder,
-    provider,
-    tabIndex,
-  });
+    [
+      provider,
+      disabledExtensions,
+      dragDropEnabled,
+      extensions,
+      extendedEditorProps,
+      fileHandler,
+      flaggedExtensions,
+      editable,
+      user,
+      mainNavigationExtension,
+    ]
+  );
+
+  // Editor configuration
+  const editorConfig = useMemo<TEditorHookProps>(
+    () => ({
+      disabledExtensions,
+      extendedEditorProps,
+      id,
+      editable,
+      editorProps,
+      editorClassName,
+      enableHistory: false,
+      extensions: editorExtensions,
+      fileHandler,
+      flaggedExtensions,
+      forwardedRef,
+      getEditorMetaData,
+      handleEditorReady,
+      isTouchDevice,
+      mentionHandler,
+      onAssetChange,
+      onChange,
+      onEditorFocus,
+      onTransaction,
+      placeholder,
+      showPlaceholderOnEmpty,
+      provider,
+      tabIndex,
+    }),
+    [
+      provider,
+      disabledExtensions,
+      extendedEditorProps,
+      id,
+      editable,
+      editorProps,
+      editorClassName,
+      editorExtensions,
+      fileHandler,
+      flaggedExtensions,
+      forwardedRef,
+      getEditorMetaData,
+      handleEditorReady,
+      isTouchDevice,
+      mentionHandler,
+      onAssetChange,
+      onChange,
+      onEditorFocus,
+      onTransaction,
+      placeholder,
+      showPlaceholderOnEmpty,
+      tabIndex,
+    ]
+  );
+
+  const editor = useEditor(editorConfig);
+
+  const titleExtensions = useMemo(
+    () => [
+      Collaboration.configure({
+        document: provider.document,
+        field: "title",
+      }),
+      titleNavigationExtension,
+    ],
+    [provider, titleNavigationExtension]
+  );
+
+  const titleEditorConfig = useMemo<{
+    id: string;
+    editable: boolean;
+    provider: HocuspocusProvider;
+    titleRef?: React.MutableRefObject<EditorTitleRefApi | null>;
+    updatePageProperties?: ICollaborativeDocumentEditorProps["updatePageProperties"];
+    extensions: Extensions;
+    extendedEditorProps?: IEditorPropsExtended;
+    getEditorMetaData?: IEditorProps["getEditorMetaData"];
+  }>(
+    () => ({
+      id,
+      editable,
+      provider,
+      titleRef,
+      updatePageProperties,
+      extensions: titleExtensions,
+      extendedEditorProps,
+      getEditorMetaData,
+    }),
+    [provider, id, editable, titleRef, updatePageProperties, titleExtensions, extendedEditorProps, getEditorMetaData]
+  );
+
+  const titleEditor = useTitleEditor(titleEditorConfig as Parameters<typeof useTitleEditor>[0]);
+
+  useEffect(() => {
+    if (editor && titleEditor) {
+      setMainEditor(editor);
+      setTitleEditor(titleEditor);
+    }
+  }, [editor, titleEditor, setMainEditor, setTitleEditor]);
 
   return {
     editor,
-    hasServerConnectionFailed,
-    hasServerSynced,
+    titleEditor,
   };
 };
diff --git a/packages/editor/src/core/hooks/use-editor-navigation.ts b/packages/editor/src/core/hooks/use-editor-navigation.ts
new file mode 100644
index 0000000000..d5bdb1d27f
--- /dev/null
+++ b/packages/editor/src/core/hooks/use-editor-navigation.ts
@@ -0,0 +1,169 @@
+import type { Editor } from "@tiptap/core";
+import { Extension } from "@tiptap/core";
+import { useCallback, useRef } from "react";
+
+/**
+ * Creates a title editor extension that enables keyboard navigation to the main editor
+ *
+ * @param getMainEditor Function to get the main editor instance
+ * @returns A Tiptap extension with keyboard shortcuts
+ */
+export const createTitleNavigationExtension = (getMainEditor: () => Editor | null) =>
+  Extension.create({
+    name: "titleEditorNavigation",
+    priority: 10,
+
+    addKeyboardShortcuts() {
+      return {
+        // Arrow down at end of title - Move to main editor
+        ArrowDown: () => {
+          const mainEditor = getMainEditor();
+          if (!mainEditor) return false;
+
+          // If cursor is at the end of the title
+          mainEditor.commands.focus("start");
+          return true;
+        },
+
+        // Right arrow at end of title - Move to main editor
+        ArrowRight: ({ editor: titleEditor }) => {
+          const mainEditor = getMainEditor();
+          if (!mainEditor) return false;
+
+          const { from, to } = titleEditor.state.selection;
+          const documentLength = titleEditor.state.doc.content.size;
+
+          // If cursor is at the end of the title
+          if (from === to && to === documentLength - 1) {
+            mainEditor.commands.focus("start");
+            return true;
+          }
+          return false;
+        },
+
+        // Enter - Create new line in main editor and focus
+        Enter: () => {
+          const mainEditor = getMainEditor();
+          if (!mainEditor) return false;
+
+          // Focus at the start of the main editor
+          mainEditor.chain().focus().insertContentAt(0, { type: "paragraph" }).run();
+          return true;
+        },
+      };
+    },
+  });
+
+/**
+ * Creates a main editor extension that enables keyboard navigation to the title editor
+ *
+ * @param getTitleEditor Function to get the title editor instance
+ * @returns A Tiptap extension with keyboard shortcuts
+ */
+export const createMainNavigationExtension = (getTitleEditor: () => Editor | null) =>
+  Extension.create({
+    name: "mainEditorNavigation",
+    priority: 10,
+
+    addKeyboardShortcuts() {
+      return {
+        // Arrow up at start of main editor - Move to title editor
+        ArrowUp: ({ editor: mainEditor }) => {
+          const titleEditor = getTitleEditor();
+          if (!titleEditor) return false;
+
+          const { from, to } = mainEditor.state.selection;
+
+          // If cursor is at the start of the main editor
+          if (from === 1 && to === 1) {
+            titleEditor.commands.focus("end");
+            return true;
+          }
+          return false;
+        },
+
+        // Left arrow at start of main editor - Move to title editor
+        ArrowLeft: ({ editor: mainEditor }) => {
+          const titleEditor = getTitleEditor();
+          if (!titleEditor) return false;
+
+          const { from, to } = mainEditor.state.selection;
+
+          // If cursor is at the absolute start of the main editor
+          if (from === 1 && to === 1) {
+            titleEditor.commands.focus("end");
+            return true;
+          }
+          return false;
+        },
+
+        // Backspace - Special handling for first paragraph
+        Backspace: ({ editor }) => {
+          const titleEditor = getTitleEditor();
+          if (!titleEditor) return false;
+
+          const { from, to, empty } = editor.state.selection;
+
+          // Only handle when cursor is at position 1 with empty selection
+          if (from === 1 && to === 1 && empty) {
+            const firstNode = editor.state.doc.firstChild;
+
+            // If first node is a paragraph
+            if (firstNode && firstNode.type.name === "paragraph") {
+              // If paragraph is already empty, delete it and focus title editor
+              if (firstNode.content.size === 0) {
+                editor.commands.deleteNode("paragraph");
+                // Use setTimeout to ensure the node is deleted before changing focus
+                setTimeout(() => titleEditor.commands.focus("end"), 0);
+                return true;
+              }
+              // If paragraph is not empty, just move focus to title editor
+              else {
+                titleEditor.commands.focus("end");
+                return true;
+              }
+            }
+          }
+          return false;
+        },
+      };
+    },
+  });
+
+/**
+ * Hook to manage navigation between title and main editors
+ *
+ * Creates extension factories for keyboard navigation between editors
+ * and maintains references to both editors
+ *
+ * @returns Object with editor setters and extensions
+ */
+export const useEditorNavigation = () => {
+  // Create refs to store editor instances
+  const titleEditorRef = useRef<Editor | null>(null);
+  const mainEditorRef = useRef<Editor | null>(null);
+
+  // Create stable getter functions
+  const getTitleEditor = useCallback(() => titleEditorRef.current, []);
+  const getMainEditor = useCallback(() => mainEditorRef.current, []);
+
+  // Create stable setter functions
+  const setTitleEditor = useCallback((editor: Editor | null) => {
+    titleEditorRef.current = editor;
+  }, []);
+
+  const setMainEditor = useCallback((editor: Editor | null) => {
+    mainEditorRef.current = editor;
+  }, []);
+
+  // Create extension factories that access editor refs
+  const titleNavigationExtension = createTitleNavigationExtension(getMainEditor);
+  const mainNavigationExtension = createMainNavigationExtension(getTitleEditor);
+
+  return {
+    setTitleEditor,
+    setMainEditor,
+    titleNavigationExtension,
+    mainNavigationExtension,
+  };
+};
diff --git a/packages/editor/src/core/hooks/use-editor.ts b/packages/editor/src/core/hooks/use-editor.ts
index db1966beb1..0ae81d9dc9 100644
--- a/packages/editor/src/core/hooks/use-editor.ts
+++ b/packages/editor/src/core/hooks/use-editor.ts
@@ -29,6 +29,7 @@ export const useEditor = (props: TEditorHookProps) => {
     fileHandler,
     flaggedExtensions,
     forwardedRef,
+    getEditorMetaData,
     handleEditorReady,
     id = "",
     initialValue,
@@ -39,6 +40,7 @@ export const useEditor = (props: TEditorHookProps) => {
     onEditorFocus,
     onTransaction,
     placeholder,
+    showPlaceholderOnEmpty,
     tabIndex,
     provider,
     value,
@@ -65,9 +67,11 @@ export const useEditor = (props: TEditorHookProps) => {
           extendedEditorProps,
           fileHandler,
           flaggedExtensions,
+          getEditorMetaData,
           isTouchDevice,
           mentionHandler,
           placeholder,
+          showPlaceholderOnEmpty,
           tabIndex,
           provider,
         }),
@@ -78,7 +82,11 @@ export const useEditor = (props: TEditorHookProps) => {
       onTransaction: () => {
         onTransaction?.();
       },
-      onUpdate: ({ editor }) => onChange?.(editor.getJSON(), editor.getHTML()),
+      onUpdate: ({ editor, transaction }) => {
+        // Check if this update is only due to migration update
+        const isMigrationUpdate = transaction?.getMeta("uniqueIdOnlyChange") === true;
+        onChange?.(editor.getJSON(), editor.getHTML(), { isMigrationUpdate });
+      },
       onDestroy: () => handleEditorReady?.(false),
       onFocus: onEditorFocus,
     },
@@ -130,7 +138,16 @@ export const useEditor = (props: TEditorHookProps) => {
     onAssetChange(assets);
   }, [assetsList?.assets, onAssetChange]);
 
-  useImperativeHandle(forwardedRef, () => getEditorRefHelpers({ editor, provider }), [editor, provider]);
+  useImperativeHandle(
+    forwardedRef,
+    () =>
+      getEditorRefHelpers({
+        editor,
+        getEditorMetaData,
+        provider,
+      }),
+    [editor, getEditorMetaData, provider]
+  );
 
   if (!editor) {
     return null;
diff --git a/packages/editor/src/core/hooks/use-title-editor.ts b/packages/editor/src/core/hooks/use-title-editor.ts
new file mode 100644
index 0000000000..0272bdb227
--- /dev/null
+++ b/packages/editor/src/core/hooks/use-title-editor.ts
@@ -0,0 +1,91 @@
+import type { HocuspocusProvider } from "@hocuspocus/provider";
+import type { Extensions } from "@tiptap/core";
+import { Placeholder } from "@tiptap/extension-placeholder";
+import { useEditor } from "@tiptap/react";
+import { useImperativeHandle } from "react";
+// constants
+import { CORE_EDITOR_META } from "@/constants/meta";
+// extensions
+import { TitleExtensions } from "@/extensions/title-extension";
+// helpers
+import { getEditorRefHelpers } from "@/helpers/editor-ref";
+// types
+import type { IEditorPropsExtended, IEditorProps } from "@/types";
+import type { EditorTitleRefApi, ICollaborativeDocumentEditorProps } from "@/types/editor";
+
+type TUseTitleEditorProps = {
+  editable?: boolean;
+  provider: HocuspocusProvider;
+  titleRef?: React.MutableRefObject<EditorTitleRefApi | null>;
+  extensions?: Extensions;
+  initialValue?: string;
+  field?: string;
+  placeholder?: string;
+  updatePageProperties?: ICollaborativeDocumentEditorProps["updatePageProperties"];
+  id: string;
+  extendedEditorProps?: IEditorPropsExtended;
+  getEditorMetaData?: IEditorProps["getEditorMetaData"];
+};
+
+/**
+ * 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: TUseTitleEditorProps) => {
+  const {
+    editable = true,
+    id,
+    initialValue = "",
+    extensions,
+    provider,
+    updatePageProperties,
+    titleRef,
+    getEditorMetaData,
+  } = props;
+
+  // Force editor recreation when Y.Doc changes (provider.document.guid)
+  const docKey = provider?.document?.guid ?? id;
+
+  const editor = useEditor(
+    {
+      onUpdate: ({ editor }) => {
+        updatePageProperties?.(id, "property_updated", { name: editor?.getText() });
+      },
+      editable,
+      immediatelyRender: false,
+      shouldRerenderOnTransaction: false,
+      extensions: [
+        ...TitleExtensions,
+        ...(extensions ?? []),
+        Placeholder.configure({
+          placeholder: () => "Untitled",
+          includeChildren: true,
+          showOnlyWhenEditable: false,
+        }),
+      ],
+      content: typeof initialValue === "string" && initialValue.trim() !== "" ? initialValue : "<h1></h1>",
+    },
+    [editable, initialValue, docKey]
+  );
+
+  useImperativeHandle(titleRef, () => ({
+    ...getEditorRefHelpers({
+      editor,
+      provider,
+      getEditorMetaData: getEditorMetaData ?? (() => ({ file_assets: [], user_mentions: [] })),
+    }),
+    clearEditor: (emitUpdate = false) => {
+      editor
+        ?.chain()
+        .setMeta(CORE_EDITOR_META.SKIP_FILE_DELETION, true)
+        .setMeta(CORE_EDITOR_META.INTENTIONAL_DELETION, true)
+        .clearContent(emitUpdate)
+        .run();
+    },
+    setEditorValue: (content: string) => {
+      editor?.commands.setContent(content, false);
+    },
+  }));
+
+  return editor;
+};
diff --git a/packages/editor/src/core/hooks/use-yjs-setup.ts b/packages/editor/src/core/hooks/use-yjs-setup.ts
new file mode 100644
index 0000000000..126c22a06a
--- /dev/null
+++ b/packages/editor/src/core/hooks/use-yjs-setup.ts
@@ -0,0 +1,369 @@
+import { HocuspocusProvider } from "@hocuspocus/provider";
+// react
+import { useCallback, useEffect, useRef, useState } from "react";
+// indexeddb
+import { IndexeddbPersistence } from "y-indexeddb";
+// yjs
+import type * as Y from "yjs";
+// types
+import type { CollaborationState, CollabStage, CollaborationError } from "@/types/collaboration";
+
+// Helper to check if a close code indicates a forced close
+const isForcedCloseCode = (code: number | undefined): boolean => {
+  if (!code) return false;
+  // All custom close codes (4000-4003) are treated as forced closes
+  return code >= 4000 && code <= 4003;
+};
+
+type UseYjsSetupArgs = {
+  docId: string;
+  serverUrl: string;
+  authToken: string;
+  onStateChange?: (state: CollaborationState) => void;
+  options?: {
+    maxConnectionAttempts?: number;
+  };
+};
+
+const DEFAULT_MAX_RETRIES = 3;
+
+export const useYjsSetup = ({ docId, serverUrl, authToken, onStateChange }: UseYjsSetupArgs) => {
+  // Current collaboration stage
+  const [stage, setStage] = useState<CollabStage>({ kind: "initial" });
+
+  // Cache readiness state
+  const [hasCachedContent, setHasCachedContent] = useState(false);
+  const [isCacheReady, setIsCacheReady] = useState(false);
+
+  // Provider and Y.Doc in state (nullable until effect runs)
+  const [yjsSession, setYjsSession] = useState<{ provider: HocuspocusProvider; ydoc: Y.Doc } | null>(null);
+
+  // Use refs for values that need to be mutated from callbacks
+  const retryCountRef = useRef(0);
+  const forcedCloseSignalRef = useRef(false);
+  const isDisposedRef = useRef(false);
+  const stageRef = useRef<CollabStage>({ kind: "initial" });
+  const lastReconnectTimeRef = useRef(0);
+
+  // Create/destroy provider in effect (not during render)
+  useEffect(() => {
+    // Reset refs when creating new provider (e.g., document switch)
+    retryCountRef.current = 0;
+    isDisposedRef.current = false;
+    forcedCloseSignalRef.current = false;
+    stageRef.current = { kind: "initial" };
+
+    const provider = new HocuspocusProvider({
+      name: docId,
+      token: authToken,
+      url: serverUrl,
+      onAuthenticationFailed: () => {
+        if (isDisposedRef.current) return;
+        const error: CollaborationError = { type: "auth-failed", message: "Authentication failed" };
+        const newStage = { kind: "disconnected" as const, error };
+        stageRef.current = newStage;
+        setStage(newStage);
+      },
+      onConnect: () => {
+        if (isDisposedRef.current) {
+          provider?.disconnect();
+          return;
+        }
+        retryCountRef.current = 0;
+        // After successful connection, transition to awaiting-sync (onSynced will move to synced)
+        const newStage = { kind: "awaiting-sync" as const };
+        stageRef.current = newStage;
+        setStage(newStage);
+      },
+      onStatus: ({ status: providerStatus }) => {
+        if (isDisposedRef.current) return;
+        if (providerStatus === "connecting") {
+          // Derive whether this is initial connect or reconnection from retry count
+          const isReconnecting = retryCountRef.current > 0;
+          setStage(isReconnecting ? { kind: "reconnecting", attempt: retryCountRef.current } : { kind: "connecting" });
+        } else if (providerStatus === "disconnected") {
+          // Do not transition here; let handleClose decide the final stage
+        } else if (providerStatus === "connected") {
+          // Connection succeeded, move to awaiting-sync
+          const newStage = { kind: "awaiting-sync" as const };
+          stageRef.current = newStage;
+          setStage(newStage);
+        }
+      },
+      onSynced: () => {
+        if (isDisposedRef.current) return;
+        retryCountRef.current = 0;
+        // Document sync complete
+        const newStage = { kind: "synced" as const };
+        stageRef.current = newStage;
+        setStage(newStage);
+      },
+    });
+
+    const pauseProvider = () => {
+      const wsProvider = provider.configuration.websocketProvider;
+      if (wsProvider) {
+        try {
+          wsProvider.shouldConnect = false;
+          wsProvider.disconnect();
+        } catch (error) {
+          console.error(`Error pausing websocketProvider:`, error);
+        }
+      }
+    };
+
+    const permanentlyStopProvider = () => {
+      isDisposedRef.current = true;
+
+      const wsProvider = provider.configuration.websocketProvider;
+      if (wsProvider) {
+        try {
+          wsProvider.shouldConnect = false;
+          wsProvider.disconnect();
+          wsProvider.destroy();
+        } catch (error) {
+          console.error(`Error tearing down websocketProvider:`, error);
+        }
+      }
+      try {
+        provider.destroy();
+      } catch (error) {
+        console.error(`Error destroying provider:`, error);
+      }
+    };
+
+    const handleClose = (closeEvent: { event?: { code?: number; reason?: string } }) => {
+      if (isDisposedRef.current) return;
+
+      const closeCode = closeEvent.event?.code;
+      const wsProvider = provider.configuration.websocketProvider;
+      const shouldConnect = wsProvider.shouldConnect;
+      const isForcedClose = isForcedCloseCode(closeCode) || forcedCloseSignalRef.current || shouldConnect === false;
+
+      if (isForcedClose) {
+        // Determine if this is a manual disconnect or a permanent error
+        const isManualDisconnect = shouldConnect === false;
+
+        const error: CollaborationError = {
+          type: "forced-close",
+          code: closeCode || 0,
+          message: isManualDisconnect ? "Manually disconnected" : "Server forced connection close",
+        };
+        const newStage = { kind: "disconnected" as const, error };
+        stageRef.current = newStage;
+        setStage(newStage);
+
+        retryCountRef.current = 0;
+        forcedCloseSignalRef.current = false;
+
+        // Only pause if it's a real forced close (not manual disconnect)
+        // Manual disconnect leaves it as is (shouldConnect=false already set if manual)
+        if (!isManualDisconnect) {
+          pauseProvider();
+        }
+      } else {
+        // Transient connection loss: attempt reconnection
+        retryCountRef.current++;
+
+        if (retryCountRef.current >= DEFAULT_MAX_RETRIES) {
+          // Exceeded max retry attempts
+          const error: CollaborationError = {
+            type: "max-retries",
+            message: `Failed to connect after ${DEFAULT_MAX_RETRIES} attempts`,
+          };
+          const newStage = { kind: "disconnected" as const, error };
+          stageRef.current = newStage;
+          setStage(newStage);
+
+          pauseProvider();
+        } else {
+          // Still have retries left, move to reconnecting
+          const newStage = { kind: "reconnecting" as const, attempt: retryCountRef.current };
+          stageRef.current = newStage;
+          setStage(newStage);
+        }
+      }
+    };
+
+    provider.on("close", handleClose);
+
+    setYjsSession({ provider, ydoc: provider.document });
+
+    // Handle page visibility changes (sleep/wake, tab switching)
+    const handleVisibilityChange = (event?: Event) => {
+      if (isDisposedRef.current) return;
+
+      const isVisible = document.visibilityState === "visible";
+      const isFocus = event?.type === "focus";
+
+      if (isVisible || isFocus) {
+        // Throttle reconnection attempts to avoid double-firing (visibility + focus)
+        const now = Date.now();
+        if (now - lastReconnectTimeRef.current < 1000) {
+          return;
+        }
+
+        const wsProvider = provider.configuration.websocketProvider;
+        if (!wsProvider) return;
+
+        const ws = wsProvider.webSocket;
+        const isStale = ws?.readyState === WebSocket.CLOSED || ws?.readyState === WebSocket.CLOSING;
+
+        // If disconnected or stale, re-enable reconnection and force reconnect
+        if (isStale || stageRef.current.kind === "disconnected") {
+          lastReconnectTimeRef.current = now;
+
+          // Re-enable connection on tab focus (even if manually disconnected before sleep)
+          wsProvider.shouldConnect = true;
+
+          // Reset retry count for fresh reconnection attempt
+          retryCountRef.current = 0;
+
+          // Move to connecting state
+          const newStage = { kind: "connecting" as const };
+          stageRef.current = newStage;
+          setStage(newStage);
+
+          wsProvider.disconnect();
+          wsProvider.connect();
+        }
+      }
+    };
+
+    // Handle online/offline events
+    const handleOnline = () => {
+      if (isDisposedRef.current) return;
+
+      const wsProvider = provider.configuration.websocketProvider;
+      if (wsProvider) {
+        wsProvider.shouldConnect = true;
+        wsProvider.disconnect();
+        wsProvider.connect();
+      }
+    };
+
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    window.addEventListener("focus", handleVisibilityChange);
+    window.addEventListener("online", handleOnline);
+
+    return () => {
+      try {
+        provider.off("close", handleClose);
+      } catch (error) {
+        console.error(`Error unregistering close handler:`, error);
+      }
+
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      window.removeEventListener("focus", handleVisibilityChange);
+      window.removeEventListener("online", handleOnline);
+
+      permanentlyStopProvider();
+    };
+  }, [docId, serverUrl, authToken]);
+
+  // IndexedDB persistence lifecycle
+  useEffect(() => {
+    if (!yjsSession) return;
+
+    const idbPersistence = new IndexeddbPersistence(docId, yjsSession.provider.document);
+
+    const onIdbSynced = () => {
+      const yFragment = idbPersistence.doc.getXmlFragment("default");
+      const docLength = yFragment?.length ?? 0;
+      setIsCacheReady(true);
+      setHasCachedContent(docLength > 0);
+    };
+
+    idbPersistence.on("synced", onIdbSynced);
+
+    return () => {
+      idbPersistence.off("synced", onIdbSynced);
+      try {
+        idbPersistence.destroy();
+      } catch (error) {
+        console.error(`Error destroying local provider:`, error);
+      }
+    };
+  }, [docId, yjsSession]);
+
+  // Observe Y.Doc content changes to update hasCachedContent (catches fallback scenario)
+  useEffect(() => {
+    if (!yjsSession || !isCacheReady) return;
+
+    const fragment = yjsSession.ydoc.getXmlFragment("default");
+    let lastHasContent = false;
+
+    const updateCachedContentFlag = () => {
+      const len = fragment?.length ?? 0;
+      const hasContent = len > 0;
+
+      // Only update state if the boolean value actually changed
+      if (hasContent !== lastHasContent) {
+        lastHasContent = hasContent;
+        setHasCachedContent(hasContent);
+      }
+    };
+    // Initial check (handles fallback content loaded before this effect runs)
+    updateCachedContentFlag();
+
+    // Use observeDeep to catch nested changes (keystrokes modify Y.XmlText inside Y.XmlElement)
+    fragment.observeDeep(updateCachedContentFlag);
+
+    return () => {
+      try {
+        fragment.unobserveDeep(updateCachedContentFlag);
+      } catch (error) {
+        console.error("Error unobserving fragment:", error);
+      }
+    };
+  }, [yjsSession, isCacheReady]);
+
+  // Notify state changes callback (use ref to avoid dependency on handler)
+  const stateChangeCallbackRef = useRef(onStateChange);
+  stateChangeCallbackRef.current = onStateChange;
+
+  useEffect(() => {
+    if (!stateChangeCallbackRef.current) return;
+
+    const isServerSynced = stage.kind === "synced";
+    const isServerDisconnected = stage.kind === "disconnected";
+
+    const state: CollaborationState = {
+      stage,
+      isServerSynced,
+      isServerDisconnected,
+    };
+
+    stateChangeCallbackRef.current(state);
+  }, [stage]);
+
+  // Derived values for convenience
+  const isServerSynced = stage.kind === "synced";
+  const isServerDisconnected = stage.kind === "disconnected";
+  const isDocReady = isServerSynced || isServerDisconnected || (isCacheReady && hasCachedContent);
+
+  const signalForcedClose = useCallback((value: boolean) => {
+    forcedCloseSignalRef.current = value;
+  }, []);
+
+  // Don't return anything until provider is ready - guarantees non-null provider
+  if (!yjsSession) {
+    return null;
+  }
+
+  return {
+    provider: yjsSession.provider,
+    ydoc: yjsSession.ydoc,
+    state: {
+      stage,
+      hasCachedContent,
+      isCacheReady,
+      isServerSynced,
+      isServerDisconnected,
+      isDocReady,
+    },
+    actions: {
+      signalForcedClose,
+    },
+  };
+};
diff --git a/packages/editor/src/core/plugins/ai-handle.ts b/packages/editor/src/core/plugins/ai-handle.ts
index 6185cc24f8..01e3f28f96 100644
--- a/packages/editor/src/core/plugins/ai-handle.ts
+++ b/packages/editor/src/core/plugins/ai-handle.ts
@@ -88,7 +88,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 a065e46cb3..6269d3c0f9 100644
--- a/packages/editor/src/core/plugins/drag-handle.ts
+++ b/packages/editor/src/core/plugins/drag-handle.ts
@@ -42,13 +42,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 f9f5715753..b0cd873cb8 100644
--- a/packages/editor/src/core/plugins/drop.ts
+++ b/packages/editor/src/core/plugins/drop.ts
@@ -7,11 +7,12 @@ import type { TEditorCommands, TExtensions } from "@/types";
 
 type Props = {
   disabledExtensions?: TExtensions[];
+  flaggedExtensions?: TExtensions[];
   editor: Editor;
 };
 
 export const DropHandlerPlugin = (props: Props): Plugin => {
-  const { disabledExtensions, editor } = props;
+  const { disabledExtensions, flaggedExtensions, editor } = props;
 
   return new Plugin({
     key: new PluginKey("drop-handler-plugin"),
@@ -33,6 +34,7 @@ export const DropHandlerPlugin = (props: Props): Plugin => {
             const pos = view.state.selection.from;
             insertFilesSafely({
               disabledExtensions,
+              flaggedExtensions,
               editor,
               files: acceptedFiles,
               initialPos: pos,
@@ -84,6 +86,7 @@ export const DropHandlerPlugin = (props: Props): Plugin => {
 
 type InsertFilesSafelyArgs = {
   disabledExtensions?: TExtensions[];
+  flaggedExtensions?: TExtensions[];
   editor: Editor;
   event: "insert" | "drop";
   files: File[];
diff --git a/packages/editor/src/core/plugins/file/delete.ts b/packages/editor/src/core/plugins/file/delete.ts
index 47790c4f9d..607ea20447 100644
--- a/packages/editor/src/core/plugins/file/delete.ts
+++ b/packages/editor/src/core/plugins/file/delete.ts
@@ -21,6 +21,7 @@ export const TrackFileDeletionPlugin = (editor: Editor, deleteHandler: TFileHand
         [nodeType: string]: Set<string> | undefined;
       } = {};
       if (!transactions.some((tr) => tr.docChanged)) return null;
+      if (transactions.some((tr) => tr.getMeta(CORE_EDITOR_META.SKIP_FILE_DELETION))) return null;
 
       newState.doc.descendants((node) => {
         const nodeType = node.type.name as keyof NodeFileMapType;
@@ -34,40 +35,35 @@ export const TrackFileDeletionPlugin = (editor: Editor, deleteHandler: TFileHand
         }
       });
 
-      transactions.forEach((transaction) => {
-        // if the transaction has meta of skipFileDeletion set to true, then return (like while clearing the editor content programmatically)
-        if (transaction.getMeta(CORE_EDITOR_META.SKIP_FILE_DELETION)) return;
+      const removedFiles: TFileNode[] = [];
 
-        const removedFiles: TFileNode[] = [];
+      // iterate through all the nodes in the old state
+      oldState.doc.descendants((node) => {
+        const nodeType = node.type.name as keyof NodeFileMapType;
+        const isAValidNode = NODE_FILE_MAP[nodeType];
+        // if the node doesn't match, then return as no point in checking
+        if (!isAValidNode) return;
+        // Check if the node has been deleted or replaced
+        if (!newFileSources[nodeType]?.has(node.attrs.src)) {
+          removedFiles.push(node as TFileNode);
+        }
+      });
 
-        // iterate through all the nodes in the old state
-        oldState.doc.descendants((node) => {
-          const nodeType = node.type.name as keyof NodeFileMapType;
-          const isAValidNode = NODE_FILE_MAP[nodeType];
-          // if the node doesn't match, then return as no point in checking
-          if (!isAValidNode) return;
-          // Check if the node has been deleted or replaced
-          if (!newFileSources[nodeType]?.has(node.attrs.src)) {
-            removedFiles.push(node as TFileNode);
-          }
-        });
-
-        removedFiles.forEach(async (node) => {
-          const nodeType = node.type.name as keyof NodeFileMapType;
-          const src = node.attrs.src;
-          const nodeFileSetDetails = NODE_FILE_MAP[nodeType];
-          if (!nodeFileSetDetails || !src) return;
-          try {
-            editor.storage[nodeType]?.[nodeFileSetDetails.fileSetName]?.set(src, true);
-            // update assets list storage value
-            editor.commands.updateAssetsList?.({
-              idToRemove: node.attrs.id,
-            });
-            await deleteHandler(src);
-          } catch (error) {
-            console.error("Error deleting file via delete utility plugin:", error);
-          }
-        });
+      removedFiles.forEach(async (node) => {
+        const nodeType = node.type.name as keyof NodeFileMapType;
+        const src = node.attrs.src;
+        const nodeFileSetDetails = NODE_FILE_MAP[nodeType];
+        if (!nodeFileSetDetails || !src) return;
+        try {
+          editor.storage[nodeType]?.[nodeFileSetDetails.fileSetName]?.set(src, true);
+          // update assets list storage value
+          editor.commands.updateAssetsList?.({
+            idToRemove: node.attrs.id,
+          });
+          await deleteHandler(src);
+        } catch (error) {
+          console.error("Error deleting file via delete utility plugin:", error);
+        }
       });
 
       return null;
diff --git a/packages/editor/src/core/plugins/highlight.ts b/packages/editor/src/core/plugins/highlight.ts
new file mode 100644
index 0000000000..3c65c90ea0
--- /dev/null
+++ b/packages/editor/src/core/plugins/highlight.ts
@@ -0,0 +1,92 @@
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+
+type NodeHighlightState = {
+  highlightedNodeId: string | null;
+  decorations: DecorationSet;
+};
+
+type NodeHighlightMeta = {
+  nodeId?: string | null;
+};
+
+export const nodeHighlightPluginKey = new PluginKey<NodeHighlightState>("nodeHighlight");
+
+const buildDecorations = (doc: Parameters<typeof DecorationSet.create>[0], highlightedNodeId: string | null) => {
+  if (!highlightedNodeId) {
+    return DecorationSet.empty;
+  }
+
+  const decorations: Decoration[] = [];
+  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
+    if (node.attrs && node.attrs.id === highlightedNodeId) {
+      const decorationAttrs: Record<string, string> = {
+        "data-node-highlighted": "true",
+        class: highlightClassNames.join(" "),
+      };
+
+      // For text nodes, highlight the inline content
+      if (node.isText) {
+        decorations.push(
+          Decoration.inline(pos, pos + node.nodeSize, decorationAttrs, {
+            inclusiveStart: true,
+            inclusiveEnd: true,
+          })
+        );
+      } else {
+        // For block nodes, add a node decoration
+        decorations.push(Decoration.node(pos, pos + node.nodeSize, decorationAttrs));
+      }
+
+      return false; // Stop searching once we found the node
+    }
+
+    return true;
+  });
+
+  return DecorationSet.create(doc, decorations);
+};
+
+export const NodeHighlightPlugin = () =>
+  new Plugin<NodeHighlightState>({
+    key: nodeHighlightPluginKey,
+    state: {
+      init: () => ({
+        highlightedNodeId: null,
+        decorations: DecorationSet.empty,
+      }),
+      apply: (tr, value, _oldState, newState) => {
+        let highlightedNodeId = value.highlightedNodeId;
+        let decorations = value.decorations;
+
+        const meta = tr.getMeta(nodeHighlightPluginKey) as NodeHighlightMeta | undefined;
+        let shouldRecalculate = tr.docChanged;
+
+        if (meta) {
+          if (meta.nodeId !== undefined) {
+            highlightedNodeId = typeof meta.nodeId === "string" && meta.nodeId.length > 0 ? meta.nodeId : null;
+            shouldRecalculate = true;
+          }
+        }
+
+        if (shouldRecalculate) {
+          decorations = buildDecorations(newState.doc, highlightedNodeId);
+        } else if (tr.docChanged) {
+          decorations = decorations.map(tr.mapping, newState.doc);
+        }
+
+        return {
+          highlightedNodeId,
+          decorations,
+        };
+      },
+    },
+    props: {
+      decorations(state) {
+        return nodeHighlightPluginKey.getState(state)?.decorations ?? DecorationSet.empty;
+      },
+    },
+  });
diff --git a/packages/editor/src/core/plugins/markdown-clipboard.ts b/packages/editor/src/core/plugins/markdown-clipboard.ts
index b87c7270a6..a97e065890 100644
--- a/packages/editor/src/core/plugins/markdown-clipboard.ts
+++ b/packages/editor/src/core/plugins/markdown-clipboard.ts
@@ -1,81 +1,45 @@
 import type { Editor } from "@tiptap/core";
-import type { Fragment } from "@tiptap/pm/model";
-import { Node } from "@tiptap/pm/model";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
-// constants
-import { CORE_EXTENSIONS } from "@/constants/extension";
+// plane imports
+import { convertHTMLToMarkdown } from "@plane/utils";
+import type { TCustomComponentsMetaData } from "@plane/utils";
 
-export const MarkdownClipboardPlugin = (editor: Editor): Plugin =>
-  new Plugin({
+type TArgs = {
+  editor: Editor;
+  getEditorMetaData: (htmlContent: string) => TCustomComponentsMetaData;
+};
+
+export const MarkdownClipboardPlugin = (args: TArgs): Plugin => {
+  const { editor, getEditorMetaData } = args;
+
+  return new Plugin({
     key: new PluginKey("markdownClipboard"),
     props: {
-      clipboardTextSerializer: (slice) => {
-        const markdownSerializer = editor.storage.markdown.serializer;
-        const isTableRow = slice.content.firstChild?.type?.name === CORE_EXTENSIONS.TABLE_ROW;
-        const nodeSelect = slice.openStart === 0 && slice.openEnd === 0;
-
-        if (nodeSelect) {
-          return markdownSerializer.serialize(slice.content);
-        }
-
-        const processTableContent = (tableNode: Node | Fragment) => {
-          let result = "";
-          tableNode.content?.forEach?.((tableRowNode: Node | Fragment) => {
-            tableRowNode.content?.forEach?.((cell: Node) => {
-              const cellContent = cell.content ? markdownSerializer.serialize(cell.content) : "";
-              result += cellContent + "\n";
+      handleDOMEvents: {
+        copy: (view, event) => {
+          try {
+            event.preventDefault();
+            event.clipboardData?.clearData();
+            // editor meta data
+            const editorHTML = editor.getHTML();
+            const metaData = getEditorMetaData(editorHTML);
+            // meta data from selection
+            const clipboardHTML = view.serializeForClipboard(view.state.selection.content()).dom.innerHTML;
+            // convert to markdown
+            const markdown = convertHTMLToMarkdown({
+              description_html: clipboardHTML,
+              metaData,
             });
-          });
-          return result;
-        };
-
-        if (isTableRow) {
-          const rowsCount = slice.content?.childCount || 0;
-          const cellsCount = slice.content?.firstChild?.content?.childCount || 0;
-          if (rowsCount === 1 || cellsCount === 1) {
-            return processTableContent(slice.content);
-          } else {
-            return markdownSerializer.serialize(slice.content);
+            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);
+            return false;
           }
-        }
-
-        const traverseToParentOfLeaf = (node: Node | null, parent: Fragment | Node, depth: number): Node | Fragment => {
-          let currentNode = node;
-          let currentParent = parent;
-          let currentDepth = depth;
-
-          while (currentNode && currentDepth > 1 && currentNode.content?.firstChild) {
-            if (currentNode.content?.childCount > 1) {
-              if (currentNode.content.firstChild?.type?.name === CORE_EXTENSIONS.LIST_ITEM) {
-                return currentParent;
-              } else {
-                return currentNode.content;
-              }
-            }
-
-            currentParent = currentNode;
-            currentNode = currentNode.content?.firstChild || null;
-            currentDepth--;
-          }
-
-          return currentParent;
-        };
-
-        if (slice.content.childCount > 1) {
-          return markdownSerializer.serialize(slice.content);
-        } else {
-          const targetNode = traverseToParentOfLeaf(slice.content.firstChild, slice.content, slice.openStart);
-
-          let currentNode = targetNode;
-          while (currentNode && currentNode.content && currentNode.childCount === 1 && currentNode.firstChild) {
-            currentNode = currentNode.firstChild;
-          }
-          if (currentNode instanceof Node && currentNode.isText) {
-            return currentNode.text;
-          }
-
-          return markdownSerializer.serialize(targetNode);
-        }
+        },
       },
     },
   });
+};
diff --git a/packages/editor/src/core/props.ts b/packages/editor/src/core/props.ts
index 30e9a436de..d20b5372d4 100644
--- a/packages/editor/src/core/props.ts
+++ b/packages/editor/src/core/props.ts
@@ -1,6 +1,9 @@
+import { DOMParser } from "@tiptap/pm/model";
 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;
@@ -27,8 +30,15 @@ export const CoreEditorProps = (props: TArgs): EditorProps => {
         }
       },
     },
-    transformPastedHTML(html) {
-      return html.replace(/<img.*?>/g, "");
+    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/collaboration.ts b/packages/editor/src/core/types/collaboration.ts
index 8921e8f052..b0ef4ca2b9 100644
--- a/packages/editor/src/core/types/collaboration.ts
+++ b/packages/editor/src/core/types/collaboration.ts
@@ -1,4 +1,37 @@
-export type TServerHandler = {
-  onConnect?: () => void;
-  onServerError?: () => void;
+export type CollaborationError =
+  | { type: "auth-failed"; message: string }
+  | { type: "network-error"; message: string }
+  | { type: "forced-close"; code: number; message: string }
+  | { type: "max-retries"; message: string };
+
+/**
+ * Single-stage state machine for collaboration lifecycle.
+ * Stages represent the sequential progression: initial → connecting → awaiting-sync → synced
+ *
+ * Invariants:
+ * - "awaiting-sync" only occurs when connection is successful and sync is pending
+ * - "synced" occurs only after connection success and onSynced callback
+ * - "reconnecting" with attempt > 0 when retrying after a connection drop
+ * - "disconnected" is terminal (connection failed or forced close)
+ */
+export type CollabStage =
+  | { kind: "initial" }
+  | { kind: "connecting" }
+  | { kind: "awaiting-sync" }
+  | { kind: "synced" }
+  | { kind: "reconnecting"; attempt: number }
+  | { kind: "disconnected"; error: CollaborationError };
+
+/**
+ * Public collaboration state exposed to consumers.
+ * Contains the current stage and derived booleans for convenience.
+ */
+export type CollaborationState = {
+  stage: CollabStage;
+  isServerSynced: boolean;
+  isServerDisconnected: boolean;
+};
+
+export type TServerHandler = {
+  onStateChange: (state: CollaborationState) => void;
 };
diff --git a/packages/editor/src/core/types/config.ts b/packages/editor/src/core/types/config.ts
index 8d6dfc20d2..0c5c434f0c 100644
--- a/packages/editor/src/core/types/config.ts
+++ b/packages/editor/src/core/types/config.ts
@@ -1,5 +1,5 @@
 // plane imports
-import { TWebhookConnectionQueryParams } from "@plane/types";
+import type { TWebhookConnectionQueryParams } from "@plane/types";
 import type { TExtendedFileHandler } from "@/plane-editor/types/config";
 
 export type TFileHandler = {
@@ -11,6 +11,7 @@ export type TFileHandler = {
   getAssetSrc: (path: string) => Promise<string>;
   restore: (assetSrc: string) => Promise<void>;
   upload: (blockId: string, file: File) => Promise<string>;
+  duplicate: (assetId: string) => Promise<string>;
   validation: {
     /**
      * @description max file size in bytes
diff --git a/packages/editor/src/core/types/editor.ts b/packages/editor/src/core/types/editor.ts
index 27d5388195..a4f1cbe5bc 100644
--- a/packages/editor/src/core/types/editor.ts
+++ b/packages/editor/src/core/types/editor.ts
@@ -3,6 +3,8 @@ import type { MarkType, NodeType } from "@tiptap/pm/model";
 import type { Selection } from "@tiptap/pm/state";
 import type { EditorProps, EditorView } from "@tiptap/pm/view";
 import type { NodeViewProps as TNodeViewProps } from "@tiptap/react";
+// plane imports
+import type { TCustomComponentsMetaData } from "@plane/utils";
 // extension types
 import type { TTextAlign } from "@/extensions";
 // plane editor imports
@@ -19,13 +21,14 @@ import type {
   TDocumentEventEmitter,
   TDocumentEventsServer,
   TEditorAsset,
-  TEmbedConfig,
   TExtensions,
   TFileHandler,
   TMentionHandler,
   TRealtimeConfig,
   TServerHandler,
   TUserDetails,
+  TExtendedEditorRefApi,
+  EventToPayloadMap,
 } from "@/types";
 
 export type TEditorCommands =
@@ -96,7 +99,7 @@ export type TDocumentInfo = {
   words: number;
 };
 
-export type EditorRefApi = {
+export type CoreEditorRefApi = {
   blur: () => void;
   clearEditor: (emitUpdate?: boolean) => void;
   createSelectionAtCursorPosition: () => void;
@@ -117,6 +120,7 @@ export type EditorRefApi = {
   getDocumentInfo: () => TDocumentInfo;
   getHeadings: () => IMarking[];
   getMarkDown: () => string;
+  copyMarkdownToClipboard: () => void;
   getSelectedText: () => string | null;
   insertText: (contentHTML: string, insertOnNextLine?: boolean) => void;
   isAnyDropbarOpen: () => boolean;
@@ -128,7 +132,7 @@ export type EditorRefApi = {
   onStateChange: (callback: () => void) => () => void;
   redo: () => void;
   scrollSummary: (marking: IMarking) => void;
-  // eslint-disable-next-line no-undef
+
   scrollToNodeViaDOMCoordinates: ({ pos, behavior }: { pos?: number; behavior?: ScrollBehavior }) => void;
   setEditorValue: (content: string, emitUpdate?: boolean) => void;
   setEditorValueAtCursorPosition: (content: string) => void;
@@ -137,6 +141,10 @@ export type EditorRefApi = {
   undo: () => void;
 };
 
+export type EditorRefApi = CoreEditorRefApi & TExtendedEditorRefApi;
+
+export type EditorTitleRefApi = EditorRefApi;
+
 // editor props
 export type IEditorProps = {
   autofocus?: boolean;
@@ -151,6 +159,7 @@ export type IEditorProps = {
   flaggedExtensions: TExtensions[];
   fileHandler: TFileHandler;
   forwardedRef?: React.MutableRefObject<EditorRefApi | null>;
+  getEditorMetaData: (htmlContent: string) => TCustomComponentsMetaData;
   handleEditorReady?: (value: boolean) => void;
   id: string;
   initialValue: string;
@@ -158,10 +167,11 @@ export type IEditorProps = {
   mentionHandler: TMentionHandler;
   onAssetChange?: (assets: TEditorAsset[]) => void;
   onEditorFocus?: () => void;
-  onChange?: (json: object, html: string) => void;
+  onChange?: (json: object, html: string, { isMigrationUpdate }?: { isMigrationUpdate?: boolean }) => void;
   onEnterKeyPress?: (e?: any) => void;
   onTransaction?: () => void;
   placeholder?: string | ((isFocused: boolean, value: string) => string);
+  showPlaceholderOnEmpty?: boolean;
   tabIndex?: number;
   value?: string | null;
   extendedEditorProps: IEditorPropsExtended;
@@ -183,6 +193,15 @@ export type ICollaborativeDocumentEditorProps = Omit<IEditorProps, "initialValue
   serverHandler?: TServerHandler;
   user: TUserDetails;
   extendedDocumentEditorProps?: ICollaborativeDocumentEditorPropsExtended;
+  updatePageProperties?: <T extends keyof EventToPayloadMap>(
+    pageIds: string | string[],
+    actionType: T,
+    data: EventToPayloadMap[T],
+    performAction?: boolean
+  ) => void;
+  pageRestorationInProgress?: boolean;
+  titleRef?: React.MutableRefObject<EditorTitleRefApi | null>;
+  isFetchingFallbackBinary?: boolean;
 };
 
 export type IDocumentEditorProps = Omit<IEditorProps, "initialValue" | "onEnterKeyPress" | "value"> & {
diff --git a/packages/editor/src/core/types/hook.ts b/packages/editor/src/core/types/hook.ts
index 0b0a9bc918..02c6538854 100644
--- a/packages/editor/src/core/types/hook.ts
+++ b/packages/editor/src/core/types/hook.ts
@@ -11,6 +11,7 @@ type TCoreHookProps = Pick<
   | "extendedEditorProps"
   | "extensions"
   | "flaggedExtensions"
+  | "getEditorMetaData"
   | "handleEditorReady"
   | "isTouchDevice"
   | "onEditorFocus"
@@ -28,6 +29,7 @@ export type TEditorHookProps = TCoreHookProps &
     | "onChange"
     | "onTransaction"
     | "placeholder"
+    | "showPlaceholderOnEmpty"
     | "tabIndex"
     | "value"
   > & {
@@ -49,9 +51,13 @@ export type TCollaborativeEditorHookProps = TCoreHookProps &
     | "onChange"
     | "onTransaction"
     | "placeholder"
+    | "showPlaceholderOnEmpty"
     | "tabIndex"
   > &
   Pick<
     ICollaborativeDocumentEditorProps,
     "dragDropEnabled" | "extendedDocumentEditorProps" | "realtimeConfig" | "serverHandler" | "user"
-  >;
+  > & {
+    titleRef?: ICollaborativeDocumentEditorProps["titleRef"];
+    updatePageProperties?: ICollaborativeDocumentEditorProps["updatePageProperties"];
+  };
diff --git a/packages/editor/src/styles/drag-drop.css b/packages/editor/src/styles/drag-drop.css
index 7b9577cc40..7ccb761635 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 ef5bca2630..a842193d15 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/index.css b/packages/editor/src/styles/index.css
index e38c01c283..3ec743191c 100644
--- a/packages/editor/src/styles/index.css
+++ b/packages/editor/src/styles/index.css
@@ -3,3 +3,4 @@
 @import "./table.css";
 @import "./github-dark.css";
 @import "./drag-drop.css";
+@import "./title-editor.css";
diff --git a/packages/editor/src/styles/table.css b/packages/editor/src/styles/table.css
index ef95348663..0e706f41fb 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,9 +152,8 @@
   .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;
@@ -169,15 +164,15 @@
     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 b5c61c9567..0000000000
--- 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/title-editor.css b/packages/editor/src/styles/title-editor.css
new file mode 100644
index 0000000000..b51d952e47
--- /dev/null
+++ b/packages/editor/src/styles/title-editor.css
@@ -0,0 +1,49 @@
+/* Title editor styles */
+.page-title-editor {
+  width: 100%;
+  outline: none;
+  resize: none;
+  border-radius: 0;
+}
+
+.page-title-editor .ProseMirror {
+  background-color: transparent;
+  font-weight: bold;
+  letter-spacing: -2%;
+  padding: 0;
+  margin-bottom: 0;
+}
+
+/* Handle font sizes */
+.page-title-editor.small-font .ProseMirror h1 {
+  font-size: 1.6rem;
+  line-height: 1.9rem;
+}
+
+.page-title-editor.large-font .ProseMirror h1 {
+  font-size: 2rem;
+  line-height: 2.375rem;
+}
+
+/* Focus state */
+.page-title-editor.active-editor .ProseMirror {
+  box-shadow: none;
+  outline: none;
+}
+
+/* Placeholder */
+.page-title-editor .ProseMirror h1.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--color-placeholder);
+  pointer-events: none;
+  height: 0;
+}
+
+.page-title-editor .ProseMirror h1.is-empty::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: var(--color-placeholder);
+  pointer-events: none;
+  height: 0;
+}
diff --git a/packages/editor/src/styles/variables.css b/packages/editor/src/styles/variables.css
index c7726ce2d3..c58361d708 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 4e0b7684ec..0000000000
--- 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/editor/tsconfig.json b/packages/editor/tsconfig.json
index b5634236f9..a78d77e730 100644
--- a/packages/editor/tsconfig.json
+++ b/packages/editor/tsconfig.json
@@ -1,22 +1,16 @@
 {
   "extends": "@plane/typescript-config/react-library.json",
   "compilerOptions": {
-    "jsx": "react-jsx",
-    "lib": ["ES2022", "DOM"],
-    "module": "ES2022",
-    "moduleResolution": "Bundler",
-    "noEmit": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "sourceMap": true,
-    "baseUrl": ".",
+    "exactOptionalPropertyTypes": false,
+    "noImplicitReturns": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
     "paths": {
+      "src/*": ["./src/*"],
       "@/*": ["./src/core/*"],
-      "@/styles/*": ["./src/styles/*"],
-      "@/plane-editor/*": ["./src/ce/*"]
-    },
-    "strictNullChecks": true,
-    "allowSyntheticDefaultImports": true
+      "@/plane-editor/*": ["./src/ce/*"],
+      "@/styles/*": ["./src/styles/*"]
+    }
   },
   "include": ["src/**/*", "index.d.ts"],
   "exclude": ["dist", "build", "node_modules"]
diff --git a/packages/editor/tsdown.config.ts b/packages/editor/tsdown.config.ts
index 8118f1b08f..ea7c2ef9b6 100644
--- a/packages/editor/tsdown.config.ts
+++ b/packages/editor/tsdown.config.ts
@@ -2,8 +2,8 @@ import { defineConfig } from "tsdown";
 
 export default defineConfig({
   entry: ["src/index.ts", "src/lib.ts"],
-  outDir: "dist",
-  format: ["esm", "cjs"],
+  format: ["esm"],
+  dts: true,
   copy: ["src/styles"],
   exports: {
     customExports: (exports) => ({
@@ -12,6 +12,5 @@ export default defineConfig({
       "./styles": "./dist/styles/index.css",
     }),
   },
-  dts: true,
-  clean: true,
+  platform: "neutral",
 });
diff --git a/packages/eslint-config/.prettierignore b/packages/eslint-config/.prettierignore
new file mode 100644
index 0000000000..d78f7215aa
--- /dev/null
+++ b/packages/eslint-config/.prettierignore
@@ -0,0 +1,10 @@
+.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/eslint-config/library.js b/packages/eslint-config/library.js
deleted file mode 100644
index af4d1090c2..0000000000
--- a/packages/eslint-config/library.js
+++ /dev/null
@@ -1,92 +0,0 @@
-const { resolve } = require("node:path");
-
-const project = resolve(process.cwd(), "tsconfig.json");
-
-/** @type {import("eslint").Linter.Config} */
-module.exports = {
-  extends: ["prettier", "plugin:@typescript-eslint/recommended"],
-  parser: "@typescript-eslint/parser",
-  plugins: ["react", "react-hooks", "@typescript-eslint", "import"],
-  globals: {
-    React: true,
-    JSX: true,
-  },
-  env: {
-    node: true,
-    browser: true,
-  },
-  settings: {
-    "import/resolver": {
-      typescript: {
-        project,
-      },
-    },
-  },
-  rules: {
-    "no-useless-escape": "off",
-    "prefer-const": "error",
-    "no-irregular-whitespace": "error",
-    "no-trailing-spaces": "error",
-    "import/no-duplicates": ["error", { considerQueryString: true }],
-    "no-useless-catch": "warn",
-    "no-case-declarations": "error",
-    "no-undef": "error",
-    "no-unreachable": "error",
-    "arrow-body-style": ["error", "as-needed"],
-    "@next/next/no-html-link-for-pages": "off",
-    "@next/next/no-img-element": "off",
-    "react/jsx-key": "error",
-    "react/self-closing-comp": ["error", { component: true, html: true }],
-    "react/jsx-boolean-value": "error",
-    "react/jsx-no-duplicate-props": "error",
-    "react-hooks/exhaustive-deps": "warn",
-    "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
-    "@typescript-eslint/no-import-type-side-effects": "error",
-    "@typescript-eslint/consistent-type-imports": [
-      "error",
-      {
-        prefer: "type-imports",
-        fixStyle: "separate-type-imports",
-        disallowTypeAnnotations: false,
-      },
-    ],
-    "@typescript-eslint/no-unused-expressions": "warn",
-    "@typescript-eslint/no-unused-vars": [
-      "warn",
-      {
-        argsIgnorePattern: "^_",
-        varsIgnorePattern: "^_",
-        caughtErrorsIgnorePattern: "^_",
-      },
-    ],
-    "@typescript-eslint/no-explicit-any": "warn",
-    "@typescript-eslint/no-useless-empty-export": "error",
-    "@typescript-eslint/prefer-ts-expect-error": "warn",
-
-    "import/order": [
-      "warn",
-      {
-        groups: ["builtin", "external", "internal", "parent", "sibling"],
-        pathGroups: [
-          {
-            pattern: "@plane/**",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@/**",
-            group: "internal",
-            position: "before",
-          },
-        ],
-        pathGroupsExcludedImportTypes: ["builtin", "internal", "react"],
-        alphabetize: {
-          order: "asc",
-          caseInsensitive: true,
-        },
-      },
-    ],
-  },
-
-  ignorePatterns: [".*.js", "node_modules/", "dist/"],
-};
diff --git a/packages/eslint-config/next.js b/packages/eslint-config/next.js
deleted file mode 100644
index 5d24776a62..0000000000
--- a/packages/eslint-config/next.js
+++ /dev/null
@@ -1,116 +0,0 @@
-const { resolve } = require("node:path");
-const project = resolve(process.cwd(), "tsconfig.json");
-
-module.exports = {
-  extends: ["next", "prettier", "plugin:@typescript-eslint/recommended"],
-  parser: "@typescript-eslint/parser",
-  plugins: ["react", "@typescript-eslint", "import"],
-  globals: {
-    React: "readonly",
-    JSX: "readonly",
-  },
-  env: {
-    node: true,
-    browser: true,
-  },
-  settings: {
-    "import/resolver": {
-      typescript: {
-        project,
-      },
-    },
-  },
-  ignorePatterns: [".*.js", "node_modules/"],
-  rules: {
-    "no-useless-escape": "off",
-    "prefer-const": "error",
-    "no-irregular-whitespace": "error",
-    "no-trailing-spaces": "error",
-    "import/no-duplicates": ["error", { considerQueryString: true }],
-    "no-useless-catch": "warn",
-    "no-case-declarations": "error",
-    "no-undef": "error",
-    "no-unreachable": "error",
-    "arrow-body-style": ["error", "as-needed"],
-    "@next/next/no-html-link-for-pages": "off",
-    "@next/next/no-img-element": "off",
-    "react/jsx-key": "error",
-    "react/self-closing-comp": ["error", { component: true, html: true }],
-    "react/jsx-boolean-value": "error",
-    "react/jsx-no-duplicate-props": "error",
-    "react-hooks/exhaustive-deps": "warn",
-    "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
-    "@typescript-eslint/no-import-type-side-effects": "error",
-    "@typescript-eslint/consistent-type-imports": [
-      "error",
-      {
-        prefer: "type-imports",
-        fixStyle: "separate-type-imports",
-        disallowTypeAnnotations: false,
-      },
-    ],
-    "@typescript-eslint/no-unused-expressions": "warn",
-    "@typescript-eslint/no-unused-vars": [
-      "warn",
-      {
-        argsIgnorePattern: "^_",
-        varsIgnorePattern: "^_",
-        caughtErrorsIgnorePattern: "^_",
-      },
-    ],
-    "@typescript-eslint/no-explicit-any": "warn",
-    "@typescript-eslint/no-useless-empty-export": "error",
-    "@typescript-eslint/prefer-ts-expect-error": "warn",
-
-    "@typescript-eslint/naming-convention": [
-      "warn",
-      {
-        selector: "variable",
-        format: ["camelCase", "snake_case", "UPPER_CASE", "PascalCase"],
-        leadingUnderscore: "allow",
-      },
-    ],
-    "import/order": [
-      "warn",
-      {
-        groups: ["builtin", "external", "internal", "parent", "sibling"],
-        pathGroups: [
-          {
-            pattern: "react",
-            group: "external",
-            position: "before",
-          },
-          {
-            pattern: "lucide-react",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@headlessui/**",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@plane/**",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@/**",
-            group: "internal",
-          },
-          {
-            pattern: "public/**",
-            group: "internal",
-            position: "after",
-          },
-        ],
-        pathGroupsExcludedImportTypes: ["builtin", "internal", "react"],
-        alphabetize: {
-          order: "asc",
-          caseInsensitive: true,
-        },
-      },
-    ],
-  },
-};
diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
deleted file mode 100644
index 5be897834c..0000000000
--- a/packages/eslint-config/package.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "@plane/eslint-config",
-  "private": true,
-  "version": "1.1.0",
-  "license": "AGPL-3.0",
-  "files": [
-    "library.js",
-    "next.js",
-    "server.js"
-  ],
-  "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^8.45.0",
-    "@typescript-eslint/parser": "^8.45.0",
-    "eslint": "8.57.1",
-    "eslint-config-next": "^14.1.0",
-    "eslint-config-prettier": "^10.1.8",
-    "eslint-config-turbo": "^2.5.8",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^6.1.1",
-    "typescript": "catalog:"
-  }
-}
diff --git a/packages/eslint-config/server.js b/packages/eslint-config/server.js
deleted file mode 100644
index 2e9713e87b..0000000000
--- a/packages/eslint-config/server.js
+++ /dev/null
@@ -1,69 +0,0 @@
-const { resolve } = require("node:path");
-const project = resolve(process.cwd(), "tsconfig.json");
-
-module.exports = {
-  extends: ["prettier", "plugin:@typescript-eslint/recommended"],
-  parser: "@typescript-eslint/parser",
-  env: {
-    node: true,
-    es6: true,
-  },
-  plugins: ["@typescript-eslint", "import"],
-  settings: {
-    "import/resolver": {
-      typescript: {
-        project,
-      },
-    },
-  },
-  ignorePatterns: [".*.js", "node_modules/"],
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-  },
-  rules: {
-    "@typescript-eslint/no-explicit-any": "warn",
-    "@typescript-eslint/no-unused-vars": [
-      "warn",
-      {
-        argsIgnorePattern: "^_",
-        varsIgnorePattern: "^_",
-        caughtErrorsIgnorePattern: "^_",
-      },
-    ],
-    "import/no-duplicates": ["error", { considerQueryString: true }],
-    "import/order": [
-      "warn",
-      {
-        groups: ["builtin", "external", "internal", "parent", "sibling"],
-        pathGroups: [
-          {
-            pattern: "@plane/**",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@/**",
-            group: "internal",
-            position: "before",
-          },
-        ],
-        pathGroupsExcludedImportTypes: ["builtin", "internal", "react"],
-        alphabetize: {
-          order: "asc",
-          caseInsensitive: true,
-        },
-      },
-    ],
-    "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
-    "@typescript-eslint/no-import-type-side-effects": "error",
-    "@typescript-eslint/consistent-type-imports": [
-      "error",
-      {
-        prefer: "type-imports",
-        fixStyle: "separate-type-imports",
-        disallowTypeAnnotations: false,
-      },
-    ],
-  },
-};
diff --git a/packages/hooks/.eslintignore b/packages/hooks/.eslintignore
deleted file mode 100644
index 6019047c3e..0000000000
--- a/packages/hooks/.eslintignore
+++ /dev/null
@@ -1,3 +0,0 @@
-build/*
-dist/*
-out/*
\ No newline at end of file
diff --git a/packages/hooks/.eslintrc.cjs b/packages/hooks/.eslintrc.cjs
deleted file mode 100644
index ba0e590e8e..0000000000
--- a/packages/hooks/.eslintrc.cjs
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["@plane/eslint-config/library.js"],
-};
diff --git a/packages/hooks/.prettierignore b/packages/hooks/.prettierignore
index d5be669c5e..b0b8bc622a 100644
--- a/packages/hooks/.prettierignore
+++ b/packages/hooks/.prettierignore
@@ -1,4 +1,10 @@
-.turbo
-out/
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
 dist/
-build/
\ No newline at end of file
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/hooks/.prettierrc b/packages/hooks/.prettierrc
deleted file mode 100644
index 87d988f1b2..0000000000
--- a/packages/hooks/.prettierrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "printWidth": 120,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index b4db5bcbf8..70426b8a75 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -1,39 +1,38 @@
 {
   "name": "@plane/hooks",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "AGPL-3.0",
   "description": "React hooks that are shared across multiple apps internally",
   "private": true,
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
   "scripts": {
     "build": "tsdown",
     "dev": "tsdown --watch",
-    "check:lint": "eslint . --max-warnings 6",
+    "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=60",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check \"**/*.{ts,tsx,md,json,css,scss}\"",
-    "fix:lint": "eslint . --fix",
-    "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\"",
+    "check:format": "prettier . --cache --check",
+    "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=60",
+    "fix:format": "prettier . --cache --write",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
     "react": "catalog:"
   },
   "devDependencies": {
-    "@plane/eslint-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
     "tsdown": "catalog:",
     "typescript": "catalog:"
   },
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "types": "./dist/index.d.cts"
+  "types": "./dist/index.d.ts"
 }
diff --git a/packages/hooks/tsconfig.json b/packages/hooks/tsconfig.json
index e8af9092ad..2256a0d8ff 100644
--- a/packages/hooks/tsconfig.json
+++ b/packages/hooks/tsconfig.json
@@ -1,9 +1,5 @@
 {
   "extends": "@plane/typescript-config/react-library.json",
-  "compilerOptions": {
-    "jsx": "react",
-    "lib": ["esnext", "dom"]
-  },
   "include": ["./src"],
   "exclude": ["dist", "build", "node_modules"]
 }
diff --git a/packages/hooks/tsdown.config.ts b/packages/hooks/tsdown.config.ts
index 7b2ea6fe2f..78c3dcba86 100644
--- a/packages/hooks/tsdown.config.ts
+++ b/packages/hooks/tsdown.config.ts
@@ -2,10 +2,7 @@ import { defineConfig } from "tsdown";
 
 export default defineConfig({
   entry: ["src/index.ts"],
-  outDir: "dist",
-  format: ["esm", "cjs"],
-  exports: true,
+  format: ["esm"],
   dts: true,
-  clean: true,
-  sourcemap: true,
+  platform: "neutral",
 });
diff --git a/packages/i18n/.eslintignore b/packages/i18n/.eslintignore
deleted file mode 100644
index 6019047c3e..0000000000
--- a/packages/i18n/.eslintignore
+++ /dev/null
@@ -1,3 +0,0 @@
-build/*
-dist/*
-out/*
\ No newline at end of file
diff --git a/packages/i18n/.eslintrc.js b/packages/i18n/.eslintrc.js
deleted file mode 100644
index ba0e590e8e..0000000000
--- a/packages/i18n/.eslintrc.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["@plane/eslint-config/library.js"],
-};
diff --git a/packages/i18n/.prettierignore b/packages/i18n/.prettierignore
index 90b14aaf9d..b0b8bc622a 100644
--- a/packages/i18n/.prettierignore
+++ b/packages/i18n/.prettierignore
@@ -1,7 +1,10 @@
-.turbo
-out/
-dist/
+.next/
+.react-router/
+.turbo/
+.vite/
 build/
-.next
-.vercel
-.turbo
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/i18n/.prettierrc b/packages/i18n/.prettierrc
deleted file mode 100644
index 87d988f1b2..0000000000
--- a/packages/i18n/.prettierrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "printWidth": 120,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}
diff --git a/packages/i18n/package.json b/packages/i18n/package.json
index b2698a507b..79838073f8 100644
--- a/packages/i18n/package.json
+++ b/packages/i18n/package.json
@@ -1,24 +1,25 @@
 {
   "name": "@plane/i18n",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "AGPL-3.0",
   "description": "I18n shared across multiple apps internally",
   "private": true,
+  "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
   "scripts": {
     "dev": "tsdown --watch",
     "build": "tsdown",
-    "check:lint": "eslint . --max-warnings 2",
+    "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=51",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check \"**/*.{ts,tsx,md,json,css,scss}\"",
-    "fix:lint": "eslint . --fix",
-    "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\"",
+    "check:format": "prettier . --cache --check",
+    "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=51",
+    "fix:format": "prettier . --cache --write",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
@@ -30,7 +31,6 @@
     "react": "catalog:"
   },
   "devDependencies": {
-    "@plane/eslint-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
     "@types/lodash-es": "catalog:",
     "@types/node": "catalog:",
@@ -39,6 +39,6 @@
     "typescript": "catalog:"
   },
   "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts"
 }
diff --git a/packages/i18n/src/context/index.tsx b/packages/i18n/src/context/index.tsx
index cf8a960fec..22ed0a5e0d 100644
--- a/packages/i18n/src/context/index.tsx
+++ b/packages/i18n/src/context/index.tsx
@@ -12,7 +12,7 @@ interface TranslationProviderProps {
 /**
  * Provides the translation store to the application
  */
-export const TranslationProvider: React.FC<TranslationProviderProps> = observer(({ children }) => {
+export const TranslationProvider = observer(function TranslationProvider({ children }: TranslationProviderProps) {
   const [store] = React.useState(() => new TranslationStore());
 
   return <TranslationContext.Provider value={store}>{children}</TranslationContext.Provider>;
diff --git a/packages/i18n/src/locales/cs/empty-state.ts b/packages/i18n/src/locales/cs/empty-state.ts
index 4e552ea0b1..ccd545d7d8 100644
--- a/packages/i18n/src/locales/cs/empty-state.ts
+++ b/packages/i18n/src/locales/cs/empty-state.ts
@@ -24,6 +24,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "Vypadá to, že nemáte přístup k tomuto projektu",
+      restricted_description: "Kontaktujte administrátora a požádejte o přístup, abyste zde mohli pokračovat.",
+      join_description: "Klikněte na tlačítko níže pro připojení k projektu.",
+      cta_primary: "Připojit se k projektu",
+      cta_loading: "Připojování k projektu",
+    },
+    invalid_project: {
+      title: "Projekt nebyl nalezen",
+      description: "Projekt, který hledáte, neexistuje.",
+    },
     work_items: {
       title: "Začněte s vaší první pracovní položkou.",
       description:
@@ -177,5 +188,10 @@ export default {
         "Generujte bezpečné API tokeny pro připojení vašeho pracovního prostoru s externími systémy a aplikacemi.",
       cta_primary: "Přidat API token",
     },
+    webhooks: {
+      title: "Zatím nebyl přidán žádný Webhook",
+      description: "Automatizujte oznámení externím službám při výskytu událostí projektu.",
+      cta_primary: "Přidat webhook",
+    },
   },
 } as const;
diff --git a/packages/i18n/src/locales/cs/translations.ts b/packages/i18n/src/locales/cs/translations.ts
index 0fd2350440..3b98f60c20 100644
--- a/packages/i18n/src/locales/cs/translations.ts
+++ b/packages/i18n/src/locales/cs/translations.ts
@@ -74,7 +74,7 @@ export default {
       },
       unique_code: {
         label: "Jedinečný kód",
-        placeholder: "gets-sets-flys",
+        placeholder: "123456",
         paste_code: "Vložte kód zaslaný na váš e-mail",
         requesting_new_code: "Žádám o nový kód",
         sending_code: "Odesílám kód",
@@ -337,13 +337,13 @@ export default {
   project_id_must_be_at_least_1_character: "ID projektu musí mít alespoň 1 znak",
   project_id_must_be_at_most_5_characters: "ID projektu může mít maximálně 5 znaků",
   project_id: "ID projektu",
-  project_id_tooltip_content: "Pomáhá jednoznačně identifikovat pracovní položky v projektu. Max. 5 znaků.",
+  project_id_tooltip_content: "Pomáhá jednoznačně identifikovat pracovní položky v projektu. Max. 10 znaků.",
   description_placeholder: "Popis",
   only_alphanumeric_non_latin_characters_allowed: "Jsou povoleny pouze alfanumerické a nelatinské znaky.",
   project_id_is_required: "ID projektu je povinné",
   project_id_allowed_char: "Jsou povoleny pouze alfanumerické a nelatinské znaky.",
   project_id_min_char: "ID projektu musí mít alespoň 1 znak",
-  project_id_max_char: "ID projektu může mít maximálně 5 znaků",
+  project_id_max_char: "ID projektu může mít maximálně 10 znaků",
   project_description_placeholder: "Zadejte popis projektu",
   select_network: "Vybrat síť",
   lead: "Vedoucí",
@@ -1522,6 +1522,47 @@ export default {
         "Pokud potvrdíte, všechny možnosti řazení, filtrování a zobrazení + rozvržení, které jste vybrali pro tento pohled, budou trvale odstraněny a nelze je obnovit.",
     },
   },
+  account_settings: {
+    profile: {
+      change_email_modal: {
+        title: "Změnit e-mail",
+        description: "Zadejte novou e-mailovou adresu a obdržíte ověřovací odkaz.",
+        toasts: {
+          success_title: "Úspěch!",
+          success_message: "E-mail byl úspěšně aktualizován. Přihlaste se znovu.",
+        },
+        form: {
+          email: {
+            label: "Nový e-mail",
+            placeholder: "Zadejte svůj e-mail",
+            errors: {
+              required: "E-mail je povinný",
+              invalid: "E-mail je neplatný",
+              exists: "E-mail již existuje. Použijte jiný.",
+              validation_failed: "Ověření e-mailu se nezdařilo. Zkuste to znovu.",
+            },
+          },
+          code: {
+            label: "Jedinečný kód",
+            placeholder: "123456",
+            helper_text: "Ověřovací kód byl odeslán na váš nový e-mail.",
+            errors: {
+              required: "Jedinečný kód je povinný",
+              invalid: "Neplatný ověřovací kód. Zkuste to znovu.",
+            },
+          },
+        },
+        actions: {
+          continue: "Pokračovat",
+          confirm: "Potvrdit",
+          cancel: "Zrušit",
+        },
+        states: {
+          sending: "Odesílání…",
+        },
+      },
+    },
+  },
   workspace_settings: {
     label: "Nastavení pracovního prostoru",
     page_label: "{workspace} - Obecná nastavení",
@@ -1537,6 +1578,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á.",
diff --git a/packages/i18n/src/locales/de/empty-state.ts b/packages/i18n/src/locales/de/empty-state.ts
index f5b2fae25c..96c47c70dc 100644
--- a/packages/i18n/src/locales/de/empty-state.ts
+++ b/packages/i18n/src/locales/de/empty-state.ts
@@ -26,6 +26,18 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "Es scheint, als hätten Sie keinen Zugriff auf dieses Projekt",
+      restricted_description:
+        "Kontaktieren Sie den Administrator, um Zugriff anzufordern, damit Sie hier fortfahren können.",
+      join_description: "Klicken Sie unten auf die Schaltfläche, um beizutreten.",
+      cta_primary: "Projekt beitreten",
+      cta_loading: "Projekt wird beigetreten",
+    },
+    invalid_project: {
+      title: "Projekt nicht gefunden",
+      description: "Das gesuchte Projekt existiert nicht.",
+    },
     work_items: {
       title: "Beginnen Sie mit Ihrem ersten Arbeitselement.",
       description:
@@ -186,5 +198,10 @@ export default {
         "Generieren Sie sichere API-Tokens, um Ihren Workspace mit externen Systemen und Anwendungen zu verbinden.",
       cta_primary: "API-Token hinzufügen",
     },
+    webhooks: {
+      title: "Noch kein Webhook hinzugefügt",
+      description: "Automatisieren Sie Benachrichtigungen an externe Dienste, wenn Projektereignisse auftreten.",
+      cta_primary: "Webhook hinzufügen",
+    },
   },
 } as const;
diff --git a/packages/i18n/src/locales/de/translations.ts b/packages/i18n/src/locales/de/translations.ts
index c9bbf0dfc2..d6b5a7d417 100644
--- a/packages/i18n/src/locales/de/translations.ts
+++ b/packages/i18n/src/locales/de/translations.ts
@@ -74,7 +74,7 @@ export default {
       },
       unique_code: {
         label: "Einmaliger Code",
-        placeholder: "gets-sets-flys",
+        placeholder: "123456",
         paste_code: "Fügen Sie den an Ihre E-Mail gesendeten Code ein",
         requesting_new_code: "Neuen Code anfordern",
         sending_code: "Code wird gesendet",
@@ -344,13 +344,13 @@ export default {
   project_id_must_be_at_least_1_character: "Projekt-ID muss mindestens 1 Zeichen lang sein",
   project_id_must_be_at_most_5_characters: "Projekt-ID darf maximal 5 Zeichen lang sein",
   project_id: "Projekt-ID",
-  project_id_tooltip_content: "Hilft, Arbeitselemente im Projekt eindeutig zu identifizieren. Max. 5 Zeichen.",
+  project_id_tooltip_content: "Hilft, Arbeitselemente im Projekt eindeutig zu identifizieren. Max. 10 Zeichen.",
   description_placeholder: "Beschreibung",
   only_alphanumeric_non_latin_characters_allowed: "Es sind nur alphanumerische und nicht-lateinische Zeichen erlaubt.",
   project_id_is_required: "Projekt-ID ist erforderlich",
   project_id_allowed_char: "Es sind nur alphanumerische und nicht-lateinische Zeichen erlaubt.",
   project_id_min_char: "Projekt-ID muss mindestens 1 Zeichen lang sein",
-  project_id_max_char: "Projekt-ID darf maximal 5 Zeichen lang sein",
+  project_id_max_char: "Projekt-ID darf maximal 10 Zeichen lang sein",
   project_description_placeholder: "Geben Sie eine Projektbeschreibung ein",
   select_network: "Netzwerk auswählen",
   lead: "Leitung",
@@ -1540,6 +1540,47 @@ export default {
         "Wenn Sie bestätigen, werden alle Sortier-, Filter- und Anzeigeoptionen + das Layout, das Sie für diese Ansicht gewählt haben, dauerhaft gelöscht und können nicht wiederhergestellt werden.",
     },
   },
+  account_settings: {
+    profile: {
+      change_email_modal: {
+        title: "E-Mail ändern",
+        description: "Gib eine neue E-Mail-Adresse ein, um einen Verifizierungslink zu erhalten.",
+        toasts: {
+          success_title: "Erfolg!",
+          success_message: "E-Mail erfolgreich aktualisiert. Bitte melde dich erneut an.",
+        },
+        form: {
+          email: {
+            label: "Neue E-Mail",
+            placeholder: "Gib deine E-Mail ein",
+            errors: {
+              required: "E-Mail ist erforderlich",
+              invalid: "E-Mail ist ungültig",
+              exists: "E-Mail existiert bereits. Bitte nutze eine andere.",
+              validation_failed: "E-Mail-Verifizierung fehlgeschlagen. Bitte versuche es erneut.",
+            },
+          },
+          code: {
+            label: "Einmaliger Code",
+            placeholder: "123456",
+            helper_text: "Verifizierungscode wurde an deine neue E-Mail gesendet.",
+            errors: {
+              required: "Einmaliger Code ist erforderlich",
+              invalid: "Ungültiger Verifizierungscode. Bitte versuche es erneut.",
+            },
+          },
+        },
+        actions: {
+          continue: "Weiter",
+          confirm: "Bestätigen",
+          cancel: "Abbrechen",
+        },
+        states: {
+          sending: "Wird gesendet…",
+        },
+      },
+    },
+  },
   workspace_settings: {
     label: "Arbeitsbereich-Einstellungen",
     page_label: "{workspace} - Allgemeine Einstellungen",
@@ -1555,6 +1596,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:
diff --git a/packages/i18n/src/locales/en/core.ts b/packages/i18n/src/locales/en/core.ts
index bce2ee96eb..49b8f18a23 100644
--- a/packages/i18n/src/locales/en/core.ts
+++ b/packages/i18n/src/locales/en/core.ts
@@ -75,7 +75,7 @@ export default {
       },
       unique_code: {
         label: "Unique code",
-        placeholder: "gets-sets-flys",
+        placeholder: "123456",
         paste_code: "Paste the code sent to your email",
         requesting_new_code: "Requesting new code",
         sending_code: "Sending code",
diff --git a/packages/i18n/src/locales/en/empty-state.ts b/packages/i18n/src/locales/en/empty-state.ts
index 8ef996f4f5..ae9a063574 100644
--- a/packages/i18n/src/locales/en/empty-state.ts
+++ b/packages/i18n/src/locales/en/empty-state.ts
@@ -24,6 +24,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "Seems like you don’t have access to this Project",
+      restricted_description: "Contact admin to request for access and you can continue here.",
+      join_description: "Click the button below to join it.",
+      cta_primary: "Join project",
+      cta_loading: "Joining project",
+    },
+    invalid_project: {
+      title: "Project not found",
+      description: "The project you are looking for does not exist.",
+    },
     work_items: {
       title: "Start with your first work item.",
       description:
@@ -172,5 +183,10 @@ export default {
       description: "Generate secure API tokens to connect your workspace with external systems and applications.",
       cta_primary: "Add API token",
     },
+    webhooks: {
+      title: "No Webhook added yet",
+      description: "Automate notifications to external services when project events occur.",
+      cta_primary: "Add webhook",
+    },
   },
 } as const;
diff --git a/packages/i18n/src/locales/en/translations.ts b/packages/i18n/src/locales/en/translations.ts
index 78de21f038..d41e7ecb06 100644
--- a/packages/i18n/src/locales/en/translations.ts
+++ b/packages/i18n/src/locales/en/translations.ts
@@ -172,13 +172,13 @@ export default {
   project_id_must_be_at_least_1_character: "Project ID must at least be of 1 character",
   project_id_must_be_at_most_5_characters: "Project ID must at most be of 5 characters",
   project_id: "Project ID",
-  project_id_tooltip_content: "Helps you identify work items in the project uniquely. Max 5 characters.",
+  project_id_tooltip_content: "Helps you identify work items in the project uniquely. Max 10 characters.",
   description_placeholder: "Description",
   only_alphanumeric_non_latin_characters_allowed: "Only Alphanumeric & Non-latin characters are allowed.",
   project_id_is_required: "Project ID is required",
   project_id_allowed_char: "Only Alphanumeric & Non-latin characters are allowed.",
   project_id_min_char: "Project ID must at least be of 1 character",
-  project_id_max_char: "Project ID must at most be of 5 characters",
+  project_id_max_char: "Project ID must at most be of 10 characters",
   project_description_placeholder: "Enter project description",
   select_network: "Select network",
   lead: "Lead",
@@ -840,7 +840,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 +980,7 @@ export default {
     delete: "Delete attachment",
   },
   label: {
-    select: "Select label",
+    select: "Add labels",
     create: {
       success: "Label created successfully",
       failed: "Label creation failed",
@@ -1357,7 +1357,45 @@ export default {
     },
   },
   account_settings: {
-    profile: {},
+    profile: {
+      change_email_modal: {
+        title: "Change email",
+        description: "Enter a new email address to receive a verification link.",
+        toasts: {
+          success_title: "Success!",
+          success_message: "Email updated successfully. Please sign in again.",
+        },
+        form: {
+          email: {
+            label: "New email",
+            placeholder: "Enter your email",
+            errors: {
+              required: "Email is required",
+              invalid: "Email is invalid",
+              exists: "Email already exists. Please use a different one.",
+              validation_failed: "Email validation failed. Please try again.",
+            },
+          },
+          code: {
+            label: "Unique code",
+            placeholder: "123456",
+            helper_text: "Verification code sent to your new email.",
+            errors: {
+              required: "Unique code is required",
+              invalid: "Invalid verification code. Please try again.",
+            },
+          },
+        },
+        actions: {
+          continue: "Continue",
+          confirm: "Confirm",
+          cancel: "Cancel",
+        },
+        states: {
+          sending: "Sending",
+        },
+      },
+    },
     preferences: {
       heading: "Preferences",
       description: "Customize your app experience the way you work",
@@ -1393,6 +1431,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:
@@ -2588,6 +2627,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",
@@ -2658,4 +2698,17 @@ export default {
       help: "Help",
     },
   },
+  // Navigation customization
+  customize_navigation: "Customize navigation",
+  personal: "Personal",
+  accordion_navigation_control: "Accordion sidebar navigation",
+  horizontal_navigation_bar: "Tabbed Navigation",
+  show_limited_projects_on_sidebar: "Show limited projects on sidebar",
+  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/empty-state.ts b/packages/i18n/src/locales/es/empty-state.ts
index 0c062cdb4b..53ccdb8f25 100644
--- a/packages/i18n/src/locales/es/empty-state.ts
+++ b/packages/i18n/src/locales/es/empty-state.ts
@@ -26,6 +26,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "Parece que no tienes acceso a este proyecto",
+      restricted_description: "Contacta con el administrador para solicitar acceso y podrás continuar aquí.",
+      join_description: "Haz clic en el botón de abajo para unirte.",
+      cta_primary: "Unirse al proyecto",
+      cta_loading: "Uniéndose al proyecto",
+    },
+    invalid_project: {
+      title: "Proyecto no encontrado",
+      description: "El proyecto que buscas no existe.",
+    },
     work_items: {
       title: "Comienza con tu primer elemento de trabajo.",
       description:
@@ -181,5 +192,10 @@ export default {
         "Genera tokens API seguros para conectar tu espacio de trabajo con sistemas y aplicaciones externos.",
       cta_primary: "Agregar token API",
     },
+    webhooks: {
+      title: "Aún no se ha agregado ningún Webhook",
+      description: "Automatiza las notificaciones a servicios externos cuando ocurran eventos del proyecto.",
+      cta_primary: "Agregar webhook",
+    },
   },
 } as const;
diff --git a/packages/i18n/src/locales/es/translations.ts b/packages/i18n/src/locales/es/translations.ts
index 41d63d7892..85807f743f 100644
--- a/packages/i18n/src/locales/es/translations.ts
+++ b/packages/i18n/src/locales/es/translations.ts
@@ -345,13 +345,13 @@ export default {
   project_id_must_be_at_most_5_characters: "El ID del proyecto debe tener como máximo 5 caracteres",
   project_id: "ID del proyecto",
   project_id_tooltip_content:
-    "Te ayuda a identificar elementos de trabajo en el proyecto de manera única. Máximo 5 caracteres.",
+    "Te ayuda a identificar elementos de trabajo en el proyecto de manera única. Máximo 10 caracteres.",
   description_placeholder: "Descripción",
   only_alphanumeric_non_latin_characters_allowed: "Solo se permiten caracteres alfanuméricos y no latinos.",
   project_id_is_required: "El ID del proyecto es requerido",
   project_id_allowed_char: "Solo se permiten caracteres alfanuméricos y no latinos.",
   project_id_min_char: "El ID del proyecto debe tener al menos 1 carácter",
-  project_id_max_char: "El ID del proyecto debe tener como máximo 5 caracteres",
+  project_id_max_char: "El ID del proyecto debe tener como máximo 10 caracteres",
   project_description_placeholder: "Ingresa la descripción del proyecto",
   select_network: "Seleccionar red",
   lead: "Líder",
@@ -1544,6 +1544,47 @@ export default {
         "Si confirmas, todas las opciones de ordenación, filtro y visualización + el diseño que has elegido para esta vista se eliminarán permanentemente sin posibilidad de restaurarlas.",
     },
   },
+  account_settings: {
+    profile: {
+      change_email_modal: {
+        title: "Cambiar correo electrónico",
+        description: "Introduce una nueva dirección de correo electrónico para recibir un enlace de verificación.",
+        toasts: {
+          success_title: "¡Éxito!",
+          success_message: "Correo electrónico actualizado correctamente. Inicia sesión de nuevo.",
+        },
+        form: {
+          email: {
+            label: "Nuevo correo electrónico",
+            placeholder: "Introduce tu correo electrónico",
+            errors: {
+              required: "El correo electrónico es obligatorio",
+              invalid: "El correo electrónico no es válido",
+              exists: "El correo electrónico ya existe. Usa uno diferente.",
+              validation_failed: "La validación del correo electrónico falló. Inténtalo de nuevo.",
+            },
+          },
+          code: {
+            label: "Código único",
+            placeholder: "123456",
+            helper_text: "Código de verificación enviado a tu nuevo correo electrónico.",
+            errors: {
+              required: "El código único es obligatorio",
+              invalid: "Código de verificación inválido. Inténtalo de nuevo.",
+            },
+          },
+        },
+        actions: {
+          continue: "Continuar",
+          confirm: "Confirmar",
+          cancel: "Cancelar",
+        },
+        states: {
+          sending: "Enviando…",
+        },
+      },
+    },
+  },
   workspace_settings: {
     label: "Configuración del espacio de trabajo",
     page_label: "{workspace} - Configuración general",
@@ -1559,6 +1600,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:
diff --git a/packages/i18n/src/locales/fr/accessibility.ts b/packages/i18n/src/locales/fr/accessibility.ts
index 413f0dd7d9..4dedb604ee 100644
--- a/packages/i18n/src/locales/fr/accessibility.ts
+++ b/packages/i18n/src/locales/fr/accessibility.ts
@@ -1,8 +1,8 @@
 export default {
   aria_labels: {
     projects_sidebar: {
-      workspace_logo: "Logo de l'espace de travail",
-      open_workspace_switcher: "Ouvrir le sélecteur d'espace de travail",
+      workspace_logo: "Logo de l’espace de travail",
+      open_workspace_switcher: "Ouvrir le sélecteur d’espace de travail",
       open_user_menu: "Ouvrir le menu utilisateur",
       open_command_palette: "Ouvrir la palette de commandes",
       open_extended_sidebar: "Ouvrir la barre latérale étendue",
@@ -16,7 +16,7 @@ export default {
       create_new_project: "Créer un nouveau projet",
       open_projects_menu: "Ouvrir le menu des projets",
       close_projects_menu: "Fermer le menu des projets",
-      toggle_quick_actions_menu: "Basculer le menu d'actions rapides",
+      toggle_quick_actions_menu: "Basculer le menu d’actions rapides",
       open_project_menu: "Ouvrir le menu du projet",
       close_project_menu: "Fermer le menu du projet",
       collapse_sidebar: "Réduire la barre latérale",
@@ -24,10 +24,10 @@ export default {
       edition_badge: "Ouvrir le modal des plans payants",
     },
     auth_forms: {
-      clear_email: "Effacer l'e-mail",
+      clear_email: "Effacer l’e-mail",
       show_password: "Afficher le mot de passe",
       hide_password: "Masquer le mot de passe",
-      close_alert: "Fermer l'alerte",
+      close_alert: "Fermer l’alerte",
       close_popover: "Fermer la fenêtre contextuelle",
     },
   },
diff --git a/packages/i18n/src/locales/fr/empty-state.ts b/packages/i18n/src/locales/fr/empty-state.ts
index 061fb19b7e..ca97443ef8 100644
--- a/packages/i18n/src/locales/fr/empty-state.ts
+++ b/packages/i18n/src/locales/fr/empty-state.ts
@@ -1,22 +1,22 @@
 export default {
   common_empty_state: {
     progress: {
-      title: "Il n'y a pas encore de métriques de progression à afficher.",
+      title: "Il n’y a pas encore de métriques de progression à afficher.",
       description:
         "Commencez à définir des valeurs de propriété dans les éléments de travail pour voir les métriques de progression ici.",
     },
     updates: {
       title: "Pas encore de mises à jour.",
-      description: "Une fois que les membres du projet ajoutent des mises à jour, elles apparaîtront ici",
+      description: "Lorsque les membres du projet ajoutent des mises à jour, elles apparaissent ici",
     },
     search: {
       title: "Aucun résultat correspondant.",
-      description: "Aucun résultat trouvé. Essayez d'ajuster vos termes de recherche.",
+      description: "Aucun résultat n’a été trouvé. Essayez d’ajuster votre recherche.",
     },
     not_found: {
       title: "Oups ! Quelque chose semble incorrect",
       description:
-        "Nous ne sommes actuellement pas en mesure de récupérer votre compte plane. Il pourrait s'agir d'une erreur réseau.",
+        "Nous ne sommes actuellement pas en mesure de récupérer votre compte plane. Il pourrait s’agir d'une erreur réseau.",
       cta_primary: "Essayer de recharger",
     },
     server_error: {
@@ -27,6 +27,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "Il semble que vous n’ayez pas accès à ce projet",
+      restricted_description: "Contactez l’administrateur pour demander l’accès afin de pouvoir continuer ici.",
+      join_description: "Cliquez sur le bouton ci-dessous pour rejoindre le projet.",
+      cta_primary: "Rejoindre le projet",
+      cta_loading: "Rejoindre le projet…",
+    },
+    invalid_project: {
+      title: "Projet non trouvé",
+      description: "Le projet que vous recherchez n’existe pas.",
+    },
     work_items: {
       title: "Commencez avec votre premier élément de travail.",
       description:
@@ -42,19 +53,19 @@ export default {
     cycle_work_items: {
       title: "Aucun élément de travail à afficher dans ce cycle",
       description:
-        "Créez des éléments de travail pour commencer à surveiller la progression de votre équipe ce cycle et atteindre vos objectifs à temps.",
+        "Créez des éléments de travail pour commencer à suivre la progression de votre équipe dans ce cycle et atteindre vos objectifs à temps.",
       cta_primary: "Créer un élément de travail",
       cta_secondary: "Ajouter un élément de travail existant",
     },
     modules: {
-      title: "Associez vos objectifs de projet aux Modules et suivez facilement.",
+      title: "Associez vos objectifs de projet aux Modules et suivez-les facilement.",
       description:
-        "Les modules sont composés d'éléments de travail interconnectés. Ils aident à surveiller les progrès à travers les phases du projet, chacune avec des délais spécifiques et des analyses pour indiquer à quel point vous êtes proche de la réalisation de ces phases.",
+        "Les modules sont composés d’éléments de travail interconnectés. Ils aident à suivre les progrès à travers les phases du projet, chacune avec des délais spécifiques et des analyses pour indiquer à quel point vous êtes proche de la réalisation de ces phases.",
       cta_primary: "Définir votre premier module",
     },
     module_work_items: {
       title: "Aucun élément de travail à afficher dans ce Module",
-      description: "Créez des éléments de travail pour commencer à surveiller ce module.",
+      description: "Créez des éléments de travail pour commencer à suivre ce module.",
       cta_primary: "Créer un élément de travail",
       cta_secondary: "Ajouter un élément de travail existant",
     },
@@ -72,13 +83,13 @@ export default {
     },
     work_item_filter: {
       title: "Aucun élément de travail trouvé",
-      description: "Votre filtre actuel n'a renvoyé aucun résultat. Essayez de modifier les filtres.",
+      description: "Votre filtre actuel n’a renvoyé aucun résultat. Essayez de modifier les filtres.",
       cta_primary: "Ajouter un élément de travail",
     },
     pages: {
       title: "Documentez tout — des notes aux PRD",
       description:
-        "Les pages vous permettent de capturer et d'organiser des informations en un seul endroit. Rédigez des notes de réunion, de la documentation de projet et des PRD, intégrez des éléments de travail et structurez-les avec des composants prêts à l'emploi.",
+        "Les pages vous permettent de capturer et d’organiser des informations en un seul endroit. Rédigez des notes de réunion, de la documentation de projet et des PRD, intégrez des éléments de travail et structurez-les avec des composants prêts à l'emploi.",
       cta_primary: "Créer votre première Page",
     },
     archive_pages: {
@@ -86,10 +97,10 @@ export default {
       description: "Archivez les pages qui ne sont pas sur votre radar. Accédez-y ici si nécessaire.",
     },
     intake_sidebar: {
-      title: "Enregistrer les demandes d'Intake",
+      title: "Enregistrer les demandes d’Intake",
       description:
         "Soumettez de nouvelles demandes à examiner, prioriser et suivre dans le flux de travail de votre projet.",
-      cta_primary: "Créer une demande d'Intake",
+      cta_primary: "Créer une demande d’Intake",
     },
     intake_main: {
       title: "Sélectionnez un élément de travail Intake pour voir ses détails",
@@ -100,7 +111,7 @@ export default {
       title: "Aucun élément de travail archivé pour le moment",
       description:
         "Manuellement ou par automatisation, vous pouvez archiver des éléments de travail qui sont terminés ou annulés. Retrouvez-les ici une fois archivés.",
-      cta_primary: "Définir l'automatisation",
+      cta_primary: "Définir l’automatisation",
     },
     archive_cycles: {
       title: "Aucun cycle archivé pour le moment",
@@ -129,25 +140,25 @@ export default {
     views: {
       title: "Aucune vue pour le moment",
       description:
-        "Ajoutez des éléments de travail à votre projet et utilisez les vues pour filtrer, trier et surveiller les progrès sans effort.",
+        "Ajoutez des éléments de travail à votre projet et utilisez les vues pour filtrer, trier et suivre les progrès sans effort.",
       cta_primary: "Ajouter un élément de travail",
     },
     drafts: {
       title: "Éléments de travail à moitié écrits",
       description:
-        "Pour l'essayer, commencez à ajouter un élément de travail et laissez-le à mi-chemin ou créez votre premier brouillon ci-dessous. 😉",
-      cta_primary: "Créer un brouillon d'élément de travail",
+        "Pour l’essayer, commencez à ajouter un élément de travail et laissez-le à mi-chemin ou créez votre premier brouillon ci-dessous. 😉",
+      cta_primary: "Créer un brouillon d’élément de travail",
     },
     projects_archived: {
       title: "Aucun projet archivé",
-      description: "On dirait que tous vos projets sont toujours actifs—excellent travail !",
+      description: "On dirait que tous vos projets sont toujours actifs — excellent travail !",
     },
     analytics_projects: {
       title: "Créez des projets pour visualiser les métriques de projet ici.",
     },
     analytics_work_items: {
       title:
-        "Créez des projets avec des éléments de travail et des assignés pour commencer à suivre les performances, les progrès et l'impact de l'équipe ici.",
+        "Créez des projets avec des éléments de travail et des personnes assignées pour commencer à suivre les performances, les progrès et l’impact de l’équipe ici.",
     },
     analytics_no_cycle: {
       title:
@@ -157,15 +168,15 @@ export default {
       title: "Créez des modules pour organiser votre travail et suivre les progrès à travers différentes étapes.",
     },
     analytics_no_intake: {
-      title: "Configurez l'intake pour gérer les demandes entrantes et suivre comment elles sont acceptées et rejetées",
+      title: "Configurez l’intake pour gérer les demandes entrantes et suivre comment elles sont acceptées et rejetées",
     },
   },
   settings_empty_state: {
     estimates: {
       title: "Aucune estimation pour le moment",
       description:
-        "Définissez comment votre équipe mesure l'effort et suivez-le de manière cohérente sur tous les éléments de travail.",
-      cta_primary: "Ajouter un système d'estimation",
+        "Définissez comment votre équipe mesure l’effort et suivez-le de manière cohérente sur tous les éléments de travail.",
+      cta_primary: "Ajouter un système d’estimation",
     },
     labels: {
       title: "Aucune étiquette pour le moment",
@@ -176,7 +187,7 @@ export default {
     exports: {
       title: "Aucune exportation pour le moment",
       description:
-        "Vous n'avez aucun enregistrement d'exportation pour le moment. Une fois que vous exportez des données, tous les enregistrements apparaîtront ici.",
+        "Vous n’avez aucun enregistrement d’exportation pour le moment. Une fois que vous exportez des données, tous les enregistrements apparaîtront ici.",
     },
     tokens: {
       title: "Aucun jeton personnel pour le moment",
@@ -184,5 +195,11 @@ export default {
         "Générez des jetons API sécurisés pour connecter votre espace de travail avec des systèmes et applications externes.",
       cta_primary: "Ajouter un jeton API",
     },
+    webhooks: {
+      title: "Aucun Webhook ajouté pour le moment",
+      description:
+        "Automatisez les notifications vers des services externes lorsque des événements de projet se produisent.",
+      cta_primary: "Ajouter un webhook",
+    },
   },
 } as const;
diff --git a/packages/i18n/src/locales/fr/translations.ts b/packages/i18n/src/locales/fr/translations.ts
index 13c610453c..79673abf0e 100644
--- a/packages/i18n/src/locales/fr/translations.ts
+++ b/packages/i18n/src/locales/fr/translations.ts
@@ -24,8 +24,8 @@ export default {
         label: "E-mail",
         placeholder: "nom@entreprise.com",
         errors: {
-          required: "L'e-mail est requis",
-          invalid: "L'e-mail est invalide",
+          required: "L’e-mail est requis",
+          invalid: "L’e-mail est invalide",
         },
       },
       password: {
@@ -74,9 +74,9 @@ export default {
       },
       unique_code: {
         label: "Code unique",
-        placeholder: "obtient-définit-vole",
+        placeholder: "123456",
         paste_code: "Collez le code envoyé à votre e-mail",
-        requesting_new_code: "Demande d'un nouveau code",
+        requesting_new_code: "Demande d’un nouveau code",
         sending_code: "Envoi du code",
       },
       already_have_an_account: "Vous avez déjà un compte ?",
@@ -93,16 +93,16 @@ export default {
         label: "Créez un compte pour commencer à gérer le travail avec votre équipe.",
         step: {
           email: {
-            header: "S'inscrire",
+            header: "S’inscrire",
             sub_header: "",
           },
           password: {
-            header: "S'inscrire",
+            header: "S’inscrire",
             sub_header: "Inscrivez-vous en utilisant une combinaison e-mail-mot de passe.",
           },
           unique_code: {
-            header: "S'inscrire",
-            sub_header: "Inscrivez-vous en utilisant un code unique envoyé à l'adresse e-mail ci-dessus.",
+            header: "S’inscrire",
+            sub_header: "Inscrivez-vous en utilisant un code unique envoyé à l’adresse e-mail ci-dessus.",
           },
         },
       },
@@ -117,16 +117,16 @@ export default {
         label: "Connectez-vous pour commencer à gérer le travail avec votre équipe.",
         step: {
           email: {
-            header: "Se connecter ou s'inscrire",
+            header: "Se connecter ou s’inscrire",
             sub_header: "",
           },
           password: {
-            header: "Se connecter ou s'inscrire",
-            sub_header: "Utilisez votre combinaison e-mail-mot de passe pour vous connecter.",
+            header: "Se connecter ou s’inscrire",
+            sub_header: "Utilisez votre combinaison e-mail - mot de passe pour vous connecter.",
           },
           unique_code: {
-            header: "Se connecter ou s'inscrire",
-            sub_header: "Connectez-vous en utilisant un code unique envoyé à l'adresse e-mail ci-dessus.",
+            header: "Se connecter ou s’inscrire",
+            sub_header: "Connectez-vous en utilisant un code unique envoyé à l’adresse e-mail ci-dessus.",
           },
         },
       },
@@ -134,22 +134,22 @@ export default {
     forgot_password: {
       title: "Réinitialiser votre mot de passe",
       description:
-        "Entrez l'adresse e-mail vérifiée de votre compte utilisateur et nous vous enverrons un lien de réinitialisation du mot de passe.",
+        "Entrez l’adresse e-mail vérifiée de votre compte utilisateur et nous vous enverrons un lien de réinitialisation du mot de passe.",
       email_sent: "Nous avons envoyé le lien de réinitialisation à votre adresse e-mail",
       send_reset_link: "Envoyer le lien de réinitialisation",
       errors: {
         smtp_not_enabled:
-          "Nous constatons que votre administrateur n'a pas activé SMTP, nous ne pourrons pas envoyer de lien de réinitialisation du mot de passe",
+          "Nous constatons que votre administrateur n’a pas activé le SMTP, nous ne pourrons pas envoyer de lien de réinitialisation du mot de passe",
       },
       toast: {
         success: {
           title: "E-mail envoyé",
           message:
-            "Vérifiez votre boîte de réception pour un lien de réinitialisation de votre mot de passe. S'il n'apparaît pas dans quelques minutes, vérifiez votre dossier spam.",
+            "Consultez votre boîte de réception pour obtenir un lien de réinitialisation de votre mot de passe. S’il n’apparaît pas dans quelques minutes, vérifiez votre dossier spam.",
         },
         error: {
           title: "Erreur !",
-          message: "Une erreur s'est produite. Veuillez réessayer.",
+          message: "Une erreur s’est produite. Veuillez réessayer.",
         },
       },
     },
@@ -159,7 +159,7 @@ export default {
     },
     set_password: {
       title: "Sécurisez votre compte",
-      description: "La définition d'un mot de passe vous permet de vous connecter en toute sécurité",
+      description: "La définition d’un mot de passe vous permet de vous connecter en toute sécurité",
     },
     sign_out: {
       toast: {
@@ -170,7 +170,7 @@ export default {
       },
     },
   },
-  submit: "Soumettre",
+  submit: "Valider",
   cancel: "Annuler",
   loading: "Chargement",
   error: "Erreur",
@@ -224,11 +224,11 @@ export default {
   assigned: "Assigné",
   created: "Créé",
   subscribed: "Abonné",
-  you_do_not_have_the_permission_to_access_this_page: "Vous n'avez pas la permission d'accéder à cette page.",
-  something_went_wrong_please_try_again: "Une erreur s'est produite. Veuillez réessayer.",
-  load_more: "Charger plus",
+  you_do_not_have_the_permission_to_access_this_page: "Vous n’avez pas la permission d’accéder à cette page.",
+  something_went_wrong_please_try_again: "Une erreur s’est produite. Veuillez réessayer.",
+  load_more: "Charger davantage",
   select_or_customize_your_interface_color_scheme:
-    "Sélectionnez ou personnalisez votre schéma de couleurs d'interface.",
+    "Sélectionnez ou personnalisez votre palette de couleurs de l’interface.",
   theme: "Thème",
   system_preference: "Préférence système",
   light: "Clair",
@@ -261,46 +261,46 @@ export default {
   notify_me_when: "Me notifier quand",
   property_changes: "Modifications des propriétés",
   property_changes_description:
-    "Me notifier lorsque les propriétés des éléments de travail comme les assignés, la priorité, les estimations ou autre changent.",
-  state_change: "Changement d'état",
+    "Me notifier lorsque les propriétés des éléments de travail comme les acteurs, la priorité, les estimations ou autre changent.",
+  state_change: "Changement d’état",
   state_change_description: "Me notifier lorsque les éléments de travail passent à un état différent",
   issue_completed: "Élément de travail terminé",
-  issue_completed_description: "Me notifier uniquement lorsqu'un élément de travail est terminé",
+  issue_completed_description: "Me notifier uniquement lorsqu’un élément de travail est terminé",
   comments: "Commentaires",
-  comments_description: "Me notifier lorsque quelqu'un laisse un commentaire sur l'élément de travail",
+  comments_description: "Me notifier lorsque quelqu’un laisse un commentaire sur l’élément de travail",
   mentions: "Mentions",
-  mentions_description: "Me notifier uniquement lorsque quelqu'un me mentionne dans les commentaires ou la description",
+  mentions_description: "Me notifier uniquement lorsque quelqu’un me mentionne dans les commentaires ou la description",
   old_password: "Ancien mot de passe",
   general_settings: "Paramètres généraux",
   sign_out: "Se déconnecter",
   signing_out: "Déconnexion",
   active_cycles: "Cycles actifs",
   active_cycles_description:
-    "Surveillez les cycles à travers les projets, suivez les éléments de travail prioritaires et zoomez sur les cycles qui nécessitent de l'attention.",
+    "Surveillez les cycles à travers les projets, suivez les éléments de travail prioritaires et zoomez sur les cycles qui nécessitent votre attention.",
   on_demand_snapshots_of_all_your_cycles: "Instantanés à la demande de tous vos cycles",
   upgrade: "Mettre à niveau",
   "10000_feet_view": "Vue à 10 000 pieds de tous les cycles actifs.",
   "10000_feet_view_description":
-    "Dézoomez pour voir les cycles en cours dans tous vos projets en même temps au lieu de passer d'un cycle à l'autre dans chaque projet.",
+    "Dézoomez pour voir les cycles en cours dans tous vos projets en même temps au lieu de passer d’un cycle à l’autre dans chaque projet.",
   get_snapshot_of_each_active_cycle: "Obtenez un aperçu de chaque cycle actif.",
   get_snapshot_of_each_active_cycle_description:
-    "Suivez les métriques de haut niveau pour tous les cycles actifs, voyez leur état d'avancement et obtenez une idée de la portée par rapport aux échéances.",
+    "Suivez les métriques de haut niveau pour tous les cycles actifs, suivez leur état d’avancement et évaluez leur impact par rapport aux échéances.",
   compare_burndowns: "Comparez les burndowns.",
   compare_burndowns_description:
-    "Surveillez les performances de chacune de vos équipes en jetant un coup d'œil au rapport burndown de chaque cycle.",
-  quickly_see_make_or_break_issues: "Voyez rapidement les éléments de travail critiques.",
+    "Surveillez les performances de chacune de vos équipes en jetant un coup d’œil au rapport burndown de chaque cycle.",
+  quickly_see_make_or_break_issues: "Repérez rapidement les éléments de travail critiques.",
   quickly_see_make_or_break_issues_description:
-    "Prévisualisez les éléments de travail hautement prioritaires pour chaque cycle par rapport aux dates d'échéance. Voyez-les tous par cycle en un clic.",
-  zoom_into_cycles_that_need_attention: "Zoomez sur les cycles qui nécessitent de l'attention.",
+    "Prévisualisez les éléments de travail hautement prioritaires pour chaque cycle par rapport aux dates d’échéance. Visualisez-les pour chaque cycle en un clic.",
+  zoom_into_cycles_that_need_attention: "Zoomez sur les cycles qui nécessitent votre attention.",
   zoom_into_cycles_that_need_attention_description:
-    "Examinez l'état de tout cycle qui ne correspond pas aux attentes en un clic.",
+    "Examinez l’état de tout cycle qui ne corresponde pas aux attentes en un clic.",
   stay_ahead_of_blockers: "Anticipez les blocages.",
   stay_ahead_of_blockers_description:
-    "Repérez les défis d'un projet à l'autre et voyez les dépendances inter-cycles qui ne sont pas évidentes depuis une autre vue.",
+    "Repérez les défis d’un projet à l’autre et repérez les dépendances inter-cycles qui ne sont pas évidentes depuis une autre vue.",
   analytics: "Analyses",
-  workspace_invites: "Invitations à l'espace de travail",
+  workspace_invites: "Invitations à l’espace de travail",
   enter_god_mode: "Entrer en mode dieu",
-  workspace_logo: "Logo de l'espace de travail",
+  workspace_logo: "Logo de l’espace de travail",
   new_issue: "Nouvel élément de travail",
   your_work: "Votre travail",
   drafts: "Brouillons",
@@ -318,7 +318,7 @@ export default {
   favorite_created_successfully: "Favori créé avec succès",
   folder_already_exists: "Le dossier existe déjà",
   folder_name_cannot_be_empty: "Le nom du dossier ne peut pas être vide",
-  something_went_wrong: "Une erreur s'est produite",
+  something_went_wrong: "Une erreur s’est produite",
   failed_to_reorder_favorite: "Échec de la réorganisation du favori",
   favorite_removed_successfully: "Favori supprimé avec succès",
   failed_to_create_favorite: "Échec de la création du favori",
@@ -337,17 +337,17 @@ export default {
   name_is_required: "Le nom est requis",
   title_should_be_less_than_255_characters: "Le titre doit faire moins de 255 caractères",
   project_name: "Nom du projet",
-  project_id_must_be_at_least_1_character: "L'ID du projet doit comporter au moins 1 caractère",
-  project_id_must_be_at_most_5_characters: "L'ID du projet doit comporter au plus 5 caractères",
+  project_id_must_be_at_least_1_character: "L’ID du projet doit comporter au moins 1 caractère",
+  project_id_must_be_at_most_5_characters: "L’ID du projet doit comporter au plus 5 caractères",
   project_id: "ID du projet",
   project_id_tooltip_content:
-    "Vous aide à identifier uniquement les éléments de travail dans le projet. Maximum 5 caractères.",
+    "Vous aide à identifier de manière unique les éléments de travail dans le projet. Maximum 10 caractères.",
   description_placeholder: "Description",
   only_alphanumeric_non_latin_characters_allowed: "Seuls les caractères alphanumériques et non latins sont autorisés.",
-  project_id_is_required: "L'ID du projet est requis",
+  project_id_is_required: "L’ID du projet est requis",
   project_id_allowed_char: "Seuls les caractères alphanumériques et non latins sont autorisés.",
-  project_id_min_char: "L'ID du projet doit comporter au moins 1 caractère",
-  project_id_max_char: "L'ID du projet doit comporter au plus 5 caractères",
+  project_id_min_char: "L’ID du projet doit comporter au moins 1 caractère",
+  project_id_max_char: "L'ID du projet doit comporter au plus 10 caractères",
   project_description_placeholder: "Entrez la description du projet",
   select_network: "Sélectionner le réseau",
   lead: "Responsable",
@@ -356,12 +356,12 @@ export default {
   public: "Public",
   accessible_only_by_invite: "Accessible uniquement sur invitation",
   anyone_in_the_workspace_except_guests_can_join:
-    "Tout le monde dans l'espace de travail sauf les invités peut rejoindre",
+    "Tout le monde dans l’espace de travail peut rejoindre, sauf les invités",
   creating: "Création",
   creating_project: "Création du projet",
   adding_project_to_favorites: "Ajout du projet aux favoris",
   project_added_to_favorites: "Projet ajouté aux favoris",
-  couldnt_add_the_project_to_favorites: "Impossible d'ajouter le projet aux favoris. Veuillez réessayer.",
+  couldnt_add_the_project_to_favorites: "Impossible d’ajouter le projet aux favoris. Veuillez réessayer.",
   removing_project_from_favorites: "Suppression du projet des favoris",
   project_removed_from_favorites: "Projet supprimé des favoris",
   couldnt_remove_the_project_from_favorites: "Impossible de supprimer le projet des favoris. Veuillez réessayer.",
@@ -381,14 +381,14 @@ export default {
   pages: "Pages",
   intake: "Intake",
   time_tracking: "Suivi du temps",
-  work_management: "Gestion du travail",
+  work_management: "Organisation du travail",
   projects_and_issues: "Projets et éléments de travail",
   projects_and_issues_description: "Activez ou désactivez ces éléments pour ce projet.",
   cycles_description:
-    "Planifiez le travail par projet dans un cadre temporel et ajustez la période au besoin. Un cycle peut durer 2 semaines, le suivant 1 semaine.",
-  modules_description: "Organisez le travail en sous-projets avec des responsables et des personnes assignées dédiés.",
+    "Définissez un cadre temporel pour chaque projet et ajustez la durée selon les besoins. Un cycle peut durer deux semaines, le suivant une semaine.",
+  modules_description: "Organisez le travail en sous-projets avec des responsables et des acteurs spécifiques.",
   views_description:
-    "Enregistrez des tris, filtres et options d'affichage personnalisés ou partagez-les avec votre équipe.",
+    "Enregistrez des tris, filtres et options d’affichage personnalisés ou partagez-les avec votre équipe.",
   pages_description: "Créez et modifiez du contenu libre : notes, documents, tout ce que vous voulez.",
   intake_description:
     "Permettez aux non-membres de partager des bugs, des retours et des suggestions, sans perturber votre flux de travail.",
@@ -412,41 +412,41 @@ export default {
   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:
-    "Veuillez sélectionner au moins une invitation pour rejoindre l'espace de travail.",
+    "Veuillez sélectionner au moins une invitation pour rejoindre l’espace de travail.",
   we_see_that_someone_has_invited_you_to_join_a_workspace:
-    "Nous voyons que quelqu'un vous a invité à rejoindre un espace de travail",
+    "Nous voyons que quelqu’un vous a invité à rejoindre un espace de travail",
   join_a_workspace: "Rejoindre un espace de travail",
   we_see_that_someone_has_invited_you_to_join_a_workspace_description:
-    "Nous voyons que quelqu'un vous a invité à rejoindre un espace de travail",
+    "Nous voyons que quelqu’un vous a invité à rejoindre un espace de travail",
   join_a_workspace_description: "Rejoindre un espace de travail",
   accept_and_join: "Accepter et rejoindre",
-  go_home: "Aller à l'accueil",
+  go_home: "Aller à l’accueil",
   no_pending_invites: "Aucune invitation en attente",
   you_can_see_here_if_someone_invites_you_to_a_workspace:
-    "Vous pouvez voir ici si quelqu'un vous invite à un espace de travail",
-  back_to_home: "Retour à l'accueil",
+    "Vous pouvez voir ici si quelqu’un vous invite à un espace de travail",
+  back_to_home: "Retour à l’accueil",
   workspace_name: "nom-espace-de-travail",
   deactivate_your_account: "Désactiver votre compte",
   deactivate_your_account_description:
-    "Une fois désactivé, vous ne pourrez plus être assigné à des éléments de travail ni être facturé pour votre espace de travail. Pour réactiver votre compte, vous aurez besoin d'une invitation à un espace de travail avec cette adresse e-mail.",
+    "Une fois votre compte désactivé, vous ne pourrez plus être associé à des éléments de travail ni être facturé pour votre espace de travail. Pour réactiver votre compte, vous aurez besoin d'une invitation à un espace de travail avec cette adresse e-mail.",
   deactivating: "Désactivation",
   confirm: "Confirmer",
   confirming: "Confirmation",
   draft_created: "Brouillon créé",
   issue_created_successfully: "Élément de travail créé avec succès",
   draft_creation_failed: "Échec de la création du brouillon",
-  issue_creation_failed: "Échec de la création de l'élément de travail",
+  issue_creation_failed: "Échec de la création de l’élément de travail",
   draft_issue: "Élément de travail en brouillon",
   issue_updated_successfully: "Élément de travail mis à jour avec succès",
-  issue_could_not_be_updated: "L'élément de travail n'a pas pu être mis à jour",
+  issue_could_not_be_updated: "L’élément de travail n’a pas pu être mis à jour",
   create_a_draft: "Créer un brouillon",
   save_to_drafts: "Enregistrer dans les brouillons",
   save: "Enregistrer",
   update: "Mettre à jour",
   updating: "Mise à jour",
   create_new_issue: "Créer un nouvel élément de travail",
-  editor_is_not_ready_to_discard_changes: "L'éditeur n'est pas prêt à annuler les modifications",
-  failed_to_move_issue_to_project: "Échec du déplacement de l'élément de travail vers le projet",
+  editor_is_not_ready_to_discard_changes: "L’éditeur n’est pas prêt à annuler les modifications",
+  failed_to_move_issue_to_project: "Échec du déplacement de l’élément de travail vers le projet",
   create_more: "Créer plus",
   add_to_project: "Ajouter au projet",
   discard: "Annuler",
@@ -463,17 +463,17 @@ export default {
   medium: "Moyen",
   low: "Faible",
   members: "Membres",
-  assignee: "Assigné",
-  assignees: "Assignés",
+  assignee: "Acteur",
+  assignees: "Acteurs",
   you: "Vous",
   labels: "Étiquettes",
   create_new_label: "Créer une nouvelle étiquette",
   start_date: "Date de début",
   end_date: "Date de fin",
-  due_date: "Date d'échéance",
+  due_date: "Date d’échéance",
   estimate: "Estimation",
-  change_parent_issue: "Changer l'élément de travail parent",
-  remove_parent_issue: "Supprimer l'élément de travail parent",
+  change_parent_issue: "Changer l’élément de travail parent",
+  remove_parent_issue: "Supprimer l’élément de travail parent",
   add_parent: "Ajouter un parent",
   loading_members: "Chargement des membres",
   view_link_copied_to_clipboard: "Lien de la vue copié dans le presse-papiers.",
@@ -497,19 +497,19 @@ export default {
   no_data_yet: "Pas encore de données",
   syncing: "Synchronisation",
   add_work_item: "Ajouter un élément de travail",
-  advanced_description_placeholder: "Appuyez sur '/' pour les commandes",
+  advanced_description_placeholder: "Appuyez sur '/' pour voir les commandes",
   create_work_item: "Créer un élément de travail",
   attachments: "Pièces jointes",
   declining: "Refus",
   declined: "Refusé",
   decline: "Refuser",
-  unassigned: "Non assigné",
+  unassigned: "Non attribué",
   work_items: "Éléments de travail",
   add_link: "Ajouter un lien",
   points: "Points",
-  no_assignee: "Pas d'assigné",
-  no_assignees_yet: "Pas encore d'assignés",
-  no_labels_yet: "Pas encore d'étiquettes",
+  no_assignee: "Pas d’acteurs associés",
+  no_assignees_yet: "Pas encore d’acteurs associés",
+  no_labels_yet: "Pas encore d’étiquettes",
   ideal: "Idéal",
   current: "Actuel",
   no_matching_members: "Aucun membre correspondant",
@@ -518,7 +518,7 @@ export default {
   leave: "Quitter",
   refresh: "Actualiser",
   refreshing: "Actualisation",
-  refresh_status: "Actualiser l'état",
+  refresh_status: "Actualiser l’état",
   prev: "Précédent",
   next: "Suivant",
   re_generating: "Régénération",
@@ -549,7 +549,7 @@ export default {
       },
       not_created: {
         title: "Lien non créé",
-        message: "Le lien n'a pas pu être créé",
+        message: "Le lien n’a pas pu être créé",
       },
       updated: {
         title: "Lien mis à jour",
@@ -557,7 +557,7 @@ export default {
       },
       not_updated: {
         title: "Lien non mis à jour",
-        message: "Le lien n'a pas pu être mis à jour",
+        message: "Le lien n’a pas pu être mis à jour",
       },
       removed: {
         title: "Lien supprimé",
@@ -565,7 +565,7 @@ export default {
       },
       not_removed: {
         title: "Lien non supprimé",
-        message: "Le lien n'a pas pu être supprimé",
+        message: "Le lien n’a pas pu être supprimé",
       },
     },
   },
@@ -580,7 +580,7 @@ export default {
       },
       invite_team: {
         title: "Inviter votre équipe",
-        description: "Construisez, déployez et gérez avec vos collègues.",
+        description: "Construisez, déployez et travaillez avec vos collègues.",
         cta: "Les faire entrer",
       },
       configure_workspace: {
@@ -614,7 +614,7 @@ export default {
         project: "Vos projets récents apparaîtront ici une fois que vous en aurez visité un.",
         page: "Vos pages récentes apparaîtront ici une fois que vous en aurez visité une.",
         issue: "Vos éléments de travail récents apparaîtront ici une fois que vous en aurez visité un.",
-        default: "Vous n'avez pas encore d'éléments récents.",
+        default: "Vous n’avez pas encore d’éléments récents.",
       },
       filters: {
         all: "Tous",
@@ -631,7 +631,7 @@ export default {
     },
     widget: {
       reordered_successfully: "Widget réorganisé avec succès.",
-      reordering_failed: "Une erreur s'est produite lors de la réorganisation du widget.",
+      reordering_failed: "Une erreur s’est produite lors de la réorganisation du widget.",
     },
     manage_widgets: "Gérer les widgets",
     title: "Accueil",
@@ -641,12 +641,12 @@ export default {
     modal: {
       url: {
         text: "URL",
-        required: "L'URL n'est pas valide",
+        required: "L’URL n’est pas valide",
         placeholder: "Tapez ou collez une URL",
       },
       title: {
-        text: "Titre d'affichage",
-        placeholder: "Comment souhaitez-vous voir ce lien",
+        text: "Titre d’affichage",
+        placeholder: "Comment ce lien sera présenté",
       },
     },
   },
@@ -656,11 +656,11 @@ export default {
     drop_here_to_move: "Déposer ici pour déplacer",
     states: "États",
     state: "État",
-    state_groups: "Groupes d'états",
-    state_group: "Groupe d'état",
+    state_groups: "Groupes d’états",
+    state_group: "Groupe d’état",
     priorities: "Priorités",
     priority: "Priorité",
-    team_project: "Projet d'équipe",
+    team_project: "Projet d’équipe",
     project: "Projet",
     cycle: "Cycle",
     cycles: "Cycles",
@@ -668,8 +668,8 @@ export default {
     modules: "Modules",
     labels: "Étiquettes",
     label: "Étiquette",
-    assignees: "Assignés",
-    assignee: "Assigné",
+    assignees: "Acteurs",
+    assignee: "Acteur",
     created_by: "Créé par",
     none: "Aucun",
     link: "Lien",
@@ -685,10 +685,10 @@ export default {
     analytics: "Analyses",
     dates: "Dates",
     success: "Succès !",
-    something_went_wrong: "Quelque chose s'est mal passé",
+    something_went_wrong: "Quelque chose s’est mal passé",
     error: {
       label: "Erreur !",
-      message: "Une erreur s'est produite. Veuillez réessayer.",
+      message: "Une erreur s’est produite. Veuillez réessayer.",
     },
     group_by: "Grouper par",
     epic: "Epic",
@@ -715,7 +715,7 @@ export default {
     project_timezone: "Fuseau horaire du projet",
     created_on: "Créé le",
     update_project: "Mettre à jour le projet",
-    identifier_already_exists: "L'identifiant existe déjà",
+    identifier_already_exists: "L’identifiant existe déjà",
     add_more: "Ajouter plus",
     defaults: "Par défaut",
     add_label: "Ajouter une étiquette",
@@ -743,7 +743,7 @@ export default {
       last_created: "Dernier créé",
       last_updated: "Dernière mise à jour",
       start_date: "Date de début",
-      due_date: "Date d'échéance",
+      due_date: "Date d’échéance",
       asc: "Croissant",
       desc: "Décroissant",
       updated_on: "Mis à jour le",
@@ -760,12 +760,12 @@ export default {
     copied: "Copié !",
     link_copied: "Lien copié !",
     link_copied_to_clipboard: "Lien copié dans le presse-papiers",
-    copied_to_clipboard: "Lien de l'élément de travail copié dans le presse-papiers",
-    is_copied_to_clipboard: "L'élément de travail est copié dans le presse-papiers",
-    no_links_added_yet: "Aucun lien ajouté pour l'instant",
+    copied_to_clipboard: "Lien de l’élément de travail copié dans le presse-papiers",
+    is_copied_to_clipboard: "L’élément de travail est copié dans le presse-papiers",
+    no_links_added_yet: "Aucun lien ajouté pour l’instant",
     add_link: "Ajouter un lien",
     links: "Liens",
-    go_to_workspace: "Aller à l'espace de travail",
+    go_to_workspace: "Aller à l’espace de travail",
     progress: "Progression",
     optional: "Optionnel",
     join: "Rejoindre",
@@ -776,7 +776,7 @@ export default {
     errors: {
       default: {
         title: "Erreur !",
-        message: "Quelque chose s'est mal passé. Veuillez réessayer.",
+        message: "Quelque chose s’est mal passé. Veuillez réessayer.",
       },
       required: "Ce champ est obligatoire",
       entity_required: "{entity} est requis",
@@ -787,18 +787,18 @@ export default {
     create_new: "Créer nouveau",
     add_existing: "Ajouter existant",
     type_or_paste_a_url: "Tapez ou collez une URL",
-    url_is_invalid: "L'URL n'est pas valide",
-    display_title: "Titre d'affichage",
-    link_title_placeholder: "Comment souhaitez-vous voir ce lien",
+    url_is_invalid: "L’URL n’est pas valide",
+    display_title: "Titre d’affichage",
+    link_title_placeholder: "Comment ce lien sera présenté",
     url: "URL",
     side_peek: "Aperçu latéral",
     modal: "Modal",
     full_screen: "Plein écran",
-    close_peek_view: "Fermer l'aperçu",
-    toggle_peek_view_layout: "Basculer la disposition de l'aperçu",
+    close_peek_view: "Fermer l’aperçu",
+    toggle_peek_view_layout: "Basculer la disposition de l’aperçu",
     options: "Options",
     duration: "Durée",
-    today: "Aujourd'hui",
+    today: "Aujourd’hui",
     week: "Semaine",
     month: "Mois",
     quarter: "Trimestre",
@@ -818,7 +818,7 @@ export default {
       archive: "Archiver",
       delete: "Supprimer",
       remove_relation: "Supprimer la relation",
-      subscribe: "S'abonner",
+      subscribe: "S’abonner",
       unsubscribe: "Se désabonner",
       clear_sorting: "Effacer le tri",
       show_weekends: "Afficher les week-ends",
@@ -884,8 +884,8 @@ export default {
     members: "Membres",
     you: "Vous",
     upgrade_cta: {
-      higher_subscription: "Passer à une abonnement plus élevé",
-      talk_to_sales: "Parler aux ventes",
+      higher_subscription: "Passer à un abonnement plus élevé",
+      talk_to_sales: "Contacter le service commercial",
     },
     category: "Catégorie",
     categories: "Catégories",
@@ -946,7 +946,7 @@ export default {
     },
     add: {
       success: "{entity} ajouté avec succès",
-      failed: "Erreur lors de l'ajout de {entity}",
+      failed: "Erreur lors de l’ajout de {entity}",
     },
     remove: {
       success: "{entity} supprimé avec succès",
@@ -957,7 +957,7 @@ export default {
     all: "Tous les Epics",
     label: "{count, plural, one {Epic} other {Epics}}",
     new: "Nouvel Epic",
-    adding: "Ajout d'un epic",
+    adding: "Ajout d’un epic",
     create: {
       success: "Epic créé avec succès",
     },
@@ -966,30 +966,30 @@ export default {
       label: "Ajouter un Epic",
     },
     title: {
-      label: "Titre de l'Epic",
-      required: "Le titre de l'Epic est requis.",
+      label: "Titre de l’Epic",
+      required: "Le titre de l’Epic est requis.",
     },
   },
   issue: {
     label: "{count, plural, one {Élément de travail} other {Éléments de travail}}",
     all: "Tous les éléments de travail",
-    edit: "Modifier l'élément de travail",
+    edit: "Modifier l’élément de travail",
     title: {
-      label: "Titre de l'élément de travail",
-      required: "Le titre de l'élément de travail est requis.",
+      label: "Titre de l’élément de travail",
+      required: "Le titre de l’élément de travail est requis.",
     },
     add: {
       press_enter: "Appuyez sur 'Entrée' pour ajouter un autre élément de travail",
       label: "Ajouter un élément de travail",
       cycle: {
-        failed: "L'élément de travail n'a pas pu être ajouté au cycle. Veuillez réessayer.",
+        failed: "L’élément de travail n’a pas pu être ajouté au cycle. Veuillez réessayer.",
         success:
           "{count, plural, one {Élément de travail} other {Éléments de travail}} ajouté(s) au cycle avec succès.",
-        loading: "Ajout de {count, plural, one {l'élément de travail} other {éléments de travail}} au cycle",
+        loading: "Ajout de {count, plural, one {l’élément de travail} other {éléments de travail}} au cycle",
       },
       assignee: "Ajouter des assignés",
       start_date: "Ajouter une date de début",
-      due_date: "Ajouter une date d'échéance",
+      due_date: "Ajouter une date d’échéance",
       parent: "Ajouter un élément de travail parent",
       sub_issue: "Ajouter un sous-élément de travail",
       relation: "Ajouter une relation",
@@ -997,23 +997,23 @@ export default {
       existing: "Ajouter un élément de travail existant",
     },
     remove: {
-      label: "Supprimer l'élément de travail",
+      label: "Supprimer l’élément de travail",
       cycle: {
-        loading: "Suppression de l'élément de travail du cycle",
+        loading: "Suppression de l’élément de travail du cycle",
         success: "Élément de travail supprimé du cycle avec succès.",
-        failed: "L'élément de travail n'a pas pu être supprimé du cycle. Veuillez réessayer.",
+        failed: "L’élément de travail n’a pas pu être supprimé du cycle. Veuillez réessayer.",
       },
       module: {
-        loading: "Suppression de l'élément de travail du module",
+        loading: "Suppression de l’élément de travail du module",
         success: "Élément de travail supprimé du module avec succès.",
-        failed: "L'élément de travail n'a pas pu être supprimé du module. Veuillez réessayer.",
+        failed: "L’élément de travail n’a pas pu être supprimé du module. Veuillez réessayer.",
       },
       parent: {
-        label: "Supprimer l'élément de travail parent",
+        label: "Supprimer l’élément de travail parent",
       },
     },
     new: "Nouvel élément de travail",
-    adding: "Ajout d'un élément de travail",
+    adding: "Ajout d’un élément de travail",
     create: {
       success: "Élément de travail créé avec succès",
     },
@@ -1025,14 +1025,14 @@ export default {
     },
     display: {
       properties: {
-        label: "Propriétés d'affichage",
+        label: "Propriétés d’affichage",
         id: "ID",
-        issue_type: "Type d'élément de travail",
+        issue_type: "Type d’élément de travail",
         sub_issue_count: "Nombre de sous-éléments",
         attachment_count: "Nombre de pièces jointes",
         created_on: "Créé le",
         sub_issue: "Sous-élément de travail",
-        work_item_count: "Nombre d'éléments de travail",
+        work_item_count: "Nombre d’éléments de travail",
       },
       extra: {
         show_sub_issues: "Afficher les sous-éléments",
@@ -1086,8 +1086,8 @@ export default {
     },
     empty_state: {
       issue_detail: {
-        title: "L'élément de travail n'existe pas",
-        description: "L'élément de travail que vous recherchez n'existe pas, a été archivé ou a été supprimé.",
+        title: "L’élément de travail n’existe pas",
+        description: "L’élément de travail que vous recherchez n’existe pas, a été archivé ou a été supprimé.",
         primary_button: {
           text: "Voir les autres éléments de travail",
         },
@@ -1098,15 +1098,15 @@ export default {
     },
     archive: {
       description: "Seuls les éléments de travail\nterminés ou annulés peuvent être archivés",
-      label: "Archiver l'élément de travail",
+      label: "Archiver l’élément de travail",
       confirm_message:
-        "Êtes-vous sûr de vouloir archiver l'élément de travail ? Tous vos éléments archivés peuvent être restaurés ultérieurement.",
+        "Êtes-vous sûr de vouloir archiver l’élément de travail ? Tous vos éléments archivés peuvent être restaurés ultérieurement.",
       success: {
         label: "Archivage réussi",
         message: "Vos archives se trouvent dans les archives du projet.",
       },
       failed: {
-        message: "L'élément de travail n'a pas pu être archivé. Veuillez réessayer.",
+        message: "L’élément de travail n’a pas pu être archivé. Veuillez réessayer.",
       },
     },
     restore: {
@@ -1115,7 +1115,7 @@ export default {
         message: "Votre élément de travail se trouve dans les éléments de travail du projet.",
       },
       failed: {
-        message: "L'élément de travail n'a pas pu être restauré. Veuillez réessayer.",
+        message: "L’élément de travail n’a pas pu être restauré. Veuillez réessayer.",
       },
     },
     relation: {
@@ -1124,15 +1124,15 @@ export default {
       blocked_by: "Bloqué par",
       blocking: "Bloque",
     },
-    copy_link: "Copier le lien de l'élément de travail",
+    copy_link: "Copier le lien de l’élément de travail",
     delete: {
-      label: "Supprimer l'élément de travail",
-      error: "Erreur lors de la suppression de l'élément de travail",
+      label: "Supprimer l’élément de travail",
+      error: "Erreur lors de la suppression de l’élément de travail",
     },
     subscription: {
       actions: {
-        subscribed: "Abonnement à l'élément de travail réussi",
-        unsubscribed: "Désabonnement de l'élément de travail réussi",
+        subscribed: "Abonnement à l’élément de travail réussi",
+        unsubscribed: "Désabonnement de l’élément de travail réussi",
       },
     },
     select: {
@@ -1142,21 +1142,21 @@ export default {
       select_all: "Sélectionner tout",
       deselect_all: "Tout désélectionner",
     },
-    open_in_full_screen: "Ouvrir l'élément de travail en plein écran",
+    open_in_full_screen: "Ouvrir l’élément de travail en plein écran",
   },
   attachment: {
-    error: "Le fichier n'a pas pu être joint. Essayez de le télécharger à nouveau.",
+    error: "Le fichier n’a pas pu être joint. Essayez de le télécharger à nouveau.",
     only_one_file_allowed: "Un seul fichier peut être téléchargé à la fois.",
     file_size_limit: "Le fichier doit faire {size}MB ou moins.",
-    drag_and_drop: "Glissez-déposez n'importe où pour télécharger",
+    drag_and_drop: "Glissez-déposez n’importe où pour uploader",
     delete: "Supprimer la pièce jointe",
   },
   label: {
     select: "Sélectionner une étiquette",
     create: {
       success: "Étiquette créée avec succès",
-      failed: "Échec de la création de l'étiquette",
-      already_exists: "L'étiquette existe déjà",
+      failed: "Échec de la création de l’étiquette",
+      already_exists: "L’étiquette existe déjà",
       type: "Tapez pour ajouter une nouvelle étiquette",
     },
   },
@@ -1171,12 +1171,12 @@ export default {
     },
     empty_state: {
       sub_list_filters: {
-        title: "Vous n'avez pas de sous-éléments de travail qui correspondent aux filtres que vous avez appliqués.",
+        title: "Vous n’avez pas de sous-éléments de travail qui correspondent aux filtres que vous avez appliqués.",
         description: "Pour voir tous les sous-éléments de travail, effacer tous les filtres appliqués.",
         action: "Effacer les filtres",
       },
       list_filters: {
-        title: "Vous n'avez pas d'éléments de travail qui correspondent aux filtres que vous avez appliqués.",
+        title: "Vous n’avez pas d’éléments de travail qui correspondent aux filtres que vous avez appliqués.",
         description: "Pour voir tous les éléments de travail, effacer tous les filtres appliqués.",
         action: "Effacer les filtres",
       },
@@ -1216,12 +1216,12 @@ export default {
     },
     modals: {
       decline: {
-        title: "Refuser l'élément de travail",
-        content: "Êtes-vous sûr de vouloir refuser l'élément de travail {value} ?",
+        title: "Refuser l’élément de travail",
+        content: "Êtes-vous sûr de vouloir refuser l’élément de travail {value} ?",
       },
       delete: {
-        title: "Supprimer l'élément de travail",
-        content: "Êtes-vous sûr de vouloir supprimer l'élément de travail {value} ?",
+        title: "Supprimer l’élément de travail",
+        content: "Êtes-vous sûr de vouloir supprimer l’élément de travail {value} ?",
         success: "Élément de travail supprimé avec succès",
       },
     },
@@ -1236,9 +1236,9 @@ export default {
       decline: "Refuser",
       snooze: "Reporter",
       unsnooze: "Annuler le report",
-      copy: "Copier le lien de l'élément de travail",
+      copy: "Copier le lien de l’élément de travail",
       delete: "Supprimer",
-      open: "Ouvrir l'élément de travail",
+      open: "Ouvrir l’élément de travail",
       mark_as_duplicate: "Marquer comme doublon",
       move: "Déplacer {value} vers les éléments de travail du projet",
     },
@@ -1266,7 +1266,7 @@ export default {
       },
       sidebar_closed_tab: {
         title: "Aucun élément de travail fermé",
-        description: "Tous les éléments de travail, qu'ils soient acceptés ou refusés, peuvent être trouvés ici.",
+        description: "Tous les éléments de travail, qu’ils soient acceptés ou refusés, peuvent être trouvés ici.",
       },
       sidebar_filter: {
         title: "Aucun élément de travail correspondant",
@@ -1287,9 +1287,9 @@ export default {
         placeholder: "Quelque chose de familier et reconnaissable est toujours préférable.",
       },
       url: {
-        label: "Définissez l'URL de votre espace de travail",
+        label: "Définissez l’URL de votre espace de travail",
         placeholder: "Tapez ou collez une URL",
-        edit_slug: "Vous ne pouvez modifier que le slug de l'URL",
+        edit_slug: "Vous ne pouvez modifier que le slug de l’URL",
       },
       organization_size: {
         label: "Combien de personnes utiliseront cet espace de travail ?",
@@ -1298,27 +1298,27 @@ export default {
     },
     errors: {
       creation_disabled: {
-        title: "Seul l'administrateur de votre instance peut créer des espaces de travail",
+        title: "Seul l’administrateur de votre instance peut créer des espaces de travail",
         description:
-          "Si vous connaissez l'adresse e-mail de votre administrateur d'instance, cliquez sur le bouton ci-dessous pour le contacter.",
-        request_button: "Contacter l'administrateur d'instance",
+          "Si vous connaissez l’adresse e-mail de votre administrateur d’instance, cliquez sur le bouton ci-dessous pour le contacter.",
+        request_button: "Contacter l’administrateur d’instance",
       },
       validation: {
         name_alphanumeric:
-          "Les noms d'espaces de travail ne peuvent contenir que (' '), ('-'), ('_') et des caractères alphanumériques.",
+          "Les noms d’espaces de travail ne peuvent contenir que (' '), ('-'), ('_') et des caractères alphanumériques.",
         name_length: "Limitez votre nom à 80 caractères.",
         url_alphanumeric: "Les URL ne peuvent contenir que ('-') et des caractères alphanumériques.",
         url_length: "Limitez votre URL à 48 caractères.",
-        url_already_taken: "L'URL de l'espace de travail est déjà prise !",
+        url_already_taken: "L’URL de l’espace de travail est déjà prise !",
       },
     },
     request_email: {
-      subject: "Demande d'un nouvel espace de travail",
-      body: "Bonjour administrateur(s) d'instance,\n\nVeuillez créer un nouvel espace de travail avec l'URL [/workspace-name] pour [objectif de création de l'espace de travail].\n\nMerci,\n{firstName} {lastName}\n{email}",
+      subject: "Demande d’un nouvel espace de travail",
+      body: "Bonjour administrateur(s) d’instance,\n\nVeuillez créer un nouvel espace de travail avec l’URL [/workspace-name] pour [objectif de création de l'espace de travail].\n\nMerci,\n{firstName} {lastName}\n{email}",
     },
     button: {
-      default: "Créer l'espace de travail",
-      loading: "Création de l'espace de travail",
+      default: "Créer l’espace de travail",
+      loading: "Création de l’espace de travail",
     },
     toast: {
       success: {
@@ -1327,7 +1327,7 @@ export default {
       },
       error: {
         title: "Erreur",
-        message: "L'espace de travail n'a pas pu être créé. Veuillez réessayer.",
+        message: "L’espace de travail n’a pas pu être créé. Veuillez réessayer.",
       },
     },
   },
@@ -1342,7 +1342,7 @@ export default {
           comic: {
             title: "Tout commence par un projet dans Plane",
             description:
-              "Un projet peut être la feuille de route d'un produit, une campagne marketing ou le lancement d'une nouvelle voiture.",
+              "Un projet peut être la feuille de route d’un produit, une campagne marketing ou le lancement d’une nouvelle voiture.",
           },
         },
       },
@@ -1352,7 +1352,7 @@ export default {
     label: "Analytique",
     page_label: "{workspace} - Analytique",
     open_tasks: "Total des tâches ouvertes",
-    error: "Une erreur s'est produite lors de la récupération des données.",
+    error: "Une erreur s’est produite lors de la récupération des données.",
     work_items_closed_in: "Éléments de travail fermés dans",
     selected_projects: "Projets sélectionnés",
     total_members: "Total des membres",
@@ -1360,48 +1360,48 @@ export default {
     total_modules: "Total des Modules",
     pending_work_items: {
       title: "Éléments de travail en attente",
-      empty_state: "L'analyse des éléments de travail en attente par collègues apparaît ici.",
+      empty_state: "L’analyse des éléments de travail en attente par acteur apparaît ici.",
     },
     work_items_closed_in_a_year: {
-      title: "Éléments de travail fermés dans l'année",
+      title: "Éléments de travail fermés dans l’année",
       empty_state: "Fermez des éléments de travail pour voir leur analyse sous forme de graphique.",
     },
     most_work_items_created: {
-      title: "Plus d'éléments de travail créés",
-      empty_state: "Les collègues et le nombre d'éléments de travail créés par eux apparaissent ici.",
+      title: "Plus d’éléments de travail créés",
+      empty_state: "Les acteurs et le nombre d’éléments de travail créés par eux apparaissent ici.",
     },
     most_work_items_closed: {
-      title: "Plus d'éléments de travail fermés",
-      empty_state: "Les collègues et le nombre d'éléments de travail fermés par eux apparaissent ici.",
+      title: "Plus d’éléments de travail fermés",
+      empty_state: "Les acteurs et le nombre d’éléments de travail fermés par eux apparaissent ici.",
     },
     tabs: {
-      scope_and_demand: "Portée et Demande",
+      scope_and_demand: "Scope et Demande",
       custom: "Analytique Personnalisée",
     },
     empty_state: {
       customized_insights: {
-        description: "Les éléments de travail qui vous sont assignés, répartis par état, s'afficheront ici.",
+        description: "Les éléments de travail qui vous sont assignés, répartis par état, s’afficheront ici.",
         title: "Pas encore de données",
       },
       created_vs_resolved: {
-        description: "Les éléments de travail créés et résolus au fil du temps s'afficheront ici.",
+        description: "Les éléments de travail créés et résolus au fil du temps s’afficheront ici.",
         title: "Pas encore de données",
       },
       project_insights: {
         title: "Pas encore de données",
-        description: "Les éléments de travail qui vous sont assignés, répartis par état, s'afficheront ici.",
+        description: "Les éléments de travail qui vous sont assignés, répartis par état, s’afficheront ici.",
       },
       general: {
         title:
-          "Suivez les progrès, les charges de travail et les allocations. Identifiez les tendances, supprimez les blocages et travaillez plus rapidement",
+          "Suivez les progrès, les charges de travail et les affectations. Identifiez les tendances, levez les blocages et travaillez plus rapidement",
         description:
-          "Voyez la portée par rapport à la demande, les estimations et l'évolution du périmètre. Obtenez les performances par les membres de l'équipe et les équipes, et assurez-vous que votre projet se déroule dans les temps.",
+          "Surveillez le scope par rapport à la demande, suivez les estimations et les éventuels glissements de périmètre. Assurez-vous que les membres de votre équipe et vos équipes sont performants, et veillez à ce que votre projet avance dans les délais impartis.",
         primary_button: {
           text: "Commencez votre premier projet",
           comic: {
-            title: "L'analytics fonctionne mieux avec les Cycles + Modules",
+            title: "L’analytics fonctionne mieux avec les Cycles + Modules",
             description:
-              "D'abord, encadrez vos éléments de travail dans des Cycles et, si possible, regroupez les éléments qui s'étendent sur plus d'un cycle dans des Modules. Consultez les deux dans la navigation de gauche.",
+              "D’abord, encadrez vos éléments de travail dans des Cycles et, si possible, regroupez les éléments qui s’étendent sur plus d’un cycle dans des Modules. Consultez les deux dans la navigation de gauche.",
           },
         },
       },
@@ -1418,10 +1418,10 @@ export default {
     total_work_items: "Total des {entity}",
     total_projects: "Total des projets",
     total_admins: "Total des administrateurs",
-    total_users: "Nombre total d'utilisateurs",
+    total_users: "Nombre total d’utilisateurs",
     total_intake: "Revenu total",
     un_started_work_items: "{entity} non commencés",
-    total_guests: "Nombre total d'invités",
+    total_guests: "Nombre total d’invités",
     completed_work_items: "{entity} terminés",
     total: "Total des {entity}",
   },
@@ -1437,14 +1437,14 @@ export default {
       },
       public: {
         title: "Public",
-        description: "Accessible à tous dans l'espace de travail sauf les invités",
+        description: "Accessible à tous dans l’espace de travail, sauf les invités",
       },
     },
     error: {
-      permission: "Vous n'avez pas la permission d'effectuer cette action.",
+      permission: "Vous n’avez pas la permission d’effectuer cette action.",
       cycle_delete: "Échec de la suppression du cycle",
       module_delete: "Échec de la suppression du module",
-      issue_delete: "Échec de la suppression de l'élément de travail",
+      issue_delete: "Échec de la suppression de l’élément de travail",
     },
     state: {
       backlog: "Backlog",
@@ -1470,26 +1470,26 @@ export default {
       general: {
         title: "Aucun projet actif",
         description:
-          "Considérez chaque projet comme le parent d'un travail orienté objectif. Les projets sont l'endroit où vivent les Tâches, les Cycles et les Modules et, avec vos collègues, vous aident à atteindre cet objectif. Créez un nouveau projet ou filtrez les projets archivés.",
+          "Considérez chaque projet comme le parent d’activités axées sur les objectifs. Les projets regroupent les tâches, les cycles et les modules et, avec l'aide de vos collègues, vous aident à atteindre ces objectifs. Créez un nouveau projet ou filtrez les projets archivés.",
         primary_button: {
           text: "Commencez votre premier projet",
           comic: {
             title: "Tout commence par un projet dans Plane",
             description:
-              "Un projet peut être la feuille de route d'un produit, une campagne marketing ou le lancement d'une nouvelle voiture.",
+              "Un projet peut être la feuille de route d’un produit, une campagne marketing ou le lancement d’une nouvelle voiture.",
           },
         },
       },
       no_projects: {
         title: "Aucun projet",
         description:
-          "Pour créer des éléments de travail ou gérer votre travail, vous devez créer un projet ou faire partie d'un projet.",
+          "Pour créer des éléments de travail ou gérer votre travail, vous devez créer un projet ou faire partie d’un projet.",
         primary_button: {
           text: "Commencez votre premier projet",
           comic: {
             title: "Tout commence par un projet dans Plane",
             description:
-              "Un projet peut être la feuille de route d'un produit, une campagne marketing ou le lancement d'une nouvelle voiture.",
+              "Un projet peut être la feuille de route d’un produit, une campagne marketing ou le lancement d’une nouvelle voiture.",
           },
         },
       },
@@ -1508,7 +1508,7 @@ export default {
       "all-issues": {
         title: "Aucun élément de travail dans le projet",
         description:
-          "Premier projet terminé ! Maintenant, découpez votre travail en morceaux traçables avec des éléments de travail. Allons-y !",
+          "Premier projet terminé ! Maintenant, découpez votre travail en tâches gérables à l’aide d’éléments de travail. C’est parti !",
         primary_button: {
           text: "Créer un nouvel élément de travail",
         },
@@ -1539,11 +1539,52 @@ export default {
     delete_view: {
       title: "Êtes-vous sûr de vouloir supprimer cette vue ?",
       content:
-        "Si vous confirmez, toutes les options de tri, de filtrage et d'affichage + la mise en page que vous avez choisie pour cette vue seront définitivement supprimées sans possibilité de les restaurer.",
+        "Si vous confirmez, toutes les options de tri, de filtrage et d’affichage et la mise en page que vous avez choisie pour cette vue seront définitivement supprimées sans possibilité de les restaurer.",
+    },
+  },
+  account_settings: {
+    profile: {
+      change_email_modal: {
+        title: "Changer d’adresse e-mail",
+        description: "Saisissez une nouvelle adresse e-mail pour recevoir un lien de vérification.",
+        toasts: {
+          success_title: "Succès !",
+          success_message: "Adresse e-mail mise à jour. Veuillez vous reconnecter.",
+        },
+        form: {
+          email: {
+            label: "Nouvelle adresse e-mail",
+            placeholder: "Saisissez votre e-mail",
+            errors: {
+              required: "L’e-mail est requis",
+              invalid: "L’e-mail est invalide",
+              exists: "Cette adresse e-mail existe déjà. Utilisez-en une autre.",
+              validation_failed: "Échec de la validation de l’e-mail. Veuillez réessayer.",
+            },
+          },
+          code: {
+            label: "Code unique",
+            placeholder: "123456",
+            helper_text: "Code de vérification envoyé à votre nouvel e-mail.",
+            errors: {
+              required: "Le code unique est requis",
+              invalid: "Code de vérification invalide. Veuillez réessayer.",
+            },
+          },
+        },
+        actions: {
+          continue: "Continuer",
+          confirm: "Confirmer",
+          cancel: "Annuler",
+        },
+        states: {
+          sending: "Envoi…",
+        },
+      },
     },
   },
   workspace_settings: {
-    label: "Paramètres de l'espace de travail",
+    label: "Paramètres de l’espace de travail",
     page_label: "{workspace} - Paramètres généraux",
     key_created: "Clé créée",
     copy_key:
@@ -1554,33 +1595,34 @@ export default {
         title: "Général",
         upload_logo: "Télécharger le logo",
         edit_logo: "Modifier le logo",
-        name: "Nom de l'espace de travail",
-        company_size: "Taille de l'entreprise",
-        url: "URL de l'espace de travail",
-        update_workspace: "Mettre à jour l'espace de travail",
+        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:
-          "Lors de la suppression d'un espace de travail, toutes les données et ressources au sein de cet espace seront définitivement supprimées et ne pourront pas être récupérées.",
+          "Lors de la suppression d’un espace de travail, toutes les données et ressources au sein de cet espace seront définitivement supprimées et ne pourront pas être récupérées.",
         delete_btn: "Supprimer cet espace de travail",
         delete_modal: {
           title: "Êtes-vous sûr de vouloir supprimer cet espace de travail ?",
           description:
-            "Vous avez un essai actif sur l'un de nos forfaits payants. Veuillez d'abord l'annuler pour continuer.",
+            "Vous avez un essai actif sur l’un de nos forfaits payants. Veuillez d’abord l’annuler pour continuer.",
           dismiss: "Fermer",
-          cancel: "Annuler l'essai",
+          cancel: "Annuler l’essai",
           success_title: "Espace de travail supprimé.",
           success_message: "Vous serez bientôt redirigé vers votre page de profil.",
-          error_title: "Cela n'a pas fonctionné.",
+          error_title: "Cela n’a pas fonctionné.",
           error_message: "Veuillez réessayer.",
         },
         errors: {
           name: {
             required: "Le nom est requis",
-            max_length: "Le nom de l'espace de travail ne doit pas dépasser 80 caractères",
+            max_length: "Le nom de l’espace de travail ne doit pas dépasser 80 caractères",
           },
           company_size: {
-            required: "La taille de l'entreprise est requise",
-            select_a_range: "Sélectionner la taille de l'organisation",
+            required: "La taille de l’entreprise est requise",
+            select_a_range: "Sélectionner la taille de l’organisation",
           },
         },
       },
@@ -1590,14 +1632,14 @@ export default {
         pending_invites: "Invitations en attente",
         invitations_sent_successfully: "Invitations envoyées avec succès",
         leave_confirmation:
-          "Êtes-vous sûr de vouloir quitter l'espace de travail ? Vous n'aurez plus accès à cet espace de travail. Cette action ne peut pas être annulée.",
+          "Êtes-vous sûr de vouloir quitter l’espace de travail ? Vous n’aurez plus accès à cet espace de travail. Cette action ne peut pas être annulée.",
         details: {
           full_name: "Nom complet",
-          display_name: "Nom d'affichage",
+          display_name: "Nom d’affichage",
           email_address: "Adresse e-mail",
           account_type: "Type de compte",
           authentication: "Authentification",
-          joining_date: "Date d'adhésion",
+          joining_date: "Date d’adhésion",
         },
         modal: {
           title: "Inviter des personnes à collaborer",
@@ -1606,8 +1648,8 @@ export default {
           button_loading: "Envoi des invitations",
           placeholder: "nom@entreprise.com",
           errors: {
-            required: "Nous avons besoin d'une adresse e-mail pour les inviter.",
-            invalid: "L'e-mail est invalide",
+            required: "Nous avons besoin d’une adresse e-mail pour les inviter.",
+            invalid: "L’e-mail est invalide",
           },
         },
       },
@@ -1628,11 +1670,11 @@ export default {
           toasts: {
             success: {
               title: "Exportation réussie",
-              message: "Vous pourrez télécharger les {entity} exportés depuis l'exportation précédente.",
+              message: "Vous pourrez télécharger les {entity} exportés depuis l’exportation précédente.",
             },
             error: {
-              title: "Échec de l'exportation",
-              message: "L'exportation a échoué. Veuillez réessayer.",
+              title: "Échec de l’exportation",
+              message: "L’exportation a échoué. Veuillez réessayer.",
             },
           },
         },
@@ -1645,7 +1687,7 @@ export default {
           details: "Détails du webhook",
           payload: "URL de la charge utile",
           question: "Quels événements souhaitez-vous déclencher avec ce webhook ?",
-          error: "L'URL est requise",
+          error: "L’URL est requise",
         },
         secret_key: {
           title: "Clé secrète",
@@ -1662,7 +1704,7 @@ export default {
           },
           not_created: {
             title: "Webhook non créé",
-            message: "Le webhook n'a pas pu être créé",
+            message: "Le webhook n’a pas pu être créé",
           },
           updated: {
             title: "Webhook mis à jour",
@@ -1670,7 +1712,7 @@ export default {
           },
           not_updated: {
             title: "Webhook non mis à jour",
-            message: "Le webhook n'a pas pu être mis à jour",
+            message: "Le webhook n’a pas pu être mis à jour",
           },
           removed: {
             title: "Webhook supprimé",
@@ -1678,13 +1720,13 @@ export default {
           },
           not_removed: {
             title: "Webhook non supprimé",
-            message: "Le webhook n'a pas pu être supprimé",
+            message: "Le webhook n’a pas pu être supprimé",
           },
           secret_key_copied: {
             message: "Clé secrète copiée dans le presse-papiers.",
           },
           secret_key_not_copied: {
-            message: "Une erreur s'est produite lors de la copie de la clé secrète.",
+            message: "Une erreur s’est produite lors de la copie de la clé secrète.",
           },
         },
       },
@@ -1692,20 +1734,20 @@ export default {
         title: "Jetons API",
         add_token: "Ajouter un jeton API",
         create_token: "Créer un jeton",
-        never_expires: "N'expire jamais",
+        never_expires: "N’expire jamais",
         generate_token: "Générer un jeton",
         generating: "Génération",
         delete: {
           title: "Supprimer le jeton API",
           description:
-            "Toute application utilisant ce jeton n'aura plus accès aux données de Plane. Cette action ne peut pas être annulée.",
+            "Toute application utilisant ce jeton n’aura plus accès aux données de Plane. Cette action ne peut pas être annulée.",
           success: {
             title: "Succès !",
             message: "Le jeton API a été supprimé avec succès",
           },
           error: {
             title: "Erreur !",
-            message: "Le jeton API n'a pas pu être supprimé",
+            message: "Le jeton API n’a pas pu être supprimé",
           },
         },
       },
@@ -1714,7 +1756,7 @@ export default {
       api_tokens: {
         title: "Aucun jeton API créé",
         description:
-          "Les API Plane peuvent être utilisées pour intégrer vos données dans Plane avec n'importe quel système externe. Créez un jeton pour commencer.",
+          "Les API Plane peuvent être utilisées pour intégrer vos données dans Plane avec n’importe quel système externe. Créez un jeton pour commencer.",
       },
       webhooks: {
         title: "Aucun webhook ajouté",
@@ -1740,7 +1782,7 @@ export default {
     },
     stats: {
       workload: "Charge de travail",
-      overview: "Vue d'ensemble",
+      overview: "Vue d’ensemble",
       created: "Éléments de travail créés",
       assigned: "Éléments de travail assignés",
       subscribed: "Éléments de travail suivis",
@@ -1756,7 +1798,7 @@ export default {
       },
       recent_activity: {
         title: "Activité récente",
-        empty: "Nous n'avons pas trouvé de données. Veuillez consulter vos contributions",
+        empty: "Nous n’avons pas trouvé de données. Veuillez consulter vos contributions",
         button: "Télécharger l'activité du jour",
         button_loading: "Téléchargement",
       },
@@ -1797,37 +1839,37 @@ export default {
   },
   project_settings: {
     general: {
-      enter_project_id: "Saisissez l'ID du projet",
+      enter_project_id: "Saisissez l’ID du projet",
       please_select_a_timezone: "Veuillez sélectionner un fuseau horaire",
       archive_project: {
         title: "Archiver le projet",
         description:
-          "L'archivage d'un projet le retirera de votre navigation latérale, bien que vous pourrez toujours y accéder depuis votre page de projets. Vous pouvez restaurer le projet ou le supprimer quand vous le souhaitez.",
+          "L'archivage d’un projet le retirera de votre navigation latérale, bien que vous pourrez toujours y accéder depuis votre page de projets. Vous pouvez restaurer le projet ou le supprimer quand vous le souhaitez.",
         button: "Archiver le projet",
       },
       delete_project: {
         title: "Supprimer le projet",
         description:
-          "Lors de la suppression d'un projet, toutes les données et ressources de ce projet seront définitivement supprimées et ne pourront pas être récupérées.",
+          "Lors de la suppression d’un projet, toutes les données et ressources de ce projet seront définitivement supprimées et ne pourront pas être récupérées.",
         button: "Supprimer mon projet",
       },
       toast: {
         success: "Projet mis à jour avec succès",
-        error: "Le projet n'a pas pu être mis à jour. Veuillez réessayer.",
+        error: "Le projet n’a pas pu être mis à jour. Veuillez réessayer.",
       },
     },
     members: {
       label: "Membres",
       project_lead: "Chef de projet",
-      default_assignee: "Assigné par défaut",
+      default_assignee: "Acteur par défaut",
       guest_super_permissions: {
-        title: "Accorder l'accès en lecture à tous les éléments de travail pour les utilisateurs invités :",
-        sub_heading: "Cela permettra aux invités d'avoir un accès en lecture à tous les éléments de travail du projet.",
+        title: "Accorder l’accès en lecture à tous les éléments de travail pour les utilisateurs invités :",
+        sub_heading: "Cela permettra aux invités d’avoir un accès en lecture à tous les éléments de travail du projet.",
       },
       invite_members: {
         title: "Inviter des membres",
         sub_heading: "Invitez des membres à travailler sur votre projet.",
-        select_co_worker: "Sélectionner un collaborateur",
+        select_co_worker: "Sélectionner un acteur",
       },
     },
     states: {
@@ -1838,24 +1880,24 @@ export default {
       },
     },
     labels: {
-      label_title: "Titre de l'étiquette",
-      label_title_is_required: "Le titre de l'étiquette est requis",
-      label_max_char: "Le nom de l'étiquette ne doit pas dépasser 255 caractères",
+      label_title: "Titre de l’étiquette",
+      label_title_is_required: "Le titre de l’étiquette est requis",
+      label_max_char: "Le nom de l’étiquette ne doit pas dépasser 255 caractères",
       toast: {
-        error: "Erreur lors de la mise à jour de l'étiquette",
+        error: "Erreur lors de la mise à jour de l’étiquette",
       },
     },
     estimates: {
       label: "Estimations",
       title: "Activer les estimations pour mon projet",
-      description: "Elles vous aident à communiquer la complexité et la charge de travail de l'équipe.",
+      description: "Elles vous aident à communiquer la complexité et la charge de travail de l’équipe.",
       no_estimate: "Sans estimation",
-      new: "Nouveau système d'estimation",
+      new: "Nouveau système d’estimation",
       create: {
         custom: "Personnalisé",
         start_from_scratch: "Commencer depuis zéro",
         choose_template: "Choisir un modèle",
-        choose_estimate_system: "Choisir un système d'estimation",
+        choose_estimate_system: "Choisir un système d’estimation",
         enter_estimate_point: "Saisir une estimation",
         step: "Étape {step} de {total}",
         label: "Créer une estimation",
@@ -1864,21 +1906,21 @@ export default {
         created: {
           success: {
             title: "Estimation créée",
-            message: "L'estimation a été créée avec succès",
+            message: "L’estimation a été créée avec succès",
           },
           error: {
-            title: "Échec de la création de l'estimation",
-            message: "Nous n'avons pas pu créer la nouvelle estimation, veuillez réessayer.",
+            title: "Échec de la création de l’estimation",
+            message: "Nous n’avons pas pu créer la nouvelle estimation, veuillez réessayer.",
           },
         },
         updated: {
           success: {
             title: "Estimation modifiée",
-            message: "L'estimation a été mise à jour dans votre projet.",
+            message: "L’estimation a été mise à jour dans votre projet.",
           },
           error: {
-            title: "Échec de la modification de l'estimation",
-            message: "Nous n'avons pas pu modifier l'estimation, veuillez réessayer",
+            title: "Échec de la modification de l’estimation",
+            message: "Nous n’avons pas pu modifier l’estimation, veuillez réessayer",
           },
         },
         enabled: {
@@ -1894,21 +1936,21 @@ export default {
           },
           error: {
             title: "Erreur !",
-            message: "L'estimation n'a pas pu être désactivée. Veuillez réessayer",
+            message: "L’estimation n’a pas pu être désactivée. Veuillez réessayer",
           },
         },
       },
       validation: {
-        min_length: "L'estimation doit être supérieure à 0.",
+        min_length: "L’estimation doit être supérieure à 0.",
         unable_to_process: "Nous ne pouvons pas traiter votre demande, veuillez réessayer.",
-        numeric: "L'estimation doit être une valeur numérique.",
-        character: "L'estimation doit être une valeur de caractère.",
-        empty: "La valeur de l'estimation ne peut pas être vide.",
-        already_exists: "La valeur de l'estimation existe déjà.",
+        numeric: "L’estimation doit être une valeur numérique.",
+        character: "L’estimation doit être une valeur de caractère.",
+        empty: "La valeur de l’estimation ne peut pas être vide.",
+        already_exists: "La valeur de l’estimation existe déjà.",
         unsaved_changes:
           "Vous avez des modifications non enregistrées. Veuillez les enregistrer avant de cliquer sur Terminé",
         remove_empty:
-          "L'estimation ne peut pas être vide. Saisissez une valeur dans chaque champ ou supprimez ceux pour lesquels vous n'avez pas de valeurs.",
+          "L’estimation ne peut pas être vide. Saisissez une valeur dans chaque champ ou supprimez ceux pour lesquels vous n’avez pas de valeurs.",
       },
       systems: {
         points: {
@@ -1939,20 +1981,20 @@ export default {
       },
       "auto-close": {
         title: "Fermer automatiquement les éléments de travail",
-        description: "Plane fermera automatiquement les éléments de travail qui n'ont pas été complétés ou annulés.",
+        description: "Plane fermera automatiquement les éléments de travail qui n’ont pas été complétés ou annulés.",
         duration: "Fermer automatiquement les éléments de travail inactifs depuis",
         auto_close_status: "Statut de fermeture automatique",
       },
     },
     empty_state: {
       labels: {
-        title: "Pas encore d'étiquettes",
+        title: "Pas encore d’étiquettes",
         description: "Créez des étiquettes pour organiser et filtrer les éléments de travail dans votre projet.",
       },
       estimates: {
-        title: "Pas encore de systèmes d'estimation",
-        description: "Créez un ensemble d'estimations pour communiquer le volume de travail par élément de travail.",
-        primary_button: "Ajouter un système d'estimation",
+        title: "Pas encore de systèmes d’estimation",
+        description: "Créez un ensemble d’estimations pour communiquer le volume de travail par élément de travail.",
+        primary_button: "Ajouter un système d’estimation",
       },
     },
   },
@@ -1975,10 +2017,10 @@ export default {
     active_cycle: {
       label: "Cycle actif",
       progress: "Progression",
-      chart: "Graphique d'avancement",
+      chart: "Graphique d’avancement",
       priority_issue: "Éléments de travail prioritaires",
       assignees: "Assignés",
-      issue_burndown: "Graphique d'avancement des éléments",
+      issue_burndown: "Graphique d’avancement des éléments",
       ideal: "Idéal",
       current: "Actuel",
       labels: "Étiquettes",
@@ -2005,7 +2047,7 @@ export default {
         },
         failed: {
           title: "Échec de la restauration du cycle",
-          description: "Le cycle n'a pas pu être restauré. Veuillez réessayer.",
+          description: "Le cycle n’a pas pu être restauré. Veuillez réessayer.",
         },
       },
       favorite: {
@@ -2015,7 +2057,7 @@ export default {
           title: "Succès !",
         },
         failed: {
-          description: "Impossible d'ajouter le cycle aux favoris. Veuillez réessayer.",
+          description: "Impossible d’ajouter le cycle aux favoris. Veuillez réessayer.",
           title: "Erreur !",
         },
       },
@@ -2073,12 +2115,12 @@ export default {
       completed_no_issues: {
         title: "Aucun élément de travail dans le cycle",
         description:
-          "Aucun élément de travail dans le cycle. Les éléments sont soit transférés soit masqués. Pour voir les éléments masqués s'il y en a, mettez à jour vos propriétés d'affichage en conséquence.",
+          "Aucun élément de travail dans le cycle. Les éléments sont soit transférés soit masqués. Pour voir les éléments masqués s’il y en a, mettez à jour vos propriétés d’affichage en conséquence.",
       },
       active: {
         title: "Aucun cycle actif",
         description:
-          "Un cycle actif inclut toute période qui englobe la date d'aujourd'hui dans sa plage. Trouvez ici la progression et les détails du cycle actif.",
+          "Un cycle actif inclut toute période qui englobe la date d’aujourd’hui dans sa plage. Trouvez ici la progression et les détails du cycle actif.",
       },
       archived: {
         title: "Aucun cycle archivé pour le moment",
@@ -2089,7 +2131,7 @@ export default {
   project_issues: {
     empty_state: {
       no_issues: {
-        title: "Créez un élément de travail et assignez-le à quelqu'un, même à vous-même",
+        title: "Créez un élément de travail et assignez-le à quelqu’un, même à vous-même",
         description:
           "Pensez aux éléments de travail comme des tâches, du travail, ou des JTBD (Jobs To Be Done). Un élément de travail et ses sous-éléments sont généralement des actions temporelles assignées aux membres de votre équipe. Votre équipe crée, assigne et complète des éléments de travail pour faire progresser votre projet vers son objectif.",
         primary_button: {
@@ -2097,7 +2139,7 @@ export default {
           comic: {
             title: "Les éléments de travail sont les blocs de construction dans Plane.",
             description:
-              "Refondre l'interface de Plane, Renouveler l'image de marque de l'entreprise, ou Lancer le nouveau système d'injection de carburant sont des exemples d'éléments de travail qui ont probablement des sous-éléments.",
+              "Refondre l’interface de Plane, Renouveler l’image de marque de l’entreprise, ou Lancer le nouveau système d’injection de carburant sont des exemples d’éléments de travail qui ont probablement des sous-éléments.",
           },
         },
       },
@@ -2106,7 +2148,7 @@ export default {
         description:
           "Manuellement ou par automatisation, vous pouvez archiver les éléments de travail terminés ou annulés. Retrouvez-les ici une fois archivés.",
         primary_button: {
-          text: "Configurer l'automatisation",
+          text: "Configurer l’automatisation",
         },
       },
       issues_empty_filter: {
@@ -2128,13 +2170,13 @@ export default {
       general: {
         title: "Associez vos jalons de projet aux Modules et suivez facilement le travail agrégé.",
         description:
-          "Un groupe d'éléments de travail qui appartiennent à un parent logique et hiérarchique forme un module. Considérez-les comme un moyen de suivre le travail par jalons de projet. Ils ont leurs propres périodes et délais ainsi que des analyses pour vous aider à voir à quel point vous êtes proche ou loin d'un jalon.",
+          "Un groupe d’éléments de travail qui appartiennent à un parent logique et hiérarchique forme un module. Considérez-les comme un moyen de suivre le travail par étapes clés du projet. Ils ont leurs propres périodes et délais ainsi que des analyses pour vous aider à voir à quel point vous êtes proche ou pas d’atteindre une étape clé.",
         primary_button: {
           text: "Construisez votre premier module",
           comic: {
-            title: "Les modules aident à regrouper le travail par hiérarchie.",
+            title: "Les modules aident à regrouper le travail par étapes clés.",
             description:
-              "Un module panier, un module châssis et un module entrepôt sont tous de bons exemples de ce regroupement.",
+              "Un module « panier », un module « châssis » et un module « entrepôt » sont tous de bons exemples de ce regroupement.",
           },
         },
       },
@@ -2154,7 +2196,7 @@ export default {
           "Pour organiser votre projet, archivez les modules terminés ou annulés. Retrouvez-les ici une fois archivés.",
       },
       sidebar: {
-        in_active: "Ce module n'est pas encore actif.",
+        in_active: "Ce module n’est pas encore actif.",
         invalid_date: "Date invalide. Veuillez entrer une date valide.",
       },
     },
@@ -2178,13 +2220,12 @@ export default {
       general: {
         title: "Enregistrez des vues filtrées pour votre projet. Créez-en autant que nécessaire",
         description:
-          "Les vues sont un ensemble de filtres enregistrés que vous utilisez fréquemment ou auxquels vous souhaitez avoir un accès facile. Tous vos collègues dans un projet peuvent voir les vues de chacun et choisir celle qui convient le mieux à leurs besoins.",
+          "Les vues sont un ensemble de filtres enregistrés que vous utilisez fréquemment ou auxquels vous souhaitez avoir un accès facile. Tous les acteurs d’un projet peuvent voir les vues de chacun et choisir celle qui convient le mieux à leurs besoins.",
         primary_button: {
           text: "Créez votre première vue",
           comic: {
             title: "Les vues fonctionnent sur les propriétés des éléments de travail.",
-            description:
-              "Vous pouvez créer une vue ici avec autant de propriétés comme filtres que vous le jugez approprié.",
+            description: "Vous pouvez créer une vue ici avec autant de propriétés comme filtres que souhaité.",
           },
         },
       },
@@ -2196,23 +2237,24 @@ export default {
     delete_view: {
       title: "Êtes-vous sûr de vouloir supprimer cette vue ?",
       content:
-        "Si vous confirmez, toutes les options de tri, de filtrage et d'affichage + la mise en page que vous avez choisie pour cette vue seront définitivement supprimées sans possibilité de les restaurer.",
+        "Si vous confirmez, toutes les options de tri, de filtrage et d’affichage et la mise en page que vous avez choisie pour cette vue seront définitivement supprimées sans possibilité de les restaurer.",
     },
   },
   project_page: {
     empty_state: {
       general: {
         title:
-          "Rédigez une note, un document ou une base de connaissances complète. Obtenez l'aide de Galileo, l'assistant IA de Plane, pour commencer",
+          "Rédigez une note, un document ou une base de connaissances complète. Obtenez l’aide de Galileo, l’assistant IA de Plane, pour commencer",
         description:
-          "Les Pages sont un espace de réflexion dans Plane. Prenez des notes de réunion, formatez-les facilement, intégrez des éléments de travail, disposez-les à l'aide d'une bibliothèque de composants, et gardez-les tous dans le contexte de votre projet. Pour faciliter la rédaction de tout document, faites appel à Galileo, l'IA de Plane, avec un raccourci ou un clic sur un bouton.",
+          "Les Pages sont un espace de réflexion dans Plane. Prenez des notes de réunion, formatez-les facilement, intégrez des éléments de travail, disposez-les à l’aide d’une bibliothèque de composants, et gardez-les tous dans le contexte de votre projet. Pour faciliter la rédaction de tout document, faites appel à Galileo, l’IA de Plane, avec un raccourci ou un clic sur un bouton.",
         primary_button: {
           text: "Créez votre première page",
         },
       },
       private: {
         title: "Pas encore de pages privées",
-        description: "Gardez vos pensées privées ici. Quand vous serez prêt à partager, l'équipe n'est qu'à un clic.",
+        description:
+          "Ici vos écrits sont personnels et privés. Quand vous serez prêt à les partager, l'équipe n’est qu’à un clic.",
         primary_button: {
           text: "Créez votre première page",
         },
@@ -2318,13 +2360,13 @@ export default {
         title: "Ajoutez des éléments de travail au cycle pour voir sa progression",
       },
       chart: {
-        title: "Ajoutez des éléments de travail au cycle pour voir le graphique d'avancement.",
+        title: "Ajoutez des éléments de travail au cycle pour voir le graphique d’avancement.",
       },
       priority_issue: {
-        title: "Observez en un coup d'œil les éléments de travail prioritaires traités dans le cycle.",
+        title: "Visualisez en un coup d’œil les éléments de travail prioritaires traités dans le cycle.",
       },
       assignee: {
-        title: "Ajoutez des assignés aux éléments de travail pour voir une répartition du travail par assigné.",
+        title: "Ajoutez des acteurs aux éléments de travail pour voir une répartition du travail par acteur.",
       },
       label: {
         title: "Ajoutez des étiquettes aux éléments de travail pour voir la répartition du travail par étiquette.",
@@ -2334,9 +2376,9 @@ export default {
   disabled_project: {
     empty_state: {
       inbox: {
-        title: "L'Intake n'est pas activé pour le projet.",
+        title: "L’Intake n’est pas activé pour le projet.",
         description:
-          "L'Intake vous aide à gérer les demandes entrantes dans votre projet et à les ajouter comme éléments de travail dans votre flux. Activez l'Intake depuis les paramètres du projet pour gérer les demandes.",
+          "L’Intake vous aide à gérer les demandes entrantes dans votre projet et à les ajouter comme éléments de travail dans votre flux. Activez l’Intake depuis les paramètres du projet pour gérer les demandes.",
         primary_button: {
           text: "Gérer les fonctionnalités",
         },
@@ -2344,7 +2386,7 @@ export default {
       cycle: {
         title: "Les Cycles ne sont pas activés pour ce projet.",
         description:
-          "Découpez le travail en segments temporels, planifiez à rebours depuis la date limite de votre projet pour définir les dates, et progressez concrètement en équipe. Activez la fonctionnalité Cycles pour votre projet pour commencer à les utiliser.",
+          "Découpez le travail en segments temporels, planifiez à rebours depuis la date d’échéance de votre projet pour définir les étapes, et progressez concrètement en équipe. Activez la fonctionnalité Cycles pour votre projet pour commencer à les utiliser.",
         primary_button: {
           text: "Gérer les fonctionnalités",
         },
@@ -2376,11 +2418,11 @@ export default {
     },
   },
   workspace_draft_issues: {
-    draft_an_issue: "Créer un brouillon d'élément de travail",
+    draft_an_issue: "Créer un brouillon d’élément de travail",
     empty_state: {
       title: "Les éléments de travail partiellement rédigés, et bientôt les commentaires, apparaîtront ici.",
       description:
-        "Pour essayer cela, commencez à ajouter un élément de travail et laissez-le à mi-chemin ou créez votre premier brouillon ci-dessous. 😉",
+        "Pour essayer, commencez à ajouter un élément de travail et laissez-le à mi-chemin ou créez votre premier brouillon ci-dessous. 😉",
       primary_button: {
         text: "Créez votre premier brouillon",
       },
@@ -2392,7 +2434,7 @@ export default {
     toasts: {
       created: {
         success: "Brouillon créé",
-        error: "L'élément de travail n'a pas pu être créé. Veuillez réessayer.",
+        error: "L’élément de travail n’a pas pu être créé. Veuillez réessayer.",
       },
       deleted: {
         success: "Brouillon supprimé",
@@ -2400,70 +2442,68 @@ export default {
     },
   },
   stickies: {
-    title: "Vos notes adhésives",
+    title: "Vos post-it",
     placeholder: "cliquez pour écrire ici",
-    all: "Toutes les notes adhésives",
-    "no-data":
-      "Notez une idée, capturez une révélation ou enregistrez une inspiration. Ajoutez une note adhésive pour commencer.",
-    add: "Ajouter une note adhésive",
+    all: "Toutes les post-it",
+    "no-data": "Notez une idée, saisissez une intuition ou captez une inspiration. Ajoutez un post-it pour commencer.",
+    add: "Ajouter un post-it",
     search_placeholder: "Rechercher par titre",
-    delete: "Supprimer la note adhésive",
-    delete_confirmation: "Êtes-vous sûr de vouloir supprimer cette note adhésive ?",
+    delete: "Supprimer le post-it",
+    delete_confirmation: "Êtes-vous sûr de vouloir supprimer ce post-it ?",
     empty_state: {
-      simple:
-        "Notez une idée, capturez une révélation ou enregistrez une inspiration. Ajoutez une note adhésive pour commencer.",
+      simple: "Notez une idée, saisissez une intuition ou captez une inspiration. Ajoutez un post-it pour commencer.",
       general: {
-        title: "Les notes adhésives sont des notes rapides et des tâches que vous prenez à la volée.",
+        title: "Les post-it sont des notes rapides et des tâches que vous prenez à la volée.",
         description:
-          "Capturez vos pensées et idées facilement en créant des notes adhésives que vous pouvez consulter à tout moment et de n'importe où.",
+          "Capturez vos pensées et idées facilement en créant des post-it que vous pouvez consulter à tout moment et de n’importe où.",
         primary_button: {
-          text: "Ajouter une note adhésive",
+          text: "Ajouter un post-it",
         },
       },
       search: {
-        title: "Cela ne correspond à aucune de vos notes adhésives.",
+        title: "Cela ne correspond à aucun de vos post-it.",
         description:
           "Essayez un terme différent ou faites-nous savoir\nsi vous êtes sûr que votre recherche est correcte.",
         primary_button: {
-          text: "Ajouter une note adhésive",
+          text: "Ajouter un post-it",
         },
       },
     },
     toasts: {
       errors: {
-        wrong_name: "Le nom de la note adhésive ne peut pas dépasser 100 caractères.",
-        already_exists: "Il existe déjà une note adhésive sans description",
+        wrong_name: "Le nom du post-it ne peut pas dépasser 100 caractères.",
+        already_exists: "Il existe déjà un post-it sans description",
       },
       created: {
-        title: "Note adhésive créée",
-        message: "La note adhésive a été créée avec succès",
+        title: "Post-it créé",
+        message: "Le post-it a été créé avec succès",
       },
       not_created: {
-        title: "Note adhésive non créée",
-        message: "La note adhésive n'a pas pu être créée",
+        title: "Post-it non créé",
+        message: "Le post-it n’a pas pu être créé",
       },
       updated: {
-        title: "Note adhésive mise à jour",
-        message: "La note adhésive a été mise à jour avec succès",
+        title: "Post-it mis à jour",
+        message: "Le post-it a été mis à jour avec succès",
       },
       not_updated: {
-        title: "Note adhésive non mise à jour",
-        message: "La note adhésive n'a pas pu être mise à jour",
+        title: "Post-it non mis à jour",
+        message: "Le post-it n’a pas pu être mis à jour",
       },
       removed: {
-        title: "Note adhésive supprimée",
-        message: "La note adhésive a été supprimée avec succès",
+        title: "Post-it supprimé",
+        message: "Le post-it a été supprimé avec succès",
       },
       not_removed: {
-        title: "Note adhésive non supprimée",
-        message: "La note adhésive n'a pas pu être supprimée",
+        title: "Post-it non supprimé",
+        message: "Le post-it n’a pas pu être supprimé",
       },
     },
   },
   role_details: {
     guest: {
       title: "Invité",
-      description: "Les membres externes des organisations peuvent être invités en tant qu'invités.",
+      description: "Les membres externes des organisations peuvent être invités en tant qu’invités.",
     },
     member: {
       title: "Membre",
@@ -2471,7 +2511,7 @@ export default {
     },
     admin: {
       title: "Administrateur",
-      description: "Toutes les permissions sont activées dans l'espace de travail.",
+      description: "Toutes les permissions sont activées dans l’espace de travail.",
     },
   },
   user_roles: {
@@ -2563,8 +2603,8 @@ export default {
     order_by: {
       name: "Nom",
       progress: "Progression",
-      issues: "Nombre d'éléments de travail",
-      due_date: "Date d'échéance",
+      issues: "Nombre d’éléments de travail",
+      due_date: "Date d’échéance",
       created_at: "Date de création",
       manual: "Manuel",
     },
@@ -2584,7 +2624,7 @@ export default {
   },
   self_hosted_maintenance_message: {
     plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start:
-      "Plane n&apos;a pas démarré. Cela pourrait être dû au fait qu&apos;un ou plusieurs services Plane ont échoué à démarrer.",
+      "Plane n’a pas démarré. Cela pourrait être dû au fait qu’un ou plusieurs services Plane ont échoué à démarrer.",
     choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure:
       "Choisissez View Logs depuis setup.sh et les logs Docker pour en être sûr.",
   },
diff --git a/packages/i18n/src/locales/id/empty-state.ts b/packages/i18n/src/locales/id/empty-state.ts
index 8224ec78e5..4cdd36c99a 100644
--- a/packages/i18n/src/locales/id/empty-state.ts
+++ b/packages/i18n/src/locales/id/empty-state.ts
@@ -25,6 +25,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "Sepertinya Anda tidak memiliki akses ke Proyek ini",
+      restricted_description: "Hubungi admin untuk meminta akses agar Anda dapat melanjutkan di sini.",
+      join_description: "Klik tombol di bawah ini untuk bergabung.",
+      cta_primary: "Bergabung dengan proyek",
+      cta_loading: "Sedang bergabung dengan proyek",
+    },
+    invalid_project: {
+      title: "Proyek tidak ditemukan",
+      description: "Proyek yang Anda cari tidak ada.",
+    },
     work_items: {
       title: "Mulai dengan item kerja pertama Anda.",
       description:
@@ -181,5 +192,10 @@ export default {
         "Hasilkan token API yang aman untuk menghubungkan ruang kerja Anda dengan sistem dan aplikasi eksternal.",
       cta_primary: "Tambahkan token API",
     },
+    webhooks: {
+      title: "Belum ada Webhook yang ditambahkan",
+      description: "Otomatisasi notifikasi ke layanan eksternal ketika peristiwa proyek terjadi.",
+      cta_primary: "Tambahkan webhook",
+    },
   },
 } as const;
diff --git a/packages/i18n/src/locales/id/translations.ts b/packages/i18n/src/locales/id/translations.ts
index 7a6768845d..f49d4e8d25 100644
--- a/packages/i18n/src/locales/id/translations.ts
+++ b/packages/i18n/src/locales/id/translations.ts
@@ -74,7 +74,7 @@ export default {
       },
       unique_code: {
         label: "Kode unik",
-        placeholder: "gets-sets-flys",
+        placeholder: "123456",
         paste_code: "Tempelkan kode yang dikirim ke email anda",
         requesting_new_code: "Meminta kode baru",
         sending_code: "Mengirim kode",
@@ -340,13 +340,13 @@ export default {
   project_id_must_be_at_most_5_characters: "ID proyek maksimal 5 karakter",
   project_id: "ID proyek",
   project_id_tooltip_content:
-    "Membantu Anda mengidentifikasi item kerja dalam proyek secara unik. Maksimal 5 karakter.",
+    "Membantu Anda mengidentifikasi item kerja dalam proyek secara unik. Maksimal 10 karakter.",
   description_placeholder: "Deskripsi",
   only_alphanumeric_non_latin_characters_allowed: "Hanya karakter alfanumerik & Non-latin yang diizinkan.",
   project_id_is_required: "ID proyek diperlukan",
   project_id_allowed_char: "Hanya karakter alfanumerik & Non-latin yang diizinkan.",
   project_id_min_char: "ID proyek harus minimal 1 karakter",
-  project_id_max_char: "ID proyek maksimal 5 karakter",
+  project_id_max_char: "ID proyek maksimal 10 karakter",
   project_description_placeholder: "Masukkan deskripsi proyek",
   select_network: "Pilih jaringan",
   lead: "Pemimpin",
@@ -1530,6 +1530,47 @@ export default {
         "Jika Anda mengonfirmasi, semua opsi pengurutan, filter, dan tampilan + tata letak yang telah Anda pilih untuk tampilan ini akan dihapus secara permanen tanpa cara untuk memulihkannya.",
     },
   },
+  account_settings: {
+    profile: {
+      change_email_modal: {
+        title: "Ubah email",
+        description: "Masukkan alamat email baru untuk menerima tautan verifikasi.",
+        toasts: {
+          success_title: "Berhasil!",
+          success_message: "Email berhasil diperbarui. Silakan masuk kembali.",
+        },
+        form: {
+          email: {
+            label: "Email baru",
+            placeholder: "Masukkan email Anda",
+            errors: {
+              required: "Email wajib diisi",
+              invalid: "Email tidak valid",
+              exists: "Email sudah ada. Gunakan yang lain.",
+              validation_failed: "Validasi email gagal. Coba lagi.",
+            },
+          },
+          code: {
+            label: "Kode unik",
+            placeholder: "123456",
+            helper_text: "Kode verifikasi dikirim ke email baru Anda.",
+            errors: {
+              required: "Kode unik wajib diisi",
+              invalid: "Kode verifikasi tidak valid. Coba lagi.",
+            },
+          },
+        },
+        actions: {
+          continue: "Lanjutkan",
+          confirm: "Konfirmasi",
+          cancel: "Batal",
+        },
+        states: {
+          sending: "Mengirim…",
+        },
+      },
+    },
+  },
   workspace_settings: {
     label: "Pengaturan ruang kerja",
     page_label: "{workspace} - Pengaturan Umum",
@@ -1545,6 +1586,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:
diff --git a/packages/i18n/src/locales/it/empty-state.ts b/packages/i18n/src/locales/it/empty-state.ts
index 279241ebb7..0e5e458a9b 100644
--- a/packages/i18n/src/locales/it/empty-state.ts
+++ b/packages/i18n/src/locales/it/empty-state.ts
@@ -27,6 +27,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "Sembra che tu non abbia accesso a questo progetto",
+      restricted_description: "Contatta l'amministratore per richiedere l'accesso e potrai continuare qui.",
+      join_description: "Clicca sul pulsante qui sotto per unirti.",
+      cta_primary: "Unisciti al progetto",
+      cta_loading: "Unione al progetto in corso",
+    },
+    invalid_project: {
+      title: "Progetto non trovato",
+      description: "Il progetto che stai cercando non esiste.",
+    },
     work_items: {
       title: "Inizia con il tuo primo elemento di lavoro.",
       description:
@@ -181,5 +192,10 @@ export default {
       description: "Genera token API sicuri per connettere il tuo workspace con sistemi e applicazioni esterne.",
       cta_primary: "Aggiungi token API",
     },
+    webhooks: {
+      title: "Nessun Webhook aggiunto ancora",
+      description: "Automatizza le notifiche a servizi esterni quando si verificano eventi del progetto.",
+      cta_primary: "Aggiungi webhook",
+    },
   },
 } as const;
diff --git a/packages/i18n/src/locales/it/translations.ts b/packages/i18n/src/locales/it/translations.ts
index e8fb3945b8..0506e30693 100644
--- a/packages/i18n/src/locales/it/translations.ts
+++ b/packages/i18n/src/locales/it/translations.ts
@@ -74,7 +74,7 @@ export default {
       },
       unique_code: {
         label: "Codice unico",
-        placeholder: "gets-sets-flys",
+        placeholder: "123456",
         paste_code: "Incolla il codice inviato alla tua email",
         requesting_new_code: "Richiesta di nuovo codice",
         sending_code: "Invio codice",
@@ -340,13 +340,13 @@ export default {
   project_id_must_be_at_most_5_characters: "L'ID del progetto deve contenere al massimo 5 caratteri",
   project_id: "ID del progetto",
   project_id_tooltip_content:
-    "Ti aiuta a identificare in modo univoco gli elementi di lavoro nel progetto. Massimo 5 caratteri.",
+    "Ti aiuta a identificare in modo univoco gli elementi di lavoro nel progetto. Massimo 10 caratteri.",
   description_placeholder: "Descrizione",
   only_alphanumeric_non_latin_characters_allowed: "Sono ammessi solo caratteri alfanumerici e non latini.",
   project_id_is_required: "L'ID del progetto è obbligatorio",
   project_id_allowed_char: "Sono ammessi solo caratteri alfanumerici e non latini.",
   project_id_min_char: "L'ID del progetto deve contenere almeno 1 carattere",
-  project_id_max_char: "L'ID del progetto deve contenere al massimo 5 caratteri",
+  project_id_max_char: "L'ID del progetto deve contenere al massimo 10 caratteri",
   project_description_placeholder: "Inserisci la descrizione del progetto",
   select_network: "Seleziona rete",
   lead: "Responsabile",
@@ -1534,6 +1534,47 @@ export default {
         "Se confermi, tutte le opzioni di ordinamento, filtro e visualizzazione + il layout che hai scelto per questa visualizzazione saranno eliminate permanentemente senza possibilità di ripristinarle.",
     },
   },
+  account_settings: {
+    profile: {
+      change_email_modal: {
+        title: "Cambia email",
+        description: "Inserisci un nuovo indirizzo email per ricevere un link di verifica.",
+        toasts: {
+          success_title: "Successo!",
+          success_message: "Email aggiornata con successo. Accedi di nuovo.",
+        },
+        form: {
+          email: {
+            label: "Nuova email",
+            placeholder: "Inserisci la tua email",
+            errors: {
+              required: "L’email è obbligatoria",
+              invalid: "L’email non è valida",
+              exists: "L’email esiste già. Usane un’altra.",
+              validation_failed: "La verifica dell’email non è riuscita. Riprova.",
+            },
+          },
+          code: {
+            label: "Codice univoco",
+            placeholder: "123456",
+            helper_text: "Codice di verifica inviato alla tua nuova email.",
+            errors: {
+              required: "Il codice univoco è obbligatorio",
+              invalid: "Codice di verifica non valido. Riprova.",
+            },
+          },
+        },
+        actions: {
+          continue: "Continua",
+          confirm: "Conferma",
+          cancel: "Annulla",
+        },
+        states: {
+          sending: "Invio…",
+        },
+      },
+    },
+  },
   workspace_settings: {
     label: "Impostazioni dello spazio di lavoro",
     page_label: "{workspace} - Impostazioni generali",
@@ -1549,6 +1590,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:
diff --git a/packages/i18n/src/locales/ja/empty-state.ts b/packages/i18n/src/locales/ja/empty-state.ts
index 6463c5ccff..a5be665bcd 100644
--- a/packages/i18n/src/locales/ja/empty-state.ts
+++ b/packages/i18n/src/locales/ja/empty-state.ts
@@ -24,6 +24,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "このプロジェクトへのアクセス権がないようです",
+      restricted_description: "管理者に連絡してアクセス権をリクエストすると、ここで作業を続けられます。",
+      join_description: "下のボタンをクリックして参加してください。",
+      cta_primary: "プロジェクトに参加",
+      cta_loading: "プロジェクトに参加中",
+    },
+    invalid_project: {
+      title: "プロジェクトが見つかりません",
+      description: "お探しのプロジェクトは存在しません。",
+    },
     work_items: {
       title: "最初の作業項目から始めましょう。",
       description:
@@ -171,5 +182,10 @@ export default {
       description: "ワークスペースを外部システムおよびアプリケーションと接続するための安全なAPIトークンを生成します。",
       cta_primary: "APIトークンを追加",
     },
+    webhooks: {
+      title: "まだWebhookが追加されていません",
+      description: "プロジェクトイベントが発生したときに外部サービスへの通知を自動化します。",
+      cta_primary: "Webhookを追加",
+    },
   },
 } as const;
diff --git a/packages/i18n/src/locales/ja/translations.ts b/packages/i18n/src/locales/ja/translations.ts
index 198ea97d2d..80ae283c79 100644
--- a/packages/i18n/src/locales/ja/translations.ts
+++ b/packages/i18n/src/locales/ja/translations.ts
@@ -74,7 +74,7 @@ export default {
       },
       unique_code: {
         label: "ユニークコード",
-        placeholder: "gets-sets-flys",
+        placeholder: "123456",
         paste_code: "メールで送信されたコードを貼り付けてください",
         requesting_new_code: "新しいコードをリクエスト中",
         sending_code: "コードを送信中",
@@ -335,13 +335,13 @@ export default {
   project_id_must_be_at_least_1_character: "プロジェクトIDは最低1文字必要です",
   project_id_must_be_at_most_5_characters: "プロジェクトIDは最大5文字までです",
   project_id: "プロジェクトID",
-  project_id_tooltip_content: "プロジェクト内の作業項目を一意に識別するのに役立ちます。最大5文字。",
+  project_id_tooltip_content: "プロジェクト内の作業項目を一意に識別するのに役立ちます。最大10文字。",
   description_placeholder: "説明",
   only_alphanumeric_non_latin_characters_allowed: "英数字と非ラテン文字のみ使用できます。",
   project_id_is_required: "プロジェクトIDは必須です",
   project_id_allowed_char: "英数字と非ラテン文字のみ使用できます。",
   project_id_min_char: "プロジェクトIDは最低1文字必要です",
-  project_id_max_char: "プロジェクトIDは最大5文字までです",
+  project_id_max_char: "プロジェクトIDは最大10文字までです",
   project_description_placeholder: "プロジェクトの説明を入力",
   select_network: "ネットワークを選択",
   lead: "リード",
@@ -1521,6 +1521,47 @@ export default {
         "確認すると、このビューに選択したすべてのソート、フィルター、表示オプション + レイアウトが復元不可能な形で完全に削除されます。",
     },
   },
+  account_settings: {
+    profile: {
+      change_email_modal: {
+        title: "メールアドレスを変更",
+        description: "確認リンクを受け取るには、新しいメールアドレスを入力してください。",
+        toasts: {
+          success_title: "成功",
+          success_message: "メールアドレスを更新しました。再度サインインしてください。",
+        },
+        form: {
+          email: {
+            label: "新しいメールアドレス",
+            placeholder: "メールアドレスを入力",
+            errors: {
+              required: "メールアドレスは必須です",
+              invalid: "メールアドレスが無効です",
+              exists: "メールアドレスは既に存在します。別のものを使用してください。",
+              validation_failed: "メールアドレスの確認に失敗しました。もう一度お試しください。",
+            },
+          },
+          code: {
+            label: "認証コード",
+            placeholder: "123456",
+            helper_text: "認証コードを新しいメールに送信しました。",
+            errors: {
+              required: "認証コードは必須です",
+              invalid: "認証コードが無効です。もう一度お試しください。",
+            },
+          },
+        },
+        actions: {
+          continue: "続行",
+          confirm: "確認",
+          cancel: "キャンセル",
+        },
+        states: {
+          sending: "送信中…",
+        },
+      },
+    },
+  },
   workspace_settings: {
     label: "ワークスペース設定",
     page_label: "{workspace} - 一般設定",
@@ -1536,6 +1577,7 @@ export default {
         name: "ワークスペース名",
         company_size: "会社の規模",
         url: "ワークスペースURL",
+        workspace_timezone: "ワークスペースのタイムゾーン",
         update_workspace: "ワークスペースを更新",
         delete_workspace: "このワークスペースを削除",
         delete_workspace_description:
diff --git a/packages/i18n/src/locales/ko/empty-state.ts b/packages/i18n/src/locales/ko/empty-state.ts
index 093091f653..80b62d1e0f 100644
--- a/packages/i18n/src/locales/ko/empty-state.ts
+++ b/packages/i18n/src/locales/ko/empty-state.ts
@@ -24,6 +24,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "이 프로젝트에 접근할 수 없는 것 같습니다",
+      restricted_description: "관리자에게 접근 권한을 요청하시면 여기서 계속 진행하실 수 있습니다.",
+      join_description: "아래 버튼을 클릭하여 프로젝트에 참여하세요.",
+      cta_primary: "프로젝트 참여",
+      cta_loading: "프로젝트 참여 중",
+    },
+    invalid_project: {
+      title: "프로젝트를 찾을 수 없습니다",
+      description: "찾으시는 프로젝트가 존재하지 않습니다.",
+    },
     work_items: {
       title: "첫 번째 작업 항목으로 시작하세요.",
       description:
@@ -170,5 +181,10 @@ export default {
       description: "작업 공간을 외부 시스템 및 애플리케이션과 연결하기 위한 보안 API 토큰을 생성하세요.",
       cta_primary: "API 토큰 추가",
     },
+    webhooks: {
+      title: "아직 웹훅이 추가되지 않았습니다",
+      description: "프로젝트 이벤트가 발생할 때 외부 서비스에 대한 알림을 자동화하세요.",
+      cta_primary: "웹훅 추가",
+    },
   },
 } as const;
diff --git a/packages/i18n/src/locales/ko/translations.ts b/packages/i18n/src/locales/ko/translations.ts
index 6444c04396..11b6fa1c34 100644
--- a/packages/i18n/src/locales/ko/translations.ts
+++ b/packages/i18n/src/locales/ko/translations.ts
@@ -74,7 +74,7 @@ export default {
       },
       unique_code: {
         label: "고유 코드",
-        placeholder: "gets-sets-flys",
+        placeholder: "123456",
         paste_code: "이메일로 전송된 코드를 붙여넣기",
         requesting_new_code: "새 코드 요청 중",
         sending_code: "코드 전송 중",
@@ -332,13 +332,13 @@ export default {
   project_id_must_be_at_least_1_character: "프로젝트 ID는 최소 1자 이상이어야 합니다",
   project_id_must_be_at_most_5_characters: "프로젝트 ID는 최대 5자 이하여야 합니다",
   project_id: "프로젝트 ID",
-  project_id_tooltip_content: "작업 항목을 고유하게 식별하는 데 도움이 됩니다. 최대 5자.",
+  project_id_tooltip_content: "작업 항목을 고유하게 식별하는 데 도움이 됩니다. 최대 10자.",
   description_placeholder: "설명",
   only_alphanumeric_non_latin_characters_allowed: "영숫자 및 비라틴 문자만 허용됩니다.",
   project_id_is_required: "프로젝트 ID가 필요합니다",
   project_id_allowed_char: "영숫자 및 비라틴 문자만 허용됩니다.",
   project_id_min_char: "프로젝트 ID는 최소 1자 이상이어야 합니다",
-  project_id_max_char: "프로젝트 ID는 최대 5자 이하여야 합니다",
+  project_id_max_char: "프로젝트 ID는 최대 10자 이하여야 합니다",
   project_description_placeholder: "프로젝트 설명 입력",
   select_network: "네트워크 선택",
   lead: "리드",
@@ -1514,6 +1514,47 @@ export default {
         "확인하면 이 뷰에 대해 선택한 모든 정렬, 필터 및 표시 옵션 + 레이아웃이 복원할 수 없는 방식으로 영구적으로 삭제됩니다.",
     },
   },
+  account_settings: {
+    profile: {
+      change_email_modal: {
+        title: "이메일 변경",
+        description: "확인 링크를 받으려면 새 이메일 주소를 입력하세요.",
+        toasts: {
+          success_title: "성공!",
+          success_message: "이메일이 업데이트되었습니다. 다시 로그인하세요.",
+        },
+        form: {
+          email: {
+            label: "새 이메일",
+            placeholder: "이메일을 입력하세요",
+            errors: {
+              required: "이메일은 필수입니다",
+              invalid: "유효하지 않은 이메일입니다",
+              exists: "이미 존재하는 이메일입니다. 다른 주소를 사용하세요.",
+              validation_failed: "이메일 확인에 실패했습니다. 다시 시도하세요.",
+            },
+          },
+          code: {
+            label: "고유 코드",
+            placeholder: "123456",
+            helper_text: "인증 코드가 새 이메일로 전송되었습니다.",
+            errors: {
+              required: "고유 코드는 필수입니다",
+              invalid: "잘못된 인증 코드입니다. 다시 시도하세요.",
+            },
+          },
+        },
+        actions: {
+          continue: "계속",
+          confirm: "확인",
+          cancel: "취소",
+        },
+        states: {
+          sending: "전송 중…",
+        },
+      },
+    },
+  },
   workspace_settings: {
     label: "작업 공간 설정",
     page_label: "{workspace} - 일반 설정",
@@ -1529,6 +1570,7 @@ export default {
         name: "작업 공간 이름",
         company_size: "회사 규모",
         url: "작업 공간 URL",
+        workspace_timezone: "작업 공간 시간대",
         update_workspace: "작업 공간 업데이트",
         delete_workspace: "이 작업 공간 삭제",
         delete_workspace_description:
diff --git a/packages/i18n/src/locales/pl/empty-state.ts b/packages/i18n/src/locales/pl/empty-state.ts
index 30fc30a6ab..79951dedd0 100644
--- a/packages/i18n/src/locales/pl/empty-state.ts
+++ b/packages/i18n/src/locales/pl/empty-state.ts
@@ -24,6 +24,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "Wygląda na to, że nie masz dostępu do tego projektu",
+      restricted_description: "Skontaktuj się z administratorem, aby poprosić o dostęp i móc kontynuować tutaj.",
+      join_description: "Kliknij przycisk poniżej, aby dołączyć.",
+      cta_primary: "Dołącz do projektu",
+      cta_loading: "Dołączanie do projektu",
+    },
+    invalid_project: {
+      title: "Projekt nie został znaleziony",
+      description: "Projekt, którego szukasz, nie istnieje.",
+    },
     work_items: {
       title: "Zacznij od swojego pierwszego elementu roboczego.",
       description:
@@ -182,5 +193,10 @@ export default {
         "Generuj bezpieczne tokeny API, aby połączyć swój obszar roboczy z zewnętrznymi systemami i aplikacjami.",
       cta_primary: "Dodaj token API",
     },
+    webhooks: {
+      title: "Nie dodano jeszcze webhooka",
+      description: "Automatyzuj powiadomienia do usług zewnętrznych, gdy wystąpią zdarzenia projektowe.",
+      cta_primary: "Dodaj webhook",
+    },
   },
 } as const;
diff --git a/packages/i18n/src/locales/pl/translations.ts b/packages/i18n/src/locales/pl/translations.ts
index 28d61b6588..be091cbcf5 100644
--- a/packages/i18n/src/locales/pl/translations.ts
+++ b/packages/i18n/src/locales/pl/translations.ts
@@ -74,7 +74,7 @@ export default {
       },
       unique_code: {
         label: "Unikalny kod",
-        placeholder: "gets-sets-flys",
+        placeholder: "123456",
         paste_code: "Wklej kod wysłany na Twój e-mail",
         requesting_new_code: "Żądanie nowego kodu",
         sending_code: "Wysyłanie kodu",
@@ -335,13 +335,13 @@ export default {
   project_id_must_be_at_least_1_character: "ID projektu musi mieć co najmniej 1 znak",
   project_id_must_be_at_most_5_characters: "ID projektu może mieć maksymalnie 5 znaków",
   project_id: "ID projektu",
-  project_id_tooltip_content: "Pomaga jednoznacznie identyfikować elementy pracy w projekcie. Max. 5 znaków.",
+  project_id_tooltip_content: "Pomaga jednoznacznie identyfikować elementy pracy w projekcie. Max. 10 znaków.",
   description_placeholder: "Opis",
   only_alphanumeric_non_latin_characters_allowed: "Dozwolone są tylko znaki alfanumeryczne i nielatynowskie.",
   project_id_is_required: "ID projektu jest wymagane",
   project_id_allowed_char: "Dozwolone są tylko znaki alfanumeryczne i nielatynowskie.",
   project_id_min_char: "ID projektu musi mieć co najmniej 1 znak",
-  project_id_max_char: "ID projektu może mieć maksymalnie 5 znaków",
+  project_id_max_char: "ID projektu może mieć maksymalnie 10 znaków",
   project_description_placeholder: "Wpisz opis projektu",
   select_network: "Wybierz sieć",
   lead: "Lead",
@@ -1525,6 +1525,47 @@ export default {
         "Jeśli potwierdzisz, wszystkie opcje sortowania, filtrowania i wyświetlania + układ, który wybrałeś dla tego widoku, zostaną trwale usunięte bez możliwości przywrócenia.",
     },
   },
+  account_settings: {
+    profile: {
+      change_email_modal: {
+        title: "Zmień e-mail",
+        description: "Wpisz nowy adres e-mail, aby otrzymać link weryfikacyjny.",
+        toasts: {
+          success_title: "Sukces!",
+          success_message: "E-mail zaktualizowano. Zaloguj się ponownie.",
+        },
+        form: {
+          email: {
+            label: "Nowy e-mail",
+            placeholder: "Wpisz swój e-mail",
+            errors: {
+              required: "E-mail jest wymagany",
+              invalid: "E-mail jest nieprawidłowy",
+              exists: "E-mail już istnieje. Użyj innego.",
+              validation_failed: "Weryfikacja e-maila nie powiodła się. Spróbuj ponownie.",
+            },
+          },
+          code: {
+            label: "Unikalny kod",
+            placeholder: "123456",
+            helper_text: "Kod weryfikacyjny wysłano na nowy e-mail.",
+            errors: {
+              required: "Unikalny kod jest wymagany",
+              invalid: "Nieprawidłowy kod weryfikacyjny. Spróbuj ponownie.",
+            },
+          },
+        },
+        actions: {
+          continue: "Kontynuuj",
+          confirm: "Potwierdź",
+          cancel: "Anuluj",
+        },
+        states: {
+          sending: "Wysyłanie…",
+        },
+      },
+    },
+  },
   workspace_settings: {
     label: "Ustawienia przestrzeni roboczej",
     page_label: "{workspace} - Ustawienia ogólne",
@@ -1540,6 +1581,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:
diff --git a/packages/i18n/src/locales/pt-BR/empty-state.ts b/packages/i18n/src/locales/pt-BR/empty-state.ts
index 8d92f4ff15..56712f10e2 100644
--- a/packages/i18n/src/locales/pt-BR/empty-state.ts
+++ b/packages/i18n/src/locales/pt-BR/empty-state.ts
@@ -26,6 +26,18 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "Parece que você não tem acesso a este projeto",
+      restricted_description:
+        "Entre em contato com o administrador para solicitar acesso e você poderá continuar aqui.",
+      join_description: "Clique no botão abaixo para participar.",
+      cta_primary: "Participar do projeto",
+      cta_loading: "Participando do projeto",
+    },
+    invalid_project: {
+      title: "Projeto não encontrado",
+      description: "O projeto que você está procurando não existe.",
+    },
     work_items: {
       title: "Comece com seu primeiro item de trabalho.",
       description:
@@ -181,5 +193,10 @@ export default {
         "Gere tokens de API seguros para conectar seu espaço de trabalho com sistemas e aplicativos externos.",
       cta_primary: "Adicionar token de API",
     },
+    webhooks: {
+      title: "Ainda não foi adicionado nenhum Webhook",
+      description: "Automatize notificações para serviços externos quando ocorrerem eventos do projeto.",
+      cta_primary: "Adicionar webhook",
+    },
   },
 } as const;
diff --git a/packages/i18n/src/locales/pt-BR/translations.ts b/packages/i18n/src/locales/pt-BR/translations.ts
index db7b81e281..d926cdbe18 100644
--- a/packages/i18n/src/locales/pt-BR/translations.ts
+++ b/packages/i18n/src/locales/pt-BR/translations.ts
@@ -74,7 +74,7 @@ export default {
       },
       unique_code: {
         label: "Código único",
-        placeholder: "gets-sets-flys",
+        placeholder: "123456",
         paste_code: "Cole o código enviado para seu email",
         requesting_new_code: "Solicitando novo código",
         sending_code: "Enviando código",
@@ -340,13 +340,13 @@ export default {
   project_id_must_be_at_most_5_characters: "O ID do projeto deve ter no máximo 5 caracteres",
   project_id: "ID do projeto",
   project_id_tooltip_content:
-    "Ajuda você a identificar itens de trabalho no projeto de forma exclusiva. Máximo de 5 caracteres.",
+    "Ajuda você a identificar itens de trabalho no projeto de forma exclusiva. Máximo de 10 caracteres.",
   description_placeholder: "Descrição",
   only_alphanumeric_non_latin_characters_allowed: "Apenas caracteres alfanuméricos e não latinos são permitidos.",
   project_id_is_required: "O ID do projeto é obrigatório",
   project_id_allowed_char: "Apenas caracteres alfanuméricos e não latinos são permitidos.",
   project_id_min_char: "O ID do projeto deve ter pelo menos 1 caractere",
-  project_id_max_char: "O ID do projeto deve ter no máximo 5 caracteres",
+  project_id_max_char: "O ID do projeto deve ter no máximo 10 caracteres",
   project_description_placeholder: "Insira a descrição do projeto",
   select_network: "Selecione a rede",
   lead: "Líder",
@@ -1542,6 +1542,47 @@ export default {
         "Se você confirmar, todas as opções de classificação, filtro e exibição + o layout que você escolheu para esta visualização serão excluídos permanentemente sem nenhuma maneira de restaurá-los.",
     },
   },
+  account_settings: {
+    profile: {
+      change_email_modal: {
+        title: "Alterar e-mail",
+        description: "Digite um novo endereço de e-mail para receber um link de verificação.",
+        toasts: {
+          success_title: "Sucesso!",
+          success_message: "E-mail atualizado com sucesso. Faça login novamente.",
+        },
+        form: {
+          email: {
+            label: "Novo e-mail",
+            placeholder: "Digite seu e-mail",
+            errors: {
+              required: "O e-mail é obrigatório",
+              invalid: "O e-mail é inválido",
+              exists: "O e-mail já existe. Use outro.",
+              validation_failed: "Falha na validação do e-mail. Tente novamente.",
+            },
+          },
+          code: {
+            label: "Código único",
+            placeholder: "123456",
+            helper_text: "Código de verificação enviado para o novo e-mail.",
+            errors: {
+              required: "O código único é obrigatório",
+              invalid: "Código de verificação inválido. Tente novamente.",
+            },
+          },
+        },
+        actions: {
+          continue: "Continuar",
+          confirm: "Confirmar",
+          cancel: "Cancelar",
+        },
+        states: {
+          sending: "Enviando…",
+        },
+      },
+    },
+  },
   workspace_settings: {
     label: "Configurações do espaço de trabalho",
     page_label: "{workspace} - Configurações gerais",
@@ -1557,6 +1598,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:
diff --git a/packages/i18n/src/locales/ro/empty-state.ts b/packages/i18n/src/locales/ro/empty-state.ts
index c123d82abb..539c0e2ac7 100644
--- a/packages/i18n/src/locales/ro/empty-state.ts
+++ b/packages/i18n/src/locales/ro/empty-state.ts
@@ -25,6 +25,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "Se pare că nu aveți acces la acest proiect",
+      restricted_description: "Contactați administratorul pentru a solicita accesul și veți putea continua aici.",
+      join_description: "Faceți clic pe butonul de mai jos pentru a vă alătura.",
+      cta_primary: "Alăturați-vă proiectului",
+      cta_loading: "Se alătură proiectului",
+    },
+    invalid_project: {
+      title: "Proiect negăsit",
+      description: "Proiectul pe care îl căutați nu există.",
+    },
     work_items: {
       title: "Începeți cu primul dvs. element de lucru.",
       description:
@@ -180,5 +191,10 @@ export default {
         "Generați token-uri API sigure pentru a conecta spațiul dvs. de lucru cu sisteme și aplicații externe.",
       cta_primary: "Adăugați token API",
     },
+    webhooks: {
+      title: "Încă nu s-a adăugat niciun Webhook",
+      description: "Automatizați notificările către servicii externe când apar evenimente ale proiectului.",
+      cta_primary: "Adăugați webhook",
+    },
   },
 } as const;
diff --git a/packages/i18n/src/locales/ro/translations.ts b/packages/i18n/src/locales/ro/translations.ts
index b44c139ef8..fc4f043024 100644
--- a/packages/i18n/src/locales/ro/translations.ts
+++ b/packages/i18n/src/locales/ro/translations.ts
@@ -338,13 +338,13 @@ export default {
   project_id_must_be_at_least_1_character: "ID-ul proiectului trebuie să conțină cel puțin 1 caracter",
   project_id_must_be_at_most_5_characters: "ID-ul proiectului trebuie să conțină cel mult 5 caractere",
   project_id: "ID-ul Proiectului",
-  project_id_tooltip_content: "Te ajută să identifici unic activitățile din proiect. Maxim 5 caractere.",
+  project_id_tooltip_content: "Te ajută să identifici unic activitățile din proiect. Maxim 10 caractere.",
   description_placeholder: "Descriere",
   only_alphanumeric_non_latin_characters_allowed: "Sunt permise doar caractere alfanumerice și non-latine.",
   project_id_is_required: "ID-ul proiectului este obligatoriu",
   project_id_allowed_char: "Sunt permise doar caractere alfanumerice și non-latine.",
   project_id_min_char: "ID-ul proiectului trebuie să aibă cel puțin 1 caracter",
-  project_id_max_char: "ID-ul proiectului trebuie să aibă cel mult 5 caractere",
+  project_id_max_char: "ID-ul proiectului trebuie să aibă cel mult 10 caractere",
   project_description_placeholder: "Introdu descrierea proiectului",
   select_network: "Selectează rețeaua",
   lead: "Lider",
@@ -1534,6 +1534,47 @@ export default {
         "Dacă confirmați, toate opțiunile de sortare, filtrare și afișare + aspectul pe care l-ați ales pentru această vizualizare vor fi șterse permanent fără nicio modalitate de a le restaura.",
     },
   },
+  account_settings: {
+    profile: {
+      change_email_modal: {
+        title: "Schimbă e-mailul",
+        description: "Introduceți o nouă adresă de e-mail pentru a primi un link de verificare.",
+        toasts: {
+          success_title: "Succes!",
+          success_message: "E-mail actualizat cu succes. Conectați-vă din nou.",
+        },
+        form: {
+          email: {
+            label: "E-mail nou",
+            placeholder: "Introduceți e-mailul",
+            errors: {
+              required: "E-mailul este obligatoriu",
+              invalid: "E-mailul este invalid",
+              exists: "E-mailul există deja. Folosiți altul.",
+              validation_failed: "Validarea e-mailului a eșuat. Încercați din nou.",
+            },
+          },
+          code: {
+            label: "Cod unic",
+            placeholder: "123456",
+            helper_text: "Codul de verificare a fost trimis la noul e-mail.",
+            errors: {
+              required: "Codul unic este obligatoriu",
+              invalid: "Cod de verificare invalid. Încercați din nou.",
+            },
+          },
+        },
+        actions: {
+          continue: "Continuă",
+          confirm: "Confirmă",
+          cancel: "Anulează",
+        },
+        states: {
+          sending: "Se trimite…",
+        },
+      },
+    },
+  },
   workspace_settings: {
     label: "Setări spațiu de lucru",
     page_label: "{workspace} - Setări generale",
@@ -1549,6 +1590,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:
diff --git a/packages/i18n/src/locales/ru/empty-state.ts b/packages/i18n/src/locales/ru/empty-state.ts
index eebe5d0328..52f1b00431 100644
--- a/packages/i18n/src/locales/ru/empty-state.ts
+++ b/packages/i18n/src/locales/ru/empty-state.ts
@@ -25,6 +25,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "Похоже, у вас нет доступа к этому проекту",
+      restricted_description: "Свяжитесь с администратором, чтобы запросить доступ, и вы сможете продолжить здесь.",
+      join_description: "Нажмите кнопку ниже, чтобы присоединиться.",
+      cta_primary: "Присоединиться к проекту",
+      cta_loading: "Присоединение к проекту",
+    },
+    invalid_project: {
+      title: "Проект не найден",
+      description: "Проект, который вы ищете, не существует.",
+    },
     work_items: {
       title: "Начните с вашего первого рабочего элемента.",
       description:
@@ -183,5 +194,10 @@ export default {
         "Генерируйте безопасные API-токены для подключения вашего рабочего пространства к внешним системам и приложениям.",
       cta_primary: "Добавить API-токен",
     },
+    webhooks: {
+      title: "Вебхуков пока не добавлено",
+      description: "Автоматизируйте уведомления внешних сервисов при возникновении событий проекта.",
+      cta_primary: "Добавить вебхук",
+    },
   },
 } as const;
diff --git a/packages/i18n/src/locales/ru/translations.ts b/packages/i18n/src/locales/ru/translations.ts
index 9ee03abf74..ae823d17fe 100644
--- a/packages/i18n/src/locales/ru/translations.ts
+++ b/packages/i18n/src/locales/ru/translations.ts
@@ -74,7 +74,7 @@ export default {
       },
       unique_code: {
         label: "Уникальный код",
-        placeholder: "gets-sets-flys",
+        placeholder: "123456",
         paste_code: "Вставьте код, отправленный на ваш email",
         requesting_new_code: "Запрос нового кода",
         sending_code: "Отправка кода",
@@ -335,13 +335,13 @@ export default {
   project_id_must_be_at_least_1_character: "ID проекта должен содержать минимум 1 символ",
   project_id_must_be_at_most_5_characters: "ID проекта должен содержать максимум 5 символов",
   project_id: "ID проекта",
-  project_id_tooltip_content: "Помогает идентифицировать рабочие элементы в проекте. Макс. 5 символов.",
+  project_id_tooltip_content: "Помогает идентифицировать рабочие элементы в проекте. Макс. 10 символов.",
   description_placeholder: "Описание",
   only_alphanumeric_non_latin_characters_allowed: "Допускаются только буквенно-цифровые и нелатинские символы.",
   project_id_is_required: "Требуется ID проекта",
   project_id_allowed_char: "Допускаются только буквенно-цифровые и нелатинские символы.",
   project_id_min_char: "ID проекта должен содержать минимум 1 символ",
-  project_id_max_char: "ID проекта должен содержать максимум 5 символов",
+  project_id_max_char: "ID проекта должен содержать максимум 10 символов",
   project_description_placeholder: "Введите описание проекта",
   select_network: "Выбрать сеть",
   lead: "Руководитель",
@@ -1527,6 +1527,47 @@ export default {
         "При подтверждении все параметры сортировки, фильтрации и отображения + макет, выбранный для этого представления, будут безвозвратно удалены без возможности восстановления.",
     },
   },
+  account_settings: {
+    profile: {
+      change_email_modal: {
+        title: "Изменить email",
+        description: "Введите новый адрес электронной почты, чтобы получить ссылку для подтверждения.",
+        toasts: {
+          success_title: "Успех!",
+          success_message: "Email успешно обновлён. Пожалуйста, войдите снова.",
+        },
+        form: {
+          email: {
+            label: "Новый email",
+            placeholder: "Введите свой email",
+            errors: {
+              required: "Email обязателен",
+              invalid: "Email недействителен",
+              exists: "Email уже существует. Используйте другой.",
+              validation_failed: "Не удалось подтвердить email. Попробуйте ещё раз.",
+            },
+          },
+          code: {
+            label: "Уникальный код",
+            placeholder: "123456",
+            helper_text: "Код подтверждения отправлен на ваш новый email.",
+            errors: {
+              required: "Уникальный код обязателен",
+              invalid: "Неверный код подтверждения. Попробуйте ещё раз.",
+            },
+          },
+        },
+        actions: {
+          continue: "Продолжить",
+          confirm: "Подтвердить",
+          cancel: "Отмена",
+        },
+        states: {
+          sending: "Отправка…",
+        },
+      },
+    },
+  },
   workspace_settings: {
     label: "Настройки пространства",
     page_label: "{workspace} - Основные настройки",
@@ -1542,6 +1583,7 @@ export default {
         name: "Название пространства",
         company_size: "Размер компании",
         url: "URL пространства",
+        workspace_timezone: "Часовой пояс рабочего пространства",
         update_workspace: "Обновить пространство",
         delete_workspace: "Удалить пространство",
         delete_workspace_description: "Все данные будут безвозвратно удалены.",
diff --git a/packages/i18n/src/locales/sk/empty-state.ts b/packages/i18n/src/locales/sk/empty-state.ts
index 29ccb63bdb..a82f47d3ee 100644
--- a/packages/i18n/src/locales/sk/empty-state.ts
+++ b/packages/i18n/src/locales/sk/empty-state.ts
@@ -24,6 +24,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "Zdá sa, že nemáte prístup k tomuto projektu",
+      restricted_description: "Kontaktujte administrátora, aby ste požiadali o prístup, a potom tu môžete pokračovať.",
+      join_description: "Kliknite na tlačidlo nižšie, aby ste sa pripojili.",
+      cta_primary: "Pripojiť sa k projektu",
+      cta_loading: "Pripájanie k projektu",
+    },
+    invalid_project: {
+      title: "Projekt nebol nájdený",
+      description: "Projekt, ktorý hľadáte, neexistuje.",
+    },
     work_items: {
       title: "Začnite s vašou prvou pracovnou položkou.",
       description:
@@ -180,5 +191,10 @@ export default {
         "Generujte bezpečné API tokeny na pripojenie vášho pracovného priestoru s externými systémami a aplikáciami.",
       cta_primary: "Pridať API token",
     },
+    webhooks: {
+      title: "Zatiaľ nebol pridaný žiadny Webhook",
+      description: "Automatizujte oznámenia externým službám pri výskyte udalostí projektu.",
+      cta_primary: "Pridať webhook",
+    },
   },
 } as const;
diff --git a/packages/i18n/src/locales/sk/translations.ts b/packages/i18n/src/locales/sk/translations.ts
index 53c8342ed0..fb295de3f4 100644
--- a/packages/i18n/src/locales/sk/translations.ts
+++ b/packages/i18n/src/locales/sk/translations.ts
@@ -74,7 +74,7 @@ export default {
       },
       unique_code: {
         label: "Jedinečný kód",
-        placeholder: "gets-sets-flys",
+        placeholder: "123456",
         paste_code: "Vložte kód zaslaný na váš e-mail",
         requesting_new_code: "Žiadam o nový kód",
         sending_code: "Odosielam kód",
@@ -337,13 +337,13 @@ export default {
   project_id_must_be_at_least_1_character: "ID projektu musí mať aspoň 1 znak",
   project_id_must_be_at_most_5_characters: "ID projektu môže mať maximálne 5 znakov",
   project_id: "ID projektu",
-  project_id_tooltip_content: "Pomáha jednoznačne identifikovať pracovné položky v projekte. Max. 5 znakov.",
+  project_id_tooltip_content: "Pomáha jednoznačne identifikovať pracovné položky v projekte. Max. 10 znakov.",
   description_placeholder: "Popis",
   only_alphanumeric_non_latin_characters_allowed: "Sú povolené iba alfanumerické a nelatinské znaky.",
   project_id_is_required: "ID projektu je povinné",
   project_id_allowed_char: "Sú povolené iba alfanumerické a nelatinské znaky.",
   project_id_min_char: "ID projektu musí mať aspoň 1 znak",
-  project_id_max_char: "ID projektu môže mať maximálne 5 znakov",
+  project_id_max_char: "ID projektu môže mať maximálne 10 znakov",
   project_description_placeholder: "Zadajte popis projektu",
   select_network: "Vybrať sieť",
   lead: "Vedúci",
@@ -1525,6 +1525,47 @@ export default {
         "Ak potvrdíte, všetky možnosti triedenia, filtrovania a zobrazenia + rozloženie, ktoré ste vybrali pre toto zobrazenie, budú natrvalo vymazané bez možnosti obnovenia.",
     },
   },
+  account_settings: {
+    profile: {
+      change_email_modal: {
+        title: "Zmeniť e-mail",
+        description: "Zadajte novú e-mailovú adresu, aby ste dostali overovací odkaz.",
+        toasts: {
+          success_title: "Úspech!",
+          success_message: "E-mail bol úspešne aktualizovaný. Prihláste sa znova.",
+        },
+        form: {
+          email: {
+            label: "Nový e-mail",
+            placeholder: "Zadajte svoj e-mail",
+            errors: {
+              required: "E-mail je povinný",
+              invalid: "E-mail je neplatný",
+              exists: "E-mail už existuje. Použite iný.",
+              validation_failed: "Overenie e-mailu zlyhalo. Skúste znova.",
+            },
+          },
+          code: {
+            label: "Jedinečný kód",
+            placeholder: "123456",
+            helper_text: "Overovací kód bol odoslaný na váš nový e-mail.",
+            errors: {
+              required: "Jedinečný kód je povinný",
+              invalid: "Neplatný overovací kód. Skúste znova.",
+            },
+          },
+        },
+        actions: {
+          continue: "Pokračovať",
+          confirm: "Potvrdiť",
+          cancel: "Zrušiť",
+        },
+        states: {
+          sending: "Odosielanie…",
+        },
+      },
+    },
+  },
   workspace_settings: {
     label: "Nastavenia pracovného priestoru",
     page_label: "{workspace} - Všeobecné nastavenia",
@@ -1540,6 +1581,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á.",
diff --git a/packages/i18n/src/locales/tr-TR/empty-state.ts b/packages/i18n/src/locales/tr-TR/empty-state.ts
index e1f74039ad..64bf46c208 100644
--- a/packages/i18n/src/locales/tr-TR/empty-state.ts
+++ b/packages/i18n/src/locales/tr-TR/empty-state.ts
@@ -24,6 +24,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "Görünüşe göre bu projeye erişiminiz yok",
+      restricted_description: "Erişim talep etmek için yöneticiyle iletişime geçin, sonra burada devam edebilirsiniz.",
+      join_description: "Katılmak için aşağıdaki butona tıklayın.",
+      cta_primary: "Projeye katıl",
+      cta_loading: "Projeye katılınıyor",
+    },
+    invalid_project: {
+      title: "Proje bulunamadı",
+      description: "Aradığınız proje mevcut değil.",
+    },
     work_items: {
       title: "İlk iş öğenizle başlayın.",
       description:
@@ -179,5 +190,10 @@ export default {
         "Çalışma alanınızı harici sistemler ve uygulamalarla bağlamak için güvenli API token'ları oluşturun.",
       cta_primary: "API token'ı ekle",
     },
+    webhooks: {
+      title: "Henüz Webhook eklenmedi",
+      description: "Proje olayları gerçekleştiğinde harici hizmetlere bildirimleri otomatikleştirin.",
+      cta_primary: "Webhook ekle",
+    },
   },
 } as const;
diff --git a/packages/i18n/src/locales/tr-TR/translations.ts b/packages/i18n/src/locales/tr-TR/translations.ts
index e462671aa0..f7d987abb3 100644
--- a/packages/i18n/src/locales/tr-TR/translations.ts
+++ b/packages/i18n/src/locales/tr-TR/translations.ts
@@ -337,13 +337,14 @@ export default {
   project_id_must_be_at_least_1_character: "Proje ID en az 1 karakter olmalı",
   project_id_must_be_at_most_5_characters: "Proje ID en fazla 5 karakter olmalı",
   project_id: "Proje ID",
-  project_id_tooltip_content: "Projedeki iş öğelerini benzersiz şekilde tanımlamanıza yardımcı olur. Maks. 5 karakter.",
+  project_id_tooltip_content:
+    "Projedeki iş öğelerini benzersiz şekilde tanımlamanıza yardımcı olur. Maks. 10 karakter.",
   description_placeholder: "Açıklama",
   only_alphanumeric_non_latin_characters_allowed: "Yalnızca alfasayısal ve Latin olmayan karakterlere izin verilir.",
   project_id_is_required: "Proje ID gereklidir",
   project_id_allowed_char: "Yalnızca alfasayısal ve Latin olmayan karakterlere izin verilir.",
   project_id_min_char: "Proje ID en az 1 karakter olmalı",
-  project_id_max_char: "Proje ID en fazla 5 karakter olmalı",
+  project_id_max_char: "Proje ID en fazla 10 karakter olmalı",
   project_description_placeholder: "Proje açıklamasını girin",
   select_network: "Ağ seç",
   lead: "Lider",
@@ -1529,6 +1530,47 @@ export default {
         "Onaylarsanız, bu görünüm için seçtiğiniz tüm sıralama, filtreleme ve görüntüleme seçenekleri + düzen kalıcı olarak silinecek ve geri yükleme imkanı olmayacaktır.",
     },
   },
+  account_settings: {
+    profile: {
+      change_email_modal: {
+        title: "E-postayı değiştir",
+        description: "Doğrulama bağlantısı almak için yeni bir e-posta adresi girin.",
+        toasts: {
+          success_title: "Başarılı!",
+          success_message: "E-posta başarıyla güncellendi. Lütfen tekrar giriş yapın.",
+        },
+        form: {
+          email: {
+            label: "Yeni e-posta",
+            placeholder: "E-postanızı girin",
+            errors: {
+              required: "E-posta zorunludur",
+              invalid: "E-posta geçersiz",
+              exists: "E-posta zaten mevcut. Başka bir tane kullanın.",
+              validation_failed: "E-posta doğrulaması başarısız oldu. Lütfen tekrar deneyin.",
+            },
+          },
+          code: {
+            label: "Benzersiz kod",
+            placeholder: "123456",
+            helper_text: "Doğrulama kodu yeni e-postanıza gönderildi.",
+            errors: {
+              required: "Benzersiz kod zorunludur",
+              invalid: "Geçersiz doğrulama kodu. Lütfen tekrar deneyin.",
+            },
+          },
+        },
+        actions: {
+          continue: "Devam et",
+          confirm: "Onayla",
+          cancel: "İptal et",
+        },
+        states: {
+          sending: "Gönderiliyor…",
+        },
+      },
+    },
+  },
   workspace_settings: {
     label: "Çalışma Alanı Ayarları",
     page_label: "{workspace} - Genel ayarlar",
@@ -1544,6 +1586,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:
diff --git a/packages/i18n/src/locales/ua/empty-state.ts b/packages/i18n/src/locales/ua/empty-state.ts
index 83dc3fb312..0ef6232f86 100644
--- a/packages/i18n/src/locales/ua/empty-state.ts
+++ b/packages/i18n/src/locales/ua/empty-state.ts
@@ -25,6 +25,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "Схоже, у вас немає доступу до цього проєкту",
+      restricted_description: "Зверніться до адміністратора, щоб запросити доступ, і ви зможете продовжити тут.",
+      join_description: "Натисніть кнопку нижче, щоб приєднатися.",
+      cta_primary: "Приєднатися до проєкту",
+      cta_loading: "Приєднання до проєкту",
+    },
+    invalid_project: {
+      title: "Проєкт не знайдено",
+      description: "Проєкт, який ви шукаєте, не існує.",
+    },
     work_items: {
       title: "Почніть з вашого першого робочого елемента.",
       description:
@@ -182,5 +193,10 @@ export default {
         "Генеруйте безпечні API токени для підключення вашого робочого простору до зовнішніх систем та додатків.",
       cta_primary: "Додати API токен",
     },
+    webhooks: {
+      title: "Ще не додано Webhook",
+      description: "Автоматизуйте сповіщення зовнішнім сервісам, коли відбуваються події проєкту.",
+      cta_primary: "Додати webhook",
+    },
   },
 } as const;
diff --git a/packages/i18n/src/locales/ua/translations.ts b/packages/i18n/src/locales/ua/translations.ts
index 3d1f1ce361..04878fa054 100644
--- a/packages/i18n/src/locales/ua/translations.ts
+++ b/packages/i18n/src/locales/ua/translations.ts
@@ -74,7 +74,7 @@ export default {
       },
       unique_code: {
         label: "Унікальний код",
-        placeholder: "gets-sets-flys",
+        placeholder: "123456",
         paste_code: "Вставте код, надісланий на вашу електронну пошту",
         requesting_new_code: "Запитую новий код",
         sending_code: "Надсилаю код",
@@ -337,13 +337,13 @@ export default {
   project_id_must_be_at_least_1_character: "Ідентифікатор проєкту має містити принаймні 1 символ",
   project_id_must_be_at_most_5_characters: "Ідентифікатор проєкту може містити максимум 5 символів",
   project_id: "ID проєкту",
-  project_id_tooltip_content: "Допомагає унікально ідентифікувати робочі одиниці в проєкті. Макс. 5 символів.",
+  project_id_tooltip_content: "Допомагає унікально ідентифікувати робочі одиниці в проєкті. Макс. 10 символів.",
   description_placeholder: "Опис",
   only_alphanumeric_non_latin_characters_allowed: "Дозволені лише алфанумеричні та нелатинські символи.",
   project_id_is_required: "ID проєкту є обов’язковим",
   project_id_allowed_char: "Дозволені лише алфанумеричні та нелатинські символи.",
   project_id_min_char: "ID проєкту має містити принаймні 1 символ",
-  project_id_max_char: "ID проєкту може містити максимум 5 символів",
+  project_id_max_char: "ID проєкту може містити максимум 10 символів",
   project_description_placeholder: "Введіть опис проєкту",
   select_network: "Вибрати мережу",
   lead: "Керівник",
@@ -1529,6 +1529,47 @@ export default {
         "Якщо ви підтвердите, всі параметри сортування, фільтрації та відображення + макет, який ви обрали для цього подання, будуть безповоротно видалені без можливості відновлення.",
     },
   },
+  account_settings: {
+    profile: {
+      change_email_modal: {
+        title: "Змінити email",
+        description: "Введіть нову адресу електронної пошти, щоб отримати посилання для підтвердження.",
+        toasts: {
+          success_title: "Успіх!",
+          success_message: "Email успішно оновлено. Увійдіть знову.",
+        },
+        form: {
+          email: {
+            label: "Новий email",
+            placeholder: "Введіть свій email",
+            errors: {
+              required: "Email є обов’язковим",
+              invalid: "Email недійсний",
+              exists: "Email уже існує. Використайте інший.",
+              validation_failed: "Не вдалося підтвердити email. Спробуйте ще раз.",
+            },
+          },
+          code: {
+            label: "Унікальний код",
+            placeholder: "123456",
+            helper_text: "Код підтвердження надіслано на ваш новий email.",
+            errors: {
+              required: "Унікальний код є обов’язковим",
+              invalid: "Недійсний код підтвердження. Спробуйте ще раз.",
+            },
+          },
+        },
+        actions: {
+          continue: "Продовжити",
+          confirm: "Підтвердити",
+          cancel: "Скасувати",
+        },
+        states: {
+          sending: "Надсилання…",
+        },
+      },
+    },
+  },
   workspace_settings: {
     label: "Налаштування робочого простору",
     page_label: "{workspace} - Загальні налаштування",
@@ -1544,6 +1585,7 @@ export default {
         name: "Назва робочого простору",
         company_size: "Розмір компанії",
         url: "URL робочого простору",
+        workspace_timezone: "Часовий пояс робочого простору",
         update_workspace: "Оновити простір",
         delete_workspace: "Видалити цей простір",
         delete_workspace_description: "Видалення простору призведе до втрати всіх даних і ресурсів. Дія незворотна.",
diff --git a/packages/i18n/src/locales/vi-VN/empty-state.ts b/packages/i18n/src/locales/vi-VN/empty-state.ts
index 367b2f4c97..5d2a6ce219 100644
--- a/packages/i18n/src/locales/vi-VN/empty-state.ts
+++ b/packages/i18n/src/locales/vi-VN/empty-state.ts
@@ -25,6 +25,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "Có vẻ như bạn không có quyền truy cập vào Dự án này",
+      restricted_description: "Liên hệ với quản trị viên để yêu cầu quyền truy cập và bạn có thể tiếp tục tại đây.",
+      join_description: "Nhấn nút bên dưới để tham gia.",
+      cta_primary: "Tham gia dự án",
+      cta_loading: "Đang tham gia dự án",
+    },
+    invalid_project: {
+      title: "Không tìm thấy dự án",
+      description: "Dự án bạn đang tìm kiếm không tồn tại.",
+    },
     work_items: {
       title: "Bắt đầu với mục công việc đầu tiên của bạn.",
       description:
@@ -180,5 +191,10 @@ export default {
         "Tạo token API an toàn để kết nối không gian làm việc của bạn với các hệ thống và ứng dụng bên ngoài.",
       cta_primary: "Thêm token API",
     },
+    webhooks: {
+      title: "Chưa thêm Webhook",
+      description: "Tự động hóa thông báo đến các dịch vụ bên ngoài khi sự kiện dự án xảy ra.",
+      cta_primary: "Thêm webhook",
+    },
   },
 } as const;
diff --git a/packages/i18n/src/locales/vi-VN/translations.ts b/packages/i18n/src/locales/vi-VN/translations.ts
index ffbd314263..c913d25b09 100644
--- a/packages/i18n/src/locales/vi-VN/translations.ts
+++ b/packages/i18n/src/locales/vi-VN/translations.ts
@@ -74,7 +74,7 @@ export default {
       },
       unique_code: {
         label: "Mã duy nhất",
-        placeholder: "gets-sets-flys",
+        placeholder: "123456",
         paste_code: "Dán mã xác minh đã gửi đến email của bạn",
         requesting_new_code: "Đang yêu cầu mã mới",
         sending_code: "Đang gửi mã",
@@ -338,13 +338,13 @@ export default {
   project_id_must_be_at_least_1_character: "ID dự án phải có ít nhất 1 ký tự",
   project_id_must_be_at_most_5_characters: "ID dự án chỉ được tối đa 5 ký tự",
   project_id: "ID dự án",
-  project_id_tooltip_content: "Giúp xác định duy nhất mục công việc trong dự án của bạn. Tối đa 5 ký tự.",
+  project_id_tooltip_content: "Giúp xác định duy nhất mục công việc trong dự án của bạn. Tối đa 10 ký tự.",
   description_placeholder: "Mô tả",
   only_alphanumeric_non_latin_characters_allowed: "Chỉ cho phép các ký tự chữ số và không phải Latin.",
   project_id_is_required: "ID dự án là bắt buộc",
   project_id_allowed_char: "Chỉ cho phép các ký tự chữ số và không phải Latin.",
   project_id_min_char: "ID dự án phải có ít nhất 1 ký tự",
-  project_id_max_char: "ID dự án chỉ được tối đa 5 ký tự",
+  project_id_max_char: "ID dự án chỉ được tối đa 10 ký tự",
   project_description_placeholder: "Nhập mô tả dự án",
   select_network: "Chọn mạng",
   lead: "Người phụ trách",
@@ -1531,6 +1531,47 @@ export default {
         "Nếu bạn xác nhận, tất cả các tùy chọn sắp xếp, lọc và hiển thị + bố cục mà bạn đã chọn cho chế độ xem này sẽ bị xóa vĩnh viễn mà không có cách nào khôi phục.",
     },
   },
+  account_settings: {
+    profile: {
+      change_email_modal: {
+        title: "Đổi email",
+        description: "Nhập địa chỉ email mới để nhận liên kết xác minh.",
+        toasts: {
+          success_title: "Thành công!",
+          success_message: "Email đã được cập nhật. Vui lòng đăng nhập lại.",
+        },
+        form: {
+          email: {
+            label: "Email mới",
+            placeholder: "Nhập email của bạn",
+            errors: {
+              required: "Email là bắt buộc",
+              invalid: "Email không hợp lệ",
+              exists: "Email đã tồn tại. Vui lòng dùng email khác.",
+              validation_failed: "Xác thực email thất bại. Thử lại.",
+            },
+          },
+          code: {
+            label: "Mã duy nhất",
+            placeholder: "123456",
+            helper_text: "Mã xác minh đã được gửi tới email mới của bạn.",
+            errors: {
+              required: "Mã duy nhất là bắt buộc",
+              invalid: "Mã xác minh không hợp lệ. Thử lại.",
+            },
+          },
+        },
+        actions: {
+          continue: "Tiếp tục",
+          confirm: "Xác nhận",
+          cancel: "Hủy",
+        },
+        states: {
+          sending: "Đang gửi…",
+        },
+      },
+    },
+  },
   workspace_settings: {
     label: "Cài đặt không gian làm việc",
     page_label: "{workspace} - Cài đặt chung",
@@ -1546,6 +1587,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:
diff --git a/packages/i18n/src/locales/zh-CN/empty-state.ts b/packages/i18n/src/locales/zh-CN/empty-state.ts
index 67ffd5ddee..607c4e05b5 100644
--- a/packages/i18n/src/locales/zh-CN/empty-state.ts
+++ b/packages/i18n/src/locales/zh-CN/empty-state.ts
@@ -24,6 +24,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "您似乎无权访问该项目",
+      restricted_description: "请联系管理员申请访问权限，通过后您可以在此继续。",
+      join_description: "点击下方按钮加入该项目。",
+      cta_primary: "加入项目",
+      cta_loading: "正在加入项目",
+    },
+    invalid_project: {
+      title: "未找到项目",
+      description: "您查找的项目不存在。",
+    },
     work_items: {
       title: "从您的第一个工作项开始。",
       description: "工作项是项目的构建块 — 分配负责人、设置优先级并轻松跟踪进度。",
@@ -166,5 +177,10 @@ export default {
       description: "生成安全的 API 令牌以将工作空间与外部系统和应用程序连接。",
       cta_primary: "添加 API 令牌",
     },
+    webhooks: {
+      title: "尚未添加 Webhook",
+      description: "在项目事件发生时自动向外部服务发送通知。",
+      cta_primary: "添加 webhook",
+    },
   },
 } as const;
diff --git a/packages/i18n/src/locales/zh-CN/translations.ts b/packages/i18n/src/locales/zh-CN/translations.ts
index e80a18e30a..4d2a520c2e 100644
--- a/packages/i18n/src/locales/zh-CN/translations.ts
+++ b/packages/i18n/src/locales/zh-CN/translations.ts
@@ -74,7 +74,7 @@ export default {
       },
       unique_code: {
         label: "唯一码",
-        placeholder: "gets-sets-flys",
+        placeholder: "123456",
         paste_code: "粘贴发送到您邮箱的验证码",
         requesting_new_code: "正在请求新验证码",
         sending_code: "正在发送验证码",
@@ -328,13 +328,13 @@ export default {
   project_id_must_be_at_least_1_character: "项目ID至少需要1个字符",
   project_id_must_be_at_most_5_characters: "项目ID最多只能有5个字符",
   project_id: "项目ID",
-  project_id_tooltip_content: "帮助您唯一标识项目中的工作项。最多5个字符。",
+  project_id_tooltip_content: "帮助您唯一标识项目中的工作项。最多10个字符。",
   description_placeholder: "描述",
   only_alphanumeric_non_latin_characters_allowed: "仅允许字母数字和非拉丁字符。",
   project_id_is_required: "项目ID为必填项",
   project_id_allowed_char: "仅允许字母数字和非拉丁字符。",
   project_id_min_char: "项目ID至少需要1个字符",
-  project_id_max_char: "项目ID最多只能有5个字符",
+  project_id_max_char: "项目ID最多只能有10个字符",
   project_description_placeholder: "输入项目描述",
   select_network: "选择网络",
   lead: "负责人",
@@ -1505,6 +1505,47 @@ export default {
       content: "如果您确认，您为此视图选择的所有排序、筛选和显示选项 + 布局将被永久删除，无法恢复。",
     },
   },
+  account_settings: {
+    profile: {
+      change_email_modal: {
+        title: "更改邮箱",
+        description: "请输入新的邮箱地址以接收验证链接。",
+        toasts: {
+          success_title: "成功！",
+          success_message: "邮箱已更新，请重新登录。",
+        },
+        form: {
+          email: {
+            label: "新邮箱",
+            placeholder: "请输入邮箱",
+            errors: {
+              required: "邮箱为必填项",
+              invalid: "邮箱格式无效",
+              exists: "邮箱已存在，请使用其他邮箱。",
+              validation_failed: "邮箱验证失败，请重试。",
+            },
+          },
+          code: {
+            label: "验证码",
+            placeholder: "123456",
+            helper_text: "验证码已发送至你的新邮箱。",
+            errors: {
+              required: "验证码为必填项",
+              invalid: "验证码无效，请重试。",
+            },
+          },
+        },
+        actions: {
+          continue: "继续",
+          confirm: "确认",
+          cancel: "取消",
+        },
+        states: {
+          sending: "发送中…",
+        },
+      },
+    },
+  },
   workspace_settings: {
     label: "工作区设置",
     page_label: "{workspace} - 常规设置",
@@ -1519,6 +1560,7 @@ export default {
         name: "工作区名称",
         company_size: "公司规模",
         url: "工作区网址",
+        workspace_timezone: "工作区时区",
         update_workspace: "更新工作区",
         delete_workspace: "删除此工作区",
         delete_workspace_description: "删除工作区时，该工作区内的所有数据和资源将被永久删除，且无法恢复。",
diff --git a/packages/i18n/src/locales/zh-TW/empty-state.ts b/packages/i18n/src/locales/zh-TW/empty-state.ts
index 77e201bd16..cae9d83a3b 100644
--- a/packages/i18n/src/locales/zh-TW/empty-state.ts
+++ b/packages/i18n/src/locales/zh-TW/empty-state.ts
@@ -24,6 +24,17 @@ export default {
     },
   },
   project_empty_state: {
+    no_access: {
+      title: "您似乎無權存取此專案",
+      restricted_description: "請聯絡管理員以申請存取權，核准後即可在此繼續。",
+      join_description: "點擊下方按鈕加入專案。",
+      cta_primary: "加入專案",
+      cta_loading: "正在加入專案",
+    },
+    invalid_project: {
+      title: "找不到專案",
+      description: "您所查找的專案不存在。",
+    },
     work_items: {
       title: "從您的第一個工作項開始。",
       description: "工作項是專案的建構模組 — 指派負責人、設定優先順序並輕鬆追蹤進度。",
@@ -166,5 +177,10 @@ export default {
       description: "產生安全的 API 權杖以將工作區與外部系統和應用程式連線。",
       cta_primary: "新增 API 權杖",
     },
+    webhooks: {
+      title: "尚未新增 Webhook",
+      description: "在專案事件發生時自動向外部服務傳送通知。",
+      cta_primary: "新增 webhook",
+    },
   },
 } as const;
diff --git a/packages/i18n/src/locales/zh-TW/translations.ts b/packages/i18n/src/locales/zh-TW/translations.ts
index f8d3f6f60d..d63b1d06ee 100644
--- a/packages/i18n/src/locales/zh-TW/translations.ts
+++ b/packages/i18n/src/locales/zh-TW/translations.ts
@@ -74,7 +74,7 @@ export default {
       },
       unique_code: {
         label: "唯一代碼",
-        placeholder: "gets-sets-flys",
+        placeholder: "123456",
         paste_code: "貼上傳送到您電子郵件的代碼",
         requesting_new_code: "正在請求新代碼",
         sending_code: "正在發送代碼",
@@ -327,13 +327,13 @@ export default {
   project_id_must_be_at_least_1_character: "專案 ID 至少必須有 1 個字元",
   project_id_must_be_at_most_5_characters: "專案 ID 最多只能有 5 個字元",
   project_id: "專案 ID",
-  project_id_tooltip_content: "協助您唯一識別專案中的工作事項。最多 5 個字元。",
+  project_id_tooltip_content: "協助您唯一識別專案中的工作事項。最多 10 個字元。",
   description_placeholder: "描述",
   only_alphanumeric_non_latin_characters_allowed: "僅允許英數字元和非拉丁字元。",
   project_id_is_required: "專案 ID 為必填",
   project_id_allowed_char: "僅允許英數字元和非拉丁字元。",
   project_id_min_char: "專案 ID 至少必須有 1 個字元",
-  project_id_max_char: "專案 ID 最多只能有 5 個字元",
+  project_id_max_char: "專案 ID 最多只能有 10 個字元",
   project_description_placeholder: "輸入專案描述",
   select_network: "選擇網路",
   lead: "負責人",
@@ -1506,6 +1506,47 @@ export default {
       content: "如果您確認，您為此視圖選擇的所有排序、篩選和顯示選項 + 布局將被永久刪除，無法恢復。",
     },
   },
+  account_settings: {
+    profile: {
+      change_email_modal: {
+        title: "變更電子郵件",
+        description: "請輸入新的電子郵件地址以接收驗證連結。",
+        toasts: {
+          success_title: "成功！",
+          success_message: "電子郵件已更新，請重新登入。",
+        },
+        form: {
+          email: {
+            label: "新電子郵件",
+            placeholder: "請輸入電子郵件",
+            errors: {
+              required: "電子郵件為必填",
+              invalid: "電子郵件格式無效",
+              exists: "電子郵件已存在，請使用其他信箱。",
+              validation_failed: "電子郵件驗證失敗，請再試一次。",
+            },
+          },
+          code: {
+            label: "驗證碼",
+            placeholder: "123456",
+            helper_text: "驗證碼已傳送到你的新電子郵件。",
+            errors: {
+              required: "驗證碼為必填",
+              invalid: "驗證碼無效，請再試一次。",
+            },
+          },
+        },
+        actions: {
+          continue: "繼續",
+          confirm: "確認",
+          cancel: "取消",
+        },
+        states: {
+          sending: "傳送中…",
+        },
+      },
+    },
+  },
   workspace_settings: {
     label: "工作區設定",
     page_label: "{workspace} - 一般設定",
@@ -1520,6 +1561,7 @@ export default {
         name: "工作區名稱",
         company_size: "公司規模",
         url: "工作區網址",
+        workspace_timezone: "工作區時區",
         update_workspace: "更新工作區",
         delete_workspace: "刪除此工作區",
         delete_workspace_description: "刪除工作區時，該工作區內的所有資料和資源都將被永久移除且無法復原。",
diff --git a/packages/i18n/src/store/index.ts b/packages/i18n/src/store/index.ts
index 1593e40c07..c0366a0ea0 100644
--- a/packages/i18n/src/store/index.ts
+++ b/packages/i18n/src/store/index.ts
@@ -101,11 +101,10 @@ export class TranslationStore {
 
   private loadRemainingLanguages(): void {
     const remainingLanguages = SUPPORTED_LANGUAGES.map((lang) => lang.value).filter(
-      (lang) =>
-        !this.loadedLanguages.has(lang as TLanguage) && lang !== this.currentLocale && lang !== FALLBACK_LANGUAGE
+      (lang) => !this.loadedLanguages.has(lang) && lang !== this.currentLocale && lang !== FALLBACK_LANGUAGE
     );
     // Load all remaining languages in parallel
-    Promise.all(remainingLanguages.map((lang) => this.loadLanguageTranslations(lang as TLanguage))).catch((error) => {
+    Promise.all(remainingLanguages.map((lang) => this.loadLanguageTranslations(lang))).catch((error) => {
       console.error("Failed to load some remaining languages:", error);
     });
   }
diff --git a/packages/i18n/tsconfig.json b/packages/i18n/tsconfig.json
index 6599e6e82a..2256a0d8ff 100644
--- a/packages/i18n/tsconfig.json
+++ b/packages/i18n/tsconfig.json
@@ -1,10 +1,5 @@
 {
   "extends": "@plane/typescript-config/react-library.json",
-  "compilerOptions": {
-    "jsx": "react",
-    "lib": ["esnext", "dom"],
-    "resolveJsonModule": true
-  },
   "include": ["./src"],
   "exclude": ["dist", "build", "node_modules"]
 }
diff --git a/packages/i18n/tsdown.config.ts b/packages/i18n/tsdown.config.ts
index 7b2ea6fe2f..78c3dcba86 100644
--- a/packages/i18n/tsdown.config.ts
+++ b/packages/i18n/tsdown.config.ts
@@ -2,10 +2,7 @@ import { defineConfig } from "tsdown";
 
 export default defineConfig({
   entry: ["src/index.ts"],
-  outDir: "dist",
-  format: ["esm", "cjs"],
-  exports: true,
+  format: ["esm"],
   dts: true,
-  clean: true,
-  sourcemap: true,
+  platform: "neutral",
 });
diff --git a/packages/logger/.eslintignore b/packages/logger/.eslintignore
deleted file mode 100644
index 6019047c3e..0000000000
--- a/packages/logger/.eslintignore
+++ /dev/null
@@ -1,3 +0,0 @@
-build/*
-dist/*
-out/*
\ No newline at end of file
diff --git a/packages/logger/.eslintrc.js b/packages/logger/.eslintrc.js
deleted file mode 100644
index ba0e590e8e..0000000000
--- a/packages/logger/.eslintrc.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["@plane/eslint-config/library.js"],
-};
diff --git a/packages/logger/.prettierignore b/packages/logger/.prettierignore
index 3cd6b08a0f..b0b8bc622a 100644
--- a/packages/logger/.prettierignore
+++ b/packages/logger/.prettierignore
@@ -1,6 +1,10 @@
-.next
-.vercel
-.tubro
-out/
-dist/
+.next/
+.react-router/
+.turbo/
+.vite/
 build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/logger/.prettierrc b/packages/logger/.prettierrc
deleted file mode 100644
index 87d988f1b2..0000000000
--- a/packages/logger/.prettierrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "printWidth": 120,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}
diff --git a/packages/logger/package.json b/packages/logger/package.json
index 535ec2893e..8511deba6b 100644
--- a/packages/logger/package.json
+++ b/packages/logger/package.json
@@ -1,24 +1,22 @@
 {
   "name": "@plane/logger",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "AGPL-3.0",
   "description": "Logger shared across multiple apps internally",
   "private": true,
+  "type": "module",
   "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    },
+    ".": "./dist/index.mjs",
     "./package.json": "./package.json"
   },
   "scripts": {
     "build": "tsdown",
     "dev": "tsdown --watch",
-    "check:lint": "eslint . --max-warnings 0",
+    "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=0",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check \"**/*.{ts,tsx,md,json,css,scss}\"",
-    "fix:lint": "eslint . --fix",
-    "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\"",
+    "check:format": "prettier . --cache --check",
+    "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=0",
+    "fix:format": "prettier . --cache --write",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
@@ -26,14 +24,13 @@
     "winston": "^3.17.0"
   },
   "devDependencies": {
-    "@plane/eslint-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
     "@types/express": "4.17.23",
     "@types/node": "catalog:",
     "tsdown": "catalog:",
     "typescript": "catalog:"
   },
-  "main": "./dist/index.js",
+  "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts"
+  "types": "./dist/index.d.mts"
 }
diff --git a/packages/logger/tsconfig.json b/packages/logger/tsconfig.json
index 2ba1c9799b..6d63da5ce2 100644
--- a/packages/logger/tsconfig.json
+++ b/packages/logger/tsconfig.json
@@ -1,19 +1,11 @@
 {
-  "extends": "@plane/typescript-config/base.json",
+  "extends": "@plane/typescript-config/node-library.json",
   "compilerOptions": {
-    "module": "ESNext",
-    "target": "ESNext",
-    "moduleResolution": "node",
-    "esModuleInterop": true,
-    "outDir": "./dist",
-    "rootDir": "./src",
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
     },
-    "experimentalDecorators": true,
-    "sourceMap": true
+    "experimentalDecorators": true
   },
   "include": ["src/**/*"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "dist"]
 }
diff --git a/packages/logger/tsdown.config.ts b/packages/logger/tsdown.config.ts
index 7b2ea6fe2f..5f7ccadb7d 100644
--- a/packages/logger/tsdown.config.ts
+++ b/packages/logger/tsdown.config.ts
@@ -2,10 +2,7 @@ import { defineConfig } from "tsdown";
 
 export default defineConfig({
   entry: ["src/index.ts"],
-  outDir: "dist",
-  format: ["esm", "cjs"],
-  exports: true,
+  format: ["esm"],
   dts: true,
-  clean: true,
-  sourcemap: true,
+  exports: true,
 });
diff --git a/packages/propel/.eslintignore b/packages/propel/.eslintignore
deleted file mode 100644
index 6019047c3e..0000000000
--- a/packages/propel/.eslintignore
+++ /dev/null
@@ -1,3 +0,0 @@
-build/*
-dist/*
-out/*
\ No newline at end of file
diff --git a/packages/propel/.eslintrc.js b/packages/propel/.eslintrc.js
deleted file mode 100644
index 059c5445b2..0000000000
--- a/packages/propel/.eslintrc.js
+++ /dev/null
@@ -1,29 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["@plane/eslint-config/library.js", "plugin:storybook/recommended"],
-  rules: {
-    "import/order": [
-      "warn",
-      {
-        groups: ["builtin", "external", "internal", "parent", "sibling"],
-        pathGroups: [
-          {
-            pattern: "react",
-            group: "external",
-            position: "before",
-          },
-          {
-            pattern: "@plane/**",
-            group: "external",
-            position: "after",
-          },
-        ],
-        pathGroupsExcludedImportTypes: ["builtin", "internal", "react"],
-        alphabetize: {
-          order: "asc",
-          caseInsensitive: true,
-        },
-      },
-    ],
-  },
-};
diff --git a/packages/propel/.prettierignore b/packages/propel/.prettierignore
index e841c6b328..b0b8bc622a 100644
--- a/packages/propel/.prettierignore
+++ b/packages/propel/.prettierignore
@@ -1,5 +1,10 @@
-.next
-.turbo
-out/
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
 dist/
-build/
\ No newline at end of file
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/propel/.prettierrc b/packages/propel/.prettierrc
deleted file mode 100644
index 87d988f1b2..0000000000
--- a/packages/propel/.prettierrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "printWidth": 120,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}
diff --git a/packages/propel/.storybook/preview.ts b/packages/propel/.storybook/preview.ts
index b1402e0bd0..917f3f3739 100644
--- a/packages/propel/.storybook/preview.ts
+++ b/packages/propel/.storybook/preview.ts
@@ -1,6 +1,5 @@
 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 0000000000..aca4ed08ea
--- /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 304c4483d9..37a26874ad 100644
--- a/packages/propel/package.json
+++ b/packages/propel/package.json
@@ -1,172 +1,63 @@
 {
   "name": "@plane/propel",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": true,
   "license": "AGPL-3.0",
+  "type": "module",
   "scripts": {
     "dev": "tsdown --watch",
     "build": "tsdown",
-    "check:lint": "eslint . --max-warnings 7",
+    "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=1306",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check \"**/*.{ts,tsx,md,json,css,scss}\"",
-    "fix:lint": "eslint . --fix",
-    "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\"",
+    "check:format": "prettier . --cache --check",
+    "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=1306",
+    "fix:format": "prettier . --cache --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": {
-      "import": "./dist/accordion/index.mjs",
-      "require": "./dist/accordion/index.js"
-    },
-    "./animated-counter": {
-      "import": "./dist/animated-counter/index.mjs",
-      "require": "./dist/animated-counter/index.js"
-    },
-    "./avatar": {
-      "import": "./dist/avatar/index.mjs",
-      "require": "./dist/avatar/index.js"
-    },
-    "./banner": {
-      "import": "./dist/banner/index.mjs",
-      "require": "./dist/banner/index.js"
-    },
-    "./button": {
-      "import": "./dist/button/index.mjs",
-      "require": "./dist/button/index.js"
-    },
-    "./calendar": {
-      "import": "./dist/calendar/index.mjs",
-      "require": "./dist/calendar/index.js"
-    },
-    "./card": {
-      "import": "./dist/card/index.mjs",
-      "require": "./dist/card/index.js"
-    },
-    "./charts/area-chart": {
-      "import": "./dist/charts/area-chart/index.mjs",
-      "require": "./dist/charts/area-chart/index.js"
-    },
-    "./charts/bar-chart": {
-      "import": "./dist/charts/bar-chart/index.mjs",
-      "require": "./dist/charts/bar-chart/index.js"
-    },
-    "./charts/line-chart": {
-      "import": "./dist/charts/line-chart/index.mjs",
-      "require": "./dist/charts/line-chart/index.js"
-    },
-    "./charts/pie-chart": {
-      "import": "./dist/charts/pie-chart/index.mjs",
-      "require": "./dist/charts/pie-chart/index.js"
-    },
-    "./charts/radar-chart": {
-      "import": "./dist/charts/radar-chart/index.mjs",
-      "require": "./dist/charts/radar-chart/index.js"
-    },
-    "./charts/scatter-chart": {
-      "import": "./dist/charts/scatter-chart/index.mjs",
-      "require": "./dist/charts/scatter-chart/index.js"
-    },
-    "./charts/tree-map": {
-      "import": "./dist/charts/tree-map/index.mjs",
-      "require": "./dist/charts/tree-map/index.js"
-    },
-    "./collapsible": {
-      "import": "./dist/collapsible/index.mjs",
-      "require": "./dist/collapsible/index.js"
-    },
-    "./combobox": {
-      "import": "./dist/combobox/index.mjs",
-      "require": "./dist/combobox/index.js"
-    },
-    "./command": {
-      "import": "./dist/command/index.mjs",
-      "require": "./dist/command/index.js"
-    },
-    "./context-menu": {
-      "import": "./dist/context-menu/index.mjs",
-      "require": "./dist/context-menu/index.js"
-    },
-    "./dialog": {
-      "import": "./dist/dialog/index.mjs",
-      "require": "./dist/dialog/index.js"
-    },
-    "./emoji-icon-picker": {
-      "import": "./dist/emoji-icon-picker/index.mjs",
-      "require": "./dist/emoji-icon-picker/index.js"
-    },
-    "./emoji-reaction": {
-      "import": "./dist/emoji-reaction/index.mjs",
-      "require": "./dist/emoji-reaction/index.js"
-    },
-    "./empty-state": {
-      "import": "./dist/empty-state/index.mjs",
-      "require": "./dist/empty-state/index.js"
-    },
-    "./icons": {
-      "import": "./dist/icons/index.mjs",
-      "require": "./dist/icons/index.js"
-    },
-    "./input": {
-      "import": "./dist/input/index.mjs",
-      "require": "./dist/input/index.js"
-    },
-    "./menu": {
-      "import": "./dist/menu/index.mjs",
-      "require": "./dist/menu/index.js"
-    },
-    "./pill": {
-      "import": "./dist/pill/index.mjs",
-      "require": "./dist/pill/index.js"
-    },
-    "./popover": {
-      "import": "./dist/popover/index.mjs",
-      "require": "./dist/popover/index.js"
-    },
-    "./portal": {
-      "import": "./dist/portal/index.mjs",
-      "require": "./dist/portal/index.js"
-    },
-    "./scrollarea": {
-      "import": "./dist/scrollarea/index.mjs",
-      "require": "./dist/scrollarea/index.js"
-    },
-    "./skeleton": {
-      "import": "./dist/skeleton/index.mjs",
-      "require": "./dist/skeleton/index.js"
-    },
-    "./switch": {
-      "import": "./dist/switch/index.mjs",
-      "require": "./dist/switch/index.js"
-    },
-    "./table": {
-      "import": "./dist/table/index.mjs",
-      "require": "./dist/table/index.js"
-    },
-    "./tabs": {
-      "import": "./dist/tabs/index.mjs",
-      "require": "./dist/tabs/index.js"
-    },
-    "./toast": {
-      "import": "./dist/toast/index.mjs",
-      "require": "./dist/toast/index.js"
-    },
-    "./toolbar": {
-      "import": "./dist/toolbar/index.mjs",
-      "require": "./dist/toolbar/index.js"
-    },
-    "./tooltip": {
-      "import": "./dist/tooltip/index.mjs",
-      "require": "./dist/tooltip/index.js"
-    },
-    "./utils": {
-      "import": "./dist/utils/index.mjs",
-      "require": "./dist/utils/index.js"
-    },
+    "./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",
+    "./card": "./dist/card/index.js",
+    "./charts/area-chart": "./dist/charts/area-chart/index.js",
+    "./charts/bar-chart": "./dist/charts/bar-chart/index.js",
+    "./charts/line-chart": "./dist/charts/line-chart/index.js",
+    "./charts/pie-chart": "./dist/charts/pie-chart/index.js",
+    "./charts/radar-chart": "./dist/charts/radar-chart/index.js",
+    "./charts/scatter-chart": "./dist/charts/scatter-chart/index.js",
+    "./charts/tree-map": "./dist/charts/tree-map/index.js",
+    "./collapsible": "./dist/collapsible/index.js",
+    "./combobox": "./dist/combobox/index.js",
+    "./command": "./dist/command/index.js",
+    "./context-menu": "./dist/context-menu/index.js",
+    "./dialog": "./dist/dialog/index.js",
+    "./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",
+    "./pill": "./dist/pill/index.js",
+    "./popover": "./dist/popover/index.js",
+    "./portal": "./dist/portal/index.js",
+    "./scrollarea": "./dist/scrollarea/index.js",
+    "./skeleton": "./dist/skeleton/index.js",
+    "./switch": "./dist/switch/index.js",
+    "./tab-navigation": "./dist/tab-navigation/index.js",
+    "./table": "./dist/table/index.js",
+    "./tabs": "./dist/tabs/index.js",
+    "./toast": "./dist/toast/index.js",
+    "./toolbar": "./dist/toolbar/index.js",
+    "./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"
   },
@@ -175,21 +66,22 @@
     "@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",
     "frimousse": "^0.3.0",
     "lucide-react": "catalog:",
     "react": "catalog:",
     "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": {
-    "@plane/eslint-config": "workspace:*",
     "@plane/tailwind-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
     "@storybook/addon-designs": "10.0.2",
@@ -197,8 +89,7 @@
     "@storybook/react-vite": "9.1.10",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
-    "eslint-plugin-storybook": "9.1.10",
-    "storybook": "9.1.10",
+    "storybook": "9.1.17",
     "tsdown": "catalog:",
     "typescript": "catalog:"
   }
diff --git a/packages/propel/postcss.config.js b/packages/propel/postcss.config.js
index 9b1e55fc44..3ad28f15f3 100644
--- a/packages/propel/postcss.config.js
+++ b/packages/propel/postcss.config.js
@@ -1,2 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-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 5850c5062d..ed9428b077 100644
--- a/packages/propel/src/accordion/accordion.stories.tsx
+++ b/packages/propel/src/accordion/accordion.stories.tsx
@@ -176,7 +176,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="w-full rounded-md bg-blue-500 px-4 py-2 text-left text-on-color hover:bg-blue-600">
               Custom Button Trigger
             </button>
           </Accordion.Trigger>
@@ -186,7 +186,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="w-full rounded-md bg-green-500 px-4 py-2 text-left text-on-color hover:bg-green-600">
               Another Custom Trigger
             </button>
           </Accordion.Trigger>
diff --git a/packages/propel/src/accordion/accordion.tsx b/packages/propel/src/accordion/accordion.tsx
index 71850e1807..0768b4fc75 100644
--- a/packages/propel/src/accordion/accordion.tsx
+++ b/packages/propel/src/accordion/accordion.tsx
@@ -30,55 +30,54 @@ export interface AccordionContentProps {
   children: React.ReactNode;
 }
 
-const AccordionRoot: React.FC<AccordionRootProps> = ({
-  defaultValue = [],
-  allowMultiple = false,
-  className = "",
-  children,
-}) => (
-  <BaseAccordion.Root defaultValue={defaultValue} openMultiple={allowMultiple} className={`text-base ${className}`}>
-    {children}
-  </BaseAccordion.Root>
-);
+function AccordionRoot({ defaultValue = [], allowMultiple = false, className = "", children }: AccordionRootProps) {
+  return (
+    <BaseAccordion.Root defaultValue={defaultValue} openMultiple={allowMultiple} className={`text-14 ${className}`}>
+      {children}
+    </BaseAccordion.Root>
+  );
+}
 
-const AccordionItem: React.FC<AccordionItemProps> = ({ value, disabled, className = "", children }) => (
-  <BaseAccordion.Item value={value} disabled={disabled} className={`relative ${className}`}>
-    {children}
-  </BaseAccordion.Item>
-);
+function AccordionItem({ value, disabled, className = "", children }: AccordionItemProps) {
+  return (
+    <BaseAccordion.Item value={value} disabled={disabled} className={`relative ${className}`}>
+      {children}
+    </BaseAccordion.Item>
+  );
+}
 
-const AccordionTrigger: React.FC<AccordionTriggerProps> = ({
+function AccordionTrigger({
   className = "",
   icon = <PlusIcon aria-hidden="true" className="transition-all ease-out  group-data-[panel-open]:rotate-45" />,
   iconClassName = "",
   children,
   asChild = false,
-}) => (
-  <BaseAccordion.Header>
-    {asChild ? (
-      <BaseAccordion.Trigger className={`w-full py-2 ${className}`}>{children}</BaseAccordion.Trigger>
-    ) : (
-      <BaseAccordion.Trigger className={`flex w-full items-center justify-between gap-2 py-2 ${className}`}>
-        {children}
-        <span aria-hidden="true" className={`flex-shrink-0 ${iconClassName}`}>
-          {icon}
-        </span>
-      </BaseAccordion.Trigger>
-    )}
-  </BaseAccordion.Header>
-);
+}: AccordionTriggerProps) {
+  return (
+    <BaseAccordion.Header>
+      {asChild ? (
+        <BaseAccordion.Trigger className={`w-full py-2 ${className}`}>{children}</BaseAccordion.Trigger>
+      ) : (
+        <BaseAccordion.Trigger className={`flex w-full items-center justify-between gap-2 py-2 ${className}`}>
+          {children}
+          <span aria-hidden="true" className={`flex-shrink-0 ${iconClassName}`}>
+            {icon}
+          </span>
+        </BaseAccordion.Trigger>
+      )}
+    </BaseAccordion.Header>
+  );
+}
 
-const AccordionContent: React.FC<AccordionContentProps> = ({
-  className = "",
-  contentWrapperClassName = "",
-  children,
-}) => (
-  <BaseAccordion.Panel
-    className={`h-[var(--accordion-panel-height)] overflow-hidden transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0 ${className}`}
-  >
-    <div className={`py-2 ${contentWrapperClassName}`}>{children}</div>
-  </BaseAccordion.Panel>
-);
+function AccordionContent({ className = "", contentWrapperClassName = "", children }: AccordionContentProps) {
+  return (
+    <BaseAccordion.Panel
+      className={`h-[var(--accordion-panel-height)] overflow-hidden transition-[height] ease-out data-[ending-style]:h-0 data-[starting-style]:h-0 ${className}`}
+    >
+      <div className={`py-2 ${contentWrapperClassName}`}>{children}</div>
+    </BaseAccordion.Panel>
+  );
+}
 
 export const Accordion = {
   Root: AccordionRoot,
diff --git a/packages/propel/src/animated-counter/animated-counter.stories.tsx b/packages/propel/src/animated-counter/animated-counter.stories.tsx
index ac6f433400..89ea5fa8c6 100644
--- a/packages/propel/src/animated-counter/animated-counter.stories.tsx
+++ b/packages/propel/src/animated-counter/animated-counter.stories.tsx
@@ -26,7 +26,7 @@ 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="px-4 py-2 bg-red-500 text-on-color 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"
             onClick={() => setCount((prev) => Math.max(0, prev - 1))}
           >
             -1
@@ -35,7 +35,7 @@ export const Default: Story = {
             <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="px-4 py-2 bg-green-500 text-on-color 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"
             onClick={() => setCount((prev) => prev + 1)}
           >
             +1
@@ -54,13 +54,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="px-3 py-1 bg-layer-1 text-13 rounded-sm 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="px-3 py-1 bg-layer-1 text-13 rounded-sm hover:bg-surface-2"
             onClick={() => setCount((prev) => prev + 1)}
           >
             +1
@@ -68,20 +68,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="text-13 text-placeholder w-20">Small:</span>
+            <div className="flex items-center justify-center min-w-[40px] h-8 bg-layer-1 border border-subtle rounded-sm">
               <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="text-13 text-placeholder w-20">Medium:</span>
+            <div className="flex items-center justify-center min-w-[50px] h-10 bg-layer-1 border border-subtle rounded-sm">
               <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="text-13 text-placeholder w-20">Large:</span>
+            <div className="flex items-center justify-center min-w-[60px] h-12 bg-layer-1 border border-subtle rounded-sm">
               <AnimatedCounter count={count} size="lg" />
             </div>
           </div>
@@ -99,19 +99,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="px-3 py-1 bg-red-500 text-on-color text-13 rounded-sm hover:bg-red-600"
             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="px-3 py-1 bg-green-500 text-on-color text-13 rounded-sm hover:bg-green-600"
             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 items-center justify-center min-w-[100px] h-12 bg-layer-1 border border-subtle rounded-lg">
           <AnimatedCounter count={count} size="lg" />
         </div>
       </div>
@@ -142,11 +142,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 items-center justify-center min-w-[60px] h-16 bg-layer-1 border-2 border-subtle rounded-lg">
+            <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="px-6 py-2 bg-accent-primary text-on-color font-medium rounded-lg hover:bg-accent-primary/80"
             onClick={handleStart}
             disabled={isRunning}
           >
@@ -173,26 +173,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 items-center justify-center min-w-[80px] h-16 bg-layer-1 border-2 border-subtle rounded-lg">
+            <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="px-4 py-2 bg-green-500 text-on-color font-medium rounded-sm hover:bg-green-600"
               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="px-4 py-2 bg-red-500 text-on-color font-medium rounded-sm hover:bg-red-600"
               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="px-4 py-2 bg-gray-500 text-on-color font-medium rounded-sm hover:bg-gray-600"
               onClick={() => {
                 setIsRunning(false);
                 setCount(0);
@@ -215,49 +215,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="max-w-md border border-subtle rounded-lg p-4">
           <div className="flex items-center justify-between mb-4">
             <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="text-placeholder text-13">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="w-8 h-8 flex items-center justify-center bg-layer-1 rounded-sm 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 items-center justify-center min-w-[40px] h-10 bg-layer-1 border border-subtle rounded-sm">
                   <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="text-placeholder text-13">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="w-8 h-8 flex items-center justify-center bg-layer-1 rounded-sm 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 items-center justify-center min-w-[40px] h-10 bg-layer-1 border border-subtle rounded-sm">
                   <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="text-placeholder text-13">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="w-8 h-8 flex items-center justify-center bg-layer-1 rounded-sm 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 items-center justify-center min-w-[40px] h-10 bg-layer-1 border border-subtle rounded-sm">
                   <AnimatedCounter count={shares} size="md" />
                 </div>
               </div>
@@ -277,15 +277,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="px-4 py-2 bg-layer-1 border border-subtle 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-on-color rounded-full px-1.5">
+              <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="px-4 py-2 bg-accent-primary text-on-color rounded-sm hover:bg-accent-primary/80"
             onClick={() => setNotifications((prev) => prev + 1)}
           >
             Add Notification
@@ -309,20 +307,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 items-center justify-center min-w-[60px] h-12 bg-layer-1 border border-subtle rounded-lg">
             <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="px-4 py-2 bg-accent-primary text-on-color rounded-sm 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="px-4 py-2 bg-layer-1 rounded-sm 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 2c377fabce..67c05a0c23 100644
--- a/packages/propel/src/animated-counter/animated-counter.tsx
+++ b/packages/propel/src/animated-counter/animated-counter.tsx
@@ -8,12 +8,12 @@ export interface AnimatedCounterProps {
 }
 
 const sizeClasses = {
-  sm: "text-xs",
-  md: "text-sm",
-  lg: "text-base",
+  sm: "text-11",
+  md: "text-13",
+  lg: "text-14",
 };
 
-export const AnimatedCounter: React.FC<AnimatedCounterProps> = ({ count, className, size = "md" }) => {
+export function AnimatedCounter({ count, className, size = "md" }: AnimatedCounterProps) {
   // states
   const [displayCount, setDisplayCount] = useState(count);
   const [prevCount, setPrevCount] = useState(count);
@@ -51,17 +51,15 @@ export const AnimatedCounter: React.FC<AnimatedCounterProps> = ({ count, classNa
           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-slide-out animate-fade-out": isAnimating && direction === "up",
+              "animate-slide-out-down animate-fade-out": 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,24 +70,17 @@ export const AnimatedCounter: React.FC<AnimatedCounterProps> = ({ count, classNa
         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>
     </div>
   );
-};
+}
diff --git a/packages/propel/src/avatar/avatar.tsx b/packages/propel/src/avatar/avatar.tsx
index ec19dbf238..2947fdbe9b 100644
--- a/packages/propel/src/avatar/avatar.tsx
+++ b/packages/propel/src/avatar/avatar.tsx
@@ -26,31 +26,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 +66,7 @@ export const getBorderRadius = (shape: "circle" | "square") => {
     case "circle":
       return "rounded-full";
     case "square":
-      return "rounded";
+      return "rounded-sm";
     default:
       return "rounded-full";
   }
@@ -79,7 +79,7 @@ export const getBorderRadius = (shape: "circle" | "square") => {
  */
 export const isAValidNumber = (value: unknown): value is number => typeof value === "number" && !Number.isNaN(value);
 
-export const Avatar: React.FC<Props> = (props) => {
+export function Avatar(props: Props) {
   const {
     name,
     fallbackBackgroundColor,
@@ -116,4 +116,4 @@ export const Avatar: React.FC<Props> = (props) => {
       </AvatarPrimitive.Root>
     </div>
   );
-};
+}
diff --git a/packages/propel/src/badge/badge.stories.tsx b/packages/propel/src/badge/badge.stories.tsx
new file mode 100644
index 0000000000..b2208066a3
--- /dev/null
+++ b/packages/propel/src/badge/badge.stories.tsx
@@ -0,0 +1,148 @@
+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 0000000000..44a6721413
--- /dev/null
+++ b/packages/propel/src/badge/badge.tsx
@@ -0,0 +1,22 @@
+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 0000000000..527b53edd4
--- /dev/null
+++ b/packages/propel/src/badge/helper.tsx
@@ -0,0 +1,46 @@
+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",
+      success: "bg-success-subtle-1 text-success",
+      danger: "bg-danger-subtle text-danger",
+    },
+    size: {
+      sm: "h-4 px-1 text-caption-sm-medium rounded-sm",
+      base: "h-5 px-1.5 text-caption-sm-medium rounded-md",
+      lg: "h-6 px-2 text-caption-md-medium rounded-md",
+    },
+  },
+  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 0000000000..9fd1b0bd72
--- /dev/null
+++ b/packages/propel/src/badge/index.ts
@@ -0,0 +1,3 @@
+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 70187155a9..b53de818f0 100644
--- a/packages/propel/src/banner/banner.stories.tsx
+++ b/packages/propel/src/banner/banner.stories.tsx
@@ -33,99 +33,109 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // Sample icons for different variants
-const SuccessIcon = () => (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="text-green-600"
-  >
-    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
-    <polyline points="22 4 12 14.01 9 11.01" />
-  </svg>
-);
-
-const ErrorIcon = () => (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="text-red-600"
-  >
-    <circle cx="12" cy="12" r="10" />
-    <line x1="15" y1="9" x2="9" y2="15" />
-    <line x1="9" y1="9" x2="15" y2="15" />
-  </svg>
-);
-
-const WarningIcon = () => (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="text-yellow-600"
-  >
-    <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
-    <line x1="12" y1="9" x2="12" y2="13" />
-    <line x1="12" y1="17" x2="12.01" y2="17" />
-  </svg>
-);
-
-const InfoIcon = () => (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="text-blue-600"
-  >
-    <circle cx="12" cy="12" r="10" />
-    <line x1="12" y1="16" x2="12" y2="12" />
-    <line x1="12" y1="8" x2="12.01" y2="8" />
-  </svg>
-);
-
-const CloseButton = ({ onClick }: { onClick?: () => void }) => (
-  <button
-    onClick={onClick}
-    className="rounded p-1 hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
-    aria-label="Dismiss"
-  >
+function SuccessIcon() {
+  return (
     <svg
-      width="16"
-      height="16"
+      width="20"
+      height="20"
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="text-text-secondary"
+      className="text-green-600"
     >
-      <line x1="18" y1="6" x2="6" y2="18" />
-      <line x1="6" y1="6" x2="18" y2="18" />
+      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+      <polyline points="22 4 12 14.01 9 11.01" />
     </svg>
-  </button>
-);
+  );
+}
+
+function ErrorIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="text-red-600"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <line x1="15" y1="9" x2="9" y2="15" />
+      <line x1="9" y1="9" x2="15" y2="15" />
+    </svg>
+  );
+}
+
+function WarningIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="text-yellow-600"
+    >
+      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+      <line x1="12" y1="9" x2="12" y2="13" />
+      <line x1="12" y1="17" x2="12.01" y2="17" />
+    </svg>
+  );
+}
+
+function InfoIcon() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="text-blue-600"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="16" x2="12" y2="12" />
+      <line x1="12" y1="8" x2="12.01" y2="8" />
+    </svg>
+  );
+}
+
+function CloseButton({ onClick }: { onClick?: () => void }) {
+  return (
+    <button
+      onClick={onClick}
+      className="rounded-sm p-1 hover:bg-alpha-black-100 dark:hover:bg-alpha-white-100 transition-colors"
+      aria-label="Dismiss"
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="text-text-secondary"
+      >
+        <line x1="18" y1="6" x2="6" y2="18" />
+        <line x1="6" y1="6" x2="18" y2="18" />
+      </svg>
+    </button>
+  );
+}
 
 // ============================================================================
 // Interactive Stories
diff --git a/packages/propel/src/banner/banner.tsx b/packages/propel/src/banner/banner.tsx
index 051cd5c5c5..680c1bba16 100644
--- a/packages/propel/src/banner/banner.tsx
+++ b/packages/propel/src/banner/banner.tsx
@@ -28,102 +28,100 @@ export interface BannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
   animationDuration?: number;
 }
 
-export const Banner = React.forwardRef<HTMLDivElement, BannerProps>(
-  (
-    {
-      icon,
-      title,
-      action,
-      variant = "info",
-      dismissible = false,
-      onDismiss,
-      visible = true,
-      animationDuration = 200,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    // Handle dismissal
-    const handleDismiss = () => {
-      if (onDismiss) {
-        onDismiss();
-      }
-    };
-
-    // Don't render if not visible
-    if (!visible) {
-      return null;
+export const Banner = React.forwardRef(function Banner(
+  {
+    icon,
+    title,
+    action,
+    variant = "info",
+    dismissible = false,
+    onDismiss,
+    visible = true,
+    animationDuration = 200,
+    className,
+    children,
+    ...props
+  }: BannerProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  // Handle dismissal
+  const handleDismiss = () => {
+    if (onDismiss) {
+      onDismiss();
     }
+  };
 
-    // Get styling using helper functions
-    const containerStyling = getBannerStyling(variant);
-    const iconStyling = "flex items-center justify-center flex-shrink-0 size-5";
-    const titleStyling = getBannerTitleStyling();
-    const actionStyling = getBannerActionStyling();
-    const dismissStyling = getBannerDismissStyling();
-    const dismissIconStyling = getBannerDismissIconStyling();
+  // Don't render if not visible
+  if (!visible) {
+    return null;
+  }
 
-    // Render custom icon component if provided
-    const renderIcon = () => {
-      if (icon) {
-        return <div className={cn(iconStyling)}>{icon}</div>;
-      }
-      return null;
-    };
+  // Get styling using helper functions
+  const containerStyling = getBannerStyling(variant);
+  const iconStyling = "flex items-center justify-center flex-shrink-0 size-5";
+  const titleStyling = getBannerTitleStyling();
+  const actionStyling = getBannerActionStyling();
+  const dismissStyling = getBannerDismissStyling();
+  const dismissIconStyling = getBannerDismissIconStyling();
 
-    // Render dismiss button if dismissible
-    const renderDismissButton = () => {
-      if (!dismissible) return null;
+  // Render custom icon component if provided
+  const renderIcon = () => {
+    if (icon) {
+      return <div className={cn(iconStyling)}>{icon}</div>;
+    }
+    return null;
+  };
 
-      return (
-        <button onClick={handleDismiss} className={cn(dismissStyling)} aria-label="Dismiss banner">
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            className={cn(dismissIconStyling)}
-          >
-            <line x1="18" y1="6" x2="6" y2="18" />
-            <line x1="6" y1="6" x2="18" y2="18" />
-          </svg>
-        </button>
-      );
-    };
+  // Render dismiss button if dismissible
+  const renderDismissButton = () => {
+    if (!dismissible) return null;
 
     return (
-      <div
-        ref={ref}
-        className={cn(containerStyling, className)}
-        style={{
-          transitionDuration: `${animationDuration}ms`,
-        }}
-        {...props}
-      >
-        {/* Left side: Icon and Title */}
-        <div className="flex items-center gap-3 flex-1 min-w-0">
-          {renderIcon()}
-          {title && <div className={cn(titleStyling)}>{title}</div>}
-          {children}
-        </div>
-
-        {/* Right side: Actions */}
-        {(action || dismissible) && (
-          <div className={cn(actionStyling)}>
-            {action}
-            {renderDismissButton()}
-          </div>
-        )}
-      </div>
+      <button onClick={handleDismiss} className={cn(dismissStyling)} aria-label="Dismiss banner">
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className={cn(dismissIconStyling)}
+        >
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </button>
     );
-  }
-);
+  };
+
+  return (
+    <div
+      ref={ref}
+      className={cn(containerStyling, className)}
+      style={{
+        transitionDuration: `${animationDuration}ms`,
+      }}
+      {...props}
+    >
+      {/* Left side: Icon and Title */}
+      <div className="flex items-center gap-3 flex-1 min-w-0">
+        {renderIcon()}
+        {title && <div className={cn(titleStyling)}>{title}</div>}
+        {children}
+      </div>
+
+      {/* Right side: Actions */}
+      {(action || dismissible) && (
+        <div className={cn(actionStyling)}>
+          {action}
+          {renderDismissButton()}
+        </div>
+      )}
+    </div>
+  );
+});
 
 Banner.displayName = "Banner";
 
diff --git a/packages/propel/src/banner/helper.tsx b/packages/propel/src/banner/helper.tsx
index cf128a2099..4c749797b7 100644
--- a/packages/propel/src/banner/helper.tsx
+++ b/packages/propel/src/banner/helper.tsx
@@ -7,7 +7,7 @@ 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",
 };
 
@@ -33,14 +33,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/button/button.stories.tsx b/packages/propel/src/button/button.stories.tsx
index d0e4453648..3534557b3d 100644
--- a/packages/propel/src/button/button.stories.tsx
+++ b/packages/propel/src/button/button.stories.tsx
@@ -25,73 +25,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 +74,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 +154,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 +176,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 +190,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 e6c8875d69..6c3efe0861 100644
--- a/packages/propel/src/button/button.tsx
+++ b/packages/propel/src/button/button.tsx
@@ -1,23 +1,12 @@
 import * as React from "react";
 import { cn } from "../utils";
-import type { TButtonVariant, TButtonSizes } from "./helper";
-import { getIconStyling, getButtonStyling } from "./helper";
+import type { ButtonProps } from "./helper";
+import { getIconStyling, buttonVariants } 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;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+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 +17,19 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
     ...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 4a823aad7a..71a91aa0f7 100644
--- a/packages/propel/src/button/helper.tsx
+++ b/packages/propel/src/button/helper.tsx
@@ -1,126 +1,60 @@
-export type TButtonVariant =
-  | "primary"
-  | "accent-primary"
-  | "outline-primary"
-  | "neutral-primary"
-  | "link-primary"
-  | "danger"
-  | "accent-danger"
-  | "outline-danger"
-  | "link-danger"
-  | "tertiary-danger"
-  | "link-neutral";
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
 
-export type TButtonSizes = "sm" | "md" | "lg" | "xl";
+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 hover:bg-accent-primary-hover active:bg-accent-primary-active disabled:bg-layer-disabled text-on-color disabled:text-on-color-disabled",
+        "error-fill":
+          "bg-danger-primary hover:bg-danger-primary-hover active:bg-danger-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
+        "error-outline":
+          "bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover disabled:bg-layer-2 text-danger disabled:text-disabled border border-danger-strong disabled:border-subtle-1",
+        secondary:
+          "bg-layer-2 hover:bg-layer-2-hover active:bg-layer-2-active  disabled:bg-layer-transparent text-secondary disabled:text-disabled border border-strong disabled:border-subtle-1 shadow-raised-100",
+        tertiary:
+          "bg-layer-3 hover:bg-layer-3-hover active:bg-layer-3-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
+        ghost:
+          "bg-layer-transparent hover:bg-layer-transparent-hover active:bg-layer-transparent-active focus:bg-layer-transparent-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
+        link: "px-0 underline text-link-primary hover:text-link-primary-hover active:text-link-primary-hover focus:text-link-primary-hover disabled:text-disabled",
+      },
+      size: {
+        sm: "h-5 px-1.5 text-caption-md-medium rounded-sm",
+        base: "h-6 px-2 text-body-xs-medium rounded-md",
+        lg: "h-7 px-2 text-body-xs-medium rounded-md",
+        xl: "h-8 px-2 text-body-sm-medium rounded-md",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "base",
+    },
+  }
+);
 
-export interface IButtonStyling {
-  [key: string]: {
-    default: string;
-    hover: string;
-    pressed: string;
-    disabled: string;
+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 9596f24409..31e7fa5e9d 100644
--- a/packages/propel/src/button/index.ts
+++ b/packages/propel/src/button/index.ts
@@ -1,3 +1,3 @@
 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/root.tsx b/packages/propel/src/calendar/root.tsx
index e29bfd4a87..c754a06e4b 100644
--- a/packages/propel/src/calendar/root.tsx
+++ b/packages/propel/src/calendar/root.tsx
@@ -1,14 +1,12 @@
-"use client";
-
 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";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
-export const Calendar = ({ className, showOutsideDays = true, ...props }: CalendarProps) => {
+export function Calendar({ className, showOutsideDays = true, ...props }: CalendarProps) {
   const currentYear = new Date().getFullYear();
   const thirtyYearsAgoFirstDay = new Date(currentYear - 30, 0, 1);
   const thirtyYearsFromNowFirstDay = new Date(currentYear + 30, 11, 31);
@@ -35,4 +33,4 @@ export const Calendar = ({ className, showOutsideDays = true, ...props }: Calend
       {...props}
     />
   );
-};
+}
diff --git a/packages/propel/src/card/card.stories.tsx b/packages/propel/src/card/card.stories.tsx
index 62ae0e4bb8..aaeebd4bfe 100644
--- a/packages/propel/src/card/card.stories.tsx
+++ b/packages/propel/src/card/card.stories.tsx
@@ -11,8 +11,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-13 text-gray-600">This is a default card with shadow and large spacing.</p>
       </>
     ),
   },
@@ -28,8 +28,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-13 text-gray-600">Hover over this card to see the shadow effect.</p>
       </>
     ),
   },
@@ -40,8 +40,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-13 text-gray-600">This card has no shadow effect on hover.</p>
       </>
     ),
   },
@@ -52,8 +52,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-13 text-gray-600">This card uses small spacing (p-4).</p>
       </>
     ),
   },
@@ -64,8 +64,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-13 text-gray-600">This card uses large spacing (p-6).</p>
       </>
     ),
   },
@@ -76,9 +76,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-13 text-gray-600">Content is arranged vertically.</p>
+        <button className="rounded-sm bg-blue-500 px-4 py-2 text-on-color">Action</button>
       </>
     ),
   },
@@ -90,11 +90,11 @@ export const RowDirection: Story = {
     children: (
       <>
         <div className="flex-shrink-0">
-          <div className="h-12 w-12 rounded bg-blue-500" />
+          <div className="h-12 w-12 rounded-sm bg-blue-500" />
         </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-13 text-gray-600">Content is arranged horizontally.</p>
         </div>
       </>
     ),
@@ -108,12 +108,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="h-48 w-full rounded-sm bg-gray-200" />
+        <h3 className="text-18 font-bold">Product Name</h3>
+        <p className="text-13 text-gray-600">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="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">Add to Cart</button>
         </div>
       </>
     ),
@@ -129,9 +129,9 @@ export const UserCard: Story = {
       <>
         <div className="h-16 w-16 flex-shrink-0 rounded-full bg-blue-500" />
         <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-13 text-gray-600">Software Engineer</p>
+          <p className="text-11 text-gray-500">john.doe@example.com</p>
         </div>
       </>
     ),
@@ -147,9 +147,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-11 text-gray-500">2m ago</span>
         </div>
-        <p className="text-sm text-gray-600">You have received a new message from Alice.</p>
+        <p className="text-13 text-gray-600">You have received a new message from Alice.</p>
       </>
     ),
   },
@@ -161,11 +161,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-13 text-gray-600">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-13 text-gray-600">No shadow on hover</p>
         </Card>
       </div>
     );
@@ -178,11 +178,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-13 text-gray-600">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-13 text-gray-600">More generous padding</p>
         </Card>
       </div>
     );
@@ -195,14 +195,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-13 text-gray-600">Vertical layout</p>
+          <button className="w-fit rounded-sm bg-blue-500 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="h-12 w-12 flex-shrink-0 rounded-sm bg-blue-500" />
           <div>
             <h3 className="font-semibold">Row Direction</h3>
-            <p className="text-sm text-gray-600">Horizontal layout</p>
+            <p className="text-13 text-gray-600">Horizontal layout</p>
           </div>
         </Card>
       </div>
diff --git a/packages/propel/src/card/card.tsx b/packages/propel/src/card/card.tsx
index e17b252ebb..90223e2ae1 100644
--- a/packages/propel/src/card/card.tsx
+++ b/packages/propel/src/card/card.tsx
@@ -11,7 +11,7 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 
-const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
+const Card = React.forwardRef(function Card(props: CardProps, ref: React.ForwardedRef<HTMLDivElement>) {
   const {
     variant = ECardVariant.WITH_SHADOW,
     direction = ECardDirection.COLUMN,
diff --git a/packages/propel/src/card/helper.tsx b/packages/propel/src/card/helper.tsx
index 8b80d0d933..fabaeb74ee 100644
--- a/packages/propel/src/card/helper.tsx
+++ b/packages/propel/src/card/helper.tsx
@@ -18,11 +18,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/charts/area-chart/root.tsx b/packages/propel/src/charts/area-chart/root.tsx
index ab12abe57a..e5cad20295 100644
--- a/packages/propel/src/charts/area-chart/root.tsx
+++ b/packages/propel/src/charts/area-chart/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useMemo, useState } from "react";
 import { Area, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis, Line, ComposedChart, CartesianGrid } from "recharts";
 // plane imports
@@ -10,7 +8,9 @@ import { getLegendProps } from "../components/legend";
 import { CustomXAxisTick, CustomYAxisTick } from "../components/tick";
 import { CustomTooltip } from "../components/tooltip";
 
-export const AreaChart = React.memo(<K extends string, T extends string>(props: TAreaChartProps<K, T>) => {
+export const AreaChart = React.memo(function AreaChart<K extends string, T extends string>(
+  props: TAreaChartProps<K, T>
+) {
   const {
     data,
     areas,
@@ -112,7 +112,7 @@ export const AreaChart = React.memo(<K extends string, T extends string>(props:
             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 +163,7 @@ export const AreaChart = React.memo(<K extends string, T extends string>(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/bar-chart/bar.tsx b/packages/propel/src/charts/bar-chart/bar.tsx
index 1b25acda3e..d77e0bbe33 100644
--- a/packages/propel/src/charts/bar-chart/bar.tsx
+++ b/packages/propel/src/charts/bar-chart/bar.tsx
@@ -10,6 +10,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 {
@@ -54,7 +55,7 @@ const getBarPath = (x: number, y: number, width: number, height: number, topRadi
   Z
 `;
 
-const PercentageText = ({
+function PercentageText({
   x,
   y,
   percentage,
@@ -64,14 +65,16 @@ const PercentageText = ({
   y: number;
   percentage: number;
   className?: string;
-}) => (
-  <text x={x} y={y} textAnchor="middle" className={cn("text-xs font-medium", className)} fill="currentColor">
-    {percentage}%
-  </text>
-);
+}) {
+  return (
+    <text x={x} y={y} textAnchor="middle" className={cn("text-xs font-medium", className)} fill="currentColor">
+      {percentage}%
+    </text>
+  );
+}
 
 // Base Components
-const CustomBar = React.memo((props: TBarProps) => {
+const CustomBar = React.memo(function CustomBar(props: TBarProps) {
   const {
     opacity,
     fill,
@@ -107,9 +110,12 @@ const CustomBar = React.memo((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} />
@@ -118,7 +124,7 @@ const CustomBar = React.memo((props: TBarProps) => {
   );
 });
 
-const CustomBarLollipop = React.memo((props: TBarProps) => {
+const CustomBarLollipop = React.memo(function CustomBarLollipop(props: TBarProps) {
   const { fill, x, y, width, height, dataKey, stackKeys, payload, textClassName, showPercentage, dotted } = props;
 
   const currentBarPercentage = calculatePercentage(payload, stackKeys, dataKey);
@@ -170,6 +176,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/root.tsx b/packages/propel/src/charts/bar-chart/root.tsx
index 891ad7b389..2435d83186 100644
--- a/packages/propel/src/charts/bar-chart/root.tsx
+++ b/packages/propel/src/charts/bar-chart/root.tsx
@@ -1,6 +1,4 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-"use client";
-
 import React, { useCallback, useMemo, useState } from "react";
 import {
   BarChart as CoreBarChart,
@@ -19,11 +17,9 @@ 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";
+import { barShapeVariants, DEFAULT_BAR_FILL_COLOR } from "./bar";
 
-const DEFAULT_BAR_FILL_COLOR = "#000000";
-
-export const BarChart = React.memo(<K extends string, T extends string>(props: TBarChartProps<K, T>) => {
+export const BarChart = React.memo(function BarChart<K extends string, T extends string>(props: TBarChartProps<K, T>) {
   const {
     data,
     bars,
@@ -131,7 +127,7 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
           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) => {
@@ -178,8 +174,8 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
           {showTooltip && (
             <Tooltip
               cursor={{
-                fill: "currentColor",
-                className: "text-custom-background-90/80 cursor-pointer",
+                fill: "var(--color-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 c631ae89c7..d1b8f54335 100644
--- a/packages/propel/src/charts/components/legend.tsx
+++ b/packages/propel/src/charts/components/legend.tsx
@@ -31,12 +31,12 @@ export const getLegendProps = (args: TChartLegend): LegendProps => {
   };
 };
 
-const CustomLegend = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> &
+const CustomLegend = React.forwardRef(function CustomLegend(
+  props: React.ComponentProps<"div"> &
     Pick<LegendProps, "payload" | "formatter" | "onClick" | "onMouseEnter" | "onMouseLeave"> &
-    TChartLegend
->((props, ref) => {
+    TChartLegend,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
   const { formatter, layout, onClick, onMouseEnter, onMouseLeave, payload } = props;
 
   if (!payload?.length) return null;
@@ -51,7 +51,7 @@ const CustomLegend = React.forwardRef<
       {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-tertiary text-13 font-medium whitespace-nowrap", {
             "px-2": layout === "horizontal",
             "py-2": layout === "vertical",
             "pl-0 pt-0": index === 0,
@@ -63,7 +63,7 @@ const CustomLegend = React.forwardRef<
           onMouseLeave={(e) => onMouseLeave?.(item, index, e)}
         >
           <div
-            className="flex-shrink-0 size-2 rounded-sm"
+            className="flex-shrink-0 size-2 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 1a79ca3340..368b9c06d7 100644
--- a/packages/propel/src/charts/components/tick.tsx
+++ b/packages/propel/src/charts/components/tick.tsx
@@ -2,28 +2,40 @@
 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<any>(({ x, y, payload, getLabel }: any) => (
-  <g transform={`translate(${x},${y})`}>
-    <text y={0} dy={16} textAnchor="middle" className={AXIS_TICK_CLASSNAME}>
-      {getLabel ? getLabel(payload.value) : payload.value}
-    </text>
-  </g>
-));
+export const CustomXAxisTick = React.memo(function CustomXAxisTick({ x, y, payload, getLabel }: any) {
+  return (
+    <g transform={`translate(${x},${y})`}>
+      <text y={0} dy={16} textAnchor="middle" className={AXIS_TICK_CLASSNAME}>
+        {getLabel ? getLabel(payload.value) : payload.value}
+      </text>
+    </g>
+  );
+});
 CustomXAxisTick.displayName = "CustomXAxisTick";
 
-export const CustomYAxisTick = React.memo<any>(({ x, y, payload }: any) => (
-  <g transform={`translate(${x},${y})`}>
-    <text dx={-10} textAnchor="middle" className={AXIS_TICK_CLASSNAME}>
-      {payload.value}
-    </text>
-  </g>
-));
+export const CustomYAxisTick = React.memo(function CustomYAxisTick({ x, y, payload }: any) {
+  return (
+    <g transform={`translate(${x},${y})`}>
+      <text dx={-10} textAnchor="middle" className={AXIS_TICK_CLASSNAME}>
+        {payload.value}
+      </text>
+    </g>
+  );
+});
 
 CustomYAxisTick.displayName = "CustomYAxisTick";
 
-export const CustomRadarAxisTick = React.memo<any>(({ x, y, payload, getLabel, cx, cy, offset = 16 }: any) => {
+export const CustomRadarAxisTick = React.memo(function CustomRadarAxisTick({
+  x,
+  y,
+  payload,
+  getLabel,
+  cx,
+  cy,
+  offset = 16,
+}: any) {
   // Calculate direction vector from center to tick
   const dx = x - cx;
   const dy = y - cy;
diff --git a/packages/propel/src/charts/components/tooltip.tsx b/packages/propel/src/charts/components/tooltip.tsx
index 6fbc54cfb1..f36a912a1b 100644
--- a/packages/propel/src/charts/components/tooltip.tsx
+++ b/packages/propel/src/charts/components/tooltip.tsx
@@ -13,7 +13,7 @@ type Props = {
   itemDotColors: Record<string, string>;
 };
 
-export const CustomTooltip = React.memo((props: Props) => {
+export const CustomTooltip = React.memo(function CustomTooltip(props: Props) {
   const { active, activeKey, label, payload, itemKeys, itemLabels, itemDotColors } = props;
   // derived values
   const filteredPayload = payload?.filter((item) => item.dataKey && itemKeys.includes(`${item.dataKey}`));
@@ -25,31 +25,29 @@ export const CustomTooltip = React.memo((props: Props) => {
       className="flex flex-col max-h-[40vh] w-[12rem] overflow-y-scroll vertical-scrollbar scrollbar-sm"
       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 text-11 text-primary font-medium border-b border-subtle pb-2 truncate">{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="flex-shrink-0 size-2 rounded-xs"
                   style={{
                     backgroundColor: itemDotColors[item?.dataKey],
                   }}
                 />
               )}
-              <span className="text-custom-text-300 truncate">{itemLabels[item?.dataKey]}:</span>
+              <span className="text-tertiary truncate">{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/root.tsx b/packages/propel/src/charts/line-chart/root.tsx
index 8e9c1874cc..a4f1592d5b 100644
--- a/packages/propel/src/charts/line-chart/root.tsx
+++ b/packages/propel/src/charts/line-chart/root.tsx
@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-"use client";
-
 import React, { useMemo, useState } from "react";
 import {
   CartesianGrid,
@@ -20,7 +17,9 @@ import { getLegendProps } from "../components/legend";
 import { CustomXAxisTick, CustomYAxisTick } from "../components/tick";
 import { CustomTooltip } from "../components/tooltip";
 
-export const LineChart = React.memo(<K extends string, T extends string>(props: TLineChartProps<K, T>) => {
+export const LineChart = React.memo(function LineChart<K extends string, T extends string>(
+  props: TLineChartProps<K, T>
+) {
   const {
     data,
     lines,
@@ -99,7 +98,7 @@ export const LineChart = React.memo(<K extends string, T extends string>(props:
             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) => {
@@ -150,7 +149,7 @@ export const LineChart = React.memo(<K extends string, T extends string>(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/pie-chart/active-shape.tsx b/packages/propel/src/charts/pie-chart/active-shape.tsx
index 347f63923c..28e5a873ea 100644
--- a/packages/propel/src/charts/pie-chart/active-shape.tsx
+++ b/packages/propel/src/charts/pie-chart/active-shape.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Sector } from "recharts";
 import type { PieSectorDataItem } from "recharts/types/polar/Pie";
 
-export const CustomActiveShape = React.memo((props: PieSectorDataItem) => {
+export const CustomActiveShape = React.memo(function CustomActiveShape(props: PieSectorDataItem) {
   const { cx, cy, cornerRadius, innerRadius, outerRadius, startAngle, endAngle, fill } = props;
 
   return (
diff --git a/packages/propel/src/charts/pie-chart/root.tsx b/packages/propel/src/charts/pie-chart/root.tsx
index 528bfca3e6..f515268c2c 100644
--- a/packages/propel/src/charts/pie-chart/root.tsx
+++ b/packages/propel/src/charts/pie-chart/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React, { useMemo, useState } from "react";
 import { Cell, PieChart as CorePieChart, Label, Legend, Pie, ResponsiveContainer, Tooltip } from "recharts";
 // plane imports
@@ -9,7 +7,7 @@ import { getLegendProps } from "../components/legend";
 import { CustomActiveShape } from "./active-shape";
 import { CustomPieChartTooltip } from "./tooltip";
 
-export const PieChart = React.memo(<K extends string, T extends string>(props: TPieChartProps<K, T>) => {
+export const PieChart = React.memo(function PieChart<K extends string, T extends string>(props: TPieChartProps<K, T>) {
   const {
     data,
     dataKey,
@@ -86,7 +84,7 @@ export const PieChart = React.memo(<K extends string, T extends string>(props: T
                       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}
@@ -125,7 +123,7 @@ export const PieChart = React.memo(<K extends string, T extends string>(props: T
             <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 b79792ee39..3beec1a9a6 100644
--- a/packages/propel/src/charts/pie-chart/tooltip.tsx
+++ b/packages/propel/src/charts/pie-chart/tooltip.tsx
@@ -9,7 +9,7 @@ type Props = {
   payload: Payload<ValueType, NameType>[];
 };
 
-export const CustomPieChartTooltip = React.memo((props: Props) => {
+export const CustomPieChartTooltip = React.memo(function CustomPieChartTooltip(props: Props) {
   const { dotColor, label, payload } = props;
 
   return (
@@ -17,21 +17,19 @@ export const CustomPieChartTooltip = React.memo((props: Props) => {
       className="flex flex-col max-h-[40vh] w-[12rem] overflow-y-scroll vertical-scrollbar scrollbar-sm"
       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 text-11 text-primary font-medium border-b border-subtle pb-2 truncate">{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="flex-shrink-0 size-2 rounded-xs"
               style={{
                 backgroundColor: dotColor,
               }}
             />
-            <span className="text-custom-text-300 truncate">{item?.name}:</span>
+            <span className="text-tertiary truncate">{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/root.tsx b/packages/propel/src/charts/radar-chart/root.tsx
index b87320dd11..f7a2bc6cd9 100644
--- a/packages/propel/src/charts/radar-chart/root.tsx
+++ b/packages/propel/src/charts/radar-chart/root.tsx
@@ -13,7 +13,7 @@ import { getLegendProps } from "../components/legend";
 import { CustomRadarAxisTick } from "../components/tick";
 import { CustomTooltip } from "../components/tooltip";
 
-const RadarChart = <T extends string, K extends string>(props: TRadarChartProps<T, K>) => {
+function RadarChart<T extends string, K extends string>(props: TRadarChartProps<T, K>) {
   const { data, radars, margin, showTooltip, legend, className, angleAxis } = props;
 
   // states
@@ -37,12 +37,12 @@ const 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={{
@@ -90,6 +90,6 @@ const RadarChart = <T extends string, K extends string>(props: TRadarChartProps<
       </ResponsiveContainer>
     </div>
   );
-};
+}
 
 export { RadarChart };
diff --git a/packages/propel/src/charts/scatter-chart/root.tsx b/packages/propel/src/charts/scatter-chart/root.tsx
index 33119662a2..fa82677516 100644
--- a/packages/propel/src/charts/scatter-chart/root.tsx
+++ b/packages/propel/src/charts/scatter-chart/root.tsx
@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-"use client";
-
 import React, { useMemo, useState } from "react";
 import {
   CartesianGrid,
@@ -20,7 +17,9 @@ import { getLegendProps } from "../components/legend";
 import { CustomXAxisTick, CustomYAxisTick } from "../components/tick";
 import { CustomTooltip } from "../components/tooltip";
 
-export const ScatterChart = React.memo(<K extends string, T extends string>(props: TScatterChartProps<K, T>) => {
+export const ScatterChart = React.memo(function ScatterChart<K extends string, T extends string>(
+  props: TScatterChartProps<K, T>
+) {
   const {
     data,
     scatterPoints,
@@ -83,7 +82,7 @@ export const ScatterChart = React.memo(<K extends string, T extends string>(prop
             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) => {
@@ -134,7 +133,7 @@ export const ScatterChart = React.memo(<K extends string, T extends string>(prop
           {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/map-content.tsx b/packages/propel/src/charts/tree-map/map-content.tsx
index 1970a45fa5..f9baecd243 100644
--- a/packages/propel/src/charts/tree-map/map-content.tsx
+++ b/packages/propel/src/charts/tree-map/map-content.tsx
@@ -146,7 +146,7 @@ const truncateText = (text: string | number, maxWidth: number, fontSize: number,
   return `${stringText.slice(0, maxChars - 3)}...`;
 };
 
-export const CustomTreeMapContent: React.FC<any> = ({
+export function CustomTreeMapContent({
   x,
   y,
   width,
@@ -158,7 +158,7 @@ export const CustomTreeMapContent: React.FC<any> = ({
   fillClassName,
   textClassName,
   icon,
-}) => {
+}: any) {
   const dimensions = useMemo(() => {
     const pX = x + LAYOUT.PADDING;
     const pY = y + LAYOUT.PADDING;
@@ -208,7 +208,7 @@ export const CustomTreeMapContent: React.FC<any> = ({
               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 +221,7 @@ export const CustomTreeMapContent: React.FC<any> = ({
               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("text-13 font-light tracking-wider select-none", textClassName || "text-tertiary")}
               fill="currentColor"
             >
               {top.nameTruncated ? truncateText(name, availableTextWidth, LAYOUT.TEXT.FONT_SIZES.SM, iconSpace) : name}
@@ -240,10 +237,7 @@ export const CustomTreeMapContent: React.FC<any> = ({
                 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("text-13 font-light tracking-wider select-none", textClassName || "text-tertiary")}
                 fill="currentColor"
               >
                 {value.toLocaleString()}
@@ -273,4 +267,4 @@ export const CustomTreeMapContent: React.FC<any> = ({
       {renderContent()}
     </g>
   );
-};
+}
diff --git a/packages/propel/src/charts/tree-map/root.tsx b/packages/propel/src/charts/tree-map/root.tsx
index 2e4a734aa7..fab38a4cce 100644
--- a/packages/propel/src/charts/tree-map/root.tsx
+++ b/packages/propel/src/charts/tree-map/root.tsx
@@ -7,7 +7,7 @@ import { cn } from "../../utils/classname";
 import { CustomTreeMapContent } from "./map-content";
 import { TreeMapTooltip } from "./tooltip";
 
-export const TreeMapChart = React.memo((props: TreeMapChartProps) => {
+export const TreeMapChart = React.memo(function TreeMapChart(props: TreeMapChartProps) {
   const { data, className = "w-full h-96", isAnimationActive = false, showTooltip = true } = props;
   return (
     <div className={cn(className)}>
@@ -16,8 +16,8 @@ export const TreeMapChart = React.memo((props: TreeMapChartProps) => {
           data={data}
           nameKey="name"
           dataKey="value"
-          stroke="currentColor"
-          className="text-custom-background-100 bg-custom-background-100"
+          stroke="transparent"
+          className="bg-layer-1 cursor-pointer"
           content={<CustomTreeMapContent />}
           animationEasing="ease-out"
           isUpdateAnimationActive={isAnimationActive}
@@ -29,7 +29,7 @@ export const TreeMapChart = React.memo((props: TreeMapChartProps) => {
               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 17d4893fe5..af71656bdd 100644
--- a/packages/propel/src/charts/tree-map/tooltip.tsx
+++ b/packages/propel/src/charts/tree-map/tooltip.tsx
@@ -7,18 +7,18 @@ interface TreeMapTooltipProps {
   payload: any[] | undefined;
 }
 
-export const TreeMapTooltip = React.memo(({ active, payload }: TreeMapTooltipProps) => {
+export const TreeMapTooltip = React.memo(function TreeMapTooltip({ active, payload }: TreeMapTooltipProps) {
   if (!active || !payload || !payload[0]?.payload) return null;
 
   const data = payload[0].payload;
 
   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 text-primary font-medium 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 c7e7098575..2745166015 100644
--- a/packages/propel/src/collapsible/collapsible.stories.tsx
+++ b/packages/propel/src/collapsible/collapsible.stories.tsx
@@ -32,7 +32,7 @@ const meta = {
         </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>
+            <p className="text-13">This is the collapsible content that can be shown or hidden.</p>
           </div>
         </Collapsible.CollapsibleContent>
       </Collapsible.CollapsibleRoot>
@@ -56,13 +56,16 @@ 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="rounded-sm bg-blue-500 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="rounded-sm bg-gray-500 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="rounded-sm bg-green-500 px-4 py-2 text-13 text-on-color"
+          >
             Toggle
           </button>
         </div>
@@ -73,8 +76,8 @@ export const Controlled: Story = {
           </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>
+              <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>
@@ -95,10 +98,10 @@ export const NestedContent: Story = {
         <Collapsible.CollapsibleContent className="mt-2">
           <div className="space-y-2 rounded-md border border-gray-200 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,8 +118,8 @@ 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="flex w-full items-center justify-between rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 px-6 py-3 text-on-color shadow-lg transition-all hover:shadow-xl">
+          <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">
@@ -140,7 +143,7 @@ export const MultipleCollapsibles: Story = {
           </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>
+              <p className="text-13">Content for the first item.</p>
             </div>
           </Collapsible.CollapsibleContent>
         </Collapsible.CollapsibleRoot>
@@ -152,7 +155,7 @@ export const MultipleCollapsibles: Story = {
           </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>
+              <p className="text-13">Content for the second item.</p>
             </div>
           </Collapsible.CollapsibleContent>
         </Collapsible.CollapsibleRoot>
@@ -164,7 +167,7 @@ export const MultipleCollapsibles: Story = {
           </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>
+              <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 ec40775156..f8e25d383a 100644
--- a/packages/propel/src/collapsible/collapsible.tsx
+++ b/packages/propel/src/collapsible/collapsible.tsx
@@ -40,7 +40,7 @@ const useCollapsible = () => {
 };
 
 // Components
-const Root: React.FC<RootProps> = ({ children, className, isOpen: controlledIsOpen, onToggle, defaultOpen }) => {
+function Root({ children, className, isOpen: controlledIsOpen, onToggle, defaultOpen }: RootProps) {
   const [localIsOpen, setLocalIsOpen] = useState<boolean>(controlledIsOpen || defaultOpen || false);
 
   useEffect(() => {
@@ -69,9 +69,9 @@ const Root: React.FC<RootProps> = ({ children, className, isOpen: controlledIsOp
       </BaseCollapsible.Root>
     </CollapsibleContext.Provider>
   );
-};
+}
 
-const Trigger: React.FC<TriggerProps> = ({ children, className, buttonRef }) => {
+function Trigger({ children, className, buttonRef }: TriggerProps) {
   const { isOpen } = useCollapsible();
 
   return (
@@ -79,18 +79,20 @@ const Trigger: React.FC<TriggerProps> = ({ children, className, buttonRef }) =>
       {children}
     </BaseCollapsible.Trigger>
   );
-};
+}
 
-const Content: React.FC<ContentProps> = ({ children, className }) => (
-  <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",
-      className
-    )}
-  >
-    {children}
-  </BaseCollapsible.Panel>
-);
+function Content({ children, className }: ContentProps) {
+  return (
+    <BaseCollapsible.Panel
+      className={clsx(
+        "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
+      )}
+    >
+      {children}
+    </BaseCollapsible.Panel>
+  );
+}
 
 // Compound Component
 export const Collapsible = {
diff --git a/packages/propel/src/combobox/combobox.stories.tsx b/packages/propel/src/combobox/combobox.stories.tsx
index 5789514249..348b06e983 100644
--- a/packages/propel/src/combobox/combobox.stories.tsx
+++ b/packages/propel/src/combobox/combobox.stories.tsx
@@ -142,7 +142,7 @@ export const MultiSelectWithLimit: Story = {
             ))}
           </Combobox.Options>
         </Combobox>
-        <p className="text-xs text-gray-500">Maximum 3 selections allowed</p>
+        <p className="text-11 text-gray-500">Maximum 3 selections allowed</p>
       </div>
     );
   },
diff --git a/packages/propel/src/combobox/combobox.tsx b/packages/propel/src/combobox/combobox.tsx
index e2d6d005f7..101ba7545a 100644
--- a/packages/propel/src/combobox/combobox.tsx
+++ b/packages/propel/src/combobox/combobox.tsx
@@ -90,13 +90,16 @@ function ComboboxRoot({
 }
 
 // Trigger button component
-const ComboboxButton = React.forwardRef<HTMLButtonElement, ComboboxButtonProps>(
-  ({ className, children, disabled = false }, ref) => (
+const ComboboxButton = React.forwardRef(function ComboboxButton(
+  { className, children, disabled = false }: ComboboxButtonProps,
+  ref: React.ForwardedRef<HTMLButtonElement>
+) {
+  return (
     <BaseCombobox.Trigger ref={ref} disabled={disabled} className={className}>
       {children}
     </BaseCombobox.Trigger>
-  )
-);
+  );
+});
 
 // Options popup component
 function ComboboxOptions({
@@ -165,13 +168,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("rounded-md border border-subtle bg-surface-1 p-1 shadow-lg", 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" />
+                <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-placeholder" />
                 <input
                   type="text"
                   placeholder={searchPlaceholder}
@@ -179,7 +182,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 pl-8 pr-2 text-13 outline-none placeholder:text-placeholder",
                     inputClassName
                   )}
                 />
@@ -195,7 +198,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>
@@ -210,7 +213,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 outline-none transition-colors", className)}
     >
       {children}
     </BaseCombobox.Item>
diff --git a/packages/propel/src/command/command.stories.tsx b/packages/propel/src/command/command.stories.tsx
index 9f41c9b4b9..dd04c02df3 100644
--- a/packages/propel/src/command/command.stories.tsx
+++ b/packages/propel/src/command/command.stories.tsx
@@ -24,13 +24,13 @@ 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.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="cursor-pointer rounded-sm px-3 py-2 hover:bg-gray-100">Item 1</Command.Item>
+          <Command.Item className="cursor-pointer rounded-sm px-3 py-2 hover:bg-gray-100">Item 2</Command.Item>
+          <Command.Item className="cursor-pointer rounded-sm px-3 py-2 hover:bg-gray-100">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="py-6 text-center text-13 text-gray-500">No results found.</Command.Empty>
       </Command>
     );
   },
@@ -42,27 +42,27 @@ export const WithIcons: Story = {
       <Command className="w-96 rounded-lg border border-gray-200 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="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100">
             <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="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100">
             <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="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100">
             <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="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100">
             <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="py-6 text-center text-13 text-gray-500">No files or folders found.</Command.Empty>
       </Command>
     );
   },
@@ -74,30 +74,30 @@ export const WithCategories: Story = {
       <Command className="w-96 rounded-lg border border-gray-200 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="px-2 py-1.5 text-11 font-semibold text-gray-500">User</div>
+          <Command.Item className="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100">
             <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="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100">
             <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="mt-2 px-2 py-1.5 text-11 font-semibold text-gray-500">Files</div>
+          <Command.Item className="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100">
             <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="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100">
             <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="py-6 text-center text-13 text-gray-500">No commands found.</Command.Empty>
       </Command>
     );
   },
@@ -107,11 +107,11 @@ 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.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="py-6 text-center text-13 text-gray-500">
           <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>
     );
@@ -122,15 +122,15 @@ 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.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="cursor-pointer rounded-sm px-3 py-2 hover:bg-gray-100">
               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="py-6 text-center text-13 text-gray-500">No results found.</Command.Empty>
       </Command>
     );
   },
@@ -141,15 +141,15 @@ export const WithoutSearch: Story = {
     return (
       <Command className="w-96 rounded-lg border border-gray-200 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="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100">
             <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="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100">
             <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="flex cursor-pointer items-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100">
             <Folder className="h-4 w-4" />
             <span>Files</span>
           </Command.Item>
@@ -165,20 +165,20 @@ export const CustomStyling: Story = {
       <Command className="w-96 rounded-lg border-2 border-blue-300 bg-blue-50 p-2 shadow-lg">
         <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="h-9 w-full bg-transparent py-3 text-13 text-blue-900 outline-none placeholder:text-blue-400"
         />
         <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="cursor-pointer rounded-sm px-3 py-2 text-blue-900 hover:bg-blue-200">
             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="cursor-pointer rounded-sm px-3 py-2 text-blue-900 hover:bg-blue-200">
             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="cursor-pointer rounded-sm px-3 py-2 text-blue-900 hover:bg-blue-200">
             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="py-6 text-center text-13 text-blue-500">No matching items found.</Command.Empty>
       </Command>
     );
   },
@@ -188,15 +188,15 @@ 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.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="cursor-pointer rounded-sm px-3 py-2 hover:bg-gray-100">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="cursor-pointer rounded-sm px-3 py-2 hover:bg-gray-100">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="py-6 text-center text-13 text-gray-500">No results found.</Command.Empty>
       </Command>
     );
   },
diff --git a/packages/propel/src/command/command.tsx b/packages/propel/src/command/command.tsx
index e462a7f2d7..710a3f4cca 100644
--- a/packages/propel/src/command/command.tsx
+++ b/packages/propel/src/command/command.tsx
@@ -11,9 +11,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/context-menu/context-menu.stories.tsx b/packages/propel/src/context-menu/context-menu.stories.tsx
index a378dbd196..8281a598b4 100644
--- a/packages/propel/src/context-menu/context-menu.stories.tsx
+++ b/packages/propel/src/context-menu/context-menu.stories.tsx
@@ -33,7 +33,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,7 +56,7 @@ 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>
@@ -95,7 +95,7 @@ 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>
@@ -141,7 +141,7 @@ 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>
@@ -180,14 +180,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 p-4 border border-subtle rounded-lg hover:bg-layer-1 cursor-pointer">
             <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="w-12 h-12 bg-accent-primary rounded-sm flex items-center justify-center text-on-color text-16">
                 📄
               </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>
@@ -227,10 +227,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 w-80 h-56 bg-layer-1 rounded-lg overflow-hidden cursor-pointer">
+            <div className="absolute inset-0 flex items-center justify-center text-placeholder">Image Placeholder</div>
           </div>
         </ContextMenu.Trigger>
         <ContextMenu.Portal>
@@ -261,9 +259,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 p-6 border border-subtle rounded-lg">
+            <h3 className="text-16 font-semibold mb-2">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>
@@ -293,7 +291,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>
@@ -344,7 +342,7 @@ 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>
@@ -353,23 +351,23 @@ export const WithKeyboardShortcuts: Story = {
             <ContextMenu.Item>
               <Copy 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>
+              <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 60e05f1bab..82ae12d4b5 100644
--- a/packages/propel/src/context-menu/context-menu.tsx
+++ b/packages/propel/src/context-menu/context-menu.tsx
@@ -16,6 +16,7 @@ export interface ContextMenuContentProps extends React.ComponentProps<typeof Con
   className?: string;
   side?: "top" | "right" | "bottom" | "left";
   sideOffset?: number;
+  positionerClassName?: string;
 }
 
 export interface ContextMenuItemProps extends React.ComponentProps<typeof ContextMenuPrimitive.Item> {
@@ -24,48 +25,64 @@ export interface ContextMenuItemProps extends React.ComponentProps<typeof Contex
   disabled?: boolean;
 }
 
-const ContextMenuRoot = React.forwardRef<React.ElementRef<typeof ContextMenuPrimitive.Root>, ContextMenuProps>(
-  ({ children, ...props }, _ref) => <ContextMenuPrimitive.Root {...props}>{children}</ContextMenuPrimitive.Root>
-);
+const ContextMenuRoot = React.forwardRef(function ContextMenuRoot(
+  { children, ...props }: ContextMenuProps,
+  _ref: React.ForwardedRef<React.ElementRef<typeof ContextMenuPrimitive.Root>>
+) {
+  return <ContextMenuPrimitive.Root {...props}>{children}</ContextMenuPrimitive.Root>;
+});
 
-const ContextMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Trigger>,
-  ContextMenuTriggerProps
->(({ className, children, ...props }, ref) => (
-  <ContextMenuPrimitive.Trigger ref={ref} className={cn("outline-none", className)} {...props}>
-    {children}
-  </ContextMenuPrimitive.Trigger>
-));
+const ContextMenuTrigger = React.forwardRef(function ContextMenuTrigger(
+  { className, children, ...props }: ContextMenuTriggerProps,
+  ref: React.ForwardedRef<React.ElementRef<typeof ContextMenuPrimitive.Trigger>>
+) {
+  return (
+    <ContextMenuPrimitive.Trigger ref={ref} className={cn("outline-none", className)} {...props}>
+      {children}
+    </ContextMenuPrimitive.Trigger>
+  );
+});
 
 const ContextMenuPortal = ContextMenuPrimitive.Portal;
 
-const ContextMenuContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Positioner>,
-  ContextMenuContentProps
->(({ className, children, side = "bottom", sideOffset = 4, ...props }, ref) => (
-  <ContextMenuPrimitive.Positioner ref={ref} side={side} sideOffset={sideOffset} {...props}>
-    <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",
-        "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",
-        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
-      )}
+const ContextMenuContent = React.forwardRef(function ContextMenuContent(
+  { positionerClassName, className, children, side = "bottom", sideOffset = 4, ...props }: ContextMenuContentProps,
+  ref: React.ForwardedRef<React.ElementRef<typeof ContextMenuPrimitive.Positioner>>
+) {
+  return (
+    <ContextMenuPrimitive.Positioner
+      ref={ref}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+      className={positionerClassName}
     >
-      {children}
-    </ContextMenuPrimitive.Popup>
-  </ContextMenuPrimitive.Positioner>
-));
+      <ContextMenuPrimitive.Popup
+        className={cn(
+          "z-50 min-w-32 overflow-hidden rounded-md border border-subtle bg-surface-1 p-1 shadow-md",
+          "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",
+          "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          className
+        )}
+      >
+        {children}
+      </ContextMenuPrimitive.Popup>
+    </ContextMenuPrimitive.Positioner>
+  );
+});
 
-const ContextMenuItem = React.forwardRef<React.ElementRef<typeof ContextMenuPrimitive.Item>, ContextMenuItemProps>(
-  ({ className, disabled, children, ...props }, ref) => (
+const ContextMenuItem = React.forwardRef(function ContextMenuItem(
+  { className, disabled, children, ...props }: ContextMenuItemProps,
+  ref: React.ForwardedRef<React.ElementRef<typeof ContextMenuPrimitive.Item>>
+) {
+  return (
     <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 select-none items-center rounded-xs px-2 py-1.5 text-13 outline-none",
+        "focus:bg-surface-2 focus:text-primary",
         "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         className
       )}
@@ -74,38 +91,38 @@ const ContextMenuItem = React.forwardRef<React.ElementRef<typeof ContextMenuPrim
     >
       {children}
     </ContextMenuPrimitive.Item>
-  )
-);
+  );
+});
 
-const ContextMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
-  React.ComponentProps<typeof ContextMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-custom-border-200", className)}
-    {...props}
-  />
-));
+const ContextMenuSeparator = React.forwardRef(function ContextMenuSeparator(
+  { className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>,
+  ref: React.ForwardedRef<React.ElementRef<typeof ContextMenuPrimitive.Separator>>
+) {
+  return (
+    <ContextMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-subtle-1", className)} {...props} />
+  );
+});
 
 const ContextMenuSubmenu = ContextMenuPrimitive.SubmenuRoot;
 
-const ContextMenuSubmenuTrigger = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubmenuTrigger>,
-  React.ComponentProps<typeof ContextMenuPrimitive.SubmenuTrigger>
->(({ className, children, ...props }, ref) => (
-  <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",
-      className
-    )}
-    {...props}
-  >
-    {children}
-  </ContextMenuPrimitive.SubmenuTrigger>
-));
+const ContextMenuSubmenuTrigger = React.forwardRef(function ContextMenuSubmenuTrigger(
+  { className, children, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.SubmenuTrigger>,
+  ref: React.ForwardedRef<React.ElementRef<typeof ContextMenuPrimitive.SubmenuTrigger>>
+) {
+  return (
+    <ContextMenuPrimitive.SubmenuTrigger
+      ref={ref}
+      className={cn(
+        "flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-13 outline-none focus:outline-none",
+        "focus:bg-surface-2 data-[state=open]:bg-surface-2",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ContextMenuPrimitive.SubmenuTrigger>
+  );
+});
 
 ContextMenuRoot.displayName = "ContextMenu";
 ContextMenuTrigger.displayName = "ContextMenuTrigger";
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 0000000000..be7a9b3f9c
--- /dev/null
+++ b/packages/propel/src/design-system/design-system-philosophy.stories.tsx
@@ -0,0 +1,428 @@
+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" ? "border-red-500 bg-red-50 p-4" : "border-subtle bg-layer-1 p-4"}`}
+  >
+    <h3 className={`text-primary mb-2 text-16 font-semibold`}>{title}</h3>
+    <div className="text-secondary text-13">{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="text-primary mb-2 font-semibold">Page Content (bg-surface-1)</h4>
+        <p className="text-secondary text-13">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="text-primary mb-2 font-semibold">Surface 1</h4>
+          <p className="text-secondary text-13">This is bg-surface-1 - a primary surface</p>
+        </Surface>
+
+        <Surface className="bg-surface-2 rounded-md p-6">
+          <h4 className="text-primary mb-2 font-semibold">Surface 2</h4>
+          <p className="text-secondary text-13">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="text-primary mb-3 font-semibold">Surface 1</h4>
+
+        <Layer className="bg-layer-1 hover:bg-layer-1-hover mb-4 rounded-md p-4">
+          <h5 className="text-primary mb-2 font-medium">Layer 1 (First level of depth)</h5>
+          <p className="text-secondary mb-3 text-13">Hover over me to see the hover state</p>
+
+          <Layer className="bg-layer-2 hover:bg-layer-2-hover rounded-md p-3">
+            <h6 className="text-primary mb-2 text-13 font-medium">Layer 2 (Second level)</h6>
+            <p className="text-secondary mb-2 text-13">Nested within Layer 1</p>
+
+            <Layer className="bg-layer-3 hover:bg-layer-3-hover rounded-md p-2" hover>
+              <p className="text-primary text-11 font-medium">Layer 3 (Third level)</p>
+              <p className="text-secondary text-11">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="text-primary mb-3 font-semibold">Surface 1</h4>
+          <Layer className="bg-layer-1 hover:bg-layer-1-hover rounded-md p-4">
+            <h5 className="text-primary mb-1 font-medium">Layer 1</h5>
+            <p className="text-secondary text-13">Correctly using layer-1 with surface-1</p>
+          </Layer>
+        </Surface>
+
+        <Surface className="bg-surface-2 rounded-md p-6">
+          <h4 className="text-primary mb-3 font-semibold">Surface 2</h4>
+          <Layer className="bg-layer-2 hover:bg-layer-2-hover rounded-md p-4">
+            <h5 className="text-primary mb-1 font-medium">Layer 2</h5>
+            <p className="text-secondary text-13">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="text-primary mb-3 font-semibold">Modal with Input (Rare Exception)</h4>
+          <div className="space-y-3">
+            <div>
+              <label htmlFor="example-input" className="text-secondary text-13">
+                Name
+              </label>
+              <input
+                id="example-input"
+                className="w-full bg-layer-2 border border-subtle rounded-md px-3 py-2 text-primary mt-1"
+                placeholder="Input uses layer-2 for visual separation"
+              />
+              <p className="text-tertiary text-11 mt-1">
+                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="text-primary mb-2 font-semibold">Main Page Content</h4>
+        <p className="text-secondary text-13">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="bg-backdrop absolute inset-0" />
+        <div className="bg-surface-1 relative z-10 max-w-md rounded-lg p-6 shadow-lg">
+          <h4 className="text-primary mb-3 font-semibold">Modal Dialog</h4>
+          <p className="text-secondary mb-4 text-13">
+            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="bg-layer-1 hover:bg-layer-1-hover rounded-md p-3">
+            <p className="text-primary text-13">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="text-primary mb-4 font-semibold">Task List</h4>
+        <div className="space-y-3">
+          {[1, 2, 3].map((item) => (
+            <Layer key={item} className="bg-layer-1 hover:bg-layer-1-hover rounded-md p-4">
+              <h5 className="text-primary mb-1 font-medium">Task {item}</h5>
+              <p className="text-secondary text-13">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="bg-surface-1 flex rounded-md">
+        <aside className="border-subtle w-64 border-r p-4">
+          <h4 className="text-primary mb-3 font-semibold">Sidebar</h4>
+          <div className="space-y-2">
+            {["Home", "Projects", "Settings"].map((item) => (
+              <div key={item} className="hover:bg-layer-1-hover rounded-md p-2 transition-colors">
+                <p className="text-primary text-13">{item}</p>
+              </div>
+            ))}
+          </div>
+        </aside>
+
+        <main className="flex-1 p-6">
+          <h4 className="text-primary mb-3 font-semibold">Main Content</h4>
+          <Layer className="bg-layer-1 hover:bg-layer-1-hover rounded-md p-4">
+            <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="bg-layer-1 hover:bg-layer-1-hover rounded-md p-4">
+            <h5 className="text-primary mb-1 font-medium">Hover State</h5>
+            <p className="text-secondary text-13">Hover over me to see bg-layer-1-hover</p>
+          </Layer>
+
+          <div className="bg-layer-1-active rounded-md p-4">
+            <h5 className="text-primary mb-1 font-medium">Active State</h5>
+            <p className="text-secondary text-13">Using bg-layer-1-active (pressed/active)</p>
+          </div>
+
+          <div className="bg-layer-1-selected rounded-md p-4">
+            <h5 className="text-primary mb-1 font-medium">Selected State</h5>
+            <p className="text-secondary text-13">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="bg-layer-1 rounded-md p-4">
+          <h4 className="text-primary mb-3 text-16 font-semibold">Primary Text</h4>
+          <p className="text-secondary mb-3">Secondary text for descriptions and supporting content</p>
+          <p className="text-tertiary mb-3 text-13">Tertiary text for labels and metadata</p>
+          <input
+            className="placeholder-(--text-color-placeholder) border-subtle rounded border px-3 py-2"
+            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="bg-surface-1 mb-6 rounded-md">
+        <div className="border-subtle border-b p-4">
+          <h1 className="text-primary text-18 font-bold">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="bg-layer-1 hover:bg-layer-1-hover rounded-md p-4">
+              <p className="text-tertiary mb-1 text-13">{stat.label}</p>
+              <p className="text-primary text-20 font-bold">{stat.value}</p>
+            </Layer>
+          </Surface>
+        ))}
+      </div>
+
+      <div className="mt-6 grid grid-cols-2 gap-6">
+        <Surface>
+          <h3 className="text-primary mb-4 font-semibold">Recent Activity</h3>
+          <div className="space-y-2">
+            {[1, 2, 3].map((item) => (
+              <Layer key={item} className="bg-layer-1 hover:bg-layer-1-hover rounded-md p-3">
+                <p className="text-primary mb-1 text-13 font-medium">Activity {item}</p>
+                <p className="text-secondary text-11">Description of the activity</p>
+              </Layer>
+            ))}
+          </div>
+        </Surface>
+
+        <Surface className="bg-surface-2 rounded-md p-6">
+          <h3 className="text-primary mb-4 font-semibold">Quick Actions</h3>
+          <div className="space-y-2">
+            {["Create Project", "Invite Team", "View Reports"].map((action) => (
+              <Layer key={action} className="bg-layer-2 hover:bg-layer-2-hover rounded-md p-3">
+                <p className="text-primary text-13">{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="border-2 border-red-500 rounded-md p-4">
+          <h4 className="text-primary mb-2 font-semibold">❌ Mistake 1: Nested Surfaces (Same Plane)</h4>
+          <Surface>
+            <p className="text-secondary mb-2 text-13">Surface 1</p>
+            <div className="bg-surface-2 rounded-md p-4">
+              <p className="text-secondary text-13">Surface 2 nested inside Surface 1 - WRONG!</p>
+            </div>
+          </Surface>
+          <p className="text-tertiary mt-2 text-11">
+            ✅ Fix: Use bg-layer-1 for nested elements, or make them sibling surfaces
+          </p>
+        </div>
+
+        <div className="border-2 border-red-500 rounded-md p-4">
+          <h4 className="text-primary mb-2 font-semibold">❌ Mistake 2: Wrong Layer-Surface Association</h4>
+          <Surface>
+            <p className="text-secondary mb-2 text-13">Surface 1</p>
+            <div className="bg-layer-2 rounded-md p-4">
+              <p className="text-secondary text-13">Using layer-2 with surface-1 for content box - WRONG!</p>
+            </div>
+          </Surface>
+          <p className="text-tertiary mt-2 text-11">
+            ✅ 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="border-2 border-red-500 rounded-md p-4">
+          <h4 className="text-primary mb-2 font-semibold">❌ Mistake 3: Mismatched Hover State</h4>
+          <Surface>
+            <div className="bg-layer-1 hover:bg-layer-2-hover rounded-md p-4 transition-colors">
+              <p className="text-secondary text-13">bg-layer-1 with hover:bg-layer-2-hover - WRONG!</p>
+            </div>
+          </Surface>
+          <p className="text-tertiary mt-2 text-11">✅ Fix: Use bg-layer-1 hover:bg-layer-1-hover</p>
+        </div>
+
+        <div className="border-2 border-red-500 rounded-md p-4">
+          <h4 className="text-primary mb-2 font-semibold">❌ Mistake 4: Canvas for Pages</h4>
+          <div className="bg-canvas rounded-md p-4">
+            <p className="text-secondary text-13">Using bg-canvas for a page or component - WRONG!</p>
+          </div>
+          <p className="text-tertiary mt-2 text-11">
+            ✅ 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 cf9ccff56d..0931193436 100644
--- a/packages/propel/src/dialog/dialog.stories.tsx
+++ b/packages/propel/src/dialog/dialog.stories.tsx
@@ -26,7 +26,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600"
+        >
           Open Dialog
         </button>
         {open && (
@@ -35,18 +38,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-13 text-gray-600">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="rounded-sm bg-gray-200 px-4 py-2 text-13 hover:bg-gray-300"
                   >
                     Cancel
                   </button>
                   <button
                     onClick={() => setOpen(false)}
-                    className="rounded bg-blue-500 px-4 py-2 text-sm text-white hover:bg-blue-600"
+                    className="rounded-sm bg-blue-500 px-4 py-2 text-13 text-on-color hover:bg-blue-600"
                   >
                     Confirm
                   </button>
@@ -74,7 +77,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600"
+        >
           Open Dialog (Top)
         </button>
         {open && (
@@ -83,14 +89,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-13 text-gray-600">
                     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="rounded-sm bg-gray-200 px-4 py-2 text-13 hover:bg-gray-300"
                   >
                     Close
                   </button>
@@ -109,7 +115,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600"
+        >
           Open Small Dialog
         </button>
         {open && (
@@ -118,12 +127,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-13 text-gray-600">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="rounded-sm bg-blue-500 px-4 py-2 text-13 text-on-color hover:bg-blue-600"
                   >
                     Close
                   </button>
@@ -142,7 +151,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600"
+        >
           Open Large Dialog
         </button>
         {open && (
@@ -151,14 +163,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-13 text-gray-600">
                     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="rounded-sm bg-blue-500 px-4 py-2 text-13 text-on-color hover:bg-blue-600"
                   >
                     Close
                   </button>
@@ -177,7 +189,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600"
+        >
           Open Dialog with Close Button
         </button>
         {open && (
@@ -191,7 +206,7 @@ export const WithCloseButton: Story = {
                   </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-13 text-gray-600">This dialog has a close button in the header.</p>
                 </div>
               </div>
             </Dialog.Panel>
@@ -211,7 +226,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="rounded-sm bg-red-500 px-4 py-2 text-on-color hover:bg-red-600"
+        >
           Delete Item
         </button>
         {open && (
@@ -220,20 +238,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-13 text-gray-600">
                     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="rounded-sm bg-gray-200 px-4 py-2 text-13 hover:bg-gray-300"
                   >
                     Cancel
                   </button>
                   <button
                     onClick={handleConfirm}
-                    className="rounded bg-red-500 px-4 py-2 text-sm text-white hover:bg-red-600"
+                    className="rounded-sm bg-red-500 px-4 py-2 text-13 text-on-color hover:bg-red-600"
                   >
                     Delete
                   </button>
@@ -257,7 +275,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600"
+        >
           Open Form
         </button>
         {open && (
@@ -267,24 +288,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="block text-13 font-medium text-gray-700">
                       Name
                     </label>
                     <input
                       type="text"
                       id="name"
-                      className="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm"
+                      className="mt-1 w-full rounded-sm border border-gray-300 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="block text-13 font-medium text-gray-700">
                       Description
                     </label>
                     <textarea
                       id="description"
                       rows={3}
-                      className="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm"
+                      className="mt-1 w-full rounded-sm border border-gray-300 px-3 py-2 text-13"
                       placeholder="Enter description"
                     />
                   </div>
@@ -293,11 +314,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="rounded-sm bg-gray-200 px-4 py-2 text-13 hover:bg-gray-300"
                   >
                     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="rounded-sm bg-blue-500 px-4 py-2 text-13 text-on-color hover:bg-blue-600"
+                  >
                     Create
                   </button>
                 </div>
@@ -315,7 +339,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600"
+        >
           Open Scrollable Dialog
         </button>
         {open && (
@@ -325,7 +352,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="mb-2 text-13 text-gray-600">
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
                       labore et dolore magna aliqua.
                     </p>
@@ -334,7 +361,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="rounded-sm bg-blue-500 px-4 py-2 text-13 text-on-color hover:bg-blue-600"
                   >
                     Close
                   </button>
@@ -368,7 +395,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="rounded-sm bg-blue-500 px-4 py-2 text-13 text-on-color hover:bg-blue-600"
           >
             {label}
           </button>
@@ -379,12 +406,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-13 text-gray-600">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="rounded-sm bg-blue-500 px-4 py-2 text-13 text-on-color hover:bg-blue-600"
                   >
                     Close
                   </button>
diff --git a/packages/propel/src/dialog/root.tsx b/packages/propel/src/dialog/root.tsx
index e806f1659e..4dfb2d7e99 100644
--- a/packages/propel/src/dialog/root.tsx
+++ b/packages/propel/src/dialog/root.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { forwardRef, memo, useMemo } from "react";
 import { Dialog as BaseDialog } from "@base-ui-components/react";
 import { cn } from "../utils/classname";
@@ -37,69 +35,91 @@ 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("isolate fixed 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",
   });
 
-const DialogPortal = memo<React.ComponentProps<typeof BaseDialog.Portal>>(({ children, ...props }) => (
-  <BaseDialog.Portal data-slot="dialog-portal" {...props}>
-    {children}
-  </BaseDialog.Portal>
-));
+const DialogPortal = memo(function DialogPortal({
+  children,
+  ...props
+}: React.ComponentProps<typeof BaseDialog.Portal>) {
+  return (
+    <BaseDialog.Portal data-slot="dialog-portal" {...props}>
+      {children}
+    </BaseDialog.Portal>
+  );
+});
 DialogPortal.displayName = "DialogPortal";
 
-const DialogOverlay = memo<React.ComponentProps<typeof BaseDialog.Backdrop>>(({ className, ...props }) => (
-  <BaseDialog.Backdrop data-slot="dialog-overlay" className={cn(OVERLAY_CLASSNAME, className)} {...props} />
-));
+const DialogOverlay = memo(function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof BaseDialog.Backdrop>) {
+  return <BaseDialog.Backdrop data-slot="dialog-overlay" className={cn(OVERLAY_CLASSNAME, className)} {...props} />;
+});
 DialogOverlay.displayName = "DialogOverlay";
 
-const DialogComponent = memo<DialogProps>(({ children, ...props }) => (
-  <BaseDialog.Root data-slot="dialog" {...props}>
-    {children}
-  </BaseDialog.Root>
-));
+const DialogComponent = memo(function DialogComponent({ children, ...props }: DialogProps) {
+  return (
+    <BaseDialog.Root data-slot="dialog" {...props}>
+      {children}
+    </BaseDialog.Root>
+  );
+});
 DialogComponent.displayName = "Dialog";
 
-const DialogTrigger = memo<React.ComponentProps<typeof BaseDialog.Trigger>>(({ children, ...props }) => (
-  <BaseDialog.Trigger data-slot="dialog-trigger" {...props}>
-    {children}
-  </BaseDialog.Trigger>
-));
+const DialogTrigger = memo(function DialogTrigger({
+  children,
+  ...props
+}: React.ComponentProps<typeof BaseDialog.Trigger>) {
+  return (
+    <BaseDialog.Trigger data-slot="dialog-trigger" {...props}>
+      {children}
+    </BaseDialog.Trigger>
+  );
+});
 DialogTrigger.displayName = "DialogTrigger";
 
-const DialogPanel = forwardRef<React.ElementRef<typeof BaseDialog.Popup>, DialogPanelProps>(
-  ({ className, width = EDialogWidth.XXL, children, position = "center", ...props }, ref) => {
-    const positionClassNames = useMemo(() => getPositionClassNames(position), [position]);
-    return (
-      <DialogPortal>
-        <DialogOverlay />
-        <BaseDialog.Popup
-          ref={ref}
-          data-slot="dialog-content"
-          className={cn(BASE_CLASSNAME, positionClassNames, width, className)}
-          role="dialog"
-          aria-modal="true"
-          {...props}
-        >
-          {children}
-        </BaseDialog.Popup>
-      </DialogPortal>
-    );
-  }
-);
+const DialogPanel = forwardRef(function DialogPanel(
+  { className, width = EDialogWidth.XXL, children, position = "center", ...props }: DialogPanelProps,
+  ref: React.ForwardedRef<React.ElementRef<typeof BaseDialog.Popup>>
+) {
+  const positionClassNames = useMemo(() => getPositionClassNames(position), [position]);
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <BaseDialog.Popup
+        ref={ref}
+        data-slot="dialog-content"
+        className={cn(BASE_CLASSNAME, positionClassNames, width, className)}
+        role="dialog"
+        aria-modal="true"
+        {...props}
+      >
+        {children}
+      </BaseDialog.Popup>
+    </DialogPortal>
+  );
+});
 DialogPanel.displayName = "DialogPanel";
 
-const DialogTitle = memo<DialogTitleProps>(({ className, children, ...props }) => (
-  <BaseDialog.Title data-slot="dialog-title" className={cn("text-lg leading-none font-semibold", className)} {...props}>
-    {children}
-  </BaseDialog.Title>
-));
+const DialogTitle = memo(function DialogTitle({ className, children, ...props }: DialogTitleProps) {
+  return (
+    <BaseDialog.Title
+      data-slot="dialog-title"
+      className={cn("text-16 leading-none font-semibold", className)}
+      {...props}
+    >
+      {children}
+    </BaseDialog.Title>
+  );
+});
 
 DialogTitle.displayName = "DialogTitle";
 
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 87e4b23e1d..d079697d65 100644
--- a/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx
+++ b/packages/propel/src/emoji-icon-picker/emoji-picker.stories.tsx
@@ -38,9 +38,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="text-13 p-4 bg-layer-1 rounded-sm border border-subtle">
             <div className="font-medium mb-2">Selected:</div>
-            <pre className="text-xs">{JSON.stringify(selectedValue, null, 2)}</pre>
+            <pre className="text-11">{JSON.stringify(selectedValue, null, 2)}</pre>
           </div>
         )}
       </div>
@@ -70,7 +70,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 +99,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 +134,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="text-13 p-4 bg-layer-1 rounded-sm border border-subtle">
             <div className="font-medium mb-2">Selected Icon:</div>
-            <pre className="text-xs">{JSON.stringify(selectedValue, null, 2)}</pre>
+            <pre className="text-11">{JSON.stringify(selectedValue, null, 2)}</pre>
           </div>
         )}
       </div>
@@ -167,9 +167,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="text-13 p-4 bg-layer-1 rounded-sm border border-subtle">
             <div className="font-medium mb-2">Selected Icon:</div>
-            <pre className="text-xs">{JSON.stringify(selectedValue, null, 2)}</pre>
+            <pre className="text-11">{JSON.stringify(selectedValue, null, 2)}</pre>
           </div>
         )}
       </div>
@@ -204,18 +204,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="px-3 py-1.5 text-13 bg-layer-1 rounded-sm 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="text-13 p-4 bg-layer-1 rounded-sm border border-subtle">
             <div className="font-medium mb-2">Selected ({selectedValues.length}):</div>
             <div className="flex gap-2 flex-wrap">
               {selectedValues.map((val, idx) => (
-                <span key={idx} className="text-lg">
+                <span key={idx} className="text-16">
                   {val.type === "emoji" ? val.value : "🎨"}
                 </span>
               ))}
@@ -249,7 +249,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 +277,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 +306,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="text-13 p-4 bg-layer-1 rounded-sm border border-subtle">
+            <pre className="text-11">{JSON.stringify(selectedValue, null, 2)}</pre>
           </div>
         )}
       </div>
@@ -331,7 +331,7 @@ export const DifferentPlacements: Story = {
     return (
       <div className="p-8 space-y-8">
         <div className="flex gap-4 items-center">
-          <span className="text-sm w-32">Bottom Start:</span>
+          <span className="text-13 w-32">Bottom Start:</span>
           <EmojiPicker
             isOpen={isOpen1}
             handleToggle={setIsOpen1}
@@ -341,7 +341,7 @@ export const DifferentPlacements: Story = {
           />
         </div>
         <div className="flex gap-4 items-center">
-          <span className="text-sm w-32">Bottom End:</span>
+          <span className="text-13 w-32">Bottom End:</span>
           <EmojiPicker
             isOpen={isOpen2}
             handleToggle={setIsOpen2}
@@ -351,7 +351,7 @@ export const DifferentPlacements: Story = {
           />
         </div>
         <div className="flex gap-4 items-center">
-          <span className="text-sm w-32">Top Start:</span>
+          <span className="text-13 w-32">Top Start:</span>
           <EmojiPicker
             isOpen={isOpen3}
             handleToggle={setIsOpen3}
@@ -361,7 +361,7 @@ export const DifferentPlacements: Story = {
           />
         </div>
         <div className="flex gap-4 items-center">
-          <span className="text-sm w-32">Top End:</span>
+          <span className="text-13 w-32">Top End:</span>
           <EmojiPicker
             isOpen={isOpen4}
             handleToggle={setIsOpen4}
@@ -400,19 +400,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 p-6 border border-subtle rounded-lg">
           <div>
-            <label className="block text-sm font-medium mb-2">Project Title</label>
+            <label className="block text-13 font-medium mb-2">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 px-3 py-2 bg-layer-1 border border-subtle rounded-sm"
               placeholder="Enter project title"
             />
           </div>
           <div>
-            <label className="block text-sm font-medium mb-2">Project Icon</label>
+            <label className="block text-13 font-medium mb-2">Project Icon</label>
             <EmojiPicker
               isOpen={isOpen}
               handleToggle={setIsOpen}
@@ -420,12 +420,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 px-4 py-2 bg-accent-primary text-on-color rounded-sm 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 9a80d45f59..c1b5ce2abd 100644
--- a/packages/propel/src/emoji-icon-picker/emoji-picker.tsx
+++ b/packages/propel/src/emoji-icon-picker/emoji-picker.tsx
@@ -8,7 +8,7 @@ import type { TCustomEmojiPicker } from "./helper";
 import { emojiToString, EmojiIconPickerTypes } from "./helper";
 import { IconRoot } from "./icon/icon-root";
 
-export const EmojiPicker: React.FC<TCustomEmojiPicker> = (props) => {
+export function EmojiPicker(props: TCustomEmojiPicker) {
   const {
     isOpen,
     handleToggle,
@@ -100,14 +100,24 @@ export const EmojiPicker: React.FC<TCustomEmojiPicker> = (props) => {
       </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 bg-surface-1 rounded-md border-[0.5px] border-strong overflow-hidden", dropdownClassName)}
         side={finalSide}
         align={finalAlign}
         sideOffset={8}
         data-prevent-outside-click="true"
+        onMouseDown={(e) => e.stopPropagation()}
+        onClick={(e) => e.stopPropagation()}
+        onFocus={(e) => e.stopPropagation()}
+        onKeyDown={(e) => {
+          if (e.key === "Tab") {
+            return;
+          }
+          if (e.key === "Escape") {
+            handleToggle(false);
+            return;
+          }
+          e.stopPropagation();
+        }}
       >
         <Tabs.Root defaultValue={defaultOpen}>
           <Tabs.List className="grid grid-cols-2 gap-1 px-3.5 pt-3">
@@ -116,9 +126,9 @@ export const EmojiPicker: React.FC<TCustomEmojiPicker> = (props) => {
                 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("py-1 text-13 rounded-sm border border-subtle bg-layer-1", {
+                    "bg-surface-1 text-primary": selected,
+                    "text-placeholder hover:text-tertiary hover:bg-layer-1/60": !selected,
                   })
                 }
               >
@@ -135,4 +145,4 @@ export const EmojiPicker: React.FC<TCustomEmojiPicker> = (props) => {
       </Popover.Panel>
     </Popover>
   );
-};
+}
diff --git a/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx b/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx
index 0246937263..c372003192 100644
--- a/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx
+++ b/packages/propel/src/emoji-icon-picker/emoji/emoji.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useRef } from "react";
 import { EmojiPicker } from "frimousse";
 import { cn } from "../../utils";
 
@@ -7,25 +8,40 @@ type EmojiRootProps = {
   searchDisabled?: boolean;
 };
 
-export const EmojiRoot = (props: EmojiRootProps) => {
+export function EmojiRoot(props: EmojiRootProps) {
   const { onChange, searchPlaceholder = "Search", searchDisabled = false } = props;
+  const searchWrapperRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const focusInput = () => {
+      const searchWrapper = searchWrapperRef.current;
+      if (searchWrapper) {
+        const inputElement = searchWrapper.querySelector("input");
+        if (inputElement) {
+          inputElement.removeAttribute("disabled");
+          inputElement.focus();
+        }
+      }
+    };
+    focusInput();
+  }, []);
+
   return (
     <EmojiPicker.Root
       data-slot="emoji-picker"
       className="isolate flex flex-col rounded-md h-full w-full 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 data-slot="emoji-picker-search-wrapper" className="p-2">
+      <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-surface-1">
+        <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 rounded-md bg-transparent placeholder-(--text-color-placeholder) focus:outline-none px-3 py-2 border-[0.5px] border-subtle text-16 p-0 h-full w-full flex-grow-0 focus:border-accent-strong"
           />
         </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="bg-surface-1 hover:bg-accent mx-2 mb-1.5 size-8 rounded-md text-16 flex-shrink-0"
         />
       </div>
       <EmojiPicker.Viewport data-slot="emoji-picker-content" className={cn("relative flex-1 outline-none")}>
@@ -36,7 +52,7 @@ export const 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 text-tertiary px-3 pb-1.5 text-11 font-medium"
                 {...props}
               >
                 {category.label}
@@ -52,7 +68,7 @@ export const 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}
@@ -63,4 +79,4 @@ export const EmojiRoot = (props: EmojiRootProps) => {
       </EmojiPicker.Viewport>
     </EmojiPicker.Root>
   );
-};
+}
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 640150dfbe..8ef663a978 100644
--- a/packages/propel/src/emoji-icon-picker/icon/icon-root.tsx
+++ b/packages/propel/src/emoji-icon-picker/icon/icon-root.tsx
@@ -12,7 +12,7 @@ type IconRootProps = {
   iconType: "material" | "lucide";
 };
 
-export const IconRoot: React.FC<IconRootProps> = (props) => {
+export function IconRoot(props: IconRootProps) {
   const { defaultColor, onChange, searchDisabled = false, iconType } = props;
   // states
   const [activeColor, setActiveColor] = useState(defaultColor);
@@ -31,27 +31,24 @@ export const IconRoot: React.FC<IconRootProps> = (props) => {
 
   return (
     <>
-      <div className="flex flex-col sticky top-0 bg-custom-background-100">
+      <div className="flex flex-col sticky top-0 bg-surface-1">
         {!searchDisabled && (
           <div className="flex items-center px-2 py-[15px] w-full ">
             <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 items-center gap-2 bg-surface-2 h-10 rounded-lg w-full px-[30px] border", {
+                "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" />
+              <Search className="absolute left-2.5 bottom-3 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 rounded-md bg-transparent placeholder-(--text-color-placeholder) focus:outline-none px-3 py-2 border-[0.5px] border-subtle text-16 border-none p-0 h-full w-full"
               />
             </div>
           </div>
@@ -65,8 +62,8 @@ export const IconRoot: React.FC<IconRootProps> = (props) => {
                   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="text-11 text-tertiary flex-shrink-0">HEX</span>
+              <span className="text-11 text-secondary flex-shrink-0 -mr-1">#</span>
               <input
                 type="text"
                 value={hexValue}
@@ -75,7 +72,7 @@ export const IconRoot: React.FC<IconRootProps> = (props) => {
                   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 placeholder-(--text-color-placeholder) focus:outline-none px-3 py-2 border-[0.5px] border-subtle flex-grow pl-0 text-11 text-secondary rounded-sm border-none bg-transparent ring-0"
                 autoFocus
               />
             </div>
@@ -97,7 +94,7 @@ export const IconRoot: React.FC<IconRootProps> = (props) => {
           <button
             type="button"
             className={cn("grid place-items-center h-4 w-4 rounded-full border border-transparent", {
-              "border-custom-border-400": !showHexInput,
+              "border-strong-1": !showHexInput,
             })}
             onClick={() => {
               setShowHexInput((prevData) => !prevData);
@@ -107,13 +104,13 @@ export const IconRoot: React.FC<IconRootProps> = (props) => {
             {showHexInput ? (
               <span className="conical-gradient h-4 w-4 rounded-full" />
             ) : (
-              <span className="text-custom-text-300 text-[0.6rem] grid place-items-center">#</span>
+              <span className="text-tertiary text-10 grid place-items-center">#</span>
             )}
           </button>
         </div>
         <div className="flex items-center gap-2 w-full pl-4 pr-3 py-1 h-6">
           <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">
@@ -125,4 +122,4 @@ export const IconRoot: React.FC<IconRootProps> = (props) => {
       </div>
     </>
   );
-};
+}
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 a67fa70fd0..4f5314afc1 100644
--- a/packages/propel/src/emoji-icon-picker/icon/lucide-root.tsx
+++ b/packages/propel/src/emoji-icon-picker/icon/lucide-root.tsx
@@ -7,7 +7,7 @@ type LucideIconsListProps = {
   query: string;
 };
 
-export const LucideIconsList: React.FC<LucideIconsListProps> = (props) => {
+export function LucideIconsList(props: LucideIconsListProps) {
   const { query, onChange, activeColor } = props;
 
   const filteredArray = LUCIDE_ICONS_LIST.filter((icon) => icon.name.toLowerCase().includes(query.toLowerCase()));
@@ -18,7 +18,7 @@ export const LucideIconsList: React.FC<LucideIconsListProps> = (props) => {
         <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="h-9 w-9 select-none text-16 grid place-items-center rounded-sm hover:bg-layer-1"
           onClick={() => {
             onChange({
               name: icon.name,
@@ -31,4 +31,4 @@ export const LucideIconsList: React.FC<LucideIconsListProps> = (props) => {
       ))}
     </>
   );
-};
+}
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 676d4961f6..3a6afcc2a3 100644
--- a/packages/propel/src/emoji-icon-picker/icon/material-root.tsx
+++ b/packages/propel/src/emoji-icon-picker/icon/material-root.tsx
@@ -1,6 +1,3 @@
-"use client";
-
-import React from "react";
 import useFontFaceObserver from "use-font-face-observer";
 import { MATERIAL_ICONS_LIST } from "../material-icons";
 
@@ -10,7 +7,7 @@ type MaterialIconListProps = {
   query: string;
 };
 
-export const MaterialIconList: React.FC<MaterialIconListProps> = (props) => {
+export function MaterialIconList(props: MaterialIconListProps) {
   const { query, onChange, activeColor } = props;
 
   const filteredArray = MATERIAL_ICONS_LIST.filter((icon) => icon.name.toLowerCase().includes(query.toLowerCase()));
@@ -30,7 +27,7 @@ export const MaterialIconList: React.FC<MaterialIconListProps> = (props) => {
         <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="h-9 w-9 select-none text-16 grid place-items-center rounded-sm hover:bg-layer-1"
           onClick={() => {
             onChange({
               name: icon.name,
@@ -39,17 +36,14 @@ export const MaterialIconList: React.FC<MaterialIconListProps> = (props) => {
           }}
         >
           {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 rounded-sm animate-pulse bg-layer-1" />
           )}
         </button>
       ))}
     </>
   );
-};
+}
diff --git a/packages/propel/src/emoji-icon-picker/logo.tsx b/packages/propel/src/emoji-icon-picker/logo.tsx
index 264dc6f03a..117fbec724 100644
--- a/packages/propel/src/emoji-icon-picker/logo.tsx
+++ b/packages/propel/src/emoji-icon-picker/logo.tsx
@@ -1,9 +1,6 @@
-"use client";
-
-import type { FC } from "react";
 // 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
-// eslint-disable-next-line import/order
+
 import useFontFaceObserver from "use-font-face-observer";
 // plane imports
 import type { TLogoProps } from "@plane/types";
@@ -12,46 +9,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 const Logo: FC<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
@@ -68,38 +52,35 @@ export const Logo: FC<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 f40f583b75..5a98d903ab 100644
--- a/packages/propel/src/emoji-icon-picker/lucide-icons.tsx
+++ b/packages/propel/src/emoji-icon-picker/lucide-icons.tsx
@@ -35,6 +35,10 @@ import {
   Check,
   CheckCircle,
   CheckSquare,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
   Clipboard,
   Clock,
   Cloud,
@@ -130,7 +134,7 @@ import {
   LogIn,
   LogOut,
   Mail,
-  Map as MapIcon,
+  Map,
   MapPin,
   Maximize,
   Maximize2,
@@ -151,7 +155,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 +194,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 },
@@ -290,7 +293,7 @@ export const LUCIDE_ICONS_LIST = [
   { name: "LogIn", element: LogIn },
   { name: "LogOut", element: LogOut },
   { name: "Mail", element: Mail },
-  { name: "Map", element: MapIcon },
+  { name: "Map", element: Map },
   { name: "MapPin", element: MapPin },
   { name: "Maximize", element: Maximize },
   { name: "Maximize2", element: Maximize2 },
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 790e4cc97f..bca1e83d25 100644
--- a/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx
+++ b/packages/propel/src/emoji-reaction/emoji-reaction-picker.stories.tsx
@@ -37,15 +37,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 items-center justify-center rounded-md px-2 size-8 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="text-13 p-4 bg-layer-1 rounded-sm border border-subtle">Selected: {selectedEmoji}</div>
         )}
       </div>
     );
@@ -71,13 +69,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="px-4 py-2 bg-layer-1 border border-subtle rounded-sm hover:bg-surface-2 flex items-center gap-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 +134,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 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:text-accent-primary hover:bg-accent-primary/5 h-7 w-7">
               <SmilePlus className="h-3.5 w-3.5" />
             </button>
           }
@@ -162,7 +160,7 @@ export const DifferentPlacements: Story = {
     return (
       <div className="p-8 space-y-8">
         <div className="flex gap-4 items-center">
-          <span className="text-sm w-32">Bottom Start:</span>
+          <span className="text-13 w-32">Bottom Start:</span>
           <EmojiReactionPicker
             isOpen={isOpen1}
             handleToggle={setIsOpen1}
@@ -172,7 +170,7 @@ export const DifferentPlacements: Story = {
           />
         </div>
         <div className="flex gap-4 items-center">
-          <span className="text-sm w-32">Bottom End:</span>
+          <span className="text-13 w-32">Bottom End:</span>
           <EmojiReactionPicker
             isOpen={isOpen2}
             handleToggle={setIsOpen2}
@@ -182,7 +180,7 @@ export const DifferentPlacements: Story = {
           />
         </div>
         <div className="flex gap-4 items-center">
-          <span className="text-sm w-32">Top Start:</span>
+          <span className="text-13 w-32">Top Start:</span>
           <EmojiReactionPicker
             isOpen={isOpen3}
             handleToggle={setIsOpen3}
@@ -192,7 +190,7 @@ export const DifferentPlacements: Story = {
           />
         </div>
         <div className="flex gap-4 items-center">
-          <span className="text-sm w-32">Top End:</span>
+          <span className="text-13 w-32">Top End:</span>
           <EmojiReactionPicker
             isOpen={isOpen4}
             handleToggle={setIsOpen4}
@@ -226,12 +224,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="px-4 py-2 bg-layer-1 border border-subtle rounded-sm 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 +255,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="px-4 py-2 bg-layer-1 border border-subtle rounded-sm hover:bg-surface-2">
               Custom Search
             </button>
           }
         />
-        {selectedEmoji && <div className="text-sm">Selected: {selectedEmoji}</div>}
+        {selectedEmoji && <div className="text-13">Selected: {selectedEmoji}</div>}
       </div>
     );
   },
@@ -292,24 +290,24 @@ export const CloseOnSelectDisabled: Story = {
             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="px-4 py-2 bg-layer-1 border border-subtle rounded-sm 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="px-3 py-1.5 text-13 bg-layer-1 rounded-sm 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="text-13 p-4 bg-layer-1 rounded-sm border border-subtle">
             <div className="font-medium mb-2">Selected ({selectedEmojis.length}):</div>
             <div className="flex gap-2 flex-wrap">
               {selectedEmojis.map((emoji, idx) => (
-                <span key={idx} className="text-xl">
+                <span key={idx} className="text-18">
                   {emoji}
                 </span>
               ))}
@@ -360,14 +358,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 border border-subtle rounded-lg p-4 space-y-3">
         <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="w-8 h-8 rounded-full bg-accent-primary flex items-center justify-center text-on-color text-13">
             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="font-medium text-13">Alice Brown</div>
+            <div className="text-13 text-tertiary mt-1">
               Just finished the design for the new dashboard! Would love to hear your thoughts.
             </div>
           </div>
@@ -380,7 +378,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 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:text-accent-primary hover:bg-accent-primary/5 h-7 w-7">
                 <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 a217151e89..227e32bf2a 100644
--- a/packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx
+++ b/packages/propel/src/emoji-reaction/emoji-reaction-picker.tsx
@@ -22,7 +22,7 @@ export interface EmojiReactionPickerProps {
   align?: TAlign;
 }
 
-export const EmojiReactionPicker: React.FC<EmojiReactionPickerProps> = (props) => {
+export function EmojiReactionPicker(props: EmojiReactionPickerProps) {
   const {
     isOpen,
     handleToggle,
@@ -64,10 +64,7 @@ export const EmojiReactionPicker: React.FC<EmojiReactionPickerProps> = (props) =
       </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 bg-surface-1 rounded-md border-[0.5px] border-strong overflow-hidden", dropdownClassName)}
         side={finalSide}
         align={finalAlign}
         sideOffset={8}
@@ -83,4 +80,4 @@ export const EmojiReactionPicker: React.FC<EmojiReactionPickerProps> = (props) =
       </Popover.Panel>
     </Popover>
   );
-};
+}
diff --git a/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx b/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
index 7fb063e075..9975ee880c 100644
--- a/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
+++ b/packages/propel/src/emoji-reaction/emoji-reaction.stories.tsx
@@ -56,7 +56,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 +207,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 border border-subtle rounded-lg p-4 space-y-3">
         <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="w-8 h-8 rounded-full bg-accent-primary flex items-center justify-center text-on-color text-13">
             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="font-medium text-13">Alice Brown</div>
+            <div className="text-13 text-tertiary mt-1">
               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 898fe894b6..802d6150b4 100644
--- a/packages/propel/src/emoji-reaction/emoji-reaction.tsx
+++ b/packages/propel/src/emoji-reaction/emoji-reaction.tsx
@@ -4,6 +4,7 @@ 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;
@@ -36,81 +37,97 @@ export interface EmojiReactionButtonProps extends React.ButtonHTMLAttributes<HTM
   className?: string;
 }
 
-const EmojiReaction = React.forwardRef<HTMLButtonElement, EmojiReactionProps>(
-  ({ emoji, count, reacted = false, users = [], onReactionClick, className, showCount = true, ...props }, ref) => {
-    const handleClick = () => {
-      onReactionClick?.(emoji);
-    };
+const EmojiReaction = React.forwardRef(function EmojiReaction(
+  {
+    emoji,
+    count,
+    reacted = false,
+    users = [],
+    onReactionClick,
+    className,
+    showCount = true,
+    ...props
+  }: EmojiReactionProps,
+  ref: React.ForwardedRef<HTMLButtonElement>
+) {
+  const handleClick = () => {
+    onReactionClick?.(emoji);
+  };
 
-    const tooltipContent = React.useMemo(() => {
-      if (!users.length) return null;
+  const tooltipContent = React.useMemo(() => {
+    if (!users.length) return null;
 
-      const displayUsers = users.slice(0, 5);
-      const remainingCount = users.length - displayUsers.length;
+    const displayUsers = users.slice(0, 5);
+    const remainingCount = users.length - displayUsers.length;
 
-      return (
-        <div className="text-xs">
-          <div className="font-medium mb-1">{stringToEmoji(emoji)}</div>
-          <div>
-            {displayUsers.join(", ")}
-            {remainingCount > 0 && ` and ${remainingCount} more`}
-          </div>
+    return (
+      <div className="text-11">
+        <div className="font-medium mb-1">{stringToEmoji(emoji)}</div>
+        <div>
+          {displayUsers.join(", ")}
+          {remainingCount > 0 && ` and ${remainingCount} more`}
         </div>
-      );
-    }, [emoji, users]);
-
-    const button = (
-      <button
-        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",
-          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",
-          className
-        )}
-        {...props}
-      >
-        <span className="text-base leading-unset">{emoji}</span>
-        {showCount && count > 0 && <AnimatedCounter count={count} size="sm" className="text-xs leading-normal" />}
-      </button>
+      </div>
     );
+  }, [emoji, users]);
 
-    if (tooltipContent && users.length > 0) {
-      return <Tooltip tooltipContent={tooltipContent}>{button}</Tooltip>;
-    }
-
-    return button;
-  }
-);
-
-const EmojiReactionButton = React.forwardRef<HTMLButtonElement, EmojiReactionButtonProps>(
-  ({ onAddReaction, className, ...props }, ref) => (
+  const button = (
     <button
       ref={ref}
-      onClick={onAddReaction}
+      onClick={handleClick}
       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",
+        "inline-flex items-center rounded-full border px-1.5 text-11 gap-0.5 transition-all duration-200",
+        reacted
+          ? "bg-accent-primary/10 border-accent-strong text-accent-primary"
+          : "bg-surface-1 border-subtle text-tertiary hover:border-strong hover:bg-surface-2",
         className
       )}
-      title="Add reaction"
       {...props}
     >
-      <AddReactionIcon className="h-3 w-3" />
+      <span className="text-14 leading-unset">{emoji}</span>
+      {showCount && count > 0 && <AnimatedCounter count={count} size="sm" className="text-11 leading-normal" />}
     </button>
-  )
-);
+  );
 
-const EmojiReactionGroup = React.forwardRef<HTMLDivElement, EmojiReactionGroupProps>(
-  (
-    { reactions, onReactionClick, onAddReaction, className, showAddButton = true, maxDisplayUsers = 5, ...props },
-    ref
-  ) => (
+  if (tooltipContent && users.length > 0) {
+    return <Tooltip tooltipContent={tooltipContent}>{button}</Tooltip>;
+  }
+
+  return button;
+});
+
+const EmojiReactionButton = React.forwardRef(function EmojiReactionButton(
+  { onAddReaction, className, ...props }: EmojiReactionButtonProps,
+  ref: React.ForwardedRef<HTMLButtonElement>
+) {
+  return (
+    <Tooltip tooltipContent="Add reaction">
+      <IconButton
+        ref={ref}
+        icon={AddReactionIcon}
+        variant="ghost"
+        size="sm"
+        onClick={onAddReaction}
+        className={className}
+        {...props}
+      />
+    </Tooltip>
+  );
+});
+
+const EmojiReactionGroup = React.forwardRef(function EmojiReactionGroup(
+  {
+    reactions,
+    onReactionClick,
+    onAddReaction,
+    className,
+    showAddButton = true,
+    maxDisplayUsers = 5,
+    ...props
+  }: EmojiReactionGroupProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  return (
     <div ref={ref} className={cn("flex flex-wrap items-center gap-2", className)} {...props}>
       {reactions.map((reaction, index) => (
         <EmojiReaction
@@ -124,8 +141,8 @@ const EmojiReactionGroup = React.forwardRef<HTMLDivElement, EmojiReactionGroupPr
       ))}
       {showAddButton && <EmojiReactionButton onAddReaction={onAddReaction} />}
     </div>
-  )
-);
+  );
+});
 
 EmojiReaction.displayName = "EmojiReaction";
 EmojiReactionButton.displayName = "EmojiReactionButton";
diff --git a/packages/propel/src/empty-state/assets-showcase.stories.tsx b/packages/propel/src/empty-state/assets-showcase.stories.tsx
index da35189fc5..4da8e55158 100644
--- a/packages/propel/src/empty-state/assets-showcase.stories.tsx
+++ b/packages/propel/src/empty-state/assets-showcase.stories.tsx
@@ -31,18 +31,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 +64,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 +102,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 +134,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 +153,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 +178,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 5ad23bb09c..e1eb823c6f 100644
--- a/packages/propel/src/empty-state/assets/asset-registry.tsx
+++ b/packages/propel/src/empty-state/assets/asset-registry.tsx
@@ -33,6 +33,7 @@ import {
   ArchivedCycleVerticalStackIllustration,
   ArchivedModuleVerticalStackIllustration,
   ArchivedWorkItemVerticalStackIllustration,
+  ChangelogVerticalStackIllustration,
   CustomerVerticalStackIllustration,
   CycleVerticalStackIllustration,
   DashboardVerticalStackIllustration,
@@ -80,6 +81,7 @@ export const VERTICAL_STACK_ASSETS: Record<VerticalStackAssetType, React.Compone
   "archived-cycle": ArchivedCycleVerticalStackIllustration,
   "archived-module": ArchivedModuleVerticalStackIllustration,
   "archived-work-item": ArchivedWorkItemVerticalStackIllustration,
+  changelog: ChangelogVerticalStackIllustration,
   customer: CustomerVerticalStackIllustration,
   cycle: CycleVerticalStackIllustration,
   dashboard: DashboardVerticalStackIllustration,
diff --git a/packages/propel/src/empty-state/assets/asset-types.ts b/packages/propel/src/empty-state/assets/asset-types.ts
index 67a11eb64a..23fb810ad7 100644
--- a/packages/propel/src/empty-state/assets/asset-types.ts
+++ b/packages/propel/src/empty-state/assets/asset-types.ts
@@ -26,6 +26,7 @@ export type VerticalStackAssetType =
   | "archived-cycle"
   | "archived-module"
   | "archived-work-item"
+  | "changelog"
   | "customer"
   | "cycle"
   | "dashboard"
diff --git a/packages/propel/src/empty-state/assets/helper.tsx b/packages/propel/src/empty-state/assets/helper.tsx
index 0ef1a11148..440db75e72 100644
--- a/packages/propel/src/empty-state/assets/helper.tsx
+++ b/packages/propel/src/empty-state/assets/helper.tsx
@@ -1,12 +1,14 @@
 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/customer.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/customer.tsx
index ff11731e87..a98fc76747 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/customer.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/customer.tsx
@@ -1,65 +1,74 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const CustomerHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg width="81" height="91" viewBox="0 0 81 91" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <g opacity="0.2">
+export function CustomerHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="81"
+      height="91"
+      viewBox="0 0 81 91"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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="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="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="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}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </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"
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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}
       />
-    </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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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}
-    />
-  </svg>
-);
+    </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 e35f9ec83b..b48bea0a02 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/epic.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/epic.tsx
@@ -1,63 +1,72 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const EpicHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg width="81" height="92" viewBox="0 0 81 92" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <g opacity="0.2">
+export function EpicHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="81"
+      height="92"
+      viewBox="0 0 81 92"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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="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="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="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}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </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"
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        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}
       />
-    </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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-  </svg>
-);
+    </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 997f60a48c..9b4539f8de 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/estimate.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/estimate.tsx
@@ -1,65 +1,74 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const EstimateHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg width="81" height="92" viewBox="0 0 81 92" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <g opacity="0.2">
+export function EstimateHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="81"
+      height="92"
+      viewBox="0 0 81 92"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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="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="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="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}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </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"
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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}
       />
-    </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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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}
-    />
-  </svg>
-);
+    </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 7da47eb7f9..27bdf15949 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/export.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/export.tsx
@@ -1,71 +1,80 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const ExportHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg width="71" height="81" viewBox="0 0 71 81" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <g opacity="0.2">
+export function ExportHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      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="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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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="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="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="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}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </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"
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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}
       />
-    </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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      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="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}
-    />
-    <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}
-    />
-  </svg>
-);
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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/intake.tsx b/packages/propel/src/empty-state/assets/horizontal-stack/intake.tsx
index 839d881312..96ca32e495 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/intake.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/intake.tsx
@@ -1,83 +1,92 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const IntakeHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg width="71" height="80" viewBox="0 0 71 80" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <g opacity="0.2">
+export function IntakeHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      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="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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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="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="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="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}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </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"
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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}
       />
-    </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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      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="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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-  </svg>
-);
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.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="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 d425150188..3c65eef7af 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/label.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/label.tsx
@@ -1,69 +1,78 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const LabelHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg width="81" height="92" viewBox="0 0 81 92" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <g opacity="0.2">
+export function LabelHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="81"
+      height="92"
+      viewBox="0 0 81 92"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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="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="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="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}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </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"
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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}
       />
-    </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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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}
-    />
-    <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}
-    />
-  </svg>
-);
+      <path
+        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 eca3bda062..6b30f6c1eb 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/link.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/link.tsx
@@ -1,77 +1,86 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const LinkHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg width="52" height="59" viewBox="0 0 52 59" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <g opacity="0.2">
+export function LinkHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      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.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.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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="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="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="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}
-        strokeWidth="0.25"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </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"
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.25"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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}
       />
-    </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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-  </svg>
-);
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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="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 8ecaa62b2f..14accea4b7 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/members.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/members.tsx
@@ -1,83 +1,92 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const MembersHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg width="71" height="80" viewBox="0 0 71 80" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <g opacity="0.2">
+export function MembersHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      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="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.primary}
+          strokeWidth="0.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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="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="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="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}
-        strokeWidth="0.3"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </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"
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.3"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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}
       />
-    </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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.3"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-  </svg>
-);
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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="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.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 962ca4e128..61712d5450 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/note.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/note.tsx
@@ -1,63 +1,72 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const NoteHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg width="52" height="59" viewBox="0 0 52 59" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <g opacity="0.2">
+export function NoteHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      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.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.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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="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="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="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}
-        strokeWidth="0.25"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </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"
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.25"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        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}
       />
-    </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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-  </svg>
-);
+    </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 707a9b6b30..3d7e887556 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/priority.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/priority.tsx
@@ -1,75 +1,84 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const PriorityHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg width="72" height="81" viewBox="0 0 72 81" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <g opacity="0.2">
+export function PriorityHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      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="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.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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="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="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="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}
-        strokeWidth="0.25"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </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"
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.25"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        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}
       />
-    </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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-  </svg>
-);
+      <path
+        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="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="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 f8b5b529a1..1c21fe77e8 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/project.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/project.tsx
@@ -1,70 +1,72 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const ProjectHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg
-    width="102"
-    height="115"
-    viewBox="0 0 102 115"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <g opacity="0.2">
+export function ProjectHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="102"
+      height="115"
+      viewBox="0 0 102 115"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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="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="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="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}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </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"
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        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}
       />
-    </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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-  </svg>
-);
+    </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 c5a5f78ab0..8130370db2 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/settings.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/settings.tsx
@@ -1,67 +1,76 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const SettingsHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg width="71" height="80" viewBox="0 0 71 80" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <g opacity="0.2">
+export function SettingsHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      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="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.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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="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="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="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}
-        strokeWidth="0.35"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </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"
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.35"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        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}
       />
-    </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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-  </svg>
-);
+      <path
+        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 b3daeae3aa..d184a7704c 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/state.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/state.tsx
@@ -1,63 +1,72 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const StateHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg width="72" height="81" viewBox="0 0 72 81" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <g opacity="0.2">
+export function StateHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="72"
+      height="81"
+      viewBox="0 0 72 81"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          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.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.25"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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="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="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="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}
-        strokeWidth="0.25"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </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"
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.25"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        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}
       />
-    </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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-  </svg>
-);
+    </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 2147891dd0..b068f31908 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/template.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/template.tsx
@@ -1,77 +1,86 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const TemplateHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg width="81" height="92" viewBox="0 0 81 92" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <g opacity="0.2">
+export function TemplateHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="81"
+      height="92"
+      viewBox="0 0 81 92"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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="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="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="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}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </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"
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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}
       />
-    </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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-  </svg>
-);
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.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 7f7204b584..c99f21aa24 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/token.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/token.tsx
@@ -1,71 +1,80 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const TokenHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg width="81" height="92" viewBox="0 0 81 92" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <g opacity="0.2">
+export function TokenHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="81"
+      height="92"
+      viewBox="0 0 81 92"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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="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="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="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}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </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"
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        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}
       />
-    </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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-    <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}
-    />
-  </svg>
-);
+      <path
+        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.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 eaa5ac9122..fd2f39ba9b 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/unknown.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/unknown.tsx
@@ -1,78 +1,80 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const UnknownHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg
-    width="101"
-    height="114"
-    viewBox="0 0 101 114"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <g opacity="0.2">
+export function UnknownHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      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="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.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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="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="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="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"
-        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"
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        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}
       />
-    </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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      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}
-    />
-    <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}
-    />
-    <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}
-    />
-  </svg>
-);
+      <path
+        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="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 083fa77be1..bcdc70bcfb 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/update.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/update.tsx
@@ -1,11 +1,54 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const UpdateHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg width="72" height="81" viewBox="0 0 72 81" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <g opacity="0.2">
+export function UpdateHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="72"
+      height="81"
+      viewBox="0 0 72 81"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          d="M42.4559 2.91759C41.655 2.51021 40.6262 2.54473 39.5076 3.11092L8.67113 18.8261C6.1371 20.1172 4.0795 23.6663 4.0795 26.7458V64.2729C4.0795 65.9922 4.71473 67.2005 5.71591 67.7184L2.63642 66.151C1.63523 65.6401 1 64.4248 1 62.7055V25.1784C1 22.092 3.0576 18.5499 5.59163 17.2587L36.4281 1.54355C37.5536 0.970462 38.5824 0.942844 39.3764 1.35022L42.4559 2.91759Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M42.4558 2.91754C43.457 3.42849 44.0922 4.64374 44.0922 6.36301V43.8901C44.0922 46.9766 42.0346 50.5187 39.5005 51.8099L8.66409 67.525C7.53862 68.0981 6.5098 68.1257 5.71576 67.7183C4.71458 67.2074 4.07935 65.9922 4.07935 64.2729V26.7457C4.07935 23.6593 6.13695 20.1172 8.67098 18.826L39.5075 3.11088C40.6329 2.53778 41.6617 2.51017 42.4558 2.91754Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M55.9132 8.904C55.1123 8.49662 54.0835 8.53114 52.9649 9.09733L22.1284 24.8125C19.5944 26.1036 17.5368 29.6527 17.5368 32.7322V70.2593C17.5368 71.9786 18.172 73.1869 19.1732 73.7048L16.0937 72.1374C15.0925 71.6265 14.4573 70.4112 14.4573 68.692V31.1648C14.4573 28.0784 16.5149 24.5363 19.0489 23.2451L49.8854 7.52994C51.0109 6.95685 52.0397 6.92923 52.8337 7.33661L55.9132 8.904Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M55.913 8.90393C56.9142 9.41488 57.5495 10.6301 57.5495 12.3494V49.8765C57.5495 52.9629 55.4918 56.5051 52.9578 57.7962L22.1213 73.5114C20.9959 74.0845 19.9671 74.1121 19.173 73.7047C18.1719 73.1938 17.5366 71.9785 17.5366 70.2593V32.7321C17.5366 29.6457 19.5942 26.1036 22.1283 24.8124L52.9647 9.09726C54.0902 8.52417 55.119 8.49655 55.913 8.90393Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <path
-        d="M42.4559 2.91759C41.655 2.51021 40.6262 2.54473 39.5076 3.11092L8.67113 18.8261C6.1371 20.1172 4.0795 23.6663 4.0795 26.7458V64.2729C4.0795 65.9922 4.71473 67.2005 5.71591 67.7184L2.63642 66.151C1.63523 65.6401 1 64.4248 1 62.7055V25.1784C1 22.092 3.0576 18.5499 5.59163 17.2587L36.4281 1.54355C37.5536 0.970462 38.5824 0.942844 39.3764 1.35022L42.4559 2.91759Z"
+        d="M69.3636 14.8489C68.5627 14.4415 67.5339 14.476 66.4153 15.0422L35.5788 30.7573C33.0448 32.0485 30.9872 35.5975 30.9872 38.6771V76.2042C30.9872 77.9235 31.6225 79.1318 32.6236 79.6497L29.5441 78.0823C28.5429 77.5713 27.9077 76.3561 27.9077 74.6368V37.1097C27.9077 34.0233 29.9653 30.4812 32.4994 29.19L63.3358 13.4748C64.4613 12.9017 65.4901 12.8741 66.2842 13.2815L69.3636 14.8489Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.35"
@@ -13,57 +56,23 @@ export const UpdateHorizontalStackIllustration = ({ className }: TIllustrationAs
         strokeLinejoin="round"
       />
       <path
-        d="M42.4558 2.91754C43.457 3.42849 44.0922 4.64374 44.0922 6.36301V43.8901C44.0922 46.9766 42.0346 50.5187 39.5005 51.8099L8.66409 67.525C7.53862 68.0981 6.5098 68.1257 5.71576 67.7183C4.71458 67.2074 4.07935 65.9922 4.07935 64.2729V26.7457C4.07935 23.6593 6.13695 20.1172 8.67098 18.826L39.5075 3.11088C40.6329 2.53778 41.6617 2.51017 42.4558 2.91754Z"
+        d="M69.3635 14.8489C70.3646 15.3598 70.9999 16.5751 70.9999 18.2943V55.8215C70.9999 58.9079 68.9423 62.45 66.4083 63.7412L35.5718 79.4563C34.4463 80.0294 33.4175 80.0571 32.6235 79.6497C31.6223 79.1387 30.9871 77.9235 30.9871 76.2042V38.6771C30.9871 35.5907 33.0446 32.0485 35.5787 30.7574L66.4152 15.0422C67.5406 14.4691 68.5694 14.4415 69.3635 14.8489Z"
         fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
         stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
         strokeWidth="0.35"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-    </g>
-    <g opacity="0.6">
       <path
-        d="M55.9132 8.904C55.1123 8.49662 54.0835 8.53114 52.9649 9.09733L22.1284 24.8125C19.5944 26.1036 17.5368 29.6527 17.5368 32.7322V70.2593C17.5368 71.9786 18.172 73.1869 19.1732 73.7048L16.0937 72.1374C15.0925 71.6265 14.4573 70.4112 14.4573 68.692V31.1648C14.4573 28.0784 16.5149 24.5363 19.0489 23.2451L49.8854 7.52994C51.0109 6.95685 52.0397 6.92923 52.8337 7.33661L55.9132 8.904Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.35"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M48.6497 44.3459C51.1699 39.1121 55.1125 34.5688 59.5454 32.3109C59.9113 32.1245 60.2013 32.3317 60.2013 32.7736C60.2013 38.1661 58.1161 44.0213 54.8708 48.7442C55.3887 52.4037 53.1861 57.2163 49.9616 59.4879C49.6509 59.702 49.3402 59.8953 49.0295 60.0541C48.6635 60.2405 48.3735 60.0334 48.3735 59.5915V55.1863C47.5242 54.7996 46.7509 54.2541 46.0812 53.5637L42.4631 55.4072C42.0971 55.5937 41.8071 55.3865 41.8071 54.9446C41.8071 50.9675 44.4516 46.3966 47.7176 44.7325C48.0283 44.5737 48.339 44.4425 48.6497 44.3459ZM53.628 40.9211C52.5371 41.4735 51.6602 42.9994 51.6602 44.3251C51.6602 45.6509 52.544 46.2723 53.628 45.7199C54.712 45.1675 55.5958 43.6416 55.5958 42.3159C55.5958 40.9902 54.712 40.3687 53.628 40.9211Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
       />
       <path
-        d="M55.913 8.90393C56.9142 9.41488 57.5495 10.6301 57.5495 12.3494V49.8765C57.5495 52.9629 55.4918 56.5051 52.9578 57.7962L22.1213 73.5114C20.9959 74.0845 19.9671 74.1121 19.173 73.7047C18.1719 73.1938 17.5366 71.9785 17.5366 70.2593V32.7321C17.5366 29.6457 19.5942 26.1036 22.1283 24.8124L52.9647 9.09726C54.0902 8.52417 55.119 8.49655 55.913 8.90393Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.35"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        d="M45.0936 56.4499C45.3835 56.0356 45.4457 55.5039 45.2247 55.2622C45.0107 55.0206 44.5964 55.1587 44.3064 55.566C42.9393 57.5063 42.2419 59.916 42.5112 61.8355C42.5526 62.1601 42.7736 62.312 43.0567 62.2222C44.7414 61.6836 46.44 59.9782 47.455 57.7963C47.6759 57.3337 47.6207 56.8572 47.3376 56.7329C47.0476 56.6087 46.6402 56.8849 46.4192 57.3475C46.4192 57.3544 46.4123 57.3682 46.4054 57.3751C45.784 58.7077 44.8104 59.7986 43.7678 60.3303C43.7678 59.0184 44.2857 57.5891 45.0936 56.4499Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
       />
-    </g>
-    <path
-      d="M69.3636 14.8489C68.5627 14.4415 67.5339 14.476 66.4153 15.0422L35.5788 30.7573C33.0448 32.0485 30.9872 35.5975 30.9872 38.6771V76.2042C30.9872 77.9235 31.6225 79.1318 32.6236 79.6497L29.5441 78.0823C28.5429 77.5713 27.9077 76.3561 27.9077 74.6368V37.1097C27.9077 34.0233 29.9653 30.4812 32.4994 29.19L63.3358 13.4748C64.4613 12.9017 65.4901 12.8741 66.2842 13.2815L69.3636 14.8489Z"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.35"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M69.3635 14.8489C70.3646 15.3598 70.9999 16.5751 70.9999 18.2943V55.8215C70.9999 58.9079 68.9423 62.45 66.4083 63.7412L35.5718 79.4563C34.4463 80.0294 33.4175 80.0571 32.6235 79.6497C31.6223 79.1387 30.9871 77.9235 30.9871 76.2042V38.6771C30.9871 35.5907 33.0446 32.0485 35.5787 30.7574L66.4152 15.0422C67.5406 14.4691 68.5694 14.4415 69.3635 14.8489Z"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.35"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M48.6497 44.3459C51.1699 39.1121 55.1125 34.5688 59.5454 32.3109C59.9113 32.1245 60.2013 32.3317 60.2013 32.7736C60.2013 38.1661 58.1161 44.0213 54.8708 48.7442C55.3887 52.4037 53.1861 57.2163 49.9616 59.4879C49.6509 59.702 49.3402 59.8953 49.0295 60.0541C48.6635 60.2405 48.3735 60.0334 48.3735 59.5915V55.1863C47.5242 54.7996 46.7509 54.2541 46.0812 53.5637L42.4631 55.4072C42.0971 55.5937 41.8071 55.3865 41.8071 54.9446C41.8071 50.9675 44.4516 46.3966 47.7176 44.7325C48.0283 44.5737 48.339 44.4425 48.6497 44.3459ZM53.628 40.9211C52.5371 41.4735 51.6602 42.9994 51.6602 44.3251C51.6602 45.6509 52.544 46.2723 53.628 45.7199C54.712 45.1675 55.5958 43.6416 55.5958 42.3159C55.5958 40.9902 54.712 40.3687 53.628 40.9211Z"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-    />
-    <path
-      d="M45.0936 56.4499C45.3835 56.0356 45.4457 55.5039 45.2247 55.2622C45.0107 55.0206 44.5964 55.1587 44.3064 55.566C42.9393 57.5063 42.2419 59.916 42.5112 61.8355C42.5526 62.1601 42.7736 62.312 43.0567 62.2222C44.7414 61.6836 46.44 59.9782 47.455 57.7963C47.6759 57.3337 47.6207 56.8572 47.3376 56.7329C47.0476 56.6087 46.6402 56.8849 46.4192 57.3475C46.4192 57.3544 46.4123 57.3682 46.4054 57.3751C45.784 58.7077 44.8104 59.7986 43.7678 60.3303C43.7678 59.0184 44.2857 57.5891 45.0936 56.4499Z"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-    />
-  </svg>
-);
+    </svg>
+  );
+}
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 b4f631dfab..010198d9af 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/webhook.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/webhook.tsx
@@ -1,63 +1,72 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const WebhookHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg width="81" height="91" viewBox="0 0 81 91" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <g opacity="0.2">
+export function WebhookHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="81"
+      height="91"
+      viewBox="0 0 81 91"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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="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="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="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}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </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"
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        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}
       />
-    </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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-  </svg>
-);
+    </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 3efe735728..9fb9ae65d2 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,77 +1,86 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const WorkItemHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg width="72" height="80" viewBox="0 0 72 80" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <g opacity="0.2">
+export function WorkItemHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      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="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.primary}
+          strokeWidth="0.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.3"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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="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="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="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}
-        strokeWidth="0.3"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </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"
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.3"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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}
       />
-    </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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.3"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-  </svg>
-);
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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="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 d090f1fa43..88289942f3 100644
--- a/packages/propel/src/empty-state/assets/horizontal-stack/worklog.tsx
+++ b/packages/propel/src/empty-state/assets/horizontal-stack/worklog.tsx
@@ -1,71 +1,80 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const WorklogHorizontalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg width="81" height="91" viewBox="0 0 81 91" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <g opacity="0.2">
+export function WorklogHorizontalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="81"
+      height="91"
+      viewBox="0 0 81 91"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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="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="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="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}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </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"
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        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}
       />
-    </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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-    <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}
-    />
-  </svg>
-);
+      <path
+        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.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/inbox.tsx b/packages/propel/src/empty-state/assets/illustration/inbox.tsx
index e174545b86..dffd6aef1c 100644
--- a/packages/propel/src/empty-state/assets/illustration/inbox.tsx
+++ b/packages/propel/src/empty-state/assets/illustration/inbox.tsx
@@ -1,135 +1,136 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const InboxIllustration = ({ className, ...rest }: TIllustrationAssetProps) => (
-  <svg
-    width="100"
-    height="92"
-    viewBox="0 0 100 92"
-    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"
-      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"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.3024"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.3024"
-      strokeLinecap="round"
-      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"
-      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 50.2067L79.3783 50.2249L79.3904 50.2007L79.4025 50.2067Z"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.3024"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      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"
-      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.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}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.3024"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+export function InboxIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="100"
+      height="92"
+      viewBox="0 0 100 92"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        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.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}
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/illustration/search.tsx b/packages/propel/src/empty-state/assets/illustration/search.tsx
index 2b1f36b006..23488ff6c9 100644
--- a/packages/propel/src/empty-state/assets/illustration/search.tsx
+++ b/packages/propel/src/empty-state/assets/illustration/search.tsx
@@ -1,59 +1,61 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const SearchIllustration = ({ className, ...rest }: TIllustrationAssetProps) => (
-  <svg
-    width="161"
-    height="168"
-    viewBox="0 0 161 168"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    {...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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      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}
-    />
-  </svg>
-);
+export function SearchIllustration({ className, ...rest }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="161"
+      height="168"
+      viewBox="0 0 161 168"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...rest}
+    >
+      <path
+        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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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="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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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/vertical-stack/404-error.tsx b/packages/propel/src/empty-state/assets/vertical-stack/404-error.tsx
index bc162b98d7..bcc94de603 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,286 +1,288 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const Error404VerticalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg
-    width="162"
-    height="173"
-    viewBox="0 0 162 173"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <g opacity="0.2">
+export function Error404VerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="161"
+      height="173"
+      viewBox="0 0 161 173"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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 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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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="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="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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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="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="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"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-    </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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        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"
         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="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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
         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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M116.896 54.9099L112.993 56.9018L108.222 54.4709L112.125 52.4844L116.896 54.9099Z"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M61.8045 82.9829L57.9012 84.9694L53.1304 82.5385L57.0338 80.552L61.8045 82.9829Z"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M42.3413 92.8993L52.2094 87.8716L47.4387 85.4407L37.5705 90.4685L42.3413 92.8993Z"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M52.2094 87.8715V72.3437L47.4387 69.9128V85.4406L52.2094 87.8715Z"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M57.9011 61.062L51.9363 64.1033L47.1656 61.6724L53.1304 58.6311L57.9011 61.062Z"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
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 9d3736fc05..0f9e8fdbfa 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,357 +1,359 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const ArchivedCycleVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg
-    width="162"
-    height="175"
-    viewBox="0 0 162 175"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <g opacity="0.2">
+export function ArchivedCycleVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      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="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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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 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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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.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"
         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"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-    </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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        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"
         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="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"
         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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      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}
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M102.891 41.27L59.2153 63.5295L54.4614 61.1072L98.1376 38.8477L102.891 41.27Z"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-    <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="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="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)"
       />
-    </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}
-    />
-    <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}
-      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="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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
-    </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}
-    />
-    <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}
-      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="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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
-    </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}
-    />
-    <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}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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" />
-    </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}
-    />
-    <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}
-      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" />
-    </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}
-    />
-    <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}
-      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" />
-    </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}
-    />
-    <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}
-      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" />
-    </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}
-    />
-    <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}
-      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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-  </svg>
-);
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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="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="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="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="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="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="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="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="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="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="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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.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="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="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="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.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.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.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="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="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="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="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="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="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="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="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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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 420841463a..9fb05ce8ef 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,294 +1,296 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const ArchivedModuleVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg
-    width="162"
-    height="183"
-    viewBox="0 0 162 183"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <g opacity="0.2">
+export function ArchivedModuleVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="161"
+      height="182"
+      viewBox="0 0 161 182"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
       <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"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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.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="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.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="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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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="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="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="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="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="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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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.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"
         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"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-    </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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        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"
         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="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"
         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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      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}
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M102.987 49.073L59.2698 71.3534L54.5115 68.9288L98.2285 46.6484L102.987 49.073Z"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-    <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}
-    />
-  </svg>
-);
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.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="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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.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="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 9b01e452b9..cac968c6b0 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,329 +1,331 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const ArchivedWorkItemVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg
-    width="162"
-    height="176"
-    viewBox="0 0 162 176"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <g opacity="0.2">
+export function ArchivedWorkItemVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="161"
+      height="176"
+      viewBox="0 0 161 176"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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 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 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 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}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </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"
-        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="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}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      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}
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M100.47 46.0913L57.8318 67.8219L53.1909 65.4571L95.8291 43.7266L100.47 46.0913Z"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <mask id="path-22-inside-1_637_1592" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
+      <path
+        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="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="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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
-    </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}
-    />
-    <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}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-    <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" />
-    </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}
-    />
-    <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}
-      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}
-    />
-    <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" />
-    </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}
-    />
-    <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}
-      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" />
-    </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}
-    />
-    <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}
-      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" />
-    </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}
-    />
-    <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}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-  </svg>
-);
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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="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="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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <mask id="path-22-inside-1_637_1592" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          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.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.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="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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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="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="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="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="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="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="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="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.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.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.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="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="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="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.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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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="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.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
new file mode 100644
index 0000000000..4b8619804a
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/changelog.tsx
@@ -0,0 +1,183 @@
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function ChangelogVerticalStackIllustration({ className, ...rest }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="172"
+      viewBox="0 0 162 172"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...rest}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.8434 47.4295C14.6167 46.8049 13.0411 46.8555 11.3136 47.739C7.41402 49.7253 4.25723 55.1836 4.25723 59.9216C4.25723 62.5663 5.24196 64.4345 6.78941 65.2223L4.27974 63.9449C2.7323 63.1571 1.74756 61.289 1.74756 58.6442C1.74756 53.9006 4.90996 48.4424 8.80389 46.4616C10.5258 45.5838 12.107 45.5275 13.3337 46.1522L15.8434 47.4295Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.8432 47.4297C17.3907 48.2175 18.3754 50.0857 18.3754 52.7304C18.3754 57.4741 15.213 62.9323 11.319 64.913C9.59716 65.7909 8.01596 65.8471 6.78926 65.2225C5.24182 64.4347 4.25708 62.5666 4.25708 59.9218C4.25708 55.1782 7.4195 49.72 11.3134 47.7392C13.0353 46.8614 14.6165 46.8051 15.8432 47.4297Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.1332 55.353L9.13666 55.351M9.1332 60.153L9.13666 60.151M8.85607 57.113L13.5672 54.393C13.9553 54.169 14.1493 54.0569 14.2975 53.8842C14.4278 53.7322 14.5338 53.5486 14.6002 53.3598C14.6758 53.145 14.6758 52.921 14.6758 52.473V51.833C14.6758 51.3849 14.6758 51.1609 14.6002 51.0334C14.5338 50.9212 14.4278 50.86 14.2975 50.8586C14.1493 50.8569 13.9553 50.969 13.5672 51.193L8.85607 53.913C8.46805 54.137 8.27405 54.249 8.12585 54.4218C7.99548 54.5737 7.88949 54.7573 7.82307 54.9462C7.74756 55.1609 7.74756 55.3849 7.74756 55.833V56.473C7.74756 56.921 7.74756 57.145 7.82307 57.2726C7.88949 57.3848 7.99548 57.4459 8.12585 57.4474C8.27405 57.449 8.46806 57.337 8.85607 57.113ZM8.85607 61.913L13.5672 59.193C13.9553 58.969 14.1493 58.8569 14.2975 58.6842C14.4278 58.5322 14.5338 58.3486 14.6002 58.1598C14.6758 57.9451 14.6758 57.721 14.6758 57.273V56.633C14.6758 56.1849 14.6758 55.9609 14.6002 55.8334C14.5338 55.7212 14.4278 55.66 14.2975 55.6586C14.1493 55.6569 13.9553 55.769 13.5672 55.993L8.85607 58.713C8.46805 58.937 8.27405 59.049 8.12585 59.2218C7.99548 59.3737 7.88949 59.5573 7.82307 59.7462C7.74756 59.9609 7.74756 60.1849 7.74756 60.633V61.273C7.74756 61.721 7.74756 61.9451 7.82307 62.0726C7.88949 62.1848 7.99548 62.246 8.12585 62.2474C8.27405 62.249 8.46806 62.137 8.85607 61.913Z"
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <g opacity="0.2">
+        <path
+          d="M2.20337 134.919C2.20337 137.046 3.79582 139.168 6.97511 140.794L47.912 161.653C54.2762 164.895 64.5907 164.895 70.9549 161.653L156.976 117.824C160.155 116.204 161.748 114.082 161.748 111.955V118.747C161.748 120.874 160.155 122.995 156.976 124.616L70.9549 168.445C64.5907 171.686 54.2762 171.686 47.912 168.445L6.97511 147.586C3.79019 145.965 2.20337 143.838 2.20337 141.711V134.919Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M2.20337 134.919C2.20337 132.792 3.79582 130.671 6.97511 129.05L92.9961 85.2209C99.3603 81.9797 109.675 81.9797 116.039 85.2209L156.976 106.08C160.161 107.701 161.748 109.828 161.748 111.955C161.748 114.082 160.155 116.204 156.976 117.824L70.9549 161.653C64.5907 164.895 54.2762 164.895 47.912 161.653L6.97511 140.794C3.79019 139.173 2.20337 137.046 2.20337 134.919Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M2.20337 113.463C2.20337 115.59 3.79582 117.712 6.97511 119.338L47.912 140.197C54.2762 143.438 64.5907 143.438 70.9549 140.197L156.976 96.3681C160.155 94.7475 161.748 92.6261 161.748 90.499V97.2909C161.748 99.4179 160.155 101.539 156.976 103.16L70.9549 146.989C64.5907 150.23 54.2762 150.23 47.912 146.989L6.97511 126.13C3.79019 124.509 2.20337 122.382 2.20337 120.255V113.463Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M2.20337 113.463C2.20337 111.336 3.79582 109.215 6.97511 107.594L92.9961 63.7649C99.3603 60.5237 109.675 60.5237 116.039 63.7649L156.976 84.6244C160.161 86.245 161.748 88.372 161.748 90.4991C161.748 92.6261 160.155 94.7475 156.976 96.3681L70.9549 140.197C64.5907 143.439 54.2762 143.439 47.912 140.197L6.97511 119.338C3.79019 117.717 2.20337 115.59 2.20337 113.463Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M2.20337 92.0073C2.20337 94.1343 3.79582 96.2557 6.97511 97.8819L47.912 118.741C54.2762 121.983 64.5907 121.983 70.9549 118.741L156.976 74.9122C160.155 73.2916 161.748 71.1702 161.748 69.0432V75.8351C161.748 77.9621 160.155 80.0835 156.976 81.7041L70.9549 125.533C64.5907 128.775 54.2762 128.775 47.912 125.533L6.97511 104.674C3.79019 103.053 2.20337 100.926 2.20337 98.7991V92.0073Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2.20337 92.0071C2.20337 89.8801 3.79582 87.7587 6.97511 86.1381L92.9961 42.3088C99.3603 39.0676 109.675 39.0676 116.039 42.3088L156.976 63.1684C160.161 64.789 161.748 66.916 161.748 69.043C161.748 71.1701 160.155 73.2915 156.976 74.9121L70.9549 118.741C64.5907 121.982 54.2762 121.982 47.912 118.741L6.97511 97.8818C3.79019 96.2612 2.20337 94.1341 2.20337 92.0071Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M70.0996 92.4116C69.4525 92.4116 68.8448 92.2709 68.2989 91.9895L63.2852 89.4348C61.7153 88.6358 60.8149 86.8014 60.8149 84.4042V25.6577C60.8149 21.4205 63.6622 16.5193 67.1566 14.7355L94.3129 0.898567C94.3917 0.859177 94.4817 0.83667 94.5661 0.83667C94.6505 0.83667 94.7405 0.859177 94.8193 0.898567L99.833 3.45326C99.833 3.45326 99.878 3.48139 99.9005 3.49265L114.987 14.1616C115.139 14.2685 115.223 14.4373 115.223 14.623V62.3574C115.223 66.5946 112.376 71.4958 108.881 73.2795L72.6712 91.7307C71.7821 92.1809 70.9155 92.4116 70.0884 92.4116H70.0996Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <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"
+        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"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M99.5852 3.95386L114.671 14.6284V62.3628C114.671 66.4199 111.97 71.0848 108.639 72.7841L72.4289 91.2353C70.9547 91.9837 69.6042 92.0287 68.5575 91.4998C67.2352 90.8245 66.3967 89.2321 66.3967 86.97V28.2234C66.3967 24.1663 69.0977 19.5014 72.4289 17.8021L99.5852 3.96511V3.95386Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M93.9809 64.7865L76.6833 73.5984C75.6141 74.1443 74.7476 73.5309 74.7476 72.2311C74.7476 70.9312 75.6141 69.44 76.6833 68.8942L93.9809 60.0822C95.05 59.5364 95.9166 60.1498 95.9166 61.4496C95.9166 62.7495 95.05 64.2406 93.9809 64.7865Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+      />
+      <path
+        d="M102.185 46.4566L76.6833 59.4495C75.6141 59.9954 74.7476 59.382 74.7476 58.0822C74.7476 56.7823 75.6141 55.2911 76.6833 54.7453L102.185 41.7524C103.254 41.2066 104.121 41.8199 104.121 43.1198C104.121 44.4196 103.254 45.9108 102.185 46.4566Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+      />
+      <path
+        d="M99.5854 3.95386V14.9717C99.5854 19.0288 102.286 20.9363 105.618 19.2426L114.672 14.6284"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M99.5854 3.95386V14.9717C99.5854 19.0288 102.286 20.9363 105.618 19.2426L114.672 14.6284"
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <g clipPath="url(#clip0_1278_188)">
+        <path
+          d="M87.4006 34.9911L86.198 37.0745L84.9948 36.3801M86.3451 36.6423C86.3669 36.4017 86.3781 36.1634 86.3781 35.9287C86.3781 32.4767 83.9546 31.0775 80.9651 32.8035C77.9755 34.5295 75.552 38.7271 75.552 42.1792C75.552 45.6312 77.9755 47.0304 80.9651 45.3044C82.6655 44.3226 84.1828 42.5412 85.1752 40.5522M80.9651 35.5815V39.0539L82.7694 39.4012"
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M138.575 1.89434C139.802 1.26974 141.377 1.32038 143.105 2.20383C147.004 4.19019 150.161 9.64844 150.161 14.3864C150.161 17.0312 149.176 18.8993 147.629 19.6871L150.139 18.4098C151.686 17.622 152.671 15.7538 152.671 13.1091C152.671 8.36547 149.508 2.90721 145.614 0.926486C143.893 0.0486632 142.311 -0.00760811 141.085 0.616996L138.575 1.89434Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M138.575 1.89458C137.028 2.68237 136.043 4.55056 136.043 7.19528C136.043 11.9389 139.205 17.3972 143.099 19.3779C144.821 20.2557 146.402 20.312 147.629 19.6874C149.177 18.8996 150.161 17.0314 150.161 14.3867C150.161 9.64306 146.999 4.1848 143.105 2.20407C141.383 1.32625 139.802 1.26998 138.575 1.89458Z"
+        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="M139.459 6.68336C139.459 6.42451 139.633 6.30072 139.841 6.41326L146.768 9.94143C146.982 10.0483 147.151 10.3466 147.151 10.6054C147.151 10.8643 146.976 10.9881 146.768 10.8755L139.841 7.34735C139.628 7.24044 139.459 6.9422 139.459 6.68336ZM139.459 9.02422C139.459 8.76537 139.633 8.64158 139.841 8.75412L143.69 10.718C143.904 10.8249 144.073 11.1231 144.073 11.382C144.073 11.6408 143.899 11.7646 143.69 11.6521L139.841 9.68821C139.628 9.5813 139.459 9.28306 139.459 9.02422ZM139.847 10.6279C139.633 10.521 139.464 10.6392 139.464 10.898C139.464 11.1569 139.639 11.4551 139.847 11.562L142.542 12.935C142.756 13.0419 142.925 12.9238 142.925 12.6649C142.925 12.4061 142.751 12.1079 142.542 12.0009L139.847 10.6279ZM139.459 12.7718C139.459 12.513 139.633 12.3892 139.841 12.5017L141.383 13.2839C141.597 13.3908 141.766 13.6891 141.766 13.9479C141.766 14.2067 141.591 14.3305 141.383 14.218L139.841 13.4358C139.628 13.3289 139.459 13.0307 139.459 12.7718ZM146.245 12.7212C146.386 12.7944 146.521 12.9294 146.616 13.0982C146.718 13.267 146.768 13.4583 146.768 13.6328C146.768 13.8072 146.712 13.9366 146.616 14.0098L146.386 14.173L145.643 12.8844L145.874 12.7212C145.975 12.6537 146.104 12.6537 146.245 12.7212ZM145.429 13.0307L146.172 14.3193L144.484 15.5122C144.36 15.6023 144.208 15.6304 144.039 15.6079L143.499 15.5291C143.499 15.5291 143.443 15.5122 143.42 15.4897C143.392 15.4672 143.37 15.4391 143.353 15.4053C143.336 15.3716 143.319 15.3378 143.313 15.2984C143.308 15.2646 143.308 15.2309 143.313 15.2027L143.476 14.6288C143.527 14.4487 143.617 14.308 143.741 14.2236L145.429 13.0307Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+      />
+      <defs>
+        <clipPath id="clip0_1278_188">
+          <rect
+            width="16.6679"
+            height="16.6679"
+            fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+            transform="matrix(0.866025 -0.5 0 1 73.7476 34.887)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
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 85888d5e54..2f16f116d1 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/constant.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/constant.tsx
@@ -2,6 +2,7 @@ import {
   ArchivedCycleVerticalStackIllustration,
   ArchivedModuleVerticalStackIllustration,
   ArchivedWorkItemVerticalStackIllustration,
+  ChangelogVerticalStackIllustration,
   CustomerVerticalStackIllustration,
   CycleVerticalStackIllustration,
   DashboardVerticalStackIllustration,
@@ -33,6 +34,10 @@ export const VerticalStackAssetsMap = [
     asset: <ArchivedWorkItemVerticalStackIllustration />,
     title: "ArchivedWorkItemVerticalStackIllustration",
   },
+  {
+    asset: <ChangelogVerticalStackIllustration />,
+    title: "ChangelogVerticalStackIllustration",
+  },
   {
     asset: <CustomerVerticalStackIllustration />,
     title: "CustomerVerticalStackIllustration",
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 533624e513..f2cf174aa6 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/customer.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/customer.tsx
@@ -1,374 +1,376 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const CustomerVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg
-    width="162"
-    height="171"
-    viewBox="0 0 162 171"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <g opacity="0.2">
+export function CustomerVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="171"
+      viewBox="0 0 162 171"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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 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 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"
+        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"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-    </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"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
       />
       <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"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
       />
-    </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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      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"
-      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="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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-  </svg>
-);
+      <path
+        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="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="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="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="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="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="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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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="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="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="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.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="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.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="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="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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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 a4551fc5dd..cc12b8e6fc 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/cycle.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/cycle.tsx
@@ -1,243 +1,245 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const CycleVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg
-    width="160"
-    height="165"
-    viewBox="0 0 160 165"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <g clipPath="url(#clip0_446_128653)">
-      <g opacity="0.2">
+export function CycleVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="160"
+      height="165"
+      viewBox="0 0 160 165"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g clipPath="url(#clip0_446_128653)">
+        <g opacity="0.2">
+          <path
+            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.primary}
+            strokeWidth="0.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            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.primary}
+            strokeWidth="0.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+        <g opacity="0.6">
+          <path
+            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.primary}
+            strokeWidth="0.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            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.primary}
+            strokeWidth="0.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
         <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 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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          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.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.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"
           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"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          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"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
-      </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"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          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.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.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.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="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"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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 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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          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.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 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 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.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 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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.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 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.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 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>
-      <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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <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"
-        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}
-      />
-      <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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        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"
-        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}
-      />
-      <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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        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}
-      />
-      <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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <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}
-      />
-      <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}
-      />
-      <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}
-      />
-      <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}
-      />
-      <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}
-      />
-      <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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        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}
-      />
-      <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}
-      />
-      <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}
-      />
-      <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}
-      />
-      <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}
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_446_128653">
-        <rect width="160" height="164" fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary} transform="translate(0 0.5)" />
-      </clipPath>
-    </defs>
-  </svg>
-);
+      <defs>
+        <clipPath id="clip0_446_128653">
+          <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 11093ff6e4..7e0a350eab 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/dashboard.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/dashboard.tsx
@@ -1,318 +1,320 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const DashboardVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg
-    width="162"
-    height="165"
-    viewBox="0 0 162 165"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <g opacity="0.2">
+export function DashboardVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="165"
+      viewBox="0 0 162 165"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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 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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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="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="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="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="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="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="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="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"
         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="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"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-    </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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        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="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"
         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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      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}
-    />
-    <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"
-      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}
-    />
-    <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"
-      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}
-    />
-    <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"
-      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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      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"
-      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.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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      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="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}
-    />
-    <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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-  </svg>
-);
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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="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="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="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.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="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.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="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="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="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="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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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="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="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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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 2c47e6e736..66128a16be 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/draft.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/draft.tsx
@@ -1,266 +1,268 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const DraftVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg
-    width="162"
-    height="175"
-    viewBox="0 0 162 175"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <g opacity="0.2">
+export function DraftVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="175"
+      viewBox="0 0 162 175"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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 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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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="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"
         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="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"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-    </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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        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="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="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.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="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"
         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="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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
         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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      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"
-      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}
-    />
-    <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"
-      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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M117.153 16.712L125.497 22.6119L120.675 20.1571L112.331 14.252L117.153 16.712Z"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      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"
-      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="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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      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="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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      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="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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      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="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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-  </svg>
-);
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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="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="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="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="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="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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.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="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.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 f261b27384..4455ba75cd 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/epic.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/epic.tsx
@@ -1,224 +1,226 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const EpicVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg
-    width="162"
-    height="166"
-    viewBox="0 0 162 166"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.35"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.35"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <g opacity="0.2">
+export function EpicVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="166"
+      viewBox="0 0 162 166"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
       <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"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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="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="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="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="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.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.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        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.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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="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"
         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="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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-    </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"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
       />
       <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"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
       />
-    </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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.35"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.35"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.35"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.35"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.35"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.35"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.35"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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}
-    />
-  </svg>
-);
+      <path
+        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="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="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.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.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.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.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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 70fc2f2966..2a9372167f 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/index.ts
+++ b/packages/propel/src/empty-state/assets/vertical-stack/index.ts
@@ -2,6 +2,7 @@ export * from "./404-error";
 export * from "./archived-cycle";
 export * from "./archived-module";
 export * from "./archived-work-item";
+export * from "./changelog";
 export * from "./customer";
 export * from "./cycle";
 export * from "./dashboard";
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 d8cc144867..a3b0d1fb6e 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/initiative.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/initiative.tsx
@@ -1,248 +1,250 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const InitiativeVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg
-    width="162"
-    height="171"
-    viewBox="0 0 162 171"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <g opacity="0.2">
+export function InitiativeVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="171"
+      viewBox="0 0 162 171"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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 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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
         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"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-    </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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
         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"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
       />
-    </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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      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="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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      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="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"
-      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="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"
-      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="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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-  </svg>
-);
+      <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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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="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="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="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="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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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 1483041e8c..a486b669dd 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,178 +1,180 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const InvalidLinkVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg
-    width="161"
-    height="151"
-    viewBox="0 0 161 151"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <g opacity="0.2">
+export function InvalidLinkVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="161"
+      height="151"
+      viewBox="0 0 161 151"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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 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 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 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"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-    </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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        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="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"
         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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      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"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+      <path
+        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}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
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 38de28f7fe..e0da0a14f4 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/module.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/module.tsx
@@ -1,374 +1,376 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const ModuleVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg
-    width="162"
-    height="168"
-    viewBox="0 0 162 168"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <g opacity="0.2">
+export function ModuleVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="168"
+      viewBox="0 0 162 168"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          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.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.35"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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 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 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 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.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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.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.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-    </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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        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="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="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="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="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="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="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="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="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.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="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"
         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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.35"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.35"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.35"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.35"
-      strokeLinecap="round"
-      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"
-      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}
-    />
-    <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"
-      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}
-    />
-    <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"
-      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}
-    />
-    <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"
-      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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.35"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.35"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.35"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.35"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.35"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.35"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.35"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-  </svg>
-);
+      <path
+        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.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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="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="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="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="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="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="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="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="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.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="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="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.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="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.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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="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.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.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.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.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.35"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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="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="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.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="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 1e4969a7f3..38a4fae9ba 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,164 +1,166 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const NoAccessVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg
-    width="161"
-    height="169"
-    viewBox="0 0 161 169"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <g opacity="0.2">
+export function NoAccessVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="161"
+      height="169"
+      viewBox="0 0 161 169"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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 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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.primary}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.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.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"
         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="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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-    </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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.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="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"
         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"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
         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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M106.721 60.5611L71.22 35.438L66.1919 32.876L101.693 57.9992L106.721 60.5611Z"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
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 b93cc5ec17..31473edf6a 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/page.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/page.tsx
@@ -1,257 +1,255 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const PageVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg
-    width="162"
-    height="177"
-    viewBox="0 0 162 177"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      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="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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <g opacity="0.2">
+export function PageVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="177"
+      viewBox="0 0 162 177"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
       <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"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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="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="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="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="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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.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.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"
         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="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"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-    </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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        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="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.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"
       />
-    </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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M98.8376 9.40088V20.4187C98.8376 24.4758 101.539 26.3834 104.87 24.6896L113.924 20.0754"
-      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"
-      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}
-    />
-    <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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      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="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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      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="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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-  </svg>
-);
+      <path
+        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="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.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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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="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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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="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="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="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="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="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="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="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="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 e2863ea2e3..a409a06e4a 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/project.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/project.tsx
@@ -1,248 +1,245 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const ProjectVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg
-    width="160"
-    height="143"
-    viewBox="0 0 160 143"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <g clipPath="url(#clip0_145_15535)">
-      <g opacity="0.2">
+export function ProjectVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="160"
+      height="143"
+      viewBox="0 0 160 143"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g clipPath="url(#clip0_1047_10396)">
+        <g opacity="0.2">
+          <path
+            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.primary}
+            strokeWidth="0.4"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            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.primary}
+            strokeWidth="0.4"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+        <g opacity="0.6">
+          <path
+            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.primary}
+            strokeWidth="0.4"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            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.primary}
+            strokeWidth="0.4"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
         <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 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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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 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 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"
           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="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"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          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 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 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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          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 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 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 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 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.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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.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 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>
-      <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"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-          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"
-          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-          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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        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"
-        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}
-      />
-      <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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M78.756 36.8834L91.7264 30.276L87.7619 28.2559L74.7915 34.8634L78.756 36.8834Z"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        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"
-        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="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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <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"
-        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="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}
-      />
-      <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}
-      />
-      <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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <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"
-        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="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}
-      />
-      <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}
-      />
-      <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}
-      />
-      <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}
-      />
-      <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}
-      />
-      <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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        strokeWidth="0.4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-        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}
-      />
-      <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}
-      />
-      <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}
-      />
-    </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>
-    </defs>
-  </svg>
-);
+      <defs>
+        <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 1685d18dc1..f66d9eca38 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,330 +1,332 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const ServerErrorVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg
-    width="162"
-    height="184"
-    viewBox="0 0 162 184"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <g opacity="0.2">
+export function ServerErrorVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="184"
+      viewBox="0 0 162 184"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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 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 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 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"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-    </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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        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="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="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="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"
         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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      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}
-    />
-    <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}
-    />
-    <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"
-      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 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"
-      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 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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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"
-      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 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"
-      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 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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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"
-      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 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"
-      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 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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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"
-      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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.tertiary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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.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="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="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="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="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.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.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="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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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.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="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="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="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="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.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.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="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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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.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="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="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="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="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.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.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="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="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="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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
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 bf1ba1fa81..a5ce076b4d 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/teamspace.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/teamspace.tsx
@@ -1,352 +1,354 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const TeamspaceVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg
-    width="162"
-    height="188"
-    viewBox="0 0 162 188"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <g opacity="0.2">
+export function TeamspaceVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="188"
+      viewBox="0 0 162 188"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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 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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.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="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="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="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="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="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="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="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"
         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"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-    </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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
         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"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
         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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      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="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"
-      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}
-    />
-    <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"
-      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}
-    />
-    <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"
-      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}
-    />
-    <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"
-      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}
-    />
-    <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"
-      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="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"
-      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="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"
-      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="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"
-      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="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"
-      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="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"
-      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="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"
-      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="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"
-      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="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"
-      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="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"
-      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="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"
-      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="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"
-      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="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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-  </svg>
-);
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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="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="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="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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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="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="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.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="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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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.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="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="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="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 223e1fa72a..34128e0ab4 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/view.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/view.tsx
@@ -1,318 +1,320 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const ViewVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg
-    width="162"
-    height="163"
-    viewBox="0 0 162 163"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    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}
-    />
-    <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}
-    />
-    <g opacity="0.2">
+export function ViewVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="163"
+      viewBox="0 0 162 163"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
       <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="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="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="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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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="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="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.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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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="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="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="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="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="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="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="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="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="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="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="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.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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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="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="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="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="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="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="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="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="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="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="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="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"
         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"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-    </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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
         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"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
         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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      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="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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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"
-      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}
-    />
-    <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"
-      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}
-    />
-    <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"
-      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}
-    />
-    <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"
-      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="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"
-      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="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"
-      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="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"
-      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.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"
-      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="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"
-      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.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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
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 0d08144019..392d691cd5 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,246 +1,248 @@
 import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
 import type { TIllustrationAssetProps } from "../helper";
 
-export const WorkItemVerticalStackIllustration = ({ className }: TIllustrationAssetProps) => (
-  <svg
-    width="162"
-    height="180"
-    viewBox="0 0 162 180"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <g opacity="0.2">
+export function WorkItemVerticalStackIllustration({ className }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="180"
+      viewBox="0 0 162 180"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g opacity="0.2">
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          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.primary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
       <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 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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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="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="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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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.primary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        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.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="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="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="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="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.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="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.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="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"
         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"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
-    </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"
-        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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="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="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"
         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"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
         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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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"
-      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="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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      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="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}
-    />
-    <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}
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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}
-    />
-    <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"
-      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}
-    />
-    <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"
-      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="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"
-      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="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"
-      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}
-    />
-    <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"
-      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="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"
-      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="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"
-      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}
-    />
-    <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"
-      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.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"
-      fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
-      stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
-      strokeWidth="0.4"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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="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="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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        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"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
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 d49d5f10b1..21da64a5cb 100644
--- a/packages/propel/src/empty-state/compact-empty-state.stories.tsx
+++ b/packages/propel/src/empty-state/compact-empty-state.stories.tsx
@@ -110,7 +110,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 5a4523d1fd..0bcbb0cd72 100644
--- a/packages/propel/src/empty-state/compact-empty-state.tsx
+++ b/packages/propel/src/empty-state/compact-empty-state.tsx
@@ -5,7 +5,7 @@ import { getCompactAsset } from "./assets/asset-registry";
 import type { CompactAssetType } from "./assets/asset-types";
 import type { BaseEmptyStateCommonProps } from "./types";
 
-export const EmptyStateCompact: React.FC<BaseEmptyStateCommonProps> = ({
+export function EmptyStateCompact({
   asset,
   assetKey,
   title,
@@ -16,7 +16,7 @@ export const EmptyStateCompact: React.FC<BaseEmptyStateCommonProps> = ({
   assetClassName,
   align = "center",
   customButton,
-}) => {
+}: BaseEmptyStateCommonProps) {
   // Determine which asset to use: assetKey takes precedence, fallback to custom asset
   const resolvedAsset = assetKey ? getCompactAsset(assetKey as CompactAssetType, assetClassName) : asset;
 
@@ -33,11 +33,11 @@ export const EmptyStateCompact: React.FC<BaseEmptyStateCommonProps> = ({
         <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 font-semibold leading-7 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 +48,7 @@ export const EmptyStateCompact: React.FC<BaseEmptyStateCommonProps> = ({
                   {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>
                     );
@@ -59,6 +59,6 @@ export const EmptyStateCompact: React.FC<BaseEmptyStateCommonProps> = ({
       </div>
     </div>
   );
-};
+}
 
 EmptyStateCompact.displayName = "EmptyStateCompact";
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 a06d2cbca8..fc793759a8 100644
--- a/packages/propel/src/empty-state/detailed-empty-state.stories.tsx
+++ b/packages/propel/src/empty-state/detailed-empty-state.stories.tsx
@@ -122,7 +122,7 @@ export const WithMultipleActions: Story = {
       {
         label: "Import Modules",
         onClick: () => console.log("import-clicked"),
-        variant: "outline-primary",
+        variant: "secondary",
       },
     ],
   },
@@ -169,7 +169,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 9680aea71d..e8004aaf10 100644
--- a/packages/propel/src/empty-state/detailed-empty-state.tsx
+++ b/packages/propel/src/empty-state/detailed-empty-state.tsx
@@ -1,11 +1,11 @@
-import React from "react";
+// local imports
 import { Button } from "../button/button";
 import { cn } from "../utils/classname";
 import { getDetailedAsset } from "./assets/asset-registry";
 import type { DetailedAssetType } from "./assets/asset-types";
 import type { BaseEmptyStateCommonProps } from "./types";
 
-export const EmptyStateDetailed: React.FC<BaseEmptyStateCommonProps> = ({
+export function EmptyStateDetailed({
   asset,
   assetKey,
   title,
@@ -15,20 +15,33 @@ export const EmptyStateDetailed: React.FC<BaseEmptyStateCommonProps> = ({
   rootClassName,
   assetClassName,
   customButton,
-}) => {
+  align = "start",
+}: BaseEmptyStateCommonProps) {
   // Determine which asset to use: assetKey takes precedence, fallback to custom asset
   const resolvedAsset = assetKey ? getDetailedAsset(assetKey as DetailedAssetType, assetClassName) : asset;
 
   return (
     <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", className)}>
+      <div
+        className={cn(
+          "flex max-w-[25rem] size-full flex-col justify-center gap-6 text-left",
+          {
+            "items-center text-center": align === "center",
+          },
+          className
+        )}
+      >
         {resolvedAsset && <div className="flex max-w-40 items-center">{resolvedAsset}</div>}
 
-        <div className="flex flex-col gap-4">
+        <div
+          className={cn("flex flex-col gap-4", {
+            "items-center": align === "center",
+          })}
+        >
           {(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 font-semibold leading-7 text-primary">{title}</h3>}
+              {description && <p className="text-13 leading-5 text-tertiary">{description}</p>}
             </div>
           )}
 
@@ -40,7 +53,7 @@ export const EmptyStateDetailed: React.FC<BaseEmptyStateCommonProps> = ({
                   {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>
                     );
@@ -51,6 +64,6 @@ export const EmptyStateDetailed: React.FC<BaseEmptyStateCommonProps> = ({
       </div>
     </div>
   );
-};
+}
 
 EmptyStateDetailed.displayName = "EmptyStateDetailed";
diff --git a/packages/propel/src/empty-state/empty-state.tsx b/packages/propel/src/empty-state/empty-state.tsx
index d94734749e..fd2f24467a 100644
--- a/packages/propel/src/empty-state/empty-state.tsx
+++ b/packages/propel/src/empty-state/empty-state.tsx
@@ -29,7 +29,7 @@ export interface EmptyStateProps {
   assetKey?: CompactAssetType | DetailedAssetType;
 }
 
-export const EmptyState: React.FC<EmptyStateProps> = ({
+export function EmptyState({
   type = "detailed",
   asset,
   assetKey,
@@ -39,7 +39,7 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
   className,
   rootClassName,
   assetClassName,
-}) => {
+}: EmptyStateProps) {
   if (type === "simple") {
     return (
       <EmptyStateCompact
@@ -66,6 +66,6 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
       assetClassName={assetClassName}
     />
   );
-};
+}
 
 EmptyState.displayName = "EmptyState";
diff --git a/packages/propel/src/icon-button/helper.tsx b/packages/propel/src/icon-button/helper.tsx
new file mode 100644
index 0000000000..e012e1f256
--- /dev/null
+++ b/packages/propel/src/icon-button/helper.tsx
@@ -0,0 +1,50 @@
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import type React from "react";
+
+export const iconButtonVariants = cva(
+  "inline-flex items-center justify-center gap-1 aspect-square whitespace-nowrap transition-colors focus-visible:outline-none disabled:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        primary:
+          "bg-accent-primary hover:bg-accent-primary-hover active:bg-accent-primary-active focus:bg-accent-primary-active disabled:bg-layer-disabled text-on-color disabled:text-on-color-disabled",
+        "error-fill":
+          "bg-danger-primary hover:bg-danger-primary-hover active:bg-danger-primary-active focus:bg-danger-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
+        "error-outline":
+          "bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover focus:bg-danger-subtle-hover disabled:bg-layer-2 text-danger disabled:text-disabled border border-danger-strong disabled:border-subtle-1",
+        secondary:
+          "bg-layer-2 hover:bg-layer-2-hover active:bg-layer-2-active focus:bg-layer-2-active disabled:bg-layer-transparent text-secondary disabled:text-disabled border border-strong disabled:border-subtle-1 shadow-raised-100",
+        tertiary:
+          "bg-layer-3 hover:bg-layer-3-hover active:bg-layer-3-active focus:bg-layer-3-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
+        ghost:
+          "bg-layer-transparent hover:bg-layer-transparent-hover active:bg-layer-transparent-active focus:bg-layer-transparent-active disabled:bg-layer-transparent text-secondary 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 0000000000..b357c232eb
--- /dev/null
+++ b/packages/propel/src/icon-button/icon-button.stories.tsx
@@ -0,0 +1,174 @@
+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 0000000000..2d032de1fd
--- /dev/null
+++ b/packages/propel/src/icon-button/icon-button.tsx
@@ -0,0 +1,46 @@
+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 0000000000..d568c3588d
--- /dev/null
+++ b/packages/propel/src/icon-button/index.ts
@@ -0,0 +1,3 @@
+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
new file mode 100644
index 0000000000..319e89a9a1
--- /dev/null
+++ b/packages/propel/src/icons/actions/add-circle-icon.tsx
@@ -0,0 +1,17 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function AddCircleIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  const clipPathId = React.useId();
+
+  return (
+    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+      <path
+        d="M14.0413 8C14.0413 4.66339 11.3368 1.95818 8.00024 1.95801C4.66352 1.95801 1.95825 4.66328 1.95825 8C1.95843 11.3366 4.66363 14.041 8.00024 14.041C11.3367 14.0408 14.0411 11.3365 14.0413 8ZM7.37524 10.666V8.625H5.33325C4.98818 8.625 4.70843 8.34503 4.70825 8C4.70825 7.65482 4.98807 7.375 5.33325 7.375H7.37524V5.33301C7.37524 4.98783 7.65507 4.70801 8.00024 4.70801C8.34527 4.70818 8.62524 4.98794 8.62524 5.33301V7.375H10.6663C11.0114 7.375 11.2913 7.65482 11.2913 8C11.2911 8.34503 11.0113 8.625 10.6663 8.625H8.62524V10.666C8.62524 11.0111 8.34527 11.2908 8.00024 11.291C7.65507 11.291 7.37524 11.0112 7.37524 10.666ZM15.2913 8C15.2911 12.0268 12.0271 15.2908 8.00024 15.291C3.97328 15.291 0.708428 12.0269 0.708252 8C0.708252 3.97292 3.97317 0.708008 8.00024 0.708008C12.0272 0.708184 15.2913 3.97303 15.2913 8Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/actions/add-icon.tsx b/packages/propel/src/icons/actions/add-icon.tsx
index b4571ab41a..d6a85e0e71 100644
--- a/packages/propel/src/icons/actions/add-icon.tsx
+++ b/packages/propel/src/icons/actions/add-icon.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const AddIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+export function AddIcon({ color = "currentColor", ...rest }: ISvgIcons) {
   const clipPathId = React.useId();
 
   return (
@@ -14,4 +14,4 @@ export const AddIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }
       />
     </IconWrapper>
   );
-};
+}
diff --git a/packages/propel/src/icons/actions/add-reaction-icon.tsx b/packages/propel/src/icons/actions/add-reaction-icon.tsx
index 1ce0ce4057..b1c3ae3d01 100644
--- a/packages/propel/src/icons/actions/add-reaction-icon.tsx
+++ b/packages/propel/src/icons/actions/add-reaction-icon.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const AddReactionIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+export function AddReactionIcon({ color = "currentColor", ...rest }: ISvgIcons) {
   const clipPathId = React.useId();
 
   return (
@@ -18,4 +18,4 @@ export const AddReactionIcon: React.FC<ISvgIcons> = ({ color = "currentColor", .
       />
     </IconWrapper>
   );
-};
+}
diff --git a/packages/propel/src/icons/actions/add-workitem-icon.tsx b/packages/propel/src/icons/actions/add-workitem-icon.tsx
new file mode 100644
index 0000000000..554dfe6440
--- /dev/null
+++ b/packages/propel/src/icons/actions/add-workitem-icon.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function AddWorkItemIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M9.36189 1.34266C9.55577 1.26718 9.77503 1.29228 9.94587 1.41102C10.1167 1.52976 10.2166 1.72643 10.2135 1.93446L10.1724 4.62782L12.6832 3.65125C12.8771 3.57578 13.0963 3.60087 13.2672 3.71961C13.438 3.83836 13.5379 4.03503 13.5347 4.24305L13.5084 5.98914C13.5031 6.33428 13.2187 6.60964 12.8736 6.60438C12.5287 6.59891 12.2532 6.31549 12.2584 5.97059L12.2711 5.15223L6.77497 7.29188L6.68611 13.1395L8.18904 12.4725C8.50447 12.3324 8.87409 12.4745 9.01423 12.7899C9.15435 13.1054 9.01231 13.475 8.69685 13.6151L6.30037 14.6796C6.10549 14.7661 5.87962 14.7473 5.70173 14.6298C5.52385 14.5122 5.41821 14.3117 5.42146 14.0985L5.46248 11.4042L2.95173 12.3817C2.75801 12.4571 2.5395 12.4319 2.36873 12.3134C2.19789 12.1946 2.097 11.998 2.10017 11.7899L2.20662 4.8036C2.2073 4.7586 2.20144 4.57678 2.26423 4.41004C2.31399 4.278 2.39516 4.16094 2.50154 4.06825L2.60701 3.9911C2.71394 3.92493 2.81844 3.88917 2.85017 3.87684L9.36189 1.34266ZM10.7476 12.1024V10.954L9.70759 11.4393C9.39475 11.5852 9.02242 11.4494 8.87654 11.1366C8.73095 10.8238 8.86656 10.4523 9.17927 10.3065L10.7476 9.57411V7.84364C10.7476 7.4986 11.0276 7.21887 11.3726 7.21864C11.7178 7.21864 11.9976 7.49846 11.9976 7.84364V8.9911L13.0386 8.50672C13.3514 8.36087 13.7238 8.49578 13.8697 8.80848C14.0156 9.12132 13.8798 9.49366 13.567 9.63953L11.9976 10.371V12.1024C11.9976 12.4476 11.7178 12.7274 11.3726 12.7274C11.0276 12.7272 10.7476 12.4475 10.7476 12.1024ZM3.45369 4.98328L3.36384 10.8798L5.48298 10.0546L5.5279 7.11219C5.52859 7.06717 5.52273 6.88538 5.58552 6.71864L5.62849 6.62196C5.6773 6.52916 5.74317 6.44626 5.82283 6.37684L5.9283 6.29969C6.03518 6.23354 6.13963 6.19779 6.17146 6.18543L8.91462 5.11805L8.9488 2.84364L3.45369 4.98328Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/actions/close-icon.tsx b/packages/propel/src/icons/actions/close-icon.tsx
index f8003fdb01..e0fa242b9a 100644
--- a/packages/propel/src/icons/actions/close-icon.tsx
+++ b/packages/propel/src/icons/actions/close-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const CloseIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
-    <path
-      d="M10.8501 4.18306C11.094 3.93925 11.4898 3.93936 11.7338 4.18306C11.9779 4.42714 11.9779 4.82375 11.7338 5.06782L8.84224 7.95845L11.7338 10.8501C11.9779 11.0941 11.9779 11.4898 11.7338 11.7338C11.4898 11.9779 11.0941 11.9779 10.8501 11.7338L7.95845 8.84224L5.06782 11.7338C4.82375 11.9779 4.42714 11.9779 4.18306 11.7338C3.93936 11.4898 3.93925 11.094 4.18306 10.8501L7.07368 7.95845L4.18306 5.06782C3.93898 4.82375 3.93898 4.42714 4.18306 4.18306C4.42714 3.93898 4.82375 3.93898 5.06782 4.18306L7.95845 7.07368L10.8501 4.18306Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function CloseIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
+      <path
+        d="M10.8501 4.18306C11.094 3.93925 11.4898 3.93936 11.7338 4.18306C11.9779 4.42714 11.9779 4.82375 11.7338 5.06782L8.84224 7.95845L11.7338 10.8501C11.9779 11.0941 11.9779 11.4898 11.7338 11.7338C11.4898 11.9779 11.0941 11.9779 10.8501 11.7338L7.95845 8.84224L5.06782 11.7338C4.82375 11.9779 4.42714 11.9779 4.18306 11.7338C3.93936 11.4898 3.93925 11.094 4.18306 10.8501L7.07368 7.95845L4.18306 5.06782C3.93898 4.82375 3.93898 4.42714 4.18306 4.18306C4.42714 3.93898 4.82375 3.93898 5.06782 4.18306L7.95845 7.07368L10.8501 4.18306Z"
+        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 0000000000..831e8b4030
--- /dev/null
+++ b/packages/propel/src/icons/actions/copy-link.tsx
@@ -0,0 +1,13 @@
+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/filter-applied-icon.tsx b/packages/propel/src/icons/actions/filter-applied-icon.tsx
new file mode 100644
index 0000000000..9daf2b11d2
--- /dev/null
+++ b/packages/propel/src/icons/actions/filter-applied-icon.tsx
@@ -0,0 +1,21 @@
+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 0000000000..b0d038e07b
--- /dev/null
+++ b/packages/propel/src/icons/actions/filter-icon.tsx
@@ -0,0 +1,17 @@
+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/index.ts b/packages/propel/src/icons/actions/index.ts
index 16971752fe..4409c29b21 100644
--- a/packages/propel/src/icons/actions/index.ts
+++ b/packages/propel/src/icons/actions/index.ts
@@ -1,3 +1,11 @@
+export * from "./add-circle-icon";
 export * from "./add-icon";
+export * from "./add-workitem-icon";
 export * from "./add-reaction-icon";
 export * from "./close-icon";
+export * from "./filter-icon";
+export * from "./filter-applied-icon";
+export * from "./search-icon";
+export * from "./preferences-icon";
+export * from "./copy-link";
+export * from "./upgrade-icon";
diff --git a/packages/propel/src/icons/actions/preferences-icon.tsx b/packages/propel/src/icons/actions/preferences-icon.tsx
new file mode 100644
index 0000000000..60a3ec3ebd
--- /dev/null
+++ b/packages/propel/src/icons/actions/preferences-icon.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function PreferencesIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M14 13.292L9.95801 13.292L9.95801 14.667C9.95801 15.0122 9.67819 15.292 9.33301 15.292C8.98798 15.2918 8.70801 15.0121 8.70801 14.667L8.70801 10.667C8.70801 10.3219 8.98798 10.0422 9.33301 10.042C9.67819 10.042 9.95801 10.3218 9.95801 10.667L9.95801 12.042L14 12.042C14.3452 12.042 14.625 12.3218 14.625 12.667C14.625 13.0122 14.3452 13.292 14 13.292ZM14 8.625L8 8.625C7.65482 8.625 7.375 8.34518 7.375 8C7.37518 7.65497 7.65493 7.375 8 7.375L14 7.375C14.3451 7.375 14.6248 7.65497 14.625 8C14.625 8.34518 14.3452 8.625 14 8.625ZM14 3.95898L11.292 3.95898L11.292 5.33398C11.2918 5.6789 11.0119 5.95881 10.667 5.95898C10.3219 5.95898 10.0422 5.67901 10.042 5.33398L10.042 1.33398C10.042 0.988806 10.3218 0.708984 10.667 0.708984C11.012 0.709159 11.292 0.988914 11.292 1.33398L11.292 2.70898L14 2.70898C14.3452 2.70898 14.625 2.98881 14.625 3.33398C14.6248 3.67901 14.3451 3.95898 14 3.95898ZM8 3.95898L2 3.95898C1.65493 3.95898 1.37517 3.67901 1.375 3.33398C1.375 2.98881 1.65482 2.70898 2 2.70898L8 2.70898C8.34518 2.70898 8.625 2.98881 8.625 3.33398C8.62482 3.67901 8.34507 3.95898 8 3.95898ZM6.66699 13.292L2 13.292C1.65482 13.292 1.375 13.0122 1.375 12.667C1.375 12.3218 1.65482 12.042 2 12.042L6.66699 12.042C7.01202 12.0422 7.29199 12.3219 7.29199 12.667C7.29199 13.0121 7.01202 13.2918 6.66699 13.292ZM2 8.625C1.65482 8.625 1.375 8.34518 1.375 8C1.37518 7.65497 1.65493 7.375 2 7.375L4.70801 7.375L4.70801 6C4.70818 5.65508 4.98809 5.37518 5.33301 5.375C5.67808 5.375 5.95783 5.65497 5.95801 6L5.95801 10C5.95801 10.3452 5.67819 10.625 5.33301 10.625C4.98798 10.6248 4.70801 10.3451 4.70801 10L4.70801 8.625L2 8.625Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/actions/search-icon.tsx b/packages/propel/src/icons/actions/search-icon.tsx
new file mode 100644
index 0000000000..19a2ca34ad
--- /dev/null
+++ b/packages/propel/src/icons/actions/search-icon.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function SearchIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M10.458 6.41699C10.458 4.18495 8.649 2.37518 6.41699 2.375C4.18484 2.375 2.375 4.18484 2.375 6.41699C2.37518 8.649 4.18495 10.458 6.41699 10.458C8.64889 10.4578 10.4578 8.64889 10.458 6.41699ZM11.708 6.41699C11.7079 7.65259 11.2831 8.78796 10.5732 9.68848L14.1924 13.3076C14.4365 13.5517 14.4365 13.9483 14.1924 14.1924C13.9483 14.4365 13.5517 14.4365 13.3076 14.1924L9.68848 10.5732C8.78796 11.2831 7.65259 11.7079 6.41699 11.708C3.4946 11.708 1.12518 9.33935 1.125 6.41699C1.125 3.49449 3.49449 1.125 6.41699 1.125C9.33935 1.12518 11.708 3.4946 11.708 6.41699Z"
+        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 0000000000..6c9ba9a29d
--- /dev/null
+++ b/packages/propel/src/icons/actions/upgrade-icon.tsx
@@ -0,0 +1,15 @@
+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 469f4ac21b..aa32a5986b 100644
--- a/packages/propel/src/icons/activity-icon.tsx
+++ b/packages/propel/src/icons/activity-icon.tsx
@@ -1,30 +1,30 @@
-import * as React from "react";
-
 import type { ISvgIcons } from "./type";
 
-export const ActivityIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    {...rest}
-  >
-    <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"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_15681_9387">
-        <rect width="16" height="16" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
+export function ActivityIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...rest}
+    >
+      <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="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_15681_9387">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/ai-icon.tsx b/packages/propel/src/icons/ai-icon.tsx
index fce937c025..962e56051b 100644
--- a/packages/propel/src/icons/ai-icon.tsx
+++ b/packages/propel/src/icons/ai-icon.tsx
@@ -2,29 +2,31 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const AiIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16", className, color = "currentColor" }) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 16 16"
-    fill={color}
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <g clipPath="url(#clip0_888_35571)">
-      <path
-        d="M14.2082 0H1.79185C0.801553 0 0 0.801553 0 1.79185V14.2093C0 15.1984 0.801553 16.0012 1.79185 16.0012H14.2093C15.1984 16.0012 16.0012 15.1996 16.0012 14.2093V1.79185C16.0012 0.802748 15.1996 0 14.2093 0H14.2082ZM13.1032 11.5276C13.1032 12.3984 12.3972 13.1032 11.5276 13.1032H4.47245C3.60161 13.1032 2.89682 12.3972 2.89682 11.5276V4.47245C2.89682 3.60161 3.60281 2.89682 4.47245 2.89682H11.5276C12.3984 2.89682 13.1032 3.60281 13.1032 4.47245V11.5276Z"
-        fill={color}
-      />
-      <path
-        d="M9.61291 4.94336H6.38759C5.58996 4.94336 4.94336 5.58996 4.94336 6.38759V9.61291C4.94336 10.4105 5.58996 11.0571 6.38759 11.0571H9.61291C10.4105 11.0571 11.0571 10.4105 11.0571 9.61291V6.38759C11.0571 5.58996 10.4105 4.94336 9.61291 4.94336Z"
-        fill={color}
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_888_35571">
-        <rect width="16" height="16" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
+export function AiIcon({ width = "16", height = "16", className, color = "currentColor" }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 16 16"
+      fill={color}
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g clipPath="url(#clip0_888_35571)">
+        <path
+          d="M14.2082 0H1.79185C0.801553 0 0 0.801553 0 1.79185V14.2093C0 15.1984 0.801553 16.0012 1.79185 16.0012H14.2093C15.1984 16.0012 16.0012 15.1996 16.0012 14.2093V1.79185C16.0012 0.802748 15.1996 0 14.2093 0H14.2082ZM13.1032 11.5276C13.1032 12.3984 12.3972 13.1032 11.5276 13.1032H4.47245C3.60161 13.1032 2.89682 12.3972 2.89682 11.5276V4.47245C2.89682 3.60161 3.60281 2.89682 4.47245 2.89682H11.5276C12.3984 2.89682 13.1032 3.60281 13.1032 4.47245V11.5276Z"
+          fill={color}
+        />
+        <path
+          d="M9.61291 4.94336H6.38759C5.58996 4.94336 4.94336 5.58996 4.94336 6.38759V9.61291C4.94336 10.4105 5.58996 11.0571 6.38759 11.0571H9.61291C10.4105 11.0571 11.0571 10.4105 11.0571 9.61291V6.38759C11.0571 5.58996 10.4105 4.94336 9.61291 4.94336Z"
+          fill={color}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_888_35571">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/arrows/chevron-down.tsx b/packages/propel/src/icons/arrows/chevron-down.tsx
index 41de64cf22..848c3b8282 100644
--- a/packages/propel/src/icons/arrows/chevron-down.tsx
+++ b/packages/propel/src/icons/arrows/chevron-down.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const ChevronDownIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
-    <path
-      d="M11.5576 5.55708C11.8016 5.313 12.1983 5.313 12.4423 5.55708C12.6864 5.80116 12.6864 6.19777 12.4423 6.44185L8.44234 10.4418C8.19826 10.6859 7.80165 10.6859 7.55757 10.4418L3.55757 6.44185C3.31349 6.19777 3.31349 5.80116 3.55757 5.55708C3.80165 5.313 4.19826 5.313 4.44234 5.55708L7.99995 9.1147L11.5576 5.55708Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function ChevronDownIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
+      <path
+        d="M11.5576 5.55708C11.8016 5.313 12.1983 5.313 12.4423 5.55708C12.6864 5.80116 12.6864 6.19777 12.4423 6.44185L8.44234 10.4418C8.19826 10.6859 7.80165 10.6859 7.55757 10.4418L3.55757 6.44185C3.31349 6.19777 3.31349 5.80116 3.55757 5.55708C3.80165 5.313 4.19826 5.313 4.44234 5.55708L7.99995 9.1147L11.5576 5.55708Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/arrows/chevron-left.tsx b/packages/propel/src/icons/arrows/chevron-left.tsx
index e899a48558..4b8001267a 100644
--- a/packages/propel/src/icons/arrows/chevron-left.tsx
+++ b/packages/propel/src/icons/arrows/chevron-left.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const ChevronLeftIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
-    <path
-      d="M9.55757 3.55708C9.80165 3.313 10.1983 3.313 10.4423 3.55708C10.6864 3.80116 10.6864 4.19777 10.4423 4.44185L6.88472 7.99946L10.4423 11.5571C10.6864 11.8012 10.6864 12.1978 10.4423 12.4418C10.1983 12.6859 9.80165 12.6859 9.55757 12.4418L5.55757 8.44185C5.31349 8.19777 5.31349 7.80116 5.55757 7.55708L9.55757 3.55708Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function ChevronLeftIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
+      <path
+        d="M9.55757 3.55708C9.80165 3.313 10.1983 3.313 10.4423 3.55708C10.6864 3.80116 10.6864 4.19777 10.4423 4.44185L6.88472 7.99946L10.4423 11.5571C10.6864 11.8012 10.6864 12.1978 10.4423 12.4418C10.1983 12.6859 9.80165 12.6859 9.55757 12.4418L5.55757 8.44185C5.31349 8.19777 5.31349 7.80116 5.55757 7.55708L9.55757 3.55708Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/arrows/chevron-right.tsx b/packages/propel/src/icons/arrows/chevron-right.tsx
index e7378b5a95..029b62212c 100644
--- a/packages/propel/src/icons/arrows/chevron-right.tsx
+++ b/packages/propel/src/icons/arrows/chevron-right.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const ChevronRightIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
-    <path
-      d="M5.55757 3.55708C5.80165 3.313 6.19826 3.313 6.44234 3.55708L10.4423 7.55708C10.6864 7.80116 10.6864 8.19777 10.4423 8.44185L6.44234 12.4418C6.19826 12.6859 5.80165 12.6859 5.55757 12.4418C5.31349 12.1978 5.31349 11.8012 5.55757 11.5571L9.11519 7.99946L5.55757 4.44185C5.31349 4.19777 5.31349 3.80116 5.55757 3.55708Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function ChevronRightIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
+      <path
+        d="M5.55757 3.55708C5.80165 3.313 6.19826 3.313 6.44234 3.55708L10.4423 7.55708C10.6864 7.80116 10.6864 8.19777 10.4423 8.44185L6.44234 12.4418C6.19826 12.6859 5.80165 12.6859 5.55757 12.4418C5.31349 12.1978 5.31349 11.8012 5.55757 11.5571L9.11519 7.99946L5.55757 4.44185C5.31349 4.19777 5.31349 3.80116 5.55757 3.55708Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/arrows/chevron-up.tsx b/packages/propel/src/icons/arrows/chevron-up.tsx
index 6c01b89688..3d28ac516c 100644
--- a/packages/propel/src/icons/arrows/chevron-up.tsx
+++ b/packages/propel/src/icons/arrows/chevron-up.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const ChevronUpIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
-    <path
-      d="M7.6562 5.47785C7.89877 5.3179 8.22886 5.34445 8.44234 5.55793L12.4423 9.55793C12.6864 9.80201 12.6864 10.1986 12.4423 10.4427C12.1983 10.6868 11.8016 10.6868 11.5576 10.4427L7.99995 6.88508L4.44234 10.4427C4.19826 10.6868 3.80165 10.6868 3.55757 10.4427C3.31349 10.1986 3.31349 9.80201 3.55757 9.55793L7.55757 5.55793L7.6562 5.47785Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function ChevronUpIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} clipPathId="clip0_2890_23" {...rest}>
+      <path
+        d="M7.6562 5.47785C7.89877 5.3179 8.22886 5.34445 8.44234 5.55793L12.4423 9.55793C12.6864 9.80201 12.6864 10.1986 12.4423 10.4427C12.1983 10.6868 11.8016 10.6868 11.5576 10.4427L7.99995 6.88508L4.44234 10.4427C4.19826 10.6868 3.80165 10.6868 3.55757 10.4427C3.31349 10.1986 3.31349 9.80201 3.55757 9.55793L7.55757 5.55793L7.6562 5.47785Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/arrows/index.ts b/packages/propel/src/icons/arrows/index.ts
index eca5a8dee6..65513c4e20 100644
--- a/packages/propel/src/icons/arrows/index.ts
+++ b/packages/propel/src/icons/arrows/index.ts
@@ -2,3 +2,4 @@ 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 0000000000..26daed5dd5
--- /dev/null
+++ b/packages/propel/src/icons/arrows/reply-icon.tsx
@@ -0,0 +1,13 @@
+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 39c5b8c6ad..994ed711e9 100644
--- a/packages/propel/src/icons/at-risk-icon.tsx
+++ b/packages/propel/src/icons/at-risk-icon.tsx
@@ -2,20 +2,22 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const AtRiskIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16" }) => (
-  <svg width={width} height={height} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clipPath="url(#clip0_365_7561)">
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M2.03658 7.33335H2.66663C3.03482 7.33335 3.33329 7.63183 3.33329 8.00002C3.33329 8.36821 3.03482 8.66669 2.66663 8.66669H2.03658C2.36821 11.6667 4.91159 14 7.99996 14C11.0883 14 13.6317 11.6667 13.9633 8.66669H13.3333C12.9651 8.66669 12.6666 8.36821 12.6666 8.00002C12.6666 7.63183 12.9651 7.33335 13.3333 7.33335H13.9633C13.6317 4.33339 11.0883 2.00002 7.99996 2.00002C4.91159 2.00002 2.36821 4.33339 2.03658 7.33335ZM0.666626 8.00002C0.666626 3.94993 3.94987 0.666687 7.99996 0.666687C12.05 0.666687 15.3333 3.94993 15.3333 8.00002C15.3333 12.0501 12.05 15.3334 7.99996 15.3334C3.94987 15.3334 0.666626 12.0501 0.666626 8.00002ZM7.99996 4.66669C8.36815 4.66669 8.66663 4.96516 8.66663 5.33335V8.00002C8.66663 8.36821 8.36815 8.66669 7.99996 8.66669C7.63177 8.66669 7.33329 8.36821 7.33329 8.00002V5.33335C7.33329 4.96516 7.63177 4.66669 7.99996 4.66669ZM7.33329 10.6667C7.33329 10.2985 7.63177 10 7.99996 10H8.00663C8.37482 10 8.67329 10.2985 8.67329 10.6667C8.67329 11.0349 8.37482 11.3334 8.00663 11.3334H7.99996C7.63177 11.3334 7.33329 11.0349 7.33329 10.6667Z"
-        fill="#CC7700"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_365_7561">
-        <rect width="16" height="16" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
+export function AtRiskIcon({ width = "16", height = "16" }: ISvgIcons) {
+  return (
+    <svg width={width} height={height} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_365_7561)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2.03658 7.33335H2.66663C3.03482 7.33335 3.33329 7.63183 3.33329 8.00002C3.33329 8.36821 3.03482 8.66669 2.66663 8.66669H2.03658C2.36821 11.6667 4.91159 14 7.99996 14C11.0883 14 13.6317 11.6667 13.9633 8.66669H13.3333C12.9651 8.66669 12.6666 8.36821 12.6666 8.00002C12.6666 7.63183 12.9651 7.33335 13.3333 7.33335H13.9633C13.6317 4.33339 11.0883 2.00002 7.99996 2.00002C4.91159 2.00002 2.36821 4.33339 2.03658 7.33335ZM0.666626 8.00002C0.666626 3.94993 3.94987 0.666687 7.99996 0.666687C12.05 0.666687 15.3333 3.94993 15.3333 8.00002C15.3333 12.0501 12.05 15.3334 7.99996 15.3334C3.94987 15.3334 0.666626 12.0501 0.666626 8.00002ZM7.99996 4.66669C8.36815 4.66669 8.66663 4.96516 8.66663 5.33335V8.00002C8.66663 8.36821 8.36815 8.66669 7.99996 8.66669C7.63177 8.66669 7.33329 8.36821 7.33329 8.00002V5.33335C7.33329 4.96516 7.63177 4.66669 7.99996 4.66669ZM7.33329 10.6667C7.33329 10.2985 7.63177 10 7.99996 10H8.00663C8.37482 10 8.67329 10.2985 8.67329 10.6667C8.67329 11.0349 8.37482 11.3334 8.00663 11.3334H7.99996C7.63177 11.3334 7.33329 11.0349 7.33329 10.6667Z"
+          fill="#CC7700"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_365_7561">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/attachments/audio-file-icon.tsx b/packages/propel/src/icons/attachments/audio-file-icon.tsx
index 62b4e6c59a..4ede9d5379 100644
--- a/packages/propel/src/icons/attachments/audio-file-icon.tsx
+++ b/packages/propel/src/icons/attachments/audio-file-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const AudioFileIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M7.33325 13.9999V1.99992C7.33325 1.63173 7.63173 1.33325 7.99992 1.33325C8.36811 1.33325 8.66659 1.63173 8.66659 1.99992V13.9999C8.66659 14.3681 8.36811 14.6666 7.99992 14.6666C7.63173 14.6666 7.33325 14.3681 7.33325 13.9999ZM4.33325 11.9999V3.99992C4.33325 3.63173 4.63173 3.33325 4.99992 3.33325C5.36811 3.33325 5.66659 3.63173 5.66659 3.99992V11.9999C5.66659 12.3681 5.36811 12.6666 4.99992 12.6666C4.63173 12.6666 4.33325 12.3681 4.33325 11.9999ZM10.3333 11.9999V3.99992C10.3333 3.63173 10.6317 3.33325 10.9999 3.33325C11.3681 3.33325 11.6666 3.63173 11.6666 3.99992V11.9999C11.6666 12.3681 11.3681 12.6666 10.9999 12.6666C10.6317 12.6666 10.3333 12.3681 10.3333 11.9999ZM1.33325 9.33325V6.66659C1.33325 6.2984 1.63173 5.99992 1.99992 5.99992C2.36811 5.99992 2.66659 6.2984 2.66659 6.66659V9.33325C2.66659 9.70144 2.36811 9.99992 1.99992 9.99992C1.63173 9.99992 1.33325 9.70144 1.33325 9.33325ZM13.3333 9.33325V6.66659C13.3333 6.2984 13.6317 5.99992 13.9999 5.99992C14.3681 5.99992 14.6666 6.2984 14.6666 6.66659V9.33325C14.6666 9.70144 14.3681 9.99992 13.9999 9.99992C13.6317 9.99992 13.3333 9.70144 13.3333 9.33325Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function AudioFileIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M7.33325 13.9999V1.99992C7.33325 1.63173 7.63173 1.33325 7.99992 1.33325C8.36811 1.33325 8.66659 1.63173 8.66659 1.99992V13.9999C8.66659 14.3681 8.36811 14.6666 7.99992 14.6666C7.63173 14.6666 7.33325 14.3681 7.33325 13.9999ZM4.33325 11.9999V3.99992C4.33325 3.63173 4.63173 3.33325 4.99992 3.33325C5.36811 3.33325 5.66659 3.63173 5.66659 3.99992V11.9999C5.66659 12.3681 5.36811 12.6666 4.99992 12.6666C4.63173 12.6666 4.33325 12.3681 4.33325 11.9999ZM10.3333 11.9999V3.99992C10.3333 3.63173 10.6317 3.33325 10.9999 3.33325C11.3681 3.33325 11.6666 3.63173 11.6666 3.99992V11.9999C11.6666 12.3681 11.3681 12.6666 10.9999 12.6666C10.6317 12.6666 10.3333 12.3681 10.3333 11.9999ZM1.33325 9.33325V6.66659C1.33325 6.2984 1.63173 5.99992 1.99992 5.99992C2.36811 5.99992 2.66659 6.2984 2.66659 6.66659V9.33325C2.66659 9.70144 2.36811 9.99992 1.99992 9.99992C1.63173 9.99992 1.33325 9.70144 1.33325 9.33325ZM13.3333 9.33325V6.66659C13.3333 6.2984 13.6317 5.99992 13.9999 5.99992C14.3681 5.99992 14.6666 6.2984 14.6666 6.66659V9.33325C14.6666 9.70144 14.3681 9.99992 13.9999 9.99992C13.6317 9.99992 13.3333 9.70144 13.3333 9.33325Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/attachments/code-file-icon.tsx b/packages/propel/src/icons/attachments/code-file-icon.tsx
index 8681328bf3..4c8e6ac81d 100644
--- a/packages/propel/src/icons/attachments/code-file-icon.tsx
+++ b/packages/propel/src/icons/attachments/code-file-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const CodeFileIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M9.4687 1.39001C9.8056 1.46493 10.0182 1.79918 9.94331 2.1361L7.27632 14.1361C7.20136 14.473 6.86713 14.6856 6.53023 14.6107C6.19351 14.5357 5.98174 14.2014 6.05659 13.8646L8.72261 1.86462C8.79753 1.52772 9.13178 1.31514 9.4687 1.39001ZM4.22456 4.22497C4.46865 3.98105 4.86433 3.98095 5.10835 4.22497C5.35237 4.46899 5.35227 4.86467 5.10835 5.10876L2.21675 8.00036L5.10835 10.892C5.35227 11.1361 5.35237 11.5317 5.10835 11.7758C4.86433 12.0198 4.46865 12.0197 4.22456 11.7758L0.890578 8.44274C0.6465 8.19866 0.6465 7.80205 0.890578 7.55798L4.22456 4.22497ZM10.8906 4.22497C11.1347 3.98089 11.5313 3.98089 11.7753 4.22497L15.1084 7.55798C15.3524 7.80205 15.3524 8.19866 15.1084 8.44274L11.7753 11.7758C11.5313 12.0198 11.1347 12.0198 10.8906 11.7758C10.6468 11.5318 10.6469 11.136 10.8906 10.892L13.7822 8.00036L10.8906 5.10876C10.6469 4.86471 10.6468 4.46895 10.8906 4.22497Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function CodeFileIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M9.4687 1.39001C9.8056 1.46493 10.0182 1.79918 9.94331 2.1361L7.27632 14.1361C7.20136 14.473 6.86713 14.6856 6.53023 14.6107C6.19351 14.5357 5.98174 14.2014 6.05659 13.8646L8.72261 1.86462C8.79753 1.52772 9.13178 1.31514 9.4687 1.39001ZM4.22456 4.22497C4.46865 3.98105 4.86433 3.98095 5.10835 4.22497C5.35237 4.46899 5.35227 4.86467 5.10835 5.10876L2.21675 8.00036L5.10835 10.892C5.35227 11.1361 5.35237 11.5317 5.10835 11.7758C4.86433 12.0198 4.46865 12.0197 4.22456 11.7758L0.890578 8.44274C0.6465 8.19866 0.6465 7.80205 0.890578 7.55798L4.22456 4.22497ZM10.8906 4.22497C11.1347 3.98089 11.5313 3.98089 11.7753 4.22497L15.1084 7.55798C15.3524 7.80205 15.3524 8.19866 15.1084 8.44274L11.7753 11.7758C11.5313 12.0198 11.1347 12.0198 10.8906 11.7758C10.6468 11.5318 10.6469 11.136 10.8906 10.892L13.7822 8.00036L10.8906 5.10876C10.6469 4.86471 10.6468 4.46895 10.8906 4.22497Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/attachments/document-file-icon.tsx b/packages/propel/src/icons/attachments/document-file-icon.tsx
index ec9ae21947..d6602bce87 100644
--- a/packages/propel/src/icons/attachments/document-file-icon.tsx
+++ b/packages/propel/src/icons/attachments/document-file-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const DocumentFileIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M2.04175 11.4666V4.533C2.04175 3.98348 2.04127 3.53353 2.07105 3.16874C2.10144 2.79669 2.1666 2.45803 2.32788 2.1414C2.57955 1.64747 2.98141 1.24561 3.47534 0.99394C3.79198 0.832661 4.13063 0.767502 4.50269 0.737104C4.86747 0.707329 5.31742 0.707807 5.86694 0.707807H8.00757C8.46696 0.707807 8.79907 0.703532 9.11792 0.780072C9.26977 0.816533 9.41679 0.868859 9.55933 0.93144C9.57519 0.93761 9.59002 0.945526 9.60523 0.952924C9.63564 0.966985 9.66715 0.978716 9.69702 0.99394L9.87671 1.09453L10.0798 1.23613C10.278 1.39031 10.4692 1.58448 10.7126 1.82792L12.8376 3.9539C13.1626 4.2788 13.4007 4.51024 13.572 4.78984C13.6272 4.87997 13.6747 4.97428 13.7185 5.07011C13.7232 5.08016 13.728 5.09005 13.7322 5.10038C13.7961 5.24493 13.8485 5.39451 13.8855 5.54863C13.962 5.86738 13.9587 6.19877 13.9587 6.658V11.4666C13.9587 12.0161 13.9592 12.4661 13.9294 12.8309C13.899 13.2029 13.8339 13.5415 13.6726 13.8582C13.4524 14.2904 13.1171 14.6519 12.7058 14.9041L12.5251 15.0047C12.2084 15.166 11.87 15.2311 11.4978 15.2615C11.133 15.2913 10.6832 15.2908 10.1335 15.2908H5.86694C5.31741 15.2908 4.86747 15.2913 4.50269 15.2615C4.13058 15.2311 3.79201 15.166 3.47534 15.0047C2.9815 14.7531 2.57957 14.352 2.32788 13.8582C2.16656 13.5415 2.10146 13.2029 2.07105 12.8309C2.04124 12.4661 2.04175 12.0161 2.04175 11.4666ZM3.29175 11.4666C3.29175 12.0367 3.29246 12.4272 3.31714 12.7293C3.34124 13.0238 3.38456 13.1797 3.44116 13.2908C3.57298 13.5495 3.78405 13.7596 4.04273 13.8914C4.15382 13.948 4.30958 13.9923 4.60425 14.0164C4.90636 14.0411 5.29672 14.0408 5.86694 14.0408H10.1335C10.7039 14.0408 11.0941 14.0411 11.3962 14.0164C11.691 13.9923 11.8466 13.948 11.9578 13.8914C12.2164 13.7597 12.4265 13.5494 12.5584 13.2908C12.615 13.1797 12.6593 13.0238 12.6834 12.7293C12.708 12.4272 12.7087 12.0367 12.7087 11.4666V6.658C12.7087 6.27204 12.7063 6.08602 12.6912 5.95781H10.4001C10.2238 5.95781 10.0534 5.95871 9.91089 5.94706C9.76121 5.93481 9.5877 5.90574 9.41382 5.81718C9.17068 5.69331 8.97316 5.49555 8.84937 5.25273C8.76065 5.07863 8.73172 4.9045 8.71948 4.75468C8.70786 4.61227 8.70874 4.44258 8.70874 4.2664V1.97441C8.58046 1.95924 8.39393 1.95781 8.00757 1.95781H5.86694C5.29669 1.95781 4.90637 1.95853 4.60425 1.9832C4.3097 2.00726 4.15382 2.05069 4.04273 2.10722C3.784 2.23905 3.57299 2.45006 3.44116 2.70878C3.38463 2.81988 3.3412 2.97576 3.31714 3.27031C3.29247 3.57243 3.29175 3.96275 3.29175 4.533V11.4666ZM9.96558 4.65312C9.96701 4.67068 9.96918 4.68335 9.97046 4.69218L9.97339 4.69609C9.98224 4.69738 9.99547 4.6995 10.0134 4.70097C10.0932 4.70746 10.2034 4.70781 10.4001 4.70781H11.824L9.95874 2.8416V4.2664C9.95874 4.46323 9.95906 4.57334 9.96558 4.65312Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function DocumentFileIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M2.04175 11.4666V4.533C2.04175 3.98348 2.04127 3.53353 2.07105 3.16874C2.10144 2.79669 2.1666 2.45803 2.32788 2.1414C2.57955 1.64747 2.98141 1.24561 3.47534 0.99394C3.79198 0.832661 4.13063 0.767502 4.50269 0.737104C4.86747 0.707329 5.31742 0.707807 5.86694 0.707807H8.00757C8.46696 0.707807 8.79907 0.703532 9.11792 0.780072C9.26977 0.816533 9.41679 0.868859 9.55933 0.93144C9.57519 0.93761 9.59002 0.945526 9.60523 0.952924C9.63564 0.966985 9.66715 0.978716 9.69702 0.99394L9.87671 1.09453L10.0798 1.23613C10.278 1.39031 10.4692 1.58448 10.7126 1.82792L12.8376 3.9539C13.1626 4.2788 13.4007 4.51024 13.572 4.78984C13.6272 4.87997 13.6747 4.97428 13.7185 5.07011C13.7232 5.08016 13.728 5.09005 13.7322 5.10038C13.7961 5.24493 13.8485 5.39451 13.8855 5.54863C13.962 5.86738 13.9587 6.19877 13.9587 6.658V11.4666C13.9587 12.0161 13.9592 12.4661 13.9294 12.8309C13.899 13.2029 13.8339 13.5415 13.6726 13.8582C13.4524 14.2904 13.1171 14.6519 12.7058 14.9041L12.5251 15.0047C12.2084 15.166 11.87 15.2311 11.4978 15.2615C11.133 15.2913 10.6832 15.2908 10.1335 15.2908H5.86694C5.31741 15.2908 4.86747 15.2913 4.50269 15.2615C4.13058 15.2311 3.79201 15.166 3.47534 15.0047C2.9815 14.7531 2.57957 14.352 2.32788 13.8582C2.16656 13.5415 2.10146 13.2029 2.07105 12.8309C2.04124 12.4661 2.04175 12.0161 2.04175 11.4666ZM3.29175 11.4666C3.29175 12.0367 3.29246 12.4272 3.31714 12.7293C3.34124 13.0238 3.38456 13.1797 3.44116 13.2908C3.57298 13.5495 3.78405 13.7596 4.04273 13.8914C4.15382 13.948 4.30958 13.9923 4.60425 14.0164C4.90636 14.0411 5.29672 14.0408 5.86694 14.0408H10.1335C10.7039 14.0408 11.0941 14.0411 11.3962 14.0164C11.691 13.9923 11.8466 13.948 11.9578 13.8914C12.2164 13.7597 12.4265 13.5494 12.5584 13.2908C12.615 13.1797 12.6593 13.0238 12.6834 12.7293C12.708 12.4272 12.7087 12.0367 12.7087 11.4666V6.658C12.7087 6.27204 12.7063 6.08602 12.6912 5.95781H10.4001C10.2238 5.95781 10.0534 5.95871 9.91089 5.94706C9.76121 5.93481 9.5877 5.90574 9.41382 5.81718C9.17068 5.69331 8.97316 5.49555 8.84937 5.25273C8.76065 5.07863 8.73172 4.9045 8.71948 4.75468C8.70786 4.61227 8.70874 4.44258 8.70874 4.2664V1.97441C8.58046 1.95924 8.39393 1.95781 8.00757 1.95781H5.86694C5.29669 1.95781 4.90637 1.95853 4.60425 1.9832C4.3097 2.00726 4.15382 2.05069 4.04273 2.10722C3.784 2.23905 3.57299 2.45006 3.44116 2.70878C3.38463 2.81988 3.3412 2.97576 3.31714 3.27031C3.29247 3.57243 3.29175 3.96275 3.29175 4.533V11.4666ZM9.96558 4.65312C9.96701 4.67068 9.96918 4.68335 9.97046 4.69218L9.97339 4.69609C9.98224 4.69738 9.99547 4.6995 10.0134 4.70097C10.0932 4.70746 10.2034 4.70781 10.4001 4.70781H11.824L9.95874 2.8416V4.2664C9.95874 4.46323 9.95906 4.57334 9.96558 4.65312Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/attachments/image-file-icon.tsx b/packages/propel/src/icons/attachments/image-file-icon.tsx
index cab163eb83..3dd36580a5 100644
--- a/packages/propel/src/icons/attachments/image-file-icon.tsx
+++ b/packages/propel/src/icons/attachments/image-file-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const ImageFileIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M13.375 10.2598L10.9785 7.86328C10.8392 7.72401 10.7612 7.64557 10.7002 7.59375C10.6869 7.58245 10.676 7.57561 10.6689 7.57031C10.6672 7.57021 10.6658 7.5702 10.6641 7.57031C10.657 7.57563 10.6461 7.58247 10.6328 7.59375C10.5718 7.64558 10.4938 7.72399 10.3545 7.86328L4.84277 13.373C4.9535 13.3734 5.07242 13.375 5.2002 13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V10.2598ZM6.375 5.66699C6.375 5.2759 6.05805 4.95818 5.66699 4.95801C5.27579 4.95801 4.95801 5.27579 4.95801 5.66699C4.95818 6.05805 5.2759 6.375 5.66699 6.375C6.05794 6.37482 6.37482 6.05794 6.375 5.66699ZM13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64295 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67445 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67445 12.357 2.71788 12.5129 2.77441 12.624C2.89654 12.8637 3.08734 13.0607 3.32031 13.1934C3.36428 13.122 3.40913 13.0651 3.44238 13.0254C3.53706 12.9123 3.66771 12.7815 3.80176 12.6475L9.4707 6.97852C9.59527 6.85395 9.7153 6.73407 9.82422 6.6416C9.93879 6.54434 10.0817 6.44122 10.2676 6.38086L10.3652 6.35352C10.5962 6.29805 10.8392 6.30699 11.0664 6.38086C11.2524 6.44121 11.3952 6.54433 11.5098 6.6416C11.6187 6.7341 11.7387 6.85398 11.8633 6.97852L13.375 8.49023V5.2002ZM7.625 5.66699C7.62482 6.74829 6.74829 7.62482 5.66699 7.625C4.58554 7.625 3.70818 6.7484 3.70801 5.66699C3.70801 4.58543 4.58543 3.70801 5.66699 3.70801C6.7484 3.70818 7.625 4.58554 7.625 5.66699ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6854 13.6854 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H4.62109C4.43152 14.625 4.24652 14.6253 4.09961 14.6123C4.09609 14.612 4.09257 14.6107 4.08887 14.6104C4.00037 14.6064 3.91608 14.6022 3.83594 14.5957C3.46388 14.5653 3.12523 14.5002 2.80859 14.3389C2.31467 14.0872 1.91281 13.6854 1.66113 13.1914C1.49987 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31466 2.31466 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49987 13.1914 1.66113C13.6854 1.91281 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.2002V10.7998Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function ImageFileIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 10.2598L10.9785 7.86328C10.8392 7.72401 10.7612 7.64557 10.7002 7.59375C10.6869 7.58245 10.676 7.57561 10.6689 7.57031C10.6672 7.57021 10.6658 7.5702 10.6641 7.57031C10.657 7.57563 10.6461 7.58247 10.6328 7.59375C10.5718 7.64558 10.4938 7.72399 10.3545 7.86328L4.84277 13.373C4.9535 13.3734 5.07242 13.375 5.2002 13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V10.2598ZM6.375 5.66699C6.375 5.2759 6.05805 4.95818 5.66699 4.95801C5.27579 4.95801 4.95801 5.27579 4.95801 5.66699C4.95818 6.05805 5.2759 6.375 5.66699 6.375C6.05794 6.37482 6.37482 6.05794 6.375 5.66699ZM13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64295 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67445 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67445 12.357 2.71788 12.5129 2.77441 12.624C2.89654 12.8637 3.08734 13.0607 3.32031 13.1934C3.36428 13.122 3.40913 13.0651 3.44238 13.0254C3.53706 12.9123 3.66771 12.7815 3.80176 12.6475L9.4707 6.97852C9.59527 6.85395 9.7153 6.73407 9.82422 6.6416C9.93879 6.54434 10.0817 6.44122 10.2676 6.38086L10.3652 6.35352C10.5962 6.29805 10.8392 6.30699 11.0664 6.38086C11.2524 6.44121 11.3952 6.54433 11.5098 6.6416C11.6187 6.7341 11.7387 6.85398 11.8633 6.97852L13.375 8.49023V5.2002ZM7.625 5.66699C7.62482 6.74829 6.74829 7.62482 5.66699 7.625C4.58554 7.625 3.70818 6.7484 3.70801 5.66699C3.70801 4.58543 4.58543 3.70801 5.66699 3.70801C6.7484 3.70818 7.625 4.58554 7.625 5.66699ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6854 13.6854 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H4.62109C4.43152 14.625 4.24652 14.6253 4.09961 14.6123C4.09609 14.612 4.09257 14.6107 4.08887 14.6104C4.00037 14.6064 3.91608 14.6022 3.83594 14.5957C3.46388 14.5653 3.12523 14.5002 2.80859 14.3389C2.31467 14.0872 1.91281 13.6854 1.66113 13.1914C1.49987 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31466 2.31466 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49987 13.1914 1.66113C13.6854 1.91281 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.2002V10.7998Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/attachments/video-file-icon.tsx b/packages/propel/src/icons/attachments/video-file-icon.tsx
index ab5b0e75f1..4d6203e06a 100644
--- a/packages/propel/src/icons/attachments/video-file-icon.tsx
+++ b/packages/propel/src/icons/attachments/video-file-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const VideoFileIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M8.13281 2.70801C8.68235 2.70801 9.13229 2.70753 9.49707 2.73731C9.86914 2.7677 10.2078 2.83287 10.5244 2.99414C11.0184 3.24582 11.4202 3.64768 11.6719 4.1416C11.8332 4.45823 11.8983 4.79689 11.9287 5.16895C11.9577 5.52422 11.957 5.96009 11.957 6.49023L13.3135 5.13477C13.4475 5.00076 13.5783 4.87006 13.6914 4.77539C13.7887 4.69397 13.9861 4.53702 14.2578 4.51563L14.3721 4.51367C14.6367 4.52445 14.8872 4.64455 15.0615 4.84863C15.2385 5.05589 15.2681 5.30626 15.2793 5.43262C15.2923 5.57953 15.291 5.76453 15.291 5.9541V10.0449C15.291 10.2344 15.2923 10.4195 15.2793 10.5664C15.2681 10.6927 15.2386 10.9431 15.0615 11.1504C14.8872 11.3546 14.6367 11.4745 14.3721 11.4854L14.2578 11.4834C13.9864 11.462 13.7888 11.3061 13.6914 11.2246C13.5783 11.1299 13.4475 10.9983 13.3135 10.8643L11.957 9.50781C11.957 10.0388 11.9578 10.4754 11.9287 10.8311C11.8983 11.2031 11.8332 11.5417 11.6719 11.8584C11.4202 12.3522 11.0183 12.7533 10.5244 13.0049C10.2077 13.1662 9.86919 13.2313 9.49707 13.2617C9.13229 13.2915 8.68236 13.291 8.13281 13.291H4.5332C3.98367 13.291 3.53373 13.2915 3.16895 13.2617C2.79684 13.2313 2.45827 13.1662 2.1416 13.0049C1.64776 12.7533 1.24583 12.3522 0.994141 11.8584C0.832817 11.5417 0.76772 11.2031 0.737305 10.8311C0.707503 10.4663 0.708008 10.0163 0.708008 9.4668V6.5332C0.708008 5.98368 0.707531 5.53373 0.737305 5.16895C0.767704 4.79689 0.832862 4.45824 0.994141 4.1416C1.24581 3.64767 1.64767 3.24581 2.1416 2.99414C2.45824 2.83286 2.79689 2.7677 3.16895 2.73731C3.53373 2.70753 3.98368 2.70801 4.5332 2.70801H8.13281ZM12.2168 7.99902L14.041 9.82324V6.17578L12.2168 7.99902ZM1.95801 9.4668C1.95801 10.0369 1.95872 10.4274 1.9834 10.7295C2.0075 11.024 2.05082 11.1799 2.10742 11.291C2.23924 11.5497 2.45031 11.7598 2.70898 11.8916C2.82008 11.9482 2.97584 11.9925 3.27051 12.0166C3.57262 12.0413 3.96298 12.041 4.5332 12.041H8.13281C8.70305 12.041 9.0934 12.0413 9.39551 12.0166C9.69012 11.9925 9.84589 11.9482 9.95703 11.8916C10.2157 11.7598 10.4268 11.5497 10.5586 11.291C10.6152 11.1799 10.6585 11.024 10.6826 10.7295C10.7073 10.4274 10.708 10.0369 10.708 9.4668V6.5332C10.708 5.96295 10.7073 5.57263 10.6826 5.27051C10.6586 4.97596 10.6151 4.82008 10.5586 4.70898C10.4268 4.45026 10.2157 4.23924 9.95703 4.10742C9.8459 4.05089 9.69 4.00746 9.39551 3.9834C9.09339 3.95873 8.70308 3.95801 8.13281 3.95801H4.5332C3.96295 3.95801 3.57263 3.95873 3.27051 3.9834C2.97596 4.00746 2.82008 4.05089 2.70898 4.10742C2.45026 4.23925 2.23925 4.45026 2.10742 4.70898C2.05089 4.82008 2.00746 4.97596 1.9834 5.27051C1.95873 5.57263 1.95801 5.96295 1.95801 6.5332V9.4668Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function VideoFileIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M8.13281 2.70801C8.68235 2.70801 9.13229 2.70753 9.49707 2.73731C9.86914 2.7677 10.2078 2.83287 10.5244 2.99414C11.0184 3.24582 11.4202 3.64768 11.6719 4.1416C11.8332 4.45823 11.8983 4.79689 11.9287 5.16895C11.9577 5.52422 11.957 5.96009 11.957 6.49023L13.3135 5.13477C13.4475 5.00076 13.5783 4.87006 13.6914 4.77539C13.7887 4.69397 13.9861 4.53702 14.2578 4.51563L14.3721 4.51367C14.6367 4.52445 14.8872 4.64455 15.0615 4.84863C15.2385 5.05589 15.2681 5.30626 15.2793 5.43262C15.2923 5.57953 15.291 5.76453 15.291 5.9541V10.0449C15.291 10.2344 15.2923 10.4195 15.2793 10.5664C15.2681 10.6927 15.2386 10.9431 15.0615 11.1504C14.8872 11.3546 14.6367 11.4745 14.3721 11.4854L14.2578 11.4834C13.9864 11.462 13.7888 11.3061 13.6914 11.2246C13.5783 11.1299 13.4475 10.9983 13.3135 10.8643L11.957 9.50781C11.957 10.0388 11.9578 10.4754 11.9287 10.8311C11.8983 11.2031 11.8332 11.5417 11.6719 11.8584C11.4202 12.3522 11.0183 12.7533 10.5244 13.0049C10.2077 13.1662 9.86919 13.2313 9.49707 13.2617C9.13229 13.2915 8.68236 13.291 8.13281 13.291H4.5332C3.98367 13.291 3.53373 13.2915 3.16895 13.2617C2.79684 13.2313 2.45827 13.1662 2.1416 13.0049C1.64776 12.7533 1.24583 12.3522 0.994141 11.8584C0.832817 11.5417 0.76772 11.2031 0.737305 10.8311C0.707503 10.4663 0.708008 10.0163 0.708008 9.4668V6.5332C0.708008 5.98368 0.707531 5.53373 0.737305 5.16895C0.767704 4.79689 0.832862 4.45824 0.994141 4.1416C1.24581 3.64767 1.64767 3.24581 2.1416 2.99414C2.45824 2.83286 2.79689 2.7677 3.16895 2.73731C3.53373 2.70753 3.98368 2.70801 4.5332 2.70801H8.13281ZM12.2168 7.99902L14.041 9.82324V6.17578L12.2168 7.99902ZM1.95801 9.4668C1.95801 10.0369 1.95872 10.4274 1.9834 10.7295C2.0075 11.024 2.05082 11.1799 2.10742 11.291C2.23924 11.5497 2.45031 11.7598 2.70898 11.8916C2.82008 11.9482 2.97584 11.9925 3.27051 12.0166C3.57262 12.0413 3.96298 12.041 4.5332 12.041H8.13281C8.70305 12.041 9.0934 12.0413 9.39551 12.0166C9.69012 11.9925 9.84589 11.9482 9.95703 11.8916C10.2157 11.7598 10.4268 11.5497 10.5586 11.291C10.6152 11.1799 10.6585 11.024 10.6826 10.7295C10.7073 10.4274 10.708 10.0369 10.708 9.4668V6.5332C10.708 5.96295 10.7073 5.57263 10.6826 5.27051C10.6586 4.97596 10.6151 4.82008 10.5586 4.70898C10.4268 4.45026 10.2157 4.23924 9.95703 4.10742C9.8459 4.05089 9.69 4.00746 9.39551 3.9834C9.09339 3.95873 8.70308 3.95801 8.13281 3.95801H4.5332C3.96295 3.95801 3.57263 3.95873 3.27051 3.9834C2.97596 4.00746 2.82008 4.05089 2.70898 4.10742C2.45026 4.23925 2.23925 4.45026 2.10742 4.70898C2.05089 4.82008 2.00746 4.97596 1.9834 5.27051C1.95873 5.57263 1.95801 5.96295 1.95801 6.5332V9.4668Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/bar-icon.tsx b/packages/propel/src/icons/bar-icon.tsx
index 13b01105a0..9225f3a4a7 100644
--- a/packages/propel/src/icons/bar-icon.tsx
+++ b/packages/propel/src/icons/bar-icon.tsx
@@ -2,19 +2,21 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const BarIcon: React.FC<ISvgIcons> = ({ className = "", ...rest }) => (
-  <svg className={className} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...rest}>
-    <path
-      d="M0 12.5859C0 11.4814 0.89543 10.5859 2 10.5859H3.64706C4.75163 10.5859 5.64706 11.4814 5.64706 12.5859V23.9977H0V12.5859Z"
-      fill="currentColor"
-    />
-    <path
-      d="M9.17773 2C9.17773 0.89543 10.0732 0 11.1777 0H12.8248C13.9294 0 14.8248 0.895431 14.8248 2V24H9.17773V2Z"
-      fill="currentColor"
-    />
-    <path
-      d="M18.3535 8.35156C18.3535 7.247 19.2489 6.35156 20.3535 6.35156H22.0006C23.1051 6.35156 24.0006 7.24699 24.0006 8.35156V23.9986H18.3535V8.35156Z"
-      fill="currentColor"
-    />
-  </svg>
-);
+export function BarIcon({ className = "", ...rest }: ISvgIcons) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...rest}>
+      <path
+        d="M0 12.5859C0 11.4814 0.89543 10.5859 2 10.5859H3.64706C4.75163 10.5859 5.64706 11.4814 5.64706 12.5859V23.9977H0V12.5859Z"
+        fill="currentColor"
+      />
+      <path
+        d="M9.17773 2C9.17773 0.89543 10.0732 0 11.1777 0H12.8248C13.9294 0 14.8248 0.895431 14.8248 2V24H9.17773V2Z"
+        fill="currentColor"
+      />
+      <path
+        d="M18.3535 8.35156C18.3535 7.247 19.2489 6.35156 20.3535 6.35156H22.0006C23.1051 6.35156 24.0006 7.24699 24.0006 8.35156V23.9986H18.3535V8.35156Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/blocked-icon.tsx b/packages/propel/src/icons/blocked-icon.tsx
index 6ce00ccfc2..a11bb2bf28 100644
--- a/packages/propel/src/icons/blocked-icon.tsx
+++ b/packages/propel/src/icons/blocked-icon.tsx
@@ -2,25 +2,27 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const BlockedIcon: React.FC<ISvgIcons> = ({ height = "24", width = "24", className = "", ...rest }) => (
-  <svg
-    height={height}
-    width={width}
-    className={className}
-    fill="none"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M0.5 4.8C0.5 3.52696 1.00797 2.30606 1.91216 1.40589C2.81636 0.505713 4.04271 0 5.32143 0H21.3929C21.6913 0 21.9839 0.0827435 22.2378 0.238959C22.4917 0.395174 22.6968 0.618689 22.8303 0.884458C22.9638 1.15023 23.0203 1.44775 22.9935 1.74369C22.9667 2.03963 22.8576 2.32229 22.6786 2.56L18.5804 8L22.6786 13.44C22.8576 13.6777 22.9667 13.9604 22.9935 14.2563C23.0203 14.5522 22.9638 14.8498 22.8303 15.1155C22.6968 15.3813 22.4917 15.6048 22.2378 15.761C21.9839 15.9173 21.6913 16 21.3929 16H5.32143C4.89519 16 4.4864 16.1686 4.18501 16.4686C3.88361 16.7687 3.71429 17.1757 3.71429 17.6V22.4C3.71429 22.8243 3.54496 23.2313 3.24356 23.5314C2.94217 23.8314 2.53338 24 2.10714 24C1.6809 24 1.27212 23.8314 0.970721 23.5314C0.669323 23.2313 0.5 22.8243 0.5 22.4V4.8Z"
-      fill="#F76659"
-    />
-    <path
-      d="M8.5918 20.4812H21.084C21.26 20.4812 21.4056 20.4237 21.5207 20.3086C21.6358 20.1935 21.6934 20.0479 21.6934 19.8719C21.6934 19.6958 21.6358 19.5503 21.5207 19.4352C21.4056 19.3201 21.26 19.2625 21.084 19.2625H8.57148L10.3184 17.5156C10.4267 17.4073 10.4809 17.2719 10.4809 17.1094C10.4809 16.9469 10.4199 16.8047 10.298 16.6828C10.1762 16.5609 10.034 16.5 9.87148 16.5C9.70899 16.5 9.5668 16.5609 9.44492 16.6828L6.68242 19.4453C6.61471 19.513 6.56732 19.5807 6.54023 19.6484C6.51315 19.7161 6.49961 19.7906 6.49961 19.8719C6.49961 19.9531 6.51315 20.0276 6.54023 20.0953C6.56732 20.163 6.61471 20.2307 6.68242 20.2984L9.44492 23.0609C9.58034 23.1964 9.72591 23.2607 9.88164 23.2539C10.0374 23.2471 10.1762 23.1828 10.298 23.0609C10.4199 22.9391 10.4809 22.7935 10.4809 22.6242C10.4809 22.4549 10.4267 22.3161 10.3184 22.2078L8.5918 20.4812Z"
-      fill="#F76659"
-    />
-  </svg>
-);
+export function BlockedIcon({ height = "24", width = "24", className = "", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      height={height}
+      width={width}
+      className={className}
+      fill="none"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.5 4.8C0.5 3.52696 1.00797 2.30606 1.91216 1.40589C2.81636 0.505713 4.04271 0 5.32143 0H21.3929C21.6913 0 21.9839 0.0827435 22.2378 0.238959C22.4917 0.395174 22.6968 0.618689 22.8303 0.884458C22.9638 1.15023 23.0203 1.44775 22.9935 1.74369C22.9667 2.03963 22.8576 2.32229 22.6786 2.56L18.5804 8L22.6786 13.44C22.8576 13.6777 22.9667 13.9604 22.9935 14.2563C23.0203 14.5522 22.9638 14.8498 22.8303 15.1155C22.6968 15.3813 22.4917 15.6048 22.2378 15.761C21.9839 15.9173 21.6913 16 21.3929 16H5.32143C4.89519 16 4.4864 16.1686 4.18501 16.4686C3.88361 16.7687 3.71429 17.1757 3.71429 17.6V22.4C3.71429 22.8243 3.54496 23.2313 3.24356 23.5314C2.94217 23.8314 2.53338 24 2.10714 24C1.6809 24 1.27212 23.8314 0.970721 23.5314C0.669323 23.2313 0.5 22.8243 0.5 22.4V4.8Z"
+        fill="#F76659"
+      />
+      <path
+        d="M8.5918 20.4812H21.084C21.26 20.4812 21.4056 20.4237 21.5207 20.3086C21.6358 20.1935 21.6934 20.0479 21.6934 19.8719C21.6934 19.6958 21.6358 19.5503 21.5207 19.4352C21.4056 19.3201 21.26 19.2625 21.084 19.2625H8.57148L10.3184 17.5156C10.4267 17.4073 10.4809 17.2719 10.4809 17.1094C10.4809 16.9469 10.4199 16.8047 10.298 16.6828C10.1762 16.5609 10.034 16.5 9.87148 16.5C9.70899 16.5 9.5668 16.5609 9.44492 16.6828L6.68242 19.4453C6.61471 19.513 6.56732 19.5807 6.54023 19.6484C6.51315 19.7161 6.49961 19.7906 6.49961 19.8719C6.49961 19.9531 6.51315 20.0276 6.54023 20.0953C6.56732 20.163 6.61471 20.2307 6.68242 20.2984L9.44492 23.0609C9.58034 23.1964 9.72591 23.2607 9.88164 23.2539C10.0374 23.2471 10.1762 23.1828 10.298 23.0609C10.4199 22.9391 10.4809 22.7935 10.4809 22.6242C10.4809 22.4549 10.4267 22.3161 10.3184 22.2078L8.5918 20.4812Z"
+        fill="#F76659"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/blocker-icon.tsx b/packages/propel/src/icons/blocker-icon.tsx
index 8344329893..2548156d62 100644
--- a/packages/propel/src/icons/blocker-icon.tsx
+++ b/packages/propel/src/icons/blocker-icon.tsx
@@ -2,25 +2,27 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const BlockerIcon: React.FC<ISvgIcons> = ({ height = "24", width = "24", className = "", ...rest }) => (
-  <svg
-    height={height}
-    width={width}
-    className={className}
-    fill="none"
-    viewBox="0 0 24 24"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M0 4.8C0 3.52696 0.507971 2.30606 1.41216 1.40589C2.31636 0.505713 3.54271 0 4.82143 0H20.8929C21.1913 0 21.4839 0.0827435 21.7378 0.238959C21.9917 0.395174 22.1968 0.618689 22.3303 0.884458C22.4638 1.15023 22.5203 1.44775 22.4935 1.74369C22.4667 2.03963 22.3576 2.32229 22.1786 2.56L18.0804 8L22.1786 13.44C22.3576 13.6777 22.4667 13.9604 22.4935 14.2563C22.5203 14.5522 22.4638 14.8498 22.3303 15.1155C22.1968 15.3813 21.9917 15.6048 21.7378 15.761C21.4839 15.9173 21.1913 16 20.8929 16H4.82143C4.39519 16 3.9864 16.1686 3.68501 16.4686C3.38361 16.7687 3.21429 17.1757 3.21429 17.6V22.4C3.21429 22.8243 3.04496 23.2313 2.74356 23.5314C2.44217 23.8314 2.03338 24 1.60714 24C1.1809 24 0.772119 23.8314 0.470721 23.5314C0.169323 23.2313 0 22.8243 0 22.4V4.8Z"
-      fill="#F7AE59"
-    />
-    <path
-      d="M18.5391 20.8797H6.04688C5.87083 20.8797 5.72526 20.8221 5.61016 20.707C5.49505 20.5919 5.4375 20.4464 5.4375 20.2703C5.4375 20.0943 5.49505 19.9487 5.61016 19.8336C5.72526 19.7185 5.87083 19.6609 6.04688 19.6609H18.5594L16.8125 17.9141C16.7042 17.8057 16.65 17.6703 16.65 17.5078C16.65 17.3453 16.7109 17.2031 16.8328 17.0813C16.9547 16.9594 17.0969 16.8984 17.2594 16.8984C17.4219 16.8984 17.5641 16.9594 17.6859 17.0813L20.4484 19.8438C20.5161 19.9115 20.5635 19.9792 20.5906 20.0469C20.6177 20.1146 20.6313 20.1891 20.6313 20.2703C20.6313 20.3516 20.6177 20.426 20.5906 20.4938C20.5635 20.5615 20.5161 20.6292 20.4484 20.6969L17.6859 23.4594C17.5505 23.5948 17.4049 23.6591 17.2492 23.6523C17.0935 23.6456 16.9547 23.5812 16.8328 23.4594C16.7109 23.3375 16.65 23.1919 16.65 23.0227C16.65 22.8534 16.7042 22.7146 16.8125 22.6062L18.5391 20.8797Z"
-      fill="#F7AE59"
-    />
-  </svg>
-);
+export function BlockerIcon({ height = "24", width = "24", className = "", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      height={height}
+      width={width}
+      className={className}
+      fill="none"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0 4.8C0 3.52696 0.507971 2.30606 1.41216 1.40589C2.31636 0.505713 3.54271 0 4.82143 0H20.8929C21.1913 0 21.4839 0.0827435 21.7378 0.238959C21.9917 0.395174 22.1968 0.618689 22.3303 0.884458C22.4638 1.15023 22.5203 1.44775 22.4935 1.74369C22.4667 2.03963 22.3576 2.32229 22.1786 2.56L18.0804 8L22.1786 13.44C22.3576 13.6777 22.4667 13.9604 22.4935 14.2563C22.5203 14.5522 22.4638 14.8498 22.3303 15.1155C22.1968 15.3813 21.9917 15.6048 21.7378 15.761C21.4839 15.9173 21.1913 16 20.8929 16H4.82143C4.39519 16 3.9864 16.1686 3.68501 16.4686C3.38361 16.7687 3.21429 17.1757 3.21429 17.6V22.4C3.21429 22.8243 3.04496 23.2313 2.74356 23.5314C2.44217 23.8314 2.03338 24 1.60714 24C1.1809 24 0.772119 23.8314 0.470721 23.5314C0.169323 23.2313 0 22.8243 0 22.4V4.8Z"
+        fill="#F7AE59"
+      />
+      <path
+        d="M18.5391 20.8797H6.04688C5.87083 20.8797 5.72526 20.8221 5.61016 20.707C5.49505 20.5919 5.4375 20.4464 5.4375 20.2703C5.4375 20.0943 5.49505 19.9487 5.61016 19.8336C5.72526 19.7185 5.87083 19.6609 6.04688 19.6609H18.5594L16.8125 17.9141C16.7042 17.8057 16.65 17.6703 16.65 17.5078C16.65 17.3453 16.7109 17.2031 16.8328 17.0813C16.9547 16.9594 17.0969 16.8984 17.2594 16.8984C17.4219 16.8984 17.5641 16.9594 17.6859 17.0813L20.4484 19.8438C20.5161 19.9115 20.5635 19.9792 20.5906 20.0469C20.6177 20.1146 20.6313 20.1891 20.6313 20.2703C20.6313 20.3516 20.6177 20.426 20.5906 20.4938C20.5635 20.5615 20.5161 20.6292 20.4484 20.6969L17.6859 23.4594C17.5505 23.5948 17.4049 23.6591 17.2492 23.6523C17.0935 23.6456 16.9547 23.5812 16.8328 23.4594C16.7109 23.3375 16.65 23.1919 16.65 23.0227C16.65 22.8534 16.7042 22.7146 16.8125 22.6062L18.5391 20.8797Z"
+        fill="#F7AE59"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/brand/accenture-logo.tsx b/packages/propel/src/icons/brand/accenture-logo.tsx
index 8332416715..9b526d4b71 100644
--- a/packages/propel/src/icons/brand/accenture-logo.tsx
+++ b/packages/propel/src/icons/brand/accenture-logo.tsx
@@ -2,27 +2,24 @@ import * as React from "react";
 
 import type { ISvgIcons } from "../type";
 
-export const AccentureLogo: React.FC<ISvgIcons> = ({
-  width = "51",
-  height = "16",
-  className,
-  color = "currentColor",
-}) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 51 16"
-    fill={color}
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <path
-      d="M29.73 2.48282V1L34.5913 2.96305V4.16785L29.73 6.13932V4.6228L32.5693 3.56966L29.73 2.48282Z"
-      fill="#A100FF"
-    />
-    <path
-      d="M2.87038 13.9915C1.84251 13.9915 1 13.4776 1 12.3318V12.2728C1 10.8827 2.20479 10.4024 3.68762 10.4024H4.37848V10.1328C4.37848 9.55992 4.13415 9.22291 3.53597 9.22291C2.98833 9.22291 2.71873 9.52622 2.69345 9.94747H1.18535C1.3033 8.67528 2.3059 8.0771 3.62864 8.0771C4.95139 8.0771 5.98768 8.65 5.98768 10.0739V13.882H4.44588V13.2164C4.14257 13.6377 3.62864 14 2.8788 14L2.87038 13.9915ZM4.3869 11.9948V11.4471H3.75502C2.97148 11.4471 2.5755 11.6578 2.5755 12.1717V12.2307C2.5755 12.6267 2.81983 12.8963 3.35904 12.8963C3.90667 12.8626 4.3869 12.5677 4.3869 11.9864V11.9948ZM9.57679 13.9915C8.00971 13.9915 6.85547 13.0226 6.85547 11.0933V11.0006C6.85547 9.07126 8.06026 8.0434 9.57679 8.0434C10.8743 8.0434 11.9358 8.70898 12.0538 10.1918H10.5457C10.453 9.64417 10.1497 9.28189 9.61049 9.28189C8.9449 9.28189 8.46467 9.82952 8.46467 10.9416V11.127C8.46467 12.2728 8.88592 12.7867 9.61049 12.7867C10.1581 12.7867 10.5457 12.3908 10.6384 11.7589H12.0875C11.9948 13.09 11.1186 13.9915 9.57679 13.9915ZM15.4997 13.9915C13.9326 13.9915 12.7783 13.0226 12.7783 11.0933V11.0006C12.7783 9.07126 13.9831 8.0434 15.4997 8.0434C16.7971 8.0434 17.8587 8.70898 17.9766 10.1918H16.4685C16.3759 9.64417 16.0726 9.28189 15.5334 9.28189C14.8678 9.28189 14.3875 9.82952 14.3875 10.9416V11.127C14.3875 12.2728 14.8088 12.7867 15.5334 12.7867C16.081 12.7867 16.4685 12.3908 16.5612 11.7589H18.0103C17.9177 13.09 17.0415 13.9915 15.4997 13.9915ZM21.4478 13.9915C19.8133 13.9915 18.7012 13.0226 18.7012 11.1186V11.0006C18.7012 9.09654 19.8807 8.0434 21.4225 8.0434C22.8464 8.0434 24.0175 8.82693 24.0175 10.731V11.4219H20.302C20.361 12.4497 20.8159 12.8457 21.4815 12.8457C22.0881 12.8457 22.4167 12.5171 22.5346 12.1212H24.0175C23.8321 13.1743 22.9306 13.9915 21.4478 13.9915ZM20.3357 10.3687H22.4504C22.4167 9.52622 22.0291 9.16394 21.3972 9.16394C20.917 9.19764 20.4621 9.46724 20.3441 10.3687H20.3357ZM24.9864 8.18662H26.5871V9.02913C26.8567 8.4815 27.4296 8.06025 28.3059 8.06025C29.3337 8.06025 30.0246 8.69213 30.0246 10.057V13.8652H28.4238V10.3013C28.4238 9.63574 28.1542 9.33244 27.5813 9.33244C27.0337 9.33244 26.5871 9.66102 26.5871 10.3856V13.8567H24.9864V8.1782V8.18662ZM32.965 6.4679V8.18662H34.0518V9.36614H32.965V12.0538C32.965 12.475 33.1503 12.6856 33.5379 12.6856C33.7822 12.6856 33.9338 12.6519 34.0855 12.593V13.8315C33.9001 13.8904 33.5716 13.9494 33.1756 13.9494C31.9371 13.9494 31.3642 13.3765 31.3642 12.2307V9.35771H30.6986V8.1782H31.3642V7.12506L32.965 6.45947V6.4679ZM40.0336 13.8652H38.4666V13.0226C38.197 13.5703 37.6493 13.9915 36.8068 13.9915C35.7789 13.9915 35.0207 13.3596 35.0207 12.0285V8.19505H36.6215V11.8178C36.6215 12.4834 36.8911 12.7867 37.4387 12.7867C37.9863 12.7867 38.4329 12.4245 38.4329 11.7336V8.19505H40.0336V13.8736V13.8652ZM41.2047 8.18662H42.8055V9.23976C43.1341 8.4815 43.6817 8.11922 44.5242 8.11922V9.68629C43.4374 9.68629 42.8055 10.0149 42.8055 10.9585V13.8904H41.2047V8.1782V8.18662ZM47.7679 13.9915C46.1334 13.9915 45.0213 13.0226 45.0213 11.1186V11.0006C45.0213 9.09654 46.2008 8.0434 47.7426 8.0434C49.1665 8.0434 50.3376 8.82693 50.3376 10.731V11.4219H46.6558C46.7148 12.4497 47.1697 12.8457 47.8353 12.8457C48.4419 12.8457 48.7705 12.5171 48.8885 12.1212H50.3713C50.127 13.1743 49.2507 13.9915 47.7763 13.9915H47.7679ZM46.6137 10.3687H48.7621C48.7284 9.52622 48.3408 9.16394 47.7089 9.16394C47.2287 9.19764 46.7738 9.46724 46.6221 10.3687H46.6137Z"
+export function AccentureLogo({ width = "51", height = "16", className, color = "currentColor" }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 51 16"
       fill={color}
-    />
-  </svg>
-);
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M29.73 2.48282V1L34.5913 2.96305V4.16785L29.73 6.13932V4.6228L32.5693 3.56966L29.73 2.48282Z"
+        fill="#A100FF"
+      />
+      <path
+        d="M2.87038 13.9915C1.84251 13.9915 1 13.4776 1 12.3318V12.2728C1 10.8827 2.20479 10.4024 3.68762 10.4024H4.37848V10.1328C4.37848 9.55992 4.13415 9.22291 3.53597 9.22291C2.98833 9.22291 2.71873 9.52622 2.69345 9.94747H1.18535C1.3033 8.67528 2.3059 8.0771 3.62864 8.0771C4.95139 8.0771 5.98768 8.65 5.98768 10.0739V13.882H4.44588V13.2164C4.14257 13.6377 3.62864 14 2.8788 14L2.87038 13.9915ZM4.3869 11.9948V11.4471H3.75502C2.97148 11.4471 2.5755 11.6578 2.5755 12.1717V12.2307C2.5755 12.6267 2.81983 12.8963 3.35904 12.8963C3.90667 12.8626 4.3869 12.5677 4.3869 11.9864V11.9948ZM9.57679 13.9915C8.00971 13.9915 6.85547 13.0226 6.85547 11.0933V11.0006C6.85547 9.07126 8.06026 8.0434 9.57679 8.0434C10.8743 8.0434 11.9358 8.70898 12.0538 10.1918H10.5457C10.453 9.64417 10.1497 9.28189 9.61049 9.28189C8.9449 9.28189 8.46467 9.82952 8.46467 10.9416V11.127C8.46467 12.2728 8.88592 12.7867 9.61049 12.7867C10.1581 12.7867 10.5457 12.3908 10.6384 11.7589H12.0875C11.9948 13.09 11.1186 13.9915 9.57679 13.9915ZM15.4997 13.9915C13.9326 13.9915 12.7783 13.0226 12.7783 11.0933V11.0006C12.7783 9.07126 13.9831 8.0434 15.4997 8.0434C16.7971 8.0434 17.8587 8.70898 17.9766 10.1918H16.4685C16.3759 9.64417 16.0726 9.28189 15.5334 9.28189C14.8678 9.28189 14.3875 9.82952 14.3875 10.9416V11.127C14.3875 12.2728 14.8088 12.7867 15.5334 12.7867C16.081 12.7867 16.4685 12.3908 16.5612 11.7589H18.0103C17.9177 13.09 17.0415 13.9915 15.4997 13.9915ZM21.4478 13.9915C19.8133 13.9915 18.7012 13.0226 18.7012 11.1186V11.0006C18.7012 9.09654 19.8807 8.0434 21.4225 8.0434C22.8464 8.0434 24.0175 8.82693 24.0175 10.731V11.4219H20.302C20.361 12.4497 20.8159 12.8457 21.4815 12.8457C22.0881 12.8457 22.4167 12.5171 22.5346 12.1212H24.0175C23.8321 13.1743 22.9306 13.9915 21.4478 13.9915ZM20.3357 10.3687H22.4504C22.4167 9.52622 22.0291 9.16394 21.3972 9.16394C20.917 9.19764 20.4621 9.46724 20.3441 10.3687H20.3357ZM24.9864 8.18662H26.5871V9.02913C26.8567 8.4815 27.4296 8.06025 28.3059 8.06025C29.3337 8.06025 30.0246 8.69213 30.0246 10.057V13.8652H28.4238V10.3013C28.4238 9.63574 28.1542 9.33244 27.5813 9.33244C27.0337 9.33244 26.5871 9.66102 26.5871 10.3856V13.8567H24.9864V8.1782V8.18662ZM32.965 6.4679V8.18662H34.0518V9.36614H32.965V12.0538C32.965 12.475 33.1503 12.6856 33.5379 12.6856C33.7822 12.6856 33.9338 12.6519 34.0855 12.593V13.8315C33.9001 13.8904 33.5716 13.9494 33.1756 13.9494C31.9371 13.9494 31.3642 13.3765 31.3642 12.2307V9.35771H30.6986V8.1782H31.3642V7.12506L32.965 6.45947V6.4679ZM40.0336 13.8652H38.4666V13.0226C38.197 13.5703 37.6493 13.9915 36.8068 13.9915C35.7789 13.9915 35.0207 13.3596 35.0207 12.0285V8.19505H36.6215V11.8178C36.6215 12.4834 36.8911 12.7867 37.4387 12.7867C37.9863 12.7867 38.4329 12.4245 38.4329 11.7336V8.19505H40.0336V13.8736V13.8652ZM41.2047 8.18662H42.8055V9.23976C43.1341 8.4815 43.6817 8.11922 44.5242 8.11922V9.68629C43.4374 9.68629 42.8055 10.0149 42.8055 10.9585V13.8904H41.2047V8.1782V8.18662ZM47.7679 13.9915C46.1334 13.9915 45.0213 13.0226 45.0213 11.1186V11.0006C45.0213 9.09654 46.2008 8.0434 47.7426 8.0434C49.1665 8.0434 50.3376 8.82693 50.3376 10.731V11.4219H46.6558C46.7148 12.4497 47.1697 12.8457 47.8353 12.8457C48.4419 12.8457 48.7705 12.5171 48.8885 12.1212H50.3713C50.127 13.1743 49.2507 13.9915 47.7763 13.9915H47.7679ZM46.6137 10.3687H48.7621C48.7284 9.52622 48.3408 9.16394 47.7089 9.16394C47.2287 9.19764 46.7738 9.46724 46.6221 10.3687H46.6137Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/brand/dolby-logo.tsx b/packages/propel/src/icons/brand/dolby-logo.tsx
index b656c2d316..1638e96c71 100644
--- a/packages/propel/src/icons/brand/dolby-logo.tsx
+++ b/packages/propel/src/icons/brand/dolby-logo.tsx
@@ -2,39 +2,41 @@ import * as React from "react";
 
 import type { ISvgIcons } from "../type";
 
-export const DolbyLogo: React.FC<ISvgIcons> = ({ width = "40", height = "16", className, color = "currentColor" }) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 40 16"
-    fill={color}
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <path
-      d="M11.7241 13.4334H10.643C8.57552 13.4334 6.92627 11.7447 6.92627 9.71672C6.92627 7.6887 8.61498 6 10.643 6H11.7241V13.4255V13.4334Z"
+export function DolbyLogo({ width = "40", height = "16", className, color = "currentColor" }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 40 16"
       fill={color}
-    />
-    <path
-      d="M1 6.00806H2.08109C4.14857 6.00806 5.79782 7.69676 5.79782 9.72477C5.79782 11.7528 4.10911 13.4415 2.08109 13.4415H1V6.01595V6.00806Z"
-      fill={color}
-    />
-    <path d="M26.8042 6.00781V13.4334H27.9247V6.00781H26.8042Z" fill={color} />
-    <path
-      d="M23.5051 8.28845C22.0847 8.28845 20.9326 9.44056 20.9326 10.861C20.9326 12.2814 22.0847 13.4335 23.5051 13.4335C24.9255 13.4335 26.0776 12.2814 26.0776 10.861C26.0776 9.44056 24.9255 8.28845 23.5051 8.28845ZM23.5051 12.3997C22.6529 12.4076 21.9506 11.7211 21.9348 10.8688C21.9269 10.0166 22.6134 9.3143 23.4657 9.29852C23.4815 9.29852 23.4893 9.29852 23.5051 9.29852C24.3574 9.29852 25.0518 10.0008 25.0518 10.8452C25.0518 11.6974 24.3574 12.3918 23.5051 12.3918V12.3997Z"
-      fill={color}
-    />
-    <path
-      d="M31.4678 8.2964C30.9391 8.2964 30.4261 8.45423 30 8.76198V6.01587H28.8716V13.4414H30V12.9758C31.16 13.7886 32.7619 13.5045 33.5747 12.3367C34.3875 11.1767 34.1034 9.57476 32.9355 8.76198C32.5015 8.46212 31.9886 8.2964 31.4678 8.2964ZM31.4678 12.3998C30.6155 12.3919 29.929 11.6896 29.9369 10.8295C29.9448 9.9851 30.6234 9.30647 31.4678 9.29858C32.32 9.29858 33.0144 10.0009 33.0144 10.8452C33.0144 11.6975 32.32 12.3919 31.4678 12.3919V12.3998Z"
-      fill={color}
-    />
-    <path
-      d="M16.6561 6.00781H13.981V13.4255H16.6561C18.6999 13.4255 20.3649 11.7604 20.3649 9.71664C20.3649 7.67284 18.6999 6.00781 16.6561 6.00781ZM16.6561 12.297H15.1015V7.12835H16.6561C18.0765 7.12835 19.2365 8.28835 19.2365 9.71664C19.2365 11.1449 18.0765 12.297 16.6561 12.297Z"
-      fill={color}
-    />
-    <path
-      d="M38.1592 8.29634L36.6914 11.5869L35.2237 8.29634H33.9927L36.068 12.9679C36.068 12.9679 35.563 14.1121 35.5551 14.1121C35.421 14.412 35.0659 14.5461 34.766 14.4199L34.6082 14.3488L34.1505 15.3668L34.5372 15.5404C35.271 15.8639 36.1312 15.5404 36.4547 14.7986L39.3665 8.28845H38.1355L38.1592 8.29634Z"
-      fill={color}
-    />
-  </svg>
-);
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M11.7241 13.4334H10.643C8.57552 13.4334 6.92627 11.7447 6.92627 9.71672C6.92627 7.6887 8.61498 6 10.643 6H11.7241V13.4255V13.4334Z"
+        fill={color}
+      />
+      <path
+        d="M1 6.00806H2.08109C4.14857 6.00806 5.79782 7.69676 5.79782 9.72477C5.79782 11.7528 4.10911 13.4415 2.08109 13.4415H1V6.01595V6.00806Z"
+        fill={color}
+      />
+      <path d="M26.8042 6.00781V13.4334H27.9247V6.00781H26.8042Z" fill={color} />
+      <path
+        d="M23.5051 8.28845C22.0847 8.28845 20.9326 9.44056 20.9326 10.861C20.9326 12.2814 22.0847 13.4335 23.5051 13.4335C24.9255 13.4335 26.0776 12.2814 26.0776 10.861C26.0776 9.44056 24.9255 8.28845 23.5051 8.28845ZM23.5051 12.3997C22.6529 12.4076 21.9506 11.7211 21.9348 10.8688C21.9269 10.0166 22.6134 9.3143 23.4657 9.29852C23.4815 9.29852 23.4893 9.29852 23.5051 9.29852C24.3574 9.29852 25.0518 10.0008 25.0518 10.8452C25.0518 11.6974 24.3574 12.3918 23.5051 12.3918V12.3997Z"
+        fill={color}
+      />
+      <path
+        d="M31.4678 8.2964C30.9391 8.2964 30.4261 8.45423 30 8.76198V6.01587H28.8716V13.4414H30V12.9758C31.16 13.7886 32.7619 13.5045 33.5747 12.3367C34.3875 11.1767 34.1034 9.57476 32.9355 8.76198C32.5015 8.46212 31.9886 8.2964 31.4678 8.2964ZM31.4678 12.3998C30.6155 12.3919 29.929 11.6896 29.9369 10.8295C29.9448 9.9851 30.6234 9.30647 31.4678 9.29858C32.32 9.29858 33.0144 10.0009 33.0144 10.8452C33.0144 11.6975 32.32 12.3919 31.4678 12.3919V12.3998Z"
+        fill={color}
+      />
+      <path
+        d="M16.6561 6.00781H13.981V13.4255H16.6561C18.6999 13.4255 20.3649 11.7604 20.3649 9.71664C20.3649 7.67284 18.6999 6.00781 16.6561 6.00781ZM16.6561 12.297H15.1015V7.12835H16.6561C18.0765 7.12835 19.2365 8.28835 19.2365 9.71664C19.2365 11.1449 18.0765 12.297 16.6561 12.297Z"
+        fill={color}
+      />
+      <path
+        d="M38.1592 8.29634L36.6914 11.5869L35.2237 8.29634H33.9927L36.068 12.9679C36.068 12.9679 35.563 14.1121 35.5551 14.1121C35.421 14.412 35.0659 14.5461 34.766 14.4199L34.6082 14.3488L34.1505 15.3668L34.5372 15.5404C35.271 15.8639 36.1312 15.5404 36.4547 14.7986L39.3665 8.28845H38.1355L38.1592 8.29634Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/brand/plane-lockup.tsx b/packages/propel/src/icons/brand/plane-lockup.tsx
index 7251bd9a35..6e697f1771 100644
--- a/packages/propel/src/icons/brand/plane-lockup.tsx
+++ b/packages/propel/src/icons/brand/plane-lockup.tsx
@@ -2,47 +2,44 @@ import * as React from "react";
 
 import type { ISvgIcons } from "../type";
 
-export const PlaneLockup: React.FC<ISvgIcons> = ({
-  width = "253",
-  height = "53",
-  className,
-  color = "currentColor",
-}) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 253 53"
-    fill={color}
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <g clipPath="url(#clip0_27_76)">
-      <path
-        d="M217.077 51.4468H210.972L210.98 31.4317C210.717 27.7545 208.786 25.1545 205.03 24.6199C198.587 23.7006 194.663 27.8828 194.21 34.0258L194.218 51.4468H188.041V20.2543H192.158L194.255 26.8846H194.6C195.825 22.8701 198.684 20.4831 202.898 19.5757C210.126 18.0231 216.643 22.2724 217.079 29.8239V51.4468H217.077Z"
-        fill={color}
-      />
-      <path
-        d="M163.812 19.7315C158.03 20.9566 153.67 25.2354 153.222 31.264H159.395C159.669 28.3484 161.561 25.9969 164.267 24.9553C167.418 23.7401 172.805 23.8881 175.178 26.6005C176.774 28.4253 177.305 31.5816 175.212 33.2249C172.675 35.2173 166.39 34.6117 163.214 34.7636C158.631 34.9826 154.141 36.8429 153.183 41.7727C151.1 52.5042 165.035 54.9267 171.902 49.8963C174.095 48.2885 175.672 45.8443 176.261 43.1792H176.577L178.788 51.4508H182.61V29.964C182.517 20.3214 171.462 18.108 163.81 19.7315H163.812ZM174.847 41.2637C172.484 45.649 166.958 49.0441 162.218 47.3318C158.44 45.9686 158.268 40.4095 161.973 38.9181C165.613 37.4524 173.732 38.9694 176.368 34.949C176.275 37.0855 175.906 39.2989 174.849 41.2637H174.847Z"
-        fill={color}
-      />
-      <path
-        d="M113.082 35.5652V51.4475H106.611V9.00063H124.863C125.007 8.99274 125.141 9.06178 125.283 9.06967C133.732 9.53129 139.297 13.601 139.104 22.6025C138.928 30.7991 132.663 35.2199 124.934 35.5671H113.082V35.5652ZM113.082 14.4828V30.2941H124.088C129.595 29.8956 133.071 27.1022 132.491 21.265C131.967 15.9781 127.802 14.6544 123.107 14.4788C119.795 14.3546 116.402 14.5795 113.082 14.4808V14.4828Z"
-        fill={color}
-      />
-      <path d="M148.647 9H142.529V51.4468H148.647V9Z" fill={color} />
-      <path
-        d="M245.872 42.418C244.911 44.4953 243.138 46.1603 240.934 46.8981C238.368 47.7562 234.479 47.5431 232.083 46.2569C228.67 44.4263 227.145 40.6485 227.137 36.8984H251.891C252.194 33.6908 251.902 30.3648 250.496 27.4333C247.083 20.3177 238.859 17.7236 231.513 19.9429C222.868 22.5568 220.165 31.4162 221.462 39.6543C222.86 48.5611 230.197 52.976 238.958 52.3585C244.884 51.9423 250.271 48.1192 251.788 42.4161H245.874L245.872 42.418ZM227.208 32.4381C227.778 26.2457 233.347 23.2018 239.163 24.4269C243.361 25.3107 245.75 28.9523 245.842 33.1068H227.145C227.145 33.1068 227.19 32.6255 227.208 32.4401V32.4381Z"
-        fill={color}
-      />
-      <path
-        d="M44.3223 2.9264C44.3223 0.754665 46.6083 -0.65811 48.5508 0.313121L80.4551 16.2653C82.9294 17.5024 84.4922 20.0321 84.4922 22.7985V48.2487C84.4922 50.4204 82.2071 51.833 80.2646 50.8619L62.3281 41.8932V22.7975C62.3281 20.0311 60.7653 17.5015 58.291 16.2643L44.3223 9.27992V2.9264ZM0 2.92543C8.01645e-05 0.753753 2.28609 -0.659069 4.22852 0.312144L22.1582 9.27699V28.3766C22.1582 31.1428 23.7213 33.6716 26.1953 34.9088L40.1699 41.8952V48.2487C40.1697 50.4202 37.8847 51.832 35.9424 50.861L4.03711 34.9088C1.56305 33.6716 0 31.1428 0 28.3766V2.92543ZM22.1582 2.92543C22.1583 0.753753 24.4443 -0.659069 26.3867 0.312144L44.3223 9.27992V28.3776C44.3223 31.1439 45.8861 33.6727 48.3604 34.9098L62.3281 41.8932V48.2487C62.3279 50.4202 60.0429 51.832 58.1006 50.861L40.1699 41.8952V22.7975C40.1699 20.0311 38.6071 17.5015 36.1328 16.2643L22.1582 9.27699V2.92543Z"
-        fill={color}
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_27_76">
-        <rect width="252" height="53" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
+export function PlaneLockup({ width = "253", height = "53", className, color = "currentColor" }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 253 53"
+      fill={color}
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g clipPath="url(#clip0_27_76)">
+        <path
+          d="M217.077 51.4468H210.972L210.98 31.4317C210.717 27.7545 208.786 25.1545 205.03 24.6199C198.587 23.7006 194.663 27.8828 194.21 34.0258L194.218 51.4468H188.041V20.2543H192.158L194.255 26.8846H194.6C195.825 22.8701 198.684 20.4831 202.898 19.5757C210.126 18.0231 216.643 22.2724 217.079 29.8239V51.4468H217.077Z"
+          fill={color}
+        />
+        <path
+          d="M163.812 19.7315C158.03 20.9566 153.67 25.2354 153.222 31.264H159.395C159.669 28.3484 161.561 25.9969 164.267 24.9553C167.418 23.7401 172.805 23.8881 175.178 26.6005C176.774 28.4253 177.305 31.5816 175.212 33.2249C172.675 35.2173 166.39 34.6117 163.214 34.7636C158.631 34.9826 154.141 36.8429 153.183 41.7727C151.1 52.5042 165.035 54.9267 171.902 49.8963C174.095 48.2885 175.672 45.8443 176.261 43.1792H176.577L178.788 51.4508H182.61V29.964C182.517 20.3214 171.462 18.108 163.81 19.7315H163.812ZM174.847 41.2637C172.484 45.649 166.958 49.0441 162.218 47.3318C158.44 45.9686 158.268 40.4095 161.973 38.9181C165.613 37.4524 173.732 38.9694 176.368 34.949C176.275 37.0855 175.906 39.2989 174.849 41.2637H174.847Z"
+          fill={color}
+        />
+        <path
+          d="M113.082 35.5652V51.4475H106.611V9.00063H124.863C125.007 8.99274 125.141 9.06178 125.283 9.06967C133.732 9.53129 139.297 13.601 139.104 22.6025C138.928 30.7991 132.663 35.2199 124.934 35.5671H113.082V35.5652ZM113.082 14.4828V30.2941H124.088C129.595 29.8956 133.071 27.1022 132.491 21.265C131.967 15.9781 127.802 14.6544 123.107 14.4788C119.795 14.3546 116.402 14.5795 113.082 14.4808V14.4828Z"
+          fill={color}
+        />
+        <path d="M148.647 9H142.529V51.4468H148.647V9Z" fill={color} />
+        <path
+          d="M245.872 42.418C244.911 44.4953 243.138 46.1603 240.934 46.8981C238.368 47.7562 234.479 47.5431 232.083 46.2569C228.67 44.4263 227.145 40.6485 227.137 36.8984H251.891C252.194 33.6908 251.902 30.3648 250.496 27.4333C247.083 20.3177 238.859 17.7236 231.513 19.9429C222.868 22.5568 220.165 31.4162 221.462 39.6543C222.86 48.5611 230.197 52.976 238.958 52.3585C244.884 51.9423 250.271 48.1192 251.788 42.4161H245.874L245.872 42.418ZM227.208 32.4381C227.778 26.2457 233.347 23.2018 239.163 24.4269C243.361 25.3107 245.75 28.9523 245.842 33.1068H227.145C227.145 33.1068 227.19 32.6255 227.208 32.4401V32.4381Z"
+          fill={color}
+        />
+        <path
+          d="M44.3223 2.9264C44.3223 0.754665 46.6083 -0.65811 48.5508 0.313121L80.4551 16.2653C82.9294 17.5024 84.4922 20.0321 84.4922 22.7985V48.2487C84.4922 50.4204 82.2071 51.833 80.2646 50.8619L62.3281 41.8932V22.7975C62.3281 20.0311 60.7653 17.5015 58.291 16.2643L44.3223 9.27992V2.9264ZM0 2.92543C8.01645e-05 0.753753 2.28609 -0.659069 4.22852 0.312144L22.1582 9.27699V28.3766C22.1582 31.1428 23.7213 33.6716 26.1953 34.9088L40.1699 41.8952V48.2487C40.1697 50.4202 37.8847 51.832 35.9424 50.861L4.03711 34.9088C1.56305 33.6716 0 31.1428 0 28.3766V2.92543ZM22.1582 2.92543C22.1583 0.753753 24.4443 -0.659069 26.3867 0.312144L44.3223 9.27992V28.3776C44.3223 31.1439 45.8861 33.6727 48.3604 34.9098L62.3281 41.8932V48.2487C62.3279 50.4202 60.0429 51.832 58.1006 50.861L40.1699 41.8952V22.7975C40.1699 20.0311 38.6071 17.5015 36.1328 16.2643L22.1582 9.27699V2.92543Z"
+          fill={color}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_27_76">
+          <rect width="252" height="53" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/brand/plane-logo.tsx b/packages/propel/src/icons/brand/plane-logo.tsx
index 8f30d6ccf7..92fc4d7545 100644
--- a/packages/propel/src/icons/brand/plane-logo.tsx
+++ b/packages/propel/src/icons/brand/plane-logo.tsx
@@ -2,18 +2,20 @@ import * as React from "react";
 
 import type { ISvgIcons } from "../type";
 
-export const PlaneLogo: React.FC<ISvgIcons> = ({ width = "85", height = "52", className, color = "currentColor" }) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 85 52"
-    fill={color}
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <path
-      d="M44.3223 2.9264C44.3223 0.754665 46.6083 -0.65811 48.5508 0.313121L80.4551 16.2653C82.9294 17.5024 84.4922 20.0321 84.4922 22.7985V48.2487C84.4922 50.4204 82.2071 51.833 80.2646 50.8619L62.3281 41.8932V22.7975C62.3281 20.0311 60.7653 17.5015 58.291 16.2643L44.3223 9.27992V2.9264ZM0 2.92543C8.01645e-05 0.753753 2.28609 -0.659069 4.22852 0.312144L22.1582 9.27699V28.3766C22.1582 31.1428 23.7213 33.6716 26.1953 34.9088L40.1699 41.8952V48.2487C40.1697 50.4202 37.8847 51.832 35.9424 50.861L4.03711 34.9088C1.56305 33.6716 0 31.1428 0 28.3766V2.92543ZM22.1582 2.92543C22.1583 0.753753 24.4443 -0.659069 26.3867 0.312144L44.3223 9.27992V28.3776C44.3223 31.1439 45.8861 33.6727 48.3604 34.9098L62.3281 41.8932V48.2487C62.3279 50.4202 60.0429 51.832 58.1006 50.861L40.1699 41.8952V22.7975C40.1699 20.0311 38.6071 17.5015 36.1328 16.2643L22.1582 9.27699V2.92543Z"
+export function PlaneLogo({ width = "85", height = "52", className, color = "currentColor" }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 85 52"
       fill={color}
-    />
-  </svg>
-);
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M44.3223 2.9264C44.3223 0.754665 46.6083 -0.65811 48.5508 0.313121L80.4551 16.2653C82.9294 17.5024 84.4922 20.0321 84.4922 22.7985V48.2487C84.4922 50.4204 82.2071 51.833 80.2646 50.8619L62.3281 41.8932V22.7975C62.3281 20.0311 60.7653 17.5015 58.291 16.2643L44.3223 9.27992V2.9264ZM0 2.92543C8.01645e-05 0.753753 2.28609 -0.659069 4.22852 0.312144L22.1582 9.27699V28.3766C22.1582 31.1428 23.7213 33.6716 26.1953 34.9088L40.1699 41.8952V48.2487C40.1697 50.4202 37.8847 51.832 35.9424 50.861L4.03711 34.9088C1.56305 33.6716 0 31.1428 0 28.3766V2.92543ZM22.1582 2.92543C22.1583 0.753753 24.4443 -0.659069 26.3867 0.312144L44.3223 9.27992V28.3776C44.3223 31.1439 45.8861 33.6727 48.3604 34.9098L62.3281 41.8932V48.2487C62.3279 50.4202 60.0429 51.832 58.1006 50.861L40.1699 41.8952V22.7975C40.1699 20.0311 38.6071 17.5015 36.1328 16.2643L22.1582 9.27699V2.92543Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/brand/plane-wordmark.tsx b/packages/propel/src/icons/brand/plane-wordmark.tsx
index ad21468c4f..47efad29c5 100644
--- a/packages/propel/src/icons/brand/plane-wordmark.tsx
+++ b/packages/propel/src/icons/brand/plane-wordmark.tsx
@@ -2,36 +2,33 @@ import * as React from "react";
 
 import type { ISvgIcons } from "../type";
 
-export const PlaneWordmark: React.FC<ISvgIcons> = ({
-  width = "146",
-  height = "44",
-  className,
-  color = "currentColor",
-}) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 146 44"
-    fill={color}
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <path
-      d="M111.077 42.4468H104.972L104.98 22.4317C104.717 18.7545 102.786 16.1545 99.03 15.6199C92.587 14.7006 88.663 18.8828 88.21 25.0258L88.218 42.4468H82.041V11.2543H86.158L88.255 17.8846H88.6C89.825 13.8701 92.684 11.4831 96.898 10.5757C104.126 9.0231 110.643 13.2724 111.079 20.8239V42.4468H111.077Z"
+export function PlaneWordmark({ width = "146", height = "44", className, color = "currentColor" }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 146 44"
       fill={color}
-    />
-    <path
-      d="M57.812 10.7315C52.03 11.9566 47.67 16.2354 47.222 22.264H53.395C53.669 19.3484 55.561 16.9969 58.267 15.9553C61.418 14.7401 66.805 14.8881 69.178 17.6005C70.774 19.4253 71.305 22.5816 69.212 24.2249C66.675 26.2173 60.39 25.6117 57.214 25.7636C52.631 25.9826 48.141 27.8429 47.183 32.7727C45.1 43.5042 59.035 45.9267 65.902 40.8963C68.095 39.2885 69.672 36.8443 70.261 34.1792H70.577L72.788 42.4508H76.61V20.964C76.517 11.3214 65.462 9.108 57.81 10.7315H57.812ZM68.847 32.2637C66.484 36.649 60.958 40.0441 56.218 38.3318C52.44 36.9686 52.268 31.4095 55.973 29.9181C59.613 28.4524 67.732 29.9694 70.368 25.949C70.275 28.0855 69.906 30.2989 68.849 32.2637H68.847Z"
-      fill={color}
-    />
-    <path
-      d="M7.08199 26.5652V42.4475H0.610992V0.000626947H18.863C19.007 -0.00726305 19.141 0.0617763 19.283 0.0696663C27.732 0.531286 33.297 4.601 33.104 13.6025C32.928 21.7991 26.663 26.2199 18.934 26.5671H7.08199V26.5652ZM7.08199 5.4828V21.2941H18.088C23.595 20.8956 27.071 18.1022 26.491 12.265C25.967 6.9781 21.802 5.6544 17.107 5.4788C13.795 5.3546 10.402 5.5795 7.08199 5.4808V5.4828Z"
-      fill={color}
-    />
-    <path d="M42.647 0H36.529V42.4468H42.647V0Z" fill={color} />
-    <path
-      d="M139.872 33.418C138.911 35.4953 137.138 37.1603 134.934 37.8981C132.368 38.7562 128.479 38.5431 126.083 37.2569C122.67 35.4263 121.145 31.6485 121.137 27.8984H145.891C146.194 24.6908 145.902 21.3648 144.496 18.4333C141.083 11.3177 132.859 8.7236 125.513 10.9429C116.868 13.5568 114.165 22.4162 115.462 30.6543C116.86 39.5611 124.197 43.976 132.958 43.3585C138.884 42.9423 144.271 39.1192 145.788 33.4161H139.874L139.872 33.418ZM121.208 23.4381C121.778 17.2457 127.347 14.2018 133.163 15.4269C137.361 16.3107 139.75 19.9523 139.842 24.1068H121.145C121.145 24.1068 121.19 23.6255 121.208 23.4401V23.4381Z"
-      fill={color}
-    />
-  </svg>
-);
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M111.077 42.4468H104.972L104.98 22.4317C104.717 18.7545 102.786 16.1545 99.03 15.6199C92.587 14.7006 88.663 18.8828 88.21 25.0258L88.218 42.4468H82.041V11.2543H86.158L88.255 17.8846H88.6C89.825 13.8701 92.684 11.4831 96.898 10.5757C104.126 9.0231 110.643 13.2724 111.079 20.8239V42.4468H111.077Z"
+        fill={color}
+      />
+      <path
+        d="M57.812 10.7315C52.03 11.9566 47.67 16.2354 47.222 22.264H53.395C53.669 19.3484 55.561 16.9969 58.267 15.9553C61.418 14.7401 66.805 14.8881 69.178 17.6005C70.774 19.4253 71.305 22.5816 69.212 24.2249C66.675 26.2173 60.39 25.6117 57.214 25.7636C52.631 25.9826 48.141 27.8429 47.183 32.7727C45.1 43.5042 59.035 45.9267 65.902 40.8963C68.095 39.2885 69.672 36.8443 70.261 34.1792H70.577L72.788 42.4508H76.61V20.964C76.517 11.3214 65.462 9.108 57.81 10.7315H57.812ZM68.847 32.2637C66.484 36.649 60.958 40.0441 56.218 38.3318C52.44 36.9686 52.268 31.4095 55.973 29.9181C59.613 28.4524 67.732 29.9694 70.368 25.949C70.275 28.0855 69.906 30.2989 68.849 32.2637H68.847Z"
+        fill={color}
+      />
+      <path
+        d="M7.08199 26.5652V42.4475H0.610992V0.000626947H18.863C19.007 -0.00726305 19.141 0.0617763 19.283 0.0696663C27.732 0.531286 33.297 4.601 33.104 13.6025C32.928 21.7991 26.663 26.2199 18.934 26.5671H7.08199V26.5652ZM7.08199 5.4828V21.2941H18.088C23.595 20.8956 27.071 18.1022 26.491 12.265C25.967 6.9781 21.802 5.6544 17.107 5.4788C13.795 5.3546 10.402 5.5795 7.08199 5.4808V5.4828Z"
+        fill={color}
+      />
+      <path d="M42.647 0H36.529V42.4468H42.647V0Z" fill={color} />
+      <path
+        d="M139.872 33.418C138.911 35.4953 137.138 37.1603 134.934 37.8981C132.368 38.7562 128.479 38.5431 126.083 37.2569C122.67 35.4263 121.145 31.6485 121.137 27.8984H145.891C146.194 24.6908 145.902 21.3648 144.496 18.4333C141.083 11.3177 132.859 8.7236 125.513 10.9429C116.868 13.5568 114.165 22.4162 115.462 30.6543C116.86 39.5611 124.197 43.976 132.958 43.3585C138.884 42.9423 144.271 39.1192 145.788 33.4161H139.874L139.872 33.418ZM121.208 23.4381C121.778 17.2457 127.347 14.2018 133.163 15.4269C137.361 16.3107 139.75 19.9523 139.842 24.1068H121.145C121.145 24.1068 121.19 23.6255 121.208 23.4401V23.4381Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/brand/sony-logo.tsx b/packages/propel/src/icons/brand/sony-logo.tsx
index 088d3edce4..7f93005f36 100644
--- a/packages/propel/src/icons/brand/sony-logo.tsx
+++ b/packages/propel/src/icons/brand/sony-logo.tsx
@@ -2,18 +2,20 @@ import * as React from "react";
 
 import type { ISvgIcons } from "../type";
 
-export const SonyLogo: React.FC<ISvgIcons> = ({ width = "44", height = "16", className, color = "currentColor" }) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 44 16"
-    fill={color}
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <path
-      d="M16.1608 13.9C14.6192 13.9 13.1911 13.4366 12.2358 12.5854C11.5454 11.9706 11.1576 11.0816 11.1671 10.1548C11.1671 9.22789 11.5549 8.34832 12.2358 7.73357C13.1248 6.92966 14.6854 6.41894 16.1608 6.41894C17.7875 6.41894 19.0927 6.82562 20.0952 7.73357C20.7762 8.35778 21.1545 9.23735 21.1451 10.1548C21.1451 11.0722 20.7573 11.9517 20.0952 12.5854C19.1683 13.4461 17.7024 13.9 16.1608 13.9V12.9164C16.9742 12.9164 17.7402 12.6327 18.2699 12.1031C18.7995 11.5734 19.0359 10.9397 19.0359 10.1453C19.0359 9.35084 18.7711 8.6888 18.2699 8.18754C17.7497 7.67682 16.9742 7.38363 16.1608 7.38363C15.3474 7.38363 14.5719 7.66736 14.0517 8.18754C13.5505 8.6888 13.2857 9.39813 13.2857 10.1453C13.2668 10.8735 13.5505 11.5734 14.0517 12.1031C14.5719 12.6232 15.3474 12.9164 16.1608 12.9164V13.9ZM4.89665 6.40948C4.07382 6.40948 3.13749 6.56081 2.34304 6.9202C1.60534 7.25122 1 7.78086 1 8.66043C1 9.12386 1.17026 9.56837 1.49182 9.89939C1.70935 10.098 2.04987 10.429 2.94835 10.6276C3.35504 10.7128 4.20623 10.8452 5.06688 10.9397C5.92754 11.0343 6.75032 11.11 7.0908 11.2046C7.36507 11.2708 7.81906 11.3653 7.81906 11.8761C7.81906 12.3868 7.33675 12.5381 7.26109 12.5759C7.17597 12.6138 6.59901 12.8691 5.56811 12.8691C4.88715 12.8502 4.20619 12.7367 3.55361 12.5192C3.16584 12.3773 2.76863 12.1976 2.39032 11.7437C2.239 11.5261 2.15387 11.2708 2.14441 11.006H1.2081V13.6257H2.24843V13.2664C2.24843 13.1812 2.31467 13.115 2.39979 13.115C2.42816 13.115 2.45655 13.115 2.47547 13.1339C2.96727 13.3515 3.47797 13.5123 3.99815 13.6257C4.5467 13.7392 4.89662 13.8244 5.57758 13.8244C6.29637 13.8338 7.00569 13.7392 7.69611 13.5217C8.15008 13.3988 8.57569 13.1907 8.954 12.8975C9.3796 12.5665 9.63498 12.0558 9.62553 11.5167C9.62553 11.0154 9.43636 10.5236 9.08643 10.1642C8.88781 9.97506 8.66081 9.82373 8.41491 9.71024C8.15009 9.58729 7.87582 9.49271 7.59209 9.42651C7.05299 9.2941 5.84238 9.13332 5.26546 9.06711C4.66016 9.00091 3.60094 8.91579 3.1848 8.78338C3.06185 8.74555 2.797 8.6226 2.797 8.31995C2.797 8.10242 2.91994 7.92272 3.14693 7.7714C3.51578 7.53495 4.27242 7.39309 5.05741 7.39309C5.81403 7.39309 6.57062 7.53495 7.2705 7.82814C7.45965 7.91326 7.63935 8.0173 7.80013 8.14025C8.06495 8.36724 8.24469 8.66988 8.32035 9.01036H9.16205V6.73105H8.22574V6.99586C8.22574 7.08098 8.14066 7.19448 7.97042 7.0999C7.54482 6.88237 6.36255 6.40948 4.90606 6.40002L4.89665 6.40948ZM25.4389 6.83508L30.0164 10.9587L29.9691 8.17808C29.9691 7.80923 29.8935 7.65791 29.5057 7.65791H28.6451V6.82562H32.5606V7.65791H31.7188C31.3216 7.65791 31.2932 7.79031 31.2838 8.17808L31.35 13.4839H30.007L24.739 8.78338V12.122C24.739 12.4814 24.7579 12.6516 25.1362 12.6516H26.0725V13.4839H22.2327V12.6516H23.1312C23.4622 12.6516 23.4528 12.33 23.4528 12.1031V8.20646C23.4528 7.9511 23.4149 7.65791 22.8947 7.65791H22.1665V6.82562H25.4389V6.83508ZM37.0151 12.6516C37.0908 12.6516 37.1665 12.6516 37.2421 12.6327C37.3272 12.6043 37.3935 12.5476 37.4218 12.4719C37.4313 12.4152 37.4408 12.349 37.4408 12.2922V10.9776C37.4408 10.9776 37.4408 10.9303 37.384 10.8641C37.3273 10.7979 34.9912 8.14025 34.8777 8.02676C34.7453 7.88489 34.5089 7.65791 34.1589 7.65791H33.3455V6.82562H37.9326V7.65791H37.384C37.2611 7.65791 37.176 7.78086 37.28 7.91326C37.28 7.91326 38.8216 9.75753 38.8405 9.77644C38.8594 9.79536 38.8689 9.80482 38.8878 9.77644C38.9067 9.74807 40.4673 7.92272 40.4767 7.90381C40.5335 7.8376 40.5145 7.73357 40.4483 7.67682C40.4199 7.65791 40.3821 7.63899 40.3443 7.64845H39.7768V6.81617H43.5316V7.64845H42.6898C42.3872 7.64845 42.2642 7.70519 42.0277 7.96055L39.4931 10.8452C39.4931 10.8452 39.4553 10.9208 39.4647 10.9681V12.2827C39.4647 12.3395 39.4647 12.4057 39.4836 12.4624C39.5214 12.5381 39.5782 12.5949 39.6633 12.6232C39.739 12.6327 39.8147 12.6421 39.8903 12.6421H40.751V13.4744H36.1923V12.6421H37.0057L37.0151 12.6516Z"
+export function SonyLogo({ width = "44", height = "16", className, color = "currentColor" }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 44 16"
       fill={color}
-    />
-  </svg>
-);
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M16.1608 13.9C14.6192 13.9 13.1911 13.4366 12.2358 12.5854C11.5454 11.9706 11.1576 11.0816 11.1671 10.1548C11.1671 9.22789 11.5549 8.34832 12.2358 7.73357C13.1248 6.92966 14.6854 6.41894 16.1608 6.41894C17.7875 6.41894 19.0927 6.82562 20.0952 7.73357C20.7762 8.35778 21.1545 9.23735 21.1451 10.1548C21.1451 11.0722 20.7573 11.9517 20.0952 12.5854C19.1683 13.4461 17.7024 13.9 16.1608 13.9V12.9164C16.9742 12.9164 17.7402 12.6327 18.2699 12.1031C18.7995 11.5734 19.0359 10.9397 19.0359 10.1453C19.0359 9.35084 18.7711 8.6888 18.2699 8.18754C17.7497 7.67682 16.9742 7.38363 16.1608 7.38363C15.3474 7.38363 14.5719 7.66736 14.0517 8.18754C13.5505 8.6888 13.2857 9.39813 13.2857 10.1453C13.2668 10.8735 13.5505 11.5734 14.0517 12.1031C14.5719 12.6232 15.3474 12.9164 16.1608 12.9164V13.9ZM4.89665 6.40948C4.07382 6.40948 3.13749 6.56081 2.34304 6.9202C1.60534 7.25122 1 7.78086 1 8.66043C1 9.12386 1.17026 9.56837 1.49182 9.89939C1.70935 10.098 2.04987 10.429 2.94835 10.6276C3.35504 10.7128 4.20623 10.8452 5.06688 10.9397C5.92754 11.0343 6.75032 11.11 7.0908 11.2046C7.36507 11.2708 7.81906 11.3653 7.81906 11.8761C7.81906 12.3868 7.33675 12.5381 7.26109 12.5759C7.17597 12.6138 6.59901 12.8691 5.56811 12.8691C4.88715 12.8502 4.20619 12.7367 3.55361 12.5192C3.16584 12.3773 2.76863 12.1976 2.39032 11.7437C2.239 11.5261 2.15387 11.2708 2.14441 11.006H1.2081V13.6257H2.24843V13.2664C2.24843 13.1812 2.31467 13.115 2.39979 13.115C2.42816 13.115 2.45655 13.115 2.47547 13.1339C2.96727 13.3515 3.47797 13.5123 3.99815 13.6257C4.5467 13.7392 4.89662 13.8244 5.57758 13.8244C6.29637 13.8338 7.00569 13.7392 7.69611 13.5217C8.15008 13.3988 8.57569 13.1907 8.954 12.8975C9.3796 12.5665 9.63498 12.0558 9.62553 11.5167C9.62553 11.0154 9.43636 10.5236 9.08643 10.1642C8.88781 9.97506 8.66081 9.82373 8.41491 9.71024C8.15009 9.58729 7.87582 9.49271 7.59209 9.42651C7.05299 9.2941 5.84238 9.13332 5.26546 9.06711C4.66016 9.00091 3.60094 8.91579 3.1848 8.78338C3.06185 8.74555 2.797 8.6226 2.797 8.31995C2.797 8.10242 2.91994 7.92272 3.14693 7.7714C3.51578 7.53495 4.27242 7.39309 5.05741 7.39309C5.81403 7.39309 6.57062 7.53495 7.2705 7.82814C7.45965 7.91326 7.63935 8.0173 7.80013 8.14025C8.06495 8.36724 8.24469 8.66988 8.32035 9.01036H9.16205V6.73105H8.22574V6.99586C8.22574 7.08098 8.14066 7.19448 7.97042 7.0999C7.54482 6.88237 6.36255 6.40948 4.90606 6.40002L4.89665 6.40948ZM25.4389 6.83508L30.0164 10.9587L29.9691 8.17808C29.9691 7.80923 29.8935 7.65791 29.5057 7.65791H28.6451V6.82562H32.5606V7.65791H31.7188C31.3216 7.65791 31.2932 7.79031 31.2838 8.17808L31.35 13.4839H30.007L24.739 8.78338V12.122C24.739 12.4814 24.7579 12.6516 25.1362 12.6516H26.0725V13.4839H22.2327V12.6516H23.1312C23.4622 12.6516 23.4528 12.33 23.4528 12.1031V8.20646C23.4528 7.9511 23.4149 7.65791 22.8947 7.65791H22.1665V6.82562H25.4389V6.83508ZM37.0151 12.6516C37.0908 12.6516 37.1665 12.6516 37.2421 12.6327C37.3272 12.6043 37.3935 12.5476 37.4218 12.4719C37.4313 12.4152 37.4408 12.349 37.4408 12.2922V10.9776C37.4408 10.9776 37.4408 10.9303 37.384 10.8641C37.3273 10.7979 34.9912 8.14025 34.8777 8.02676C34.7453 7.88489 34.5089 7.65791 34.1589 7.65791H33.3455V6.82562H37.9326V7.65791H37.384C37.2611 7.65791 37.176 7.78086 37.28 7.91326C37.28 7.91326 38.8216 9.75753 38.8405 9.77644C38.8594 9.79536 38.8689 9.80482 38.8878 9.77644C38.9067 9.74807 40.4673 7.92272 40.4767 7.90381C40.5335 7.8376 40.5145 7.73357 40.4483 7.67682C40.4199 7.65791 40.3821 7.63899 40.3443 7.64845H39.7768V6.81617H43.5316V7.64845H42.6898C42.3872 7.64845 42.2642 7.70519 42.0277 7.96055L39.4931 10.8452C39.4931 10.8452 39.4553 10.9208 39.4647 10.9681V12.2827C39.4647 12.3395 39.4647 12.4057 39.4836 12.4624C39.5214 12.5381 39.5782 12.5949 39.6633 12.6232C39.739 12.6327 39.8147 12.6421 39.8903 12.6421H40.751V13.4744H36.1923V12.6421H37.0057L37.0151 12.6516Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/brand/zerodha-logo.tsx b/packages/propel/src/icons/brand/zerodha-logo.tsx
index d9fa9e8bc3..9f407f8bf8 100644
--- a/packages/propel/src/icons/brand/zerodha-logo.tsx
+++ b/packages/propel/src/icons/brand/zerodha-logo.tsx
@@ -2,29 +2,26 @@ import * as React from "react";
 
 import type { ISvgIcons } from "../type";
 
-export const ZerodhaLogo: React.FC<ISvgIcons> = ({
-  width = "64",
-  height = "16",
-  className,
-  color = "currentColor",
-}) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 64 16"
-    fill={color}
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M7.46267 8.1456C7.92616 8.74901 8.31095 9.42239 8.60828 10.157V6.29163H5.32886C6.11592 6.72014 6.84177 7.34104 7.46267 8.1456ZM2.7403 6.70265C2.13689 6.70265 1.55094 6.83382 1 7.06994V13.8999H8.27596C8.22349 9.91211 5.75737 6.6939 2.73155 6.6939"
+export function ZerodhaLogo({ width = "64", height = "16", className, color = "currentColor" }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 64 16"
       fill={color}
-    />
-    <path
-      d="M12.9634 12.7281L17.0299 7.80457H13.0858V6.72892H18.604V7.62093L14.5375 12.5444H18.604V13.6201H12.9634V12.7281ZM20.1257 6.72892H25.2241V7.82206H21.3237V9.59733H24.778V10.6905H21.3237V12.5357H25.2765V13.6288H20.1257V6.73767V6.72892ZM26.7282 6.72892H29.7978C30.235 6.72892 30.6111 6.79014 30.9521 6.91257C31.2932 7.035 31.5643 7.20116 31.7917 7.41979C31.9753 7.61218 32.1152 7.83081 32.2114 8.07567C32.3076 8.32054 32.3601 8.60038 32.3601 8.90646V8.92395C32.3601 9.2038 32.3164 9.4574 32.2377 9.68478C32.1589 9.91215 32.0453 10.1133 31.8966 10.2882C31.7479 10.4631 31.5818 10.6118 31.3806 10.7342C31.1795 10.8566 30.9609 10.9528 30.716 11.014L32.5787 13.6201H31.1533L29.4567 11.2152H27.9351V13.6201H26.737V6.72892H26.7282ZM29.7016 10.1483C30.1388 10.1483 30.4799 10.0433 30.7422 9.83345C31.0046 9.62356 31.127 9.34372 31.127 8.98517V8.96768C31.127 8.59164 31.0046 8.30305 30.751 8.11065C30.4974 7.91826 30.1476 7.82206 29.6928 7.82206H27.9263V10.1483H29.7016ZM37.1349 13.7425C36.6015 13.7425 36.1205 13.6463 35.6745 13.4627C35.2285 13.279 34.8612 13.0254 34.5376 12.7019C34.2141 12.3783 33.9779 12.0022 33.803 11.5737C33.6281 11.1452 33.5407 10.6817 33.5407 10.2007V10.1833C33.5407 9.69352 33.6281 9.23878 33.803 8.81026C33.9779 8.38175 34.2316 8.00571 34.5551 7.6734C34.8787 7.34108 35.2547 7.08747 35.7007 6.90382C36.1467 6.72018 36.6277 6.61523 37.1612 6.61523C37.6946 6.61523 38.1756 6.71143 38.6216 6.89508C39.0589 7.07873 39.4349 7.34108 39.7585 7.65591C40.082 7.97073 40.3182 8.35552 40.4931 8.78403C40.668 9.21254 40.7554 9.67603 40.7554 10.157V10.1745C40.7554 10.6642 40.668 11.119 40.4931 11.5475C40.3182 11.976 40.0646 12.352 39.741 12.6844C39.4174 13.0079 39.0414 13.2703 38.5954 13.4539C38.1494 13.6376 37.6684 13.7425 37.1349 13.7425ZM37.1524 12.6319C37.4935 12.6319 37.8083 12.5707 38.0882 12.4395C38.368 12.3083 38.6129 12.1334 38.8227 11.9148C39.0326 11.6962 39.1813 11.4338 39.295 11.1452C39.4087 10.8566 39.4699 10.5331 39.4699 10.2007V10.1833C39.4699 9.85094 39.4087 9.52737 39.295 9.23003C39.1813 8.9327 39.0239 8.67034 38.814 8.45171C38.6041 8.23309 38.3593 8.05818 38.0707 7.92701C37.7821 7.79583 37.4672 7.72587 37.1262 7.72587C36.7851 7.72587 36.4703 7.78708 36.1905 7.91826C35.9106 8.04944 35.6658 8.22434 35.4559 8.44297C35.246 8.6616 35.0973 8.92395 34.9836 9.21254C34.87 9.50113 34.8087 9.8247 34.8087 10.157V10.1745C34.8087 10.5068 34.87 10.8304 34.9836 11.1277C35.0973 11.4251 35.2547 11.6874 35.4646 11.906C35.6745 12.1247 35.9194 12.2996 36.208 12.4308C36.4965 12.5619 36.8114 12.6319 37.1524 12.6319ZM42.2159 6.72892H44.7869C45.3291 6.72892 45.8189 6.81637 46.2736 6.99128C46.7284 7.16618 47.1131 7.4023 47.4367 7.71712C47.7603 8.03195 48.0139 8.3905 48.1888 8.80152C48.3637 9.21254 48.4511 9.66729 48.4511 10.157V10.1745C48.4511 10.6642 48.3637 11.1102 48.1888 11.53C48.0139 11.9498 47.7603 12.3171 47.4367 12.6231C47.1131 12.9292 46.7284 13.1741 46.2736 13.349C45.8189 13.5239 45.3291 13.6113 44.7869 13.6113H42.2159V6.72018V6.72892ZM44.7782 12.5357C45.1367 12.5357 45.469 12.4745 45.7664 12.3608C46.0637 12.2471 46.3173 12.0809 46.5185 11.8798C46.7196 11.6787 46.8858 11.4251 46.9995 11.1365C47.1131 10.8479 47.1744 10.5418 47.1744 10.2007V10.1833C47.1744 9.85094 47.1131 9.53611 46.9995 9.24752C46.8858 8.95893 46.7196 8.70532 46.5185 8.50418C46.3173 8.30305 46.0637 8.13689 45.7664 8.01446C45.469 7.89202 45.1455 7.83955 44.7782 7.83955H43.4227V12.5444H44.7782V12.5357ZM49.9203 6.72892H51.1184V9.59733H54.4241V6.72892H55.6222V13.6201H54.4241V10.7167H51.1184V13.6201H49.9203V6.72892ZM59.8461 6.6852H60.9654L64 13.6288H62.7232L62.0236 11.9673H58.7617L58.0533 13.6288H56.8115L59.8461 6.6852ZM61.5776 10.8916L60.3883 8.13689L59.2077 10.8916H61.5776Z"
-      fill={color}
-    />
-  </svg>
-);
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.46267 8.1456C7.92616 8.74901 8.31095 9.42239 8.60828 10.157V6.29163H5.32886C6.11592 6.72014 6.84177 7.34104 7.46267 8.1456ZM2.7403 6.70265C2.13689 6.70265 1.55094 6.83382 1 7.06994V13.8999H8.27596C8.22349 9.91211 5.75737 6.6939 2.73155 6.6939"
+        fill={color}
+      />
+      <path
+        d="M12.9634 12.7281L17.0299 7.80457H13.0858V6.72892H18.604V7.62093L14.5375 12.5444H18.604V13.6201H12.9634V12.7281ZM20.1257 6.72892H25.2241V7.82206H21.3237V9.59733H24.778V10.6905H21.3237V12.5357H25.2765V13.6288H20.1257V6.73767V6.72892ZM26.7282 6.72892H29.7978C30.235 6.72892 30.6111 6.79014 30.9521 6.91257C31.2932 7.035 31.5643 7.20116 31.7917 7.41979C31.9753 7.61218 32.1152 7.83081 32.2114 8.07567C32.3076 8.32054 32.3601 8.60038 32.3601 8.90646V8.92395C32.3601 9.2038 32.3164 9.4574 32.2377 9.68478C32.1589 9.91215 32.0453 10.1133 31.8966 10.2882C31.7479 10.4631 31.5818 10.6118 31.3806 10.7342C31.1795 10.8566 30.9609 10.9528 30.716 11.014L32.5787 13.6201H31.1533L29.4567 11.2152H27.9351V13.6201H26.737V6.72892H26.7282ZM29.7016 10.1483C30.1388 10.1483 30.4799 10.0433 30.7422 9.83345C31.0046 9.62356 31.127 9.34372 31.127 8.98517V8.96768C31.127 8.59164 31.0046 8.30305 30.751 8.11065C30.4974 7.91826 30.1476 7.82206 29.6928 7.82206H27.9263V10.1483H29.7016ZM37.1349 13.7425C36.6015 13.7425 36.1205 13.6463 35.6745 13.4627C35.2285 13.279 34.8612 13.0254 34.5376 12.7019C34.2141 12.3783 33.9779 12.0022 33.803 11.5737C33.6281 11.1452 33.5407 10.6817 33.5407 10.2007V10.1833C33.5407 9.69352 33.6281 9.23878 33.803 8.81026C33.9779 8.38175 34.2316 8.00571 34.5551 7.6734C34.8787 7.34108 35.2547 7.08747 35.7007 6.90382C36.1467 6.72018 36.6277 6.61523 37.1612 6.61523C37.6946 6.61523 38.1756 6.71143 38.6216 6.89508C39.0589 7.07873 39.4349 7.34108 39.7585 7.65591C40.082 7.97073 40.3182 8.35552 40.4931 8.78403C40.668 9.21254 40.7554 9.67603 40.7554 10.157V10.1745C40.7554 10.6642 40.668 11.119 40.4931 11.5475C40.3182 11.976 40.0646 12.352 39.741 12.6844C39.4174 13.0079 39.0414 13.2703 38.5954 13.4539C38.1494 13.6376 37.6684 13.7425 37.1349 13.7425ZM37.1524 12.6319C37.4935 12.6319 37.8083 12.5707 38.0882 12.4395C38.368 12.3083 38.6129 12.1334 38.8227 11.9148C39.0326 11.6962 39.1813 11.4338 39.295 11.1452C39.4087 10.8566 39.4699 10.5331 39.4699 10.2007V10.1833C39.4699 9.85094 39.4087 9.52737 39.295 9.23003C39.1813 8.9327 39.0239 8.67034 38.814 8.45171C38.6041 8.23309 38.3593 8.05818 38.0707 7.92701C37.7821 7.79583 37.4672 7.72587 37.1262 7.72587C36.7851 7.72587 36.4703 7.78708 36.1905 7.91826C35.9106 8.04944 35.6658 8.22434 35.4559 8.44297C35.246 8.6616 35.0973 8.92395 34.9836 9.21254C34.87 9.50113 34.8087 9.8247 34.8087 10.157V10.1745C34.8087 10.5068 34.87 10.8304 34.9836 11.1277C35.0973 11.4251 35.2547 11.6874 35.4646 11.906C35.6745 12.1247 35.9194 12.2996 36.208 12.4308C36.4965 12.5619 36.8114 12.6319 37.1524 12.6319ZM42.2159 6.72892H44.7869C45.3291 6.72892 45.8189 6.81637 46.2736 6.99128C46.7284 7.16618 47.1131 7.4023 47.4367 7.71712C47.7603 8.03195 48.0139 8.3905 48.1888 8.80152C48.3637 9.21254 48.4511 9.66729 48.4511 10.157V10.1745C48.4511 10.6642 48.3637 11.1102 48.1888 11.53C48.0139 11.9498 47.7603 12.3171 47.4367 12.6231C47.1131 12.9292 46.7284 13.1741 46.2736 13.349C45.8189 13.5239 45.3291 13.6113 44.7869 13.6113H42.2159V6.72018V6.72892ZM44.7782 12.5357C45.1367 12.5357 45.469 12.4745 45.7664 12.3608C46.0637 12.2471 46.3173 12.0809 46.5185 11.8798C46.7196 11.6787 46.8858 11.4251 46.9995 11.1365C47.1131 10.8479 47.1744 10.5418 47.1744 10.2007V10.1833C47.1744 9.85094 47.1131 9.53611 46.9995 9.24752C46.8858 8.95893 46.7196 8.70532 46.5185 8.50418C46.3173 8.30305 46.0637 8.13689 45.7664 8.01446C45.469 7.89202 45.1455 7.83955 44.7782 7.83955H43.4227V12.5444H44.7782V12.5357ZM49.9203 6.72892H51.1184V9.59733H54.4241V6.72892H55.6222V13.6201H54.4241V10.7167H51.1184V13.6201H49.9203V6.72892ZM59.8461 6.6852H60.9654L64 13.6288H62.7232L62.0236 11.9673H58.7617L58.0533 13.6288H56.8115L59.8461 6.6852ZM61.5776 10.8916L60.3883 8.13689L59.2077 10.8916H61.5776Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/calendar-after-icon.tsx b/packages/propel/src/icons/calendar-after-icon.tsx
index 2e9e7a386d..3d1c133cee 100644
--- a/packages/propel/src/icons/calendar-after-icon.tsx
+++ b/packages/propel/src/icons/calendar-after-icon.tsx
@@ -2,18 +2,20 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const CalendarAfterIcon: React.FC<ISvgIcons> = ({ className = "fill-current", ...rest }) => (
-  <svg viewBox="0 0 24 24" className={`${className} `} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
-    <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))"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_3309_70901">
-        <rect width="18" height="18" fill="white" transform="translate(0 0.5)" />
-      </clipPath>
-    </defs>
-  </svg>
-);
+export function CalendarAfterIcon({ className = "fill-current", ...rest }: ISvgIcons) {
+  return (
+    <svg viewBox="0 0 24 24" className={`${className} `} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
+      <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="var(--text-color-secondary)"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_3309_70901">
+          <rect width="18" height="18" fill="white" transform="translate(0 0.5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/calendar-before-icon.tsx b/packages/propel/src/icons/calendar-before-icon.tsx
index c7e2d2d841..7833b2ea76 100644
--- a/packages/propel/src/icons/calendar-before-icon.tsx
+++ b/packages/propel/src/icons/calendar-before-icon.tsx
@@ -2,29 +2,31 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const CalendarBeforeIcon: React.FC<ISvgIcons> = ({ className = "fill-current", ...rest }) => (
-  <svg viewBox="0 0 24 24" className={`${className} `} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
-    <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))"
-      />
-      <g clipPath="url(#clip1_3309_70907)">
+export function CalendarBeforeIcon({ className = "fill-current", ...rest }: ISvgIcons) {
+  return (
+    <svg viewBox="0 0 24 24" className={`${className} `} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
+      <g clipPath="url(#clip0_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))"
-          strokeWidth="0.5"
+          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="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="var(--text-color-secondary)"
+            stroke="var(--text-color-secondary)"
+            strokeWidth="0.5"
+          />
+        </g>
       </g>
-    </g>
-    <defs>
-      <clipPath id="clip0_3309_70907">
-        <rect width="18" height="18" fill="white" />
-      </clipPath>
-      <clipPath id="clip1_3309_70907">
-        <rect width="8" height="8" fill="white" transform="translate(0 10.5)" />
-      </clipPath>
-    </defs>
-  </svg>
-);
+      <defs>
+        <clipPath id="clip0_3309_70907">
+          <rect width="18" height="18" fill="white" />
+        </clipPath>
+        <clipPath id="clip1_3309_70907">
+          <rect width="8" height="8" fill="white" transform="translate(0 10.5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/center-panel-icon.tsx b/packages/propel/src/icons/center-panel-icon.tsx
index 78b95acc82..c8d6c8a445 100644
--- a/packages/propel/src/icons/center-panel-icon.tsx
+++ b/packages/propel/src/icons/center-panel-icon.tsx
@@ -2,29 +2,31 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const CenterPanelIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} stroke-2`}
-    stroke="currentColor"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <path
-      d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
+export function CenterPanelIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
       stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M15.1111 8.00009H8.8001C8.33334 8.00007 8.00003 8.0001 8.00012 8.88897V15.1111C8.00012 16 8.00012 16 8.8001 16H15.1111C16 16 16 16 16 15.1111V8.88897C16 8.00009 16 8.00009 15.1111 8.00009H15.1111Z"
-      fill="currentColor"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15.1111 8.00009H8.8001C8.33334 8.00007 8.00003 8.0001 8.00012 8.88897V15.1111C8.00012 16 8.00012 16 8.8001 16H15.1111C16 16 16 16 16 15.1111V8.88897C16 8.00009 16 8.00009 15.1111 8.00009H15.1111Z"
+        fill="currentColor"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/comment-fill-icon.tsx b/packages/propel/src/icons/comment-fill-icon.tsx
index 0a08d45272..806d114dd2 100644
--- a/packages/propel/src/icons/comment-fill-icon.tsx
+++ b/packages/propel/src/icons/comment-fill-icon.tsx
@@ -2,13 +2,15 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const CommentFillIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg viewBox="0 0 24 24" className={`${className}`} xmlns="http://www.w3.org/2000/svg" {...rest}>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M4.848 2.771C7.21613 2.4234 9.60649 2.24927 12 2.25C14.43 2.25 16.817 2.428 19.152 2.77C21.13 3.062 22.5 4.794 22.5 6.74V12.76C22.5 14.706 21.13 16.438 19.152 16.73C17.212 17.014 15.236 17.185 13.23 17.235C13.1303 17.2369 13.0351 17.277 12.964 17.347L8.78 21.53C8.67511 21.6348 8.54153 21.7061 8.39614 21.735C8.25074 21.7638 8.10004 21.749 7.96308 21.6923C7.82611 21.6356 7.70903 21.5395 7.62661 21.4163C7.54419 21.2931 7.50013 21.1482 7.5 21V17.045C6.61329 16.9639 5.72895 16.8585 4.848 16.729C2.87 16.439 1.5 14.705 1.5 12.759V6.741C1.5 4.795 2.87 3.061 4.848 2.771Z"
-      fill="currentColor"
-    />
-  </svg>
-);
+export function CommentFillIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg viewBox="0 0 24 24" className={`${className}`} xmlns="http://www.w3.org/2000/svg" {...rest}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.848 2.771C7.21613 2.4234 9.60649 2.24927 12 2.25C14.43 2.25 16.817 2.428 19.152 2.77C21.13 3.062 22.5 4.794 22.5 6.74V12.76C22.5 14.706 21.13 16.438 19.152 16.73C17.212 17.014 15.236 17.185 13.23 17.235C13.1303 17.2369 13.0351 17.277 12.964 17.347L8.78 21.53C8.67511 21.6348 8.54153 21.7061 8.39614 21.735C8.25074 21.7638 8.10004 21.749 7.96308 21.6923C7.82611 21.6356 7.70903 21.5395 7.62661 21.4163C7.54419 21.2931 7.50013 21.1482 7.5 21V17.045C6.61329 16.9639 5.72895 16.8585 4.848 16.729C2.87 16.439 1.5 14.705 1.5 12.759V6.741C1.5 4.795 2.87 3.061 4.848 2.771Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/constants.tsx b/packages/propel/src/icons/constants.tsx
index cbb8299b8a..de3c08c1fb 100644
--- a/packages/propel/src/icons/constants.tsx
+++ b/packages/propel/src/icons/constants.tsx
@@ -1,8 +1,15 @@
 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.close" />, title: "CloseIcon" },
+  { 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.preferences" />, title: "PreferencesIcon" },
+  { icon: <Icon name="action.copy-link" />, title: "CopyLinkIcon" },
+  { icon: <Icon name="action.upgrade" />, title: "UpgradeIcon" },
 ];
 
 export const ArrowsIconsMap = [
@@ -10,6 +17,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 = [
@@ -19,6 +27,7 @@ export const WorkspaceIconsMap = [
   { icon: <Icon name="workspace.draft" />, title: "DraftIcon" },
   { icon: <Icon name="workspace.home" />, title: "HomeIcon" },
   { icon: <Icon name="workspace.inbox" />, title: "InboxIcon" },
+  { icon: <Icon name="workspace.multiple-sticky" />, title: "MultipleStickyIcon" },
   { icon: <Icon name="workspace.project" />, title: "ProjectIcon" },
   { icon: <Icon name="workspace.your-work" />, title: "YourWorkIcon" },
 ];
@@ -70,4 +79,5 @@ 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" },
 ];
diff --git a/packages/propel/src/icons/create-icon.tsx b/packages/propel/src/icons/create-icon.tsx
index a0b3f342a9..7c69d2b470 100644
--- a/packages/propel/src/icons/create-icon.tsx
+++ b/packages/propel/src/icons/create-icon.tsx
@@ -2,21 +2,23 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const CreateIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} stroke-2`}
-    stroke="currentColor"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <path
-      d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H12"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path d="M16 5H22" strokeLinecap="round" strokeLinejoin="round" />
-    <path d="M19 2V8" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-);
+export function CreateIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H12"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path d="M16 5H22" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M19 2V8" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
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 4bea715f32..021d385aa3 100644
--- a/packages/propel/src/icons/cycle/circle-dot-full-icon.tsx
+++ b/packages/propel/src/icons/cycle/circle-dot-full-icon.tsx
@@ -2,9 +2,17 @@ import * as React from "react";
 
 import type { ISvgIcons } from "../type";
 
-export const CircleDotFullIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg viewBox="0 0 24 24" className={`${className} stroke-1`} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
-    <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
-    <circle cx="12" cy="12" r="6.25" fill="currentColor" strokeWidth="0.5" />
-  </svg>
-);
+export function CircleDotFullIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-1`}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+      <circle cx="12" cy="12" r="6.25" fill="currentColor" strokeWidth="0.5" />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/cycle/contrast-icon.tsx b/packages/propel/src/icons/cycle/contrast-icon.tsx
index d9cd16e158..b7e46a11c9 100644
--- a/packages/propel/src/icons/cycle/contrast-icon.tsx
+++ b/packages/propel/src/icons/cycle/contrast-icon.tsx
@@ -2,25 +2,27 @@ import * as React from "react";
 
 import type { ISvgIcons } from "../type";
 
-export const ContrastIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} stroke-2`}
-    stroke="currentColor"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <path
-      d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M12 18C13.5913 18 15.1174 17.3679 16.2426 16.2426C17.3679 15.1174 18 13.5913 18 12C18 10.4087 17.3679 8.88258 16.2426 7.75736C15.1174 6.63214 13.5913 6 12 6V18Z"
-      fill="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+export function ContrastIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 18C13.5913 18 15.1174 17.3679 16.2426 16.2426C17.3679 15.1174 18 13.5913 18 12C18 10.4087 17.3679 8.88258 16.2426 7.75736C15.1174 6.63214 13.5913 6 12 6V18Z"
+        fill="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/cycle/cycle-group-icon.tsx b/packages/propel/src/icons/cycle/cycle-group-icon.tsx
index 074cfebd69..0d5dd3aa52 100644
--- a/packages/propel/src/icons/cycle/cycle-group-icon.tsx
+++ b/packages/propel/src/icons/cycle/cycle-group-icon.tsx
@@ -13,13 +13,13 @@ const iconComponents = {
   draft: Circle,
 };
 
-export const CycleGroupIcon: React.FC<ICycleGroupIcon> = ({
+export function CycleGroupIcon({
   className = "",
   color,
   cycleGroup,
   height = "12px",
   width = "12px",
-}) => {
+}: ICycleGroupIcon) {
   const CycleIconComponent = iconComponents[cycleGroup] || CycleIcon;
 
   return (
@@ -30,4 +30,4 @@ export const CycleGroupIcon: React.FC<ICycleGroupIcon> = ({
       className={`flex-shrink-0 ${className}`}
     />
   );
-};
+}
diff --git a/packages/propel/src/icons/cycle/double-circle-icon.tsx b/packages/propel/src/icons/cycle/double-circle-icon.tsx
index 0100e941b2..5f7e7a4d39 100644
--- a/packages/propel/src/icons/cycle/double-circle-icon.tsx
+++ b/packages/propel/src/icons/cycle/double-circle-icon.tsx
@@ -2,16 +2,18 @@ import * as React from "react";
 
 import type { ISvgIcons } from "../type";
 
-export const DoubleCircleIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} stroke-2`}
-    stroke="currentColor"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <circle cx="12" cy="12" r="9" />
-    <circle cx="12" cy="12" r="5.625" />
-  </svg>
-);
+export function DoubleCircleIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <circle cx="12" cy="12" r="9" />
+      <circle cx="12" cy="12" r="5.625" />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/cycle/index.ts b/packages/propel/src/icons/cycle/index.ts
index c3a791a2ba..374f3b42e8 100644
--- a/packages/propel/src/icons/cycle/index.ts
+++ b/packages/propel/src/icons/cycle/index.ts
@@ -1,6 +1,5 @@
-export * from "./double-circle-icon";
 export * from "./circle-dot-full-icon";
 export * from "./contrast-icon";
-export * from "./circle-dot-full-icon";
 export * from "./cycle-group-icon";
+export * from "./double-circle-icon";
 export * from "./helper";
diff --git a/packages/propel/src/icons/default-icon.tsx b/packages/propel/src/icons/default-icon.tsx
index 6be674fda3..12fd0be2ee 100644
--- a/packages/propel/src/icons/default-icon.tsx
+++ b/packages/propel/src/icons/default-icon.tsx
@@ -3,8 +3,10 @@ import * as React from "react";
 import { IconWrapper } from "./icon-wrapper";
 import type { ISvgIcons } from "./type";
 
-export const DefaultIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <rect x="4" y="4" width="8" height="8" rx="1" fill={color} />
-  </IconWrapper>
-);
+export function DefaultIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <rect x="4" y="4" width="8" height="8" rx="1" fill={color} />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/dice-icon.tsx b/packages/propel/src/icons/dice-icon.tsx
index d298eaf4a8..5624006fd3 100644
--- a/packages/propel/src/icons/dice-icon.tsx
+++ b/packages/propel/src/icons/dice-icon.tsx
@@ -2,43 +2,45 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const DiceIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} stroke-2`}
-    stroke="currentColor"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <path
-      d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M8.77778 7H7.22222C7.09949 7 7 7.09949 7 7.22222V8.77778C7 8.90051 7.09949 9 7.22222 9H8.77778C8.90051 9 9 8.90051 9 8.77778V7.22222C9 7.09949 8.90051 7 8.77778 7Z"
-      fill="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M8.77778 15H7.22222C7.09949 15 7 15.0995 7 15.2222V16.7778C7 16.9005 7.09949 17 7.22222 17H8.77778C8.90051 17 9 16.9005 9 16.7778V15.2222C9 15.0995 8.90051 15 8.77778 15Z"
-      fill="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M16.7778 7H15.2222C15.0995 7 15 7.09949 15 7.22222V8.77778C15 8.90051 15.0995 9 15.2222 9H16.7778C16.9005 9 17 8.90051 17 8.77778V7.22222C17 7.09949 16.9005 7 16.7778 7Z"
-      fill="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M16.7778 15H15.2222C15.0995 15 15 15.0995 15 15.2222V16.7778C15 16.9005 15.0995 17 15.2222 17H16.7778C16.9005 17 17 16.9005 17 16.7778V15.2222C17 15.0995 16.9005 15 16.7778 15Z"
-      fill="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+export function DiceIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.77778 7H7.22222C7.09949 7 7 7.09949 7 7.22222V8.77778C7 8.90051 7.09949 9 7.22222 9H8.77778C8.90051 9 9 8.90051 9 8.77778V7.22222C9 7.09949 8.90051 7 8.77778 7Z"
+        fill="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.77778 15H7.22222C7.09949 15 7 15.0995 7 15.2222V16.7778C7 16.9005 7.09949 17 7.22222 17H8.77778C8.90051 17 9 16.9005 9 16.7778V15.2222C9 15.0995 8.90051 15 8.77778 15Z"
+        fill="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.7778 7H15.2222C15.0995 7 15 7.09949 15 7.22222V8.77778C15 8.90051 15.0995 9 15.2222 9H16.7778C16.9005 9 17 8.90051 17 8.77778V7.22222C17 7.09949 16.9005 7 16.7778 7Z"
+        fill="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.7778 15H15.2222C15.0995 15 15 15.0995 15 15.2222V16.7778C15 16.9005 15.0995 17 15.2222 17H16.7778C16.9005 17 17 16.9005 17 16.7778V15.2222C17 15.0995 16.9005 15 16.7778 15Z"
+        fill="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/discord-icon.tsx b/packages/propel/src/icons/discord-icon.tsx
index 731ecf00a2..452233a9e7 100644
--- a/packages/propel/src/icons/discord-icon.tsx
+++ b/packages/propel/src/icons/discord-icon.tsx
@@ -2,31 +2,33 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const DiscordIcon: React.FC<ISvgIcons> = ({ width = "24", height = "24", className }) => (
-  <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"
-        />
+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>
-    </g>
-    <defs>
-      <clipPath id="clip0_4112_17440">
-        <rect width={width} height={height} fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
+      <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 095e1de155..bfe5b648c3 100644
--- a/packages/propel/src/icons/display-properties.tsx
+++ b/packages/propel/src/icons/display-properties.tsx
@@ -2,13 +2,15 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const DisplayPropertiesIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest} className={className}>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M2.93934 0.93934C3.22064 0.658035 3.60218 0.5 4 0.5C4.39782 0.5 4.77936 0.658035 5.06066 0.93934C5.22036 1.09904 5.34033 1.29105 5.41421 1.5H11.5C11.7761 1.5 12 1.72386 12 2C12 2.27614 11.7761 2.5 11.5 2.5H5.41421C5.34033 2.70895 5.22036 2.90096 5.06066 3.06066C4.77936 3.34197 4.39782 3.5 4 3.5C3.60218 3.5 3.22064 3.34197 2.93934 3.06066C2.77964 2.90096 2.65967 2.70895 2.58579 2.5H0.5C0.223858 2.5 0 2.27614 0 2C0 1.72386 0.223858 1.5 0.5 1.5H2.58579C2.65967 1.29105 2.77964 1.09904 2.93934 0.93934ZM4 1.5C3.86739 1.5 3.74021 1.55268 3.64645 1.64645C3.55268 1.74021 3.5 1.86739 3.5 2C3.5 2.13261 3.55268 2.25979 3.64645 2.35355C3.74021 2.44732 3.86739 2.5 4 2.5C4.13261 2.5 4.25979 2.44732 4.35355 2.35355C4.44732 2.25979 4.5 2.13261 4.5 2C4.5 1.86739 4.44732 1.74021 4.35355 1.64645C4.25979 1.55268 4.13261 1.5 4 1.5ZM6.93934 4.93934C7.22064 4.65804 7.60218 4.5 8 4.5C8.39783 4.5 8.77936 4.65804 9.06066 4.93934C9.22036 5.09904 9.34033 5.29105 9.41422 5.5H11.5C11.7761 5.5 12 5.72386 12 6C12 6.27614 11.7761 6.5 11.5 6.5H9.41422C9.34033 6.70895 9.22036 6.90096 9.06066 7.06066C8.77936 7.34196 8.39783 7.5 8 7.5C7.60218 7.5 7.22064 7.34196 6.93934 7.06066C6.77964 6.90096 6.65967 6.70895 6.58579 6.5H0.5C0.223858 6.5 0 6.27614 0 6C0 5.72386 0.223858 5.5 0.5 5.5H6.58579C6.65967 5.29105 6.77964 5.09904 6.93934 4.93934ZM8 5.5C7.86739 5.5 7.74021 5.55268 7.64645 5.64645C7.55268 5.74021 7.5 5.86739 7.5 6C7.5 6.13261 7.55268 6.25979 7.64645 6.35355C7.74021 6.44732 7.86739 6.5 8 6.5C8.13261 6.5 8.25978 6.44732 8.35355 6.35355C8.44732 6.25979 8.5 6.13261 8.5 6C8.5 5.86739 8.44732 5.74022 8.35355 5.64645C8.25978 5.55268 8.13261 5.5 8 5.5ZM2.93934 8.93934C3.22064 8.65804 3.60217 8.5 4 8.5C4.39783 8.5 4.77936 8.65804 5.06066 8.93934C5.22036 9.09904 5.34033 9.29105 5.41421 9.5H11.5C11.7761 9.5 12 9.72386 12 10C12 10.2761 11.7761 10.5 11.5 10.5H5.41421C5.34033 10.709 5.22036 10.901 5.06066 11.0607C4.77936 11.342 4.39783 11.5 4 11.5C3.60217 11.5 3.22064 11.342 2.93934 11.0607C2.77964 10.901 2.65967 10.709 2.58579 10.5H0.5C0.223858 10.5 0 10.2761 0 10C0 9.72386 0.223858 9.5 0.5 9.5H2.58579C2.65967 9.29105 2.77964 9.09904 2.93934 8.93934ZM4 9.5C3.86739 9.5 3.74022 9.55268 3.64645 9.64645C3.55268 9.74022 3.5 9.86739 3.5 10C3.5 10.1326 3.55268 10.2598 3.64645 10.3536C3.74022 10.4473 3.86739 10.5 4 10.5C4.13261 10.5 4.25979 10.4473 4.35355 10.3536C4.44732 10.2598 4.5 10.1326 4.5 10C4.5 9.86739 4.44732 9.74022 4.35355 9.64645C4.25979 9.55268 4.13261 9.5 4 9.5Z"
-      fill="currentColor"
-    />
-  </svg>
-);
+export function DisplayPropertiesIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest} className={className}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.93934 0.93934C3.22064 0.658035 3.60218 0.5 4 0.5C4.39782 0.5 4.77936 0.658035 5.06066 0.93934C5.22036 1.09904 5.34033 1.29105 5.41421 1.5H11.5C11.7761 1.5 12 1.72386 12 2C12 2.27614 11.7761 2.5 11.5 2.5H5.41421C5.34033 2.70895 5.22036 2.90096 5.06066 3.06066C4.77936 3.34197 4.39782 3.5 4 3.5C3.60218 3.5 3.22064 3.34197 2.93934 3.06066C2.77964 2.90096 2.65967 2.70895 2.58579 2.5H0.5C0.223858 2.5 0 2.27614 0 2C0 1.72386 0.223858 1.5 0.5 1.5H2.58579C2.65967 1.29105 2.77964 1.09904 2.93934 0.93934ZM4 1.5C3.86739 1.5 3.74021 1.55268 3.64645 1.64645C3.55268 1.74021 3.5 1.86739 3.5 2C3.5 2.13261 3.55268 2.25979 3.64645 2.35355C3.74021 2.44732 3.86739 2.5 4 2.5C4.13261 2.5 4.25979 2.44732 4.35355 2.35355C4.44732 2.25979 4.5 2.13261 4.5 2C4.5 1.86739 4.44732 1.74021 4.35355 1.64645C4.25979 1.55268 4.13261 1.5 4 1.5ZM6.93934 4.93934C7.22064 4.65804 7.60218 4.5 8 4.5C8.39783 4.5 8.77936 4.65804 9.06066 4.93934C9.22036 5.09904 9.34033 5.29105 9.41422 5.5H11.5C11.7761 5.5 12 5.72386 12 6C12 6.27614 11.7761 6.5 11.5 6.5H9.41422C9.34033 6.70895 9.22036 6.90096 9.06066 7.06066C8.77936 7.34196 8.39783 7.5 8 7.5C7.60218 7.5 7.22064 7.34196 6.93934 7.06066C6.77964 6.90096 6.65967 6.70895 6.58579 6.5H0.5C0.223858 6.5 0 6.27614 0 6C0 5.72386 0.223858 5.5 0.5 5.5H6.58579C6.65967 5.29105 6.77964 5.09904 6.93934 4.93934ZM8 5.5C7.86739 5.5 7.74021 5.55268 7.64645 5.64645C7.55268 5.74021 7.5 5.86739 7.5 6C7.5 6.13261 7.55268 6.25979 7.64645 6.35355C7.74021 6.44732 7.86739 6.5 8 6.5C8.13261 6.5 8.25978 6.44732 8.35355 6.35355C8.44732 6.25979 8.5 6.13261 8.5 6C8.5 5.86739 8.44732 5.74022 8.35355 5.64645C8.25978 5.55268 8.13261 5.5 8 5.5ZM2.93934 8.93934C3.22064 8.65804 3.60217 8.5 4 8.5C4.39783 8.5 4.77936 8.65804 5.06066 8.93934C5.22036 9.09904 5.34033 9.29105 5.41421 9.5H11.5C11.7761 9.5 12 9.72386 12 10C12 10.2761 11.7761 10.5 11.5 10.5H5.41421C5.34033 10.709 5.22036 10.901 5.06066 11.0607C4.77936 11.342 4.39783 11.5 4 11.5C3.60217 11.5 3.22064 11.342 2.93934 11.0607C2.77964 10.901 2.65967 10.709 2.58579 10.5H0.5C0.223858 10.5 0 10.2761 0 10C0 9.72386 0.223858 9.5 0.5 9.5H2.58579C2.65967 9.29105 2.77964 9.09904 2.93934 8.93934ZM4 9.5C3.86739 9.5 3.74022 9.55268 3.64645 9.64645C3.55268 9.74022 3.5 9.86739 3.5 10C3.5 10.1326 3.55268 10.2598 3.64645 10.3536C3.74022 10.4473 3.86739 10.5 4 10.5C4.13261 10.5 4.25979 10.4473 4.35355 10.3536C4.44732 10.2598 4.5 10.1326 4.5 10C4.5 9.86739 4.44732 9.74022 4.35355 9.64645C4.25979 9.55268 4.13261 9.5 4 9.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/done-icon.tsx b/packages/propel/src/icons/done-icon.tsx
index 218afd5cdc..a00f604655 100644
--- a/packages/propel/src/icons/done-icon.tsx
+++ b/packages/propel/src/icons/done-icon.tsx
@@ -2,21 +2,23 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const DoneState: React.FC<ISvgIcons> = ({ width = "10", height = "11", className }) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 10 11"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <circle cx="5" cy="5.5" r="4.4" stroke="#15A34A" strokeWidth="1.2" />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M2.5 5.59375L3.82582 6.91957L4.26777 6.47763L2.94194 5.15181L2.5 5.59375ZM4.26777 7.36152L7.36136 4.26793L6.91942 3.82599L3.82583 6.91958L4.26777 7.36152Z"
-      fill="#15A34A"
-    />
-  </svg>
-);
+export function DoneState({ width = "10", height = "11", className }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 10 11"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <circle cx="5" cy="5.5" r="4.4" stroke="#15A34A" strokeWidth="1.2" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.5 5.59375L3.82582 6.91957L4.26777 6.47763L2.94194 5.15181L2.5 5.59375ZM4.26777 7.36152L7.36136 4.26793L6.91942 3.82599L3.82583 6.91958L4.26777 7.36152Z"
+        fill="#15A34A"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/dropdown-icon.tsx b/packages/propel/src/icons/dropdown-icon.tsx
index 2fb897dbcc..dc9079abf6 100644
--- a/packages/propel/src/icons/dropdown-icon.tsx
+++ b/packages/propel/src/icons/dropdown-icon.tsx
@@ -2,14 +2,16 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const DropdownIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    viewBox="0 0 7 5"
-    className={`${className} stroke-2`}
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <path d="M2.77267 4.0211L0.457719 1.78653C0.162864 1.50191 0.0961218 1.17467 0.257492 0.8048C0.418861 0.434934 0.70939 0.25 1.12908 0.25H5.72716C6.14685 0.25 6.43738 0.434934 6.59875 0.8048C6.76012 1.17467 6.69338 1.50191 6.39855 1.78653L4.08357 4.0211C3.98662 4.1147 3.88435 4.18329 3.77676 4.22687C3.66918 4.27046 3.55297 4.29225 3.42813 4.29225C3.30328 4.29225 3.18706 4.27046 3.07948 4.22687C2.97191 4.18329 2.86964 4.1147 2.77267 4.0211Z" />
-  </svg>
-);
+export function DropdownIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 7 5"
+      className={`${className} stroke-2`}
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path d="M2.77267 4.0211L0.457719 1.78653C0.162864 1.50191 0.0961218 1.17467 0.257492 0.8048C0.418861 0.434934 0.70939 0.25 1.12908 0.25H5.72716C6.14685 0.25 6.43738 0.434934 6.59875 0.8048C6.76012 1.17467 6.69338 1.50191 6.39855 1.78653L4.08357 4.0211C3.98662 4.1147 3.88435 4.18329 3.77676 4.22687C3.66918 4.27046 3.55297 4.29225 3.42813 4.29225C3.30328 4.29225 3.18706 4.27046 3.07948 4.22687C2.97191 4.18329 2.86964 4.1147 2.77267 4.0211Z" />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/favorite-folder-icon.tsx b/packages/propel/src/icons/favorite-folder-icon.tsx
index 5b8aa39e66..bf2733a98c 100644
--- a/packages/propel/src/icons/favorite-folder-icon.tsx
+++ b/packages/propel/src/icons/favorite-folder-icon.tsx
@@ -2,29 +2,31 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const FavoriteFolderIcon: React.FC<ISvgIcons> = ({ className = "text-current", color = "#a3a3a3", ...rest }) => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    stroke={color}
-    className={`${className} stroke-2`}
-    {...rest}
-  >
-    <path
-      d="M7.33325 13.3334H2.66659C2.31296 13.3334 1.97382 13.1929 1.72378 12.9429C1.47373 12.6928 1.33325 12.3537 1.33325 12.0001V3.3334C1.33325 2.97978 1.47373 2.64064 1.72378 2.39059C1.97382 2.14054 2.31296 2.00006 2.66659 2.00006H5.26659C5.48958 1.99788 5.70955 2.05166 5.90638 2.15648C6.10322 2.2613 6.27061 2.41381 6.39325 2.60006L6.93325 3.40006C7.05466 3.58442 7.21994 3.73574 7.41425 3.84047C7.60857 3.94519 7.82585 4.00003 8.04658 4.00006H13.3333C13.6869 4.00006 14.026 4.14054 14.2761 4.39059C14.5261 4.64064 14.6666 4.97978 14.6666 5.3334V6.3334"
-      strokeWidth="1.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M12.1373 8L13.0038 9.75535L14.9414 10.0386L13.5394 11.4041L13.8702 13.3333L12.1373 12.422L10.4044 13.3333L10.7353 11.4041L9.33325 10.0386L11.2709 9.75535L12.1373 8Z"
-      strokeWidth="1.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
+export function FavoriteFolderIcon({ className = "text-current", color = "#a3a3a3", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
       fill="none"
-    />
-  </svg>
-);
+      xmlns="http://www.w3.org/2000/svg"
+      stroke={color}
+      className={`${className} stroke-2`}
+      {...rest}
+    >
+      <path
+        d="M7.33325 13.3334H2.66659C2.31296 13.3334 1.97382 13.1929 1.72378 12.9429C1.47373 12.6928 1.33325 12.3537 1.33325 12.0001V3.3334C1.33325 2.97978 1.47373 2.64064 1.72378 2.39059C1.97382 2.14054 2.31296 2.00006 2.66659 2.00006H5.26659C5.48958 1.99788 5.70955 2.05166 5.90638 2.15648C6.10322 2.2613 6.27061 2.41381 6.39325 2.60006L6.93325 3.40006C7.05466 3.58442 7.21994 3.73574 7.41425 3.84047C7.60857 3.94519 7.82585 4.00003 8.04658 4.00006H13.3333C13.6869 4.00006 14.026 4.14054 14.2761 4.39059C14.5261 4.64064 14.6666 4.97978 14.6666 5.3334V6.3334"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12.1373 8L13.0038 9.75535L14.9414 10.0386L13.5394 11.4041L13.8702 13.3333L12.1373 12.422L10.4044 13.3333L10.7353 11.4041L9.33325 10.0386L11.2709 9.75535L12.1373 8Z"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/full-screen-panel-icon.tsx b/packages/propel/src/icons/full-screen-panel-icon.tsx
index c0be881733..2bcc76b4af 100644
--- a/packages/propel/src/icons/full-screen-panel-icon.tsx
+++ b/packages/propel/src/icons/full-screen-panel-icon.tsx
@@ -2,25 +2,27 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const FullScreenPanelIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} stroke-2`}
-    stroke="currentColor"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <path
-      d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M16.6667 6.00001H7.20015C6.50001 5.99999 6.00005 6.00003 6.00017 7.33335C6.00027 8.4402 6.00021 13.8198 6.00018 15.8823L6.00017 16.6667C6.00017 18 6.00017 18 7.20015 18H16.6667C18 18 18 18 18 16.6667V7.33335C18 6.00001 18 6.00001 16.6667 6.00001H16.6667Z"
-      fill="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+export function FullScreenPanelIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.6667 6.00001H7.20015C6.50001 5.99999 6.00005 6.00003 6.00017 7.33335C6.00027 8.4402 6.00021 13.8198 6.00018 15.8823L6.00017 16.6667C6.00017 18 6.00017 18 7.20015 18H16.6667C18 18 18 18 18 16.6667V7.33335C18 6.00001 18 6.00001 16.6667 6.00001H16.6667Z"
+        fill="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/github-icon.tsx b/packages/propel/src/icons/github-icon.tsx
index f8f6f318fd..3307ccfc6e 100644
--- a/packages/propel/src/icons/github-icon.tsx
+++ b/packages/propel/src/icons/github-icon.tsx
@@ -2,27 +2,29 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const GithubIcon: React.FC<ISvgIcons> = ({ width = "24", height = "24", className, color }) => (
-  <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_282_232)">
-      <path
-        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))"}
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_282_232">
-        <rect width={width} height={height} />
-      </clipPath>
-    </defs>
-  </svg>
-);
+export function GithubIcon({ width = "24", height = "24", className, color }: 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_282_232)">
+        <path
+          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 : "var(--text-color-secondary)"}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_282_232">
+          <rect width={width} height={height} />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/gitlab-icon.tsx b/packages/propel/src/icons/gitlab-icon.tsx
index 1ffef236b6..41fa4aecf1 100644
--- a/packages/propel/src/icons/gitlab-icon.tsx
+++ b/packages/propel/src/icons/gitlab-icon.tsx
@@ -2,27 +2,29 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const GitlabIcon: React.FC<ISvgIcons> = ({ width = "24", height = "24", className, color }) => (
-  <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_282_232)">
-      <path
-        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))"}
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_282_232">
-        <rect width={width} height={height} />
-      </clipPath>
-    </defs>
-  </svg>
-);
+export function GitlabIcon({ width = "24", height = "24", className, color }: 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_282_232)">
+        <path
+          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 : "var(--text-color-secondary)"}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_282_232">
+          <rect width={width} height={height} />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/icon-wrapper.tsx b/packages/propel/src/icons/icon-wrapper.tsx
index c8ede6f32c..fbfedbafb4 100644
--- a/packages/propel/src/icons/icon-wrapper.tsx
+++ b/packages/propel/src/icons/icon-wrapper.tsx
@@ -8,7 +8,7 @@ interface IIconWrapper extends ISvgIcons {
   viewBox?: string;
 }
 
-export const IconWrapper: React.FC<IIconWrapper> = ({
+export function IconWrapper({
   width = "16",
   height = "16",
   className = "text-current",
@@ -16,27 +16,29 @@ export const IconWrapper: React.FC<IIconWrapper> = ({
   clipPathId,
   viewBox = "0 0 16 16",
   ...rest
-}) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox={viewBox}
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    {...rest}
-  >
-    {clipPathId ? (
-      <>
-        <g clipPath={`url(#${clipPathId})`}>{children}</g>
-        <defs>
-          <clipPath id={clipPathId}>
-            <rect width="16" height="16" fill="white" />
-          </clipPath>
-        </defs>
-      </>
-    ) : (
-      children
-    )}
-  </svg>
-);
+}: IIconWrapper) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox={viewBox}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...rest}
+    >
+      {clipPathId ? (
+        <>
+          <g clipPath={`url(#${clipPathId})`}>{children}</g>
+          <defs>
+            <clipPath id={clipPathId}>
+              <rect width="16" height="16" fill="white" />
+            </clipPath>
+          </defs>
+        </>
+      ) : (
+        children
+      )}
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/icon.tsx b/packages/propel/src/icons/icon.tsx
index a198163484..2b80d943dc 100644
--- a/packages/propel/src/icons/icon.tsx
+++ b/packages/propel/src/icons/icon.tsx
@@ -8,7 +8,7 @@ export interface IconProps extends Omit<ISvgIcons, "ref"> {
   name: IconName;
 }
 
-export const Icon: React.FC<IconProps> = ({ name, ...props }) => {
+export function Icon({ name, ...props }: IconProps) {
   const IconComponent = ICON_REGISTRY[name] || ICON_REGISTRY.default;
   return <IconComponent {...props} />;
-};
+}
diff --git a/packages/propel/src/icons/icons.stories.tsx b/packages/propel/src/icons/icons.stories.tsx
index 6e203504e7..1b72e12084 100644
--- a/packages/propel/src/icons/icons.stories.tsx
+++ b/packages/propel/src/icons/icons.stories.tsx
@@ -33,84 +33,84 @@ 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>
+        <h3 className="text-16 font-semibold text-primary">Sub-Brand Icons</h3>
         <div className="grid grid-cols-12 gap-6 w-full">
           {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 className="text-secondary">{item.icon}</div>
+              <p className="text-11 text-tertiary text-center">{item.title}</p>
             </div>
           ))}
         </div>
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-custom-text-100">Workspace Icons</h3>
+        <h3 className="text-16 font-semibold text-primary">Workspace Icons</h3>
         <div className="grid grid-cols-12 gap-6 w-full">
           {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 className="text-secondary">{item.icon}</div>
+              <p className="text-11 text-tertiary text-center">{item.title}</p>
             </div>
           ))}
         </div>
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-custom-text-100">Project Icons</h3>
+        <h3 className="text-16 font-semibold text-primary">Project Icons</h3>
         <div className="grid grid-cols-12 gap-6 w-full">
           {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 className="text-secondary">{item.icon}</div>
+              <p className="text-11 text-tertiary text-center">{item.title}</p>
             </div>
           ))}
         </div>
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-custom-text-100">Layout Icons</h3>
+        <h3 className="text-16 font-semibold text-primary">Layout Icons</h3>
         <div className="grid grid-cols-12 gap-6 w-full">
           {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 className="text-secondary">{item.icon}</div>
+              <p className="text-11 text-tertiary text-center">{item.title}</p>
             </div>
           ))}
         </div>
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-custom-text-100">Property Icons</h3>
+        <h3 className="text-16 font-semibold text-primary">Property Icons</h3>
         <div className="grid grid-cols-12 gap-6 w-full">
           {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 className="text-secondary">{item.icon}</div>
+              <p className="text-11 text-tertiary text-center">{item.title}</p>
             </div>
           ))}
         </div>
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-custom-text-100">Actions Icons</h3>
+        <h3 className="text-16 font-semibold text-primary">Actions Icons</h3>
         <div className="grid grid-cols-12 gap-6 w-full">
           {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 className="text-secondary">{item.icon}</div>
+              <p className="text-11 text-tertiary text-center">{item.title}</p>
             </div>
           ))}
         </div>
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-semibold text-custom-text-100">Arrows Icons</h3>
+        <h3 className="text-16 font-semibold text-primary">Arrows Icons</h3>
         <div className="grid grid-cols-12 gap-6 w-full">
           {ArrowsIconsMap.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 className="text-secondary">{item.icon}</div>
+              <p className="text-11 text-tertiary text-center">{item.title}</p>
             </div>
           ))}
         </div>
@@ -123,48 +123,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="px-1 py-0.5 bg-layer-1 rounded-sm">Icon</code> component with{" "}
+          <code className="px-1 py-0.5 bg-layer-1 rounded-sm">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>
+            <Icon name="workspace.home" className="text-secondary" />
+            <p className="text-11 text-tertiary text-center">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>
+            <Icon name="project.cycle" className="text-secondary" />
+            <p className="text-11 text-tertiary text-center">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>
+            <Icon name="layout.board" className="text-secondary" />
+            <p className="text-11 text-tertiary text-center">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>
+            <Icon name="property.priority" className="text-secondary" />
+            <p className="text-11 text-tertiary text-center">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>
+            <HomeIcon className="text-secondary" />
+            <p className="text-11 text-tertiary text-center">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>
+            <CycleIcon className="text-secondary" />
+            <p className="text-11 text-tertiary text-center">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>
+            <ProjectIcon className="text-secondary" />
+            <p className="text-11 text-tertiary text-center">ProjectIcon</p>
           </div>
         </div>
       </div>
@@ -176,32 +176,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 d0f66f4cc4..574b0a5531 100644
--- a/packages/propel/src/icons/in-progress-icon.tsx
+++ b/packages/propel/src/icons/in-progress-icon.tsx
@@ -2,16 +2,18 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const InProgressState: React.FC<ISvgIcons> = ({ width = "10", height = "11", className, color }) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 12 13"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <circle cx="6" cy="6.5" r="4.4" stroke={color ?? "#EA8900"} strokeWidth="1.2" />
-    <circle cx="6" cy="6.5" r="2.4" stroke={color ?? "#EA8900"} strokeWidth="1.2" strokeDasharray="4 4" />
-  </svg>
-);
+export function InProgressState({ width = "10", height = "11", className, color }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 12 13"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <circle cx="6" cy="6.5" r="4.4" stroke={color ?? "#EA8900"} strokeWidth="1.2" />
+      <circle cx="6" cy="6.5" r="2.4" stroke={color ?? "#EA8900"} strokeWidth="1.2" strokeDasharray="4 4" />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/index.ts b/packages/propel/src/icons/index.ts
index d663c2a39e..01a0aa791b 100644
--- a/packages/propel/src/icons/index.ts
+++ b/packages/propel/src/icons/index.ts
@@ -1,11 +1,10 @@
 export type { ISvgIcons } from "./type";
 export type { IconName } from "./registry";
-export type { IconProps } from "./icon";
 export { ICON_REGISTRY } from "./registry";
 export * from "./actions";
-export * from "./arrows";
 export * from "./activity-icon";
 export * from "./ai-icon";
+export * from "./arrows";
 export * from "./at-risk-icon";
 export * from "./attachments";
 export * from "./bar-icon";
@@ -29,11 +28,11 @@ export * from "./full-screen-panel-icon";
 export * from "./github-icon";
 export * from "./gitlab-icon";
 export * from "./helpers";
-export * from "./icon";
 export * from "./icon-wrapper";
+export * from "./icon";
+export * from "./in-progress-icon";
 export * from "./info-fill-icon";
 export * from "./info-icon";
-export * from "./in-progress-icon";
 export * from "./intake";
 export * from "./layer-stack";
 export * from "./layers-icon";
@@ -54,6 +53,7 @@ export * from "./properties";
 export * from "./related-icon";
 export * from "./sans-serif-icon";
 export * from "./serif-icon";
+export * from "./set-as-default-icon";
 export * from "./side-panel-icon";
 export * from "./state";
 export * from "./sticky-note-icon";
@@ -64,5 +64,5 @@ export * from "./transfer-icon";
 export * from "./tree-map-icon";
 export * from "./updates-icon";
 export * from "./user-activity-icon";
-export * from "./workspace";
 export * from "./workspace-icon";
+export * from "./workspace";
diff --git a/packages/propel/src/icons/info-fill-icon.tsx b/packages/propel/src/icons/info-fill-icon.tsx
index 65beaa5206..b5428910df 100644
--- a/packages/propel/src/icons/info-fill-icon.tsx
+++ b/packages/propel/src/icons/info-fill-icon.tsx
@@ -2,13 +2,15 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const InfoFillIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg viewBox="0 0 24 24" className={`${className}`} xmlns="http://www.w3.org/2000/svg" {...rest}>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M2.25 12C2.25 6.615 6.615 2.25 12 2.25C17.385 2.25 21.75 6.615 21.75 12C21.75 17.385 17.385 21.75 12 21.75C6.615 21.75 2.25 17.385 2.25 12ZM10.956 10.558C12.102 9.985 13.393 11.021 13.082 12.264L12.373 15.1L12.415 15.08C12.5912 15.0025 12.7905 14.9958 12.9715 15.0612C13.1526 15.1265 13.3016 15.259 13.3877 15.4312C13.4737 15.6033 13.4903 15.802 13.434 15.9861C13.3777 16.1702 13.2527 16.3255 13.085 16.42L13.045 16.442C11.898 17.015 10.607 15.979 10.918 14.736L11.628 11.9L11.586 11.92C11.4975 11.9692 11.4 11.9999 11.2994 12.0104C11.1987 12.0209 11.097 12.0109 11.0003 11.981C10.9036 11.9511 10.8139 11.902 10.7367 11.8366C10.6595 11.7711 10.5964 11.6907 10.551 11.6002C10.5057 11.5098 10.4792 11.411 10.4731 11.31C10.4669 11.209 10.4813 11.1078 10.5153 11.0124C10.5493 10.9171 10.6022 10.8297 10.6709 10.7553C10.7396 10.681 10.8226 10.6214 10.915 10.58L10.956 10.558ZM12 9C12.1989 9 12.3897 8.92098 12.5303 8.78033C12.671 8.63968 12.75 8.44891 12.75 8.25C12.75 8.05109 12.671 7.86032 12.5303 7.71967C12.3897 7.57902 12.1989 7.5 12 7.5C11.8011 7.5 11.6103 7.57902 11.4697 7.71967C11.329 7.86032 11.25 8.05109 11.25 8.25C11.25 8.44891 11.329 8.63968 11.4697 8.78033C11.6103 8.92098 11.8011 9 12 9Z"
-      fill="currentColor"
-    />
-  </svg>
-);
+export function InfoFillIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg viewBox="0 0 24 24" className={`${className}`} xmlns="http://www.w3.org/2000/svg" {...rest}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.25 12C2.25 6.615 6.615 2.25 12 2.25C17.385 2.25 21.75 6.615 21.75 12C21.75 17.385 17.385 21.75 12 21.75C6.615 21.75 2.25 17.385 2.25 12ZM10.956 10.558C12.102 9.985 13.393 11.021 13.082 12.264L12.373 15.1L12.415 15.08C12.5912 15.0025 12.7905 14.9958 12.9715 15.0612C13.1526 15.1265 13.3016 15.259 13.3877 15.4312C13.4737 15.6033 13.4903 15.802 13.434 15.9861C13.3777 16.1702 13.2527 16.3255 13.085 16.42L13.045 16.442C11.898 17.015 10.607 15.979 10.918 14.736L11.628 11.9L11.586 11.92C11.4975 11.9692 11.4 11.9999 11.2994 12.0104C11.1987 12.0209 11.097 12.0109 11.0003 11.981C10.9036 11.9511 10.8139 11.902 10.7367 11.8366C10.6595 11.7711 10.5964 11.6907 10.551 11.6002C10.5057 11.5098 10.4792 11.411 10.4731 11.31C10.4669 11.209 10.4813 11.1078 10.5153 11.0124C10.5493 10.9171 10.6022 10.8297 10.6709 10.7553C10.7396 10.681 10.8226 10.6214 10.915 10.58L10.956 10.558ZM12 9C12.1989 9 12.3897 8.92098 12.5303 8.78033C12.671 8.63968 12.75 8.44891 12.75 8.25C12.75 8.05109 12.671 7.86032 12.5303 7.71967C12.3897 7.57902 12.1989 7.5 12 7.5C11.8011 7.5 11.6103 7.57902 11.4697 7.71967C11.329 7.86032 11.25 8.05109 11.25 8.25C11.25 8.44891 11.329 8.63968 11.4697 8.78033C11.6103 8.92098 11.8011 9 12 9Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/info-icon.tsx b/packages/propel/src/icons/info-icon.tsx
index 8173595d5b..3e2f3609e5 100644
--- a/packages/propel/src/icons/info-icon.tsx
+++ b/packages/propel/src/icons/info-icon.tsx
@@ -2,20 +2,22 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const InfoIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <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>
-);
+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 e980f4d874..9d45f01e23 100644
--- a/packages/propel/src/icons/intake.tsx
+++ b/packages/propel/src/icons/intake.tsx
@@ -2,21 +2,23 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const Intake: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    viewBox="0 0 16 16"
-    className={`${className}`}
-    stroke="currentColor"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    strokeWidth="1.25"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    {...rest}
-  >
-    <path d="M12.1599 3.59961V9.60688L8.04358 12.0796V6.04325L12.1599 3.59961Z" />
-    <path d="M5.98547 10.8657V4.82938L10.1018 2.38574" />
-    <path d="M3.89087 9.60695V3.57059L8.00723 1.12695" />
-    <path d="M1.06909 8.77051V13.3887C1.06909 14.1814 1.71636 14.8287 2.50909 14.8287H13.4909C14.2836 14.8287 14.9309 14.1814 14.9309 13.3887V8.77051" />
-  </svg>
-);
+export function Intake({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      className={`${className}`}
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...rest}
+    >
+      <path d="M12.1599 3.59961V9.60688L8.04358 12.0796V6.04325L12.1599 3.59961Z" />
+      <path d="M5.98547 10.8657V4.82938L10.1018 2.38574" />
+      <path d="M3.89087 9.60695V3.57059L8.00723 1.12695" />
+      <path d="M1.06909 8.77051V13.3887C1.06909 14.1814 1.71636 14.8287 2.50909 14.8287H13.4909C14.2836 14.8287 14.9309 14.1814 14.9309 13.3887V8.77051" />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/layer-stack.tsx b/packages/propel/src/icons/layer-stack.tsx
index f57c236219..109da58ad7 100644
--- a/packages/propel/src/icons/layer-stack.tsx
+++ b/packages/propel/src/icons/layer-stack.tsx
@@ -2,29 +2,31 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const LayerStackIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} stroke-2`}
-    stroke="currentColor"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <path
-      d="M19 22H4C3.46957 22 2.96086 21.8119 2.58579 21.477C2.21071 21.1421 2 20.6879 2 20.2143V11.2857C2 10.8121 2.21071 10.3579 2.58579 10.023C2.96086 9.68814 3.46957 9.5 4 9.5H20C20.5304 9.5 21.0391 9.68814 21.4142 10.023C21.7893 10.3579 22 10.8121 22 11.2857V20.2143C22 20.6879 21.7893 21.1421 21.4142 21.477C21.0391 21.8119 20.5304 22 20 22H19Z"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M4.5 9.5V6.82143C4.5 6.53727 4.65804 6.26475 4.93934 6.06381C5.22064 5.86288 5.60218 5.75 6 5.75H18C18.3978 5.75 18.7794 5.86288 19.0607 6.06381C19.342 6.26475 19.5 6.53727 19.5 6.82143V9.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M7 4.5V2.71429C7 2.52485 7.10536 2.34316 7.29289 2.20921C7.48043 2.07525 7.73478 2 8 2H16C16.2652 2 16.5196 2.07525 16.7071 2.20921C16.8946 2.34316 17 2.52485 17 2.71429V4.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+export function LayerStackIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M19 22H4C3.46957 22 2.96086 21.8119 2.58579 21.477C2.21071 21.1421 2 20.6879 2 20.2143V11.2857C2 10.8121 2.21071 10.3579 2.58579 10.023C2.96086 9.68814 3.46957 9.5 4 9.5H20C20.5304 9.5 21.0391 9.68814 21.4142 10.023C21.7893 10.3579 22 10.8121 22 11.2857V20.2143C22 20.6879 21.7893 21.1421 21.4142 21.477C21.0391 21.8119 20.5304 22 20 22H19Z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.5 9.5V6.82143C4.5 6.53727 4.65804 6.26475 4.93934 6.06381C5.22064 5.86288 5.60218 5.75 6 5.75H18C18.3978 5.75 18.7794 5.86288 19.0607 6.06381C19.342 6.26475 19.5 6.53727 19.5 6.82143V9.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7 4.5V2.71429C7 2.52485 7.10536 2.34316 7.29289 2.20921C7.48043 2.07525 7.73478 2 8 2H16C16.2652 2 16.5196 2.07525 16.7071 2.20921C16.8946 2.34316 17 2.52485 17 2.71429V4.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/layers-icon.tsx b/packages/propel/src/icons/layers-icon.tsx
index 6591ceaf7e..c571df4d41 100644
--- a/packages/propel/src/icons/layers-icon.tsx
+++ b/packages/propel/src/icons/layers-icon.tsx
@@ -2,36 +2,38 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const LayersIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} stroke-2`}
-    stroke="currentColor"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <g clipPath="url(#clip0_7258_81938)">
-      <path
-        d="M16.5953 6.69606L16.6072 5.17376L6.85812 8.92381L6.85812 19.4238L9.00319 18.6961"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M12.0953 3.69606L12.1072 2.17376L2.35812 5.92381L2.35812 16.4238L4.50319 15.6961"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M21.7438 17.9461L21.7511 7.44434L12.0021 11.1944L12.0021 21.6944L21.7438 17.9461Z"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_7258_81938">
-        <rect width="24" height="24" fill="white" transform="translate(24) rotate(90)" />
-      </clipPath>
-    </defs>
-  </svg>
-);
+export function LayersIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <g clipPath="url(#clip0_7258_81938)">
+        <path
+          d="M16.5953 6.69606L16.6072 5.17376L6.85812 8.92381L6.85812 19.4238L9.00319 18.6961"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12.0953 3.69606L12.1072 2.17376L2.35812 5.92381L2.35812 16.4238L4.50319 15.6961"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M21.7438 17.9461L21.7511 7.44434L12.0021 11.1944L12.0021 21.6944L21.7438 17.9461Z"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_7258_81938">
+          <rect width="24" height="24" fill="white" transform="translate(24) rotate(90)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/layouts/board-icon.tsx b/packages/propel/src/icons/layouts/board-icon.tsx
index 8d6f32729f..42987f5417 100644
--- a/packages/propel/src/icons/layouts/board-icon.tsx
+++ b/packages/propel/src/icons/layouts/board-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const BoardLayoutIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M13.375 5.19922C13.375 4.62897 13.3743 4.23865 13.3496 3.93652C13.3255 3.64197 13.2821 3.48609 13.2256 3.375C13.0938 3.11627 12.8827 2.90526 12.624 2.77344C12.5129 2.7169 12.357 2.67348 12.0625 2.64941C11.7604 2.62474 11.3701 2.62402 10.7998 2.62402H10.625V13.374H10.7998C11.3701 13.374 11.7604 13.3733 12.0625 13.3486C12.357 13.3246 12.5129 13.2811 12.624 13.2246C12.8827 13.0928 13.0938 12.8818 13.2256 12.623C13.2821 12.5119 13.3255 12.356 13.3496 12.0615C13.3743 11.7594 13.375 11.3691 13.375 10.7988V5.19922ZM6.625 13.374H9.375V2.62402H6.625V13.374ZM2.625 10.7988C2.625 11.3691 2.62572 11.7594 2.65039 12.0615C2.67445 12.356 2.71788 12.5119 2.77441 12.623C2.90623 12.8818 3.11725 13.0928 3.37598 13.2246C3.48707 13.2811 3.64295 13.3246 3.9375 13.3486C4.23962 13.3733 4.62994 13.374 5.2002 13.374H5.375V2.62402H5.2002C4.62994 2.62402 4.23962 2.62474 3.9375 2.64941C3.64296 2.67348 3.48707 2.71691 3.37598 2.77344C3.11725 2.90526 2.90624 3.11628 2.77441 3.375C2.71788 3.48609 2.67446 3.64198 2.65039 3.93652C2.62572 4.23865 2.625 4.62897 2.625 5.19922V10.7988ZM14.625 10.7988C14.625 11.3484 14.6255 11.7983 14.5957 12.1631C14.5653 12.5351 14.5001 12.8738 14.3389 13.1904C14.0872 13.6844 13.6854 14.0862 13.1914 14.3379C12.8748 14.4992 12.5361 14.5643 12.1641 14.5947C11.7993 14.6245 11.3493 14.624 10.7998 14.624H5.2002C4.65067 14.624 4.20072 14.6245 3.83594 14.5947C3.46388 14.5643 3.12523 14.4992 2.80859 14.3379C2.31467 14.0862 1.91281 13.6844 1.66113 13.1904C1.49987 12.8738 1.4347 12.5352 1.4043 12.1631C1.37452 11.7983 1.375 11.3484 1.375 10.7988V5.19922C1.375 4.64969 1.37452 4.19974 1.4043 3.83496C1.4347 3.4629 1.49985 3.12425 1.66113 2.80762C1.9128 2.31369 2.31466 1.91182 2.80859 1.66016C3.12523 1.49888 3.46388 1.43372 3.83594 1.40332C4.20072 1.37355 4.65067 1.37402 5.2002 1.37402H10.7998C11.3493 1.37402 11.7993 1.37355 12.1641 1.40332C12.5361 1.43372 12.8748 1.49889 13.1914 1.66016C13.6854 1.91183 14.0872 2.31369 14.3389 2.80762C14.5002 3.12425 14.5653 3.46291 14.5957 3.83496C14.6255 4.19974 14.625 4.6497 14.625 5.19922V10.7988Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function BoardLayoutIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 5.19922C13.375 4.62897 13.3743 4.23865 13.3496 3.93652C13.3255 3.64197 13.2821 3.48609 13.2256 3.375C13.0938 3.11627 12.8827 2.90526 12.624 2.77344C12.5129 2.7169 12.357 2.67348 12.0625 2.64941C11.7604 2.62474 11.3701 2.62402 10.7998 2.62402H10.625V13.374H10.7998C11.3701 13.374 11.7604 13.3733 12.0625 13.3486C12.357 13.3246 12.5129 13.2811 12.624 13.2246C12.8827 13.0928 13.0938 12.8818 13.2256 12.623C13.2821 12.5119 13.3255 12.356 13.3496 12.0615C13.3743 11.7594 13.375 11.3691 13.375 10.7988V5.19922ZM6.625 13.374H9.375V2.62402H6.625V13.374ZM2.625 10.7988C2.625 11.3691 2.62572 11.7594 2.65039 12.0615C2.67445 12.356 2.71788 12.5119 2.77441 12.623C2.90623 12.8818 3.11725 13.0928 3.37598 13.2246C3.48707 13.2811 3.64295 13.3246 3.9375 13.3486C4.23962 13.3733 4.62994 13.374 5.2002 13.374H5.375V2.62402H5.2002C4.62994 2.62402 4.23962 2.62474 3.9375 2.64941C3.64296 2.67348 3.48707 2.71691 3.37598 2.77344C3.11725 2.90526 2.90624 3.11628 2.77441 3.375C2.71788 3.48609 2.67446 3.64198 2.65039 3.93652C2.62572 4.23865 2.625 4.62897 2.625 5.19922V10.7988ZM14.625 10.7988C14.625 11.3484 14.6255 11.7983 14.5957 12.1631C14.5653 12.5351 14.5001 12.8738 14.3389 13.1904C14.0872 13.6844 13.6854 14.0862 13.1914 14.3379C12.8748 14.4992 12.5361 14.5643 12.1641 14.5947C11.7993 14.6245 11.3493 14.624 10.7998 14.624H5.2002C4.65067 14.624 4.20072 14.6245 3.83594 14.5947C3.46388 14.5643 3.12523 14.4992 2.80859 14.3379C2.31467 14.0862 1.91281 13.6844 1.66113 13.1904C1.49987 12.8738 1.4347 12.5352 1.4043 12.1631C1.37452 11.7983 1.375 11.3484 1.375 10.7988V5.19922C1.375 4.64969 1.37452 4.19974 1.4043 3.83496C1.4347 3.4629 1.49985 3.12425 1.66113 2.80762C1.9128 2.31369 2.31466 1.91182 2.80859 1.66016C3.12523 1.49888 3.46388 1.43372 3.83594 1.40332C4.20072 1.37355 4.65067 1.37402 5.2002 1.37402H10.7998C11.3493 1.37402 11.7993 1.37355 12.1641 1.40332C12.5361 1.43372 12.8748 1.49889 13.1914 1.66016C13.6854 1.91183 14.0872 2.31369 14.3389 2.80762C14.5002 3.12425 14.5653 3.46291 14.5957 3.83496C14.6255 4.19974 14.625 4.6497 14.625 5.19922V10.7988Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/layouts/calendar-icon.tsx b/packages/propel/src/icons/layouts/calendar-icon.tsx
index e8a69f1c99..5d36401a56 100644
--- a/packages/propel/src/icons/layouts/calendar-icon.tsx
+++ b/packages/propel/src/icons/layouts/calendar-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const CalendarLayoutIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M13.375 7.29102H2.625V11.4668C2.625 12.0369 2.62571 12.4274 2.65039 12.7295C2.67449 13.024 2.71781 13.1799 2.77441 13.291C2.90624 13.5497 3.1173 13.7598 3.37598 13.8916C3.48708 13.9482 3.64284 13.9925 3.9375 14.0166C4.23962 14.0413 4.62998 14.041 5.2002 14.041H10.7998C11.37 14.041 11.7604 14.0413 12.0625 14.0166C12.3571 13.9925 12.5129 13.9482 12.624 13.8916C12.8827 13.7598 13.0938 13.5497 13.2256 13.291C13.2822 13.1799 13.3255 13.024 13.3496 12.7295C13.3743 12.4274 13.375 12.0369 13.375 11.4668V7.29102ZM10.042 4V3.29102H5.95801V4C5.95783 4.34503 5.67808 4.625 5.33301 4.625C4.98809 4.62482 4.70818 4.34492 4.70801 4V3.29297C4.39072 3.29481 4.14362 3.29958 3.9375 3.31641C3.64272 3.34049 3.48709 3.38481 3.37598 3.44141C3.11725 3.57323 2.90624 3.78327 2.77441 4.04199C2.71783 4.15308 2.67448 4.30883 2.65039 4.60352C2.62571 4.90564 2.625 5.29592 2.625 5.86621V6.04102H13.375V5.86621C13.375 5.29591 13.3743 4.90564 13.3496 4.60352C13.3255 4.30883 13.2822 4.15308 13.2256 4.04199C13.0938 3.78327 12.8827 3.57322 12.624 3.44141C12.5129 3.38481 12.3572 3.34049 12.0625 3.31641C11.8564 3.29958 11.6093 3.29481 11.292 3.29297V4C11.2918 4.34492 11.0119 4.62482 10.667 4.625C10.3219 4.625 10.0422 4.34503 10.042 4ZM14.625 11.4668C14.625 12.0163 14.6255 12.4663 14.5957 12.8311C14.5653 13.2031 14.5002 13.5417 14.3389 13.8584C14.0872 14.3522 13.6853 14.7533 13.1914 15.0049C12.8747 15.1662 12.5362 15.2313 12.1641 15.2617C11.7993 15.2915 11.3494 15.291 10.7998 15.291H5.2002C4.65066 15.291 4.20073 15.2915 3.83594 15.2617C3.46383 15.2313 3.12526 15.1662 2.80859 15.0049C2.31476 14.7533 1.91282 14.3522 1.66113 13.8584C1.49981 13.5417 1.43471 13.2031 1.4043 12.8311C1.3745 12.4663 1.375 12.0163 1.375 11.4668V5.86621C1.375 5.31658 1.3745 4.86676 1.4043 4.50195C1.4347 4.1298 1.49976 3.79131 1.66113 3.47461C1.9128 2.98069 2.31467 2.57881 2.80859 2.32715C3.12519 2.16592 3.46393 2.10071 3.83594 2.07031C4.08533 2.04996 4.37446 2.04486 4.70801 2.04297V1.33301C4.70801 0.987938 4.98798 0.708184 5.33301 0.708008C5.67819 0.708008 5.95801 0.98783 5.95801 1.33301V2.04102H10.042V1.33301C10.042 0.98783 10.3218 0.708008 10.667 0.708008C11.012 0.708183 11.292 0.987938 11.292 1.33301V2.04297C11.6255 2.04486 11.9147 2.04996 12.1641 2.07031C12.5361 2.10071 12.8748 2.16593 13.1914 2.32715C13.6854 2.57882 14.0872 2.9807 14.3389 3.47461L14.3945 3.59473C14.5155 3.87672 14.5691 4.17636 14.5957 4.50195C14.6255 4.86677 14.625 5.31659 14.625 5.86621V11.4668Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function CalendarLayoutIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 7.29102H2.625V11.4668C2.625 12.0369 2.62571 12.4274 2.65039 12.7295C2.67449 13.024 2.71781 13.1799 2.77441 13.291C2.90624 13.5497 3.1173 13.7598 3.37598 13.8916C3.48708 13.9482 3.64284 13.9925 3.9375 14.0166C4.23962 14.0413 4.62998 14.041 5.2002 14.041H10.7998C11.37 14.041 11.7604 14.0413 12.0625 14.0166C12.3571 13.9925 12.5129 13.9482 12.624 13.8916C12.8827 13.7598 13.0938 13.5497 13.2256 13.291C13.2822 13.1799 13.3255 13.024 13.3496 12.7295C13.3743 12.4274 13.375 12.0369 13.375 11.4668V7.29102ZM10.042 4V3.29102H5.95801V4C5.95783 4.34503 5.67808 4.625 5.33301 4.625C4.98809 4.62482 4.70818 4.34492 4.70801 4V3.29297C4.39072 3.29481 4.14362 3.29958 3.9375 3.31641C3.64272 3.34049 3.48709 3.38481 3.37598 3.44141C3.11725 3.57323 2.90624 3.78327 2.77441 4.04199C2.71783 4.15308 2.67448 4.30883 2.65039 4.60352C2.62571 4.90564 2.625 5.29592 2.625 5.86621V6.04102H13.375V5.86621C13.375 5.29591 13.3743 4.90564 13.3496 4.60352C13.3255 4.30883 13.2822 4.15308 13.2256 4.04199C13.0938 3.78327 12.8827 3.57322 12.624 3.44141C12.5129 3.38481 12.3572 3.34049 12.0625 3.31641C11.8564 3.29958 11.6093 3.29481 11.292 3.29297V4C11.2918 4.34492 11.0119 4.62482 10.667 4.625C10.3219 4.625 10.0422 4.34503 10.042 4ZM14.625 11.4668C14.625 12.0163 14.6255 12.4663 14.5957 12.8311C14.5653 13.2031 14.5002 13.5417 14.3389 13.8584C14.0872 14.3522 13.6853 14.7533 13.1914 15.0049C12.8747 15.1662 12.5362 15.2313 12.1641 15.2617C11.7993 15.2915 11.3494 15.291 10.7998 15.291H5.2002C4.65066 15.291 4.20073 15.2915 3.83594 15.2617C3.46383 15.2313 3.12526 15.1662 2.80859 15.0049C2.31476 14.7533 1.91282 14.3522 1.66113 13.8584C1.49981 13.5417 1.43471 13.2031 1.4043 12.8311C1.3745 12.4663 1.375 12.0163 1.375 11.4668V5.86621C1.375 5.31658 1.3745 4.86676 1.4043 4.50195C1.4347 4.1298 1.49976 3.79131 1.66113 3.47461C1.9128 2.98069 2.31467 2.57881 2.80859 2.32715C3.12519 2.16592 3.46393 2.10071 3.83594 2.07031C4.08533 2.04996 4.37446 2.04486 4.70801 2.04297V1.33301C4.70801 0.987938 4.98798 0.708184 5.33301 0.708008C5.67819 0.708008 5.95801 0.98783 5.95801 1.33301V2.04102H10.042V1.33301C10.042 0.98783 10.3218 0.708008 10.667 0.708008C11.012 0.708183 11.292 0.987938 11.292 1.33301V2.04297C11.6255 2.04486 11.9147 2.04996 12.1641 2.07031C12.5361 2.10071 12.8748 2.16593 13.1914 2.32715C13.6854 2.57882 14.0872 2.9807 14.3389 3.47461L14.3945 3.59473C14.5155 3.87672 14.5691 4.17636 14.5957 4.50195C14.6255 4.86677 14.625 5.31659 14.625 5.86621V11.4668Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/layouts/card-icon.tsx b/packages/propel/src/icons/layouts/card-icon.tsx
index 6bb7a73b8a..480ba7dd84 100644
--- a/packages/propel/src/icons/layouts/card-icon.tsx
+++ b/packages/propel/src/icons/layouts/card-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const CardLayoutIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M13.375 11.4668C13.375 11.0832 13.375 10.8326 13.3594 10.6416C13.3519 10.5499 13.3409 10.4857 13.3301 10.4395L13.2979 10.3447C13.2469 10.2448 13.1729 10.1591 13.083 10.0938L12.9883 10.0352C12.9485 10.0149 12.8751 9.98864 12.6914 9.97363C12.5004 9.95804 12.2498 9.95801 11.8662 9.95801H4.13379C3.7502 9.95801 3.49956 9.95804 3.30859 9.97363C3.21688 9.98113 3.15268 9.99208 3.10645 10.0029L3.01172 10.0352C2.87851 10.103 2.77007 10.2114 2.70215 10.3447C2.68187 10.3845 2.65563 10.4579 2.64063 10.6416C2.62503 10.8326 2.625 11.0832 2.625 11.4668V11.8662C2.625 12.2499 2.62502 12.5004 2.64063 12.6914C2.65564 12.875 2.68188 12.9485 2.70215 12.9883C2.77008 13.1215 2.87859 13.23 3.01172 13.2979L3.10645 13.3301C3.15267 13.3409 3.21693 13.3509 3.30859 13.3584C3.49956 13.374 3.75016 13.375 4.13379 13.375H11.8662C12.2498 13.375 12.5004 13.374 12.6914 13.3584C12.8749 13.3434 12.9485 13.3181 12.9883 13.2979L13.083 13.2393C13.1729 13.1739 13.2469 13.0882 13.2979 12.9883C13.3181 12.9485 13.3444 12.875 13.3594 12.6914C13.375 12.5004 13.375 12.2499 13.375 11.8662V11.4668ZM13.375 4.13379C13.375 3.7502 13.375 3.49956 13.3594 3.30859C13.3519 3.21688 13.3409 3.15268 13.3301 3.10645L13.2979 3.01172C13.23 2.8785 13.1216 2.77007 12.9883 2.70215C12.9485 2.68187 12.8751 2.65563 12.6914 2.64063C12.5004 2.62503 12.2498 2.625 11.8662 2.625H4.13379C3.7502 2.625 3.49956 2.62503 3.30859 2.64063C3.12491 2.65563 3.05153 2.68186 3.01172 2.70215C2.87844 2.77005 2.77005 2.87844 2.70215 3.01172C2.68186 3.05153 2.65563 3.12491 2.64063 3.30859C2.62503 3.49956 2.625 3.7502 2.625 4.13379V4.5332C2.625 4.91688 2.62502 5.16742 2.64063 5.3584C2.65564 5.54194 2.68187 5.61548 2.70215 5.65527C2.77006 5.78843 2.87853 5.89698 3.01172 5.96484C3.05156 5.98512 3.12509 6.0104 3.30859 6.02539C3.49956 6.04099 3.75016 6.04199 4.13379 6.04199H11.8662C12.2498 6.04199 12.5004 6.04099 12.6914 6.02539C12.8749 6.0104 12.9485 5.98511 12.9883 5.96484C13.1215 5.89696 13.23 5.78839 13.2979 5.65527C13.3181 5.61548 13.3444 5.54194 13.3594 5.3584C13.375 5.16742 13.375 4.91689 13.375 4.5332V4.13379ZM14.625 11.8662C14.625 12.2293 14.6252 12.5393 14.6045 12.793C14.5832 13.054 14.5362 13.3103 14.4111 13.5557C14.2234 13.924 13.924 14.2235 13.5557 14.4111C13.3103 14.5362 13.0539 14.5832 12.793 14.6045C12.5393 14.6252 12.2291 14.625 11.8662 14.625H4.13379C3.77089 14.625 3.46066 14.6252 3.20703 14.6045C2.94605 14.5832 2.68973 14.5362 2.44434 14.4111C2.07591 14.2235 1.77661 13.9239 1.58887 13.5557C1.46382 13.3103 1.41683 13.054 1.39551 12.793C1.37478 12.5393 1.375 12.2293 1.375 11.8662V11.4668C1.375 11.1039 1.37481 10.7937 1.39551 10.54C1.41683 10.2791 1.46382 10.0227 1.58887 9.77734C1.77657 9.40901 2.07589 9.10961 2.44434 8.92188C2.68974 8.79683 2.94604 8.74984 3.20703 8.72852C3.46067 8.70781 3.77088 8.70801 4.13379 8.70801H11.8662C12.2291 8.70801 12.5393 8.70781 12.793 8.72852C13.054 8.74984 13.3103 8.79682 13.5557 8.92188C13.9241 9.10958 14.2234 9.40896 14.4111 9.77734C14.5362 10.0227 14.5832 10.2791 14.6045 10.54C14.6252 10.7937 14.625 11.1039 14.625 11.4668V11.8662ZM14.625 4.5332C14.625 4.89626 14.6252 5.20627 14.6045 5.45996C14.5832 5.72094 14.5362 5.97726 14.4111 6.22266C14.2234 6.59102 13.924 6.89046 13.5557 7.07812C13.3103 7.20316 13.0539 7.25016 12.793 7.27148C12.5393 7.29218 12.2291 7.29199 11.8662 7.29199H4.13379C3.77089 7.29199 3.46066 7.29218 3.20703 7.27148C2.94605 7.25016 2.68973 7.20316 2.44434 7.07812C2.07597 6.89044 1.77663 6.59098 1.58887 6.22266C1.46383 5.97726 1.41683 5.72094 1.39551 5.45996C1.37478 5.20627 1.375 4.89626 1.375 4.5332V4.13379C1.375 3.77088 1.37481 3.46067 1.39551 3.20703C1.41683 2.94604 1.46383 2.68974 1.58887 2.44434C1.7766 2.07594 2.07594 1.7766 2.44434 1.58887C2.68974 1.46383 2.94604 1.41683 3.20703 1.39551C3.46067 1.37481 3.77088 1.375 4.13379 1.375H11.8662C12.2291 1.375 12.5393 1.37481 12.793 1.39551C13.054 1.41683 13.3103 1.46382 13.5557 1.58887C13.924 1.77658 14.2234 2.0759 14.4111 2.44434C14.5362 2.68974 14.5832 2.94604 14.6045 3.20703C14.6252 3.46067 14.625 3.77088 14.625 4.13379V4.5332Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function CardLayoutIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 11.4668C13.375 11.0832 13.375 10.8326 13.3594 10.6416C13.3519 10.5499 13.3409 10.4857 13.3301 10.4395L13.2979 10.3447C13.2469 10.2448 13.1729 10.1591 13.083 10.0938L12.9883 10.0352C12.9485 10.0149 12.8751 9.98864 12.6914 9.97363C12.5004 9.95804 12.2498 9.95801 11.8662 9.95801H4.13379C3.7502 9.95801 3.49956 9.95804 3.30859 9.97363C3.21688 9.98113 3.15268 9.99208 3.10645 10.0029L3.01172 10.0352C2.87851 10.103 2.77007 10.2114 2.70215 10.3447C2.68187 10.3845 2.65563 10.4579 2.64063 10.6416C2.62503 10.8326 2.625 11.0832 2.625 11.4668V11.8662C2.625 12.2499 2.62502 12.5004 2.64063 12.6914C2.65564 12.875 2.68188 12.9485 2.70215 12.9883C2.77008 13.1215 2.87859 13.23 3.01172 13.2979L3.10645 13.3301C3.15267 13.3409 3.21693 13.3509 3.30859 13.3584C3.49956 13.374 3.75016 13.375 4.13379 13.375H11.8662C12.2498 13.375 12.5004 13.374 12.6914 13.3584C12.8749 13.3434 12.9485 13.3181 12.9883 13.2979L13.083 13.2393C13.1729 13.1739 13.2469 13.0882 13.2979 12.9883C13.3181 12.9485 13.3444 12.875 13.3594 12.6914C13.375 12.5004 13.375 12.2499 13.375 11.8662V11.4668ZM13.375 4.13379C13.375 3.7502 13.375 3.49956 13.3594 3.30859C13.3519 3.21688 13.3409 3.15268 13.3301 3.10645L13.2979 3.01172C13.23 2.8785 13.1216 2.77007 12.9883 2.70215C12.9485 2.68187 12.8751 2.65563 12.6914 2.64063C12.5004 2.62503 12.2498 2.625 11.8662 2.625H4.13379C3.7502 2.625 3.49956 2.62503 3.30859 2.64063C3.12491 2.65563 3.05153 2.68186 3.01172 2.70215C2.87844 2.77005 2.77005 2.87844 2.70215 3.01172C2.68186 3.05153 2.65563 3.12491 2.64063 3.30859C2.62503 3.49956 2.625 3.7502 2.625 4.13379V4.5332C2.625 4.91688 2.62502 5.16742 2.64063 5.3584C2.65564 5.54194 2.68187 5.61548 2.70215 5.65527C2.77006 5.78843 2.87853 5.89698 3.01172 5.96484C3.05156 5.98512 3.12509 6.0104 3.30859 6.02539C3.49956 6.04099 3.75016 6.04199 4.13379 6.04199H11.8662C12.2498 6.04199 12.5004 6.04099 12.6914 6.02539C12.8749 6.0104 12.9485 5.98511 12.9883 5.96484C13.1215 5.89696 13.23 5.78839 13.2979 5.65527C13.3181 5.61548 13.3444 5.54194 13.3594 5.3584C13.375 5.16742 13.375 4.91689 13.375 4.5332V4.13379ZM14.625 11.8662C14.625 12.2293 14.6252 12.5393 14.6045 12.793C14.5832 13.054 14.5362 13.3103 14.4111 13.5557C14.2234 13.924 13.924 14.2235 13.5557 14.4111C13.3103 14.5362 13.0539 14.5832 12.793 14.6045C12.5393 14.6252 12.2291 14.625 11.8662 14.625H4.13379C3.77089 14.625 3.46066 14.6252 3.20703 14.6045C2.94605 14.5832 2.68973 14.5362 2.44434 14.4111C2.07591 14.2235 1.77661 13.9239 1.58887 13.5557C1.46382 13.3103 1.41683 13.054 1.39551 12.793C1.37478 12.5393 1.375 12.2293 1.375 11.8662V11.4668C1.375 11.1039 1.37481 10.7937 1.39551 10.54C1.41683 10.2791 1.46382 10.0227 1.58887 9.77734C1.77657 9.40901 2.07589 9.10961 2.44434 8.92188C2.68974 8.79683 2.94604 8.74984 3.20703 8.72852C3.46067 8.70781 3.77088 8.70801 4.13379 8.70801H11.8662C12.2291 8.70801 12.5393 8.70781 12.793 8.72852C13.054 8.74984 13.3103 8.79682 13.5557 8.92188C13.9241 9.10958 14.2234 9.40896 14.4111 9.77734C14.5362 10.0227 14.5832 10.2791 14.6045 10.54C14.6252 10.7937 14.625 11.1039 14.625 11.4668V11.8662ZM14.625 4.5332C14.625 4.89626 14.6252 5.20627 14.6045 5.45996C14.5832 5.72094 14.5362 5.97726 14.4111 6.22266C14.2234 6.59102 13.924 6.89046 13.5557 7.07812C13.3103 7.20316 13.0539 7.25016 12.793 7.27148C12.5393 7.29218 12.2291 7.29199 11.8662 7.29199H4.13379C3.77089 7.29199 3.46066 7.29218 3.20703 7.27148C2.94605 7.25016 2.68973 7.20316 2.44434 7.07812C2.07597 6.89044 1.77663 6.59098 1.58887 6.22266C1.46383 5.97726 1.41683 5.72094 1.39551 5.45996C1.37478 5.20627 1.375 4.89626 1.375 4.5332V4.13379C1.375 3.77088 1.37481 3.46067 1.39551 3.20703C1.41683 2.94604 1.46383 2.68974 1.58887 2.44434C1.7766 2.07594 2.07594 1.7766 2.44434 1.58887C2.68974 1.46383 2.94604 1.41683 3.20703 1.39551C3.46067 1.37481 3.77088 1.375 4.13379 1.375H11.8662C12.2291 1.375 12.5393 1.37481 12.793 1.39551C13.054 1.41683 13.3103 1.46382 13.5557 1.58887C13.924 1.77658 14.2234 2.0759 14.4111 2.44434C14.5362 2.68974 14.5832 2.94604 14.6045 3.20703C14.6252 3.46067 14.625 3.77088 14.625 4.13379V4.5332Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/layouts/grid-icon.tsx b/packages/propel/src/icons/layouts/grid-icon.tsx
index 58a75ebcd4..7cbc9900b3 100644
--- a/packages/propel/src/icons/layouts/grid-icon.tsx
+++ b/packages/propel/src/icons/layouts/grid-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const GridLayoutIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M6.0342 10.0127C6.0327 9.99439 6.02964 9.98153 6.02834 9.97267C6.02717 9.97146 6.02672 9.96984 6.02541 9.96877C6.01667 9.96752 6.0042 9.96624 5.98732 9.96486C5.90751 9.95834 5.79662 9.95802 5.59963 9.95802H3.06642C2.86959 9.95802 2.75948 9.95834 2.6797 9.96486C2.66216 9.96629 2.64947 9.96847 2.64064 9.96974C2.63917 9.97102 2.638 9.97219 2.63673 9.97365C2.63546 9.98248 2.63328 9.99518 2.63185 10.0127C2.62534 10.0925 2.62502 10.2026 2.62502 10.3994V12.9326C2.62502 13.1296 2.62533 13.2405 2.63185 13.3203C2.63324 13.3372 2.63451 13.3497 2.63576 13.3584C2.63683 13.3597 2.63844 13.3602 2.63966 13.3613C2.64851 13.3627 2.66138 13.3657 2.6797 13.3672C2.75948 13.3737 2.86959 13.375 3.06642 13.375H5.59963C5.79662 13.375 5.90751 13.3737 5.98732 13.3672C6.00495 13.3658 6.0176 13.3636 6.02638 13.3623C6.02747 13.3613 6.02834 13.3605 6.02931 13.3594C6.03059 13.3506 6.03275 13.338 6.0342 13.3203C6.04072 13.2405 6.04201 13.1296 6.04201 12.9326V10.3994C6.04201 10.2026 6.04071 10.0925 6.0342 10.0127ZM13.3682 10.0127C13.3667 9.99442 13.3636 9.98153 13.3623 9.97267C13.3613 9.97161 13.3605 9.9707 13.3594 9.96974C13.3506 9.96847 13.3378 9.96628 13.3203 9.96486C13.2405 9.95835 13.1304 9.95802 12.9336 9.95802H10.4004C10.2034 9.95802 10.0925 9.95834 10.0127 9.96486C9.99519 9.9663 9.98241 9.96749 9.97365 9.96877C9.97239 9.96985 9.97184 9.97145 9.97072 9.97267C9.96942 9.98152 9.96733 9.99449 9.96584 10.0127C9.95932 10.0925 9.959 10.2026 9.959 10.3994V12.9326C9.959 13.1296 9.95932 13.2405 9.96584 13.3203C9.96728 13.3379 9.96944 13.3506 9.97072 13.3594C9.97169 13.3605 9.97257 13.3613 9.97365 13.3623C9.98241 13.3636 9.99506 13.3658 10.0127 13.3672C10.0925 13.3737 10.2034 13.375 10.4004 13.375H12.9336C13.1305 13.375 13.2405 13.3737 13.3203 13.3672C13.3386 13.3657 13.3515 13.3626 13.3604 13.3613C13.3612 13.3605 13.3625 13.3603 13.3633 13.3594C13.3646 13.3506 13.3667 13.3379 13.3682 13.3203C13.3747 13.2405 13.375 13.1296 13.375 12.9326V10.3994C13.375 10.2026 13.3747 10.0925 13.3682 10.0127ZM6.0342 2.6797C6.0327 2.66138 6.02964 2.64852 6.02834 2.63966C6.02717 2.63844 6.02671 2.63683 6.02541 2.63576C6.01666 2.63451 6.00419 2.63324 5.98732 2.63185C5.90751 2.62533 5.79662 2.62502 5.59963 2.62502H3.06642C2.8696 2.62502 2.75948 2.62533 2.6797 2.63185C2.66216 2.63329 2.64947 2.63546 2.64064 2.63673C2.63918 2.63801 2.63801 2.63918 2.63673 2.64064C2.63546 2.64947 2.63329 2.66216 2.63185 2.6797C2.62533 2.75948 2.62502 2.8696 2.62502 3.06642V5.59963C2.62502 5.79662 2.62533 5.90751 2.63185 5.98732C2.63324 6.00419 2.63451 6.01666 2.63576 6.02541C2.63683 6.02671 2.63844 6.02717 2.63966 6.02834C2.64852 6.02964 2.66138 6.0327 2.6797 6.0342C2.75948 6.04071 2.86959 6.04201 3.06642 6.04201H5.59963C5.79662 6.04201 5.90751 6.04072 5.98732 6.0342C6.00494 6.03275 6.0176 6.03059 6.02638 6.02931C6.02747 6.02834 6.02834 6.02747 6.02931 6.02638C6.03059 6.0176 6.03275 6.00494 6.0342 5.98732C6.04072 5.90751 6.04201 5.79662 6.04201 5.59963V3.06642C6.04201 2.86959 6.04071 2.75948 6.0342 2.6797ZM13.3682 2.6797C13.3667 2.66217 13.3646 2.64947 13.3633 2.64064C13.362 2.63917 13.3608 2.638 13.3594 2.63673C13.3506 2.63546 13.3379 2.63329 13.3203 2.63185C13.2406 2.62534 13.1304 2.62502 12.9336 2.62502H10.4004C10.2034 2.62502 10.0925 2.62533 10.0127 2.63185C9.99523 2.63328 9.98244 2.63449 9.97365 2.63576C9.97221 2.63698 9.97101 2.63825 9.96974 2.63966C9.96844 2.64852 9.96634 2.66154 9.96486 2.6797C9.95834 2.75948 9.95802 2.86961 9.95802 3.06642V5.59963C9.95802 5.79662 9.95834 5.90751 9.96486 5.98732C9.96625 6.00427 9.96849 6.01666 9.96974 6.02541C9.971 6.02691 9.97221 6.02801 9.97365 6.02931C9.98244 6.03059 9.9951 6.03275 10.0127 6.0342C10.0925 6.04072 10.2034 6.04201 10.4004 6.04201H12.9336C13.1304 6.04201 13.2406 6.04071 13.3203 6.0342C13.338 6.03275 13.3506 6.02962 13.3594 6.02834C13.3607 6.02717 13.3622 6.02673 13.3633 6.02541C13.3645 6.01666 13.3668 6.00428 13.3682 5.98732C13.3747 5.90751 13.375 5.79662 13.375 5.59963V3.06642C13.375 2.8696 13.3747 2.75948 13.3682 2.6797ZM7.29201 12.9326C7.29201 13.109 7.29193 13.2794 7.28029 13.4219C7.26806 13.5715 7.23984 13.7451 7.15138 13.919C7.02758 14.162 6.82957 14.3596 6.58693 14.4834C6.41294 14.572 6.23862 14.6011 6.08888 14.6133C5.94636 14.6249 5.77599 14.625 5.59963 14.625H3.06642C2.89023 14.625 2.72055 14.6249 2.57814 14.6133C2.42832 14.6011 2.2542 14.5721 2.08009 14.4834C1.83733 14.3596 1.63949 14.1621 1.51564 13.919C1.42712 13.745 1.39799 13.5716 1.38576 13.4219C1.37411 13.2794 1.37502 13.109 1.37502 12.9326V10.3994C1.37502 10.2232 1.37414 10.0535 1.38576 9.91115C1.398 9.76133 1.42693 9.5872 1.51564 9.4131L1.56545 9.32423C1.6896 9.12181 1.86756 8.95697 2.08009 8.84865C2.25419 8.75993 2.42832 8.73101 2.57814 8.71877C2.72054 8.70715 2.89025 8.70802 3.06642 8.70802H5.59963C5.776 8.70802 5.94636 8.70712 6.08888 8.71877C6.23856 8.731 6.41203 8.76013 6.58595 8.84865C6.82872 8.97245 7.02753 9.17 7.15138 9.4131C7.24007 9.58718 7.26805 9.76135 7.28029 9.91115C7.29191 10.0536 7.29201 10.2232 7.29201 10.3994V12.9326ZM14.625 12.9326C14.625 13.109 14.6259 13.2794 14.6143 13.4219C14.602 13.5717 14.5731 13.7459 14.4844 13.9199C14.3606 14.1628 14.1628 14.3596 13.9199 14.4834C13.7458 14.5721 13.5717 14.6011 13.4219 14.6133C13.2795 14.6249 13.1098 14.625 12.9336 14.625H10.4004C10.224 14.625 10.0537 14.6249 9.91115 14.6133C9.76141 14.601 9.58805 14.5721 9.41408 14.4834C9.1712 14.3597 8.97349 14.1628 8.84963 13.9199C8.76093 13.7459 8.73199 13.5717 8.71974 13.4219C8.7081 13.2794 8.709 13.109 8.709 12.9326V10.3994C8.709 10.2232 8.70812 10.0536 8.71974 9.91115C8.73198 9.76132 8.76091 9.5872 8.84963 9.4131L8.89943 9.32423C9.02353 9.12198 9.20147 8.95699 9.41408 8.84865L9.54396 8.79298C9.6732 8.74695 9.79884 8.72795 9.91115 8.71877C10.0537 8.70712 10.224 8.70802 10.4004 8.70802H12.9336C13.1098 8.70802 13.2795 8.70716 13.4219 8.71877C13.5717 8.73101 13.7459 8.75996 13.9199 8.84865C14.163 8.97248 14.3605 9.1701 14.4844 9.4131C14.5731 9.5872 14.602 9.76132 14.6143 9.91115C14.6259 10.0535 14.625 10.2232 14.625 10.3994V12.9326ZM7.29201 5.59963C7.29201 5.776 7.29193 5.94636 7.28029 6.08888C7.26806 6.23851 7.23984 6.4121 7.15138 6.58595C7.02754 6.82898 6.82898 7.02657 6.58595 7.15041C6.4121 7.23886 6.23851 7.26806 6.08888 7.28029C5.94636 7.29193 5.776 7.29201 5.59963 7.29201H3.06642C2.89023 7.29201 2.72055 7.29191 2.57814 7.28029C2.42834 7.26805 2.25418 7.24007 2.08009 7.15138C1.83722 7.02753 1.63942 6.82887 1.51564 6.58595C1.42712 6.41203 1.39799 6.23856 1.38576 6.08888C1.37411 5.94636 1.37502 5.776 1.37502 5.59963V3.06642C1.37502 2.89025 1.37414 2.72054 1.38576 2.57814C1.398 2.42832 1.42694 2.25419 1.51564 2.08009L1.56545 1.99123C1.68954 1.78891 1.86746 1.62401 2.08009 1.51564L2.20998 1.45998C2.33946 1.4138 2.46565 1.39495 2.57814 1.38576C2.72054 1.37414 2.89025 1.37502 3.06642 1.37502H5.59963C5.776 1.37502 5.94636 1.37411 6.08888 1.38576C6.20119 1.39494 6.32682 1.41396 6.45607 1.45998L6.58595 1.51564L6.6758 1.56545C6.87792 1.68948 7.04208 1.86766 7.15041 2.08009C7.23909 2.25418 7.26805 2.42834 7.28029 2.57814C7.29191 2.72055 7.29201 2.89023 7.29201 3.06642V5.59963ZM14.625 5.59963C14.625 5.77599 14.6249 5.94636 14.6133 6.08888C14.6011 6.23853 14.5729 6.41207 14.4844 6.58595C14.3606 6.82872 14.163 7.02753 13.9199 7.15138C13.7458 7.24009 13.5717 7.26805 13.4219 7.28029C13.2795 7.29191 13.1098 7.29201 12.9336 7.29201H10.4004C10.224 7.29201 10.0537 7.29193 9.91115 7.28029C9.76134 7.26805 9.58718 7.24009 9.4131 7.15138C9.17005 7.02751 8.97242 6.82968 8.84865 6.58693C8.76018 6.41306 8.73198 6.23852 8.71974 6.08888C8.7081 5.94636 8.70802 5.776 8.70802 5.59963V3.06642C8.70802 2.89023 8.70812 2.72056 8.71974 2.57814C8.73198 2.42833 8.75995 2.25418 8.84865 2.08009C8.97239 1.83731 9.17005 1.63955 9.4131 1.51564L9.54396 1.45998C9.67321 1.41398 9.79885 1.39493 9.91115 1.38576C10.0537 1.37412 10.224 1.37502 10.4004 1.37502H12.9336C13.1098 1.37502 13.2795 1.37414 13.4219 1.38576C13.5341 1.39493 13.6599 1.41401 13.7891 1.45998L13.9199 1.51564L14.0088 1.56545C14.2112 1.6896 14.3761 1.86758 14.4844 2.08009C14.5731 2.2542 14.6011 2.42832 14.6133 2.57814C14.6249 2.72056 14.625 2.89022 14.625 3.06642V5.59963Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function GridLayoutIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M6.0342 10.0127C6.0327 9.99439 6.02964 9.98153 6.02834 9.97267C6.02717 9.97146 6.02672 9.96984 6.02541 9.96877C6.01667 9.96752 6.0042 9.96624 5.98732 9.96486C5.90751 9.95834 5.79662 9.95802 5.59963 9.95802H3.06642C2.86959 9.95802 2.75948 9.95834 2.6797 9.96486C2.66216 9.96629 2.64947 9.96847 2.64064 9.96974C2.63917 9.97102 2.638 9.97219 2.63673 9.97365C2.63546 9.98248 2.63328 9.99518 2.63185 10.0127C2.62534 10.0925 2.62502 10.2026 2.62502 10.3994V12.9326C2.62502 13.1296 2.62533 13.2405 2.63185 13.3203C2.63324 13.3372 2.63451 13.3497 2.63576 13.3584C2.63683 13.3597 2.63844 13.3602 2.63966 13.3613C2.64851 13.3627 2.66138 13.3657 2.6797 13.3672C2.75948 13.3737 2.86959 13.375 3.06642 13.375H5.59963C5.79662 13.375 5.90751 13.3737 5.98732 13.3672C6.00495 13.3658 6.0176 13.3636 6.02638 13.3623C6.02747 13.3613 6.02834 13.3605 6.02931 13.3594C6.03059 13.3506 6.03275 13.338 6.0342 13.3203C6.04072 13.2405 6.04201 13.1296 6.04201 12.9326V10.3994C6.04201 10.2026 6.04071 10.0925 6.0342 10.0127ZM13.3682 10.0127C13.3667 9.99442 13.3636 9.98153 13.3623 9.97267C13.3613 9.97161 13.3605 9.9707 13.3594 9.96974C13.3506 9.96847 13.3378 9.96628 13.3203 9.96486C13.2405 9.95835 13.1304 9.95802 12.9336 9.95802H10.4004C10.2034 9.95802 10.0925 9.95834 10.0127 9.96486C9.99519 9.9663 9.98241 9.96749 9.97365 9.96877C9.97239 9.96985 9.97184 9.97145 9.97072 9.97267C9.96942 9.98152 9.96733 9.99449 9.96584 10.0127C9.95932 10.0925 9.959 10.2026 9.959 10.3994V12.9326C9.959 13.1296 9.95932 13.2405 9.96584 13.3203C9.96728 13.3379 9.96944 13.3506 9.97072 13.3594C9.97169 13.3605 9.97257 13.3613 9.97365 13.3623C9.98241 13.3636 9.99506 13.3658 10.0127 13.3672C10.0925 13.3737 10.2034 13.375 10.4004 13.375H12.9336C13.1305 13.375 13.2405 13.3737 13.3203 13.3672C13.3386 13.3657 13.3515 13.3626 13.3604 13.3613C13.3612 13.3605 13.3625 13.3603 13.3633 13.3594C13.3646 13.3506 13.3667 13.3379 13.3682 13.3203C13.3747 13.2405 13.375 13.1296 13.375 12.9326V10.3994C13.375 10.2026 13.3747 10.0925 13.3682 10.0127ZM6.0342 2.6797C6.0327 2.66138 6.02964 2.64852 6.02834 2.63966C6.02717 2.63844 6.02671 2.63683 6.02541 2.63576C6.01666 2.63451 6.00419 2.63324 5.98732 2.63185C5.90751 2.62533 5.79662 2.62502 5.59963 2.62502H3.06642C2.8696 2.62502 2.75948 2.62533 2.6797 2.63185C2.66216 2.63329 2.64947 2.63546 2.64064 2.63673C2.63918 2.63801 2.63801 2.63918 2.63673 2.64064C2.63546 2.64947 2.63329 2.66216 2.63185 2.6797C2.62533 2.75948 2.62502 2.8696 2.62502 3.06642V5.59963C2.62502 5.79662 2.62533 5.90751 2.63185 5.98732C2.63324 6.00419 2.63451 6.01666 2.63576 6.02541C2.63683 6.02671 2.63844 6.02717 2.63966 6.02834C2.64852 6.02964 2.66138 6.0327 2.6797 6.0342C2.75948 6.04071 2.86959 6.04201 3.06642 6.04201H5.59963C5.79662 6.04201 5.90751 6.04072 5.98732 6.0342C6.00494 6.03275 6.0176 6.03059 6.02638 6.02931C6.02747 6.02834 6.02834 6.02747 6.02931 6.02638C6.03059 6.0176 6.03275 6.00494 6.0342 5.98732C6.04072 5.90751 6.04201 5.79662 6.04201 5.59963V3.06642C6.04201 2.86959 6.04071 2.75948 6.0342 2.6797ZM13.3682 2.6797C13.3667 2.66217 13.3646 2.64947 13.3633 2.64064C13.362 2.63917 13.3608 2.638 13.3594 2.63673C13.3506 2.63546 13.3379 2.63329 13.3203 2.63185C13.2406 2.62534 13.1304 2.62502 12.9336 2.62502H10.4004C10.2034 2.62502 10.0925 2.62533 10.0127 2.63185C9.99523 2.63328 9.98244 2.63449 9.97365 2.63576C9.97221 2.63698 9.97101 2.63825 9.96974 2.63966C9.96844 2.64852 9.96634 2.66154 9.96486 2.6797C9.95834 2.75948 9.95802 2.86961 9.95802 3.06642V5.59963C9.95802 5.79662 9.95834 5.90751 9.96486 5.98732C9.96625 6.00427 9.96849 6.01666 9.96974 6.02541C9.971 6.02691 9.97221 6.02801 9.97365 6.02931C9.98244 6.03059 9.9951 6.03275 10.0127 6.0342C10.0925 6.04072 10.2034 6.04201 10.4004 6.04201H12.9336C13.1304 6.04201 13.2406 6.04071 13.3203 6.0342C13.338 6.03275 13.3506 6.02962 13.3594 6.02834C13.3607 6.02717 13.3622 6.02673 13.3633 6.02541C13.3645 6.01666 13.3668 6.00428 13.3682 5.98732C13.3747 5.90751 13.375 5.79662 13.375 5.59963V3.06642C13.375 2.8696 13.3747 2.75948 13.3682 2.6797ZM7.29201 12.9326C7.29201 13.109 7.29193 13.2794 7.28029 13.4219C7.26806 13.5715 7.23984 13.7451 7.15138 13.919C7.02758 14.162 6.82957 14.3596 6.58693 14.4834C6.41294 14.572 6.23862 14.6011 6.08888 14.6133C5.94636 14.6249 5.77599 14.625 5.59963 14.625H3.06642C2.89023 14.625 2.72055 14.6249 2.57814 14.6133C2.42832 14.6011 2.2542 14.5721 2.08009 14.4834C1.83733 14.3596 1.63949 14.1621 1.51564 13.919C1.42712 13.745 1.39799 13.5716 1.38576 13.4219C1.37411 13.2794 1.37502 13.109 1.37502 12.9326V10.3994C1.37502 10.2232 1.37414 10.0535 1.38576 9.91115C1.398 9.76133 1.42693 9.5872 1.51564 9.4131L1.56545 9.32423C1.6896 9.12181 1.86756 8.95697 2.08009 8.84865C2.25419 8.75993 2.42832 8.73101 2.57814 8.71877C2.72054 8.70715 2.89025 8.70802 3.06642 8.70802H5.59963C5.776 8.70802 5.94636 8.70712 6.08888 8.71877C6.23856 8.731 6.41203 8.76013 6.58595 8.84865C6.82872 8.97245 7.02753 9.17 7.15138 9.4131C7.24007 9.58718 7.26805 9.76135 7.28029 9.91115C7.29191 10.0536 7.29201 10.2232 7.29201 10.3994V12.9326ZM14.625 12.9326C14.625 13.109 14.6259 13.2794 14.6143 13.4219C14.602 13.5717 14.5731 13.7459 14.4844 13.9199C14.3606 14.1628 14.1628 14.3596 13.9199 14.4834C13.7458 14.5721 13.5717 14.6011 13.4219 14.6133C13.2795 14.6249 13.1098 14.625 12.9336 14.625H10.4004C10.224 14.625 10.0537 14.6249 9.91115 14.6133C9.76141 14.601 9.58805 14.5721 9.41408 14.4834C9.1712 14.3597 8.97349 14.1628 8.84963 13.9199C8.76093 13.7459 8.73199 13.5717 8.71974 13.4219C8.7081 13.2794 8.709 13.109 8.709 12.9326V10.3994C8.709 10.2232 8.70812 10.0536 8.71974 9.91115C8.73198 9.76132 8.76091 9.5872 8.84963 9.4131L8.89943 9.32423C9.02353 9.12198 9.20147 8.95699 9.41408 8.84865L9.54396 8.79298C9.6732 8.74695 9.79884 8.72795 9.91115 8.71877C10.0537 8.70712 10.224 8.70802 10.4004 8.70802H12.9336C13.1098 8.70802 13.2795 8.70716 13.4219 8.71877C13.5717 8.73101 13.7459 8.75996 13.9199 8.84865C14.163 8.97248 14.3605 9.1701 14.4844 9.4131C14.5731 9.5872 14.602 9.76132 14.6143 9.91115C14.6259 10.0535 14.625 10.2232 14.625 10.3994V12.9326ZM7.29201 5.59963C7.29201 5.776 7.29193 5.94636 7.28029 6.08888C7.26806 6.23851 7.23984 6.4121 7.15138 6.58595C7.02754 6.82898 6.82898 7.02657 6.58595 7.15041C6.4121 7.23886 6.23851 7.26806 6.08888 7.28029C5.94636 7.29193 5.776 7.29201 5.59963 7.29201H3.06642C2.89023 7.29201 2.72055 7.29191 2.57814 7.28029C2.42834 7.26805 2.25418 7.24007 2.08009 7.15138C1.83722 7.02753 1.63942 6.82887 1.51564 6.58595C1.42712 6.41203 1.39799 6.23856 1.38576 6.08888C1.37411 5.94636 1.37502 5.776 1.37502 5.59963V3.06642C1.37502 2.89025 1.37414 2.72054 1.38576 2.57814C1.398 2.42832 1.42694 2.25419 1.51564 2.08009L1.56545 1.99123C1.68954 1.78891 1.86746 1.62401 2.08009 1.51564L2.20998 1.45998C2.33946 1.4138 2.46565 1.39495 2.57814 1.38576C2.72054 1.37414 2.89025 1.37502 3.06642 1.37502H5.59963C5.776 1.37502 5.94636 1.37411 6.08888 1.38576C6.20119 1.39494 6.32682 1.41396 6.45607 1.45998L6.58595 1.51564L6.6758 1.56545C6.87792 1.68948 7.04208 1.86766 7.15041 2.08009C7.23909 2.25418 7.26805 2.42834 7.28029 2.57814C7.29191 2.72055 7.29201 2.89023 7.29201 3.06642V5.59963ZM14.625 5.59963C14.625 5.77599 14.6249 5.94636 14.6133 6.08888C14.6011 6.23853 14.5729 6.41207 14.4844 6.58595C14.3606 6.82872 14.163 7.02753 13.9199 7.15138C13.7458 7.24009 13.5717 7.26805 13.4219 7.28029C13.2795 7.29191 13.1098 7.29201 12.9336 7.29201H10.4004C10.224 7.29201 10.0537 7.29193 9.91115 7.28029C9.76134 7.26805 9.58718 7.24009 9.4131 7.15138C9.17005 7.02751 8.97242 6.82968 8.84865 6.58693C8.76018 6.41306 8.73198 6.23852 8.71974 6.08888C8.7081 5.94636 8.70802 5.776 8.70802 5.59963V3.06642C8.70802 2.89023 8.70812 2.72056 8.71974 2.57814C8.73198 2.42833 8.75995 2.25418 8.84865 2.08009C8.97239 1.83731 9.17005 1.63955 9.4131 1.51564L9.54396 1.45998C9.67321 1.41398 9.79885 1.39493 9.91115 1.38576C10.0537 1.37412 10.224 1.37502 10.4004 1.37502H12.9336C13.1098 1.37502 13.2795 1.37414 13.4219 1.38576C13.5341 1.39493 13.6599 1.41401 13.7891 1.45998L13.9199 1.51564L14.0088 1.56545C14.2112 1.6896 14.3761 1.86758 14.4844 2.08009C14.5731 2.2542 14.6011 2.42832 14.6133 2.57814C14.6249 2.72056 14.625 2.89022 14.625 3.06642V5.59963Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/layouts/list-icon.tsx b/packages/propel/src/icons/layouts/list-icon.tsx
index af71829de4..14fe11150c 100644
--- a/packages/propel/src/icons/layouts/list-icon.tsx
+++ b/packages/propel/src/icons/layouts/list-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const ListLayoutIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M14 11.375C14.3452 11.375 14.625 11.6548 14.625 12C14.625 12.3452 14.3452 12.625 14 12.625H2C1.65482 12.625 1.375 12.3452 1.375 12C1.375 11.6548 1.65482 11.375 2 11.375H14ZM14 7.375C14.3452 7.375 14.625 7.65482 14.625 8C14.625 8.34518 14.3452 8.625 14 8.625H2C1.65482 8.625 1.375 8.34518 1.375 8C1.375 7.65482 1.65482 7.375 2 7.375H14ZM14 3.375C14.3452 3.375 14.625 3.65482 14.625 4C14.625 4.34518 14.3452 4.625 14 4.625H2C1.65482 4.625 1.375 4.34518 1.375 4C1.375 3.65482 1.65482 3.375 2 3.375H14Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function ListLayoutIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M14 11.375C14.3452 11.375 14.625 11.6548 14.625 12C14.625 12.3452 14.3452 12.625 14 12.625H2C1.65482 12.625 1.375 12.3452 1.375 12C1.375 11.6548 1.65482 11.375 2 11.375H14ZM14 7.375C14.3452 7.375 14.625 7.65482 14.625 8C14.625 8.34518 14.3452 8.625 14 8.625H2C1.65482 8.625 1.375 8.34518 1.375 8C1.375 7.65482 1.65482 7.375 2 7.375H14ZM14 3.375C14.3452 3.375 14.625 3.65482 14.625 4C14.625 4.34518 14.3452 4.625 14 4.625H2C1.65482 4.625 1.375 4.34518 1.375 4C1.375 3.65482 1.65482 3.375 2 3.375H14Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/layouts/sheet-icon.tsx b/packages/propel/src/icons/layouts/sheet-icon.tsx
index 12cdbdc3f7..9f2e4eb96b 100644
--- a/packages/propel/src/icons/layouts/sheet-icon.tsx
+++ b/packages/propel/src/icons/layouts/sheet-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const SheetLayoutIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M13.375 6.625H6.625V13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V6.625ZM2.625 10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67445 12.357 2.71788 12.5129 2.77441 12.624C2.90623 12.8827 3.11725 13.0938 3.37598 13.2256C3.48707 13.2821 3.64295 13.3255 3.9375 13.3496C4.23962 13.3743 4.62994 13.375 5.2002 13.375H5.375V6.625H2.625V10.7998ZM13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64295 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67445 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V5.375H13.375V5.2002ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6854 13.6854 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H5.2002C4.65067 14.625 4.20072 14.6255 3.83594 14.5957C3.46388 14.5653 3.12523 14.5002 2.80859 14.3389C2.31467 14.0872 1.91281 13.6854 1.66113 13.1914C1.49987 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31466 2.31466 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49987 13.1914 1.66113C13.6854 1.91281 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.2002V10.7998Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function SheetLayoutIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 6.625H6.625V13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V6.625ZM2.625 10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67445 12.357 2.71788 12.5129 2.77441 12.624C2.90623 12.8827 3.11725 13.0938 3.37598 13.2256C3.48707 13.2821 3.64295 13.3255 3.9375 13.3496C4.23962 13.3743 4.62994 13.375 5.2002 13.375H5.375V6.625H2.625V10.7998ZM13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64295 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67445 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V5.375H13.375V5.2002ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6854 13.6854 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H5.2002C4.65067 14.625 4.20072 14.6255 3.83594 14.5957C3.46388 14.5653 3.12523 14.5002 2.80859 14.3389C2.31467 14.0872 1.91281 13.6854 1.66113 13.1914C1.49987 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31466 2.31466 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49987 13.1914 1.66113C13.6854 1.91281 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.2002V10.7998Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/layouts/timeline-icon.tsx b/packages/propel/src/icons/layouts/timeline-icon.tsx
index 7c0669dcec..91a01cb6b7 100644
--- a/packages/propel/src/icons/layouts/timeline-icon.tsx
+++ b/packages/propel/src/icons/layouts/timeline-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const TimelineLayoutIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M13.5415 11.333C13.5415 11.0142 13.5416 10.8062 13.5308 10.6465C13.5203 10.4927 13.5017 10.4293 13.4878 10.3955C13.4159 10.2221 13.2784 10.0837 13.105 10.0117C13.0713 9.99777 13.008 9.98025 12.854 9.96973C12.6943 9.95884 12.4857 9.95802 12.1665 9.95802H6.8335C6.51462 9.95802 6.30666 9.95887 6.14698 9.96973C5.99329 9.98022 5.92974 9.9978 5.896 10.0117C5.72244 10.0836 5.58411 10.222 5.51222 10.3955C5.49828 10.4293 5.48071 10.4928 5.47022 10.6465C5.45935 10.8062 5.4585 11.0141 5.4585 11.333C5.4585 11.6519 5.45935 11.8599 5.47022 12.0195C5.48071 12.1732 5.49828 12.2368 5.51222 12.2705C5.58411 12.4441 5.72244 12.5824 5.896 12.6543C5.92974 12.6682 5.99329 12.6858 6.14698 12.6963C6.30666 12.7072 6.51462 12.708 6.8335 12.708H12.1665C12.4857 12.708 12.6943 12.7072 12.854 12.6963C13.008 12.6858 13.0713 12.6683 13.105 12.6543C13.2784 12.5824 13.4159 12.444 13.4878 12.2705C13.5017 12.2368 13.5203 12.1733 13.5308 12.0195C13.5416 11.8599 13.5415 11.6519 13.5415 11.333ZM10.5415 4.667C10.5415 4.34815 10.5416 4.14015 10.5308 3.98048C10.5203 3.82667 10.5017 3.76324 10.4878 3.7295C10.4159 3.55605 10.2784 3.41765 10.105 3.34571C10.0713 3.33176 10.008 3.31424 9.85401 3.30372C9.69428 3.29282 9.4857 3.292 9.16651 3.292H3.8335C3.51462 3.292 3.30666 3.29285 3.14698 3.30372C2.99329 3.31421 2.92974 3.33178 2.896 3.34571C2.72244 3.4176 2.58411 3.55594 2.51222 3.7295C2.49828 3.76324 2.48071 3.82678 2.47022 3.98048C2.45935 4.14015 2.4585 4.34811 2.4585 4.667C2.4585 4.98589 2.45935 5.19385 2.47022 5.35352C2.48071 5.50722 2.49828 5.57076 2.51222 5.6045C2.58411 5.77806 2.72244 5.9164 2.896 5.98829C2.92974 6.00222 2.99329 6.0198 3.14698 6.03028C3.30666 6.04115 3.51462 6.042 3.8335 6.042H9.16651C9.4857 6.042 9.69428 6.04118 9.85401 6.03028C10.008 6.01976 10.0713 6.00224 10.105 5.98829C10.2784 5.91635 10.4159 5.77795 10.4878 5.6045C10.5017 5.57076 10.5203 5.50733 10.5308 5.35352C10.5416 5.19385 10.5415 4.98585 10.5415 4.667ZM14.7915 11.333C14.7915 11.6351 14.7923 11.8933 14.7778 12.1055C14.763 12.3231 14.7305 12.5378 14.6431 12.749C14.4443 13.2289 14.0623 13.6098 13.5825 13.8086C13.3712 13.8961 13.1567 13.9295 12.939 13.9443C12.7268 13.9588 12.4686 13.958 12.1665 13.958H6.8335C6.53143 13.958 6.27319 13.9588 6.06104 13.9443C5.8434 13.9295 5.62874 13.8961 5.41749 13.8086C4.93769 13.6098 4.55668 13.2288 4.35792 12.749C4.27042 12.5378 4.23704 12.3231 4.22218 12.1055C4.2077 11.8933 4.2085 11.6351 4.2085 11.333C4.2085 11.0309 4.2077 10.7727 4.22218 10.5606C4.23704 10.3429 4.27042 10.1283 4.35792 9.917C4.55668 9.4372 4.93769 9.05619 5.41749 8.85743C5.62874 8.76993 5.8434 8.73656 6.06104 8.72169C6.27319 8.70721 6.53143 8.70802 6.8335 8.70802H12.1665C12.4686 8.70802 12.7268 8.70721 12.939 8.72169C13.1567 8.73654 13.3712 8.76996 13.5825 8.85743C14.0623 9.05618 14.4443 9.43715 14.6431 9.917C14.7305 10.1282 14.763 10.343 14.7778 10.5606C14.7923 10.7727 14.7915 11.0309 14.7915 11.333ZM11.7915 4.667C11.7915 4.96908 11.7923 5.22732 11.7778 5.43946C11.763 5.65705 11.7305 5.87183 11.6431 6.08302C11.4443 6.56287 11.0623 6.94384 10.5825 7.14259C10.3712 7.23005 10.1567 7.26347 9.93897 7.27833C9.72682 7.2928 9.46859 7.292 9.16651 7.292H3.8335C3.53143 7.292 3.27319 7.2928 3.06104 7.27833C2.8434 7.26346 2.62874 7.23009 2.41749 7.14259C1.93769 6.94383 1.55668 6.56281 1.35792 6.08302C1.27042 5.87177 1.23704 5.65711 1.22218 5.43946C1.2077 5.22731 1.2085 4.96908 1.2085 4.667C1.2085 4.36492 1.2077 4.10669 1.22218 3.89454C1.23704 3.67689 1.27042 3.46224 1.35792 3.25098C1.55668 2.77119 1.93769 2.39017 2.41749 2.19141C2.62874 2.10391 2.8434 2.07054 3.06104 2.05567C3.27319 2.0412 3.53143 2.042 3.8335 2.042H9.16651C9.46859 2.042 9.72682 2.0412 9.93897 2.05567C10.1567 2.07053 10.3712 2.10395 10.5825 2.19141C11.0623 2.39017 11.4443 2.77113 11.6431 3.25098C11.7305 3.46218 11.763 3.67695 11.7778 3.89454C11.7923 4.10668 11.7915 4.36492 11.7915 4.667Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function TimelineLayoutIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.5415 11.333C13.5415 11.0142 13.5416 10.8062 13.5308 10.6465C13.5203 10.4927 13.5017 10.4293 13.4878 10.3955C13.4159 10.2221 13.2784 10.0837 13.105 10.0117C13.0713 9.99777 13.008 9.98025 12.854 9.96973C12.6943 9.95884 12.4857 9.95802 12.1665 9.95802H6.8335C6.51462 9.95802 6.30666 9.95887 6.14698 9.96973C5.99329 9.98022 5.92974 9.9978 5.896 10.0117C5.72244 10.0836 5.58411 10.222 5.51222 10.3955C5.49828 10.4293 5.48071 10.4928 5.47022 10.6465C5.45935 10.8062 5.4585 11.0141 5.4585 11.333C5.4585 11.6519 5.45935 11.8599 5.47022 12.0195C5.48071 12.1732 5.49828 12.2368 5.51222 12.2705C5.58411 12.4441 5.72244 12.5824 5.896 12.6543C5.92974 12.6682 5.99329 12.6858 6.14698 12.6963C6.30666 12.7072 6.51462 12.708 6.8335 12.708H12.1665C12.4857 12.708 12.6943 12.7072 12.854 12.6963C13.008 12.6858 13.0713 12.6683 13.105 12.6543C13.2784 12.5824 13.4159 12.444 13.4878 12.2705C13.5017 12.2368 13.5203 12.1733 13.5308 12.0195C13.5416 11.8599 13.5415 11.6519 13.5415 11.333ZM10.5415 4.667C10.5415 4.34815 10.5416 4.14015 10.5308 3.98048C10.5203 3.82667 10.5017 3.76324 10.4878 3.7295C10.4159 3.55605 10.2784 3.41765 10.105 3.34571C10.0713 3.33176 10.008 3.31424 9.85401 3.30372C9.69428 3.29282 9.4857 3.292 9.16651 3.292H3.8335C3.51462 3.292 3.30666 3.29285 3.14698 3.30372C2.99329 3.31421 2.92974 3.33178 2.896 3.34571C2.72244 3.4176 2.58411 3.55594 2.51222 3.7295C2.49828 3.76324 2.48071 3.82678 2.47022 3.98048C2.45935 4.14015 2.4585 4.34811 2.4585 4.667C2.4585 4.98589 2.45935 5.19385 2.47022 5.35352C2.48071 5.50722 2.49828 5.57076 2.51222 5.6045C2.58411 5.77806 2.72244 5.9164 2.896 5.98829C2.92974 6.00222 2.99329 6.0198 3.14698 6.03028C3.30666 6.04115 3.51462 6.042 3.8335 6.042H9.16651C9.4857 6.042 9.69428 6.04118 9.85401 6.03028C10.008 6.01976 10.0713 6.00224 10.105 5.98829C10.2784 5.91635 10.4159 5.77795 10.4878 5.6045C10.5017 5.57076 10.5203 5.50733 10.5308 5.35352C10.5416 5.19385 10.5415 4.98585 10.5415 4.667ZM14.7915 11.333C14.7915 11.6351 14.7923 11.8933 14.7778 12.1055C14.763 12.3231 14.7305 12.5378 14.6431 12.749C14.4443 13.2289 14.0623 13.6098 13.5825 13.8086C13.3712 13.8961 13.1567 13.9295 12.939 13.9443C12.7268 13.9588 12.4686 13.958 12.1665 13.958H6.8335C6.53143 13.958 6.27319 13.9588 6.06104 13.9443C5.8434 13.9295 5.62874 13.8961 5.41749 13.8086C4.93769 13.6098 4.55668 13.2288 4.35792 12.749C4.27042 12.5378 4.23704 12.3231 4.22218 12.1055C4.2077 11.8933 4.2085 11.6351 4.2085 11.333C4.2085 11.0309 4.2077 10.7727 4.22218 10.5606C4.23704 10.3429 4.27042 10.1283 4.35792 9.917C4.55668 9.4372 4.93769 9.05619 5.41749 8.85743C5.62874 8.76993 5.8434 8.73656 6.06104 8.72169C6.27319 8.70721 6.53143 8.70802 6.8335 8.70802H12.1665C12.4686 8.70802 12.7268 8.70721 12.939 8.72169C13.1567 8.73654 13.3712 8.76996 13.5825 8.85743C14.0623 9.05618 14.4443 9.43715 14.6431 9.917C14.7305 10.1282 14.763 10.343 14.7778 10.5606C14.7923 10.7727 14.7915 11.0309 14.7915 11.333ZM11.7915 4.667C11.7915 4.96908 11.7923 5.22732 11.7778 5.43946C11.763 5.65705 11.7305 5.87183 11.6431 6.08302C11.4443 6.56287 11.0623 6.94384 10.5825 7.14259C10.3712 7.23005 10.1567 7.26347 9.93897 7.27833C9.72682 7.2928 9.46859 7.292 9.16651 7.292H3.8335C3.53143 7.292 3.27319 7.2928 3.06104 7.27833C2.8434 7.26346 2.62874 7.23009 2.41749 7.14259C1.93769 6.94383 1.55668 6.56281 1.35792 6.08302C1.27042 5.87177 1.23704 5.65711 1.22218 5.43946C1.2077 5.22731 1.2085 4.96908 1.2085 4.667C1.2085 4.36492 1.2077 4.10669 1.22218 3.89454C1.23704 3.67689 1.27042 3.46224 1.35792 3.25098C1.55668 2.77119 1.93769 2.39017 2.41749 2.19141C2.62874 2.10391 2.8434 2.07054 3.06104 2.05567C3.27319 2.0412 3.53143 2.042 3.8335 2.042H9.16651C9.46859 2.042 9.72682 2.0412 9.93897 2.05567C10.1567 2.07053 10.3712 2.10395 10.5825 2.19141C11.0623 2.39017 11.4443 2.77113 11.6431 3.25098C11.7305 3.46218 11.763 3.67695 11.7778 3.89454C11.7923 4.10668 11.7915 4.36492 11.7915 4.667Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/lead-icon.tsx b/packages/propel/src/icons/lead-icon.tsx
index c093b65a7c..bd7c107e58 100644
--- a/packages/propel/src/icons/lead-icon.tsx
+++ b/packages/propel/src/icons/lead-icon.tsx
@@ -2,25 +2,27 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const LeadIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg className={className} viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
-    <path
-      d="M0.571533 9C0.571533 4.02944 4.60097 0 9.57153 0C14.5421 0 18.5715 4.02944 18.5715 9C18.5715 13.9706 14.5421 18 9.57153 18C4.60097 18 0.571533 13.9706 0.571533 9Z"
-      fill="#3372FF"
-    />
-    <g clipPath="url(#clip0_8992_2377)">
-      <circle cx="9.57153" cy="6.5" r="2.5" fill="#F5F5FF" />
+export function LeadIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg className={className} viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
       <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8.94653 9.625C6.53029 9.625 4.57153 11.5838 4.57153 14H9.57153H14.5715C14.5715 11.5838 12.6128 9.625 10.1965 9.625H9.82153L10.8215 13.0278L9.57153 14L8.32153 13.0278L9.32153 9.625H8.94653Z"
-        fill="#F5F5FF"
+        d="M0.571533 9C0.571533 4.02944 4.60097 0 9.57153 0C14.5421 0 18.5715 4.02944 18.5715 9C18.5715 13.9706 14.5421 18 9.57153 18C4.60097 18 0.571533 13.9706 0.571533 9Z"
+        fill="#3372FF"
       />
-    </g>
-    <defs>
-      <clipPath id="clip0_8992_2377">
-        <rect width="10" height="10" fill="white" transform="translate(4.57153 4)" />
-      </clipPath>
-    </defs>
-  </svg>
-);
+      <g clipPath="url(#clip0_8992_2377)">
+        <circle cx="9.57153" cy="6.5" r="2.5" fill="#F5F5FF" />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8.94653 9.625C6.53029 9.625 4.57153 11.5838 4.57153 14H9.57153H14.5715C14.5715 11.5838 12.6128 9.625 10.1965 9.625H9.82153L10.8215 13.0278L9.57153 14L8.32153 13.0278L9.32153 9.625H8.94653Z"
+          fill="#F5F5FF"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_8992_2377">
+          <rect width="10" height="10" fill="white" transform="translate(4.57153 4)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/module/backlog.tsx b/packages/propel/src/icons/module/backlog.tsx
index 0ae7de2dad..1a4ff0a6c5 100644
--- a/packages/propel/src/icons/module/backlog.tsx
+++ b/packages/propel/src/icons/module/backlog.tsx
@@ -2,38 +2,35 @@ import * as React from "react";
 
 import type { ISvgIcons } from "../type";
 
-export const ModuleBacklogIcon: React.FC<ISvgIcons> = ({
-  width = "20",
-  height = "20",
-  className,
-  color = "#a3a3a3",
-}) => (
-  <svg
-    height={height}
-    width={width}
-    className={className}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 323.15 323.03"
-  >
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" data-name="Layer 1">
-        <path
-          fill={color}
-          d="M163.42,322.92A172.12,172.12,0,0,1,104.8,312.7c-3.92-1.4-5.22-3.05-3.07-7.1,2.4-4.52,3-11.38,6.64-13.48s9.34,2.47,14.23,3.81c29.55,8.11,58.78,7.25,87.57-3.31,4.08-1.5,5.86-1.05,7.09,3.21a82.63,82.63,0,0,0,4.6,11c1.19,2.57,1,4.06-2,5.2a163.84,163.84,0,0,1-40.05,9.76C173.84,322.45,167.89,323.34,163.42,322.92Z"
-        />
-        <path
-          fill={color}
-          d="M.07,163a174.76,174.76,0,0,1,10.07-58c1.59-4.57,3.53-5.59,7.8-3.2a61,61,0,0,0,10.11,4.19c3.11,1.06,4.07,2.46,2.71,5.79-6.43,15.73-9.17,32.33-9.23,49.14a132.65,132.65,0,0,0,8.17,47.35c2.44,6.5,2.33,6.57-4.06,9.35-3.35,1.45-6.83,2.63-10.11,4.23-2.44,1.19-3.54.49-4.43-1.86a162.3,162.3,0,0,1-10-41C.51,173.12-.24,167.17.07,163Z"
-        />
-        <path
-          fill={color}
-          d="M323,160.16a169.68,169.68,0,0,1-10.2,58.09c-1.45,4.08-3.21,5.07-7.14,3a105.3,105.3,0,0,0-11.48-4.81c-2.23-.85-3.2-1.85-2.16-4.41a133.86,133.86,0,0,0,9.57-48.59,132,132,0,0,0-8.9-50.69c-1.67-4.24-.8-5.79,3.29-7a84,84,0,0,0,11-4.62c2.65-1.24,4.05-.82,5.16,2.12a159.68,159.68,0,0,1,9.68,39C322.56,148.71,323.52,155.17,323,160.16Z"
-        />
-        <path
-          fill={color}
-          d="M161.59,0a164.28,164.28,0,0,1,58,10.72c2.81,1,3.75,2,2.41,4.93-2,4.38-3.86,8.84-5.5,13.37-.93,2.56-2.28,2.77-4.53,1.87a137.94,137.94,0,0,0-99.35-.52c-3.43,1.32-5.3,1.35-6.45-2.69a50.33,50.33,0,0,0-4.55-11c-2.25-3.93-.36-5.11,2.9-6.29A165.32,165.32,0,0,1,161.59,0Z"
-        />
+export function ModuleBacklogIcon({ width = "20", height = "20", className, color = "#a3a3a3" }: ISvgIcons) {
+  return (
+    <svg
+      height={height}
+      width={width}
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 323.15 323.03"
+    >
+      <g id="Layer_2" data-name="Layer 2">
+        <g id="Layer_1-2" data-name="Layer 1">
+          <path
+            fill={color}
+            d="M163.42,322.92A172.12,172.12,0,0,1,104.8,312.7c-3.92-1.4-5.22-3.05-3.07-7.1,2.4-4.52,3-11.38,6.64-13.48s9.34,2.47,14.23,3.81c29.55,8.11,58.78,7.25,87.57-3.31,4.08-1.5,5.86-1.05,7.09,3.21a82.63,82.63,0,0,0,4.6,11c1.19,2.57,1,4.06-2,5.2a163.84,163.84,0,0,1-40.05,9.76C173.84,322.45,167.89,323.34,163.42,322.92Z"
+          />
+          <path
+            fill={color}
+            d="M.07,163a174.76,174.76,0,0,1,10.07-58c1.59-4.57,3.53-5.59,7.8-3.2a61,61,0,0,0,10.11,4.19c3.11,1.06,4.07,2.46,2.71,5.79-6.43,15.73-9.17,32.33-9.23,49.14a132.65,132.65,0,0,0,8.17,47.35c2.44,6.5,2.33,6.57-4.06,9.35-3.35,1.45-6.83,2.63-10.11,4.23-2.44,1.19-3.54.49-4.43-1.86a162.3,162.3,0,0,1-10-41C.51,173.12-.24,167.17.07,163Z"
+          />
+          <path
+            fill={color}
+            d="M323,160.16a169.68,169.68,0,0,1-10.2,58.09c-1.45,4.08-3.21,5.07-7.14,3a105.3,105.3,0,0,0-11.48-4.81c-2.23-.85-3.2-1.85-2.16-4.41a133.86,133.86,0,0,0,9.57-48.59,132,132,0,0,0-8.9-50.69c-1.67-4.24-.8-5.79,3.29-7a84,84,0,0,0,11-4.62c2.65-1.24,4.05-.82,5.16,2.12a159.68,159.68,0,0,1,9.68,39C322.56,148.71,323.52,155.17,323,160.16Z"
+          />
+          <path
+            fill={color}
+            d="M161.59,0a164.28,164.28,0,0,1,58,10.72c2.81,1,3.75,2,2.41,4.93-2,4.38-3.86,8.84-5.5,13.37-.93,2.56-2.28,2.77-4.53,1.87a137.94,137.94,0,0,0-99.35-.52c-3.43,1.32-5.3,1.35-6.45-2.69a50.33,50.33,0,0,0-4.55-11c-2.25-3.93-.36-5.11,2.9-6.29A165.32,165.32,0,0,1,161.59,0Z"
+          />
+        </g>
       </g>
-    </g>
-  </svg>
-);
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/module/cancelled.tsx b/packages/propel/src/icons/module/cancelled.tsx
index 2194ce3e00..c8498cf60d 100644
--- a/packages/propel/src/icons/module/cancelled.tsx
+++ b/packages/propel/src/icons/module/cancelled.tsx
@@ -2,25 +2,27 @@ import * as React from "react";
 
 import type { ISvgIcons } from "../type";
 
-export const ModuleCancelledIcon: React.FC<ISvgIcons> = ({ width = "20", height = "20", className }) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clipPath="url(#clip0_4052_100277)">
-      <path
-        d="M8 8.84L10.58 11.42C10.7 11.54 10.84 11.6 11 11.6C11.16 11.6 11.3 11.54 11.42 11.42C11.54 11.3 11.6 11.16 11.6 11C11.6 10.84 11.54 10.7 11.42 10.58L8.84 8L11.42 5.42C11.54 5.3 11.6 5.16 11.6 5C11.6 4.84 11.54 4.7 11.42 4.58C11.3 4.46 11.16 4.4 11 4.4C10.84 4.4 10.7 4.46 10.58 4.58L8 7.16L5.42 4.58C5.3 4.46 5.16 4.4 5 4.4C4.84 4.4 4.7 4.46 4.58 4.58C4.46 4.7 4.4 4.84 4.4 5C4.4 5.16 4.46 5.3 4.58 5.42L7.16 8L4.58 10.58C4.46 10.7 4.4 10.84 4.4 11C4.4 11.16 4.46 11.3 4.58 11.42C4.7 11.54 4.84 11.6 5 11.6C5.16 11.6 5.3 11.54 5.42 11.42L8 8.84ZM8 16C6.90667 16 5.87333 15.79 4.9 15.37C3.92667 14.95 3.07667 14.3767 2.35 13.65C1.62333 12.9233 1.05 12.0733 0.63 11.1C0.21 10.1267 0 9.09333 0 8C0 6.89333 0.21 5.85333 0.63 4.88C1.05 3.90667 1.62333 3.06 2.35 2.34C3.07667 1.62 3.92667 1.05 4.9 0.63C5.87333 0.21 6.90667 0 8 0C9.10667 0 10.1467 0.21 11.12 0.63C12.0933 1.05 12.94 1.62 13.66 2.34C14.38 3.06 14.95 3.90667 15.37 4.88C15.79 5.85333 16 6.89333 16 8C16 9.09333 15.79 10.1267 15.37 11.1C14.95 12.0733 14.38 12.9233 13.66 13.65C12.94 14.3767 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM8 14.8C9.89333 14.8 11.5 14.1367 12.82 12.81C14.14 11.4833 14.8 9.88 14.8 8C14.8 6.10667 14.14 4.5 12.82 3.18C11.5 1.86 9.89333 1.2 8 1.2C6.12 1.2 4.51667 1.86 3.19 3.18C1.86333 4.5 1.2 6.10667 1.2 8C1.2 9.88 1.86333 11.4833 3.19 12.81C4.51667 14.1367 6.12 14.8 8 14.8Z"
-        fill="#ef4444"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_4052_100277">
-        <rect width="16" height="16" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
+export function ModuleCancelledIcon({ width = "20", height = "20", className }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_4052_100277)">
+        <path
+          d="M8 8.84L10.58 11.42C10.7 11.54 10.84 11.6 11 11.6C11.16 11.6 11.3 11.54 11.42 11.42C11.54 11.3 11.6 11.16 11.6 11C11.6 10.84 11.54 10.7 11.42 10.58L8.84 8L11.42 5.42C11.54 5.3 11.6 5.16 11.6 5C11.6 4.84 11.54 4.7 11.42 4.58C11.3 4.46 11.16 4.4 11 4.4C10.84 4.4 10.7 4.46 10.58 4.58L8 7.16L5.42 4.58C5.3 4.46 5.16 4.4 5 4.4C4.84 4.4 4.7 4.46 4.58 4.58C4.46 4.7 4.4 4.84 4.4 5C4.4 5.16 4.46 5.3 4.58 5.42L7.16 8L4.58 10.58C4.46 10.7 4.4 10.84 4.4 11C4.4 11.16 4.46 11.3 4.58 11.42C4.7 11.54 4.84 11.6 5 11.6C5.16 11.6 5.3 11.54 5.42 11.42L8 8.84ZM8 16C6.90667 16 5.87333 15.79 4.9 15.37C3.92667 14.95 3.07667 14.3767 2.35 13.65C1.62333 12.9233 1.05 12.0733 0.63 11.1C0.21 10.1267 0 9.09333 0 8C0 6.89333 0.21 5.85333 0.63 4.88C1.05 3.90667 1.62333 3.06 2.35 2.34C3.07667 1.62 3.92667 1.05 4.9 0.63C5.87333 0.21 6.90667 0 8 0C9.10667 0 10.1467 0.21 11.12 0.63C12.0933 1.05 12.94 1.62 13.66 2.34C14.38 3.06 14.95 3.90667 15.37 4.88C15.79 5.85333 16 6.89333 16 8C16 9.09333 15.79 10.1267 15.37 11.1C14.95 12.0733 14.38 12.9233 13.66 13.65C12.94 14.3767 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM8 14.8C9.89333 14.8 11.5 14.1367 12.82 12.81C14.14 11.4833 14.8 9.88 14.8 8C14.8 6.10667 14.14 4.5 12.82 3.18C11.5 1.86 9.89333 1.2 8 1.2C6.12 1.2 4.51667 1.86 3.19 3.18C1.86333 4.5 1.2 6.10667 1.2 8C1.2 9.88 1.86333 11.4833 3.19 12.81C4.51667 14.1367 6.12 14.8 8 14.8Z"
+          fill="#ef4444"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4052_100277">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/module/completed.tsx b/packages/propel/src/icons/module/completed.tsx
index caf6ebb743..77d432d58a 100644
--- a/packages/propel/src/icons/module/completed.tsx
+++ b/packages/propel/src/icons/module/completed.tsx
@@ -2,18 +2,20 @@ import * as React from "react";
 
 import type { ISvgIcons } from "../type";
 
-export const ModuleCompletedIcon: React.FC<ISvgIcons> = ({ width = "20", height = "20", className }) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M6.80486 9.80731L4.84856 7.85103C4.73197 7.73443 4.58542 7.67478 4.4089 7.67208C4.23238 7.66937 4.08312 7.72902 3.96113 7.85103C3.83913 7.97302 3.77814 8.12093 3.77814 8.29474C3.77814 8.46855 3.83913 8.61645 3.96113 8.73844L6.27206 11.0494C6.42428 11.2016 6.60188 11.2777 6.80486 11.2777C7.00782 11.2777 7.18541 11.2016 7.33764 11.0494L12.0227 6.36435C12.1393 6.24776 12.1989 6.10121 12.2016 5.92469C12.2043 5.74817 12.1447 5.59891 12.0227 5.47692C11.9007 5.35493 11.7528 5.29393 11.579 5.29393C11.4051 5.29393 11.2572 5.35493 11.1353 5.47692L6.80486 9.80731ZM8.00141 16C6.89494 16 5.85491 15.79 4.88132 15.3701C3.90772 14.9502 3.06082 14.3803 2.34064 13.6604C1.62044 12.9405 1.05028 12.094 0.63017 11.1208C0.210057 10.1477 0 9.10788 0 8.00141C0 6.89494 0.209966 5.85491 0.629896 4.88132C1.04983 3.90772 1.61972 3.06082 2.33958 2.34064C3.05946 1.62044 3.90598 1.05028 4.87915 0.630171C5.8523 0.210058 6.89212 0 7.99859 0C9.10506 0 10.1451 0.209966 11.1187 0.629897C12.0923 1.04983 12.9392 1.61972 13.6594 2.33959C14.3796 3.05946 14.9497 3.90598 15.3698 4.87915C15.7899 5.8523 16 6.89212 16 7.99859C16 9.10506 15.79 10.1451 15.3701 11.1187C14.9502 12.0923 14.3803 12.9392 13.6604 13.6594C12.9405 14.3796 12.094 14.9497 11.1208 15.3698C10.1477 15.7899 9.10788 16 8.00141 16ZM8 14.7369C9.88071 14.7369 11.4737 14.0842 12.779 12.779C14.0842 11.4737 14.7369 9.88071 14.7369 8C14.7369 6.11929 14.0842 4.52631 12.779 3.22104C11.4737 1.91577 9.88071 1.26314 8 1.26314C6.11929 1.26314 4.52631 1.91577 3.22104 3.22104C1.91577 4.52631 1.26314 6.11929 1.26314 8C1.26314 9.88071 1.91577 11.4737 3.22104 12.779C4.52631 14.0842 6.11929 14.7369 8 14.7369Z"
-      fill="#16a34a"
-    />
-  </svg>
-);
+export function ModuleCompletedIcon({ width = "20", height = "20", className }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.80486 9.80731L4.84856 7.85103C4.73197 7.73443 4.58542 7.67478 4.4089 7.67208C4.23238 7.66937 4.08312 7.72902 3.96113 7.85103C3.83913 7.97302 3.77814 8.12093 3.77814 8.29474C3.77814 8.46855 3.83913 8.61645 3.96113 8.73844L6.27206 11.0494C6.42428 11.2016 6.60188 11.2777 6.80486 11.2777C7.00782 11.2777 7.18541 11.2016 7.33764 11.0494L12.0227 6.36435C12.1393 6.24776 12.1989 6.10121 12.2016 5.92469C12.2043 5.74817 12.1447 5.59891 12.0227 5.47692C11.9007 5.35493 11.7528 5.29393 11.579 5.29393C11.4051 5.29393 11.2572 5.35493 11.1353 5.47692L6.80486 9.80731ZM8.00141 16C6.89494 16 5.85491 15.79 4.88132 15.3701C3.90772 14.9502 3.06082 14.3803 2.34064 13.6604C1.62044 12.9405 1.05028 12.094 0.63017 11.1208C0.210057 10.1477 0 9.10788 0 8.00141C0 6.89494 0.209966 5.85491 0.629896 4.88132C1.04983 3.90772 1.61972 3.06082 2.33958 2.34064C3.05946 1.62044 3.90598 1.05028 4.87915 0.630171C5.8523 0.210058 6.89212 0 7.99859 0C9.10506 0 10.1451 0.209966 11.1187 0.629897C12.0923 1.04983 12.9392 1.61972 13.6594 2.33959C14.3796 3.05946 14.9497 3.90598 15.3698 4.87915C15.7899 5.8523 16 6.89212 16 7.99859C16 9.10506 15.79 10.1451 15.3701 11.1187C14.9502 12.0923 14.3803 12.9392 13.6604 13.6594C12.9405 14.3796 12.094 14.9497 11.1208 15.3698C10.1477 15.7899 9.10788 16 8.00141 16ZM8 14.7369C9.88071 14.7369 11.4737 14.0842 12.779 12.779C14.0842 11.4737 14.7369 9.88071 14.7369 8C14.7369 6.11929 14.0842 4.52631 12.779 3.22104C11.4737 1.91577 9.88071 1.26314 8 1.26314C6.11929 1.26314 4.52631 1.91577 3.22104 3.22104C1.91577 4.52631 1.26314 6.11929 1.26314 8C1.26314 9.88071 1.91577 11.4737 3.22104 12.779C4.52631 14.0842 6.11929 14.7369 8 14.7369Z"
+        fill="#16a34a"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/module/in-progress.tsx b/packages/propel/src/icons/module/in-progress.tsx
index 6b996c500d..8fa4681de1 100644
--- a/packages/propel/src/icons/module/in-progress.tsx
+++ b/packages/propel/src/icons/module/in-progress.tsx
@@ -2,42 +2,39 @@ import * as React from "react";
 
 import type { ISvgIcons } from "../type";
 
-export const ModuleInProgressIcon: React.FC<ISvgIcons> = ({
-  width = "20",
-  height = "20",
-  className,
-  color = "#f39e1f",
-}) => (
-  <svg
-    height={height}
-    width={width}
-    className={className}
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 152.93 152.95"
-  >
-    <g id="Layer_2" data-name="Layer 2">
-      <g id="Layer_1-2" data-name="Layer 1">
-        <path
-          fill={color}
-          d="M77.74,0C35.63-.62.78,32.9,0,74.94c-.77,42.74,33,77.34,76.23,78A76.48,76.48,0,0,0,77.74,0ZM75.46,142.68a66.24,66.24,0,1,1,3-132.45c35.71,1,66.31,31.26,64.16,70.08A66.23,66.23,0,0,1,75.46,142.68Z"
-        />
-        <path
-          fill={color}
-          d="M124.29,76.58a49.52,49.52,0,0,1-3.11,16.9c-.38,1-.77,1.27-1.81.78-2.15-1-4.34-1.92-6.56-2.72-1.3-.46-1.51-1-1-2.3a36.61,36.61,0,0,0,.64-23.77c-1-3.48-1.06-3.47,2.38-4.88,1.57-.65,3.15-1.27,4.68-2,.94-.44,1.34-.22,1.69.75A49.74,49.74,0,0,1,124.29,76.58Z"
-        />
-        <path
-          fill={color}
-          d="M94.65,32.63c-.1.22-.19.42-.27.63-1,2.5-2.08,5-3.09,7.51-.28.69-.55.89-1.37.59a37.3,37.3,0,0,0-26.82,0c-.91.34-1.15.08-1.46-.7-1-2.46-2-4.92-3.06-7.34-.42-.92-.07-1.18.69-1.46a47.66,47.66,0,0,1,34.43,0C94.06,32,94.68,32,94.65,32.63Z"
-        />
-        <path
-          fill={color}
-          d="M28.72,76.67a48.27,48.27,0,0,1,3-17.13c.45-1.25.92-1.34,2-.83,2.25,1,4.56,2,6.87,2.87.86.34,1.05.67.71,1.58a36.85,36.85,0,0,0-.07,26.36c.36,1,.3,1.46-.75,1.86-2.38.9-4.72,1.88-7,2.92-1,.43-1.33.2-1.68-.76A46.76,46.76,0,0,1,28.72,76.67Z"
-        />
-        <path
-          fill={color}
-          d="M76.37,124.22a48.11,48.11,0,0,1-16.91-3.08c-1.05-.38-1.26-.8-.79-1.82,1-2.31,2-4.66,2.93-7,.34-.87.69-1.06,1.61-.72a37.06,37.06,0,0,0,26.67,0c.75-.28,1.09-.23,1.39.55,1,2.56,2,5.13,3.18,7.65.49,1.08-.3,1.13-.86,1.34A46.53,46.53,0,0,1,76.37,124.22Z"
-        />
+export function ModuleInProgressIcon({ width = "20", height = "20", className, color = "#f39e1f" }: ISvgIcons) {
+  return (
+    <svg
+      height={height}
+      width={width}
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 152.93 152.95"
+    >
+      <g id="Layer_2" data-name="Layer 2">
+        <g id="Layer_1-2" data-name="Layer 1">
+          <path
+            fill={color}
+            d="M77.74,0C35.63-.62.78,32.9,0,74.94c-.77,42.74,33,77.34,76.23,78A76.48,76.48,0,0,0,77.74,0ZM75.46,142.68a66.24,66.24,0,1,1,3-132.45c35.71,1,66.31,31.26,64.16,70.08A66.23,66.23,0,0,1,75.46,142.68Z"
+          />
+          <path
+            fill={color}
+            d="M124.29,76.58a49.52,49.52,0,0,1-3.11,16.9c-.38,1-.77,1.27-1.81.78-2.15-1-4.34-1.92-6.56-2.72-1.3-.46-1.51-1-1-2.3a36.61,36.61,0,0,0,.64-23.77c-1-3.48-1.06-3.47,2.38-4.88,1.57-.65,3.15-1.27,4.68-2,.94-.44,1.34-.22,1.69.75A49.74,49.74,0,0,1,124.29,76.58Z"
+          />
+          <path
+            fill={color}
+            d="M94.65,32.63c-.1.22-.19.42-.27.63-1,2.5-2.08,5-3.09,7.51-.28.69-.55.89-1.37.59a37.3,37.3,0,0,0-26.82,0c-.91.34-1.15.08-1.46-.7-1-2.46-2-4.92-3.06-7.34-.42-.92-.07-1.18.69-1.46a47.66,47.66,0,0,1,34.43,0C94.06,32,94.68,32,94.65,32.63Z"
+          />
+          <path
+            fill={color}
+            d="M28.72,76.67a48.27,48.27,0,0,1,3-17.13c.45-1.25.92-1.34,2-.83,2.25,1,4.56,2,6.87,2.87.86.34,1.05.67.71,1.58a36.85,36.85,0,0,0-.07,26.36c.36,1,.3,1.46-.75,1.86-2.38.9-4.72,1.88-7,2.92-1,.43-1.33.2-1.68-.76A46.76,46.76,0,0,1,28.72,76.67Z"
+          />
+          <path
+            fill={color}
+            d="M76.37,124.22a48.11,48.11,0,0,1-16.91-3.08c-1.05-.38-1.26-.8-.79-1.82,1-2.31,2-4.66,2.93-7,.34-.87.69-1.06,1.61-.72a37.06,37.06,0,0,0,26.67,0c.75-.28,1.09-.23,1.39.55,1,2.56,2,5.13,3.18,7.65.49,1.08-.3,1.13-.86,1.34A46.53,46.53,0,0,1,76.37,124.22Z"
+          />
+        </g>
       </g>
-    </g>
-  </svg>
-);
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/module/module-status-icon.tsx b/packages/propel/src/icons/module/module-status-icon.tsx
index 9b9fcddd1e..875dd5ed41 100644
--- a/packages/propel/src/icons/module/module-status-icon.tsx
+++ b/packages/propel/src/icons/module/module-status-icon.tsx
@@ -16,7 +16,7 @@ type Props = {
   width?: string;
 };
 
-export const ModuleStatusIcon: React.FC<Props> = ({ status, className, height = "12px", width = "12px" }) => {
+export function ModuleStatusIcon({ status, className, height = "12px", width = "12px" }: Props) {
   if (status === "backlog") return <ModuleBacklogIcon className={className} height={height} width={width} />;
   else if (status === "cancelled") return <ModuleCancelledIcon className={className} height={height} width={width} />;
   else if (status === "completed") return <ModuleCompletedIcon className={className} height={height} width={width} />;
@@ -24,4 +24,4 @@ export const ModuleStatusIcon: React.FC<Props> = ({ status, className, height =
     return <ModuleInProgressIcon className={className} height={height} width={width} />;
   else if (status === "paused") return <ModulePausedIcon className={className} height={height} width={width} />;
   else return <ModulePlannedIcon className={className} height={height} width={width} />;
-};
+}
diff --git a/packages/propel/src/icons/module/paused.tsx b/packages/propel/src/icons/module/paused.tsx
index 021d2a8e15..d3afc0b525 100644
--- a/packages/propel/src/icons/module/paused.tsx
+++ b/packages/propel/src/icons/module/paused.tsx
@@ -2,25 +2,27 @@ import * as React from "react";
 
 import type { ISvgIcons } from "../type";
 
-export const ModulePausedIcon: React.FC<ISvgIcons> = ({ width = "20", height = "20", className }) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clipPath="url(#clip0_4052_100275)">
-      <path
-        d="M6.4435 10.34C6.6145 10.34 6.75667 10.2825 6.87 10.1675C6.98333 10.0525 7.04 9.91 7.04 9.74V6.24C7.04 6.07 6.98217 5.9275 6.8665 5.8125C6.75082 5.6975 6.60749 5.64 6.4365 5.64C6.2655 5.64 6.12333 5.6975 6.01 5.8125C5.89667 5.9275 5.84 6.07 5.84 6.24V9.74C5.84 9.91 5.89783 10.0525 6.0135 10.1675C6.12918 10.2825 6.27251 10.34 6.4435 10.34ZM9.5635 10.34C9.7345 10.34 9.87667 10.2825 9.99 10.1675C10.1033 10.0525 10.16 9.91 10.16 9.74V6.24C10.16 6.07 10.1022 5.9275 9.9865 5.8125C9.87082 5.6975 9.72749 5.64 9.5565 5.64C9.3855 5.64 9.24333 5.6975 9.13 5.8125C9.01667 5.9275 8.96 6.07 8.96 6.24V9.74C8.96 9.91 9.01783 10.0525 9.1335 10.1675C9.24918 10.2825 9.39251 10.34 9.5635 10.34ZM8 16C6.89333 16 5.85333 15.79 4.88 15.37C3.90667 14.95 3.06 14.38 2.34 13.66C1.62 12.94 1.05 12.0933 0.63 11.12C0.21 10.1467 0 9.10667 0 8C0 7.54667 0.0366667 7.09993 0.11 6.6598C0.183333 6.21965 0.293333 5.78639 0.44 5.36C0.493333 5.21333 0.593333 5.11667 0.74 5.07C0.886667 5.02333 1.02667 5.04199 1.16 5.12596C1.30285 5.20993 1.40523 5.33327 1.46714 5.49596C1.52905 5.65865 1.54 5.82 1.5 5.98C1.42 6.31333 1.35 6.64765 1.29 6.98294C1.23 7.31823 1.2 7.65725 1.2 8C1.2 9.89833 1.85875 11.5063 3.17624 12.8238C4.49375 14.1413 6.10167 14.8 8 14.8C9.89833 14.8 11.5063 14.1413 12.8238 12.8238C14.1413 11.5063 14.8 9.89833 14.8 8C14.8 6.10167 14.1413 4.49375 12.8238 3.17624C11.5063 1.85875 9.89833 1.2 8 1.2C7.63235 1.2 7.26852 1.22667 6.90852 1.28C6.54852 1.33333 6.19235 1.41333 5.84 1.52C5.68 1.57333 5.52 1.56667 5.36 1.5C5.2 1.43333 5.08667 1.32667 5.02 1.18C4.95333 1.03333 4.96 0.886667 5.04 0.74C5.12 0.593333 5.23333 0.493333 5.38 0.44C5.79333 0.306667 6.21333 0.2 6.64 0.12C7.06667 0.04 7.49333 0 7.92 0C9.02667 0 10.07 0.21 11.05 0.63C12.03 1.05 12.8863 1.62 13.6189 2.34C14.3516 3.06 14.9316 3.90667 15.3589 4.88C15.7863 5.85333 16 6.89333 16 8C16 9.10667 15.79 10.1467 15.37 11.12C14.95 12.0933 14.38 12.94 13.66 13.66C12.94 14.38 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM2.65764 3.62C2.37921 3.62 2.14333 3.52255 1.95 3.32764C1.75667 3.13275 1.66 2.89608 1.66 2.61764C1.66 2.33921 1.75745 2.10333 1.95236 1.91C2.14725 1.71667 2.38392 1.62 2.66236 1.62C2.94079 1.62 3.17667 1.71745 3.37 1.91236C3.56333 2.10725 3.66 2.34392 3.66 2.62236C3.66 2.90079 3.56255 3.13667 3.36764 3.33C3.17275 3.52333 2.93608 3.62 2.65764 3.62Z"
-        fill="#525252"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_4052_100275">
-        <rect width="16" height="16" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
+export function ModulePausedIcon({ width = "20", height = "20", className }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_4052_100275)">
+        <path
+          d="M6.4435 10.34C6.6145 10.34 6.75667 10.2825 6.87 10.1675C6.98333 10.0525 7.04 9.91 7.04 9.74V6.24C7.04 6.07 6.98217 5.9275 6.8665 5.8125C6.75082 5.6975 6.60749 5.64 6.4365 5.64C6.2655 5.64 6.12333 5.6975 6.01 5.8125C5.89667 5.9275 5.84 6.07 5.84 6.24V9.74C5.84 9.91 5.89783 10.0525 6.0135 10.1675C6.12918 10.2825 6.27251 10.34 6.4435 10.34ZM9.5635 10.34C9.7345 10.34 9.87667 10.2825 9.99 10.1675C10.1033 10.0525 10.16 9.91 10.16 9.74V6.24C10.16 6.07 10.1022 5.9275 9.9865 5.8125C9.87082 5.6975 9.72749 5.64 9.5565 5.64C9.3855 5.64 9.24333 5.6975 9.13 5.8125C9.01667 5.9275 8.96 6.07 8.96 6.24V9.74C8.96 9.91 9.01783 10.0525 9.1335 10.1675C9.24918 10.2825 9.39251 10.34 9.5635 10.34ZM8 16C6.89333 16 5.85333 15.79 4.88 15.37C3.90667 14.95 3.06 14.38 2.34 13.66C1.62 12.94 1.05 12.0933 0.63 11.12C0.21 10.1467 0 9.10667 0 8C0 7.54667 0.0366667 7.09993 0.11 6.6598C0.183333 6.21965 0.293333 5.78639 0.44 5.36C0.493333 5.21333 0.593333 5.11667 0.74 5.07C0.886667 5.02333 1.02667 5.04199 1.16 5.12596C1.30285 5.20993 1.40523 5.33327 1.46714 5.49596C1.52905 5.65865 1.54 5.82 1.5 5.98C1.42 6.31333 1.35 6.64765 1.29 6.98294C1.23 7.31823 1.2 7.65725 1.2 8C1.2 9.89833 1.85875 11.5063 3.17624 12.8238C4.49375 14.1413 6.10167 14.8 8 14.8C9.89833 14.8 11.5063 14.1413 12.8238 12.8238C14.1413 11.5063 14.8 9.89833 14.8 8C14.8 6.10167 14.1413 4.49375 12.8238 3.17624C11.5063 1.85875 9.89833 1.2 8 1.2C7.63235 1.2 7.26852 1.22667 6.90852 1.28C6.54852 1.33333 6.19235 1.41333 5.84 1.52C5.68 1.57333 5.52 1.56667 5.36 1.5C5.2 1.43333 5.08667 1.32667 5.02 1.18C4.95333 1.03333 4.96 0.886667 5.04 0.74C5.12 0.593333 5.23333 0.493333 5.38 0.44C5.79333 0.306667 6.21333 0.2 6.64 0.12C7.06667 0.04 7.49333 0 7.92 0C9.02667 0 10.07 0.21 11.05 0.63C12.03 1.05 12.8863 1.62 13.6189 2.34C14.3516 3.06 14.9316 3.90667 15.3589 4.88C15.7863 5.85333 16 6.89333 16 8C16 9.10667 15.79 10.1467 15.37 11.12C14.95 12.0933 14.38 12.94 13.66 13.66C12.94 14.38 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM2.65764 3.62C2.37921 3.62 2.14333 3.52255 1.95 3.32764C1.75667 3.13275 1.66 2.89608 1.66 2.61764C1.66 2.33921 1.75745 2.10333 1.95236 1.91C2.14725 1.71667 2.38392 1.62 2.66236 1.62C2.94079 1.62 3.17667 1.71745 3.37 1.91236C3.56333 2.10725 3.66 2.34392 3.66 2.62236C3.66 2.90079 3.56255 3.13667 3.36764 3.33C3.17275 3.52333 2.93608 3.62 2.65764 3.62Z"
+          fill="#525252"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4052_100275">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/module/planned.tsx b/packages/propel/src/icons/module/planned.tsx
index 0dd0433a7b..6dba8888a0 100644
--- a/packages/propel/src/icons/module/planned.tsx
+++ b/packages/propel/src/icons/module/planned.tsx
@@ -2,18 +2,20 @@ import * as React from "react";
 
 import type { ISvgIcons } from "../type";
 
-export const ModulePlannedIcon: React.FC<ISvgIcons> = ({ width = "20", height = "20", className }) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M8.57177 7.43329L11.3665 10.228C11.4883 10.3498 11.5441 10.4809 11.5339 10.6213C11.5238 10.7617 11.4578 10.8928 11.336 11.0146C11.2142 11.1364 11.0794 11.1973 10.9317 11.1973C10.784 11.1973 10.6492 11.1364 10.5274 11.0146L7.64476 8.12349C7.57709 8.05582 7.52408 7.98139 7.48574 7.90018C7.4474 7.81898 7.42823 7.72538 7.42823 7.61936V3.51362C7.42823 3.35574 7.48405 3.22097 7.5957 3.10932C7.70734 2.99768 7.84211 2.94185 8 2.94185C8.15789 2.94185 8.29266 2.99768 8.4043 3.10932C8.51595 3.22097 8.57177 3.35574 8.57177 3.51362V7.43329ZM0.806954 11.4933C0.573486 11.04 0.390212 10.5655 0.257131 10.0698C0.124064 9.57411 0.0383541 9.07477 0 8.57177H1.15709C1.18077 8.98793 1.24646 9.38746 1.35418 9.77036C1.46188 10.1533 1.60427 10.5297 1.78133 10.8996L0.806954 11.4933ZM0.021992 7.42823C0.0603462 6.92523 0.143806 6.4273 0.272371 5.93444C0.400937 5.4416 0.579131 4.96567 0.806954 4.50665L1.80333 5.07842C1.62062 5.44834 1.47315 5.82983 1.36093 6.22287C1.24872 6.61591 1.18077 7.0177 1.15709 7.42823H0.021992ZM3.52381 14.6128C3.10877 14.3286 2.71855 14.0103 2.35315 13.6578C1.98774 13.3054 1.66294 12.9217 1.37872 12.5067L2.3751 11.9044C2.5939 12.2507 2.84879 12.5656 3.13976 12.8492C3.43073 13.1329 3.74934 13.3914 4.09558 13.6249L3.52381 14.6128ZM2.3751 4.09558L1.37872 3.52381C1.66294 3.09411 1.98408 2.70163 2.34215 2.34637C2.70023 1.99112 3.09411 1.67139 3.52381 1.38719L4.09558 2.3751C3.75837 2.60856 3.44568 2.86571 3.15753 3.14653C2.86937 3.42736 2.60856 3.7437 2.3751 4.09558ZM7.42823 16C6.92523 15.9616 6.4273 15.8745 5.93444 15.7386C5.4416 15.6027 4.96567 15.4209 4.50665 15.193L5.07842 14.2187C5.44834 14.4014 5.82983 14.5452 6.22287 14.6501C6.61591 14.7549 7.0177 14.8192 7.42823 14.8429V16ZM5.10042 1.80333L4.50665 0.806954C4.96567 0.579131 5.4416 0.397272 5.93444 0.261376C6.4273 0.125479 6.92523 0.0383541 7.42823 0V1.15709C7.0177 1.18077 6.61957 1.24872 6.23386 1.36093C5.84815 1.47315 5.47034 1.62062 5.10042 1.80333ZM8.57177 16V14.8429C8.9823 14.8192 9.38409 14.7549 9.77713 14.6501C10.1702 14.5452 10.5517 14.4014 10.9216 14.2187L11.4933 15.193C11.0343 15.4209 10.5584 15.6027 10.0656 15.7386C9.5727 15.8745 9.07477 15.9616 8.57177 16ZM10.9216 1.78133C10.5517 1.59862 10.1702 1.45482 9.77713 1.34994C9.38409 1.24505 8.9823 1.18077 8.57177 1.15709V0C9.07477 0.0383541 9.5727 0.125479 10.0656 0.261376C10.5584 0.397272 11.0343 0.579131 11.4933 0.806954L10.9216 1.78133ZM12.4762 14.6128L11.9044 13.6469C12.2563 13.4134 12.5726 13.149 12.8535 12.8535C13.1343 12.558 13.3914 12.2416 13.6249 11.9044L14.6128 12.4982C14.3286 12.9132 14.0052 13.297 13.6426 13.6494C13.28 14.0018 12.8912 14.323 12.4762 14.6128ZM13.6249 4.08713C13.3914 3.74991 13.1306 3.43862 12.8425 3.15328C12.5543 2.86796 12.2416 2.60856 11.9044 2.3751L12.4762 1.38719C12.8912 1.67703 13.28 1.99817 13.6426 2.3506C14.0052 2.70304 14.3314 3.08678 14.6213 3.50181L13.6249 4.08713ZM14.8429 7.42823C14.8192 7.0177 14.7535 6.61957 14.6458 6.23386C14.5381 5.84815 14.3929 5.46752 14.2102 5.09197L15.193 4.50665C15.4265 4.96003 15.6098 5.43314 15.7429 5.926C15.8759 6.41884 15.9616 6.91958 16 7.42823H14.8429ZM15.193 11.4933L14.2187 10.9216C14.4014 10.5517 14.5452 10.1702 14.6501 9.77713C14.7549 9.38409 14.8192 8.9823 14.8429 8.57177H16C15.9616 9.07477 15.8745 9.5727 15.7386 10.0656C15.6027 10.5584 15.4209 11.0343 15.193 11.4933Z"
-      fill="#3f76ff"
-    />
-  </svg>
-);
+export function ModulePlannedIcon({ width = "20", height = "20", className }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.57177 7.43329L11.3665 10.228C11.4883 10.3498 11.5441 10.4809 11.5339 10.6213C11.5238 10.7617 11.4578 10.8928 11.336 11.0146C11.2142 11.1364 11.0794 11.1973 10.9317 11.1973C10.784 11.1973 10.6492 11.1364 10.5274 11.0146L7.64476 8.12349C7.57709 8.05582 7.52408 7.98139 7.48574 7.90018C7.4474 7.81898 7.42823 7.72538 7.42823 7.61936V3.51362C7.42823 3.35574 7.48405 3.22097 7.5957 3.10932C7.70734 2.99768 7.84211 2.94185 8 2.94185C8.15789 2.94185 8.29266 2.99768 8.4043 3.10932C8.51595 3.22097 8.57177 3.35574 8.57177 3.51362V7.43329ZM0.806954 11.4933C0.573486 11.04 0.390212 10.5655 0.257131 10.0698C0.124064 9.57411 0.0383541 9.07477 0 8.57177H1.15709C1.18077 8.98793 1.24646 9.38746 1.35418 9.77036C1.46188 10.1533 1.60427 10.5297 1.78133 10.8996L0.806954 11.4933ZM0.021992 7.42823C0.0603462 6.92523 0.143806 6.4273 0.272371 5.93444C0.400937 5.4416 0.579131 4.96567 0.806954 4.50665L1.80333 5.07842C1.62062 5.44834 1.47315 5.82983 1.36093 6.22287C1.24872 6.61591 1.18077 7.0177 1.15709 7.42823H0.021992ZM3.52381 14.6128C3.10877 14.3286 2.71855 14.0103 2.35315 13.6578C1.98774 13.3054 1.66294 12.9217 1.37872 12.5067L2.3751 11.9044C2.5939 12.2507 2.84879 12.5656 3.13976 12.8492C3.43073 13.1329 3.74934 13.3914 4.09558 13.6249L3.52381 14.6128ZM2.3751 4.09558L1.37872 3.52381C1.66294 3.09411 1.98408 2.70163 2.34215 2.34637C2.70023 1.99112 3.09411 1.67139 3.52381 1.38719L4.09558 2.3751C3.75837 2.60856 3.44568 2.86571 3.15753 3.14653C2.86937 3.42736 2.60856 3.7437 2.3751 4.09558ZM7.42823 16C6.92523 15.9616 6.4273 15.8745 5.93444 15.7386C5.4416 15.6027 4.96567 15.4209 4.50665 15.193L5.07842 14.2187C5.44834 14.4014 5.82983 14.5452 6.22287 14.6501C6.61591 14.7549 7.0177 14.8192 7.42823 14.8429V16ZM5.10042 1.80333L4.50665 0.806954C4.96567 0.579131 5.4416 0.397272 5.93444 0.261376C6.4273 0.125479 6.92523 0.0383541 7.42823 0V1.15709C7.0177 1.18077 6.61957 1.24872 6.23386 1.36093C5.84815 1.47315 5.47034 1.62062 5.10042 1.80333ZM8.57177 16V14.8429C8.9823 14.8192 9.38409 14.7549 9.77713 14.6501C10.1702 14.5452 10.5517 14.4014 10.9216 14.2187L11.4933 15.193C11.0343 15.4209 10.5584 15.6027 10.0656 15.7386C9.5727 15.8745 9.07477 15.9616 8.57177 16ZM10.9216 1.78133C10.5517 1.59862 10.1702 1.45482 9.77713 1.34994C9.38409 1.24505 8.9823 1.18077 8.57177 1.15709V0C9.07477 0.0383541 9.5727 0.125479 10.0656 0.261376C10.5584 0.397272 11.0343 0.579131 11.4933 0.806954L10.9216 1.78133ZM12.4762 14.6128L11.9044 13.6469C12.2563 13.4134 12.5726 13.149 12.8535 12.8535C13.1343 12.558 13.3914 12.2416 13.6249 11.9044L14.6128 12.4982C14.3286 12.9132 14.0052 13.297 13.6426 13.6494C13.28 14.0018 12.8912 14.323 12.4762 14.6128ZM13.6249 4.08713C13.3914 3.74991 13.1306 3.43862 12.8425 3.15328C12.5543 2.86796 12.2416 2.60856 11.9044 2.3751L12.4762 1.38719C12.8912 1.67703 13.28 1.99817 13.6426 2.3506C14.0052 2.70304 14.3314 3.08678 14.6213 3.50181L13.6249 4.08713ZM14.8429 7.42823C14.8192 7.0177 14.7535 6.61957 14.6458 6.23386C14.5381 5.84815 14.3929 5.46752 14.2102 5.09197L15.193 4.50665C15.4265 4.96003 15.6098 5.43314 15.7429 5.926C15.8759 6.41884 15.9616 6.91958 16 7.42823H14.8429ZM15.193 11.4933L14.2187 10.9216C14.4014 10.5517 14.5452 10.1702 14.6501 9.77713C14.7549 9.38409 14.8192 8.9823 14.8429 8.57177H16C15.9616 9.07477 15.8745 9.5727 15.7386 10.0656C15.6027 10.5584 15.4209 11.0343 15.193 11.4933Z"
+        fill="#3f76ff"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/monospace-icon.tsx b/packages/propel/src/icons/monospace-icon.tsx
index bca4abcfa5..a227a73869 100644
--- a/packages/propel/src/icons/monospace-icon.tsx
+++ b/packages/propel/src/icons/monospace-icon.tsx
@@ -2,15 +2,17 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const MonospaceIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...rest}>
-    <path
-      d="M10.6149 13.0746V11.9267H13.0648C13.4568 11.9267 13.7415 11.838 13.9188 11.6607C14.1055 11.4833 14.1988 11.208 14.1988 10.8347V9.8547L14.2268 8.45473H13.9748L14.2128 8.24474C14.2128 8.80472 14.0261 9.24805 13.6528 9.57471C13.2795 9.90137 12.7802 10.0647 12.1548 10.0647C11.3615 10.0647 10.7362 9.80804 10.2789 9.29472C9.82156 8.77206 9.5929 8.07207 9.5929 7.19476V5.57079C9.5929 4.69347 9.82156 3.99815 10.2789 3.48483C10.7362 2.97151 11.3615 2.71484 12.1548 2.71484C12.7802 2.71484 13.2795 2.87817 13.6528 3.20483C14.0261 3.53149 14.2128 3.97482 14.2128 4.53481L13.9748 4.32481H14.2128V2.85484H15.4588V10.8347C15.4588 11.5253 15.2441 12.0713 14.8148 12.4727C14.3948 12.874 13.8068 13.0746 13.0508 13.0746H10.6149ZM12.5328 8.97272C13.0555 8.97272 13.4662 8.80939 13.7648 8.48273C14.0635 8.15607 14.2128 7.70341 14.2128 7.12476V5.65479C14.2128 5.07613 14.0635 4.62347 13.7648 4.29681C13.4662 3.97015 13.0555 3.80682 12.5328 3.80682C12.0008 3.80682 11.5855 3.96549 11.2869 4.28281C10.9975 4.60014 10.8529 5.05746 10.8529 5.65479V7.12476C10.8529 7.72208 10.9975 8.1794 11.2869 8.49673C11.5855 8.81406 12.0008 8.97272 12.5328 8.97272Z"
-      fill="currentColor"
-    />
-    <path
-      d="M0.666626 10.5538L3.32657 0.333984H5.02054L7.66649 10.5538H6.39251L5.72053 7.83784H2.62659L1.9546 10.5538H0.666626ZM2.87858 6.77386H5.45453L4.67055 3.62392C4.52122 3.0266 4.40455 2.52727 4.32055 2.12595C4.23656 1.72462 4.18522 1.46329 4.16656 1.34196C4.14789 1.46329 4.09656 1.72462 4.01256 2.12595C3.92856 2.52727 3.8119 3.02193 3.66257 3.60992L2.87858 6.77386Z"
-      fill="currentColor"
-    />
-  </svg>
-);
+export function MonospaceIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...rest}>
+      <path
+        d="M10.6149 13.0746V11.9267H13.0648C13.4568 11.9267 13.7415 11.838 13.9188 11.6607C14.1055 11.4833 14.1988 11.208 14.1988 10.8347V9.8547L14.2268 8.45473H13.9748L14.2128 8.24474C14.2128 8.80472 14.0261 9.24805 13.6528 9.57471C13.2795 9.90137 12.7802 10.0647 12.1548 10.0647C11.3615 10.0647 10.7362 9.80804 10.2789 9.29472C9.82156 8.77206 9.5929 8.07207 9.5929 7.19476V5.57079C9.5929 4.69347 9.82156 3.99815 10.2789 3.48483C10.7362 2.97151 11.3615 2.71484 12.1548 2.71484C12.7802 2.71484 13.2795 2.87817 13.6528 3.20483C14.0261 3.53149 14.2128 3.97482 14.2128 4.53481L13.9748 4.32481H14.2128V2.85484H15.4588V10.8347C15.4588 11.5253 15.2441 12.0713 14.8148 12.4727C14.3948 12.874 13.8068 13.0746 13.0508 13.0746H10.6149ZM12.5328 8.97272C13.0555 8.97272 13.4662 8.80939 13.7648 8.48273C14.0635 8.15607 14.2128 7.70341 14.2128 7.12476V5.65479C14.2128 5.07613 14.0635 4.62347 13.7648 4.29681C13.4662 3.97015 13.0555 3.80682 12.5328 3.80682C12.0008 3.80682 11.5855 3.96549 11.2869 4.28281C10.9975 4.60014 10.8529 5.05746 10.8529 5.65479V7.12476C10.8529 7.72208 10.9975 8.1794 11.2869 8.49673C11.5855 8.81406 12.0008 8.97272 12.5328 8.97272Z"
+        fill="currentColor"
+      />
+      <path
+        d="M0.666626 10.5538L3.32657 0.333984H5.02054L7.66649 10.5538H6.39251L5.72053 7.83784H2.62659L1.9546 10.5538H0.666626ZM2.87858 6.77386H5.45453L4.67055 3.62392C4.52122 3.0266 4.40455 2.52727 4.32055 2.12595C4.23656 1.72462 4.18522 1.46329 4.16656 1.34196C4.14789 1.46329 4.09656 1.72462 4.01256 2.12595C3.92856 2.52727 3.8119 3.02193 3.66257 3.60992L2.87858 6.77386Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/multiple-sticky.tsx b/packages/propel/src/icons/multiple-sticky.tsx
index 6ec82be47c..2c1a7eb44c 100644
--- a/packages/propel/src/icons/multiple-sticky.tsx
+++ b/packages/propel/src/icons/multiple-sticky.tsx
@@ -2,27 +2,29 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const RecentStickyIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    {...rest}
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M2.23602 12.7638C2.60067 13.1285 3.09525 13.3333 3.61095 13.3333H9.72206C9.94307 13.3333 10.155 13.2455 10.3113 13.0892L13.0891 10.3115C13.2454 10.1552 13.3332 9.94323 13.3332 9.72221V3.6111C13.3332 3.0954 13.1283 2.60083 12.7637 2.23617C12.399 1.87152 11.9044 1.66666 11.3887 1.66666H3.61095C3.09525 1.66666 2.60067 1.87152 2.23602 2.23617C1.87136 2.60083 1.6665 3.0954 1.6665 3.6111V11.3889C1.6665 11.9046 1.87136 12.3992 2.23602 12.7638ZM11.0435 9.99999L9.99984 11.0437V10.2778C9.99984 10.2041 10.0291 10.1334 10.0812 10.0813C10.1333 10.0293 10.2039 9.99999 10.2776 9.99999H11.0435ZM8.33317 11.6667V10.2778C8.33317 9.76207 8.53803 9.26749 8.90269 8.90284C9.26734 8.53819 9.76192 8.33332 10.2776 8.33332H11.6665V3.6111C11.6665 3.53743 11.6372 3.46678 11.5851 3.41468C11.5331 3.36259 11.4624 3.33332 11.3887 3.33332H3.61095C3.53728 3.33332 3.46662 3.36259 3.41453 3.41468C3.36244 3.46678 3.33317 3.53743 3.33317 3.6111V11.3889C3.33317 11.4626 3.36244 11.5332 3.41453 11.5853C3.46662 11.6374 3.53728 11.6667 3.61095 11.6667H8.33317Z"
-      fill="currentColor"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M6.36088 16.832C6.65667 17.2545 7.10816 17.5421 7.61603 17.6317L13.6343 18.6928C13.852 18.7312 14.0759 18.6816 14.257 18.5548L17.4749 16.3016C17.656 16.1748 17.7792 15.9813 17.8176 15.7636L18.8788 9.74538C18.9683 9.23752 18.8525 8.71488 18.5567 8.29244C18.2609 7.87001 17.8094 7.58238 17.3015 7.49283L15.1445 7.11249C14.6913 7.03257 14.2591 7.33521 14.1792 7.78846C14.0992 8.2417 14.4019 8.67392 14.8551 8.75384L17.0121 9.13417C17.0847 9.14697 17.1492 9.18806 17.1914 9.2484C17.2337 9.30875 17.2502 9.38341 17.2374 9.45597L16.4174 14.1064L15.0497 13.8653C14.5418 13.7757 14.0192 13.8916 13.5967 14.1874C13.1743 14.4832 12.8867 14.9347 12.7971 15.4425L12.5559 16.8103L7.90544 15.9903C7.83289 15.9775 7.76839 15.9364 7.72613 15.8761C7.68388 15.8157 7.66733 15.7411 7.68012 15.6685L7.77252 15.1445C7.85244 14.6913 7.5498 14.259 7.09655 14.1791C6.64331 14.0992 6.21109 14.4018 6.13117 14.8551L6.03877 15.3791C5.94922 15.887 6.06509 16.4096 6.36088 16.832ZM14.3054 16.4862L14.4384 15.7319C14.4512 15.6594 14.4923 15.5949 14.5527 15.5526C14.613 15.5104 14.6877 15.4938 14.7602 15.5066L15.5145 15.6396L14.3054 16.4862Z"
-      fill="currentColor"
-    />
-  </svg>
-);
+export function RecentStickyIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...rest}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.23602 12.7638C2.60067 13.1285 3.09525 13.3333 3.61095 13.3333H9.72206C9.94307 13.3333 10.155 13.2455 10.3113 13.0892L13.0891 10.3115C13.2454 10.1552 13.3332 9.94323 13.3332 9.72221V3.6111C13.3332 3.0954 13.1283 2.60083 12.7637 2.23617C12.399 1.87152 11.9044 1.66666 11.3887 1.66666H3.61095C3.09525 1.66666 2.60067 1.87152 2.23602 2.23617C1.87136 2.60083 1.6665 3.0954 1.6665 3.6111V11.3889C1.6665 11.9046 1.87136 12.3992 2.23602 12.7638ZM11.0435 9.99999L9.99984 11.0437V10.2778C9.99984 10.2041 10.0291 10.1334 10.0812 10.0813C10.1333 10.0293 10.2039 9.99999 10.2776 9.99999H11.0435ZM8.33317 11.6667V10.2778C8.33317 9.76207 8.53803 9.26749 8.90269 8.90284C9.26734 8.53819 9.76192 8.33332 10.2776 8.33332H11.6665V3.6111C11.6665 3.53743 11.6372 3.46678 11.5851 3.41468C11.5331 3.36259 11.4624 3.33332 11.3887 3.33332H3.61095C3.53728 3.33332 3.46662 3.36259 3.41453 3.41468C3.36244 3.46678 3.33317 3.53743 3.33317 3.6111V11.3889C3.33317 11.4626 3.36244 11.5332 3.41453 11.5853C3.46662 11.6374 3.53728 11.6667 3.61095 11.6667H8.33317Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.36088 16.832C6.65667 17.2545 7.10816 17.5421 7.61603 17.6317L13.6343 18.6928C13.852 18.7312 14.0759 18.6816 14.257 18.5548L17.4749 16.3016C17.656 16.1748 17.7792 15.9813 17.8176 15.7636L18.8788 9.74538C18.9683 9.23752 18.8525 8.71488 18.5567 8.29244C18.2609 7.87001 17.8094 7.58238 17.3015 7.49283L15.1445 7.11249C14.6913 7.03257 14.2591 7.33521 14.1792 7.78846C14.0992 8.2417 14.4019 8.67392 14.8551 8.75384L17.0121 9.13417C17.0847 9.14697 17.1492 9.18806 17.1914 9.2484C17.2337 9.30875 17.2502 9.38341 17.2374 9.45597L16.4174 14.1064L15.0497 13.8653C14.5418 13.7757 14.0192 13.8916 13.5967 14.1874C13.1743 14.4832 12.8867 14.9347 12.7971 15.4425L12.5559 16.8103L7.90544 15.9903C7.83289 15.9775 7.76839 15.9364 7.72613 15.8761C7.68388 15.8157 7.66733 15.7411 7.68012 15.6685L7.77252 15.1445C7.85244 14.6913 7.5498 14.259 7.09655 14.1791C6.64331 14.0992 6.21109 14.4018 6.13117 14.8551L6.03877 15.3791C5.94922 15.887 6.06509 16.4096 6.36088 16.832ZM14.3054 16.4862L14.4384 15.7319C14.4512 15.6594 14.4923 15.5949 14.5527 15.5526C14.613 15.5104 14.6877 15.4938 14.7602 15.5066L15.5145 15.6396L14.3054 16.4862Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/off-track-icon.tsx b/packages/propel/src/icons/off-track-icon.tsx
index 638bb689f8..76ee3a1134 100644
--- a/packages/propel/src/icons/off-track-icon.tsx
+++ b/packages/propel/src/icons/off-track-icon.tsx
@@ -2,20 +2,22 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const OffTrackIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16" }) => (
-  <svg width={width} height={height} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clipPath="url(#clip0_365_7595)">
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M2.03658 7.33335H2.66663C3.03482 7.33335 3.33329 7.63183 3.33329 8.00002C3.33329 8.36821 3.03482 8.66669 2.66663 8.66669H2.03658C2.36821 11.6667 4.91159 14 7.99996 14C11.0883 14 13.6317 11.6667 13.9633 8.66669H13.3333C12.9651 8.66669 12.6666 8.36821 12.6666 8.00002C12.6666 7.63183 12.9651 7.33335 13.3333 7.33335H13.9633C13.6317 4.33339 11.0883 2.00002 7.99996 2.00002C4.91159 2.00002 2.36821 4.33339 2.03658 7.33335ZM0.666626 8.00002C0.666626 3.94993 3.94987 0.666687 7.99996 0.666687C12.05 0.666687 15.3333 3.94993 15.3333 8.00002C15.3333 12.0501 12.05 15.3334 7.99996 15.3334C3.94987 15.3334 0.666626 12.0501 0.666626 8.00002ZM6.66663 4.66669C7.03482 4.66669 7.33329 4.96516 7.33329 5.33335V8.00002C7.33329 8.36821 7.03482 8.66669 6.66663 8.66669C6.29844 8.66669 5.99996 8.36821 5.99996 8.00002V5.33335C5.99996 4.96516 6.29844 4.66669 6.66663 4.66669ZM9.33329 4.66669C9.70148 4.66669 9.99996 4.96516 9.99996 5.33335V8.00002C9.99996 8.36821 9.70148 8.66669 9.33329 8.66669C8.9651 8.66669 8.66663 8.36821 8.66663 8.00002V5.33335C8.66663 4.96516 8.9651 4.66669 9.33329 4.66669ZM5.99996 10.6667C5.99996 10.2985 6.29844 10 6.66663 10H6.67329C7.04148 10 7.33996 10.2985 7.33996 10.6667C7.33996 11.0349 7.04148 11.3334 6.67329 11.3334H6.66663C6.29844 11.3334 5.99996 11.0349 5.99996 10.6667ZM8.66663 10.6667C8.66663 10.2985 8.9651 10 9.33329 10H9.33996C9.70815 10 10.0066 10.2985 10.0066 10.6667C10.0066 11.0349 9.70815 11.3334 9.33996 11.3334H9.33329C8.9651 11.3334 8.66663 11.0349 8.66663 10.6667Z"
-        fill="#CC0000"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_365_7595">
-        <rect width="16" height="16" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
+export function OffTrackIcon({ width = "16", height = "16" }: ISvgIcons) {
+  return (
+    <svg width={width} height={height} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_365_7595)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M2.03658 7.33335H2.66663C3.03482 7.33335 3.33329 7.63183 3.33329 8.00002C3.33329 8.36821 3.03482 8.66669 2.66663 8.66669H2.03658C2.36821 11.6667 4.91159 14 7.99996 14C11.0883 14 13.6317 11.6667 13.9633 8.66669H13.3333C12.9651 8.66669 12.6666 8.36821 12.6666 8.00002C12.6666 7.63183 12.9651 7.33335 13.3333 7.33335H13.9633C13.6317 4.33339 11.0883 2.00002 7.99996 2.00002C4.91159 2.00002 2.36821 4.33339 2.03658 7.33335ZM0.666626 8.00002C0.666626 3.94993 3.94987 0.666687 7.99996 0.666687C12.05 0.666687 15.3333 3.94993 15.3333 8.00002C15.3333 12.0501 12.05 15.3334 7.99996 15.3334C3.94987 15.3334 0.666626 12.0501 0.666626 8.00002ZM6.66663 4.66669C7.03482 4.66669 7.33329 4.96516 7.33329 5.33335V8.00002C7.33329 8.36821 7.03482 8.66669 6.66663 8.66669C6.29844 8.66669 5.99996 8.36821 5.99996 8.00002V5.33335C5.99996 4.96516 6.29844 4.66669 6.66663 4.66669ZM9.33329 4.66669C9.70148 4.66669 9.99996 4.96516 9.99996 5.33335V8.00002C9.99996 8.36821 9.70148 8.66669 9.33329 8.66669C8.9651 8.66669 8.66663 8.36821 8.66663 8.00002V5.33335C8.66663 4.96516 8.9651 4.66669 9.33329 4.66669ZM5.99996 10.6667C5.99996 10.2985 6.29844 10 6.66663 10H6.67329C7.04148 10 7.33996 10.2985 7.33996 10.6667C7.33996 11.0349 7.04148 11.3334 6.67329 11.3334H6.66663C6.29844 11.3334 5.99996 11.0349 5.99996 10.6667ZM8.66663 10.6667C8.66663 10.2985 8.9651 10 9.33329 10H9.33996C9.70815 10 10.0066 10.2985 10.0066 10.6667C10.0066 11.0349 9.70815 11.3334 9.33996 11.3334H9.33329C8.9651 11.3334 8.66663 11.0349 8.66663 10.6667Z"
+          fill="#CC0000"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_365_7595">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/on-track-icon.tsx b/packages/propel/src/icons/on-track-icon.tsx
index 26bb9f92c3..53a977799f 100644
--- a/packages/propel/src/icons/on-track-icon.tsx
+++ b/packages/propel/src/icons/on-track-icon.tsx
@@ -2,41 +2,43 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const OnTrackIcon: React.FC<ISvgIcons> = ({ width = "16", height = "16" }) => (
-  <svg width={width} height={height} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clipPath="url(#clip0_365_7535)">
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M11.0001 2.80075C9.81139 2.11486 8.42345 1.85723 7.06776 2.07082C5.71206 2.28441 4.47057 2.9563 3.55031 3.97445C2.63004 4.9926 2.08664 6.29547 2.01071 7.66578C1.93479 9.03609 2.33093 10.391 3.13308 11.5046C3.93523 12.6182 5.0949 13.4231 6.4187 13.7852C7.74249 14.1472 9.1504 14.0445 10.4076 13.4941C11.6649 12.9438 12.6954 11.979 13.3274 10.7608C13.9594 9.5426 14.1547 8.14453 13.8807 6.79975C13.8072 6.43897 14.0401 6.08691 14.4009 6.0134C14.7616 5.93988 15.1137 6.17276 15.1872 6.53353C15.5221 8.17715 15.2834 9.88591 14.511 11.3748C13.7385 12.8638 12.4789 14.0429 10.9423 14.7156C9.4057 15.3882 7.68493 15.5138 6.06696 15.0713C4.44898 14.6288 3.03161 13.645 2.05121 12.2839C1.0708 10.9229 0.586626 9.26684 0.679423 7.59202C0.772221 5.91719 1.43638 4.3248 2.56115 3.08039C3.68591 1.83598 5.2033 1.01478 6.86025 0.753732C8.51721 0.492682 10.2136 0.807564 11.6665 1.64587C11.9854 1.82987 12.0947 2.23757 11.9107 2.55648C11.7267 2.8754 11.319 2.98476 11.0001 2.80075ZM15.138 2.19524C15.3984 2.45559 15.3984 2.8777 15.138 3.13805L8.47136 9.80471C8.21101 10.0651 7.7889 10.0651 7.52855 9.80471L5.52856 7.80471C5.26821 7.54436 5.26821 7.12225 5.52856 6.8619C5.7889 6.60155 6.21101 6.60155 6.47136 6.8619L7.99996 8.3905L14.1952 2.19524C14.4556 1.93489 14.8777 1.93489 15.138 2.19524Z"
-        fill="#1FAD40"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7.99996 15.3333C7.63177 15.3333 7.33329 15.0348x33329 14.6666V13.3333C7.33329 12.9651 7.63177 12.6666 7.99996 12.6666C8.36815 12.6666 8.66663 12.9651 8.66663 13.3333V14.6666C8.66663 15.0348 8.36815 15.3333 7.99996 15.3333Z"
-        fill="#1FAD40"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7.99996 3.33331C7.63177 3.33331 7.33329 3.03483 7.33329 2.66664V1.33331C7.33329 0.965117 7.63177 0.66664 7.99996 0.66664C8.36815 0.66664 8.66663 0.965117 8.66663 1.33331V2.66664C8.66663 3.03483 8.36815 3.33331 7.99996 3.33331Z"
-        fill="#1FAD40"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M3.33329 7.99997C3.33329 8.36816 3.03482 8.66664 2.66663 8.66664H1.33329C0.965103 8.66664 0.666626 8.36816 0.666626 7.99997C0.666626 7.63178 0.965103 7.33331 1.33329 7.33331H2.66663C3.03482 7.33331 3.33329 7.63178 3.33329 7.99997Z"
-        fill="#1FAD40"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_365_7535">
+export function OnTrackIcon({ width = "16", height = "16" }: ISvgIcons) {
+  return (
+    <svg width={width} height={height} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_365_7535)">
         <path
-          d="M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2Z"
-          fill="white"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M11.0001 2.80075C9.81139 2.11486 8.42345 1.85723 7.06776 2.07082C5.71206 2.28441 4.47057 2.9563 3.55031 3.97445C2.63004 4.9926 2.08664 6.29547 2.01071 7.66578C1.93479 9.03609 2.33093 10.391 3.13308 11.5046C3.93523 12.6182 5.0949 13.4231 6.4187 13.7852C7.74249 14.1472 9.1504 14.0445 10.4076 13.4941C11.6649 12.9438 12.6954 11.979 13.3274 10.7608C13.9594 9.5426 14.1547 8.14453 13.8807 6.79975C13.8072 6.43897 14.0401 6.08691 14.4009 6.0134C14.7616 5.93988 15.1137 6.17276 15.1872 6.53353C15.5221 8.17715 15.2834 9.88591 14.511 11.3748C13.7385 12.8638 12.4789 14.0429 10.9423 14.7156C9.4057 15.3882 7.68493 15.5138 6.06696 15.0713C4.44898 14.6288 3.03161 13.645 2.05121 12.2839C1.0708 10.9229 0.586626 9.26684 0.679423 7.59202C0.772221 5.91719 1.43638 4.3248 2.56115 3.08039C3.68591 1.83598 5.2033 1.01478 6.86025 0.753732C8.51721 0.492682 10.2136 0.807564 11.6665 1.64587C11.9854 1.82987 12.0947 2.23757 11.9107 2.55648C11.7267 2.8754 11.319 2.98476 11.0001 2.80075ZM15.138 2.19524C15.3984 2.45559 15.3984 2.8777 15.138 3.13805L8.47136 9.80471C8.21101 10.0651 7.7889 10.0651 7.52855 9.80471L5.52856 7.80471C5.26821 7.54436 5.26821 7.12225 5.52856 6.8619C5.7889 6.60155 6.21101 6.60155 6.47136 6.8619L7.99996 8.3905L14.1952 2.19524C14.4556 1.93489 14.8777 1.93489 15.138 2.19524Z"
+          fill="#1FAD40"
         />
-      </clipPath>
-    </defs>
-  </svg>
-);
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7.99996 15.3333C7.63177 15.3333 7.33329 15.0348x33329 14.6666V13.3333C7.33329 12.9651 7.63177 12.6666 7.99996 12.6666C8.36815 12.6666 8.66663 12.9651 8.66663 13.3333V14.6666C8.66663 15.0348 8.36815 15.3333 7.99996 15.3333Z"
+          fill="#1FAD40"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7.99996 3.33331C7.63177 3.33331 7.33329 3.03483 7.33329 2.66664V1.33331C7.33329 0.965117 7.63177 0.66664 7.99996 0.66664C8.36815 0.66664 8.66663 0.965117 8.66663 1.33331V2.66664C8.66663 3.03483 8.36815 3.33331 7.99996 3.33331Z"
+          fill="#1FAD40"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M3.33329 7.99997C3.33329 8.36816 3.03482 8.66664 2.66663 8.66664H1.33329C0.965103 8.66664 0.666626 8.36816 0.666626 7.99997C0.666626 7.63178 0.965103 7.33331 1.33329 7.33331H2.66663C3.03482 7.33331 3.33329 7.63178 3.33329 7.99997Z"
+          fill="#1FAD40"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_365_7535">
+          <path
+            d="M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2Z"
+            fill="white"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/overview-icon.tsx b/packages/propel/src/icons/overview-icon.tsx
index 6fe8f34fc9..99f99728c3 100644
--- a/packages/propel/src/icons/overview-icon.tsx
+++ b/packages/propel/src/icons/overview-icon.tsx
@@ -2,13 +2,15 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const OverviewIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg viewBox="0 0 12 12" className={className} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M0.5 1C0.5 0.867392 0.552678 0.740215 0.646447 0.646447C0.740215 0.552678 0.867392 0.5 1 0.5H1.5C7.02267 0.5 11.5 4.97733 11.5 10.5V11C11.5 11.1326 11.4473 11.2598 11.3536 11.3536C11.2598 11.4473 11.1326 11.5 11 11.5H10.5C10.3674 11.5 10.2402 11.4473 10.1464 11.3536C10.0527 11.2598 10 11.1326 10 11V10.5C10 5.80533 6.19467 2 1.5 2H1C0.867392 2 0.740215 1.94732 0.646447 1.85355C0.552678 1.75979 0.5 1.63261 0.5 1.5V1ZM0.5 5.5C0.5 5.36739 0.552678 5.24022 0.646447 5.14645C0.740215 5.05268 0.867392 5 1 5H1.5C2.22227 5 2.93747 5.14226 3.60476 5.41866C4.27205 5.69506 4.87837 6.10019 5.38909 6.61091C5.89981 7.12164 6.30494 7.72795 6.58134 8.39524C6.85774 9.06253 7 9.77773 7 10.5V11C7 11.1326 6.94732 11.2598 6.85355 11.3536C6.75978 11.4473 6.63261 11.5 6.5 11.5H6C5.86739 11.5 5.74022 11.4473 5.64645 11.3536C5.55268 11.2598 5.5 11.1326 5.5 11V10.5C5.5 9.43913 5.07857 8.42172 4.32843 7.67157C3.57828 6.92143 2.56087 6.5 1.5 6.5H1C0.867392 6.5 0.740215 6.44732 0.646447 6.35355C0.552678 6.25978 0.5 6.13261 0.5 6V5.5ZM0.5 10.5C0.5 10.2348 0.605357 9.98043 0.792893 9.79289C0.98043 9.60536 1.23478 9.5 1.5 9.5C1.76522 9.5 2.01957 9.60536 2.20711 9.79289C2.39464 9.98043 2.5 10.2348 2.5 10.5C2.5 10.7652 2.39464 11.0196 2.20711 11.2071C2.01957 11.3946 1.76522 11.5 1.5 11.5C1.23478 11.5 0.98043 11.3946 0.792893 11.2071C0.605357 11.0196 0.5 10.7652 0.5 10.5Z"
-      fill="currentColor"
-    />
-  </svg>
-);
+export function OverviewIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg viewBox="0 0 12 12" className={className} fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.5 1C0.5 0.867392 0.552678 0.740215 0.646447 0.646447C0.740215 0.552678 0.867392 0.5 1 0.5H1.5C7.02267 0.5 11.5 4.97733 11.5 10.5V11C11.5 11.1326 11.4473 11.2598 11.3536 11.3536C11.2598 11.4473 11.1326 11.5 11 11.5H10.5C10.3674 11.5 10.2402 11.4473 10.1464 11.3536C10.0527 11.2598 10 11.1326 10 11V10.5C10 5.80533 6.19467 2 1.5 2H1C0.867392 2 0.740215 1.94732 0.646447 1.85355C0.552678 1.75979 0.5 1.63261 0.5 1.5V1ZM0.5 5.5C0.5 5.36739 0.552678 5.24022 0.646447 5.14645C0.740215 5.05268 0.867392 5 1 5H1.5C2.22227 5 2.93747 5.14226 3.60476 5.41866C4.27205 5.69506 4.87837 6.10019 5.38909 6.61091C5.89981 7.12164 6.30494 7.72795 6.58134 8.39524C6.85774 9.06253 7 9.77773 7 10.5V11C7 11.1326 6.94732 11.2598 6.85355 11.3536C6.75978 11.4473 6.63261 11.5 6.5 11.5H6C5.86739 11.5 5.74022 11.4473 5.64645 11.3536C5.55268 11.2598 5.5 11.1326 5.5 11V10.5C5.5 9.43913 5.07857 8.42172 4.32843 7.67157C3.57828 6.92143 2.56087 6.5 1.5 6.5H1C0.867392 6.5 0.740215 6.44732 0.646447 6.35355C0.552678 6.25978 0.5 6.13261 0.5 6V5.5ZM0.5 10.5C0.5 10.2348 0.605357 9.98043 0.792893 9.79289C0.98043 9.60536 1.23478 9.5 1.5 9.5C1.76522 9.5 2.01957 9.60536 2.20711 9.79289C2.39464 9.98043 2.5 10.2348 2.5 10.5C2.5 10.7652 2.39464 11.0196 2.20711 11.2071C2.01957 11.3946 1.76522 11.5 1.5 11.5C1.23478 11.5 0.98043 11.3946 0.792893 11.2071C0.605357 11.0196 0.5 10.7652 0.5 10.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/pending-icon.tsx b/packages/propel/src/icons/pending-icon.tsx
index efbe59318e..ba97a4b499 100644
--- a/packages/propel/src/icons/pending-icon.tsx
+++ b/packages/propel/src/icons/pending-icon.tsx
@@ -2,26 +2,28 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const PendingState: React.FC<ISvgIcons> = ({ width = "10", height = "11", className, color = "#455068" }) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12Z"
-      fill={color}
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M12 5C12.5523 5 13 5.44772 13 6V11.382L16.4472 13.1056C16.9412 13.3526 17.1414 13.9532 16.8944 14.4472C16.6474 14.9412 16.0468 15.1414 15.5528 14.8944L11.5528 12.8944C11.214 12.725 11 12.3788 11 12V6C11 5.44772 11.4477 5 12 5Z"
-      fill={color}
-    />
-  </svg>
-);
+export function PendingState({ width = "10", height = "11", className, color = "#455068" }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3ZM1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12Z"
+        fill={color}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 5C12.5523 5 13 5.44772 13 6V11.382L16.4472 13.1056C16.9412 13.3526 17.1414 13.9532 16.8944 14.4472C16.6474 14.9412 16.0468 15.1414 15.5528 14.8944L11.5528 12.8944C11.214 12.725 11 12.3788 11 12V6C11 5.44772 11.4477 5 12 5Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/photo-filter-icon.tsx b/packages/propel/src/icons/photo-filter-icon.tsx
index 162ac90488..9546bd2621 100644
--- a/packages/propel/src/icons/photo-filter-icon.tsx
+++ b/packages/propel/src/icons/photo-filter-icon.tsx
@@ -2,31 +2,33 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const PhotoFilterIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} stroke-2`}
-    stroke="currentColor"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <path
-      d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H12"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M19 3L18.5778 4.28889C18.5562 4.35583 18.519 4.41668 18.4692 4.46643C18.4195 4.51619 18.3587 4.55344 18.2918 4.57511L17 5L18.2889 5.42222C18.3558 5.44384 18.4167 5.48104 18.4664 5.53076C18.5162 5.58048 18.5534 5.6413 18.5751 5.70822L19 7L19.4222 5.71111C19.4438 5.64417 19.481 5.58332 19.5308 5.53357C19.5805 5.48381 19.6413 5.44656 19.7082 5.42489L21 5L19.7111 4.57778C19.6442 4.55616 19.5833 4.51896 19.5336 4.46924C19.4838 4.41952 19.4466 4.3587 19.4249 4.29178L19 3Z"
-      fill="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M12 9L11.3667 10.9333C11.3342 11.0337 11.2784 11.125 11.2039 11.1997C11.1293 11.2743 11.038 11.3302 10.9377 11.3627L9 12L10.9333 12.6333C11.0337 12.6658 11.125 12.7216 11.1997 12.7961C11.2743 12.8707 11.3302 12.962 11.3627 13.0623L12 15L12.6333 13.0667C12.6658 12.9663 12.7216 12.875 12.7961 12.8003C12.8707 12.7257 12.962 12.6698 13.0623 12.6373L15 12L13.0667 11.3667C12.9663 11.3342 12.875 11.2784 12.8003 11.2039C12.7257 11.1293 12.6698 11.038 12.6373 10.9377L12 9Z"
-      fill="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+export function PhotoFilterIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M21 12V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H12"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19 3L18.5778 4.28889C18.5562 4.35583 18.519 4.41668 18.4692 4.46643C18.4195 4.51619 18.3587 4.55344 18.2918 4.57511L17 5L18.2889 5.42222C18.3558 5.44384 18.4167 5.48104 18.4664 5.53076C18.5162 5.58048 18.5534 5.6413 18.5751 5.70822L19 7L19.4222 5.71111C19.4438 5.64417 19.481 5.58332 19.5308 5.53357C19.5805 5.48381 19.6413 5.44656 19.7082 5.42489L21 5L19.7111 4.57778C19.6442 4.55616 19.5833 4.51896 19.5336 4.46924C19.4838 4.41952 19.4466 4.3587 19.4249 4.29178L19 3Z"
+        fill="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M12 9L11.3667 10.9333C11.3342 11.0337 11.2784 11.125 11.2039 11.1997C11.1293 11.2743 11.038 11.3302 10.9377 11.3627L9 12L10.9333 12.6333C11.0337 12.6658 11.125 12.7216 11.1997 12.7961C11.2743 12.8707 11.3302 12.962 11.3627 13.0623L12 15L12.6333 13.0667C12.6658 12.9663 12.7216 12.875 12.7961 12.8003C12.8707 12.7257 12.962 12.6698 13.0623 12.6373L15 12L13.0667 11.3667C12.9663 11.3342 12.875 11.2784 12.8003 11.2039C12.7257 11.1293 12.6698 11.038 12.6373 10.9377L12 9Z"
+        fill="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/planned-icon.tsx b/packages/propel/src/icons/planned-icon.tsx
index e8ac5ae6e3..298960c4c3 100644
--- a/packages/propel/src/icons/planned-icon.tsx
+++ b/packages/propel/src/icons/planned-icon.tsx
@@ -2,39 +2,41 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const PlannedState: React.FC<ISvgIcons> = ({ width = "10", height = "11", className }) => (
-  <svg
-    width={width}
-    height={height}
-    viewBox="0 0 12 13"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <g clipPath="url(#clip0_3180_28635)">
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7.11853 4.7C7.20073 4.88749 7.38342 5.01866 7.59656 5.02037C7.88848 5.02271 8.12698 4.7813 8.12925 4.48116L8.13344 3.92962C8.1348 3.74982 8.04958 3.58096 7.90581 3.47859C7.76203 3.37623 7.57832 3.3536 7.41509 3.41815L3.97959 4.77682C3.77547 4.85755 3.64077 5.05919 3.64077 5.28406L3.64077 9.0883C3.64077 9.27834 3.73732 9.45458 3.8954 9.55308C4.05347 9.65157 4.25011 9.65802 4.41396 9.57008L4.90523 9.30643C5.16402 9.16754 5.26431 8.83925 5.12922 8.57317C5.04115 8.39971 4.8748 8.29551 4.69795 8.28247L4.69795 5.65729L7.11853 4.7Z"
-        fill="#455068"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5.00428 3.06914C5.08648 3.25663 5.26916 3.3878 5.4823 3.38951C5.77422 3.39185 6.01272 3.15044 6.015 2.8503L6.01918 2.29876C6.02054 2.11896 5.93532 1.9501 5.79155 1.84774C5.64777 1.74537 5.46406 1.72274 5.30084 1.78729L1.86534 3.14597C1.66121 3.22669 1.52652 3.42834 1.52652 3.6532L1.52652 7.45745C1.52652 7.64749 1.62307 7.82372 1.78114 7.92222C1.93922 8.02071 2.13585 8.02716 2.29971 7.93922L2.79097 7.67557C3.04977 7.53668 3.15005 7.20839 3.01496 6.94231C2.92689 6.76885 2.76054 6.66465 2.5837 6.65161L2.5837 4.02643L5.00428 3.06914Z"
-        fill="#455068"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M10.473 9.34799C10.4728 9.57269 10.3382 9.77413 10.1342 9.85482L6.70129 11.2129C6.53874 11.2772 6.35582 11.255 6.21225 11.1536C6.06867 11.0523 5.98288 10.8847 5.98288 10.7056L5.98288 6.90139C5.98288 6.67653 6.11757 6.47489 6.3217 6.39416L9.7572 5.03548C9.91981 4.97118 10.1028 4.99338 10.2464 5.09484C10.3899 5.19629 10.4757 5.36397 10.4756 5.5431L10.473 9.34799ZM9.41784 6.33426L7.04006 7.27463L7.04006 9.91423L9.41605 8.97431L9.41784 6.33426Z"
-        fill="#455068"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0_3180_28635">
-        <rect width="12" height="12" fill="white" transform="translate(0 0.5)" />
-      </clipPath>
-    </defs>
-  </svg>
-);
+export function PlannedState({ width = "10", height = "11", className }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 12 13"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <g clipPath="url(#clip0_3180_28635)">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M7.11853 4.7C7.20073 4.88749 7.38342 5.01866 7.59656 5.02037C7.88848 5.02271 8.12698 4.7813 8.12925 4.48116L8.13344 3.92962C8.1348 3.74982 8.04958 3.58096 7.90581 3.47859C7.76203 3.37623 7.57832 3.3536 7.41509 3.41815L3.97959 4.77682C3.77547 4.85755 3.64077 5.05919 3.64077 5.28406L3.64077 9.0883C3.64077 9.27834 3.73732 9.45458 3.8954 9.55308C4.05347 9.65157 4.25011 9.65802 4.41396 9.57008L4.90523 9.30643C5.16402 9.16754 5.26431 8.83925 5.12922 8.57317C5.04115 8.39971 4.8748 8.29551 4.69795 8.28247L4.69795 5.65729L7.11853 4.7Z"
+          fill="#455068"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M5.00428 3.06914C5.08648 3.25663 5.26916 3.3878 5.4823 3.38951C5.77422 3.39185 6.01272 3.15044 6.015 2.8503L6.01918 2.29876C6.02054 2.11896 5.93532 1.9501 5.79155 1.84774C5.64777 1.74537 5.46406 1.72274 5.30084 1.78729L1.86534 3.14597C1.66121 3.22669 1.52652 3.42834 1.52652 3.6532L1.52652 7.45745C1.52652 7.64749 1.62307 7.82372 1.78114 7.92222C1.93922 8.02071 2.13585 8.02716 2.29971 7.93922L2.79097 7.67557C3.04977 7.53668 3.15005 7.20839 3.01496 6.94231C2.92689 6.76885 2.76054 6.66465 2.5837 6.65161L2.5837 4.02643L5.00428 3.06914Z"
+          fill="#455068"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M10.473 9.34799C10.4728 9.57269 10.3382 9.77413 10.1342 9.85482L6.70129 11.2129C6.53874 11.2772 6.35582 11.255 6.21225 11.1536C6.06867 11.0523 5.98288 10.8847 5.98288 10.7056L5.98288 6.90139C5.98288 6.67653 6.11757 6.47489 6.3217 6.39416L9.7572 5.03548C9.91981 4.97118 10.1028 4.99338 10.2464 5.09484C10.3899 5.19629 10.4757 5.36397 10.4756 5.5431L10.473 9.34799ZM9.41784 6.33426L7.04006 7.27463L7.04006 9.91423L9.41605 8.97431L9.41784 6.33426Z"
+          fill="#455068"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_3180_28635">
+          <rect width="12" height="12" fill="white" transform="translate(0 0.5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/priority-icon.tsx b/packages/propel/src/icons/priority-icon.tsx
index e7da9debba..670d7bf475 100644
--- a/packages/propel/src/icons/priority-icon.tsx
+++ b/packages/propel/src/icons/priority-icon.tsx
@@ -12,15 +12,15 @@ interface IPriorityIcon {
   withContainer?: boolean;
 }
 
-export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
+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 +40,7 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
       {withContainer ? (
         <div
           className={cn(
-            "flex items-center justify-center border rounded p-0.5 flex-shrink-0",
+            "flex items-center justify-center border rounded-sm p-0.5 flex-shrink-0",
             priorityClasses[priority ?? "none"],
             containerClassName
           )}
@@ -63,11 +63,11 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
           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
           )}
@@ -75,4 +75,4 @@ export const PriorityIcon: React.FC<IPriorityIcon> = (props) => {
       )}
     </>
   );
-};
+}
diff --git a/packages/propel/src/icons/project/cycle-icon.tsx b/packages/propel/src/icons/project/cycle-icon.tsx
index cabbadcbc0..645f8af566 100644
--- a/packages/propel/src/icons/project/cycle-icon.tsx
+++ b/packages/propel/src/icons/project/cycle-icon.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const CycleIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+export function CycleIcon({ color = "currentColor", ...rest }: ISvgIcons) {
   const clipPathId = React.useId();
 
   return (
@@ -18,4 +18,4 @@ export const CycleIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest
       />
     </IconWrapper>
   );
-};
+}
diff --git a/packages/propel/src/icons/project/epic-icon.tsx b/packages/propel/src/icons/project/epic-icon.tsx
index b3fb6e23d8..f241d01aae 100644
--- a/packages/propel/src/icons/project/epic-icon.tsx
+++ b/packages/propel/src/icons/project/epic-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const EpicIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M6.47557 3.58443C6.25869 3.59252 6.06151 3.70781 5.95506 3.88843L1.45506 11.5276C1.34621 11.7124 1.34883 11.9386 1.46092 12.1216C1.57303 12.3046 1.77799 12.4172 1.99999 12.4172H14C14.2176 12.4172 14.4196 12.3092 14.5332 12.1319C14.6467 11.9548 14.6555 11.734 14.5566 11.5491L11.5566 5.9465C11.4711 5.7869 11.3144 5.67271 11.1308 5.63504C10.9474 5.59752 10.7559 5.64062 10.6094 5.75254L9.14159 6.87343L7.01952 3.84927C6.8987 3.67699 6.69254 3.57638 6.47557 3.58443ZM8.48045 8.07824C8.5777 8.21691 8.73158 8.31005 8.90428 8.33561C9.07718 8.36107 9.254 8.31687 9.39061 8.21252L10.793 7.14106L12.9785 11.2236H3.06932L6.54686 5.31985L8.48045 8.07824Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function EpicIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M6.47557 3.58443C6.25869 3.59252 6.06151 3.70781 5.95506 3.88843L1.45506 11.5276C1.34621 11.7124 1.34883 11.9386 1.46092 12.1216C1.57303 12.3046 1.77799 12.4172 1.99999 12.4172H14C14.2176 12.4172 14.4196 12.3092 14.5332 12.1319C14.6467 11.9548 14.6555 11.734 14.5566 11.5491L11.5566 5.9465C11.4711 5.7869 11.3144 5.67271 11.1308 5.63504C10.9474 5.59752 10.7559 5.64062 10.6094 5.75254L9.14159 6.87343L7.01952 3.84927C6.8987 3.67699 6.69254 3.57638 6.47557 3.58443ZM8.48045 8.07824C8.5777 8.21691 8.73158 8.31005 8.90428 8.33561C9.07718 8.36107 9.254 8.31687 9.39061 8.21252L10.793 7.14106L12.9785 11.2236H3.06932L6.54686 5.31985L8.48045 8.07824Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/project/intake-icon.tsx b/packages/propel/src/icons/project/intake-icon.tsx
index 936b4e861e..f3bd24d329 100644
--- a/packages/propel/src/icons/project/intake-icon.tsx
+++ b/packages/propel/src/icons/project/intake-icon.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const IntakeIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+export function IntakeIcon({ color = "currentColor", ...rest }: ISvgIcons) {
   const clipPathId = React.useId();
 
   return (
@@ -14,4 +14,4 @@ export const IntakeIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...res
       />
     </IconWrapper>
   );
-};
+}
diff --git a/packages/propel/src/icons/project/module-icon.tsx b/packages/propel/src/icons/project/module-icon.tsx
index 78c8a2af27..51a7077479 100644
--- a/packages/propel/src/icons/project/module-icon.tsx
+++ b/packages/propel/src/icons/project/module-icon.tsx
@@ -3,27 +3,29 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const ModuleIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64296 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67445 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67445 12.357 2.71788 12.5129 2.77441 12.624C2.90623 12.8827 3.11725 13.0938 3.37598 13.2256C3.48707 13.2821 3.64295 13.3255 3.9375 13.3496C4.23962 13.3743 4.62994 13.375 5.2002 13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V5.2002ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6854 13.6854 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H5.2002C4.65067 14.625 4.20072 14.6255 3.83594 14.5957C3.46388 14.5653 3.12523 14.5002 2.80859 14.3389C2.31467 14.0872 1.91281 13.6854 1.66113 13.1914C1.49987 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31466 2.31466 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49987 13.1914 1.66113C13.6854 1.91281 14.0872 2.31467 14.3389 2.80859C14.5001 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V10.7998Z"
-      fill={color}
-    />
-    <path
-      d="M6.54286 5H5.45714C5.29713 5 5.21712 5 5.156 5.03114C5.10224 5.05853 5.05853 5.10224 5.03114 5.156C5 5.21712 5 5.29713 5 5.45714V6.54286C5 6.70287 5 6.78288 5.03114 6.844C5.05853 6.89776 5.10224 6.94147 5.156 6.96886C5.21712 7 5.29713 7 5.45714 7H6.54286C6.70287 7 6.78288 7 6.844 6.96886C6.89776 6.94147 6.94147 6.89776 6.96886 6.844C7 6.78288 7 6.70287 7 6.54286V5.45714C7 5.29713 7 5.21712 6.96886 5.156C6.94147 5.10224 6.89776 5.05853 6.844 5.03114C6.78288 5 6.70287 5 6.54286 5Z"
-      fill={color}
-    />
-    <path
-      d="M10.5429 5H9.45714C9.29712 5 9.21711 5 9.156 5.03114C9.10223 5.05853 9.05854 5.10224 9.03114 5.156C9 5.21712 9 5.29713 9 5.45714V6.54286C9 6.70287 9 6.78288 9.03114 6.844C9.05854 6.89776 9.10223 6.94147 9.156 6.96886C9.21711 7 9.29712 7 9.45714 7H10.5429C10.7029 7 10.7829 7 10.844 6.96886C10.8978 6.94147 10.9415 6.89776 10.9689 6.844C11 6.78288 11 6.70287 11 6.54286V5.45714C11 5.29713 11 5.21712 10.9689 5.156C10.9415 5.10224 10.8978 5.05853 10.844 5.03114C10.7829 5 10.7029 5 10.5429 5Z"
-      fill={color}
-    />
-    <path
-      d="M10.5429 9H9.45714C9.29712 9 9.21711 9 9.156 9.03114C9.10223 9.05854 9.05854 9.10223 9.03114 9.156C9 9.21711 9 9.29712 9 9.45714V10.5429C9 10.7029 9 10.7829 9.03114 10.844C9.05854 10.8978 9.10223 10.9415 9.156 10.9689C9.21711 11 9.29712 11 9.45714 11H10.5429C10.7029 11 10.7829 11 10.844 10.9689C10.8978 10.9415 10.9415 10.8978 10.9689 10.844C11 10.7829 11 10.7029 11 10.5429V9.45714C11 9.29712 11 9.21711 10.9689 9.156C10.9415 9.10223 10.8978 9.05854 10.844 9.03114C10.7829 9 10.7029 9 10.5429 9Z"
-      fill={color}
-    />
-    <path
-      d="M6.54286 9H5.45714C5.29713 9 5.21712 9 5.156 9.03114C5.10224 9.05854 5.05853 9.10223 5.03114 9.156C5 9.21711 5 9.29712 5 9.45714V10.5429C5 10.7029 5 10.7829 5.03114 10.844C5.05853 10.8978 5.10224 10.9415 5.156 10.9689C5.21712 11 5.29713 11 5.45714 11H6.54286C6.70287 11 6.78288 11 6.844 10.9689C6.89776 10.9415 6.94147 10.8978 6.96886 10.844C7 10.7829 7 10.7029 7 10.5429V9.45714C7 9.29712 7 9.21711 6.96886 9.156C6.94147 9.10223 6.89776 9.05854 6.844 9.03114C6.78288 9 6.70287 9 6.54286 9Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function ModuleIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64296 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67445 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67445 12.357 2.71788 12.5129 2.77441 12.624C2.90623 12.8827 3.11725 13.0938 3.37598 13.2256C3.48707 13.2821 3.64295 13.3255 3.9375 13.3496C4.23962 13.3743 4.62994 13.375 5.2002 13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V5.2002ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6854 13.6854 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H5.2002C4.65067 14.625 4.20072 14.6255 3.83594 14.5957C3.46388 14.5653 3.12523 14.5002 2.80859 14.3389C2.31467 14.0872 1.91281 13.6854 1.66113 13.1914C1.49987 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31466 2.31466 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49987 13.1914 1.66113C13.6854 1.91281 14.0872 2.31467 14.3389 2.80859C14.5001 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V10.7998Z"
+        fill={color}
+      />
+      <path
+        d="M6.54286 5H5.45714C5.29713 5 5.21712 5 5.156 5.03114C5.10224 5.05853 5.05853 5.10224 5.03114 5.156C5 5.21712 5 5.29713 5 5.45714V6.54286C5 6.70287 5 6.78288 5.03114 6.844C5.05853 6.89776 5.10224 6.94147 5.156 6.96886C5.21712 7 5.29713 7 5.45714 7H6.54286C6.70287 7 6.78288 7 6.844 6.96886C6.89776 6.94147 6.94147 6.89776 6.96886 6.844C7 6.78288 7 6.70287 7 6.54286V5.45714C7 5.29713 7 5.21712 6.96886 5.156C6.94147 5.10224 6.89776 5.05853 6.844 5.03114C6.78288 5 6.70287 5 6.54286 5Z"
+        fill={color}
+      />
+      <path
+        d="M10.5429 5H9.45714C9.29712 5 9.21711 5 9.156 5.03114C9.10223 5.05853 9.05854 5.10224 9.03114 5.156C9 5.21712 9 5.29713 9 5.45714V6.54286C9 6.70287 9 6.78288 9.03114 6.844C9.05854 6.89776 9.10223 6.94147 9.156 6.96886C9.21711 7 9.29712 7 9.45714 7H10.5429C10.7029 7 10.7829 7 10.844 6.96886C10.8978 6.94147 10.9415 6.89776 10.9689 6.844C11 6.78288 11 6.70287 11 6.54286V5.45714C11 5.29713 11 5.21712 10.9689 5.156C10.9415 5.10224 10.8978 5.05853 10.844 5.03114C10.7829 5 10.7029 5 10.5429 5Z"
+        fill={color}
+      />
+      <path
+        d="M10.5429 9H9.45714C9.29712 9 9.21711 9 9.156 9.03114C9.10223 9.05854 9.05854 9.10223 9.03114 9.156C9 9.21711 9 9.29712 9 9.45714V10.5429C9 10.7029 9 10.7829 9.03114 10.844C9.05854 10.8978 9.10223 10.9415 9.156 10.9689C9.21711 11 9.29712 11 9.45714 11H10.5429C10.7029 11 10.7829 11 10.844 10.9689C10.8978 10.9415 10.9415 10.8978 10.9689 10.844C11 10.7829 11 10.7029 11 10.5429V9.45714C11 9.29712 11 9.21711 10.9689 9.156C10.9415 9.10223 10.8978 9.05854 10.844 9.03114C10.7829 9 10.7029 9 10.5429 9Z"
+        fill={color}
+      />
+      <path
+        d="M6.54286 9H5.45714C5.29713 9 5.21712 9 5.156 9.03114C5.10224 9.05854 5.05853 9.10223 5.03114 9.156C5 9.21711 5 9.29712 5 9.45714V10.5429C5 10.7029 5 10.7829 5.03114 10.844C5.05853 10.8978 5.10224 10.9415 5.156 10.9689C5.21712 11 5.29713 11 5.45714 11H6.54286C6.70287 11 6.78288 11 6.844 10.9689C6.89776 10.9415 6.94147 10.8978 6.96886 10.844C7 10.7829 7 10.7029 7 10.5429V9.45714C7 9.29712 7 9.21711 6.96886 9.156C6.94147 9.10223 6.89776 9.05854 6.844 9.03114C6.78288 9 6.70287 9 6.54286 9Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/project/page-icon.tsx b/packages/propel/src/icons/project/page-icon.tsx
index 0e855bcd47..2ab9b764c9 100644
--- a/packages/propel/src/icons/project/page-icon.tsx
+++ b/packages/propel/src/icons/project/page-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const PageIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M2.0415 11.4668V4.53325C2.0415 3.98372 2.04103 3.53377 2.0708 3.16899C2.1012 2.79693 2.16636 2.45828 2.32764 2.14164C2.57931 1.64772 2.98117 1.24585 3.4751 0.994184C3.79173 0.832905 4.13038 0.767746 4.50244 0.737348C4.86722 0.707573 5.31717 0.708051 5.8667 0.708051H8.00732C8.46672 0.708051 8.79883 0.703776 9.11768 0.780317C9.26953 0.816778 9.41655 0.869103 9.55908 0.931684C9.57494 0.937854 9.58978 0.945771 9.60498 0.953168C9.6354 0.96723 9.6669 0.97896 9.69678 0.994184L9.87647 1.09477L10.0796 1.23637C10.2777 1.39055 10.4689 1.58472 10.7124 1.82817L12.8374 3.95414C13.1623 4.27904 13.4005 4.51048 13.5718 4.79008C13.627 4.88022 13.6744 4.97452 13.7183 5.07036C13.7229 5.0804 13.7278 5.0903 13.7319 5.10063C13.7959 5.24517 13.8482 5.39475 13.8853 5.54887C13.9618 5.86762 13.9585 6.19902 13.9585 6.65825V11.4668C13.9585 12.0164 13.959 12.4663 13.9292 12.8311C13.8988 13.2032 13.8337 13.5418 13.6724 13.8584C13.4521 14.2907 13.1168 14.6522 12.7056 14.9043L12.5249 15.0049C12.2082 15.1663 11.8697 15.2314 11.4976 15.2618C11.1327 15.2916 10.683 15.2911 10.1333 15.2911H5.8667C5.31716 15.2911 4.86723 15.2915 4.50244 15.2618C4.13034 15.2314 3.79177 15.1663 3.4751 15.0049C2.98126 14.7533 2.57932 14.3523 2.32764 13.8584C2.16631 13.5418 2.10122 13.2032 2.0708 12.8311C2.041 12.4663 2.0415 12.0164 2.0415 11.4668ZM9.3335 10.7081C9.67852 10.7082 9.9585 10.988 9.9585 11.3331C9.9585 11.6781 9.67852 11.9579 9.3335 11.9581H5.3335C4.98832 11.9581 4.7085 11.6782 4.7085 11.3331C4.7085 10.9879 4.98832 10.7081 5.3335 10.7081H9.3335ZM10.6665 8.04106C11.0116 8.04106 11.2913 8.32103 11.2915 8.66606C11.2915 9.01124 11.0117 9.29106 10.6665 9.29106H5.3335C4.98832 9.29106 4.7085 9.01124 4.7085 8.66606C4.70867 8.32103 4.98843 8.04106 5.3335 8.04106H10.6665ZM3.2915 11.4668C3.2915 12.037 3.29222 12.4275 3.3169 12.7295C3.34099 13.0241 3.38432 13.18 3.44092 13.2911C3.57274 13.5497 3.7838 13.7599 4.04248 13.8916C4.15358 13.9482 4.30934 13.9926 4.604 14.0166C4.90612 14.0413 5.29648 14.0411 5.8667 14.0411H10.1333C10.7036 14.0411 11.0939 14.0413 11.396 14.0166C11.6908 13.9926 11.8464 13.9483 11.9575 13.8916C12.2161 13.7599 12.4263 13.5496 12.5581 13.2911C12.6147 13.18 12.659 13.0241 12.6831 12.7295C12.7078 12.4275 12.7085 12.037 12.7085 11.4668V6.65825C12.7085 6.27228 12.7061 6.08627 12.6909 5.95805H10.3999C10.2235 5.95805 10.0532 5.95895 9.91065 5.94731C9.76096 5.93505 9.58746 5.90599 9.41357 5.81743C9.17042 5.69355 8.97292 5.49581 8.84912 5.25297C8.76041 5.07887 8.73148 4.90475 8.71924 4.75493C8.70762 4.61252 8.7085 4.44283 8.7085 4.26664V1.97465C8.58022 1.95949 8.39368 1.95805 8.00732 1.95805H5.8667C5.29645 1.95805 4.90613 1.95877 4.604 1.98344C4.30946 2.00751 4.15357 2.05093 4.04248 2.10747C3.78376 2.23929 3.57274 2.4503 3.44092 2.70903C3.38439 2.82012 3.34096 2.97601 3.3169 3.27055C3.29222 3.57268 3.2915 3.963 3.2915 4.53325V11.4668ZM9.96533 4.65336C9.96677 4.67091 9.96894 4.6836 9.97022 4.69243C9.97133 4.6937 9.97189 4.69521 9.97315 4.69633C9.98199 4.69763 9.99522 4.69975 10.0132 4.70122C10.093 4.70771 10.2032 4.70805 10.3999 4.70805H11.8237L9.9585 2.84184V4.26664C9.9585 4.46349 9.95882 4.57358 9.96533 4.65336Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function PageIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M2.0415 11.4668V4.53325C2.0415 3.98372 2.04103 3.53377 2.0708 3.16899C2.1012 2.79693 2.16636 2.45828 2.32764 2.14164C2.57931 1.64772 2.98117 1.24585 3.4751 0.994184C3.79173 0.832905 4.13038 0.767746 4.50244 0.737348C4.86722 0.707573 5.31717 0.708051 5.8667 0.708051H8.00732C8.46672 0.708051 8.79883 0.703776 9.11768 0.780317C9.26953 0.816778 9.41655 0.869103 9.55908 0.931684C9.57494 0.937854 9.58978 0.945771 9.60498 0.953168C9.6354 0.96723 9.6669 0.97896 9.69678 0.994184L9.87647 1.09477L10.0796 1.23637C10.2777 1.39055 10.4689 1.58472 10.7124 1.82817L12.8374 3.95414C13.1623 4.27904 13.4005 4.51048 13.5718 4.79008C13.627 4.88022 13.6744 4.97452 13.7183 5.07036C13.7229 5.0804 13.7278 5.0903 13.7319 5.10063C13.7959 5.24517 13.8482 5.39475 13.8853 5.54887C13.9618 5.86762 13.9585 6.19902 13.9585 6.65825V11.4668C13.9585 12.0164 13.959 12.4663 13.9292 12.8311C13.8988 13.2032 13.8337 13.5418 13.6724 13.8584C13.4521 14.2907 13.1168 14.6522 12.7056 14.9043L12.5249 15.0049C12.2082 15.1663 11.8697 15.2314 11.4976 15.2618C11.1327 15.2916 10.683 15.2911 10.1333 15.2911H5.8667C5.31716 15.2911 4.86723 15.2915 4.50244 15.2618C4.13034 15.2314 3.79177 15.1663 3.4751 15.0049C2.98126 14.7533 2.57932 14.3523 2.32764 13.8584C2.16631 13.5418 2.10122 13.2032 2.0708 12.8311C2.041 12.4663 2.0415 12.0164 2.0415 11.4668ZM9.3335 10.7081C9.67852 10.7082 9.9585 10.988 9.9585 11.3331C9.9585 11.6781 9.67852 11.9579 9.3335 11.9581H5.3335C4.98832 11.9581 4.7085 11.6782 4.7085 11.3331C4.7085 10.9879 4.98832 10.7081 5.3335 10.7081H9.3335ZM10.6665 8.04106C11.0116 8.04106 11.2913 8.32103 11.2915 8.66606C11.2915 9.01124 11.0117 9.29106 10.6665 9.29106H5.3335C4.98832 9.29106 4.7085 9.01124 4.7085 8.66606C4.70867 8.32103 4.98843 8.04106 5.3335 8.04106H10.6665ZM3.2915 11.4668C3.2915 12.037 3.29222 12.4275 3.3169 12.7295C3.34099 13.0241 3.38432 13.18 3.44092 13.2911C3.57274 13.5497 3.7838 13.7599 4.04248 13.8916C4.15358 13.9482 4.30934 13.9926 4.604 14.0166C4.90612 14.0413 5.29648 14.0411 5.8667 14.0411H10.1333C10.7036 14.0411 11.0939 14.0413 11.396 14.0166C11.6908 13.9926 11.8464 13.9483 11.9575 13.8916C12.2161 13.7599 12.4263 13.5496 12.5581 13.2911C12.6147 13.18 12.659 13.0241 12.6831 12.7295C12.7078 12.4275 12.7085 12.037 12.7085 11.4668V6.65825C12.7085 6.27228 12.7061 6.08627 12.6909 5.95805H10.3999C10.2235 5.95805 10.0532 5.95895 9.91065 5.94731C9.76096 5.93505 9.58746 5.90599 9.41357 5.81743C9.17042 5.69355 8.97292 5.49581 8.84912 5.25297C8.76041 5.07887 8.73148 4.90475 8.71924 4.75493C8.70762 4.61252 8.7085 4.44283 8.7085 4.26664V1.97465C8.58022 1.95949 8.39368 1.95805 8.00732 1.95805H5.8667C5.29645 1.95805 4.90613 1.95877 4.604 1.98344C4.30946 2.00751 4.15357 2.05093 4.04248 2.10747C3.78376 2.23929 3.57274 2.4503 3.44092 2.70903C3.38439 2.82012 3.34096 2.97601 3.3169 3.27055C3.29222 3.57268 3.2915 3.963 3.2915 4.53325V11.4668ZM9.96533 4.65336C9.96677 4.67091 9.96894 4.6836 9.97022 4.69243C9.97133 4.6937 9.97189 4.69521 9.97315 4.69633C9.98199 4.69763 9.99522 4.69975 10.0132 4.70122C10.093 4.70771 10.2032 4.70805 10.3999 4.70805H11.8237L9.9585 2.84184V4.26664C9.9585 4.46349 9.95882 4.57358 9.96533 4.65336Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/project/view-icon.tsx b/packages/propel/src/icons/project/view-icon.tsx
index 4079b4439b..f597943c4f 100644
--- a/packages/propel/src/icons/project/view-icon.tsx
+++ b/packages/propel/src/icons/project/view-icon.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const ViewsIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+export function ViewsIcon({ color = "currentColor", ...rest }: ISvgIcons) {
   const clipPathId = React.useId();
 
   return (
@@ -14,4 +14,4 @@ export const ViewsIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest
       />
     </IconWrapper>
   );
-};
+}
diff --git a/packages/propel/src/icons/project/work-items-icon.tsx b/packages/propel/src/icons/project/work-items-icon.tsx
index a08daaf71b..586f0a5972 100644
--- a/packages/propel/src/icons/project/work-items-icon.tsx
+++ b/packages/propel/src/icons/project/work-items-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const WorkItemsIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M14.2779 12.465L14.2045 12.5365L14.1028 12.6109C13.999 12.6752 13.8985 12.7093 13.8745 12.7186L8.09646 14.9677C7.9026 15.0431 7.68376 15.0174 7.51292 14.8987C7.34209 14.7799 7.24168 14.5838 7.24485 14.3758L7.28054 12.0898L5.14952 12.9194C4.95564 12.9949 4.73602 12.9685 4.56518 12.8498C4.39458 12.731 4.29394 12.5348 4.29711 12.3269L4.33279 10.0409L2.20178 10.8705C2.0079 10.946 1.78908 10.9202 1.61824 10.8015C1.44742 10.6828 1.347 10.4866 1.35017 10.2786L1.44444 4.07898C1.44497 4.04466 1.43911 3.86844 1.50017 3.70622C1.54848 3.57794 1.62751 3.46423 1.73091 3.37424C1.86169 3.26043 2.02889 3.20455 2.06088 3.1921L7.83894 0.943026C8.03281 0.867554 8.25164 0.893325 8.42248 1.01205C8.59332 1.13079 8.69372 1.32691 8.69055 1.53494L8.65623 3.82068L10.7859 2.99132C10.9796 2.9159 11.1986 2.94183 11.3694 3.06034C11.5403 3.17909 11.6415 3.37576 11.6383 3.58379L11.604 5.86953L13.7336 5.04017C13.9275 4.96469 14.1463 4.99045 14.3172 5.10919C14.488 5.22794 14.5884 5.42408 14.5852 5.63208L14.491 11.8317C14.4904 11.866 14.4963 12.0422 14.4352 12.2045L14.3939 12.2982C14.3622 12.3584 14.3233 12.4144 14.2779 12.465ZM2.41237 4.09289L2.35605 4.09179L2.45595 4.20643L2.41237 4.09289ZM2.35605 4.09179L2.41237 4.09289L2.45595 4.20643L2.35605 4.09179ZM4.39219 6.12784C4.39271 6.09351 4.38601 5.91676 4.44711 5.75452C4.4954 5.62627 4.57449 5.51251 4.67785 5.42253C4.80863 5.30872 4.97664 5.2534 5.00862 5.24095L7.39924 4.30992L7.42784 2.44478L2.69167 4.28821L2.61504 9.36909L4.35327 8.69224L4.39219 6.12784ZM5.36012 6.14174L5.30379 6.14065L5.4045 6.25584L5.36012 6.14174ZM5.30379 6.14065L5.36012 6.14174L5.4045 6.25584L5.30379 6.14065ZM7.33913 8.17613C7.33965 8.14181 7.3338 7.96558 7.39485 7.80337C7.44316 7.67508 7.52219 7.56138 7.6256 7.47139C7.75637 7.35758 7.92358 7.30169 7.95557 7.28924L10.3456 6.35901L10.3742 4.49387L5.63942 6.33706L5.56254 11.4166L7.30077 10.7397L7.33913 8.17613ZM8.30706 8.19003L8.25073 8.18894L8.35064 8.30357L8.30706 8.19003ZM8.25073 8.18894L8.30706 8.19003L8.35064 8.30357L8.25073 8.18894ZM13.3217 6.54137L8.58636 8.38535L8.50892 13.4657L13.2445 11.623L13.3217 6.54137Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function WorkItemsIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M14.2779 12.465L14.2045 12.5365L14.1028 12.6109C13.999 12.6752 13.8985 12.7093 13.8745 12.7186L8.09646 14.9677C7.9026 15.0431 7.68376 15.0174 7.51292 14.8987C7.34209 14.7799 7.24168 14.5838 7.24485 14.3758L7.28054 12.0898L5.14952 12.9194C4.95564 12.9949 4.73602 12.9685 4.56518 12.8498C4.39458 12.731 4.29394 12.5348 4.29711 12.3269L4.33279 10.0409L2.20178 10.8705C2.0079 10.946 1.78908 10.9202 1.61824 10.8015C1.44742 10.6828 1.347 10.4866 1.35017 10.2786L1.44444 4.07898C1.44497 4.04466 1.43911 3.86844 1.50017 3.70622C1.54848 3.57794 1.62751 3.46423 1.73091 3.37424C1.86169 3.26043 2.02889 3.20455 2.06088 3.1921L7.83894 0.943026C8.03281 0.867554 8.25164 0.893325 8.42248 1.01205C8.59332 1.13079 8.69372 1.32691 8.69055 1.53494L8.65623 3.82068L10.7859 2.99132C10.9796 2.9159 11.1986 2.94183 11.3694 3.06034C11.5403 3.17909 11.6415 3.37576 11.6383 3.58379L11.604 5.86953L13.7336 5.04017C13.9275 4.96469 14.1463 4.99045 14.3172 5.10919C14.488 5.22794 14.5884 5.42408 14.5852 5.63208L14.491 11.8317C14.4904 11.866 14.4963 12.0422 14.4352 12.2045L14.3939 12.2982C14.3622 12.3584 14.3233 12.4144 14.2779 12.465ZM2.41237 4.09289L2.35605 4.09179L2.45595 4.20643L2.41237 4.09289ZM2.35605 4.09179L2.41237 4.09289L2.45595 4.20643L2.35605 4.09179ZM4.39219 6.12784C4.39271 6.09351 4.38601 5.91676 4.44711 5.75452C4.4954 5.62627 4.57449 5.51251 4.67785 5.42253C4.80863 5.30872 4.97664 5.2534 5.00862 5.24095L7.39924 4.30992L7.42784 2.44478L2.69167 4.28821L2.61504 9.36909L4.35327 8.69224L4.39219 6.12784ZM5.36012 6.14174L5.30379 6.14065L5.4045 6.25584L5.36012 6.14174ZM5.30379 6.14065L5.36012 6.14174L5.4045 6.25584L5.30379 6.14065ZM7.33913 8.17613C7.33965 8.14181 7.3338 7.96558 7.39485 7.80337C7.44316 7.67508 7.52219 7.56138 7.6256 7.47139C7.75637 7.35758 7.92358 7.30169 7.95557 7.28924L10.3456 6.35901L10.3742 4.49387L5.63942 6.33706L5.56254 11.4166L7.30077 10.7397L7.33913 8.17613ZM8.30706 8.19003L8.25073 8.18894L8.35064 8.30357L8.30706 8.19003ZM8.25073 8.18894L8.30706 8.19003L8.35064 8.30357L8.25073 8.18894ZM13.3217 6.54137L8.58636 8.38535L8.50892 13.4657L13.2445 11.623L13.3217 6.54137Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/boolean-icon.tsx b/packages/propel/src/icons/properties/boolean-icon.tsx
index 5de7ba05a2..d80eb44ac3 100644
--- a/packages/propel/src/icons/properties/boolean-icon.tsx
+++ b/packages/propel/src/icons/properties/boolean-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const BooleanPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M14.041 8C14.041 6.13604 12.53 4.625 10.666 4.625H5.33301C3.46905 4.625 1.95801 6.13604 1.95801 8C1.95801 9.86396 3.46905 11.375 5.33301 11.375H10.666C12.53 11.375 14.041 9.86396 14.041 8ZM11.708 8C11.708 7.42471 11.2413 6.95801 10.666 6.95801C10.0909 6.95823 9.625 7.42485 9.625 8C9.62518 8.575 10.091 9.0408 10.666 9.04102C11.2412 9.04102 11.7078 8.57514 11.708 8ZM12.958 8C12.9578 9.26549 11.9316 10.291 10.666 10.291C9.40067 10.2908 8.37518 9.26536 8.375 8C8.375 6.73449 9.40056 5.70823 10.666 5.70801C11.9317 5.70801 12.958 6.73436 12.958 8ZM15.291 8C15.291 10.5543 13.2203 12.625 10.666 12.625H5.33301C2.77869 12.625 0.708008 10.5543 0.708008 8C0.708008 5.44568 2.77869 3.375 5.33301 3.375H10.666C13.2203 3.375 15.291 5.44568 15.291 8Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function BooleanPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M14.041 8C14.041 6.13604 12.53 4.625 10.666 4.625H5.33301C3.46905 4.625 1.95801 6.13604 1.95801 8C1.95801 9.86396 3.46905 11.375 5.33301 11.375H10.666C12.53 11.375 14.041 9.86396 14.041 8ZM11.708 8C11.708 7.42471 11.2413 6.95801 10.666 6.95801C10.0909 6.95823 9.625 7.42485 9.625 8C9.62518 8.575 10.091 9.0408 10.666 9.04102C11.2412 9.04102 11.7078 8.57514 11.708 8ZM12.958 8C12.9578 9.26549 11.9316 10.291 10.666 10.291C9.40067 10.2908 8.37518 9.26536 8.375 8C8.375 6.73449 9.40056 5.70823 10.666 5.70801C11.9317 5.70801 12.958 6.73436 12.958 8ZM15.291 8C15.291 10.5543 13.2203 12.625 10.666 12.625H5.33301C2.77869 12.625 0.708008 10.5543 0.708008 8C0.708008 5.44568 2.77869 3.375 5.33301 3.375H10.666C13.2203 3.375 15.291 5.44568 15.291 8Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
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 0000000000..7ee96f2993
--- /dev/null
+++ b/packages/propel/src/icons/properties/comment-reply-icon.tsx
@@ -0,0 +1,15 @@
+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 a5e83582a4..7143ced3e4 100644
--- a/packages/propel/src/icons/properties/dropdown-icon.tsx
+++ b/packages/propel/src/icons/properties/dropdown-icon.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const DropdownPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+export function DropdownPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
   const clipPathId = React.useId();
 
   return (
@@ -14,4 +14,4 @@ export const DropdownPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColo
       />
     </IconWrapper>
   );
-};
+}
diff --git a/packages/propel/src/icons/properties/due-date-icon.tsx b/packages/propel/src/icons/properties/due-date-icon.tsx
index 9e30744910..170ea39a01 100644
--- a/packages/propel/src/icons/properties/due-date-icon.tsx
+++ b/packages/propel/src/icons/properties/due-date-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const DueDatePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M13.5576 10.5576C13.8017 10.3135 14.1983 10.3135 14.4424 10.5576C14.6862 10.8016 14.6861 11.1974 14.4424 11.4414L11.4424 14.4414C11.1983 14.6855 10.8017 14.6855 10.5576 14.4414L9.22461 13.1084C8.98059 12.8644 8.9807 12.4687 9.22461 12.2246C9.46869 11.9805 9.86432 11.9805 10.1084 12.2246L10.999 13.1152L13.5576 10.5576ZM10.042 4V3.29102H5.95801V4C5.95783 4.34503 5.67808 4.625 5.33301 4.625C4.98809 4.62482 4.70818 4.34492 4.70801 4V3.29297C4.39072 3.29481 4.14362 3.29958 3.9375 3.31641C3.64272 3.34049 3.48709 3.38481 3.37598 3.44141C3.11725 3.57323 2.90624 3.78327 2.77441 4.04199C2.71783 4.15308 2.67448 4.30883 2.65039 4.60352C2.62571 4.90564 2.625 5.29592 2.625 5.86621V6.04102H13.375V5.86621C13.375 5.29591 13.3743 4.90564 13.3496 4.60352C13.3255 4.30883 13.2822 4.15308 13.2256 4.04199C13.0938 3.78327 12.8827 3.57322 12.624 3.44141C12.5129 3.38481 12.3572 3.34049 12.0625 3.31641C11.8564 3.29958 11.6093 3.29481 11.292 3.29297V4C11.2918 4.34492 11.0119 4.62482 10.667 4.625C10.3219 4.625 10.0422 4.34503 10.042 4ZM14.625 8.33301C14.625 8.67819 14.3452 8.95801 14 8.95801C13.6548 8.95801 13.375 8.67819 13.375 8.33301V7.29102H2.625V11.4668C2.625 12.0369 2.62571 12.4274 2.65039 12.7295C2.67449 13.024 2.71781 13.1799 2.77441 13.291C2.90624 13.5497 3.1173 13.7598 3.37598 13.8916C3.48708 13.9482 3.64284 13.9925 3.9375 14.0166C4.23962 14.0413 4.62998 14.041 5.2002 14.041H8C8.34507 14.041 8.62483 14.321 8.625 14.666C8.625 15.0112 8.34518 15.291 8 15.291H5.2002C4.65066 15.291 4.20073 15.2915 3.83594 15.2617C3.46383 15.2313 3.12526 15.1662 2.80859 15.0049C2.31476 14.7533 1.91282 14.3522 1.66113 13.8584C1.49981 13.5417 1.43471 13.2031 1.4043 12.8311C1.3745 12.4663 1.375 12.0163 1.375 11.4668V5.86621C1.375 5.31658 1.3745 4.86676 1.4043 4.50195C1.4347 4.1298 1.49976 3.79131 1.66113 3.47461C1.9128 2.98069 2.31467 2.57881 2.80859 2.32715C3.12519 2.16592 3.46393 2.10071 3.83594 2.07031C4.08533 2.04996 4.37446 2.04486 4.70801 2.04297V1.33301C4.70801 0.987938 4.98798 0.708184 5.33301 0.708008C5.67819 0.708008 5.95801 0.98783 5.95801 1.33301V2.04102H10.042V1.33301C10.042 0.98783 10.3218 0.708008 10.667 0.708008C11.012 0.708183 11.292 0.987938 11.292 1.33301V2.04297C11.6255 2.04486 11.9147 2.04996 12.1641 2.07031C12.5361 2.10071 12.8748 2.16593 13.1914 2.32715C13.6854 2.57882 14.0872 2.9807 14.3389 3.47461L14.3945 3.59473C14.5155 3.87672 14.5691 4.17636 14.5957 4.50195C14.6255 4.86677 14.625 5.31659 14.625 5.86621V8.33301Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function DueDatePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.5576 10.5576C13.8017 10.3135 14.1983 10.3135 14.4424 10.5576C14.6862 10.8016 14.6861 11.1974 14.4424 11.4414L11.4424 14.4414C11.1983 14.6855 10.8017 14.6855 10.5576 14.4414L9.22461 13.1084C8.98059 12.8644 8.9807 12.4687 9.22461 12.2246C9.46869 11.9805 9.86432 11.9805 10.1084 12.2246L10.999 13.1152L13.5576 10.5576ZM10.042 4V3.29102H5.95801V4C5.95783 4.34503 5.67808 4.625 5.33301 4.625C4.98809 4.62482 4.70818 4.34492 4.70801 4V3.29297C4.39072 3.29481 4.14362 3.29958 3.9375 3.31641C3.64272 3.34049 3.48709 3.38481 3.37598 3.44141C3.11725 3.57323 2.90624 3.78327 2.77441 4.04199C2.71783 4.15308 2.67448 4.30883 2.65039 4.60352C2.62571 4.90564 2.625 5.29592 2.625 5.86621V6.04102H13.375V5.86621C13.375 5.29591 13.3743 4.90564 13.3496 4.60352C13.3255 4.30883 13.2822 4.15308 13.2256 4.04199C13.0938 3.78327 12.8827 3.57322 12.624 3.44141C12.5129 3.38481 12.3572 3.34049 12.0625 3.31641C11.8564 3.29958 11.6093 3.29481 11.292 3.29297V4C11.2918 4.34492 11.0119 4.62482 10.667 4.625C10.3219 4.625 10.0422 4.34503 10.042 4ZM14.625 8.33301C14.625 8.67819 14.3452 8.95801 14 8.95801C13.6548 8.95801 13.375 8.67819 13.375 8.33301V7.29102H2.625V11.4668C2.625 12.0369 2.62571 12.4274 2.65039 12.7295C2.67449 13.024 2.71781 13.1799 2.77441 13.291C2.90624 13.5497 3.1173 13.7598 3.37598 13.8916C3.48708 13.9482 3.64284 13.9925 3.9375 14.0166C4.23962 14.0413 4.62998 14.041 5.2002 14.041H8C8.34507 14.041 8.62483 14.321 8.625 14.666C8.625 15.0112 8.34518 15.291 8 15.291H5.2002C4.65066 15.291 4.20073 15.2915 3.83594 15.2617C3.46383 15.2313 3.12526 15.1662 2.80859 15.0049C2.31476 14.7533 1.91282 14.3522 1.66113 13.8584C1.49981 13.5417 1.43471 13.2031 1.4043 12.8311C1.3745 12.4663 1.375 12.0163 1.375 11.4668V5.86621C1.375 5.31658 1.3745 4.86676 1.4043 4.50195C1.4347 4.1298 1.49976 3.79131 1.66113 3.47461C1.9128 2.98069 2.31467 2.57881 2.80859 2.32715C3.12519 2.16592 3.46393 2.10071 3.83594 2.07031C4.08533 2.04996 4.37446 2.04486 4.70801 2.04297V1.33301C4.70801 0.987938 4.98798 0.708184 5.33301 0.708008C5.67819 0.708008 5.95801 0.98783 5.95801 1.33301V2.04102H10.042V1.33301C10.042 0.98783 10.3218 0.708008 10.667 0.708008C11.012 0.708183 11.292 0.987938 11.292 1.33301V2.04297C11.6255 2.04486 11.9147 2.04996 12.1641 2.07031C12.5361 2.10071 12.8748 2.16593 13.1914 2.32715C13.6854 2.57882 14.0872 2.9807 14.3389 3.47461L14.3945 3.59473C14.5155 3.87672 14.5691 4.17636 14.5957 4.50195C14.6255 4.86677 14.625 5.31659 14.625 5.86621V8.33301Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/duplicate-icon.tsx b/packages/propel/src/icons/properties/duplicate-icon.tsx
index 50ade4cf8a..0e4fa89f96 100644
--- a/packages/propel/src/icons/properties/duplicate-icon.tsx
+++ b/packages/propel/src/icons/properties/duplicate-icon.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const DuplicatePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+export function DuplicatePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
   const clipPathId = React.useId();
 
   return (
@@ -14,4 +14,4 @@ export const DuplicatePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentCol
       />
     </IconWrapper>
   );
-};
+}
diff --git a/packages/propel/src/icons/properties/estimate-icon.tsx b/packages/propel/src/icons/properties/estimate-icon.tsx
index 799655245d..2df27ff779 100644
--- a/packages/propel/src/icons/properties/estimate-icon.tsx
+++ b/packages/propel/src/icons/properties/estimate-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const EstimatePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M7.47524 1.48544C7.80936 1.33685 8.19097 1.33692 8.52505 1.48544C8.78091 1.59922 8.94887 1.80061 9.06802 1.96884C9.18892 2.1396 9.31927 2.36541 9.4645 2.6163L14.9469 12.088C15.0927 12.3398 15.225 12.5655 15.3131 12.7559C15.3998 12.9434 15.4906 13.1898 15.4616 13.4688C15.4236 13.8331 15.2332 14.1646 14.9372 14.38C14.7103 14.5449 14.4514 14.5896 14.2458 14.6085C14.0367 14.6277 13.7743 14.627 13.4831 14.627H2.51723C2.22605 14.627 1.96354 14.6277 1.75454 14.6085C1.54891 14.5896 1.29002 14.5449 1.06313 14.38C0.767042 14.1646 0.576704 13.8331 0.538719 13.4688C0.509704 13.1898 0.600447 12.9434 0.687157 12.7559C0.775223 12.5656 0.906677 12.3397 1.05239 12.088L6.53579 2.6163C6.68101 2.36543 6.81136 2.13961 6.93227 1.96884C7.05143 1.80061 7.21939 1.59922 7.47524 1.48544ZM7.95278 2.6915C7.87286 2.80437 7.77538 2.97106 7.61782 3.24325L2.13442 12.714C1.97623 12.9872 1.88024 13.1553 1.82192 13.2813C1.80777 13.3119 1.79966 13.3353 1.7936 13.3517C1.81076 13.3546 1.83498 13.3603 1.8688 13.3634C2.00713 13.3761 2.2014 13.377 2.51723 13.377H13.4831C13.7989 13.377 13.9932 13.3761 14.1315 13.3634C14.1647 13.3603 14.1886 13.3546 14.2057 13.3517C14.1996 13.3353 14.1924 13.3117 14.1784 13.2813C14.1201 13.1553 14.0241 12.9872 13.8659 12.714L8.38247 3.24325C8.22492 2.97108 8.12743 2.80438 8.04751 2.6915C8.02757 2.66335 8.01084 2.64431 7.99966 2.63095C7.98851 2.6443 7.97249 2.66367 7.95278 2.6915Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function EstimatePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M7.47524 1.48544C7.80936 1.33685 8.19097 1.33692 8.52505 1.48544C8.78091 1.59922 8.94887 1.80061 9.06802 1.96884C9.18892 2.1396 9.31927 2.36541 9.4645 2.6163L14.9469 12.088C15.0927 12.3398 15.225 12.5655 15.3131 12.7559C15.3998 12.9434 15.4906 13.1898 15.4616 13.4688C15.4236 13.8331 15.2332 14.1646 14.9372 14.38C14.7103 14.5449 14.4514 14.5896 14.2458 14.6085C14.0367 14.6277 13.7743 14.627 13.4831 14.627H2.51723C2.22605 14.627 1.96354 14.6277 1.75454 14.6085C1.54891 14.5896 1.29002 14.5449 1.06313 14.38C0.767042 14.1646 0.576704 13.8331 0.538719 13.4688C0.509704 13.1898 0.600447 12.9434 0.687157 12.7559C0.775223 12.5656 0.906677 12.3397 1.05239 12.088L6.53579 2.6163C6.68101 2.36543 6.81136 2.13961 6.93227 1.96884C7.05143 1.80061 7.21939 1.59922 7.47524 1.48544ZM7.95278 2.6915C7.87286 2.80437 7.77538 2.97106 7.61782 3.24325L2.13442 12.714C1.97623 12.9872 1.88024 13.1553 1.82192 13.2813C1.80777 13.3119 1.79966 13.3353 1.7936 13.3517C1.81076 13.3546 1.83498 13.3603 1.8688 13.3634C2.00713 13.3761 2.2014 13.377 2.51723 13.377H13.4831C13.7989 13.377 13.9932 13.3761 14.1315 13.3634C14.1647 13.3603 14.1886 13.3546 14.2057 13.3517C14.1996 13.3353 14.1924 13.3117 14.1784 13.2813C14.1201 13.1553 14.0241 12.9872 13.8659 12.714L8.38247 3.24325C8.22492 2.97108 8.12743 2.80438 8.04751 2.6915C8.02757 2.66335 8.01084 2.64431 7.99966 2.63095C7.98851 2.6443 7.97249 2.66367 7.95278 2.6915Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/hash-icon.tsx b/packages/propel/src/icons/properties/hash-icon.tsx
index 1b20d6fd8d..cb67ec13ce 100644
--- a/packages/propel/src/icons/properties/hash-icon.tsx
+++ b/packages/propel/src/icons/properties/hash-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const HashPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M12.1025 1.3836C12.443 1.44034 12.6729 1.76193 12.6162 2.10235L12.1816 4.70782H14C14.3451 4.70782 14.6248 4.98779 14.625 5.33282C14.625 5.678 14.3452 5.95782 14 5.95782H11.9736L11.293 10.0418H13.333C13.6782 10.0418 13.958 10.3216 13.958 10.6668C13.9578 11.0118 13.6781 11.2918 13.333 11.2918H11.085L10.6162 14.1024C10.5595 14.4428 10.2379 14.6727 9.89746 14.616C9.55703 14.5593 9.32714 14.2377 9.38379 13.8973L9.81836 11.2918H5.75195L5.2832 14.1024C5.22646 14.4428 4.90396 14.6728 4.56348 14.616C4.22334 14.5591 3.99325 14.2375 4.0498 13.8973L4.48438 11.2918H2C1.65493 11.2918 1.37518 11.0118 1.375 10.6668C1.375 10.3216 1.65482 10.0418 2 10.0418H4.69238L5.37305 5.95782H2.66699C2.32181 5.95782 2.04199 5.678 2.04199 5.33282C2.04217 4.98779 2.32192 4.70782 2.66699 4.70782H5.58105L6.0498 1.89728C6.10655 1.55679 6.42905 1.32686 6.76953 1.3836C7.10985 1.44041 7.33981 1.76201 7.2832 2.10235L6.84863 4.70782H10.915L11.3838 1.89728C11.4405 1.55685 11.7621 1.32695 12.1025 1.3836ZM5.95996 10.0418H10.0264L10.707 5.95782H6.64062L5.95996 10.0418Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function HashPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M12.1025 1.3836C12.443 1.44034 12.6729 1.76193 12.6162 2.10235L12.1816 4.70782H14C14.3451 4.70782 14.6248 4.98779 14.625 5.33282C14.625 5.678 14.3452 5.95782 14 5.95782H11.9736L11.293 10.0418H13.333C13.6782 10.0418 13.958 10.3216 13.958 10.6668C13.9578 11.0118 13.6781 11.2918 13.333 11.2918H11.085L10.6162 14.1024C10.5595 14.4428 10.2379 14.6727 9.89746 14.616C9.55703 14.5593 9.32714 14.2377 9.38379 13.8973L9.81836 11.2918H5.75195L5.2832 14.1024C5.22646 14.4428 4.90396 14.6728 4.56348 14.616C4.22334 14.5591 3.99325 14.2375 4.0498 13.8973L4.48438 11.2918H2C1.65493 11.2918 1.37518 11.0118 1.375 10.6668C1.375 10.3216 1.65482 10.0418 2 10.0418H4.69238L5.37305 5.95782H2.66699C2.32181 5.95782 2.04199 5.678 2.04199 5.33282C2.04217 4.98779 2.32192 4.70782 2.66699 4.70782H5.58105L6.0498 1.89728C6.10655 1.55679 6.42905 1.32686 6.76953 1.3836C7.10985 1.44041 7.33981 1.76201 7.2832 2.10235L6.84863 4.70782H10.915L11.3838 1.89728C11.4405 1.55685 11.7621 1.32695 12.1025 1.3836ZM5.95996 10.0418H10.0264L10.707 5.95782H6.64062L5.95996 10.0418Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/index.ts b/packages/propel/src/icons/properties/index.ts
index 52e36a7f47..73e135208e 100644
--- a/packages/propel/src/icons/properties/index.ts
+++ b/packages/propel/src/icons/properties/index.ts
@@ -1,4 +1,5 @@
 export * from "./boolean-icon";
+export * from "./comment-reply-icon";
 export * from "./dropdown-icon";
 export * from "./due-date-icon";
 export * from "./duplicate-icon";
@@ -18,3 +19,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 0000000000..b739dd99b7
--- /dev/null
+++ b/packages/propel/src/icons/properties/label-filled-icon.tsx
@@ -0,0 +1,17 @@
+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 2bfeae0652..5f0df4f682 100644
--- a/packages/propel/src/icons/properties/label-icon.tsx
+++ b/packages/propel/src/icons/properties/label-icon.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const LabelPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+export function LabelPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
   const clipPathId = React.useId();
 
   return (
@@ -18,4 +18,4 @@ export const LabelPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor",
       />
     </IconWrapper>
   );
-};
+}
diff --git a/packages/propel/src/icons/properties/members-icon.tsx b/packages/propel/src/icons/properties/members-icon.tsx
index 95e903e97a..ec6733dc7e 100644
--- a/packages/propel/src/icons/properties/members-icon.tsx
+++ b/packages/propel/src/icons/properties/members-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const MembersPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M10.708 14C10.708 13.3702 10.7072 12.9287 10.6836 12.583C10.6604 12.2435 10.6173 12.0418 10.5527 11.8857C10.3455 11.3855 9.94754 10.9875 9.44727 10.7803C9.2912 10.7157 9.08953 10.6716 8.75 10.6484C8.40434 10.6249 7.96283 10.625 7.33301 10.625H5.33301C4.7032 10.625 4.26169 10.6249 3.91602 10.6484C3.57648 10.6716 3.37481 10.7157 3.21875 10.7803C2.71847 10.9875 2.3205 11.3855 2.11328 11.8857C2.0487 12.0418 2.00464 12.2435 1.98145 12.583C1.95786 12.9287 1.95801 13.3702 1.95801 14C1.95801 14.3452 1.67819 14.625 1.33301 14.625C0.987832 14.625 0.70801 14.3452 0.70801 14C0.70801 13.3873 0.707216 12.8961 0.734377 12.498C0.76193 12.0945 0.820736 11.741 0.958987 11.4072C1.29307 10.6007 1.93369 9.96008 2.74024 9.62598C3.07402 9.48772 3.42749 9.42892 3.83106 9.40137C4.22915 9.3742 4.72031 9.375 5.33301 9.375H7.33301C7.94572 9.375 8.43688 9.3742 8.83496 9.40137C9.23853 9.42892 9.592 9.48772 9.92578 9.62598C10.7323 9.96008 11.3729 10.6007 11.707 11.4072C11.8453 11.741 11.9041 12.0945 11.9316 12.498C11.9588 12.8961 11.958 13.3873 11.958 14C11.958 14.3452 11.6782 14.625 11.333 14.625C10.9878 14.625 10.708 14.3452 10.708 14ZM14.041 14V12.667C14.041 11.7166 13.3914 10.9163 12.5107 10.6895C12.1765 10.6034 11.9755 10.262 12.0615 9.92773C12.1478 9.59378 12.4882 9.39251 12.8223 9.47852C14.2418 9.84395 15.291 11.1324 15.291 12.667V14C15.291 14.3452 15.0112 14.625 14.666 14.625C14.321 14.6248 14.041 14.3451 14.041 14ZM8.375 4.66699C8.375 3.53941 7.46057 2.625 6.33301 2.625C5.20543 2.625 4.29102 3.53941 4.29102 4.66699C4.29119 5.79443 5.20554 6.70801 6.33301 6.70801C7.46046 6.70801 8.37483 5.79442 8.375 4.66699ZM11.375 4.66699C11.375 3.81123 10.8479 3.07683 10.0986 2.77344C9.77868 2.64392 9.62439 2.27894 9.75391 1.95898C9.88353 1.63935 10.2476 1.48494 10.5674 1.61426C11.7725 2.1021 12.625 3.28458 12.625 4.66699C12.6249 6.04925 11.7725 7.231 10.5674 7.71875C10.2475 7.84818 9.88345 7.69386 9.75391 7.37402C9.62442 7.05408 9.77871 6.69007 10.0986 6.56055C10.8479 6.2573 11.3749 5.52271 11.375 4.66699ZM9.625 4.66699C9.62483 6.48478 8.15081 7.95801 6.33301 7.95801C4.51518 7.95801 3.04119 6.48478 3.04102 4.66699C3.04102 2.84905 4.51507 1.375 6.33301 1.375C8.15092 1.375 9.625 2.84905 9.625 4.66699Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function MembersPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M10.708 14C10.708 13.3702 10.7072 12.9287 10.6836 12.583C10.6604 12.2435 10.6173 12.0418 10.5527 11.8857C10.3455 11.3855 9.94754 10.9875 9.44727 10.7803C9.2912 10.7157 9.08953 10.6716 8.75 10.6484C8.40434 10.6249 7.96283 10.625 7.33301 10.625H5.33301C4.7032 10.625 4.26169 10.6249 3.91602 10.6484C3.57648 10.6716 3.37481 10.7157 3.21875 10.7803C2.71847 10.9875 2.3205 11.3855 2.11328 11.8857C2.0487 12.0418 2.00464 12.2435 1.98145 12.583C1.95786 12.9287 1.95801 13.3702 1.95801 14C1.95801 14.3452 1.67819 14.625 1.33301 14.625C0.987832 14.625 0.70801 14.3452 0.70801 14C0.70801 13.3873 0.707216 12.8961 0.734377 12.498C0.76193 12.0945 0.820736 11.741 0.958987 11.4072C1.29307 10.6007 1.93369 9.96008 2.74024 9.62598C3.07402 9.48772 3.42749 9.42892 3.83106 9.40137C4.22915 9.3742 4.72031 9.375 5.33301 9.375H7.33301C7.94572 9.375 8.43688 9.3742 8.83496 9.40137C9.23853 9.42892 9.592 9.48772 9.92578 9.62598C10.7323 9.96008 11.3729 10.6007 11.707 11.4072C11.8453 11.741 11.9041 12.0945 11.9316 12.498C11.9588 12.8961 11.958 13.3873 11.958 14C11.958 14.3452 11.6782 14.625 11.333 14.625C10.9878 14.625 10.708 14.3452 10.708 14ZM14.041 14V12.667C14.041 11.7166 13.3914 10.9163 12.5107 10.6895C12.1765 10.6034 11.9755 10.262 12.0615 9.92773C12.1478 9.59378 12.4882 9.39251 12.8223 9.47852C14.2418 9.84395 15.291 11.1324 15.291 12.667V14C15.291 14.3452 15.0112 14.625 14.666 14.625C14.321 14.6248 14.041 14.3451 14.041 14ZM8.375 4.66699C8.375 3.53941 7.46057 2.625 6.33301 2.625C5.20543 2.625 4.29102 3.53941 4.29102 4.66699C4.29119 5.79443 5.20554 6.70801 6.33301 6.70801C7.46046 6.70801 8.37483 5.79442 8.375 4.66699ZM11.375 4.66699C11.375 3.81123 10.8479 3.07683 10.0986 2.77344C9.77868 2.64392 9.62439 2.27894 9.75391 1.95898C9.88353 1.63935 10.2476 1.48494 10.5674 1.61426C11.7725 2.1021 12.625 3.28458 12.625 4.66699C12.6249 6.04925 11.7725 7.231 10.5674 7.71875C10.2475 7.84818 9.88345 7.69386 9.75391 7.37402C9.62442 7.05408 9.77871 6.69007 10.0986 6.56055C10.8479 6.2573 11.3749 5.52271 11.375 4.66699ZM9.625 4.66699C9.62483 6.48478 8.15081 7.95801 6.33301 7.95801C4.51518 7.95801 3.04119 6.48478 3.04102 4.66699C3.04102 2.84905 4.51507 1.375 6.33301 1.375C8.15092 1.375 9.625 2.84905 9.625 4.66699Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/overdue-date-icon.tsx b/packages/propel/src/icons/properties/overdue-date-icon.tsx
index 97b36e673a..a53c0edd7d 100644
--- a/packages/propel/src/icons/properties/overdue-date-icon.tsx
+++ b/packages/propel/src/icons/properties/overdue-date-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const OverdueDatePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M13.375 7.29102H2.625V11.4668C2.625 12.0369 2.62571 12.4274 2.65039 12.7295C2.67449 13.024 2.71781 13.1799 2.77441 13.291C2.90624 13.5497 3.1173 13.7598 3.37598 13.8916C3.48708 13.9482 3.64284 13.9925 3.9375 14.0166C4.23962 14.0413 4.62998 14.041 5.2002 14.041H10.7998C11.37 14.041 11.7604 14.0413 12.0625 14.0166C12.3571 13.9925 12.5129 13.9482 12.624 13.8916C12.8827 13.7598 13.0938 13.5497 13.2256 13.291C13.2822 13.1799 13.3255 13.024 13.3496 12.7295C13.3743 12.4274 13.375 12.0369 13.375 11.4668V7.29102ZM9.22461 8.55762C9.46865 8.31362 9.86433 8.31367 10.1084 8.55762C10.3525 8.80168 10.3524 9.19733 10.1084 9.44141L8.88379 10.666L10.1084 11.8906C10.3525 12.1347 10.3525 12.5313 10.1084 12.7754C9.86437 13.0191 9.46861 13.0192 9.22461 12.7754L8 11.5498L6.77539 12.7754C6.53143 13.0192 6.13567 13.0191 5.8916 12.7754C5.64752 12.5313 5.64752 12.1347 5.8916 11.8906L7.11523 10.666L5.8916 9.44141C5.64752 9.19733 5.64752 8.80169 5.8916 8.55762C6.1357 8.31374 6.53138 8.31361 6.77539 8.55762L8 9.78223L9.22461 8.55762ZM10.042 4V3.29102H5.95801V4C5.95783 4.34503 5.67808 4.625 5.33301 4.625C4.98809 4.62482 4.70818 4.34492 4.70801 4V3.29297C4.39072 3.29481 4.14362 3.29958 3.9375 3.31641C3.64272 3.34049 3.48709 3.38481 3.37598 3.44141C3.11725 3.57323 2.90624 3.78327 2.77441 4.04199C2.71783 4.15308 2.67448 4.30883 2.65039 4.60352C2.62571 4.90564 2.625 5.29592 2.625 5.86621V6.04102H13.375V5.86621C13.375 5.29591 13.3743 4.90564 13.3496 4.60352C13.3255 4.30883 13.2822 4.15308 13.2256 4.04199C13.0938 3.78327 12.8827 3.57322 12.624 3.44141C12.5129 3.38481 12.3572 3.34049 12.0625 3.31641C11.8564 3.29958 11.6093 3.29481 11.292 3.29297V4C11.2918 4.34492 11.0119 4.62482 10.667 4.625C10.3219 4.625 10.0422 4.34503 10.042 4ZM14.625 11.4668C14.625 12.0163 14.6255 12.4663 14.5957 12.8311C14.5653 13.2031 14.5002 13.5417 14.3389 13.8584C14.0872 14.3522 13.6853 14.7533 13.1914 15.0049C12.8747 15.1662 12.5362 15.2313 12.1641 15.2617C11.7993 15.2915 11.3494 15.291 10.7998 15.291H5.2002C4.65066 15.291 4.20073 15.2915 3.83594 15.2617C3.46383 15.2313 3.12526 15.1662 2.80859 15.0049C2.31476 14.7533 1.91282 14.3522 1.66113 13.8584C1.49981 13.5417 1.43471 13.2031 1.4043 12.8311C1.3745 12.4663 1.375 12.0163 1.375 11.4668V5.86621C1.375 5.31658 1.3745 4.86676 1.4043 4.50195C1.4347 4.1298 1.49976 3.79131 1.66113 3.47461C1.9128 2.98069 2.31467 2.57881 2.80859 2.32715C3.12519 2.16592 3.46393 2.10071 3.83594 2.07031C4.08533 2.04996 4.37446 2.04486 4.70801 2.04297V1.33301C4.70801 0.987938 4.98798 0.708184 5.33301 0.708008C5.67819 0.708008 5.95801 0.98783 5.95801 1.33301V2.04102H10.042V1.33301C10.042 0.98783 10.3218 0.708008 10.667 0.708008C11.012 0.708183 11.292 0.987938 11.292 1.33301V2.04297C11.6255 2.04486 11.9147 2.04996 12.1641 2.07031C12.5361 2.10071 12.8748 2.16593 13.1914 2.32715C13.6854 2.57882 14.0872 2.9807 14.3389 3.47461L14.3945 3.59473C14.5155 3.87672 14.5691 4.17636 14.5957 4.50195C14.6255 4.86677 14.625 5.31659 14.625 5.86621V11.4668Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function OverdueDatePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 7.29102H2.625V11.4668C2.625 12.0369 2.62571 12.4274 2.65039 12.7295C2.67449 13.024 2.71781 13.1799 2.77441 13.291C2.90624 13.5497 3.1173 13.7598 3.37598 13.8916C3.48708 13.9482 3.64284 13.9925 3.9375 14.0166C4.23962 14.0413 4.62998 14.041 5.2002 14.041H10.7998C11.37 14.041 11.7604 14.0413 12.0625 14.0166C12.3571 13.9925 12.5129 13.9482 12.624 13.8916C12.8827 13.7598 13.0938 13.5497 13.2256 13.291C13.2822 13.1799 13.3255 13.024 13.3496 12.7295C13.3743 12.4274 13.375 12.0369 13.375 11.4668V7.29102ZM9.22461 8.55762C9.46865 8.31362 9.86433 8.31367 10.1084 8.55762C10.3525 8.80168 10.3524 9.19733 10.1084 9.44141L8.88379 10.666L10.1084 11.8906C10.3525 12.1347 10.3525 12.5313 10.1084 12.7754C9.86437 13.0191 9.46861 13.0192 9.22461 12.7754L8 11.5498L6.77539 12.7754C6.53143 13.0192 6.13567 13.0191 5.8916 12.7754C5.64752 12.5313 5.64752 12.1347 5.8916 11.8906L7.11523 10.666L5.8916 9.44141C5.64752 9.19733 5.64752 8.80169 5.8916 8.55762C6.1357 8.31374 6.53138 8.31361 6.77539 8.55762L8 9.78223L9.22461 8.55762ZM10.042 4V3.29102H5.95801V4C5.95783 4.34503 5.67808 4.625 5.33301 4.625C4.98809 4.62482 4.70818 4.34492 4.70801 4V3.29297C4.39072 3.29481 4.14362 3.29958 3.9375 3.31641C3.64272 3.34049 3.48709 3.38481 3.37598 3.44141C3.11725 3.57323 2.90624 3.78327 2.77441 4.04199C2.71783 4.15308 2.67448 4.30883 2.65039 4.60352C2.62571 4.90564 2.625 5.29592 2.625 5.86621V6.04102H13.375V5.86621C13.375 5.29591 13.3743 4.90564 13.3496 4.60352C13.3255 4.30883 13.2822 4.15308 13.2256 4.04199C13.0938 3.78327 12.8827 3.57322 12.624 3.44141C12.5129 3.38481 12.3572 3.34049 12.0625 3.31641C11.8564 3.29958 11.6093 3.29481 11.292 3.29297V4C11.2918 4.34492 11.0119 4.62482 10.667 4.625C10.3219 4.625 10.0422 4.34503 10.042 4ZM14.625 11.4668C14.625 12.0163 14.6255 12.4663 14.5957 12.8311C14.5653 13.2031 14.5002 13.5417 14.3389 13.8584C14.0872 14.3522 13.6853 14.7533 13.1914 15.0049C12.8747 15.1662 12.5362 15.2313 12.1641 15.2617C11.7993 15.2915 11.3494 15.291 10.7998 15.291H5.2002C4.65066 15.291 4.20073 15.2915 3.83594 15.2617C3.46383 15.2313 3.12526 15.1662 2.80859 15.0049C2.31476 14.7533 1.91282 14.3522 1.66113 13.8584C1.49981 13.5417 1.43471 13.2031 1.4043 12.8311C1.3745 12.4663 1.375 12.0163 1.375 11.4668V5.86621C1.375 5.31658 1.3745 4.86676 1.4043 4.50195C1.4347 4.1298 1.49976 3.79131 1.66113 3.47461C1.9128 2.98069 2.31467 2.57881 2.80859 2.32715C3.12519 2.16592 3.46393 2.10071 3.83594 2.07031C4.08533 2.04996 4.37446 2.04486 4.70801 2.04297V1.33301C4.70801 0.987938 4.98798 0.708184 5.33301 0.708008C5.67819 0.708008 5.95801 0.98783 5.95801 1.33301V2.04102H10.042V1.33301C10.042 0.98783 10.3218 0.708008 10.667 0.708008C11.012 0.708183 11.292 0.987938 11.292 1.33301V2.04297C11.6255 2.04486 11.9147 2.04996 12.1641 2.07031C12.5361 2.10071 12.8748 2.16593 13.1914 2.32715C13.6854 2.57882 14.0872 2.9807 14.3389 3.47461L14.3945 3.59473C14.5155 3.87672 14.5691 4.17636 14.5957 4.50195C14.6255 4.86677 14.625 5.31659 14.625 5.86621V11.4668Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/parent-icon.tsx b/packages/propel/src/icons/properties/parent-icon.tsx
index 36dd58fc73..5e941aefcd 100644
--- a/packages/propel/src/icons/properties/parent-icon.tsx
+++ b/packages/propel/src/icons/properties/parent-icon.tsx
@@ -3,19 +3,21 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const ParentPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M13.375 2.66699C13.375 2.64398 13.356 2.625 13.333 2.625H2.66699C2.64398 2.625 2.625 2.64398 2.625 2.66699V6C2.625 6.02301 2.64398 6.04199 2.66699 6.04199H13.333C13.356 6.04199 13.375 6.02301 13.375 6V2.66699ZM14.625 6C14.625 6.71337 14.0464 7.29199 13.333 7.29199H2.66699C1.95362 7.29199 1.375 6.71337 1.375 6V2.66699C1.375 1.95362 1.95362 1.375 2.66699 1.375H13.333C14.0464 1.375 14.625 1.95362 14.625 2.66699V6Z"
-      fill={color}
-    />
-    <path
-      d="M13.3755 10C13.3755 9.97699 13.3565 9.95801 13.3335 9.95801H10.0005C9.97748 9.95801 9.9585 9.97699 9.9585 10V13.333C9.9585 13.356 9.97748 13.375 10.0005 13.375H13.3335C13.3565 13.375 13.3755 13.356 13.3755 13.333V10ZM14.6255 13.333C14.6255 14.0464 14.0469 14.625 13.3335 14.625H10.0005C9.28712 14.625 8.7085 14.0464 8.7085 13.333V10C8.7085 9.28663 9.28712 8.70801 10.0005 8.70801H13.3335C14.0469 8.70801 14.6255 9.28663 14.6255 10V13.333Z"
-      fill={color}
-    />
-    <path
-      d="M2.76367 10.5996V10.4033L2.41797 10.7148C2.16139 10.9455 1.766 10.9245 1.53516 10.668C1.30445 10.4114 1.32553 10.016 1.58203 9.78516L2.9707 8.53516L3.06543 8.46484C3.29681 8.32476 3.59877 8.34834 3.80664 8.53516L5.19629 9.78516C5.45278 10.0161 5.47307 10.4114 5.24219 10.668C5.01128 10.9245 4.61594 10.9458 4.35938 10.7148L4.01367 10.4033V10.5996C4.01367 11.0309 4.01466 11.313 4.03418 11.5283C4.05286 11.734 4.08474 11.8209 4.11426 11.873C4.20505 12.0334 4.35735 12.1758 4.55957 12.2686C4.64109 12.3059 4.76292 12.3385 5.00684 12.3564C5.25649 12.3748 5.57974 12.375 6.05566 12.375H7C7.34518 12.375 7.625 12.6548 7.625 13C7.625 13.3452 7.34518 13.625 7 13.625H6.05566C5.59824 13.625 5.22121 13.6251 4.91504 13.6025C4.60331 13.5796 4.31307 13.5304 4.03809 13.4043C3.61331 13.2094 3.25509 12.8932 3.02637 12.4893C2.87424 12.2205 2.81579 11.936 2.78906 11.6416C2.76321 11.3567 2.76367 11.0082 2.76367 10.5996Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function ParentPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 2.66699C13.375 2.64398 13.356 2.625 13.333 2.625H2.66699C2.64398 2.625 2.625 2.64398 2.625 2.66699V6C2.625 6.02301 2.64398 6.04199 2.66699 6.04199H13.333C13.356 6.04199 13.375 6.02301 13.375 6V2.66699ZM14.625 6C14.625 6.71337 14.0464 7.29199 13.333 7.29199H2.66699C1.95362 7.29199 1.375 6.71337 1.375 6V2.66699C1.375 1.95362 1.95362 1.375 2.66699 1.375H13.333C14.0464 1.375 14.625 1.95362 14.625 2.66699V6Z"
+        fill={color}
+      />
+      <path
+        d="M13.3755 10C13.3755 9.97699 13.3565 9.95801 13.3335 9.95801H10.0005C9.97748 9.95801 9.9585 9.97699 9.9585 10V13.333C9.9585 13.356 9.97748 13.375 10.0005 13.375H13.3335C13.3565 13.375 13.3755 13.356 13.3755 13.333V10ZM14.6255 13.333C14.6255 14.0464 14.0469 14.625 13.3335 14.625H10.0005C9.28712 14.625 8.7085 14.0464 8.7085 13.333V10C8.7085 9.28663 9.28712 8.70801 10.0005 8.70801H13.3335C14.0469 8.70801 14.6255 9.28663 14.6255 10V13.333Z"
+        fill={color}
+      />
+      <path
+        d="M2.76367 10.5996V10.4033L2.41797 10.7148C2.16139 10.9455 1.766 10.9245 1.53516 10.668C1.30445 10.4114 1.32553 10.016 1.58203 9.78516L2.9707 8.53516L3.06543 8.46484C3.29681 8.32476 3.59877 8.34834 3.80664 8.53516L5.19629 9.78516C5.45278 10.0161 5.47307 10.4114 5.24219 10.668C5.01128 10.9245 4.61594 10.9458 4.35938 10.7148L4.01367 10.4033V10.5996C4.01367 11.0309 4.01466 11.313 4.03418 11.5283C4.05286 11.734 4.08474 11.8209 4.11426 11.873C4.20505 12.0334 4.35735 12.1758 4.55957 12.2686C4.64109 12.3059 4.76292 12.3385 5.00684 12.3564C5.25649 12.3748 5.57974 12.375 6.05566 12.375H7C7.34518 12.375 7.625 12.6548 7.625 13C7.625 13.3452 7.34518 13.625 7 13.625H6.05566C5.59824 13.625 5.22121 13.6251 4.91504 13.6025C4.60331 13.5796 4.31307 13.5304 4.03809 13.4043C3.61331 13.2094 3.25509 12.8932 3.02637 12.4893C2.87424 12.2205 2.81579 11.936 2.78906 11.6416C2.76321 11.3567 2.76367 11.0082 2.76367 10.5996Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/priority-icon.tsx b/packages/propel/src/icons/properties/priority-icon.tsx
index de528a9872..ed1ea32023 100644
--- a/packages/propel/src/icons/properties/priority-icon.tsx
+++ b/packages/propel/src/icons/properties/priority-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const PriorityPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M3.375 13.334V10.667C3.375 10.3218 3.65482 10.042 4 10.042C4.34518 10.042 4.625 10.3218 4.625 10.667V13.334C4.62482 13.679 4.34507 13.959 4 13.959C3.65493 13.959 3.37518 13.679 3.375 13.334ZM7.375 13.334V6.66699C7.375 6.32181 7.65482 6.04199 8 6.04199C8.34518 6.04199 8.625 6.32181 8.625 6.66699V13.334C8.62482 13.679 8.34507 13.959 8 13.959C7.65493 13.959 7.37518 13.679 7.375 13.334ZM11.375 13.334V2.66699C11.375 2.32181 11.6548 2.04199 12 2.04199C12.3452 2.04199 12.625 2.32181 12.625 2.66699V13.334C12.6248 13.679 12.3451 13.959 12 13.959C11.6549 13.959 11.3752 13.679 11.375 13.334Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function PriorityPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M3.375 13.334V10.667C3.375 10.3218 3.65482 10.042 4 10.042C4.34518 10.042 4.625 10.3218 4.625 10.667V13.334C4.62482 13.679 4.34507 13.959 4 13.959C3.65493 13.959 3.37518 13.679 3.375 13.334ZM7.375 13.334V6.66699C7.375 6.32181 7.65482 6.04199 8 6.04199C8.34518 6.04199 8.625 6.32181 8.625 6.66699V13.334C8.62482 13.679 8.34507 13.959 8 13.959C7.65493 13.959 7.37518 13.679 7.375 13.334ZM11.375 13.334V2.66699C11.375 2.32181 11.6548 2.04199 12 2.04199C12.3452 2.04199 12.625 2.32181 12.625 2.66699V13.334C12.6248 13.679 12.3451 13.959 12 13.959C11.6549 13.959 11.3752 13.679 11.375 13.334Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/relates-to-icon.tsx b/packages/propel/src/icons/properties/relates-to-icon.tsx
index 8328a1de81..02da39f2f6 100644
--- a/packages/propel/src/icons/properties/relates-to-icon.tsx
+++ b/packages/propel/src/icons/properties/relates-to-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const RelatesToPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M13.375 14V13.4746C13.375 12.8344 13.3748 12.3916 13.3467 12.0479C13.3192 11.7115 13.2675 11.5255 13.1973 11.3877C13.0415 11.0819 12.7931 10.8326 12.4873 10.6768C12.3496 10.6066 12.1632 10.5558 11.8271 10.5283C11.4833 10.5002 11.0398 10.5 10.3994 10.5H9.50879L10.3164 11.3076C10.5605 11.5517 10.5605 11.9483 10.3164 12.1924C10.0723 12.436 9.67656 12.4362 9.43262 12.1924L7.55762 10.3174C7.31354 10.0733 7.31354 9.67669 7.55762 9.43262L9.43262 7.55762C9.67656 7.31375 10.0723 7.31398 10.3164 7.55762C10.5605 7.8017 10.5605 8.19831 10.3164 8.44238L9.50879 9.25H10.3994C11.0192 9.25 11.5222 9.24999 11.9287 9.2832C12.3424 9.31701 12.7114 9.3886 13.0547 9.56348C13.5955 9.83905 14.0359 10.2785 14.3115 10.8193C14.4865 11.1628 14.558 11.5325 14.5918 11.9463C14.625 12.3528 14.625 12.855 14.625 13.4746V14C14.625 14.3451 14.3451 14.6249 14 14.625C13.6548 14.625 13.375 14.3452 13.375 14ZM13.375 7.16699V5.2002C13.375 4.62993 13.3743 4.23962 13.3496 3.9375C13.3255 3.64301 13.2821 3.48711 13.2256 3.37598C13.0938 3.11726 12.8828 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67446 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62993 2.625 4.23962 2.62572 3.9375 2.65039C3.643 2.67445 3.48711 2.71787 3.37598 2.77441C3.11726 2.90622 2.90622 3.11726 2.77441 3.37598C2.71787 3.48711 2.67445 3.643 2.65039 3.9375C2.62572 4.23962 2.625 4.62993 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67446 12.357 2.71788 12.5129 2.77441 12.624C2.90623 12.8828 3.11726 13.0938 3.37598 13.2256C3.48711 13.2821 3.64301 13.3255 3.9375 13.3496C4.23962 13.3743 4.62993 13.375 5.2002 13.375H8C8.34518 13.375 8.625 13.6548 8.625 14C8.625 14.3452 8.34518 14.625 8 14.625H5.2002C4.65066 14.625 4.20072 14.6255 3.83594 14.5957C3.46387 14.5653 3.12524 14.5001 2.80859 14.3389C2.31464 14.0872 1.91278 13.6853 1.66113 13.1914C1.49985 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65066 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49986 3.12523 1.66113 2.80859C1.91279 2.31464 2.31464 1.91279 2.80859 1.66113C3.12523 1.49986 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65066 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49985 13.1914 1.66113C13.6853 1.91278 14.0872 2.31464 14.3389 2.80859C14.5001 3.12524 14.5653 3.46387 14.5957 3.83594C14.6255 4.20072 14.625 4.65066 14.625 5.2002V7.16699C14.625 7.51216 14.3452 7.79198 14 7.79199C13.6549 7.79194 13.375 7.51213 13.375 7.16699Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function RelatesToPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 14V13.4746C13.375 12.8344 13.3748 12.3916 13.3467 12.0479C13.3192 11.7115 13.2675 11.5255 13.1973 11.3877C13.0415 11.0819 12.7931 10.8326 12.4873 10.6768C12.3496 10.6066 12.1632 10.5558 11.8271 10.5283C11.4833 10.5002 11.0398 10.5 10.3994 10.5H9.50879L10.3164 11.3076C10.5605 11.5517 10.5605 11.9483 10.3164 12.1924C10.0723 12.436 9.67656 12.4362 9.43262 12.1924L7.55762 10.3174C7.31354 10.0733 7.31354 9.67669 7.55762 9.43262L9.43262 7.55762C9.67656 7.31375 10.0723 7.31398 10.3164 7.55762C10.5605 7.8017 10.5605 8.19831 10.3164 8.44238L9.50879 9.25H10.3994C11.0192 9.25 11.5222 9.24999 11.9287 9.2832C12.3424 9.31701 12.7114 9.3886 13.0547 9.56348C13.5955 9.83905 14.0359 10.2785 14.3115 10.8193C14.4865 11.1628 14.558 11.5325 14.5918 11.9463C14.625 12.3528 14.625 12.855 14.625 13.4746V14C14.625 14.3451 14.3451 14.6249 14 14.625C13.6548 14.625 13.375 14.3452 13.375 14ZM13.375 7.16699V5.2002C13.375 4.62993 13.3743 4.23962 13.3496 3.9375C13.3255 3.64301 13.2821 3.48711 13.2256 3.37598C13.0938 3.11726 12.8828 2.90623 12.624 2.77441C12.5129 2.71788 12.357 2.67446 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62993 2.625 4.23962 2.62572 3.9375 2.65039C3.643 2.67445 3.48711 2.71787 3.37598 2.77441C3.11726 2.90622 2.90622 3.11726 2.77441 3.37598C2.71787 3.48711 2.67445 3.643 2.65039 3.9375C2.62572 4.23962 2.625 4.62993 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67446 12.357 2.71788 12.5129 2.77441 12.624C2.90623 12.8828 3.11726 13.0938 3.37598 13.2256C3.48711 13.2821 3.64301 13.3255 3.9375 13.3496C4.23962 13.3743 4.62993 13.375 5.2002 13.375H8C8.34518 13.375 8.625 13.6548 8.625 14C8.625 14.3452 8.34518 14.625 8 14.625H5.2002C4.65066 14.625 4.20072 14.6255 3.83594 14.5957C3.46387 14.5653 3.12524 14.5001 2.80859 14.3389C2.31464 14.0872 1.91278 13.6853 1.66113 13.1914C1.49985 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65066 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49986 3.12523 1.66113 2.80859C1.91279 2.31464 2.31464 1.91279 2.80859 1.66113C3.12523 1.49986 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65066 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49985 13.1914 1.66113C13.6853 1.91278 14.0872 2.31464 14.3389 2.80859C14.5001 3.12524 14.5653 3.46387 14.5957 3.83594C14.6255 4.20072 14.625 4.65066 14.625 5.2002V7.16699C14.625 7.51216 14.3452 7.79198 14 7.79199C13.6549 7.79194 13.375 7.51213 13.375 7.16699Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/relation-icon.tsx b/packages/propel/src/icons/properties/relation-icon.tsx
index 258ab030d9..370406c717 100644
--- a/packages/propel/src/icons/properties/relation-icon.tsx
+++ b/packages/propel/src/icons/properties/relation-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const RelationPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M13.375 13.333C13.375 12.9419 13.0581 12.6252 12.667 12.625C12.2758 12.625 11.958 12.9418 11.958 13.333C11.958 13.7242 12.2758 14.041 12.667 14.041C13.0581 14.0408 13.375 13.7241 13.375 13.333ZM13.375 8C13.375 7.60889 13.0581 7.29119 12.667 7.29102C12.2758 7.29102 11.958 7.60878 11.958 8C11.9582 8.39107 12.2759 8.70801 12.667 8.70801C13.058 8.70783 13.3748 8.39096 13.375 8ZM2.625 8C2.62518 8.39096 2.94206 8.70783 3.33301 8.70801C3.72411 8.70801 4.04182 8.39107 4.04199 8C4.04199 7.60878 3.72422 7.29102 3.33301 7.29102C2.94195 7.29119 2.625 7.60889 2.625 8ZM13.375 2.66602C13.3748 2.27507 13.058 1.95818 12.667 1.95801C12.2759 1.95801 11.9582 2.27496 11.958 2.66602C11.958 3.05722 12.2758 3.375 12.667 3.375C13.0581 3.37482 13.375 3.05712 13.375 2.66602ZM14.625 2.66602C14.625 3.74746 13.7484 4.62482 12.667 4.625C11.8047 4.625 11.0729 4.06708 10.8115 3.29297C10.4437 3.29422 10.1655 3.29779 9.9375 3.31641C9.64277 3.34049 9.48713 3.38481 9.37598 3.44141C9.11726 3.57322 8.90623 3.78326 8.77441 4.04199C8.71782 4.15308 8.67448 4.30883 8.65039 4.60352C8.6257 4.90564 8.625 5.29591 8.625 5.86621V7.375H10.8115C11.0724 6.59996 11.804 6.04102 12.667 6.04102C13.7484 6.04119 14.625 6.91853 14.625 8C14.6248 9.08132 13.7483 9.95783 12.667 9.95801C11.8042 9.95801 11.0726 9.39973 10.8115 8.625H8.625V10.1328C8.625 10.7031 8.62572 11.0934 8.65039 11.3955C8.67445 11.69 8.71787 11.8459 8.77441 11.957C8.90622 12.2157 9.11726 12.4268 9.37598 12.5586C9.4871 12.6151 9.643 12.6586 9.9375 12.6826C10.1655 12.7012 10.4436 12.7048 10.8115 12.7061C11.073 11.9321 11.8048 11.375 12.667 11.375C13.7484 11.3752 14.625 12.2515 14.625 13.333C14.625 14.4145 13.7484 15.2908 12.667 15.291C11.803 15.291 11.0706 14.7315 10.8105 13.9551C10.4333 13.9538 10.1105 13.9511 9.83594 13.9287C9.46387 13.8983 9.12523 13.8331 8.80859 13.6719C8.31464 13.4202 7.91279 13.0184 7.66113 12.5244C7.49986 12.2078 7.4347 11.8691 7.4043 11.4971C7.37452 11.1323 7.375 10.6823 7.375 10.1328V8.625H5.18848C4.92744 9.39974 4.19576 9.95801 3.33301 9.95801C2.25171 9.95783 1.37518 9.08133 1.375 8C1.375 6.91852 2.25161 6.04119 3.33301 6.04102C4.19598 6.04102 4.92761 6.59996 5.18848 7.375H7.375V5.86621C7.375 5.31659 7.3745 4.86677 7.4043 4.50195C7.4347 4.1298 7.49975 3.79132 7.66113 3.47461L7.7627 3.29395C8.01489 2.88278 8.37641 2.54735 8.80859 2.32715C9.1252 2.16593 9.46392 2.10071 9.83594 2.07031C10.1105 2.0479 10.4333 2.0442 10.8105 2.04297C11.071 1.26718 11.8035 0.708008 12.667 0.708008C13.7483 0.708184 14.6248 1.58472 14.625 2.66602Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function RelationPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 13.333C13.375 12.9419 13.0581 12.6252 12.667 12.625C12.2758 12.625 11.958 12.9418 11.958 13.333C11.958 13.7242 12.2758 14.041 12.667 14.041C13.0581 14.0408 13.375 13.7241 13.375 13.333ZM13.375 8C13.375 7.60889 13.0581 7.29119 12.667 7.29102C12.2758 7.29102 11.958 7.60878 11.958 8C11.9582 8.39107 12.2759 8.70801 12.667 8.70801C13.058 8.70783 13.3748 8.39096 13.375 8ZM2.625 8C2.62518 8.39096 2.94206 8.70783 3.33301 8.70801C3.72411 8.70801 4.04182 8.39107 4.04199 8C4.04199 7.60878 3.72422 7.29102 3.33301 7.29102C2.94195 7.29119 2.625 7.60889 2.625 8ZM13.375 2.66602C13.3748 2.27507 13.058 1.95818 12.667 1.95801C12.2759 1.95801 11.9582 2.27496 11.958 2.66602C11.958 3.05722 12.2758 3.375 12.667 3.375C13.0581 3.37482 13.375 3.05712 13.375 2.66602ZM14.625 2.66602C14.625 3.74746 13.7484 4.62482 12.667 4.625C11.8047 4.625 11.0729 4.06708 10.8115 3.29297C10.4437 3.29422 10.1655 3.29779 9.9375 3.31641C9.64277 3.34049 9.48713 3.38481 9.37598 3.44141C9.11726 3.57322 8.90623 3.78326 8.77441 4.04199C8.71782 4.15308 8.67448 4.30883 8.65039 4.60352C8.6257 4.90564 8.625 5.29591 8.625 5.86621V7.375H10.8115C11.0724 6.59996 11.804 6.04102 12.667 6.04102C13.7484 6.04119 14.625 6.91853 14.625 8C14.6248 9.08132 13.7483 9.95783 12.667 9.95801C11.8042 9.95801 11.0726 9.39973 10.8115 8.625H8.625V10.1328C8.625 10.7031 8.62572 11.0934 8.65039 11.3955C8.67445 11.69 8.71787 11.8459 8.77441 11.957C8.90622 12.2157 9.11726 12.4268 9.37598 12.5586C9.4871 12.6151 9.643 12.6586 9.9375 12.6826C10.1655 12.7012 10.4436 12.7048 10.8115 12.7061C11.073 11.9321 11.8048 11.375 12.667 11.375C13.7484 11.3752 14.625 12.2515 14.625 13.333C14.625 14.4145 13.7484 15.2908 12.667 15.291C11.803 15.291 11.0706 14.7315 10.8105 13.9551C10.4333 13.9538 10.1105 13.9511 9.83594 13.9287C9.46387 13.8983 9.12523 13.8331 8.80859 13.6719C8.31464 13.4202 7.91279 13.0184 7.66113 12.5244C7.49986 12.2078 7.4347 11.8691 7.4043 11.4971C7.37452 11.1323 7.375 10.6823 7.375 10.1328V8.625H5.18848C4.92744 9.39974 4.19576 9.95801 3.33301 9.95801C2.25171 9.95783 1.37518 9.08133 1.375 8C1.375 6.91852 2.25161 6.04119 3.33301 6.04102C4.19598 6.04102 4.92761 6.59996 5.18848 7.375H7.375V5.86621C7.375 5.31659 7.3745 4.86677 7.4043 4.50195C7.4347 4.1298 7.49975 3.79132 7.66113 3.47461L7.7627 3.29395C8.01489 2.88278 8.37641 2.54735 8.80859 2.32715C9.1252 2.16593 9.46392 2.10071 9.83594 2.07031C10.1105 2.0479 10.4333 2.0442 10.8105 2.04297C11.071 1.26718 11.8035 0.708008 12.667 0.708008C13.7483 0.708184 14.6248 1.58472 14.625 2.66602Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/scope-icon.tsx b/packages/propel/src/icons/properties/scope-icon.tsx
index afee1b7108..4cdd287393 100644
--- a/packages/propel/src/icons/properties/scope-icon.tsx
+++ b/packages/propel/src/icons/properties/scope-icon.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const ScopePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+export function ScopePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
   const clipPathId = React.useId();
 
   return (
@@ -14,4 +14,4 @@ export const ScopePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor",
       />
     </IconWrapper>
   );
-};
+}
diff --git a/packages/propel/src/icons/properties/start-date-icon.tsx b/packages/propel/src/icons/properties/start-date-icon.tsx
index db46c6817d..31ec2b9aa3 100644
--- a/packages/propel/src/icons/properties/start-date-icon.tsx
+++ b/packages/propel/src/icons/properties/start-date-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const StartDatePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M14.2085 10.833C14.2085 8.96905 12.6974 7.45801 10.8335 7.45801C8.96953 7.45801 7.4585 8.96905 7.4585 10.833C7.4585 12.697 8.96954 14.208 10.8335 14.208C12.6974 14.208 14.2085 12.6969 14.2085 10.833ZM10.2085 8.43262C10.2087 8.08762 10.4884 7.80762 10.8335 7.80762C11.1785 7.80762 11.4583 8.08762 11.4585 8.43262V10.4463L12.7134 11.0742C13.0217 11.2286 13.1467 11.6036 12.9927 11.9121C12.8383 12.2208 12.4625 12.3468 12.1538 12.1924L10.5542 11.3916C10.3425 11.2857 10.2085 11.0697 10.2085 10.833V8.43262ZM9.87549 3.83301V3.12402H5.7915V3.83301C5.79133 4.17804 5.51157 4.45801 5.1665 4.45801C4.82158 4.45783 4.54168 4.17793 4.5415 3.83301V3.12598C4.22421 3.12782 3.97711 3.13258 3.771 3.14941C3.47622 3.1735 3.32058 3.21782 3.20947 3.27441C2.95075 3.40624 2.73974 3.61628 2.60791 3.875C2.55132 3.98609 2.50797 4.14184 2.48389 4.43652C2.4592 4.73865 2.4585 5.12892 2.4585 5.69922V5.87402H5.8335C6.17857 5.87402 6.45832 6.154 6.4585 6.49902C6.4585 6.8442 6.17867 7.12402 5.8335 7.12402H2.4585V11.2998C2.4585 11.8699 2.45921 12.2604 2.48389 12.5625C2.50799 12.857 2.55131 13.0129 2.60791 13.124C2.73973 13.3827 2.95079 13.5928 3.20947 13.7246C3.32057 13.7812 3.47633 13.8255 3.771 13.8496C4.07311 13.8743 4.46347 13.874 5.03369 13.874C5.37867 13.8741 5.65852 14.1541 5.65869 14.499C5.65869 14.8441 5.37878 15.1239 5.03369 15.124C4.48416 15.124 4.03422 15.1245 3.66943 15.0947C3.29733 15.0643 2.95876 14.9992 2.64209 14.8379C2.14825 14.5863 1.74631 14.1852 1.49463 13.6914C1.33331 13.3748 1.26821 13.0361 1.23779 12.6641C1.20799 12.2993 1.2085 11.8494 1.2085 11.2998V5.69922C1.2085 5.14959 1.20799 4.69977 1.23779 4.33496C1.2682 3.96281 1.33326 3.62432 1.49463 3.30762C1.7463 2.8137 2.14817 2.41182 2.64209 2.16016C2.95869 1.99893 3.29743 1.93371 3.66943 1.90332C3.91882 1.88297 4.20796 1.87787 4.5415 1.87598V1.16602C4.5415 0.820946 4.82148 0.541192 5.1665 0.541016C5.51168 0.541016 5.7915 0.820838 5.7915 1.16602V1.87402H9.87549V1.16602C9.87549 0.820838 10.1553 0.541016 10.5005 0.541016C10.8455 0.541191 11.1255 0.820946 11.1255 1.16602V1.87598C11.459 1.87787 11.7482 1.88297 11.9976 1.90332C12.3696 1.93372 12.7083 1.99894 13.0249 2.16016C13.5188 2.41183 13.9207 2.8137 14.1724 3.30762L14.228 3.42773C14.349 3.70973 14.4026 4.00936 14.4292 4.33496C14.459 4.69977 14.4585 5.1496 14.4585 5.69922C14.4585 6.0444 14.1787 6.32422 13.8335 6.32422C13.4883 6.32422 13.2085 6.0444 13.2085 5.69922C13.2085 5.12893 13.2078 4.73865 13.1831 4.43652C13.159 4.14184 13.1157 3.98609 13.0591 3.875C12.9273 3.61627 12.7162 3.40623 12.4575 3.27441C12.3464 3.21781 12.1907 3.17349 11.896 3.14941C11.6899 3.13258 11.4428 3.12782 11.1255 3.12598V3.83301C11.1253 4.17793 10.8454 4.45783 10.5005 4.45801C10.1554 4.45801 9.87566 4.17804 9.87549 3.83301ZM15.4585 10.833C15.4585 13.3873 13.3878 15.458 10.8335 15.458C8.27918 15.458 6.2085 13.3873 6.2085 10.833C6.2085 8.27869 8.27918 6.20801 10.8335 6.20801C13.3878 6.20801 15.4585 8.27869 15.4585 10.833Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function StartDatePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M14.2085 10.833C14.2085 8.96905 12.6974 7.45801 10.8335 7.45801C8.96953 7.45801 7.4585 8.96905 7.4585 10.833C7.4585 12.697 8.96954 14.208 10.8335 14.208C12.6974 14.208 14.2085 12.6969 14.2085 10.833ZM10.2085 8.43262C10.2087 8.08762 10.4884 7.80762 10.8335 7.80762C11.1785 7.80762 11.4583 8.08762 11.4585 8.43262V10.4463L12.7134 11.0742C13.0217 11.2286 13.1467 11.6036 12.9927 11.9121C12.8383 12.2208 12.4625 12.3468 12.1538 12.1924L10.5542 11.3916C10.3425 11.2857 10.2085 11.0697 10.2085 10.833V8.43262ZM9.87549 3.83301V3.12402H5.7915V3.83301C5.79133 4.17804 5.51157 4.45801 5.1665 4.45801C4.82158 4.45783 4.54168 4.17793 4.5415 3.83301V3.12598C4.22421 3.12782 3.97711 3.13258 3.771 3.14941C3.47622 3.1735 3.32058 3.21782 3.20947 3.27441C2.95075 3.40624 2.73974 3.61628 2.60791 3.875C2.55132 3.98609 2.50797 4.14184 2.48389 4.43652C2.4592 4.73865 2.4585 5.12892 2.4585 5.69922V5.87402H5.8335C6.17857 5.87402 6.45832 6.154 6.4585 6.49902C6.4585 6.8442 6.17867 7.12402 5.8335 7.12402H2.4585V11.2998C2.4585 11.8699 2.45921 12.2604 2.48389 12.5625C2.50799 12.857 2.55131 13.0129 2.60791 13.124C2.73973 13.3827 2.95079 13.5928 3.20947 13.7246C3.32057 13.7812 3.47633 13.8255 3.771 13.8496C4.07311 13.8743 4.46347 13.874 5.03369 13.874C5.37867 13.8741 5.65852 14.1541 5.65869 14.499C5.65869 14.8441 5.37878 15.1239 5.03369 15.124C4.48416 15.124 4.03422 15.1245 3.66943 15.0947C3.29733 15.0643 2.95876 14.9992 2.64209 14.8379C2.14825 14.5863 1.74631 14.1852 1.49463 13.6914C1.33331 13.3748 1.26821 13.0361 1.23779 12.6641C1.20799 12.2993 1.2085 11.8494 1.2085 11.2998V5.69922C1.2085 5.14959 1.20799 4.69977 1.23779 4.33496C1.2682 3.96281 1.33326 3.62432 1.49463 3.30762C1.7463 2.8137 2.14817 2.41182 2.64209 2.16016C2.95869 1.99893 3.29743 1.93371 3.66943 1.90332C3.91882 1.88297 4.20796 1.87787 4.5415 1.87598V1.16602C4.5415 0.820946 4.82148 0.541192 5.1665 0.541016C5.51168 0.541016 5.7915 0.820838 5.7915 1.16602V1.87402H9.87549V1.16602C9.87549 0.820838 10.1553 0.541016 10.5005 0.541016C10.8455 0.541191 11.1255 0.820946 11.1255 1.16602V1.87598C11.459 1.87787 11.7482 1.88297 11.9976 1.90332C12.3696 1.93372 12.7083 1.99894 13.0249 2.16016C13.5188 2.41183 13.9207 2.8137 14.1724 3.30762L14.228 3.42773C14.349 3.70973 14.4026 4.00936 14.4292 4.33496C14.459 4.69977 14.4585 5.1496 14.4585 5.69922C14.4585 6.0444 14.1787 6.32422 13.8335 6.32422C13.4883 6.32422 13.2085 6.0444 13.2085 5.69922C13.2085 5.12893 13.2078 4.73865 13.1831 4.43652C13.159 4.14184 13.1157 3.98609 13.0591 3.875C12.9273 3.61627 12.7162 3.40623 12.4575 3.27441C12.3464 3.21781 12.1907 3.17349 11.896 3.14941C11.6899 3.13258 11.4428 3.12782 11.1255 3.12598V3.83301C11.1253 4.17793 10.8454 4.45783 10.5005 4.45801C10.1554 4.45801 9.87566 4.17804 9.87549 3.83301ZM15.4585 10.833C15.4585 13.3873 13.3878 15.458 10.8335 15.458C8.27918 15.458 6.2085 13.3873 6.2085 10.833C6.2085 8.27869 8.27918 6.20801 10.8335 6.20801C13.3878 6.20801 15.4585 8.27869 15.4585 10.833Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/state-icon.tsx b/packages/propel/src/icons/properties/state-icon.tsx
index 80e6820dea..6d3f738947 100644
--- a/packages/propel/src/icons/properties/state-icon.tsx
+++ b/packages/propel/src/icons/properties/state-icon.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const StatePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+export function StatePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
   const clipPathId = React.useId();
 
   return (
@@ -14,4 +14,4 @@ export const StatePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor",
       />
     </IconWrapper>
   );
-};
+}
diff --git a/packages/propel/src/icons/properties/user-circle-icon.tsx b/packages/propel/src/icons/properties/user-circle-icon.tsx
index a28f72f1c3..0fc747d091 100644
--- a/packages/propel/src/icons/properties/user-circle-icon.tsx
+++ b/packages/propel/src/icons/properties/user-circle-icon.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const UserCirclePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+export function UserCirclePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
   const clipPathId = React.useId();
 
   return (
@@ -14,4 +14,4 @@ export const UserCirclePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentCo
       />
     </IconWrapper>
   );
-};
+}
diff --git a/packages/propel/src/icons/properties/user-icon.tsx b/packages/propel/src/icons/properties/user-icon.tsx
index 9e81972c38..05a139007a 100644
--- a/packages/propel/src/icons/properties/user-icon.tsx
+++ b/packages/propel/src/icons/properties/user-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const UserPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M12.7085 14C12.7085 13.0241 12.7018 12.6747 12.6207 12.4072C12.4227 11.7547 11.9118 11.2438 11.2593 11.0459C10.9919 10.9648 10.6424 10.958 9.66655 10.958H6.33354C5.3581 10.958 5.00819 10.9649 4.74077 11.0459C4.08831 11.2438 3.57741 11.7547 3.37944 12.4072C3.29831 12.6747 3.29155 13.0241 3.29155 14C3.29155 14.3452 3.01173 14.625 2.66655 14.625C2.32137 14.625 2.04155 14.3452 2.04155 14C2.04155 13.1153 2.03476 12.5344 2.18315 12.0449C2.50227 10.9929 3.32548 10.1688 4.37749 9.84961C4.86708 9.70113 5.44863 9.70801 6.33354 9.70801H9.66655C10.5512 9.70801 11.1321 9.70127 11.6216 9.84961C12.6736 10.1687 13.4978 10.9929 13.8169 12.0449C13.9653 12.5344 13.9585 13.1153 13.9585 14C13.9585 14.3451 13.6786 14.6248 13.3335 14.625C12.9884 14.625 12.7085 14.3452 12.7085 14ZM10.3746 5C10.3746 3.68832 9.31125 2.625 7.99956 2.625C6.68803 2.62518 5.62456 3.68843 5.62456 5C5.62456 6.31157 6.68803 7.37482 7.99956 7.375C9.31125 7.375 10.3746 6.31168 10.3746 5ZM11.6246 5C11.6246 7.00203 10.0016 8.625 7.99956 8.625C5.99768 8.62482 4.37456 7.00192 4.37456 5C4.37456 2.99808 5.99768 1.37518 7.99956 1.375C10.0016 1.375 11.6246 2.99797 11.6246 5Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function UserPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M12.7085 14C12.7085 13.0241 12.7018 12.6747 12.6207 12.4072C12.4227 11.7547 11.9118 11.2438 11.2593 11.0459C10.9919 10.9648 10.6424 10.958 9.66655 10.958H6.33354C5.3581 10.958 5.00819 10.9649 4.74077 11.0459C4.08831 11.2438 3.57741 11.7547 3.37944 12.4072C3.29831 12.6747 3.29155 13.0241 3.29155 14C3.29155 14.3452 3.01173 14.625 2.66655 14.625C2.32137 14.625 2.04155 14.3452 2.04155 14C2.04155 13.1153 2.03476 12.5344 2.18315 12.0449C2.50227 10.9929 3.32548 10.1688 4.37749 9.84961C4.86708 9.70113 5.44863 9.70801 6.33354 9.70801H9.66655C10.5512 9.70801 11.1321 9.70127 11.6216 9.84961C12.6736 10.1687 13.4978 10.9929 13.8169 12.0449C13.9653 12.5344 13.9585 13.1153 13.9585 14C13.9585 14.3451 13.6786 14.6248 13.3335 14.625C12.9884 14.625 12.7085 14.3452 12.7085 14ZM10.3746 5C10.3746 3.68832 9.31125 2.625 7.99956 2.625C6.68803 2.62518 5.62456 3.68843 5.62456 5C5.62456 6.31157 6.68803 7.37482 7.99956 7.375C9.31125 7.375 10.3746 6.31168 10.3746 5ZM11.6246 5C11.6246 7.00203 10.0016 8.625 7.99956 8.625C5.99768 8.62482 4.37456 7.00192 4.37456 5C4.37456 2.99808 5.99768 1.37518 7.99956 1.375C10.0016 1.375 11.6246 2.99797 11.6246 5Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/properties/user-square-icon.tsx b/packages/propel/src/icons/properties/user-square-icon.tsx
index f7a6c45471..55d7095276 100644
--- a/packages/propel/src/icons/properties/user-square-icon.tsx
+++ b/packages/propel/src/icons/properties/user-square-icon.tsx
@@ -3,7 +3,7 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const UserSquarePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
+export function UserSquarePropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
   const clipPathId = React.useId();
 
   return (
@@ -14,4 +14,4 @@ export const UserSquarePropertyIcon: React.FC<ISvgIcons> = ({ color = "currentCo
       />
     </IconWrapper>
   );
-};
+}
diff --git a/packages/propel/src/icons/properties/workflows-icon.tsx b/packages/propel/src/icons/properties/workflows-icon.tsx
index 7524911b8e..79ebd8900e 100644
--- a/packages/propel/src/icons/properties/workflows-icon.tsx
+++ b/packages/propel/src/icons/properties/workflows-icon.tsx
@@ -3,19 +3,21 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const WorkflowsPropertyIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M6.70801 3.33301C6.70783 2.94196 6.39109 2.625 6 2.625H3.33301C2.94206 2.62518 2.62518 2.94206 2.625 3.33301V6C2.625 6.39109 2.94196 6.70783 3.33301 6.70801H6C6.3912 6.70801 6.70801 6.3912 6.70801 6V3.33301ZM7.95801 6C7.95801 7.08156 7.08156 7.95801 6 7.95801H3.33301C2.2516 7.95783 1.375 7.08145 1.375 6V3.33301C1.37518 2.25171 2.25171 1.37518 3.33301 1.375H6C7.08145 1.375 7.95783 2.2516 7.95801 3.33301V6Z"
-      fill={color}
-    />
-    <path
-      d="M4.04167 10.0003V7.33333C4.04167 6.98816 4.32149 6.70833 4.66667 6.70833C5.01184 6.70833 5.29167 6.98816 5.29167 7.33333V10.0003C5.29175 10.1881 5.36594 10.3685 5.4987 10.5013C5.63146 10.6341 5.81193 10.7082 5.99967 10.7083H8.66667C9.01185 10.7083 9.29167 10.9882 9.29167 11.3333C9.29167 11.6785 9.01185 11.9583 8.66667 11.9583H5.99967C5.48041 11.9582 4.98209 11.7523 4.61491 11.3851C4.24773 11.0179 4.04175 10.5196 4.04167 10.0003Z"
-      fill={color}
-    />
-    <path
-      d="M13.3747 9.99967C13.3745 9.60862 13.0578 9.29167 12.6667 9.29167H9.99967C9.60873 9.29184 9.29184 9.60873 9.29167 9.99967V12.6667C9.29167 13.0578 9.60862 13.3745 9.99967 13.3747H12.6667C13.0579 13.3747 13.3747 13.0579 13.3747 12.6667V9.99967ZM14.6247 12.6667C14.6247 13.7482 13.7482 14.6247 12.6667 14.6247H9.99967C8.91827 14.6245 8.04167 13.7481 8.04167 12.6667V9.99967C8.04184 8.91838 8.91838 8.04184 9.99967 8.04167H12.6667C13.7481 8.04167 14.6245 8.91827 14.6247 9.99967V12.6667Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function WorkflowsPropertyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M6.70801 3.33301C6.70783 2.94196 6.39109 2.625 6 2.625H3.33301C2.94206 2.62518 2.62518 2.94206 2.625 3.33301V6C2.625 6.39109 2.94196 6.70783 3.33301 6.70801H6C6.3912 6.70801 6.70801 6.3912 6.70801 6V3.33301ZM7.95801 6C7.95801 7.08156 7.08156 7.95801 6 7.95801H3.33301C2.2516 7.95783 1.375 7.08145 1.375 6V3.33301C1.37518 2.25171 2.25171 1.37518 3.33301 1.375H6C7.08145 1.375 7.95783 2.2516 7.95801 3.33301V6Z"
+        fill={color}
+      />
+      <path
+        d="M4.04167 10.0003V7.33333C4.04167 6.98816 4.32149 6.70833 4.66667 6.70833C5.01184 6.70833 5.29167 6.98816 5.29167 7.33333V10.0003C5.29175 10.1881 5.36594 10.3685 5.4987 10.5013C5.63146 10.6341 5.81193 10.7082 5.99967 10.7083H8.66667C9.01185 10.7083 9.29167 10.9882 9.29167 11.3333C9.29167 11.6785 9.01185 11.9583 8.66667 11.9583H5.99967C5.48041 11.9582 4.98209 11.7523 4.61491 11.3851C4.24773 11.0179 4.04175 10.5196 4.04167 10.0003Z"
+        fill={color}
+      />
+      <path
+        d="M13.3747 9.99967C13.3745 9.60862 13.0578 9.29167 12.6667 9.29167H9.99967C9.60873 9.29184 9.29184 9.60873 9.29167 9.99967V12.6667C9.29167 13.0578 9.60862 13.3745 9.99967 13.3747H12.6667C13.0579 13.3747 13.3747 13.0579 13.3747 12.6667V9.99967ZM14.6247 12.6667C14.6247 13.7482 13.7482 14.6247 12.6667 14.6247H9.99967C8.91827 14.6245 8.04167 13.7481 8.04167 12.6667V9.99967C8.04184 8.91838 8.91838 8.04184 9.99967 8.04167H12.6667C13.7481 8.04167 14.6245 8.91827 14.6247 9.99967V12.6667Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/registry.ts b/packages/propel/src/icons/registry.ts
index 96f6e2df66..84b1605946 100644
--- a/packages/propel/src/icons/registry.ts
+++ b/packages/propel/src/icons/registry.ts
@@ -1,10 +1,19 @@
-import { AddReactionIcon } from "./actions";
+import {
+  AddReactionIcon,
+  AddWorkItemIcon,
+  FilterAppliedIcon,
+  FilterIcon,
+  PreferencesIcon,
+  SearchIcon,
+  UpgradeIcon,
+} 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";
+import { ReplyIcon } from "./arrows/reply-icon";
 import { DefaultIcon } from "./default-icon";
 import { BoardLayoutIcon } from "./layouts/board-icon";
 import { CalendarLayoutIcon } from "./layouts/calendar-icon";
@@ -40,6 +49,8 @@ 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 { CopyLinkIcon } from "./actions/copy-link";
+import { LabelFilledIcon } from "./properties/label-filled-icon";
 import { PiChatLogo } from "./sub-brand/pi-chat";
 import { PlaneNewIcon } from "./sub-brand/plane-icon";
 import { WikiIcon } from "./sub-brand/wiki-icon";
@@ -49,6 +60,7 @@ 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";
 
@@ -66,6 +78,7 @@ export const ICON_REGISTRY = {
   "workspace.draft": DraftIcon,
   "workspace.home": HomeIcon,
   "workspace.inbox": InboxIcon,
+  "workspace.multiple-sticky": MultipleStickyIcon,
   "workspace.page": PageIcon,
   "workspace.project": ProjectIcon,
   "workspace.views": ViewsIcon,
@@ -110,17 +123,26 @@ 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.close": CloseIcon,
+  "action.filter": FilterIcon,
+  "action.filter-applied": FilterAppliedIcon,
+  "action.search": SearchIcon,
+  "action.preferences": PreferencesIcon,
+  "action.copy-link": CopyLinkIcon,
+  "action.upgrade": UpgradeIcon,
 
   // Arrow icons
   "arrow.chevron-down": ChevronDownIcon,
   "arrow.chevron-left": ChevronLeftIcon,
   "arrow.chevron-right": ChevronRightIcon,
   "arrow.chevron-up": ChevronUpIcon,
+  "arrow.reply": ReplyIcon,
 
   // Default fallback
   default: DefaultIcon,
diff --git a/packages/propel/src/icons/related-icon.tsx b/packages/propel/src/icons/related-icon.tsx
index 3d467284c1..d94cf73a01 100644
--- a/packages/propel/src/icons/related-icon.tsx
+++ b/packages/propel/src/icons/related-icon.tsx
@@ -2,25 +2,27 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const RelatedIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} stroke-2`}
-    stroke="currentColor"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <path
-      d="M20 13V6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H11"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path d="M12.125 19.25L9 16.125L12.125 13" strokeLinecap="round" strokeLinejoin="round" />
-    <path
-      d="M20 22V18.1818C20 17.6032 19.7366 17.0482 19.2678 16.639C18.7989 16.2299 18.163 16 17.5 16H10"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+export function RelatedIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M20 13V6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V20C2 20.5304 2.21071 21.0391 2.58579 21.4142C2.96086 21.7893 3.46957 22 4 22H11"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path d="M12.125 19.25L9 16.125L12.125 13" strokeLinecap="round" strokeLinejoin="round" />
+      <path
+        d="M20 22V18.1818C20 17.6032 19.7366 17.0482 19.2678 16.639C18.7989 16.2299 18.163 16 17.5 16H10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/sans-serif-icon.tsx b/packages/propel/src/icons/sans-serif-icon.tsx
index a63fc19957..4c56e0fe87 100644
--- a/packages/propel/src/icons/sans-serif-icon.tsx
+++ b/packages/propel/src/icons/sans-serif-icon.tsx
@@ -2,15 +2,17 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const SansSerifIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...rest}>
-    <path
-      d="M12.4877 11.5341C11.9579 11.5341 11.502 11.4646 11.1198 11.3256C10.7406 11.1867 10.4308 11.0028 10.1905 10.7741C9.95021 10.5454 9.77071 10.295 9.65202 10.0228L10.7681 9.56253C10.8462 9.68991 10.9504 9.82453 11.0807 9.96639C11.2139 10.1111 11.3934 10.2342 11.6192 10.3355C11.8479 10.4368 12.1418 10.4875 12.5007 10.4875C12.9929 10.4875 13.3997 10.3674 13.721 10.1271C14.0424 9.88967 14.203 9.51042 14.203 8.98931V7.67785H14.1205C14.0424 7.81971 13.9295 7.97749 13.7818 8.15119C13.6371 8.3249 13.4373 8.47544 13.1825 8.60282C12.9278 8.7302 12.5963 8.79389 12.1881 8.79389C11.6612 8.79389 11.1864 8.67085 10.7637 8.42478C10.3439 8.1758 10.011 7.80958 9.76492 7.3261C9.52174 6.83973 9.40015 6.2419 9.40015 5.53262C9.40015 4.82333 9.52029 4.21537 9.76058 3.70873C10.0038 3.2021 10.3367 2.81416 10.7594 2.54492C11.1821 2.27279 11.6612 2.13672 12.1968 2.13672C12.6108 2.13672 12.9451 2.2062 13.1999 2.34516C13.4547 2.48123 13.653 2.64046 13.7948 2.82285C13.9396 3.00523 14.0511 3.16591 14.1292 3.30487H14.2248V2.22357H15.4971V9.04142C15.4971 9.61464 15.364 10.0851 15.0976 10.4528C14.8313 10.8204 14.4708 11.0926 14.0163 11.2692C13.5647 11.4458 13.0552 11.5341 12.4877 11.5341ZM12.4747 7.71693C12.8482 7.71693 13.1637 7.63008 13.4214 7.45638C13.6819 7.27978 13.8788 7.02791 14.012 6.70077C14.148 6.37073 14.2161 5.97556 14.2161 5.51525C14.2161 5.06651 14.1495 4.67134 14.0163 4.32972C13.8831 3.98811 13.6877 3.72176 13.4301 3.53069C13.1724 3.33672 12.8539 3.23973 12.4747 3.23973C12.0839 3.23973 11.7582 3.34106 11.4976 3.54371C11.2371 3.74347 11.0402 4.01561 10.907 4.36012C10.7767 4.70463 10.7116 5.08967 10.7116 5.51525C10.7116 5.9524 10.7782 6.33599 10.9114 6.66603C11.0445 6.99607 11.2414 7.25373 11.502 7.43901C11.7654 7.62429 12.0897 7.71693 12.4747 7.71693Z"
-      fill="currentColor"
-    />
-    <path
-      d="M2.09099 8.8936H0.666626L3.86711 0H5.41741L8.61789 8.8936H7.19353L4.67917 1.61544H4.60969L2.09099 8.8936ZM2.32983 5.41085H6.95034V6.53993H2.32983V5.41085Z"
-      fill="currentColor"
-    />
-  </svg>
-);
+export function SansSerifIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...rest}>
+      <path
+        d="M12.4877 11.5341C11.9579 11.5341 11.502 11.4646 11.1198 11.3256C10.7406 11.1867 10.4308 11.0028 10.1905 10.7741C9.95021 10.5454 9.77071 10.295 9.65202 10.0228L10.7681 9.56253C10.8462 9.68991 10.9504 9.82453 11.0807 9.96639C11.2139 10.1111 11.3934 10.2342 11.6192 10.3355C11.8479 10.4368 12.1418 10.4875 12.5007 10.4875C12.9929 10.4875 13.3997 10.3674 13.721 10.1271C14.0424 9.88967 14.203 9.51042 14.203 8.98931V7.67785H14.1205C14.0424 7.81971 13.9295 7.97749 13.7818 8.15119C13.6371 8.3249 13.4373 8.47544 13.1825 8.60282C12.9278 8.7302 12.5963 8.79389 12.1881 8.79389C11.6612 8.79389 11.1864 8.67085 10.7637 8.42478C10.3439 8.1758 10.011 7.80958 9.76492 7.3261C9.52174 6.83973 9.40015 6.2419 9.40015 5.53262C9.40015 4.82333 9.52029 4.21537 9.76058 3.70873C10.0038 3.2021 10.3367 2.81416 10.7594 2.54492C11.1821 2.27279 11.6612 2.13672 12.1968 2.13672C12.6108 2.13672 12.9451 2.2062 13.1999 2.34516C13.4547 2.48123 13.653 2.64046 13.7948 2.82285C13.9396 3.00523 14.0511 3.16591 14.1292 3.30487H14.2248V2.22357H15.4971V9.04142C15.4971 9.61464 15.364 10.0851 15.0976 10.4528C14.8313 10.8204 14.4708 11.0926 14.0163 11.2692C13.5647 11.4458 13.0552 11.5341 12.4877 11.5341ZM12.4747 7.71693C12.8482 7.71693 13.1637 7.63008 13.4214 7.45638C13.6819 7.27978 13.8788 7.02791 14.012 6.70077C14.148 6.37073 14.2161 5.97556 14.2161 5.51525C14.2161 5.06651 14.1495 4.67134 14.0163 4.32972C13.8831 3.98811 13.6877 3.72176 13.4301 3.53069C13.1724 3.33672 12.8539 3.23973 12.4747 3.23973C12.0839 3.23973 11.7582 3.34106 11.4976 3.54371C11.2371 3.74347 11.0402 4.01561 10.907 4.36012C10.7767 4.70463 10.7116 5.08967 10.7116 5.51525C10.7116 5.9524 10.7782 6.33599 10.9114 6.66603C11.0445 6.99607 11.2414 7.25373 11.502 7.43901C11.7654 7.62429 12.0897 7.71693 12.4747 7.71693Z"
+        fill="currentColor"
+      />
+      <path
+        d="M2.09099 8.8936H0.666626L3.86711 0H5.41741L8.61789 8.8936H7.19353L4.67917 1.61544H4.60969L2.09099 8.8936ZM2.32983 5.41085H6.95034V6.53993H2.32983V5.41085Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/serif-icon.tsx b/packages/propel/src/icons/serif-icon.tsx
index 01ed929898..7ee42628bf 100644
--- a/packages/propel/src/icons/serif-icon.tsx
+++ b/packages/propel/src/icons/serif-icon.tsx
@@ -2,15 +2,17 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const SerifIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...rest}>
-    <path
-      d="M11.6021 7.09532C11.2602 6.92843 10.9976 6.69641 10.8145 6.39927C10.6313 6.09806 10.5397 5.76631 10.5397 5.40404C10.5397 4.85046 10.7473 4.37422 11.1625 3.97531C11.5818 3.57641 12.117 3.37695 12.7683 3.37695C13.3015 3.37695 13.7635 3.50721 14.1543 3.76772H15.3388C15.5138 3.76772 15.6156 3.77382 15.6441 3.78603C15.6726 3.79418 15.6929 3.81046 15.7051 3.83488C15.7296 3.87151 15.7418 3.93664 15.7418 4.03026C15.7418 4.13609 15.7316 4.20936 15.7112 4.25007C15.699 4.27042 15.6766 4.2867 15.6441 4.29891C15.6156 4.31112 15.5138 4.31723 15.3388 4.31723H14.6122C14.8402 4.6103 14.9541 4.98479 14.9541 5.44068C14.9541 5.9617 14.7547 6.40741 14.3558 6.77782C13.9569 7.14824 13.4216 7.33344 12.75 7.33344C12.4732 7.33344 12.1903 7.29274 11.9013 7.21133C11.7222 7.36601 11.6001 7.50237 11.5349 7.62041C11.4739 7.73438 11.4434 7.83207 11.4434 7.91348C11.4434 7.98268 11.4759 8.04984 11.541 8.11497C11.6102 8.1801 11.7425 8.22691 11.9379 8.2554C12.0519 8.27168 12.3368 8.28593 12.7927 8.29814C13.6312 8.31849 14.1746 8.34699 14.4229 8.38362C14.8015 8.43654 15.1027 8.57697 15.3266 8.80491C15.5545 9.03286 15.6685 9.31372 15.6685 9.6475C15.6685 10.1075 15.4528 10.5389 15.0213 10.9419C14.3863 11.5362 13.558 11.8333 12.5363 11.8333C11.7507 11.8333 11.0872 11.6563 10.5458 11.3021C10.2405 11.0986 10.0879 10.887 10.0879 10.6672C10.0879 10.5695 10.1103 10.4718 10.1551 10.3741C10.2243 10.2235 10.3667 10.0138 10.5825 9.74519C10.6109 9.70856 10.8185 9.48875 11.2052 9.08578C10.9936 8.95959 10.843 8.84765 10.7534 8.74996C10.6679 8.6482 10.6252 8.53423 10.6252 8.40804C10.6252 8.26558 10.6822 8.09869 10.7962 7.90738C10.9142 7.71607 11.1828 7.44538 11.6021 7.09532ZM12.6645 3.67003C12.3633 3.67003 12.1109 3.79011 11.9074 4.03026C11.7039 4.27042 11.6021 4.6388 11.6021 5.13539C11.6021 5.77853 11.7405 6.27716 12.0173 6.63129C12.229 6.89994 12.4976 7.03426 12.8232 7.03426C13.1326 7.03426 13.387 6.91826 13.5865 6.68624C13.7859 6.45422 13.8856 6.08992 13.8856 5.59332C13.8856 4.94612 13.7452 4.43934 13.4643 4.073C13.2567 3.80435 12.9901 3.67003 12.6645 3.67003ZM11.541 9.13462C11.3497 9.34222 11.2052 9.53556 11.1075 9.71466C11.0099 9.89376 10.961 10.0586 10.961 10.2092C10.961 10.4046 11.079 10.5756 11.3151 10.7221C11.7222 10.9745 12.3104 11.1007 13.0797 11.1007C13.8124 11.1007 14.3517 10.9704 14.6977 10.7099C15.0477 10.4535 15.2228 10.1787 15.2228 9.88562C15.2228 9.67396 15.119 9.52335 14.9114 9.4338C14.6997 9.34425 14.2805 9.29133 13.6536 9.27505C12.7378 9.25063 12.0336 9.20382 11.541 9.13462Z"
-      fill="currentColor"
-    />
-    <path
-      d="M6.28997 6.36263H3.08448L2.52276 7.66925C2.38436 7.99081 2.31516 8.23097 2.31516 8.38972C2.31516 8.5159 2.37418 8.62784 2.49223 8.72553C2.61434 8.81915 2.87485 8.88021 3.27376 8.9087V9.13461H0.666626V8.9087C1.01262 8.84764 1.23649 8.76827 1.33825 8.67058C1.54585 8.4752 1.77583 8.07833 2.0282 7.47997L4.94061 0.666016H5.15431L8.0362 7.55324C8.26821 8.10682 8.47784 8.46706 8.66508 8.63394C8.8564 8.79676 9.12098 8.88835 9.45882 8.9087V9.13461H6.19228V8.9087C6.52199 8.89242 6.74383 8.83747 6.8578 8.74385C6.97584 8.65023 7.03486 8.53625 7.03486 8.40193C7.03486 8.22283 6.95345 7.93993 6.79064 7.55324L6.28997 6.36263ZM6.11901 5.91081L4.7147 2.56489L3.27376 5.91081H6.11901Z"
-      fill="currentColor"
-    />
-  </svg>
-);
+export function SerifIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...rest}>
+      <path
+        d="M11.6021 7.09532C11.2602 6.92843 10.9976 6.69641 10.8145 6.39927C10.6313 6.09806 10.5397 5.76631 10.5397 5.40404C10.5397 4.85046 10.7473 4.37422 11.1625 3.97531C11.5818 3.57641 12.117 3.37695 12.7683 3.37695C13.3015 3.37695 13.7635 3.50721 14.1543 3.76772H15.3388C15.5138 3.76772 15.6156 3.77382 15.6441 3.78603C15.6726 3.79418 15.6929 3.81046 15.7051 3.83488C15.7296 3.87151 15.7418 3.93664 15.7418 4.03026C15.7418 4.13609 15.7316 4.20936 15.7112 4.25007C15.699 4.27042 15.6766 4.2867 15.6441 4.29891C15.6156 4.31112 15.5138 4.31723 15.3388 4.31723H14.6122C14.8402 4.6103 14.9541 4.98479 14.9541 5.44068C14.9541 5.9617 14.7547 6.40741 14.3558 6.77782C13.9569 7.14824 13.4216 7.33344 12.75 7.33344C12.4732 7.33344 12.1903 7.29274 11.9013 7.21133C11.7222 7.36601 11.6001 7.50237 11.5349 7.62041C11.4739 7.73438 11.4434 7.83207 11.4434 7.91348C11.4434 7.98268 11.4759 8.04984 11.541 8.11497C11.6102 8.1801 11.7425 8.22691 11.9379 8.2554C12.0519 8.27168 12.3368 8.28593 12.7927 8.29814C13.6312 8.31849 14.1746 8.34699 14.4229 8.38362C14.8015 8.43654 15.1027 8.57697 15.3266 8.80491C15.5545 9.03286 15.6685 9.31372 15.6685 9.6475C15.6685 10.1075 15.4528 10.5389 15.0213 10.9419C14.3863 11.5362 13.558 11.8333 12.5363 11.8333C11.7507 11.8333 11.0872 11.6563 10.5458 11.3021C10.2405 11.0986 10.0879 10.887 10.0879 10.6672C10.0879 10.5695 10.1103 10.4718 10.1551 10.3741C10.2243 10.2235 10.3667 10.0138 10.5825 9.74519C10.6109 9.70856 10.8185 9.48875 11.2052 9.08578C10.9936 8.95959 10.843 8.84765 10.7534 8.74996C10.6679 8.6482 10.6252 8.53423 10.6252 8.40804C10.6252 8.26558 10.6822 8.09869 10.7962 7.90738C10.9142 7.71607 11.1828 7.44538 11.6021 7.09532ZM12.6645 3.67003C12.3633 3.67003 12.1109 3.79011 11.9074 4.03026C11.7039 4.27042 11.6021 4.6388 11.6021 5.13539C11.6021 5.77853 11.7405 6.27716 12.0173 6.63129C12.229 6.89994 12.4976 7.03426 12.8232 7.03426C13.1326 7.03426 13.387 6.91826 13.5865 6.68624C13.7859 6.45422 13.8856 6.08992 13.8856 5.59332C13.8856 4.94612 13.7452 4.43934 13.4643 4.073C13.2567 3.80435 12.9901 3.67003 12.6645 3.67003ZM11.541 9.13462C11.3497 9.34222 11.2052 9.53556 11.1075 9.71466C11.0099 9.89376 10.961 10.0586 10.961 10.2092C10.961 10.4046 11.079 10.5756 11.3151 10.7221C11.7222 10.9745 12.3104 11.1007 13.0797 11.1007C13.8124 11.1007 14.3517 10.9704 14.6977 10.7099C15.0477 10.4535 15.2228 10.1787 15.2228 9.88562C15.2228 9.67396 15.119 9.52335 14.9114 9.4338C14.6997 9.34425 14.2805 9.29133 13.6536 9.27505C12.7378 9.25063 12.0336 9.20382 11.541 9.13462Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6.28997 6.36263H3.08448L2.52276 7.66925C2.38436 7.99081 2.31516 8.23097 2.31516 8.38972C2.31516 8.5159 2.37418 8.62784 2.49223 8.72553C2.61434 8.81915 2.87485 8.88021 3.27376 8.9087V9.13461H0.666626V8.9087C1.01262 8.84764 1.23649 8.76827 1.33825 8.67058C1.54585 8.4752 1.77583 8.07833 2.0282 7.47997L4.94061 0.666016H5.15431L8.0362 7.55324C8.26821 8.10682 8.47784 8.46706 8.66508 8.63394C8.8564 8.79676 9.12098 8.88835 9.45882 8.9087V9.13461H6.19228V8.9087C6.52199 8.89242 6.74383 8.83747 6.8578 8.74385C6.97584 8.65023 7.03486 8.53625 7.03486 8.40193C7.03486 8.22283 6.95345 7.93993 6.79064 7.55324L6.28997 6.36263ZM6.11901 5.91081L4.7147 2.56489L3.27376 5.91081H6.11901Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/set-as-default-icon.tsx b/packages/propel/src/icons/set-as-default-icon.tsx
new file mode 100644
index 0000000000..155438d206
--- /dev/null
+++ b/packages/propel/src/icons/set-as-default-icon.tsx
@@ -0,0 +1,23 @@
+import type { ISvgIcons } from "./type";
+
+export function SetAsDefaultIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      width="15"
+      height="15"
+      viewBox="0 0 15 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...rest}
+    >
+      <path
+        d="M7.29167 0.625V13.9583M12.0057 2.57762L2.57762 12.0057M13.9583 7.29167H0.625M12.0057 12.0057L2.57762 2.57762"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/side-panel-icon.tsx b/packages/propel/src/icons/side-panel-icon.tsx
index 3327124a4c..be2de3bd43 100644
--- a/packages/propel/src/icons/side-panel-icon.tsx
+++ b/packages/propel/src/icons/side-panel-icon.tsx
@@ -2,25 +2,27 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const SidePanelIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} stroke-2`}
-    stroke="currentColor"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <path
-      d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M20 3H12V5V19V21H20C20.5523 21 21 20.1046 21 19V5C21 3.89543 20.5523 3 20 3Z"
-      fill="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+export function SidePanelIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
+      stroke="currentColor"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        d="M19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M20 3H12V5V19V21H20C20.5523 21 21 20.1046 21 19V5C21 3.89543 20.5523 3 20 3Z"
+        fill="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/state/backlog-group-icon.tsx b/packages/propel/src/icons/state/backlog-group-icon.tsx
index 33fff30fd1..d394c46cd5 100644
--- a/packages/propel/src/icons/state/backlog-group-icon.tsx
+++ b/packages/propel/src/icons/state/backlog-group-icon.tsx
@@ -3,12 +3,7 @@ import * as React from "react";
 import type { ISvgIcons } from "../type";
 import { DashedCircle } from "./dashed-circle";
 
-export const BacklogGroupIcon: React.FC<ISvgIcons> = ({
-  width = "20",
-  height = "20",
-  className,
-  color = "#60646C",
-}) => {
+export function BacklogGroupIcon({ width = "20", height = "20", className, color = "#60646C" }: ISvgIcons) {
   // SVG parameters
   const viewBoxSize = 16;
   const center = viewBoxSize / 2;
@@ -24,4 +19,4 @@ export const BacklogGroupIcon: React.FC<ISvgIcons> = ({
       <DashedCircle center={center} radius={radius} color={color} percentage={0} />
     </svg>
   );
-};
+}
diff --git a/packages/propel/src/icons/state/cancelled-group-icon.tsx b/packages/propel/src/icons/state/cancelled-group-icon.tsx
index dde6339804..6bd25d329b 100644
--- a/packages/propel/src/icons/state/cancelled-group-icon.tsx
+++ b/packages/propel/src/icons/state/cancelled-group-icon.tsx
@@ -2,26 +2,28 @@ import * as React from "react";
 
 import type { ISvgIcons } from "../type";
 
-export const CancelledGroupIcon: React.FC<ISvgIcons> = ({
+export function CancelledGroupIcon({
   className = "",
   color = "#9AA4BC",
   height = "20",
   width = "20",
   ...rest
-}) => (
-  <svg
-    height={height}
-    width={width}
-    className={className}
-    viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM11.1018 4.89826C11.3947 5.19115 11.3947 5.66603 11.1018 5.95892L9.06068 8.00002L11.1018 10.0411C11.3947 10.334 11.3947 10.8089 11.1018 11.1018C10.8089 11.3947 10.334 11.3947 10.0411 11.1018L8.00002 9.06068L5.95892 11.1018C5.66603 11.3947 5.19115 11.3947 4.89826 11.1018C4.60537 10.8089 4.60537 10.334 4.89826 10.0411L6.93936 8.00002L4.89826 5.95892C4.60537 5.66603 4.60537 5.19115 4.89826 4.89826C5.19115 4.60537 5.66603 4.60537 5.95892 4.89826L8.00002 6.93936L10.0411 4.89826C10.334 4.60537 10.8089 4.60537 11.1018 4.89826Z"
-      fill={color}
-    />
-  </svg>
-);
+}: ISvgIcons) {
+  return (
+    <svg
+      height={height}
+      width={width}
+      className={className}
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM11.1018 4.89826C11.3947 5.19115 11.3947 5.66603 11.1018 5.95892L9.06068 8.00002L11.1018 10.0411C11.3947 10.334 11.3947 10.8089 11.1018 11.1018C10.8089 11.3947 10.334 11.3947 10.0411 11.1018L8.00002 9.06068L5.95892 11.1018C5.66603 11.3947 5.19115 11.3947 4.89826 11.1018C4.60537 10.8089 4.60537 10.334 4.89826 10.0411L6.93936 8.00002L4.89826 5.95892C4.60537 5.66603 4.60537 5.19115 4.89826 4.89826C5.19115 4.60537 5.66603 4.60537 5.95892 4.89826L8.00002 6.93936L10.0411 4.89826C10.334 4.60537 10.8089 4.60537 11.1018 4.89826Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/state/completed-group-icon.tsx b/packages/propel/src/icons/state/completed-group-icon.tsx
index e0c21a175b..b6be3dfa09 100644
--- a/packages/propel/src/icons/state/completed-group-icon.tsx
+++ b/packages/propel/src/icons/state/completed-group-icon.tsx
@@ -2,26 +2,28 @@ import * as React from "react";
 
 import type { ISvgIcons } from "../type";
 
-export const CompletedGroupIcon: React.FC<ISvgIcons> = ({
+export function CompletedGroupIcon({
   className = "",
   color = "#46A758",
   height = "20",
   width = "20",
   ...rest
-}) => (
-  <svg
-    height={height}
-    width={width}
-    className={className}
-    viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
-    {...rest}
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM11.3587 6.18828C11.6007 5.85214 11.5244 5.38343 11.1882 5.14141C10.8521 4.89938 10.3834 4.97568 10.1414 5.31183L7.03706 9.62335L5.25956 7.97751C4.95563 7.69609 4.4811 7.71434 4.19968 8.01828C3.91826 8.32221 3.93651 8.79673 4.24045 9.07815L6.64045 11.3004C6.79816 11.4464 7.01095 11.5178 7.22481 11.4963C7.43868 11.4749 7.63307 11.3627 7.75865 11.1883L11.3587 6.18828Z"
-      fill={color}
-    />
-  </svg>
-);
+}: ISvgIcons) {
+  return (
+    <svg
+      height={height}
+      width={width}
+      className={className}
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM11.3587 6.18828C11.6007 5.85214 11.5244 5.38343 11.1882 5.14141C10.8521 4.89938 10.3834 4.97568 10.1414 5.31183L7.03706 9.62335L5.25956 7.97751C4.95563 7.69609 4.4811 7.71434 4.19968 8.01828C3.91826 8.32221 3.93651 8.79673 4.24045 9.07815L6.64045 11.3004C6.79816 11.4464 7.01095 11.5178 7.22481 11.4963C7.43868 11.4749 7.63307 11.3627 7.75865 11.1883L11.3587 6.18828Z"
+        fill={color}
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/state/dashed-circle.tsx b/packages/propel/src/icons/state/dashed-circle.tsx
index 4ee64cdf05..541053ea31 100644
--- a/packages/propel/src/icons/state/dashed-circle.tsx
+++ b/packages/propel/src/icons/state/dashed-circle.tsx
@@ -8,7 +8,7 @@ interface DashedCircleProps {
   totalSegments?: number;
 }
 
-export const DashedCircle: React.FC<DashedCircleProps> = ({ center, color, percentage, totalSegments = 15 }) => {
+export function DashedCircle({ center, color, percentage, totalSegments = 15 }: DashedCircleProps) {
   // Ensure percentage is between 0 and 100
   const validPercentage = Math.max(0, Math.min(100, percentage));
 
@@ -37,4 +37,4 @@ export const DashedCircle: React.FC<DashedCircleProps> = ({ center, color, perce
   };
 
   return <g>{generateDashedCircle()}</g>;
-};
+}
diff --git a/packages/propel/src/icons/state/helper.tsx b/packages/propel/src/icons/state/helper.tsx
index fda3eff345..2e73e75698 100644
--- a/packages/propel/src/icons/state/helper.tsx
+++ b/packages/propel/src/icons/state/helper.tsx
@@ -1,4 +1,5 @@
 import { EIconSize } from "@plane/constants";
+import type { TIntakeStateGroups } from "@plane/types";
 
 export interface IStateGroupIcon {
   className?: string;
@@ -8,6 +9,14 @@ export interface IStateGroupIcon {
   percentage?: number;
 }
 
+export interface IIntakeStateGroupIcon {
+  className?: string;
+  color?: string;
+  stateGroup: TIntakeStateGroups;
+  size?: EIconSize;
+  percentage?: number;
+}
+
 export type TStateGroups = "backlog" | "unstarted" | "started" | "completed" | "cancelled";
 
 export const STATE_GROUP_COLORS: {
@@ -20,6 +29,8 @@ export const STATE_GROUP_COLORS: {
   cancelled: "#9AA4BC",
 };
 
+export const INTAKE_STATE_GROUP_COLORS: { [key in TIntakeStateGroups]: string } = { triage: "#4E5355" };
+
 export const STATE_GROUP_SIZES: {
   [key in EIconSize]: string;
 } = {
diff --git a/packages/propel/src/icons/state/index.ts b/packages/propel/src/icons/state/index.ts
index 0e5fdadd67..c050c1c321 100644
--- a/packages/propel/src/icons/state/index.ts
+++ b/packages/propel/src/icons/state/index.ts
@@ -4,3 +4,4 @@ export * from "./completed-group-icon";
 export * from "./started-group-icon";
 export * from "./state-group-icon";
 export * from "./unstarted-group-icon";
+export * from "./intake-state-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
new file mode 100644
index 0000000000..ece3a1aab2
--- /dev/null
+++ b/packages/propel/src/icons/state/intake-state-group-icon.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+
+import { EIconSize } from "@plane/constants";
+import type { IIntakeStateGroupIcon } from "./helper";
+import { INTAKE_STATE_GROUP_COLORS, STATE_GROUP_SIZES } from "./helper";
+import { TriageGroupIcon } from "./triage-group-icon";
+
+const iconComponents = { triage: TriageGroupIcon };
+
+export function IntakeStateGroupIcon({
+  className = "",
+  color,
+  stateGroup,
+  size = EIconSize.SM,
+}: IIntakeStateGroupIcon) {
+  const IntakeStateIconComponent = iconComponents[stateGroup] || TriageGroupIcon;
+
+  return (
+    <IntakeStateIconComponent
+      height={STATE_GROUP_SIZES[size]}
+      width={STATE_GROUP_SIZES[size]}
+      color={color ?? INTAKE_STATE_GROUP_COLORS[stateGroup]}
+      className={`flex-shrink-0 ${className}`}
+    />
+  );
+}
diff --git a/packages/propel/src/icons/state/progress-circle.tsx b/packages/propel/src/icons/state/progress-circle.tsx
index 470a560fc9..d86de0b132 100644
--- a/packages/propel/src/icons/state/progress-circle.tsx
+++ b/packages/propel/src/icons/state/progress-circle.tsx
@@ -9,24 +9,19 @@ interface ProgressCircleProps {
   dashOffset: number;
 }
 
-export const ProgressCircle: React.FC<ProgressCircleProps> = ({
-  center,
-  radius,
-  color,
-  strokeWidth,
-  circumference,
-  dashOffset,
-}) => (
-  <circle
-    cx={center}
-    cy={center}
-    r={radius}
-    fill="none"
-    stroke={color}
-    strokeWidth={strokeWidth}
-    strokeDasharray={circumference}
-    strokeDashoffset={dashOffset}
-    strokeLinecap="round"
-    transform={`rotate(-90 ${center} ${center})`}
-  />
-);
+export function ProgressCircle({ center, radius, color, strokeWidth, circumference, dashOffset }: ProgressCircleProps) {
+  return (
+    <circle
+      cx={center}
+      cy={center}
+      r={radius}
+      fill="none"
+      stroke={color}
+      strokeWidth={strokeWidth}
+      strokeDasharray={circumference}
+      strokeDashoffset={dashOffset}
+      strokeLinecap="round"
+      transform={`rotate(-90 ${center} ${center})`}
+    />
+  );
+}
diff --git a/packages/propel/src/icons/state/started-group-icon.tsx b/packages/propel/src/icons/state/started-group-icon.tsx
index 275fd70ebc..019a991183 100644
--- a/packages/propel/src/icons/state/started-group-icon.tsx
+++ b/packages/propel/src/icons/state/started-group-icon.tsx
@@ -5,13 +5,13 @@ import { DashedCircle } from "./dashed-circle";
 import { ProgressCircle } from "./progress-circle";
 
 // StateIcon component implementation
-export const StartedGroupIcon: React.FC<ISvgIcons> = ({
+export function StartedGroupIcon({
   width = "20",
   height = "20",
   className,
   color = "#F59E0B",
   percentage = 100,
-}) => {
+}: ISvgIcons) {
   // Ensure percentage is between 0 and 100
   const normalized =
     typeof percentage === "number"
@@ -62,4 +62,4 @@ export const StartedGroupIcon: React.FC<ISvgIcons> = ({
       />
     </svg>
   );
-};
+}
diff --git a/packages/propel/src/icons/state/state-group-icon.tsx b/packages/propel/src/icons/state/state-group-icon.tsx
index b5e023d174..e94fdc40f0 100644
--- a/packages/propel/src/icons/state/state-group-icon.tsx
+++ b/packages/propel/src/icons/state/state-group-icon.tsx
@@ -17,13 +17,13 @@ const iconComponents = {
   unstarted: UnstartedGroupIcon,
 };
 
-export const StateGroupIcon: React.FC<IStateGroupIcon> = ({
+export function StateGroupIcon({
   className = "",
   color,
   stateGroup,
   size = EIconSize.SM,
   percentage,
-}) => {
+}: IStateGroupIcon) {
   const StateIconComponent = iconComponents[stateGroup] || UnstartedGroupIcon;
 
   return (
@@ -35,4 +35,4 @@ export const StateGroupIcon: React.FC<IStateGroupIcon> = ({
       percentage={percentage}
     />
   );
-};
+}
diff --git a/packages/propel/src/icons/state/triage-group-icon.tsx b/packages/propel/src/icons/state/triage-group-icon.tsx
new file mode 100644
index 0000000000..d4956ff5bb
--- /dev/null
+++ b/packages/propel/src/icons/state/triage-group-icon.tsx
@@ -0,0 +1,42 @@
+import * as React from "react";
+
+import type { ISvgIcons } from "../type";
+
+export function TriageGroupIcon({ width = "20", height = "20", className, color = "#4E5355" }: ISvgIcons) {
+  // SVG parameters
+  const viewBoxSize = 16;
+  return (
+    <svg
+      height={height}
+      width={width}
+      viewBox={`0 0 ${viewBoxSize} ${viewBoxSize}`}
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+    >
+      <g clipPath="url(#clip0_3870_37)">
+        <path
+          d="M0.75 8C0.75 3.99594 3.99594 0.75 8 0.75C8.32217 0.75 8.58333 1.01117 8.58333 1.33333C8.58333 1.6555 8.32217 1.91667 8 1.91667C4.64027 1.91667 1.91667 4.64027 1.91667 8C1.91667 11.3597 4.64027 14.0833 8 14.0833C8.32217 14.0833 8.58333 14.3445 8.58333 14.6667C8.58333 14.9888 8.32217 15.25 8 15.25C3.99594 15.25 0.75 12.0041 0.75 8Z"
+          fill={color}
+        />
+        <path
+          d="M10.9855 13.9615L11.078 14.1465C11.1916 14.3737 11.1001 14.6515 10.8663 14.7508C10.6324 14.8501 10.3689 14.7229 10.2845 14.4831L10.1195 14.0143C10.0505 13.8183 10.154 13.6046 10.3453 13.5234C10.5366 13.4423 10.7621 13.5162 10.8553 13.7019L10.9855 13.9615ZM12.6866 13.0286C12.8599 13.2144 12.8506 13.5069 12.6541 13.6681C12.4576 13.8292 12.1691 13.7815 12.0205 13.5754L11.7298 13.1724C11.6082 13.0038 11.6472 12.7694 11.8079 12.6375C11.9685 12.5057 12.2058 12.5131 12.3476 12.665L12.6866 13.0286ZM13.9148 11.5026C14.1333 11.632 14.2067 11.9149 14.0638 12.1249C13.921 12.3348 13.6308 12.3704 13.4302 12.2147L13.0373 11.9097C12.8731 11.7823 12.8444 11.5465 12.9614 11.3748C13.0783 11.203 13.3082 11.1431 13.487 11.2491L13.9148 11.5026ZM14.6627 9.69141C14.9089 9.75393 15.0592 10.0048 14.9813 10.2466C14.9034 10.4883 14.635 10.6044 14.3985 10.5116L13.9362 10.3302C13.7427 10.2542 13.6486 10.036 13.7122 9.83814C13.7759 9.64027 13.9795 9.51796 14.181 9.56911L14.6627 9.69141ZM14.8689 7.74357C15.1228 7.73414 15.3378 7.93242 15.3313 8.18638C15.3248 8.44044 15.0999 8.62755 14.8468 8.60509L14.3518 8.56118C14.1448 8.54281 13.9931 8.36009 13.9986 8.15234C14.004 7.94452 14.165 7.76971 14.3728 7.762L14.8689 7.74357ZM14.5173 5.8165C14.7582 5.73553 15.0206 5.86505 15.0861 6.11063C15.1515 6.35609 14.9886 6.59895 14.7395 6.64882L14.252 6.74642C14.0484 6.78719 13.8514 6.65476 13.798 6.45402C13.7446 6.2532 13.8497 6.0402 14.0467 5.97425L14.3221 5.88209L14.5173 5.8165ZM13.6369 4.06668C13.8452 3.92123 14.1334 3.97157 14.2654 4.1887C14.3974 4.40584 14.3096 4.68491 14.0846 4.80306L13.6448 5.03401C13.4608 5.13061 13.2344 5.0591 13.1264 4.88152C13.0185 4.70392 13.0592 4.46992 13.2296 4.35097L13.6369 4.06668ZM12.2981 2.63637C12.457 2.43806 12.7476 2.40502 12.9357 2.57589C13.1237 2.74673 13.1182 3.03909 12.9358 3.21591L12.5786 3.56218C12.4294 3.70686 12.1919 3.70215 12.0383 3.56213C11.8847 3.42214 11.8577 3.18617 11.9876 3.02398L12.2981 2.63637ZM10.6103 1.64162C10.7068 1.4066 10.9763 1.29298 11.2048 1.404C11.4332 1.51499 11.5105 1.79695 11.3855 2.01805L11.1409 2.45067C11.0386 2.63174 10.8092 2.69437 10.6221 2.60353C10.435 2.51273 10.3425 2.29386 10.4215 2.10151L10.6103 1.64162Z"
+          fill={color}
+        />
+        <path
+          d="M10.5833 8C10.5832 8.32217 10.3215 8.58345 9.99935 8.58333C9.67737 8.58307 9.41664 8.32199 9.41667 8V7.4082L6.41276 10.4121C6.18495 10.6399 5.81504 10.6406 5.58724 10.4128C5.35943 10.185 5.35943 9.81505 5.58724 9.58724L7.00195 8.17318C7.49071 7.68442 8.05115 7.12332 8.59115 6.58333H8C7.67783 6.58333 7.41667 6.32217 7.41667 6C7.41667 5.67783 7.67783 5.41667 8 5.41667H10C10.3222 5.41667 10.5833 5.67783 10.5833 6V8Z"
+          fill={color}
+        />
+        <path
+          d="M5.41667 8C5.41679 7.67783 5.67848 7.41655 6.00065 7.41667C6.32263 7.41693 6.58336 7.67801 6.58333 8V8.5918L9.58724 5.58789C9.81504 5.36009 10.185 5.35943 10.4128 5.58724C10.6406 5.81505 10.6406 6.18495 10.4128 6.41276L8.99805 7.82682C8.50929 8.31558 7.94884 8.87668 7.40885 9.41667H8C8.32217 9.41667 8.58333 9.67783 8.58333 10C8.58333 10.3222 8.32217 10.5833 8 10.5833H6C5.67783 10.5833 5.41667 10.3222 5.41667 10V8Z"
+          fill={color}
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_3870_37">
+          <rect width="16" height="16" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/state/unstarted-group-icon.tsx b/packages/propel/src/icons/state/unstarted-group-icon.tsx
index fbc2516498..be136dccf6 100644
--- a/packages/propel/src/icons/state/unstarted-group-icon.tsx
+++ b/packages/propel/src/icons/state/unstarted-group-icon.tsx
@@ -5,13 +5,13 @@ import { DashedCircle } from "./dashed-circle";
 import { ProgressCircle } from "./progress-circle";
 
 // StateIcon component implementation
-export const UnstartedGroupIcon: React.FC<ISvgIcons> = ({
+export function UnstartedGroupIcon({
   width = "20",
   height = "20",
   className,
   color = "#F59E0B",
   percentage = 100,
-}) => {
+}: ISvgIcons) {
   // Ensure percentage is between 0 and 100
   const normalized =
     typeof percentage === "number"
@@ -48,4 +48,4 @@ export const UnstartedGroupIcon: React.FC<ISvgIcons> = ({
       />
     </svg>
   );
-};
+}
diff --git a/packages/propel/src/icons/sticky-note-icon.tsx b/packages/propel/src/icons/sticky-note-icon.tsx
index 875e230074..7323fe4c86 100644
--- a/packages/propel/src/icons/sticky-note-icon.tsx
+++ b/packages/propel/src/icons/sticky-note-icon.tsx
@@ -2,35 +2,37 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const StickyNoteIcon: React.FC<ISvgIcons> = ({ width = "17", height = "17", className, color }) => (
-  <svg
-    width={width}
-    height={height}
-    className={className}
-    viewBox="0 0 17 17"
-    fill={"currentColor"}
-    xmlns="http://www.w3.org/2000/svg"
-    style={{ color }}
-  >
-    <path
-      d="M11.9167 16.0833H2.75008C2.30805 16.0833 1.88413 15.9077 1.57157 15.5951C1.25901 15.2826 1.08341 14.8587 1.08341 14.4166V2.74996C1.08341 2.30793 1.25901 1.88401 1.57157 1.57145C1.88413 1.25889 2.30805 1.08329 2.75008 1.08329H14.4167C14.8588 1.08329 15.2827 1.25889 15.5953 1.57145C15.9078 1.88401 16.0834 2.30793 16.0834 2.74996V11.9166L11.9167 16.0833Z"
-      style={{ opacity: 0.5 }}
-      fill="currentColor"
-    />
-    <path
-      d="M11.0834 16.0833V12.75C11.0834 12.3079 11.259 11.884 11.5716 11.5714C11.8841 11.2589 12.3081 11.0833 12.7501 11.0833H16.0834"
-      style={{ opacity: 0.5 }}
-      fill="currentColor"
-    />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M1.27694 15.8898C1.66764 16.2805 2.19755 16.5 2.75008 16.5H11.9167C12.0273 16.5 12.1332 16.4561 12.2114 16.3779L16.378 12.2113C16.4562 12.1331 16.5001 12.0271 16.5001 11.9166V2.74996C16.5001 2.19742 16.2806 1.66752 15.8899 1.27682C15.4992 0.88612 14.9693 0.666626 14.4167 0.666626H2.75008C2.19755 0.666626 1.66764 0.88612 1.27694 1.27682C0.886241 1.66752 0.666748 2.19742 0.666748 2.74996V14.4166C0.666748 14.9692 0.886241 15.4991 1.27694 15.8898ZM15.6667 11.5V11.744L11.7442 15.6666H11.5001V12.75C11.5001 12.4184 11.6318 12.1005 11.8662 11.8661C12.1006 11.6317 12.4186 11.5 12.7501 11.5H15.6667ZM10.6667 15.6666V12.75C10.6667 12.1974 10.8862 11.6675 11.2769 11.2768C11.6676 10.8861 12.1975 10.6666 12.7501 10.6666H15.6667V2.74996C15.6667 2.41844 15.5351 2.1005 15.3006 1.86608C15.0662 1.63166 14.7483 1.49996 14.4167 1.49996H2.75008C2.41856 1.49996 2.10062 1.63166 1.8662 1.86608C1.63178 2.1005 1.50008 2.41844 1.50008 2.74996V14.4166C1.50008 14.7481 1.63178 15.0661 1.8662 15.3005C2.10062 15.5349 2.41856 15.6666 2.75008 15.6666H10.6667Z"
-      fill="currentColor"
-    />
-    <path
-      d="M11.0816 12.7499C11.0491 13.2706 11.0816 16.0833 11.0816 16.0833H11.9149L16.0816 11.9166V11.0833H12.7483C11.5001 11.0833 11.1141 12.2293 11.0816 12.7499Z"
-      fill="currentColor"
-    />
-  </svg>
-);
+export function StickyNoteIcon({ width = "17", height = "17", className, color }: ISvgIcons) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      className={className}
+      viewBox="0 0 17 17"
+      fill={"currentColor"}
+      xmlns="http://www.w3.org/2000/svg"
+      style={{ color }}
+    >
+      <path
+        d="M11.9167 16.0833H2.75008C2.30805 16.0833 1.88413 15.9077 1.57157 15.5951C1.25901 15.2826 1.08341 14.8587 1.08341 14.4166V2.74996C1.08341 2.30793 1.25901 1.88401 1.57157 1.57145C1.88413 1.25889 2.30805 1.08329 2.75008 1.08329H14.4167C14.8588 1.08329 15.2827 1.25889 15.5953 1.57145C15.9078 1.88401 16.0834 2.30793 16.0834 2.74996V11.9166L11.9167 16.0833Z"
+        style={{ opacity: 0.5 }}
+        fill="currentColor"
+      />
+      <path
+        d="M11.0834 16.0833V12.75C11.0834 12.3079 11.259 11.884 11.5716 11.5714C11.8841 11.2589 12.3081 11.0833 12.7501 11.0833H16.0834"
+        style={{ opacity: 0.5 }}
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M1.27694 15.8898C1.66764 16.2805 2.19755 16.5 2.75008 16.5H11.9167C12.0273 16.5 12.1332 16.4561 12.2114 16.3779L16.378 12.2113C16.4562 12.1331 16.5001 12.0271 16.5001 11.9166V2.74996C16.5001 2.19742 16.2806 1.66752 15.8899 1.27682C15.4992 0.88612 14.9693 0.666626 14.4167 0.666626H2.75008C2.19755 0.666626 1.66764 0.88612 1.27694 1.27682C0.886241 1.66752 0.666748 2.19742 0.666748 2.74996V14.4166C0.666748 14.9692 0.886241 15.4991 1.27694 15.8898ZM15.6667 11.5V11.744L11.7442 15.6666H11.5001V12.75C11.5001 12.4184 11.6318 12.1005 11.8662 11.8661C12.1006 11.6317 12.4186 11.5 12.7501 11.5H15.6667ZM10.6667 15.6666V12.75C10.6667 12.1974 10.8862 11.6675 11.2769 11.2768C11.6676 10.8861 12.1975 10.6666 12.7501 10.6666H15.6667V2.74996C15.6667 2.41844 15.5351 2.1005 15.3006 1.86608C15.0662 1.63166 14.7483 1.49996 14.4167 1.49996H2.75008C2.41856 1.49996 2.10062 1.63166 1.8662 1.86608C1.63178 2.1005 1.50008 2.41844 1.50008 2.74996V14.4166C1.50008 14.7481 1.63178 15.0661 1.8662 15.3005C2.10062 15.5349 2.41856 15.6666 2.75008 15.6666H10.6667Z"
+        fill="currentColor"
+      />
+      <path
+        d="M11.0816 12.7499C11.0491 13.2706 11.0816 16.0833 11.0816 16.0833H11.9149L16.0816 11.9166V11.0833H12.7483C11.5001 11.0833 11.1141 12.2293 11.0816 12.7499Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/sub-brand/pi-chat.tsx b/packages/propel/src/icons/sub-brand/pi-chat.tsx
index 1c97f60bde..9e2641d4f4 100644
--- a/packages/propel/src/icons/sub-brand/pi-chat.tsx
+++ b/packages/propel/src/icons/sub-brand/pi-chat.tsx
@@ -3,13 +3,15 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const PiChatLogo: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} viewBox="0 0 24 24" {...rest}>
-    <path d="M5.25 4.5C5.25 3.67157 5.92157 3 6.75 3H11.25V21H5.25V4.5Z" fill={color} />
-    <path d="M12 3H16.5C17.3284 3 18 3.67157 18 4.5V13.5H12V3Z" fill={color} />
-    <path
-      d="M14.6782 18.8062C14.648 18.6894 14.5871 18.5828 14.5019 18.4975C14.4166 18.4123 14.31 18.3514 14.1932 18.3212L12.1227 17.7873C12.0873 17.7773 12.0563 17.756 12.0341 17.7267C12.012 17.6974 12 17.6617 12 17.625C12 17.5883 12.012 17.5526 12.0341 17.5233C12.0563 17.494 12.0873 17.4727 12.1227 17.4627L14.1932 16.9284C14.3099 16.8983 14.4165 16.8375 14.5018 16.7523C14.5871 16.667 14.648 16.5605 14.6782 16.4438L15.2121 14.3733C15.222 14.3378 15.2432 14.3066 15.2726 14.2843C15.3019 14.262 15.3377 14.25 15.3746 14.25C15.4114 14.25 15.4472 14.262 15.4765 14.2843C15.5059 14.3066 15.5271 14.3378 15.5371 14.3733L16.0706 16.4438C16.1008 16.5606 16.1616 16.6672 16.2469 16.7525C16.3322 16.8377 16.4388 16.8986 16.5556 16.9288L18.6261 17.4623C18.6617 17.4721 18.6931 17.4934 18.7155 17.5228C18.7379 17.5522 18.75 17.5881 18.75 17.625C18.75 17.6619 18.7379 17.6978 18.7155 17.7272C18.6931 17.7566 18.6617 17.7778 18.6261 17.7877L16.5556 18.3212C16.4388 18.3514 16.3322 18.4123 16.2469 18.4975C16.1616 18.5828 16.1008 18.6894 16.0706 18.8062L15.5367 20.8767C15.5268 20.9122 15.5056 20.9434 15.4762 20.9657C15.4469 20.988 15.4111 21 15.3742 21C15.3374 21 15.3016 20.988 15.2722 20.9657C15.2429 20.9434 15.2217 20.9122 15.2117 20.8767L14.6782 18.8062Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function PiChatLogo({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} viewBox="0 0 24 24" {...rest}>
+      <path d="M5.25 4.5C5.25 3.67157 5.92157 3 6.75 3H11.25V21H5.25V4.5Z" fill={color} />
+      <path d="M12 3H16.5C17.3284 3 18 3.67157 18 4.5V13.5H12V3Z" fill={color} />
+      <path
+        d="M14.6782 18.8062C14.648 18.6894 14.5871 18.5828 14.5019 18.4975C14.4166 18.4123 14.31 18.3514 14.1932 18.3212L12.1227 17.7873C12.0873 17.7773 12.0563 17.756 12.0341 17.7267C12.012 17.6974 12 17.6617 12 17.625C12 17.5883 12.012 17.5526 12.0341 17.5233C12.0563 17.494 12.0873 17.4727 12.1227 17.4627L14.1932 16.9284C14.3099 16.8983 14.4165 16.8375 14.5018 16.7523C14.5871 16.667 14.648 16.5605 14.6782 16.4438L15.2121 14.3733C15.222 14.3378 15.2432 14.3066 15.2726 14.2843C15.3019 14.262 15.3377 14.25 15.3746 14.25C15.4114 14.25 15.4472 14.262 15.4765 14.2843C15.5059 14.3066 15.5271 14.3378 15.5371 14.3733L16.0706 16.4438C16.1008 16.5606 16.1616 16.6672 16.2469 16.7525C16.3322 16.8377 16.4388 16.8986 16.5556 16.9288L18.6261 17.4623C18.6617 17.4721 18.6931 17.4934 18.7155 17.5228C18.7379 17.5522 18.75 17.5881 18.75 17.625C18.75 17.6619 18.7379 17.6978 18.7155 17.7272C18.6931 17.7566 18.6617 17.7778 18.6261 17.7877L16.5556 18.3212C16.4388 18.3514 16.3322 18.4123 16.2469 18.4975C16.1616 18.5828 16.1008 18.6894 16.0706 18.8062L15.5367 20.8767C15.5268 20.9122 15.5056 20.9434 15.4762 20.9657C15.4469 20.988 15.4111 21 15.3742 21C15.3374 21 15.3016 20.988 15.2722 20.9657C15.2429 20.9434 15.2217 20.9122 15.2117 20.8767L14.6782 18.8062Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/sub-brand/plane-icon.tsx b/packages/propel/src/icons/sub-brand/plane-icon.tsx
index 949fbfa6f3..978cc1e726 100644
--- a/packages/propel/src/icons/sub-brand/plane-icon.tsx
+++ b/packages/propel/src/icons/sub-brand/plane-icon.tsx
@@ -3,19 +3,17 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const PlaneNewIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
-  const clipPathId = React.useId();
-
+export function PlaneNewIcon({ color = "currentColor", ...rest }: ISvgIcons) {
   return (
-    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+    <IconWrapper color={color} {...rest}>
       <path
-        d="M5.15383 9.50566V5.15381H1.34152C0.601228 5.15381 0 5.75399 0 6.49533V14.6595C0 15.3998 0.600183 16.001 1.34152 16.001H9.50568C10.246 16.001 10.8472 15.4008 10.8472 14.6595V10.8461H6.49536C5.75506 10.8461 5.15383 10.246 5.15383 9.50461V9.50566Z"
+        d="M10.3617 10.3629V12.8365C10.3617 13.8272 9.55787 14.6303 8.56797 14.6303H3.17365C2.18298 14.6303 1.37988 13.8272 1.37988 12.8365V7.44221C1.37988 6.45077 2.18298 5.64844 3.17365 5.64844H5.64726V8.56915C5.64726 9.55982 6.45036 10.3629 7.44103 10.3629H10.3617Z"
         fill={color}
       />
       <path
-        d="M14.66 0H6.49582C5.75553 0 5.1543 0.600183 5.1543 1.34152V5.15488H9.50615C10.2464 5.15488 10.8477 5.75506 10.8477 6.49641V10.8483H14.661C15.4013 10.8483 16.0026 10.2481 16.0026 9.50673V1.34152C16.0026 0.601229 15.4024 0 14.661 0H14.66Z"
+        d="M14.6291 3.17365V8.56797C14.6291 9.55864 13.826 10.3617 12.8353 10.3617H10.3625V7.44103C10.3625 6.44959 9.55864 5.64726 8.56874 5.64726H5.64803V3.17365C5.64803 2.18298 6.45113 1.37988 7.44179 1.37988H12.8361C13.8275 1.37988 14.6291 2.18375 14.6291 3.17365Z"
         fill={color}
       />
     </IconWrapper>
   );
-};
+}
diff --git a/packages/propel/src/icons/sub-brand/wiki-icon.tsx b/packages/propel/src/icons/sub-brand/wiki-icon.tsx
index a3c9fe4d6f..d062f448bc 100644
--- a/packages/propel/src/icons/sub-brand/wiki-icon.tsx
+++ b/packages/propel/src/icons/sub-brand/wiki-icon.tsx
@@ -3,15 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const WikiIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => {
-  const clipPathId = React.useId();
-
+export function WikiIcon({ color = "currentColor", ...rest }: ISvgIcons) {
   return (
-    <IconWrapper color={color} clipPathId={clipPathId} {...rest}>
+    <IconWrapper color={color} {...rest}>
       <path
-        d="M15.558 6.93332L9.06623 0.441504C8.47755 -0.147168 7.5229 -0.147168 6.93332 0.441504L0.441504 6.93332C-0.147168 7.52199 -0.147168 8.47664 0.441504 9.06623L6.93332 15.558C7.52199 16.1467 8.47664 16.1467 9.06623 15.558L15.558 9.06623C16.1467 8.47755 16.1467 7.5229 15.558 6.93332ZM10.7629 9.65855C10.7629 10.2682 10.2691 10.762 9.65946 10.762H6.341C5.73133 10.762 5.23758 10.2682 5.23758 9.65855V6.34008C5.23758 5.73042 5.73133 5.23667 6.341 5.23667H9.65946C10.2691 5.23667 10.7629 5.73042 10.7629 6.34008V9.65855Z"
+        d="M14.1062 6.74052L9.26925 1.90354C8.57104 1.20533 7.43873 1.20533 6.74052 1.90354L1.90354 6.74052C1.20533 7.43873 1.20533 8.57103 1.90354 9.26925L6.74052 14.1062C7.43873 14.8044 8.57104 14.8044 9.26925 14.1062L14.1062 9.26925C14.8044 8.57103 14.8044 7.43873 14.1062 6.74052ZM10.3648 9.74697C10.3648 10.0877 10.0884 10.364 9.74697 10.364H6.26279C5.92211 10.364 5.64496 10.0877 5.64496 9.74697V6.26203C5.64496 5.92134 5.92134 5.6442 6.26279 5.6442H9.74697C10.0884 5.6442 10.3648 5.92057 10.3648 6.26203V9.74697Z"
         fill={color}
       />
     </IconWrapper>
   );
-};
+}
diff --git a/packages/propel/src/icons/suspended-user.tsx b/packages/propel/src/icons/suspended-user.tsx
index ad1b793cb7..eaf09af31b 100644
--- a/packages/propel/src/icons/suspended-user.tsx
+++ b/packages/propel/src/icons/suspended-user.tsx
@@ -2,31 +2,33 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const SuspendedUserIcon: React.FC<ISvgIcons> = ({ className, ...rest }) => (
-  <svg viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...rest}>
-    <g clipPath="url(#clip0_806_120890)">
-      <path
-        d="M3 13C3 12.304 3.18158 11.6201 3.52681 11.0158C3.87204 10.4115 4.36897 9.90774 4.9685 9.55428C5.56802 9.20082 6.24939 9.00989 6.94529 9.00037C7.64119 8.99086 8.32753 9.16307 8.9365 9.5"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M7 9C8.38071 9 9.5 7.88071 9.5 6.5C9.5 5.11929 8.38071 4 7 4C5.61929 4 4.5 5.11929 4.5 6.5C4.5 7.88071 5.61929 9 7 9Z"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path d="M10.5 11L13 13.5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
-      <path d="M13 11L10.5 13.5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
-    </g>
-    <defs>
-      <clipPath id="clip0_806_120890">
+export function SuspendedUserIcon({ className, ...rest }: ISvgIcons) {
+  return (
+    <svg viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" className={className} {...rest}>
+      <g clipPath="url(#clip0_806_120890)">
         <path
-          d="M2 4.5C2 3.39543 2.89543 2.5 4 2.5H12C13.1046 2.5 14 3.39543 14 4.5V12.5C14 13.6046 13.1046 14.5 12 14.5H4C2.89543 14.5 2 13.6046 2 12.5V4.5Z"
-          fill="white"
+          d="M3 13C3 12.304 3.18158 11.6201 3.52681 11.0158C3.87204 10.4115 4.36897 9.90774 4.9685 9.55428C5.56802 9.20082 6.24939 9.00989 6.94529 9.00037C7.64119 8.99086 8.32753 9.16307 8.9365 9.5"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
         />
-      </clipPath>
-    </defs>
-  </svg>
-);
+        <path
+          d="M7 9C8.38071 9 9.5 7.88071 9.5 6.5C9.5 5.11929 8.38071 4 7 4C5.61929 4 4.5 5.11929 4.5 6.5C4.5 7.88071 5.61929 9 7 9Z"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path d="M10.5 11L13 13.5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+        <path d="M13 11L10.5 13.5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
+      </g>
+      <defs>
+        <clipPath id="clip0_806_120890">
+          <path
+            d="M2 4.5C2 3.39543 2.89543 2.5 4 2.5H12C13.1046 2.5 14 3.39543 14 4.5V12.5C14 13.6046 13.1046 14.5 12 14.5H4C2.89543 14.5 2 13.6046 2 12.5V4.5Z"
+            fill="white"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/teams.tsx b/packages/propel/src/icons/teams.tsx
index 56bc60dba2..9475bd59bd 100644
--- a/packages/propel/src/icons/teams.tsx
+++ b/packages/propel/src/icons/teams.tsx
@@ -2,18 +2,20 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const TeamsIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M8.25 6.75C8.25 5.75544 8.64509 4.80161 9.34835 4.09835C10.0516 3.39509 11.0054 3 12 3C12.9946 3 13.9484 3.39509 14.6517 4.09835C15.3549 4.80161 15.75 5.75544 15.75 6.75C15.75 7.74456 15.3549 8.69839 14.6517 9.40165C13.9484 10.1049 12.9946 10.5 12 10.5C11.0054 10.5 10.0516 10.1049 9.34835 9.40165C8.64509 8.69839 8.25 7.74456 8.25 6.75ZM15.75 9.75C15.75 8.95435 16.0661 8.19129 16.6287 7.62868C17.1913 7.06607 17.9544 6.75 18.75 6.75C19.5456 6.75 20.3087 7.06607 20.8713 7.62868C21.4339 8.19129 21.75 8.95435 21.75 9.75C21.75 10.5456 21.4339 11.3087 20.8713 11.8713C20.3087 12.4339 19.5456 12.75 18.75 12.75C17.9544 12.75 17.1913 12.4339 16.6287 11.8713C16.0661 11.3087 15.75 10.5456 15.75 9.75ZM2.25 9.75C2.25 8.95435 2.56607 8.19129 3.12868 7.62868C3.69129 7.06607 4.45435 6.75 5.25 6.75C6.04565 6.75 6.80871 7.06607 7.37132 7.62868C7.93393 8.19129 8.25 8.95435 8.25 9.75C8.25 10.5456 7.93393 11.3087 7.37132 11.8713C6.80871 12.4339 6.04565 12.75 5.25 12.75C4.45435 12.75 3.69129 12.4339 3.12868 11.8713C2.56607 11.3087 2.25 10.5456 2.25 9.75ZM6.31 15.117C6.91995 14.161 7.76108 13.3743 8.75562 12.8294C9.75016 12.2846 10.866 11.9994 12 12C12.9498 11.9991 13.8891 12.1989 14.7564 12.5862C15.6237 12.9734 16.3994 13.5395 17.0327 14.2474C17.6661 14.9552 18.1428 15.7888 18.4317 16.6936C18.7205 17.5985 18.815 18.5541 18.709 19.498C18.696 19.6153 18.6556 19.7278 18.591 19.8265C18.5263 19.9252 18.4393 20.0073 18.337 20.066C16.4086 21.1725 14.2233 21.7532 12 21.75C9.695 21.75 7.53 21.138 5.663 20.066C5.56069 20.0073 5.47368 19.9252 5.40904 19.8265C5.34441 19.7278 5.30396 19.6153 5.291 19.498C5.12305 17.9646 5.48246 16.4198 6.31 15.118V15.117Z"
-      fill="currentColor"
-      {...rest}
-    />
-    <path
-      d="M5.08208 14.2539C4.09584 15.7763 3.63633 17.5802 3.77408 19.3889C3.17359 19.2979 2.58299 19.1505 2.01008 18.9489L1.89508 18.9089C1.79248 18.8725 1.70263 18.8071 1.63643 18.7207C1.57023 18.6342 1.53051 18.5305 1.52208 18.4219L1.51208 18.3009C1.47169 17.7989 1.53284 17.2938 1.69188 16.816C1.85093 16.3381 2.10462 15.8971 2.4378 15.5194C2.77099 15.1417 3.17685 14.835 3.63116 14.6176C4.08547 14.4001 4.57893 14.2765 5.08208 14.2539ZM20.2261 19.3889C20.3638 17.5802 19.9043 15.7763 18.9181 14.2539C19.4212 14.2765 19.9147 14.4001 20.369 14.6176C20.8233 14.835 21.2292 15.1417 21.5624 15.5194C21.8955 15.8971 22.1492 16.3381 22.3083 16.816C22.4673 17.2938 22.5285 17.7989 22.4881 18.3009L22.4781 18.4219C22.4695 18.5303 22.4297 18.6338 22.3635 18.7201C22.2973 18.8063 22.2075 18.8716 22.1051 18.9079L21.9901 18.9479C21.4231 19.1479 20.8341 19.2969 20.2261 19.3889Z"
-      fill="currentColor"
-    />
-  </svg>
-);
+export function TeamsIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.25 6.75C8.25 5.75544 8.64509 4.80161 9.34835 4.09835C10.0516 3.39509 11.0054 3 12 3C12.9946 3 13.9484 3.39509 14.6517 4.09835C15.3549 4.80161 15.75 5.75544 15.75 6.75C15.75 7.74456 15.3549 8.69839 14.6517 9.40165C13.9484 10.1049 12.9946 10.5 12 10.5C11.0054 10.5 10.0516 10.1049 9.34835 9.40165C8.64509 8.69839 8.25 7.74456 8.25 6.75ZM15.75 9.75C15.75 8.95435 16.0661 8.19129 16.6287 7.62868C17.1913 7.06607 17.9544 6.75 18.75 6.75C19.5456 6.75 20.3087 7.06607 20.8713 7.62868C21.4339 8.19129 21.75 8.95435 21.75 9.75C21.75 10.5456 21.4339 11.3087 20.8713 11.8713C20.3087 12.4339 19.5456 12.75 18.75 12.75C17.9544 12.75 17.1913 12.4339 16.6287 11.8713C16.0661 11.3087 15.75 10.5456 15.75 9.75ZM2.25 9.75C2.25 8.95435 2.56607 8.19129 3.12868 7.62868C3.69129 7.06607 4.45435 6.75 5.25 6.75C6.04565 6.75 6.80871 7.06607 7.37132 7.62868C7.93393 8.19129 8.25 8.95435 8.25 9.75C8.25 10.5456 7.93393 11.3087 7.37132 11.8713C6.80871 12.4339 6.04565 12.75 5.25 12.75C4.45435 12.75 3.69129 12.4339 3.12868 11.8713C2.56607 11.3087 2.25 10.5456 2.25 9.75ZM6.31 15.117C6.91995 14.161 7.76108 13.3743 8.75562 12.8294C9.75016 12.2846 10.866 11.9994 12 12C12.9498 11.9991 13.8891 12.1989 14.7564 12.5862C15.6237 12.9734 16.3994 13.5395 17.0327 14.2474C17.6661 14.9552 18.1428 15.7888 18.4317 16.6936C18.7205 17.5985 18.815 18.5541 18.709 19.498C18.696 19.6153 18.6556 19.7278 18.591 19.8265C18.5263 19.9252 18.4393 20.0073 18.337 20.066C16.4086 21.1725 14.2233 21.7532 12 21.75C9.695 21.75 7.53 21.138 5.663 20.066C5.56069 20.0073 5.47368 19.9252 5.40904 19.8265C5.34441 19.7278 5.30396 19.6153 5.291 19.498C5.12305 17.9646 5.48246 16.4198 6.31 15.118V15.117Z"
+        fill="currentColor"
+        {...rest}
+      />
+      <path
+        d="M5.08208 14.2539C4.09584 15.7763 3.63633 17.5802 3.77408 19.3889C3.17359 19.2979 2.58299 19.1505 2.01008 18.9489L1.89508 18.9089C1.79248 18.8725 1.70263 18.8071 1.63643 18.7207C1.57023 18.6342 1.53051 18.5305 1.52208 18.4219L1.51208 18.3009C1.47169 17.7989 1.53284 17.2938 1.69188 16.816C1.85093 16.3381 2.10462 15.8971 2.4378 15.5194C2.77099 15.1417 3.17685 14.835 3.63116 14.6176C4.08547 14.4001 4.57893 14.2765 5.08208 14.2539ZM20.2261 19.3889C20.3638 17.5802 19.9043 15.7763 18.9181 14.2539C19.4212 14.2765 19.9147 14.4001 20.369 14.6176C20.8233 14.835 21.2292 15.1417 21.5624 15.5194C21.8955 15.8971 22.1492 16.3381 22.3083 16.816C22.4673 17.2938 22.5285 17.7989 22.4881 18.3009L22.4781 18.4219C22.4695 18.5303 22.4297 18.6338 22.3635 18.7201C22.2973 18.8063 22.2075 18.8716 22.1051 18.9079L21.9901 18.9479C21.4231 19.1479 20.8341 19.2969 20.2261 19.3889Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/transfer-icon.tsx b/packages/propel/src/icons/transfer-icon.tsx
index ebda6edccc..1a6f06a75b 100644
--- a/packages/propel/src/icons/transfer-icon.tsx
+++ b/packages/propel/src/icons/transfer-icon.tsx
@@ -2,8 +2,16 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const TransferIcon: React.FC<ISvgIcons> = ({ className = "fill-current", ...rest }) => (
-  <svg viewBox="0 0 24 20" className={`${className} `} fill="none" 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>
-);
+export function TransferIcon({ className = "fill-current", ...rest }: ISvgIcons) {
+  return (
+    <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 c37d10a3f9..5356d958b9 100644
--- a/packages/propel/src/icons/tree-map-icon.tsx
+++ b/packages/propel/src/icons/tree-map-icon.tsx
@@ -2,15 +2,17 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const TreeMapIcon: React.FC<ISvgIcons> = ({ className = "", ...rest }) => (
-  <svg className={className} viewBox="0 0 27 22" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...rest}>
-    <rect width="10" height="10" rx="1" fill="currentColor" />
-    <rect x="11.5" width="10" height="6" rx="1" fill="currentColor" />
-    <rect y="12" width="10" height="10" rx="1" fill="currentColor" />
-    <rect x="11.5" y="16" width="10" height="6" rx="1" fill="currentColor" />
-    <rect x="11.5" y="8" width="10" height="6" rx="1" fill="currentColor" />
-    <rect x="23" width="4" height="11" rx="1" fill="currentColor" />
-    <rect x="23" y="13" width="4" height="4" rx="1" fill="currentColor" />
-    <rect x="23" y="19" width="4" height="3" rx="1" fill="currentColor" />
-  </svg>
-);
+export function TreeMapIcon({ className = "", ...rest }: ISvgIcons) {
+  return (
+    <svg className={className} viewBox="0 0 27 22" fill="currentColor" xmlns="http://www.w3.org/2000/svg" {...rest}>
+      <rect width="10" height="10" rx="1" fill="currentColor" />
+      <rect x="11.5" width="10" height="6" rx="1" fill="currentColor" />
+      <rect y="12" width="10" height="10" rx="1" fill="currentColor" />
+      <rect x="11.5" y="16" width="10" height="6" rx="1" fill="currentColor" />
+      <rect x="11.5" y="8" width="10" height="6" rx="1" fill="currentColor" />
+      <rect x="23" width="4" height="11" rx="1" fill="currentColor" />
+      <rect x="23" y="13" width="4" height="4" rx="1" fill="currentColor" />
+      <rect x="23" y="19" width="4" height="3" rx="1" fill="currentColor" />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/updates-icon.tsx b/packages/propel/src/icons/updates-icon.tsx
index 5af0ffc6fd..9e41292e21 100644
--- a/packages/propel/src/icons/updates-icon.tsx
+++ b/packages/propel/src/icons/updates-icon.tsx
@@ -1,18 +1,25 @@
-import * as React from "react";
-
 import type { ISvgIcons } from "./type";
 
-export const UpdatesIcon: React.FC<ISvgIcons> = ({ className = "text-current" }) => (
-  <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
-    <path
-      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"
-    />
-    <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"
-    />
-  </svg>
-);
+export function UpdatesIcon({ className = "text-current" }: ISvgIcons) {
+  return (
+    <svg
+      width="17"
+      height="16"
+      viewBox="0 0 17 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        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="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="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/user-activity-icon.tsx b/packages/propel/src/icons/user-activity-icon.tsx
index 01bf740dfc..367920155c 100644
--- a/packages/propel/src/icons/user-activity-icon.tsx
+++ b/packages/propel/src/icons/user-activity-icon.tsx
@@ -2,20 +2,22 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const UserActivityIcon: React.FC<ISvgIcons> = ({ className = "text-current", ...rest }) => (
-  <svg
-    viewBox="0 0 24 24"
-    className={`${className} stroke-2`}
-    stroke="currentColor"
-    fill="none"
-    strokeWidth="1.5"
-    xmlns="http://www.w3.org/2000/svg"
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    {...rest}
-  >
-    <path d="M10.5 13C12.9853 13 15 10.9853 15 8.5C15 6.01472 12.9853 4 10.5 4C8.01472 4 6 6.01472 6 8.5C6 10.9853 8.01472 13 10.5 13Z" />
-    <path d="M13.9062 13.5903C12.8368 13.1001 11.661 12.8876 10.4877 12.9725C9.31437 13.0574 8.18144 13.437 7.19379 14.0761C6.20613 14.7152 5.39567 15.5931 4.83744 16.6286C4.2792 17.6641 3.99124 18.8237 4.0002 20" />
-    <path d="M21 16.5H19.6L18.2 20L16.8 13L15.4 16.5H14" />
-  </svg>
-);
+export function UserActivityIcon({ className = "text-current", ...rest }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      className={`${className} stroke-2`}
+      stroke="currentColor"
+      fill="none"
+      strokeWidth="1.5"
+      xmlns="http://www.w3.org/2000/svg"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...rest}
+    >
+      <path d="M10.5 13C12.9853 13 15 10.9853 15 8.5C15 6.01472 12.9853 4 10.5 4C8.01472 4 6 6.01472 6 8.5C6 10.9853 8.01472 13 10.5 13Z" />
+      <path d="M13.9062 13.5903C12.8368 13.1001 11.661 12.8876 10.4877 12.9725C9.31437 13.0574 8.18144 13.437 7.19379 14.0761C6.20613 14.7152 5.39567 15.5931 4.83744 16.6286C4.2792 17.6641 3.99124 18.8237 4.0002 20" />
+      <path d="M21 16.5H19.6L18.2 20L16.8 13L15.4 16.5H14" />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/workspace-icon.tsx b/packages/propel/src/icons/workspace-icon.tsx
index c097b9ad82..770133ddc5 100644
--- a/packages/propel/src/icons/workspace-icon.tsx
+++ b/packages/propel/src/icons/workspace-icon.tsx
@@ -2,20 +2,22 @@ import * as React from "react";
 
 import type { ISvgIcons } from "./type";
 
-export const WorkspaceIcon: React.FC<ISvgIcons> = ({ className }) => (
-  <svg
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-    role="img"
-    aria-label="Workspace icon"
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M2.25 3C2.25 2.58579 2.58579 2.25 3 2.25H15C15.4142 2.25 15.75 2.58579 15.75 3C15.75 3.41421 15.4142 3.75 15 3.75V6.75H21C21.4142 6.75 21.75 7.08579 21.75 7.5C21.75 7.91421 21.4142 8.25 21 8.25V20.25H21.75C22.1642 20.25 22.5 20.5858 22.5 21C22.5 21.4142 22.1642 21.75 21.75 21.75H2.25C1.83579 21.75 1.5 21.4142 1.5 21C1.5 20.5858 1.83579 20.25 2.25 20.25H3V3.75C2.58579 3.75 2.25 3.41421 2.25 3ZM4.5 3.75V20.25H6V17.625C6 16.5898 6.83979 15.75 7.875 15.75H10.125C11.1602 15.75 12 16.5898 12 17.625V20.25H13.5V3.75H4.5ZM15 8.25V20.25H19.5V8.25H15ZM10.5 20.25V17.625C10.5 17.4182 10.3318 17.25 10.125 17.25H7.875C7.66821 17.25 7.5 17.4182 7.5 17.625V20.25H10.5ZM6 6.75C6 6.33579 6.33579 6 6.75 6H7.5C7.91421 6 8.25 6.33579 8.25 6.75C8.25 7.16421 7.91421 7.5 7.5 7.5H6.75C6.33579 7.5 6 7.16421 6 6.75ZM9.75 6.75C9.75 6.33579 10.0858 6 10.5 6H11.25C11.6642 6 12 6.33579 12 6.75C12 7.16421 11.6642 7.5 11.25 7.5H10.5C10.0858 7.5 9.75 7.16421 9.75 6.75ZM6 9.75C6 9.33579 6.33579 9 6.75 9H7.5C7.91421 9 8.25 9.33579 8.25 9.75C8.25 10.1642 7.91421 10.5 7.5 10.5H6.75C6.33579 10.5 6 10.1642 6 9.75ZM9.75 9.75C9.75 9.33579 10.0858 9 10.5 9H11.25C11.6642 9 12 9.33579 12 9.75C12 10.1642 11.6642 10.5 11.25 10.5H10.5C10.0858 10.5 9.75 10.1642 9.75 9.75ZM16.5 11.25C16.5 10.8358 16.8358 10.5 17.25 10.5H17.258C17.6722 10.5 18.008 10.8358 18.008 11.25V11.258C18.008 11.6722 17.6722 12.008 17.258 12.008H17.25C16.8358 12.008 16.5 11.6722 16.5 11.258V11.25ZM6 12.75C6 12.3358 6.33579 12 6.75 12H7.5C7.91421 12 8.25 12.3358 8.25 12.75C8.25 13.1642 7.91421 13.5 7.5 13.5H6.75C6.33579 13.5 6 13.1642 6 12.75ZM9.75 12.75C9.75 12.3358 10.0858 12 10.5 12H11.25C11.6642 12 12 12.3358 12 12.75C12 13.1642 11.6642 13.5 11.25 13.5H10.5C10.0858 13.5 9.75 13.1642 9.75 12.75ZM16.5 14.25C16.5 13.8358 16.8358 13.5 17.25 13.5H17.258C17.6722 13.5 18.008 13.8358 18.008 14.25V14.258C18.008 14.6722 17.6722 15.008 17.258 15.008H17.25C16.8358 15.008 16.5 14.6722 16.5 14.258V14.25ZM16.5 17.25C16.5 16.8358 16.8358 16.5 17.25 16.5H17.258C17.6722 16.5 18.008 16.8358 18.008 17.25V17.258C18.008 17.6722 17.6722 18.008 17.258 18.008H17.25C16.8358 18.008 16.5 17.6722 16.5 17.258V17.25Z"
-      fill="currentColor"
-    />
-  </svg>
-);
+export function WorkspaceIcon({ className }: ISvgIcons) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      role="img"
+      aria-label="Workspace icon"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2.25 3C2.25 2.58579 2.58579 2.25 3 2.25H15C15.4142 2.25 15.75 2.58579 15.75 3C15.75 3.41421 15.4142 3.75 15 3.75V6.75H21C21.4142 6.75 21.75 7.08579 21.75 7.5C21.75 7.91421 21.4142 8.25 21 8.25V20.25H21.75C22.1642 20.25 22.5 20.5858 22.5 21C22.5 21.4142 22.1642 21.75 21.75 21.75H2.25C1.83579 21.75 1.5 21.4142 1.5 21C1.5 20.5858 1.83579 20.25 2.25 20.25H3V3.75C2.58579 3.75 2.25 3.41421 2.25 3ZM4.5 3.75V20.25H6V17.625C6 16.5898 6.83979 15.75 7.875 15.75H10.125C11.1602 15.75 12 16.5898 12 17.625V20.25H13.5V3.75H4.5ZM15 8.25V20.25H19.5V8.25H15ZM10.5 20.25V17.625C10.5 17.4182 10.3318 17.25 10.125 17.25H7.875C7.66821 17.25 7.5 17.4182 7.5 17.625V20.25H10.5ZM6 6.75C6 6.33579 6.33579 6 6.75 6H7.5C7.91421 6 8.25 6.33579 8.25 6.75C8.25 7.16421 7.91421 7.5 7.5 7.5H6.75C6.33579 7.5 6 7.16421 6 6.75ZM9.75 6.75C9.75 6.33579 10.0858 6 10.5 6H11.25C11.6642 6 12 6.33579 12 6.75C12 7.16421 11.6642 7.5 11.25 7.5H10.5C10.0858 7.5 9.75 7.16421 9.75 6.75ZM6 9.75C6 9.33579 6.33579 9 6.75 9H7.5C7.91421 9 8.25 9.33579 8.25 9.75C8.25 10.1642 7.91421 10.5 7.5 10.5H6.75C6.33579 10.5 6 10.1642 6 9.75ZM9.75 9.75C9.75 9.33579 10.0858 9 10.5 9H11.25C11.6642 9 12 9.33579 12 9.75C12 10.1642 11.6642 10.5 11.25 10.5H10.5C10.0858 10.5 9.75 10.1642 9.75 9.75ZM16.5 11.25C16.5 10.8358 16.8358 10.5 17.25 10.5H17.258C17.6722 10.5 18.008 10.8358 18.008 11.25V11.258C18.008 11.6722 17.6722 12.008 17.258 12.008H17.25C16.8358 12.008 16.5 11.6722 16.5 11.258V11.25ZM6 12.75C6 12.3358 6.33579 12 6.75 12H7.5C7.91421 12 8.25 12.3358 8.25 12.75C8.25 13.1642 7.91421 13.5 7.5 13.5H6.75C6.33579 13.5 6 13.1642 6 12.75ZM9.75 12.75C9.75 12.3358 10.0858 12 10.5 12H11.25C11.6642 12 12 12.3358 12 12.75C12 13.1642 11.6642 13.5 11.25 13.5H10.5C10.0858 13.5 9.75 13.1642 9.75 12.75ZM16.5 14.25C16.5 13.8358 16.8358 13.5 17.25 13.5H17.258C17.6722 13.5 18.008 13.8358 18.008 14.25V14.258C18.008 14.6722 17.6722 15.008 17.258 15.008H17.25C16.8358 15.008 16.5 14.6722 16.5 14.258V14.25ZM16.5 17.25C16.5 16.8358 16.8358 16.5 17.25 16.5H17.258C17.6722 16.5 18.008 16.8358 18.008 17.25V17.258C18.008 17.6722 17.6722 18.008 17.258 18.008H17.25C16.8358 18.008 16.5 17.6722 16.5 17.258V17.25Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/packages/propel/src/icons/workspace/analytics-icon.tsx b/packages/propel/src/icons/workspace/analytics-icon.tsx
index 5259dd22a6..cc8bd16d61 100644
--- a/packages/propel/src/icons/workspace/analytics-icon.tsx
+++ b/packages/propel/src/icons/workspace/analytics-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const AnalyticsIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64296 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90624 12.624 2.77441C12.5129 2.71788 12.357 2.67446 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67446 12.357 2.71788 12.5129 2.77441 12.624C2.90624 12.8827 3.11725 13.0938 3.37598 13.2256C3.48707 13.2821 3.64296 13.3255 3.9375 13.3496C4.23962 13.3743 4.62994 13.375 5.2002 13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V5.2002ZM4.70801 11.333V8.66699C4.70801 8.32192 4.98798 8.04217 5.33301 8.04199C5.67819 8.04199 5.95801 8.32181 5.95801 8.66699V11.333C5.95801 11.6782 5.67819 11.958 5.33301 11.958C4.98798 11.9578 4.70801 11.6781 4.70801 11.333ZM7.375 11.333V4.66699C7.375 4.32181 7.65482 4.04199 8 4.04199C8.34518 4.04199 8.625 4.32181 8.625 4.66699V11.333C8.625 11.6782 8.34518 11.958 8 11.958C7.65482 11.958 7.375 11.6782 7.375 11.333ZM10.042 11.333V7.33301C10.0422 6.98798 10.3219 6.70801 10.667 6.70801C11.0119 6.70818 11.2918 6.98809 11.292 7.33301V11.333C11.292 11.6781 11.012 11.9578 10.667 11.958C10.3218 11.958 10.042 11.6782 10.042 11.333ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6853 13.6853 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H5.2002C4.65067 14.625 4.20072 14.6255 3.83594 14.5957C3.46388 14.5653 3.12523 14.5001 2.80859 14.3389C2.31467 14.0872 1.9128 13.6853 1.66113 13.1914C1.49985 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31467 2.31467 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49986 13.1914 1.66113C13.6853 1.9128 14.0872 2.31467 14.3389 2.80859C14.5001 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V10.7998Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function AnalyticsIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.375 5.2002C13.375 4.62994 13.3743 4.23962 13.3496 3.9375C13.3255 3.64296 13.2821 3.48707 13.2256 3.37598C13.0938 3.11725 12.8827 2.90624 12.624 2.77441C12.5129 2.71788 12.357 2.67446 12.0625 2.65039C11.7604 2.62572 11.3701 2.625 10.7998 2.625H5.2002C4.62994 2.625 4.23962 2.62572 3.9375 2.65039C3.64296 2.67446 3.48707 2.71788 3.37598 2.77441C3.11725 2.90624 2.90624 3.11725 2.77441 3.37598C2.71788 3.48707 2.67446 3.64296 2.65039 3.9375C2.62572 4.23962 2.625 4.62994 2.625 5.2002V10.7998C2.625 11.3701 2.62572 11.7604 2.65039 12.0625C2.67446 12.357 2.71788 12.5129 2.77441 12.624C2.90624 12.8827 3.11725 13.0938 3.37598 13.2256C3.48707 13.2821 3.64296 13.3255 3.9375 13.3496C4.23962 13.3743 4.62994 13.375 5.2002 13.375H10.7998C11.3701 13.375 11.7604 13.3743 12.0625 13.3496C12.357 13.3255 12.5129 13.2821 12.624 13.2256C12.8827 13.0938 13.0938 12.8827 13.2256 12.624C13.2821 12.5129 13.3255 12.357 13.3496 12.0625C13.3743 11.7604 13.375 11.3701 13.375 10.7998V5.2002ZM4.70801 11.333V8.66699C4.70801 8.32192 4.98798 8.04217 5.33301 8.04199C5.67819 8.04199 5.95801 8.32181 5.95801 8.66699V11.333C5.95801 11.6782 5.67819 11.958 5.33301 11.958C4.98798 11.9578 4.70801 11.6781 4.70801 11.333ZM7.375 11.333V4.66699C7.375 4.32181 7.65482 4.04199 8 4.04199C8.34518 4.04199 8.625 4.32181 8.625 4.66699V11.333C8.625 11.6782 8.34518 11.958 8 11.958C7.65482 11.958 7.375 11.6782 7.375 11.333ZM10.042 11.333V7.33301C10.0422 6.98798 10.3219 6.70801 10.667 6.70801C11.0119 6.70818 11.2918 6.98809 11.292 7.33301V11.333C11.292 11.6781 11.012 11.9578 10.667 11.958C10.3218 11.958 10.042 11.6782 10.042 11.333ZM14.625 10.7998C14.625 11.3493 14.6255 11.7993 14.5957 12.1641C14.5653 12.5361 14.5001 12.8748 14.3389 13.1914C14.0872 13.6853 13.6853 14.0872 13.1914 14.3389C12.8748 14.5001 12.5361 14.5653 12.1641 14.5957C11.7993 14.6255 11.3493 14.625 10.7998 14.625H5.2002C4.65067 14.625 4.20072 14.6255 3.83594 14.5957C3.46388 14.5653 3.12523 14.5001 2.80859 14.3389C2.31467 14.0872 1.9128 13.6853 1.66113 13.1914C1.49985 12.8748 1.4347 12.5361 1.4043 12.1641C1.37452 11.7993 1.375 11.3493 1.375 10.7998V5.2002C1.375 4.65067 1.37452 4.20072 1.4043 3.83594C1.4347 3.46388 1.49985 3.12523 1.66113 2.80859C1.9128 2.31467 2.31467 1.9128 2.80859 1.66113C3.12523 1.49985 3.46388 1.4347 3.83594 1.4043C4.20072 1.37452 4.65067 1.375 5.2002 1.375H10.7998C11.3493 1.375 11.7993 1.37452 12.1641 1.4043C12.5361 1.4347 12.8748 1.49986 13.1914 1.66113C13.6853 1.9128 14.0872 2.31467 14.3389 2.80859C14.5001 3.12523 14.5653 3.46388 14.5957 3.83594C14.6255 4.20072 14.625 4.65067 14.625 5.2002V10.7998Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/workspace/archive-icon.tsx b/packages/propel/src/icons/workspace/archive-icon.tsx
index d5998cec13..b4dd0d0bb3 100644
--- a/packages/propel/src/icons/workspace/archive-icon.tsx
+++ b/packages/propel/src/icons/workspace/archive-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const ArchiveIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M12.708 5.95804H3.29105V10.7998C3.29105 11.3701 3.29177 11.7604 3.31644 12.0625C3.34052 12.3573 3.38484 12.5129 3.44144 12.6241C3.57326 12.8828 3.7833 13.0938 4.04202 13.2256C4.15311 13.2822 4.30886 13.3256 4.60355 13.3496C4.90567 13.3743 5.29595 13.375 5.86624 13.375H10.1328C10.7031 13.375 11.0934 13.3743 11.3955 13.3496C11.69 13.3256 11.8459 13.2822 11.9571 13.2256C12.2158 13.0938 12.4268 12.8828 12.5586 12.6241C12.6152 12.5129 12.6586 12.357 12.6826 12.0625C12.7073 11.7604 12.708 11.3701 12.708 10.7998V5.95804ZM9.33304 8.04202C9.67822 8.04203 9.95804 8.32185 9.95804 8.66702C9.95786 9.01205 9.67811 9.29202 9.33304 9.29202H6.66605C6.32113 9.29185 6.04122 9.01194 6.04105 8.66702C6.04105 8.32196 6.32102 8.0422 6.66605 8.04202H9.33304ZM14.041 3.66702C14.041 3.32769 14.0379 3.24861 14.0274 3.19534C13.9715 2.91452 13.7525 2.69474 13.4717 2.6387C13.4185 2.62812 13.3395 2.62503 13 2.62503H3.00003C2.66062 2.62503 2.58156 2.62814 2.52835 2.6387C2.24737 2.69459 2.0276 2.91436 1.97171 3.19534C1.96115 3.24855 1.95804 3.32761 1.95804 3.66702C1.95804 4.00648 1.96113 4.08551 1.97171 4.1387C2.02776 4.41946 2.24752 4.63851 2.52835 4.69437C2.54804 4.69828 2.5862 4.70359 2.68265 4.70609C2.68757 4.70622 2.69241 4.7078 2.6973 4.70804H13.3018C13.3067 4.7078 13.3115 4.70622 13.3164 4.70609C13.413 4.70359 13.452 4.69828 13.4717 4.69437C13.7523 4.63834 13.9714 4.41925 14.0274 4.1387C14.038 4.08546 14.041 4.00645 14.041 3.66702ZM15.291 3.66702C15.291 3.94665 15.2945 4.17765 15.2539 4.38187C15.116 5.07554 14.6164 5.63287 13.958 5.85452V10.7998C13.958 11.3494 13.9585 11.7993 13.9287 12.1641C13.8983 12.5362 13.8332 12.8748 13.6719 13.1914C13.4202 13.6854 13.0184 14.0872 12.5244 14.3389C12.2078 14.5002 11.8692 14.5653 11.4971 14.5957C11.1323 14.6255 10.6824 14.625 10.1328 14.625H5.86624C5.31662 14.625 4.8668 14.6255 4.50199 14.5957C4.17639 14.5691 3.87675 14.5155 3.59476 14.3946L3.47464 14.3389C2.98073 14.0872 2.57885 13.6854 2.32718 13.1914C2.16596 12.8748 2.10074 12.5361 2.07034 12.1641C2.04057 11.7993 2.04105 11.3494 2.04105 10.7998V5.85355C1.38301 5.63175 0.88406 5.07532 0.746126 4.38187C0.705511 4.17758 0.708038 3.94664 0.70804 3.66702C0.70804 3.38721 0.70547 3.1556 0.746126 2.9512C0.900699 2.17451 1.50752 1.56769 2.28421 1.41312C2.48861 1.37246 2.72022 1.37503 3.00003 1.37503H13C13.2797 1.37503 13.5106 1.37251 13.7149 1.41312C14.4917 1.56763 15.0994 2.17438 15.2539 2.9512C15.2946 3.15554 15.291 3.38718 15.291 3.66702Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function ArchiveIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M12.708 5.95804H3.29105V10.7998C3.29105 11.3701 3.29177 11.7604 3.31644 12.0625C3.34052 12.3573 3.38484 12.5129 3.44144 12.6241C3.57326 12.8828 3.7833 13.0938 4.04202 13.2256C4.15311 13.2822 4.30886 13.3256 4.60355 13.3496C4.90567 13.3743 5.29595 13.375 5.86624 13.375H10.1328C10.7031 13.375 11.0934 13.3743 11.3955 13.3496C11.69 13.3256 11.8459 13.2822 11.9571 13.2256C12.2158 13.0938 12.4268 12.8828 12.5586 12.6241C12.6152 12.5129 12.6586 12.357 12.6826 12.0625C12.7073 11.7604 12.708 11.3701 12.708 10.7998V5.95804ZM9.33304 8.04202C9.67822 8.04203 9.95804 8.32185 9.95804 8.66702C9.95786 9.01205 9.67811 9.29202 9.33304 9.29202H6.66605C6.32113 9.29185 6.04122 9.01194 6.04105 8.66702C6.04105 8.32196 6.32102 8.0422 6.66605 8.04202H9.33304ZM14.041 3.66702C14.041 3.32769 14.0379 3.24861 14.0274 3.19534C13.9715 2.91452 13.7525 2.69474 13.4717 2.6387C13.4185 2.62812 13.3395 2.62503 13 2.62503H3.00003C2.66062 2.62503 2.58156 2.62814 2.52835 2.6387C2.24737 2.69459 2.0276 2.91436 1.97171 3.19534C1.96115 3.24855 1.95804 3.32761 1.95804 3.66702C1.95804 4.00648 1.96113 4.08551 1.97171 4.1387C2.02776 4.41946 2.24752 4.63851 2.52835 4.69437C2.54804 4.69828 2.5862 4.70359 2.68265 4.70609C2.68757 4.70622 2.69241 4.7078 2.6973 4.70804H13.3018C13.3067 4.7078 13.3115 4.70622 13.3164 4.70609C13.413 4.70359 13.452 4.69828 13.4717 4.69437C13.7523 4.63834 13.9714 4.41925 14.0274 4.1387C14.038 4.08546 14.041 4.00645 14.041 3.66702ZM15.291 3.66702C15.291 3.94665 15.2945 4.17765 15.2539 4.38187C15.116 5.07554 14.6164 5.63287 13.958 5.85452V10.7998C13.958 11.3494 13.9585 11.7993 13.9287 12.1641C13.8983 12.5362 13.8332 12.8748 13.6719 13.1914C13.4202 13.6854 13.0184 14.0872 12.5244 14.3389C12.2078 14.5002 11.8692 14.5653 11.4971 14.5957C11.1323 14.6255 10.6824 14.625 10.1328 14.625H5.86624C5.31662 14.625 4.8668 14.6255 4.50199 14.5957C4.17639 14.5691 3.87675 14.5155 3.59476 14.3946L3.47464 14.3389C2.98073 14.0872 2.57885 13.6854 2.32718 13.1914C2.16596 12.8748 2.10074 12.5361 2.07034 12.1641C2.04057 11.7993 2.04105 11.3494 2.04105 10.7998V5.85355C1.38301 5.63175 0.88406 5.07532 0.746126 4.38187C0.705511 4.17758 0.708038 3.94664 0.70804 3.66702C0.70804 3.38721 0.70547 3.1556 0.746126 2.9512C0.900699 2.17451 1.50752 1.56769 2.28421 1.41312C2.48861 1.37246 2.72022 1.37503 3.00003 1.37503H13C13.2797 1.37503 13.5106 1.37251 13.7149 1.41312C14.4917 1.56763 15.0994 2.17438 15.2539 2.9512C15.2946 3.15554 15.291 3.38718 15.291 3.66702Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/workspace/dashboard-icon.tsx b/packages/propel/src/icons/workspace/dashboard-icon.tsx
index eb3b1f33d7..2d3785afd2 100644
--- a/packages/propel/src/icons/workspace/dashboard-icon.tsx
+++ b/packages/propel/src/icons/workspace/dashboard-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const DashboardIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M13.3752 2.625H2.62524V7.4668C2.62524 8.03711 2.62497 8.42737 2.64966 8.72949C2.67375 9.02428 2.71803 9.17987 2.77466 9.29102C2.90641 9.54958 3.11671 9.75977 3.37524 9.8916C3.4863 9.94819 3.6422 9.9925 3.93677 10.0166C4.23884 10.0413 4.62934 10.042 5.19946 10.042H10.8C11.3704 10.042 11.7606 10.0413 12.0627 10.0166C12.3575 9.99251 12.5131 9.94823 12.6243 9.8916C12.8829 9.75981 13.0931 9.54963 13.2249 9.29102C13.2815 9.17988 13.3258 9.02426 13.3499 8.72949C13.3745 8.42737 13.3752 8.03711 13.3752 7.4668V2.625ZM10.5598 4.55566C10.8049 4.31293 11.2006 4.3148 11.4436 4.55957C11.6866 4.80474 11.6849 5.20135 11.4397 5.44434L9.6311 7.23633C9.5999 7.26726 9.46941 7.41161 9.29126 7.4873C9.19299 7.52903 9.08863 7.55175 8.98364 7.55566L8.87817 7.55371C8.69021 7.53788 8.52264 7.44647 8.47974 7.42578L7.12622 6.77148L5.4397 8.44434C5.19457 8.68696 4.79881 8.68531 4.55591 8.44043C4.31293 8.19526 4.31465 7.79865 4.55981 7.55566L6.36841 5.76367C6.39962 5.73274 6.53015 5.5884 6.70825 5.5127C6.83939 5.45697 6.9815 5.43463 7.12134 5.44629H7.12231C7.3101 5.46221 7.47687 5.55353 7.51978 5.57422L8.87231 6.22754L10.5598 4.55566ZM14.6252 7.4668C14.6252 8.01642 14.6257 8.46625 14.5959 8.83105C14.5693 9.15661 14.5157 9.45632 14.3948 9.73828L14.3391 9.8584C14.1189 10.2906 13.7836 10.6521 13.3723 10.9043L13.1917 11.0059C12.875 11.1672 12.5364 11.2323 12.1643 11.2627C11.7995 11.2925 11.3497 11.292 10.8 11.292H9.72681L12.3997 13.5195C12.6648 13.7405 12.7007 14.1352 12.4797 14.4004C12.2588 14.6652 11.8649 14.7012 11.5999 14.4805L8.62524 12.001V14C8.62524 14.3451 8.34527 14.6248 8.00024 14.625C7.65507 14.625 7.37524 14.3452 7.37524 14V12L4.39966 14.4805C4.13454 14.701 3.74067 14.6653 3.51978 14.4004C3.2988 14.1352 3.33468 13.7405 3.59985 13.5195L6.27271 11.292H5.19946C4.64993 11.292 4.19996 11.2925 3.83521 11.2627C3.46312 11.2323 3.12451 11.1672 2.80786 11.0059C2.37566 10.7856 2.01416 10.4503 1.76196 10.0391L1.66138 9.8584C1.50002 9.54169 1.43495 9.20321 1.40454 8.83105C1.37474 8.46624 1.37524 8.01645 1.37524 7.4668V2.625H1.33325C0.988074 2.625 0.708252 2.34518 0.708252 2C0.708252 1.65482 0.988074 1.375 1.33325 1.375H14.6663C15.0114 1.375 15.2913 1.65482 15.2913 2C15.2913 2.34518 15.0114 2.625 14.6663 2.625H14.6252V7.4668Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function DashboardIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.3752 2.625H2.62524V7.4668C2.62524 8.03711 2.62497 8.42737 2.64966 8.72949C2.67375 9.02428 2.71803 9.17987 2.77466 9.29102C2.90641 9.54958 3.11671 9.75977 3.37524 9.8916C3.4863 9.94819 3.6422 9.9925 3.93677 10.0166C4.23884 10.0413 4.62934 10.042 5.19946 10.042H10.8C11.3704 10.042 11.7606 10.0413 12.0627 10.0166C12.3575 9.99251 12.5131 9.94823 12.6243 9.8916C12.8829 9.75981 13.0931 9.54963 13.2249 9.29102C13.2815 9.17988 13.3258 9.02426 13.3499 8.72949C13.3745 8.42737 13.3752 8.03711 13.3752 7.4668V2.625ZM10.5598 4.55566C10.8049 4.31293 11.2006 4.3148 11.4436 4.55957C11.6866 4.80474 11.6849 5.20135 11.4397 5.44434L9.6311 7.23633C9.5999 7.26726 9.46941 7.41161 9.29126 7.4873C9.19299 7.52903 9.08863 7.55175 8.98364 7.55566L8.87817 7.55371C8.69021 7.53788 8.52264 7.44647 8.47974 7.42578L7.12622 6.77148L5.4397 8.44434C5.19457 8.68696 4.79881 8.68531 4.55591 8.44043C4.31293 8.19526 4.31465 7.79865 4.55981 7.55566L6.36841 5.76367C6.39962 5.73274 6.53015 5.5884 6.70825 5.5127C6.83939 5.45697 6.9815 5.43463 7.12134 5.44629H7.12231C7.3101 5.46221 7.47687 5.55353 7.51978 5.57422L8.87231 6.22754L10.5598 4.55566ZM14.6252 7.4668C14.6252 8.01642 14.6257 8.46625 14.5959 8.83105C14.5693 9.15661 14.5157 9.45632 14.3948 9.73828L14.3391 9.8584C14.1189 10.2906 13.7836 10.6521 13.3723 10.9043L13.1917 11.0059C12.875 11.1672 12.5364 11.2323 12.1643 11.2627C11.7995 11.2925 11.3497 11.292 10.8 11.292H9.72681L12.3997 13.5195C12.6648 13.7405 12.7007 14.1352 12.4797 14.4004C12.2588 14.6652 11.8649 14.7012 11.5999 14.4805L8.62524 12.001V14C8.62524 14.3451 8.34527 14.6248 8.00024 14.625C7.65507 14.625 7.37524 14.3452 7.37524 14V12L4.39966 14.4805C4.13454 14.701 3.74067 14.6653 3.51978 14.4004C3.2988 14.1352 3.33468 13.7405 3.59985 13.5195L6.27271 11.292H5.19946C4.64993 11.292 4.19996 11.2925 3.83521 11.2627C3.46312 11.2323 3.12451 11.1672 2.80786 11.0059C2.37566 10.7856 2.01416 10.4503 1.76196 10.0391L1.66138 9.8584C1.50002 9.54169 1.43495 9.20321 1.40454 8.83105C1.37474 8.46624 1.37524 8.01645 1.37524 7.4668V2.625H1.33325C0.988074 2.625 0.708252 2.34518 0.708252 2C0.708252 1.65482 0.988074 1.375 1.33325 1.375H14.6663C15.0114 1.375 15.2913 1.65482 15.2913 2C15.2913 2.34518 15.0114 2.625 14.6663 2.625H14.6252V7.4668Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/workspace/draft-icon.tsx b/packages/propel/src/icons/workspace/draft-icon.tsx
index 16860e518c..8ec7f498f3 100644
--- a/packages/propel/src/icons/workspace/draft-icon.tsx
+++ b/packages/propel/src/icons/workspace/draft-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const DraftIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M10.5577 2.26554C11.3042 1.51896 12.4862 1.47177 13.2872 2.12491L13.4425 2.26554L13.5821 2.41983C14.2354 3.22077 14.189 4.40271 13.4425 5.14933L5.06648 13.5243C4.85708 13.7337 4.68297 13.9138 4.47077 14.0439C4.29575 14.151 4.10496 14.2303 3.90534 14.2782C3.66318 14.3364 3.41264 14.3319 3.11628 14.3319H2.00007C1.65489 14.3319 1.37507 14.0521 1.37507 13.7069V12.5907C1.37507 12.2946 1.37079 12.0446 1.42878 11.8026C1.47675 11.6028 1.55593 11.4113 1.66316 11.2362H1.66413C1.79415 11.0241 1.97323 10.85 2.18269 10.6405L10.5577 2.26554ZM13.5391 11.9521C13.772 11.6975 14.1672 11.6793 14.4219 11.912C14.6767 12.1449 14.6939 12.541 14.461 12.7958L13.795 13.5243V13.5253C13.3294 14.0345 12.6848 14.3319 12.0001 14.3319C11.401 14.3319 10.8332 14.104 10.3887 13.706L10.2061 13.5253C9.96412 13.2617 9.64853 13.1259 9.33308 13.1259C9.01784 13.126 8.703 13.2618 8.46101 13.5253C8.22763 13.7796 7.83155 13.7968 7.57722 13.5634C7.32321 13.3301 7.30605 12.9348 7.53913 12.6806C8.00515 12.1727 8.64906 11.876 9.33308 11.8759C10.0172 11.8759 10.6619 12.1725 11.128 12.6806V12.6816C11.3696 12.9458 11.6848 13.0819 12.0001 13.0819C12.3153 13.0819 12.6305 12.9458 12.8721 12.6816L13.5391 11.9521ZM2.62507 13.0819H3.11628C3.47218 13.0819 3.54863 13.078 3.61335 13.0624C3.68545 13.0451 3.75417 13.0162 3.81745 12.9775C3.87425 12.9426 3.93123 12.892 4.18269 12.6405L12.5577 4.26554C12.8659 3.95734 12.8659 3.45754 12.5577 3.14933V3.14835C12.2494 2.84073 11.7504 2.84139 11.4425 3.14933L3.06648 11.5243C2.81511 11.7757 2.76438 11.8328 2.72956 11.8896C2.69077 11.9529 2.66192 12.0217 2.6446 12.0937C2.62904 12.1585 2.62507 12.2349 2.62507 12.5907V13.0819Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function DraftIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M10.5577 2.26554C11.3042 1.51896 12.4862 1.47177 13.2872 2.12491L13.4425 2.26554L13.5821 2.41983C14.2354 3.22077 14.189 4.40271 13.4425 5.14933L5.06648 13.5243C4.85708 13.7337 4.68297 13.9138 4.47077 14.0439C4.29575 14.151 4.10496 14.2303 3.90534 14.2782C3.66318 14.3364 3.41264 14.3319 3.11628 14.3319H2.00007C1.65489 14.3319 1.37507 14.0521 1.37507 13.7069V12.5907C1.37507 12.2946 1.37079 12.0446 1.42878 11.8026C1.47675 11.6028 1.55593 11.4113 1.66316 11.2362H1.66413C1.79415 11.0241 1.97323 10.85 2.18269 10.6405L10.5577 2.26554ZM13.5391 11.9521C13.772 11.6975 14.1672 11.6793 14.4219 11.912C14.6767 12.1449 14.6939 12.541 14.461 12.7958L13.795 13.5243V13.5253C13.3294 14.0345 12.6848 14.3319 12.0001 14.3319C11.401 14.3319 10.8332 14.104 10.3887 13.706L10.2061 13.5253C9.96412 13.2617 9.64853 13.1259 9.33308 13.1259C9.01784 13.126 8.703 13.2618 8.46101 13.5253C8.22763 13.7796 7.83155 13.7968 7.57722 13.5634C7.32321 13.3301 7.30605 12.9348 7.53913 12.6806C8.00515 12.1727 8.64906 11.876 9.33308 11.8759C10.0172 11.8759 10.6619 12.1725 11.128 12.6806V12.6816C11.3696 12.9458 11.6848 13.0819 12.0001 13.0819C12.3153 13.0819 12.6305 12.9458 12.8721 12.6816L13.5391 11.9521ZM2.62507 13.0819H3.11628C3.47218 13.0819 3.54863 13.078 3.61335 13.0624C3.68545 13.0451 3.75417 13.0162 3.81745 12.9775C3.87425 12.9426 3.93123 12.892 4.18269 12.6405L12.5577 4.26554C12.8659 3.95734 12.8659 3.45754 12.5577 3.14933V3.14835C12.2494 2.84073 11.7504 2.84139 11.4425 3.14933L3.06648 11.5243C2.81511 11.7757 2.76438 11.8328 2.72956 11.8896C2.69077 11.9529 2.66192 12.0217 2.6446 12.0937C2.62904 12.1585 2.62507 12.2349 2.62507 12.5907V13.0819Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/workspace/home-icon.tsx b/packages/propel/src/icons/workspace/home-icon.tsx
index d32facfa03..ba3034fb57 100644
--- a/packages/propel/src/icons/workspace/home-icon.tsx
+++ b/packages/propel/src/icons/workspace/home-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const HomeIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M9.36825 8.5908C9.3668 8.57319 9.36465 8.5605 9.36337 8.55174C9.36224 8.55047 9.36073 8.54993 9.35946 8.54881C9.35064 8.54753 9.33797 8.54536 9.3204 8.54393C9.24062 8.53741 9.13053 8.53709 8.93368 8.53709H7.06649C6.86964 8.53709 6.75955 8.53741 6.67977 8.54393C6.66156 8.54542 6.64858 8.54751 6.63974 8.54881C6.63851 8.54993 6.63691 8.55048 6.63583 8.55174C6.63456 8.5605 6.63336 8.57328 6.63192 8.5908C6.6254 8.67062 6.62509 8.78148 6.62509 8.9785V13.2871H9.37509V8.9785C9.37509 8.78148 9.37477 8.67061 9.36825 8.5908ZM10.6251 13.2871H11.8663C12.2499 13.2871 12.5005 13.2861 12.6915 13.2705C12.8752 13.2555 12.9486 13.2292 12.9884 13.209L13.0831 13.1513C13.173 13.086 13.247 13.0003 13.2979 12.9004C13.3182 12.8605 13.3444 12.7869 13.3595 12.6035C13.3751 12.4125 13.3751 12.162 13.3751 11.7783V6.95506C13.3751 6.53721 13.3695 6.44728 13.3487 6.37303C13.3255 6.29014 13.2876 6.21187 13.2364 6.14256C13.1906 6.08059 13.123 6.02126 12.7931 5.76463L8.27157 2.24803C8.14754 2.15155 8.08003 2.09893 8.02841 2.06444C8.01732 2.05703 8.00875 2.05221 8.00302 2.04881C8.00102 2.04867 7.99915 2.04867 7.99716 2.04881C7.99143 2.05221 7.98285 2.05703 7.97177 2.06444C7.92015 2.09893 7.85263 2.15155 7.7286 2.24803L3.20712 5.76463C2.8772 6.02125 2.80961 6.08057 2.76376 6.14256C2.71257 6.2118 2.67466 6.29012 2.65145 6.37303C2.63071 6.44726 2.62509 6.53709 2.62509 6.95506V11.7783C2.62509 12.162 2.62511 12.4125 2.64071 12.6035C2.65567 12.7862 2.68197 12.8595 2.70224 12.8994C2.77013 13.0326 2.87866 13.1411 3.01181 13.209L3.10653 13.2422C3.15275 13.253 3.21704 13.263 3.30868 13.2705C3.49965 13.2861 3.75025 13.2871 4.13388 13.2871H5.37509V8.9785C5.37509 8.80211 5.37418 8.63176 5.38583 8.48924C5.39807 8.33956 5.42717 8.16607 5.51571 7.99217L5.56552 7.9033C5.68964 7.70078 5.8676 7.53611 6.08016 7.42772L6.21005 7.37108C6.33947 7.32494 6.46577 7.30702 6.57821 7.29783C6.72062 7.28621 6.8903 7.28709 7.06649 7.28709H8.93368C9.10988 7.28709 9.27956 7.28621 9.42196 7.29783C9.5344 7.30702 9.66071 7.32494 9.79013 7.37108L9.92001 7.42772L10.0089 7.47752C10.2111 7.60162 10.3761 7.77956 10.4845 7.99217C10.573 8.16607 10.6021 8.33956 10.6143 8.48924C10.626 8.63176 10.6251 8.80211 10.6251 8.9785V13.2871ZM14.6251 11.7783C14.6251 12.1413 14.6253 12.4514 14.6046 12.7051C14.5832 12.966 14.5362 13.2224 14.4112 13.4678C14.2235 13.836 13.9241 14.1356 13.5558 14.3232C13.3104 14.4482 13.054 14.4953 12.7931 14.5166C12.5394 14.5373 12.2292 14.5371 11.8663 14.5371H4.13388C3.77098 14.5371 3.46075 14.5373 3.20712 14.5166C2.94616 14.4953 2.6898 14.4482 2.44442 14.3232C2.07603 14.1356 1.7767 13.836 1.58895 13.4678C1.46397 13.2224 1.41693 12.966 1.39559 12.7051C1.37487 12.4514 1.37509 12.1413 1.37509 11.7783V6.95506C1.37509 6.60766 1.36953 6.31438 1.44735 6.03611C1.51154 5.80678 1.61729 5.59086 1.75888 5.3994C1.93074 5.16703 2.16527 4.99065 2.43954 4.77733L6.96102 1.26072C7.14957 1.11407 7.38218 0.918674 7.6622 0.842755C7.88326 0.782884 8.11691 0.782884 8.33798 0.842755C8.618 0.918674 8.8506 1.11407 9.03915 1.26072L13.5606 4.77733C13.8349 4.99063 14.0694 5.16701 14.2413 5.3994L14.3409 5.54686C14.4333 5.69906 14.5046 5.86401 14.5528 6.03611C14.6306 6.31436 14.6251 6.60762 14.6251 6.95506V11.7783Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function HomeIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M9.36825 8.5908C9.3668 8.57319 9.36465 8.5605 9.36337 8.55174C9.36224 8.55047 9.36073 8.54993 9.35946 8.54881C9.35064 8.54753 9.33797 8.54536 9.3204 8.54393C9.24062 8.53741 9.13053 8.53709 8.93368 8.53709H7.06649C6.86964 8.53709 6.75955 8.53741 6.67977 8.54393C6.66156 8.54542 6.64858 8.54751 6.63974 8.54881C6.63851 8.54993 6.63691 8.55048 6.63583 8.55174C6.63456 8.5605 6.63336 8.57328 6.63192 8.5908C6.6254 8.67062 6.62509 8.78148 6.62509 8.9785V13.2871H9.37509V8.9785C9.37509 8.78148 9.37477 8.67061 9.36825 8.5908ZM10.6251 13.2871H11.8663C12.2499 13.2871 12.5005 13.2861 12.6915 13.2705C12.8752 13.2555 12.9486 13.2292 12.9884 13.209L13.0831 13.1513C13.173 13.086 13.247 13.0003 13.2979 12.9004C13.3182 12.8605 13.3444 12.7869 13.3595 12.6035C13.3751 12.4125 13.3751 12.162 13.3751 11.7783V6.95506C13.3751 6.53721 13.3695 6.44728 13.3487 6.37303C13.3255 6.29014 13.2876 6.21187 13.2364 6.14256C13.1906 6.08059 13.123 6.02126 12.7931 5.76463L8.27157 2.24803C8.14754 2.15155 8.08003 2.09893 8.02841 2.06444C8.01732 2.05703 8.00875 2.05221 8.00302 2.04881C8.00102 2.04867 7.99915 2.04867 7.99716 2.04881C7.99143 2.05221 7.98285 2.05703 7.97177 2.06444C7.92015 2.09893 7.85263 2.15155 7.7286 2.24803L3.20712 5.76463C2.8772 6.02125 2.80961 6.08057 2.76376 6.14256C2.71257 6.2118 2.67466 6.29012 2.65145 6.37303C2.63071 6.44726 2.62509 6.53709 2.62509 6.95506V11.7783C2.62509 12.162 2.62511 12.4125 2.64071 12.6035C2.65567 12.7862 2.68197 12.8595 2.70224 12.8994C2.77013 13.0326 2.87866 13.1411 3.01181 13.209L3.10653 13.2422C3.15275 13.253 3.21704 13.263 3.30868 13.2705C3.49965 13.2861 3.75025 13.2871 4.13388 13.2871H5.37509V8.9785C5.37509 8.80211 5.37418 8.63176 5.38583 8.48924C5.39807 8.33956 5.42717 8.16607 5.51571 7.99217L5.56552 7.9033C5.68964 7.70078 5.8676 7.53611 6.08016 7.42772L6.21005 7.37108C6.33947 7.32494 6.46577 7.30702 6.57821 7.29783C6.72062 7.28621 6.8903 7.28709 7.06649 7.28709H8.93368C9.10988 7.28709 9.27956 7.28621 9.42196 7.29783C9.5344 7.30702 9.66071 7.32494 9.79013 7.37108L9.92001 7.42772L10.0089 7.47752C10.2111 7.60162 10.3761 7.77956 10.4845 7.99217C10.573 8.16607 10.6021 8.33956 10.6143 8.48924C10.626 8.63176 10.6251 8.80211 10.6251 8.9785V13.2871ZM14.6251 11.7783C14.6251 12.1413 14.6253 12.4514 14.6046 12.7051C14.5832 12.966 14.5362 13.2224 14.4112 13.4678C14.2235 13.836 13.9241 14.1356 13.5558 14.3232C13.3104 14.4482 13.054 14.4953 12.7931 14.5166C12.5394 14.5373 12.2292 14.5371 11.8663 14.5371H4.13388C3.77098 14.5371 3.46075 14.5373 3.20712 14.5166C2.94616 14.4953 2.6898 14.4482 2.44442 14.3232C2.07603 14.1356 1.7767 13.836 1.58895 13.4678C1.46397 13.2224 1.41693 12.966 1.39559 12.7051C1.37487 12.4514 1.37509 12.1413 1.37509 11.7783V6.95506C1.37509 6.60766 1.36953 6.31438 1.44735 6.03611C1.51154 5.80678 1.61729 5.59086 1.75888 5.3994C1.93074 5.16703 2.16527 4.99065 2.43954 4.77733L6.96102 1.26072C7.14957 1.11407 7.38218 0.918674 7.6622 0.842755C7.88326 0.782884 8.11691 0.782884 8.33798 0.842755C8.618 0.918674 8.8506 1.11407 9.03915 1.26072L13.5606 4.77733C13.8349 4.99063 14.0694 5.16701 14.2413 5.3994L14.3409 5.54686C14.4333 5.69906 14.5046 5.86401 14.5528 6.03611C14.6306 6.31436 14.6251 6.60762 14.6251 6.95506V11.7783Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/workspace/inbox-icon.tsx b/packages/propel/src/icons/workspace/inbox-icon.tsx
index 2961959026..243c610123 100644
--- a/packages/propel/src/icons/workspace/inbox-icon.tsx
+++ b/packages/propel/src/icons/workspace/inbox-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const InboxIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M14.0401 8.62507H12.0781C11.8582 8.62516 11.657 8.74968 11.5586 8.94636C11.2485 9.56676 10.6144 9.95906 9.92091 9.95906H6.07814C5.38471 9.95897 4.75057 9.56666 4.44044 8.94636C4.34199 8.74967 4.1409 8.62507 3.92091 8.62507H1.959C1.95888 8.66367 1.95802 8.70708 1.95802 8.75593V10.1339C1.95802 10.7042 1.95872 11.0944 1.98341 11.3966C2.00749 11.6912 2.05084 11.847 2.10743 11.9581C2.23925 12.2168 2.45027 12.4269 2.709 12.5587C2.8201 12.6153 2.97574 12.6596 3.27052 12.6837C3.57264 12.7083 3.96298 12.7091 4.53321 12.7091H11.4668C12.0369 12.7091 12.4274 12.7083 12.7295 12.6837C13.0241 12.6596 13.1799 12.6153 13.291 12.5587C13.5496 12.4268 13.7599 12.2167 13.8916 11.9581C13.9482 11.8469 13.9925 11.6913 14.0166 11.3966C14.0413 11.0944 14.041 10.7042 14.041 10.1339V8.75593C14.041 8.70708 14.0402 8.66367 14.0401 8.62507ZM5.97755 3.29207C5.21433 3.29207 4.98135 3.30027 4.78712 3.36726C4.59456 3.43373 4.41898 3.5421 4.27345 3.68464C4.12668 3.82841 4.01513 4.03332 3.67384 4.71589L2.34474 7.37507H3.92091C4.61442 7.37507 5.24844 7.7674 5.5586 8.38777C5.657 8.58446 5.85819 8.70897 6.07814 8.70906H9.92091C10.1409 8.70906 10.342 8.58445 10.4404 8.38777C10.7506 7.76744 11.3847 7.37516 12.0781 7.37507H13.6543L12.3252 4.71589C11.9839 4.03325 11.8724 3.82842 11.7256 3.68464C11.58 3.5421 11.4046 3.4337 11.2119 3.36726C11.0177 3.30027 10.7847 3.29207 10.0215 3.29207H5.97755ZM15.291 10.1339C15.291 10.6835 15.2915 11.1333 15.2617 11.4981C15.2351 11.8236 15.1824 12.1234 15.0615 12.4053L15.0049 12.5255C14.7533 13.0193 14.3522 13.4213 13.8584 13.6729C13.5417 13.8343 13.2032 13.8993 12.8311 13.9298C12.4663 13.9596 12.0164 13.9591 11.4668 13.9591H4.53321C3.98371 13.9591 3.53374 13.9595 3.16896 13.9298C2.79695 13.8994 2.45821 13.8342 2.14161 13.6729C1.70944 13.4527 1.34794 13.1173 1.09571 12.7061L0.994152 12.5255C0.832797 12.2088 0.767723 11.8703 0.737316 11.4981C0.707517 11.1333 0.708019 10.6835 0.708019 10.1339V8.75593C0.708019 8.49089 0.706677 8.29939 0.73341 8.10847C0.755917 7.94781 0.793061 7.78957 0.844738 7.63582L0.896496 7.4991C0.952354 7.36314 1.02352 7.2226 1.11232 7.045L2.55665 4.15632C2.85737 3.55488 3.06727 3.11738 3.39943 2.79207C3.67739 2.51984 4.01208 2.31249 4.37989 2.18562C4.81947 2.03402 5.30497 2.04207 5.97755 2.04207H10.0215C10.694 2.04207 11.1796 2.03412 11.6192 2.18562C11.987 2.31249 12.3226 2.51981 12.6006 2.79207C12.9326 3.11739 13.1426 3.5549 13.4434 4.15632L14.8877 7.045C15.0062 7.28198 15.0928 7.4524 15.1543 7.63484V7.63582C15.206 7.78963 15.2432 7.94783 15.2656 8.10847C15.2924 8.29945 15.291 8.49091 15.291 8.75593V10.1339Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function InboxIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M14.0401 8.62507H12.0781C11.8582 8.62516 11.657 8.74968 11.5586 8.94636C11.2485 9.56676 10.6144 9.95906 9.92091 9.95906H6.07814C5.38471 9.95897 4.75057 9.56666 4.44044 8.94636C4.34199 8.74967 4.1409 8.62507 3.92091 8.62507H1.959C1.95888 8.66367 1.95802 8.70708 1.95802 8.75593V10.1339C1.95802 10.7042 1.95872 11.0944 1.98341 11.3966C2.00749 11.6912 2.05084 11.847 2.10743 11.9581C2.23925 12.2168 2.45027 12.4269 2.709 12.5587C2.8201 12.6153 2.97574 12.6596 3.27052 12.6837C3.57264 12.7083 3.96298 12.7091 4.53321 12.7091H11.4668C12.0369 12.7091 12.4274 12.7083 12.7295 12.6837C13.0241 12.6596 13.1799 12.6153 13.291 12.5587C13.5496 12.4268 13.7599 12.2167 13.8916 11.9581C13.9482 11.8469 13.9925 11.6913 14.0166 11.3966C14.0413 11.0944 14.041 10.7042 14.041 10.1339V8.75593C14.041 8.70708 14.0402 8.66367 14.0401 8.62507ZM5.97755 3.29207C5.21433 3.29207 4.98135 3.30027 4.78712 3.36726C4.59456 3.43373 4.41898 3.5421 4.27345 3.68464C4.12668 3.82841 4.01513 4.03332 3.67384 4.71589L2.34474 7.37507H3.92091C4.61442 7.37507 5.24844 7.7674 5.5586 8.38777C5.657 8.58446 5.85819 8.70897 6.07814 8.70906H9.92091C10.1409 8.70906 10.342 8.58445 10.4404 8.38777C10.7506 7.76744 11.3847 7.37516 12.0781 7.37507H13.6543L12.3252 4.71589C11.9839 4.03325 11.8724 3.82842 11.7256 3.68464C11.58 3.5421 11.4046 3.4337 11.2119 3.36726C11.0177 3.30027 10.7847 3.29207 10.0215 3.29207H5.97755ZM15.291 10.1339C15.291 10.6835 15.2915 11.1333 15.2617 11.4981C15.2351 11.8236 15.1824 12.1234 15.0615 12.4053L15.0049 12.5255C14.7533 13.0193 14.3522 13.4213 13.8584 13.6729C13.5417 13.8343 13.2032 13.8993 12.8311 13.9298C12.4663 13.9596 12.0164 13.9591 11.4668 13.9591H4.53321C3.98371 13.9591 3.53374 13.9595 3.16896 13.9298C2.79695 13.8994 2.45821 13.8342 2.14161 13.6729C1.70944 13.4527 1.34794 13.1173 1.09571 12.7061L0.994152 12.5255C0.832797 12.2088 0.767723 11.8703 0.737316 11.4981C0.707517 11.1333 0.708019 10.6835 0.708019 10.1339V8.75593C0.708019 8.49089 0.706677 8.29939 0.73341 8.10847C0.755917 7.94781 0.793061 7.78957 0.844738 7.63582L0.896496 7.4991C0.952354 7.36314 1.02352 7.2226 1.11232 7.045L2.55665 4.15632C2.85737 3.55488 3.06727 3.11738 3.39943 2.79207C3.67739 2.51984 4.01208 2.31249 4.37989 2.18562C4.81947 2.03402 5.30497 2.04207 5.97755 2.04207H10.0215C10.694 2.04207 11.1796 2.03412 11.6192 2.18562C11.987 2.31249 12.3226 2.51981 12.6006 2.79207C12.9326 3.11739 13.1426 3.5549 13.4434 4.15632L14.8877 7.045C15.0062 7.28198 15.0928 7.4524 15.1543 7.63484V7.63582C15.206 7.78963 15.2432 7.94783 15.2656 8.10847C15.2924 8.29945 15.291 8.49091 15.291 8.75593V10.1339Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/workspace/index.ts b/packages/propel/src/icons/workspace/index.ts
index dd1b8a0599..99ef75d7f9 100644
--- a/packages/propel/src/icons/workspace/index.ts
+++ b/packages/propel/src/icons/workspace/index.ts
@@ -4,5 +4,6 @@ export * from "./dashboard-icon";
 export * from "./draft-icon";
 export * from "./home-icon";
 export * from "./inbox-icon";
+export * from "./multiple-sticky-icon";
 export * from "./project-icon";
 export * from "./your-work-icon";
diff --git a/packages/propel/src/icons/workspace/multiple-sticky-icon.tsx b/packages/propel/src/icons/workspace/multiple-sticky-icon.tsx
new file mode 100644
index 0000000000..fd1e58dc42
--- /dev/null
+++ b/packages/propel/src/icons/workspace/multiple-sticky-icon.tsx
@@ -0,0 +1,15 @@
+import * as React from "react";
+
+import { IconWrapper } from "../icon-wrapper";
+import type { ISvgIcons } from "../type";
+
+export function MultipleStickyIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M13.6162 9.12793V7.52246C13.6162 7.09217 13.6155 6.80665 13.5977 6.58789C13.5804 6.37643 13.5499 6.28228 13.5205 6.22461C13.4367 6.06019 13.3031 5.92661 13.1387 5.84277C12.8312 5.6861 12.7086 5.30949 12.8652 5.00195C13.0219 4.69439 13.3985 4.57182 13.7061 4.72852C14.1059 4.93224 14.431 5.25738 14.6348 5.65723C14.7689 5.92046 14.8202 6.19754 14.8438 6.48633C14.8667 6.76775 14.8662 7.1129 14.8662 7.52246V9.12793C14.8662 9.46504 14.8704 9.73576 14.8076 9.99707C14.7556 10.2138 14.6692 10.4213 14.5527 10.6113C14.4124 10.8402 14.2186 11.0285 13.9805 11.2666L11.3857 13.8613C11.1476 14.0994 10.9593 14.2933 10.7305 14.4336C10.5404 14.55 10.333 14.6364 10.1162 14.6885C9.85491 14.7512 9.58418 14.7471 9.24707 14.7471H7.6416C7.23205 14.7471 6.88689 14.7476 6.60547 14.7246C6.31669 14.701 6.03959 14.6497 5.77637 14.5156C5.37654 14.3119 5.05138 13.9867 4.84766 13.5869C4.69095 13.2794 4.81354 12.9028 5.12109 12.7461C5.42863 12.5895 5.80523 12.712 5.96192 13.0195C6.04576 13.1839 6.17935 13.3175 6.34375 13.4014C6.40139 13.4307 6.49555 13.4612 6.70703 13.4785C6.92579 13.4964 7.21132 13.4971 7.6416 13.4971H9.24707C9.4184 13.4971 9.53371 13.4947 9.61621 13.4922V12.5225C9.61621 12.1129 9.6157 11.7677 9.63867 11.4863C9.66227 11.1975 9.71353 10.9205 9.84766 10.6572C10.0514 10.2574 10.3765 9.93224 10.7764 9.72852C11.0396 9.5944 11.3167 9.54313 11.6055 9.51953C11.8869 9.49656 12.232 9.49707 12.6416 9.49707H13.6113C13.6138 9.41457 13.6162 9.29926 13.6162 9.12793ZM10.6162 6.12793V4.52246C10.6162 4.09217 10.6155 3.80665 10.5977 3.58789C10.5804 3.37643 10.5499 3.28228 10.5205 3.22461C10.4367 3.06019 10.3031 2.92661 10.1387 2.84277C10.081 2.81339 9.98685 2.7829 9.77539 2.76563C9.55664 2.74776 9.27112 2.74707 8.84082 2.74707H4.6416C4.21132 2.74707 3.92579 2.74776 3.70703 2.76563C3.49556 2.78291 3.40139 2.81341 3.34375 2.84277C3.17934 2.92662 3.04576 3.06021 2.96192 3.22461C2.93253 3.28228 2.90204 3.37643 2.88477 3.58789C2.8669 3.80665 2.86621 4.09217 2.86621 4.52246V8.72168C2.86621 9.15196 2.8669 9.43749 2.88477 9.65625C2.90205 9.86773 2.93255 9.96189 2.96192 10.0195C3.04576 10.1839 3.17935 10.3175 3.34375 10.4014C3.40139 10.4307 3.49555 10.4612 3.70703 10.4785C3.92579 10.4964 4.21132 10.4971 4.6416 10.4971H6.24707C6.4184 10.4971 6.53371 10.4947 6.61621 10.4922V9.52246C6.61621 9.11291 6.6157 8.76775 6.63867 8.48633C6.66227 8.19755 6.71353 7.92046 6.84766 7.65723C7.05137 7.25741 7.37651 6.93224 7.77637 6.72852C8.0396 6.5944 8.31668 6.54313 8.60547 6.51953C8.88689 6.49656 9.23204 6.49707 9.6416 6.49707H10.6113C10.6138 6.41457 10.6162 6.29926 10.6162 6.12793ZM10.8662 12.6133L12.7324 10.7471H12.6416C12.2113 10.7471 11.9258 10.7478 11.707 10.7656C11.4956 10.7829 11.4014 10.8134 11.3438 10.8428C11.1794 10.9266 11.0458 11.0602 10.9619 11.2246C10.9325 11.2822 10.902 11.3764 10.8848 11.5879C10.8669 11.8067 10.8662 12.0922 10.8662 12.5225V12.6133ZM7.86621 9.61328L9.73242 7.74707H9.6416C9.21131 7.74707 8.92579 7.74776 8.70703 7.76563C8.49557 7.7829 8.40142 7.81339 8.34375 7.84277C8.17936 7.9266 8.04576 8.06019 7.96192 8.22461C7.93255 8.28225 7.90205 8.37642 7.88477 8.58789C7.8669 8.80665 7.86621 9.09218 7.86621 9.52246V9.61328ZM11.8662 6.12793C11.8662 6.46504 11.8704 6.73576 11.8076 6.99707C11.7556 7.21382 11.6692 7.42126 11.5527 7.61133C11.4124 7.84018 11.2186 8.02845 10.9805 8.2666L8.38574 10.8613C8.1476 11.0995 7.95931 11.2933 7.73047 11.4336C7.54042 11.55 7.33298 11.6364 7.11621 11.6885C6.85491 11.7512 6.58418 11.7471 6.24707 11.7471H4.6416C4.23205 11.7471 3.88689 11.7476 3.60547 11.7246C3.31669 11.701 3.03959 11.6497 2.77637 11.5156C2.37654 11.3119 2.05138 10.9867 1.84766 10.5869C1.71354 10.3237 1.66227 10.0466 1.63867 9.75781C1.6157 9.4764 1.61621 9.13124 1.61621 8.72168V4.52246C1.61621 4.1129 1.6157 3.76774 1.63867 3.48633C1.66227 3.19754 1.71355 2.92045 1.84766 2.65723C2.05139 2.25738 2.37655 1.93223 2.77637 1.72852C3.0396 1.59439 3.31669 1.54313 3.60547 1.51953C3.88689 1.49656 4.23205 1.49707 4.6416 1.49707H8.84082C9.25038 1.49707 9.59554 1.49656 9.87695 1.51953C10.1657 1.54313 10.4428 1.5944 10.7061 1.72852C11.1059 1.93224 11.431 2.25738 11.6348 2.65723C11.7689 2.92046 11.8202 3.19754 11.8438 3.48633C11.8667 3.76774 11.8662 4.1129 11.8662 4.52246V6.12793Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/workspace/project-icon.tsx b/packages/propel/src/icons/workspace/project-icon.tsx
index 0a01dff26d..99fe2bb5cb 100644
--- a/packages/propel/src/icons/workspace/project-icon.tsx
+++ b/packages/propel/src/icons/workspace/project-icon.tsx
@@ -3,11 +3,13 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const ProjectIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M14.041 9.77251C13.6575 9.86273 13.1544 9.9762 12.5771 10.0879C11.271 10.3407 9.55874 10.5996 8 10.5997C6.44125 10.5997 4.7291 10.3408 3.42285 10.0879C2.84526 9.97614 2.34163 9.86276 1.95801 9.77251V11.8409C1.95801 12.2244 1.95804 12.4751 1.97363 12.6661C1.98864 12.8498 2.01488 12.9231 2.03516 12.9629C2.10308 13.0962 2.21151 13.2046 2.34473 13.2725L2.43945 13.3047C2.48568 13.3156 2.54989 13.3265 2.6416 13.334C2.83257 13.3496 3.0832 13.3497 3.4668 13.3497H12.5332C12.9165 13.3497 13.1665 13.3496 13.3574 13.334C13.5407 13.319 13.6144 13.2928 13.6543 13.2725C13.7875 13.2046 13.896 13.0961 13.9639 12.9629L13.9971 12.8682C14.0079 12.822 14.0179 12.7577 14.0254 12.6661C14.041 12.4751 14.041 12.2245 14.041 11.8409V9.77251ZM3.4668 5.26665C3.08319 5.26665 2.83257 5.26668 2.6416 5.28227C2.45792 5.29728 2.38454 5.32351 2.34473 5.34379C2.22354 5.40557 2.12394 5.50122 2.05566 5.61821C2.05373 5.62932 2.0514 5.64383 2.04883 5.66215C2.03783 5.74053 2.02735 5.85115 2.01758 5.99126C1.99814 6.26994 1.98459 6.63077 1.97559 7.01372C1.96343 7.53069 1.96026 8.07474 1.95898 8.48833C2.00287 8.49907 2.0493 8.51164 2.09863 8.52348C2.48215 8.61553 3.02514 8.73847 3.66016 8.86137C4.9372 9.10854 6.55887 9.34965 8 9.34965C9.44093 9.34962 11.062 9.1085 12.3389 8.86137C12.9737 8.7385 13.5169 8.61552 13.9004 8.52348C13.9493 8.51175 13.9955 8.49898 14.0391 8.48833C14.0378 8.07474 14.0356 7.53069 14.0234 7.01372C14.0144 6.63077 14.0009 6.26994 13.9814 5.99126C13.9717 5.85117 13.9612 5.74052 13.9502 5.66215C13.9475 5.6432 13.9444 5.62848 13.9424 5.61723C13.8741 5.50082 13.7751 5.40536 13.6543 5.34379C13.6145 5.32353 13.5409 5.29727 13.3574 5.28227C13.1665 5.26671 12.9165 5.26665 12.5332 5.26665H3.4668ZM7.375 7.73442V7.72465C7.375 7.37948 7.65482 7.09965 8 7.09965C8.34503 7.09983 8.625 7.37958 8.625 7.72465V7.73442C8.625 8.07949 8.34503 8.35924 8 8.35942C7.65482 8.35942 7.375 8.0796 7.375 7.73442ZM8 2.59965C7.34034 2.59965 7.13232 2.60514 6.97754 2.64653C6.50307 2.77367 6.13203 3.14468 6.00488 3.61919C5.981 3.70849 5.97063 3.81544 5.96484 4.01665H10.0342C10.0284 3.8154 10.018 3.70851 9.99414 3.61919C9.86702 3.14477 9.49683 2.77373 9.02246 2.64653C8.86766 2.60505 8.65998 2.59966 8 2.59965ZM15.291 11.8409C15.291 12.2037 15.2922 12.514 15.2715 12.7676C15.2502 13.0285 15.2031 13.285 15.0781 13.5303C14.8904 13.8988 14.5902 14.1981 14.2217 14.3858C13.9764 14.5107 13.7208 14.5578 13.46 14.5791C13.2063 14.5999 12.8962 14.5997 12.5332 14.5997H3.4668C3.10389 14.5997 2.79368 14.5998 2.54004 14.5791C2.27905 14.5578 2.02275 14.5108 1.77734 14.3858C1.4089 14.1981 1.10958 13.8987 0.921875 13.5303C0.796827 13.2849 0.749839 13.0286 0.728516 12.7676C0.707814 12.514 0.708008 12.2038 0.708008 11.8409V8.97465C0.708008 8.60181 0.708206 7.76501 0.726563 6.98442C0.735721 6.59503 0.749071 6.21171 0.770508 5.90434C0.781165 5.75155 0.794714 5.60812 0.811524 5.48833C0.82359 5.40234 0.849238 5.22862 0.921875 5.08598L0.99707 4.95122C1.18524 4.64429 1.45479 4.39388 1.77734 4.22954C2.0227 4.10455 2.27911 4.0575 2.54004 4.03618C2.79366 4.01548 3.10391 4.01665 3.4668 4.01665H4.71387C4.72148 3.7397 4.74113 3.50667 4.79785 3.29497C5.04064 2.3894 5.74777 1.68228 6.65332 1.4395C7.00717 1.34469 7.42024 1.34965 8 1.34965C8.57959 1.34965 8.99192 1.34471 9.3457 1.4395C10.2514 1.68221 10.9594 2.3892 11.2021 3.29497C11.2589 3.50666 11.2775 3.73971 11.2852 4.01665H12.5332C12.8962 4.01665 13.2063 4.01545 13.46 4.03618C13.7207 4.0575 13.9765 4.1047 14.2217 4.22954C14.5901 4.41727 14.8904 4.71742 15.0781 5.08598C15.1506 5.22855 15.1754 5.40238 15.1875 5.48833C15.2043 5.60812 15.2179 5.75156 15.2285 5.90434C15.25 6.21171 15.2643 6.59503 15.2734 6.98442C15.2918 7.76501 15.291 8.60181 15.291 8.97465V11.8409Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function ProjectIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M14.041 9.77251C13.6575 9.86273 13.1544 9.9762 12.5771 10.0879C11.271 10.3407 9.55874 10.5996 8 10.5997C6.44125 10.5997 4.7291 10.3408 3.42285 10.0879C2.84526 9.97614 2.34163 9.86276 1.95801 9.77251V11.8409C1.95801 12.2244 1.95804 12.4751 1.97363 12.6661C1.98864 12.8498 2.01488 12.9231 2.03516 12.9629C2.10308 13.0962 2.21151 13.2046 2.34473 13.2725L2.43945 13.3047C2.48568 13.3156 2.54989 13.3265 2.6416 13.334C2.83257 13.3496 3.0832 13.3497 3.4668 13.3497H12.5332C12.9165 13.3497 13.1665 13.3496 13.3574 13.334C13.5407 13.319 13.6144 13.2928 13.6543 13.2725C13.7875 13.2046 13.896 13.0961 13.9639 12.9629L13.9971 12.8682C14.0079 12.822 14.0179 12.7577 14.0254 12.6661C14.041 12.4751 14.041 12.2245 14.041 11.8409V9.77251ZM3.4668 5.26665C3.08319 5.26665 2.83257 5.26668 2.6416 5.28227C2.45792 5.29728 2.38454 5.32351 2.34473 5.34379C2.22354 5.40557 2.12394 5.50122 2.05566 5.61821C2.05373 5.62932 2.0514 5.64383 2.04883 5.66215C2.03783 5.74053 2.02735 5.85115 2.01758 5.99126C1.99814 6.26994 1.98459 6.63077 1.97559 7.01372C1.96343 7.53069 1.96026 8.07474 1.95898 8.48833C2.00287 8.49907 2.0493 8.51164 2.09863 8.52348C2.48215 8.61553 3.02514 8.73847 3.66016 8.86137C4.9372 9.10854 6.55887 9.34965 8 9.34965C9.44093 9.34962 11.062 9.1085 12.3389 8.86137C12.9737 8.7385 13.5169 8.61552 13.9004 8.52348C13.9493 8.51175 13.9955 8.49898 14.0391 8.48833C14.0378 8.07474 14.0356 7.53069 14.0234 7.01372C14.0144 6.63077 14.0009 6.26994 13.9814 5.99126C13.9717 5.85117 13.9612 5.74052 13.9502 5.66215C13.9475 5.6432 13.9444 5.62848 13.9424 5.61723C13.8741 5.50082 13.7751 5.40536 13.6543 5.34379C13.6145 5.32353 13.5409 5.29727 13.3574 5.28227C13.1665 5.26671 12.9165 5.26665 12.5332 5.26665H3.4668ZM7.375 7.73442V7.72465C7.375 7.37948 7.65482 7.09965 8 7.09965C8.34503 7.09983 8.625 7.37958 8.625 7.72465V7.73442C8.625 8.07949 8.34503 8.35924 8 8.35942C7.65482 8.35942 7.375 8.0796 7.375 7.73442ZM8 2.59965C7.34034 2.59965 7.13232 2.60514 6.97754 2.64653C6.50307 2.77367 6.13203 3.14468 6.00488 3.61919C5.981 3.70849 5.97063 3.81544 5.96484 4.01665H10.0342C10.0284 3.8154 10.018 3.70851 9.99414 3.61919C9.86702 3.14477 9.49683 2.77373 9.02246 2.64653C8.86766 2.60505 8.65998 2.59966 8 2.59965ZM15.291 11.8409C15.291 12.2037 15.2922 12.514 15.2715 12.7676C15.2502 13.0285 15.2031 13.285 15.0781 13.5303C14.8904 13.8988 14.5902 14.1981 14.2217 14.3858C13.9764 14.5107 13.7208 14.5578 13.46 14.5791C13.2063 14.5999 12.8962 14.5997 12.5332 14.5997H3.4668C3.10389 14.5997 2.79368 14.5998 2.54004 14.5791C2.27905 14.5578 2.02275 14.5108 1.77734 14.3858C1.4089 14.1981 1.10958 13.8987 0.921875 13.5303C0.796827 13.2849 0.749839 13.0286 0.728516 12.7676C0.707814 12.514 0.708008 12.2038 0.708008 11.8409V8.97465C0.708008 8.60181 0.708206 7.76501 0.726563 6.98442C0.735721 6.59503 0.749071 6.21171 0.770508 5.90434C0.781165 5.75155 0.794714 5.60812 0.811524 5.48833C0.82359 5.40234 0.849238 5.22862 0.921875 5.08598L0.99707 4.95122C1.18524 4.64429 1.45479 4.39388 1.77734 4.22954C2.0227 4.10455 2.27911 4.0575 2.54004 4.03618C2.79366 4.01548 3.10391 4.01665 3.4668 4.01665H4.71387C4.72148 3.7397 4.74113 3.50667 4.79785 3.29497C5.04064 2.3894 5.74777 1.68228 6.65332 1.4395C7.00717 1.34469 7.42024 1.34965 8 1.34965C8.57959 1.34965 8.99192 1.34471 9.3457 1.4395C10.2514 1.68221 10.9594 2.3892 11.2021 3.29497C11.2589 3.50666 11.2775 3.73971 11.2852 4.01665H12.5332C12.8962 4.01665 13.2063 4.01545 13.46 4.03618C13.7207 4.0575 13.9765 4.1047 14.2217 4.22954C14.5901 4.41727 14.8904 4.71742 15.0781 5.08598C15.1506 5.22855 15.1754 5.40238 15.1875 5.48833C15.2043 5.60812 15.2179 5.75156 15.2285 5.90434C15.25 6.21171 15.2643 6.59503 15.2734 6.98442C15.2918 7.76501 15.291 8.60181 15.291 8.97465V11.8409Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/icons/workspace/your-work-icon.tsx b/packages/propel/src/icons/workspace/your-work-icon.tsx
index 577d255967..edd5885f28 100644
--- a/packages/propel/src/icons/workspace/your-work-icon.tsx
+++ b/packages/propel/src/icons/workspace/your-work-icon.tsx
@@ -3,15 +3,17 @@ import * as React from "react";
 import { IconWrapper } from "../icon-wrapper";
 import type { ISvgIcons } from "../type";
 
-export const YourWorkIcon: React.FC<ISvgIcons> = ({ color = "currentColor", ...rest }) => (
-  <IconWrapper color={color} {...rest}>
-    <path
-      d="M0.7083 14C0.7083 13.1154 0.701518 12.5344 0.849901 12.0449C1.16902 10.9929 1.99225 10.1687 3.04424 9.84961C3.53385 9.70109 4.11539 9.70801 5.00029 9.70801H8.00029C8.34521 9.70818 8.62512 9.98809 8.62529 10.333C8.62529 10.6781 8.34532 10.9578 8.00029 10.958H5.00029C4.0248 10.958 3.67493 10.9649 3.40752 11.0459C2.75503 11.2438 2.24415 11.7548 2.04619 12.4072C1.96506 12.6747 1.9583 13.0242 1.9583 14C1.9583 14.3452 1.67848 14.625 1.3333 14.625C0.988122 14.625 0.7083 14.3452 0.7083 14ZM9.04131 5C9.04131 3.68832 7.97798 2.625 6.66631 2.625C5.35478 2.62518 4.29131 3.68843 4.29131 5C4.29131 6.31157 5.35478 7.37482 6.66631 7.375C7.97798 7.375 9.04131 6.31168 9.04131 5ZM10.2913 5C10.2913 7.00203 8.66834 8.625 6.66631 8.625C4.66442 8.62482 3.04131 7.00192 3.04131 5C3.04131 2.99808 4.66442 1.37518 6.66631 1.375C8.66834 1.375 10.2913 2.99797 10.2913 5Z"
-      fill={color}
-    />
-    <path
-      d="M11.6338 9.27539C11.9026 9.27559 12.1415 9.44806 12.2265 9.70312L13.0332 12.124L13.1406 11.8027L13.1797 11.7109C13.2861 11.5072 13.4981 11.375 13.7334 11.375H14.667C15.0119 11.3752 15.2917 11.6551 15.292 12C15.292 12.3451 15.012 12.6248 14.667 12.625H14.1836L13.6259 14.2979C13.5409 14.5531 13.3022 14.7256 13.0332 14.7256C12.7642 14.7255 12.5255 14.553 12.4404 14.2979L11.6328 11.877L11.5263 12.1982C11.4412 12.4533 11.2024 12.6249 10.9336 12.625H9.99997C9.65479 12.625 9.37497 12.3452 9.37497 12C9.37518 11.655 9.65492 11.375 9.99997 11.375H10.4834L11.04 9.70312C11.1251 9.44791 11.3647 9.27539 11.6338 9.27539Z"
-      fill={color}
-    />
-  </IconWrapper>
-);
+export function YourWorkIcon({ color = "currentColor", ...rest }: ISvgIcons) {
+  return (
+    <IconWrapper color={color} {...rest}>
+      <path
+        d="M0.7083 14C0.7083 13.1154 0.701518 12.5344 0.849901 12.0449C1.16902 10.9929 1.99225 10.1687 3.04424 9.84961C3.53385 9.70109 4.11539 9.70801 5.00029 9.70801H8.00029C8.34521 9.70818 8.62512 9.98809 8.62529 10.333C8.62529 10.6781 8.34532 10.9578 8.00029 10.958H5.00029C4.0248 10.958 3.67493 10.9649 3.40752 11.0459C2.75503 11.2438 2.24415 11.7548 2.04619 12.4072C1.96506 12.6747 1.9583 13.0242 1.9583 14C1.9583 14.3452 1.67848 14.625 1.3333 14.625C0.988122 14.625 0.7083 14.3452 0.7083 14ZM9.04131 5C9.04131 3.68832 7.97798 2.625 6.66631 2.625C5.35478 2.62518 4.29131 3.68843 4.29131 5C4.29131 6.31157 5.35478 7.37482 6.66631 7.375C7.97798 7.375 9.04131 6.31168 9.04131 5ZM10.2913 5C10.2913 7.00203 8.66834 8.625 6.66631 8.625C4.66442 8.62482 3.04131 7.00192 3.04131 5C3.04131 2.99808 4.66442 1.37518 6.66631 1.375C8.66834 1.375 10.2913 2.99797 10.2913 5Z"
+        fill={color}
+      />
+      <path
+        d="M11.6338 9.27539C11.9026 9.27559 12.1415 9.44806 12.2265 9.70312L13.0332 12.124L13.1406 11.8027L13.1797 11.7109C13.2861 11.5072 13.4981 11.375 13.7334 11.375H14.667C15.0119 11.3752 15.2917 11.6551 15.292 12C15.292 12.3451 15.012 12.6248 14.667 12.625H14.1836L13.6259 14.2979C13.5409 14.5531 13.3022 14.7256 13.0332 14.7256C12.7642 14.7255 12.5255 14.553 12.4404 14.2979L11.6328 11.877L11.5263 12.1982C11.4412 12.4533 11.2024 12.6249 10.9336 12.625H9.99997C9.65479 12.625 9.37497 12.3452 9.37497 12C9.37518 11.655 9.65492 11.375 9.99997 11.375H10.4834L11.04 9.70312C11.1251 9.44791 11.3647 9.27539 11.6338 9.27539Z"
+        fill={color}
+      />
+    </IconWrapper>
+  );
+}
diff --git a/packages/propel/src/input/input.stories.tsx b/packages/propel/src/input/input.stories.tsx
index 76648eaf89..d41a876916 100644
--- a/packages/propel/src/input/input.stories.tsx
+++ b/packages/propel/src/input/input.stories.tsx
@@ -48,11 +48,11 @@ const createShowcaseStory = (
   render: () => (
     <div className="space-y-4 w-[400px]">
       <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-11 text-gray-500">{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 04034b9391..b7b655c1f4 100644
--- a/packages/propel/src/input/input.tsx
+++ b/packages/propel/src/input/input.tsx
@@ -9,7 +9,7 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
   hasError?: boolean;
 }
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+const Input = React.forwardRef(function Input(props: InputProps, ref: React.ForwardedRef<HTMLInputElement>) {
   const {
     id,
     type,
@@ -29,12 +29,12 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
       type={type}
       name={name}
       className={cn(
-        "block rounded-md bg-transparent text-sm placeholder-custom-text-400 focus:outline-none",
+        "block rounded-md bg-layer-2 text-13 placeholder-tertiary border-subtle-1 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",
+          "rounded-sm border-none bg-transparent ring-0": mode === "true-transparent",
           "border-red-500": hasError,
           "px-1.5 py-1": inputSize === "xs",
           "px-3 py-2": inputSize === "sm",
diff --git a/packages/propel/src/menu/menu.stories.tsx b/packages/propel/src/menu/menu.stories.tsx
index 9af39a0c5b..c23d01ad16 100644
--- a/packages/propel/src/menu/menu.stories.tsx
+++ b/packages/propel/src/menu/menu.stories.tsx
@@ -142,7 +142,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">Custom Button</button>
         }
       >
         <Menu.MenuItem onClick={() => alert("Option 1")}>Option 1</Menu.MenuItem>
@@ -161,7 +161,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 +209,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="ml-auto rounded-sm bg-red-500 px-2 py-0.5 text-11 text-on-color">3</span>
           </div>
         </Menu.MenuItem>
         <Menu.MenuItem onClick={() => alert("Help")}>
@@ -220,7 +220,7 @@ 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>
@@ -243,7 +243,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 c0cb4e09b3..586b197be0 100644
--- a/packages/propel/src/menu/menu.tsx
+++ b/packages/propel/src/menu/menu.tsx
@@ -18,7 +18,7 @@ const SubMenuContext = React.createContext<{ closeSubmenu: () => void } | null>(
 const useSubMenu = () => React.useContext(SubMenuContext);
 
 // SubMenu implementation
-const SubMenu: React.FC<TSubMenuProps> = (props) => {
+function SubMenu(props: TSubMenuProps) {
   const { children, trigger, disabled = false, className = "" } = props;
 
   return (
@@ -34,9 +34,9 @@ const SubMenu: React.FC<TSubMenuProps> = (props) => {
       </BaseMenu.Portal>
     </BaseMenu.SubmenuRoot>
   );
-};
+}
 
-const MenuItem: React.FC<TMenuItemProps> = (props) => {
+function MenuItem(props: TMenuItemProps) {
   const { children, disabled = false, onClick, className } = props;
   const submenuContext = useSubMenu();
 
@@ -44,9 +44,9 @@ const MenuItem: React.FC<TMenuItemProps> = (props) => {
     <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 focus:bg-custom-background-80",
+        "w-full select-none truncate rounded-sm px-1 py-1.5 text-left text-secondary hover:bg-layer-1 cursor-pointer outline-none",
         {
-          "text-custom-text-400": disabled,
+          "text-placeholder": disabled,
         },
         className
       )}
@@ -59,7 +59,7 @@ const MenuItem: React.FC<TMenuItemProps> = (props) => {
       {children}
     </BaseMenu.Item>
   );
-};
+}
 
 function Menu(props: TMenuProps) {
   const {
@@ -142,8 +142,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 +153,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 whitespace-nowrap rounded-md px-2.5 py-1 text-11 duration-300 outline-none ${
+                isOpen ? "bg-surface-2 text-primary" : "text-secondary"
+              } ${noBorder ? "" : "border border-strong shadow-sm focus:outline-none"} ${
+                disabled ? "cursor-not-allowed text-secondary" : "cursor-pointer hover:bg-layer-1"
               } ${buttonClassName}`}
               onClick={handleMenuButtonClick}
               tabIndex={customButtonTabIndex}
@@ -180,7 +180,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 overflow-y-scroll rounded-md border-[0.5px] border-strong bg-surface-1 px-2 py-2.5 text-11 shadow-raised-200 focus:outline-none min-w-[12rem] whitespace-nowrap",
               {
                 "max-h-60": maxHeight === "lg",
                 "max-h-48": maxHeight === "md",
diff --git a/packages/propel/src/pill/pill.stories.tsx b/packages/propel/src/pill/pill.stories.tsx
index 00fc405f34..0c03afb107 100644
--- a/packages/propel/src/pill/pill.stories.tsx
+++ b/packages/propel/src/pill/pill.stories.tsx
@@ -125,7 +125,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 f9c58bc9fe..262e4f141a 100644
--- a/packages/propel/src/pill/pill.tsx
+++ b/packages/propel/src/pill/pill.tsx
@@ -17,6 +17,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,11 +38,12 @@ 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.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-green-700 border border-green-200",
   [EPillVariant.WARNING]: "bg-amber-50 text-amber-700 border border-amber-200",
   [EPillVariant.ERROR]: "bg-red-50 text-red-700 border border-red-200",
@@ -43,14 +51,29 @@ const pillVariants = {
 };
 
 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 Pill = React.forwardRef<HTMLSpanElement, PillProps>(
-  ({ variant = EPillVariant.DEFAULT, size = EPillSize.MD, className, children, ...props }, ref) => (
+const pillRadius = {
+  [ERadius.SQUARE]: "rounded",
+  [ERadius.CIRCLE]: "rounded-full",
+};
+
+const Pill = React.forwardRef(function Pill(
+  {
+    variant = EPillVariant.DEFAULT,
+    size = EPillSize.MD,
+    radius = ERadius.CIRCLE,
+    className,
+    children,
+    ...props
+  }: PillProps,
+  ref: React.ForwardedRef<HTMLSpanElement>
+) {
+  return (
     <span
       ref={ref}
       className={cn(
@@ -60,14 +83,16 @@ const Pill = React.forwardRef<HTMLSpanElement, PillProps>(
         pillVariants[variant],
         // Size styles
         pillSizes[size],
+        // Radius styles
+        pillRadius[radius],
         className
       )}
       {...props}
     >
       {children}
     </span>
-  )
-);
+  );
+});
 
 Pill.displayName = "Pill";
 
diff --git a/packages/propel/src/popover/popover.stories.tsx b/packages/propel/src/popover/popover.stories.tsx
index 2a0d60c0a6..a35707eb4c 100644
--- a/packages/propel/src/popover/popover.stories.tsx
+++ b/packages/propel/src/popover/popover.stories.tsx
@@ -27,12 +27,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">
           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>
+          <h3 className="text-13 font-semibold">Popover Title</h3>
+          <p className="mt-2 text-13 text-gray-600">This is the popover content. You can put any content here.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -55,25 +55,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="rounded-sm bg-blue-500 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="rounded-sm bg-gray-500 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="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">
             Controlled Popover
           </Popover.Button>
           <Popover.Panel className="w-64 rounded-lg border border-gray-200 bg-white p-4 shadow-lg">
             <div className="flex items-start justify-between">
-              <h3 className="text-sm font-semibold">Controlled State</h3>
+              <h3 className="text-13 font-semibold">Controlled State</h3>
               <button onClick={() => setOpen(false)} className="rounded-full p-1 hover:bg-gray-100">
                 <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="mt-2 text-13 text-gray-600">Current state: {open ? "Open" : "Closed"}</p>
           </Popover.Panel>
         </Popover>
       </div>
@@ -86,12 +86,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">
           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>
+          <h3 className="text-13 font-semibold">Top Positioned</h3>
+          <p className="mt-2 text-13 text-gray-600">This popover appears above the button.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -103,12 +103,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">
           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>
+          <h3 className="text-13 font-semibold">Bottom Positioned</h3>
+          <p className="mt-2 text-13 text-gray-600">This popover appears below the button.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -120,12 +120,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">
           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>
+          <h3 className="text-13 font-semibold">Left Positioned</h3>
+          <p className="mt-2 text-13 text-gray-600">This popover appears to the left of the button.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -137,12 +137,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">
           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>
+          <h3 className="text-13 font-semibold">Right Positioned</h3>
+          <p className="mt-2 text-13 text-gray-600">This popover appears to the right of the button.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -154,12 +154,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">
           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>
+          <h3 className="text-13 font-semibold">Start Aligned</h3>
+          <p className="mt-2 text-13 text-gray-600">This popover is aligned to the start.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -171,12 +171,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">
           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>
+          <h3 className="text-13 font-semibold">End Aligned</h3>
+          <p className="mt-2 text-13 text-gray-600">This popover is aligned to the end.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -188,12 +188,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">
           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>
+          <h3 className="text-13 font-semibold">Custom Side Offset</h3>
+          <p className="mt-2 text-13 text-gray-600">This popover has a custom side offset of 20px.</p>
         </Popover.Panel>
       </Popover>
     );
@@ -210,31 +210,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">
           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>
+          <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="block text-11 font-medium text-gray-700">
                 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="mt-1 w-full rounded-sm border border-gray-300 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="block text-11 font-medium text-gray-700">
                 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="mt-1 w-full rounded-sm border border-gray-300 px-2 py-1.5 text-13"
                 placeholder="Enter email"
               />
             </div>
@@ -242,11 +242,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="rounded-sm bg-gray-200 px-3 py-1.5 text-11 hover:bg-gray-300"
               >
                 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="rounded-sm bg-blue-500 px-3 py-1.5 text-11 text-on-color hover:bg-blue-600"
+              >
                 Submit
               </button>
             </div>
@@ -262,15 +265,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color hover:bg-blue-600">
           Show Options
         </Popover.Button>
         <Popover.Panel className="w-56 rounded-lg border border-gray-200 bg-white shadow-lg">
           <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="px-2 py-1.5 text-11 font-semibold text-gray-500">Options</h3>
+            <button className="w-full rounded-sm px-2 py-1.5 text-left text-13 hover:bg-gray-100">Option 1</button>
+            <button className="w-full rounded-sm px-2 py-1.5 text-left text-13 hover:bg-gray-100">Option 2</button>
+            <button className="w-full rounded-sm px-2 py-1.5 text-left text-13 hover:bg-gray-100">Option 3</button>
           </div>
         </Popover.Panel>
       </Popover>
@@ -285,18 +288,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="flex items-center gap-2 rounded-sm border border-gray-300 bg-white px-4 py-2 hover:bg-gray-50">
+          <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>
+          <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 e5e46fa149..d7d9ac40b8 100644
--- a/packages/propel/src/popover/root.tsx
+++ b/packages/propel/src/popover/root.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import { memo, useMemo } from "react";
 import { Popover as BasePopover } from "@base-ui-components/react/popover";
 import type { TPlacement, TSide, TAlign } from "../utils/placement";
 import { convertPlacementToSideAndAlign } from "../utils/placement";
@@ -13,7 +13,7 @@ export interface PopoverContentProps extends React.ComponentProps<typeof BasePop
 }
 
 // PopoverContent component
-const PopoverContent = React.memo<PopoverContentProps>(function PopoverContent({
+const PopoverContent = memo(function PopoverContent({
   children,
   className,
   placement,
@@ -23,9 +23,9 @@ const PopoverContent = React.memo<PopoverContentProps>(function PopoverContent({
   containerRef,
   positionerClassName,
   ...props
-}) {
+}: PopoverContentProps) {
   // side and align calculations
-  const { finalSide, finalAlign } = React.useMemo(() => {
+  const { finalSide, finalAlign } = useMemo(() => {
     if (placement) {
       const converted = convertPlacementToSideAndAlign(placement);
       return { finalSide: converted.side, finalAlign: converted.align };
@@ -45,23 +45,21 @@ const PopoverContent = React.memo<PopoverContentProps>(function PopoverContent({
 });
 
 // wrapper components
-const PopoverTrigger = React.memo<React.ComponentProps<typeof BasePopover.Trigger>>(function PopoverTrigger(props) {
+const PopoverTrigger = memo(function PopoverTrigger(props: React.ComponentProps<typeof BasePopover.Trigger>) {
   return <BasePopover.Trigger data-slot="popover-trigger" {...props} />;
 });
 
-const PopoverPortal = React.memo<React.ComponentProps<typeof BasePopover.Portal>>(function PopoverPortal(props) {
+const PopoverPortal = memo(function PopoverPortal(props: React.ComponentProps<typeof BasePopover.Portal>) {
   return <BasePopover.Portal data-slot="popover-portal" {...props} />;
 });
 
-const PopoverPositioner = React.memo<React.ComponentProps<typeof BasePopover.Positioner>>(
-  function PopoverPositioner(props) {
-    return <BasePopover.Positioner data-slot="popover-positioner" {...props} />;
-  }
-);
+const PopoverPositioner = memo(function PopoverPositioner(props: React.ComponentProps<typeof BasePopover.Positioner>) {
+  return <BasePopover.Positioner data-slot="popover-positioner" {...props} />;
+});
 
 // compound components
 const Popover = Object.assign(
-  React.memo<React.ComponentProps<typeof BasePopover.Root>>(function Popover(props) {
+  memo(function Popover(props: React.ComponentProps<typeof BasePopover.Root>) {
     return <BasePopover.Root data-slot="popover" {...props} />;
   }),
   {
diff --git a/packages/propel/src/portal/modal-portal.tsx b/packages/propel/src/portal/modal-portal.tsx
index 0d716159ec..8aa9663d9e 100644
--- a/packages/propel/src/portal/modal-portal.tsx
+++ b/packages/propel/src/portal/modal-portal.tsx
@@ -26,7 +26,7 @@ import type { ModalPortalProps } from "./types";
  * @param closeOnOverlayClick - Whether clicking overlay closes modal
  * @param closeOnEscape - Whether pressing Escape closes modal
  */
-export const ModalPortal: React.FC<ModalPortalProps> = ({
+export function ModalPortal({
   children,
   isOpen,
   onClose,
@@ -40,7 +40,7 @@ export const ModalPortal: React.FC<ModalPortalProps> = ({
   showOverlay = true,
   closeOnOverlayClick = true,
   closeOnEscape = true,
-}) => {
+}: ModalPortalProps) {
   const contentRef = useRef<HTMLDivElement>(null);
 
   // Memoized overlay click handler
@@ -95,7 +95,7 @@ export const ModalPortal: React.FC<ModalPortalProps> = ({
     >
       {showOverlay && (
         <div
-          className={cn("absolute inset-0 bg-black bg-opacity-50 transition-opacity duration-300", overlayClassName)}
+          className={cn("absolute inset-0 bg-alpha-black-700 transition-opacity duration-300", overlayClassName)}
           onClick={handleOverlayClick}
           aria-hidden="true"
         />
@@ -107,4 +107,4 @@ export const ModalPortal: React.FC<ModalPortalProps> = ({
   );
 
   return <PortalWrapper portalId={portalId}>{content}</PortalWrapper>;
-};
+}
diff --git a/packages/propel/src/portal/portal-wrapper.tsx b/packages/propel/src/portal/portal-wrapper.tsx
index d2a8306d71..7f1c08860a 100644
--- a/packages/propel/src/portal/portal-wrapper.tsx
+++ b/packages/propel/src/portal/portal-wrapper.tsx
@@ -14,14 +14,14 @@ import type { PortalWrapperProps } from "./types";
  * @param onMount - Callback fired when portal is mounted
  * @param onUnmount - Callback fired when portal is unmounted
  */
-export const PortalWrapper: React.FC<PortalWrapperProps> = ({
+export function PortalWrapper({
   children,
   portalId = DEFAULT_PORTAL_ID,
   fallbackToDocument = true,
   className,
   onMount,
   onUnmount,
-}) => {
+}: PortalWrapperProps) {
   const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
   const [isMounted, setIsMounted] = useState(false);
 
@@ -73,4 +73,4 @@ export const PortalWrapper: React.FC<PortalWrapperProps> = ({
   }
 
   return null;
-};
+}
diff --git a/packages/propel/src/portal/portal.stories.tsx b/packages/propel/src/portal/portal.stories.tsx
index 3a3dd794d7..802e35c87a 100644
--- a/packages/propel/src/portal/portal.stories.tsx
+++ b/packages/propel/src/portal/portal.stories.tsx
@@ -40,7 +40,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 // Helper component for interactive stories
-const ModalDemo = ({
+function ModalDemo({
   children,
   buttonText = "Open Modal",
   buttonVariant = "primary",
@@ -48,7 +48,7 @@ const ModalDemo = ({
 }: Omit<Parameters<typeof ModalPortal>[0], "isOpen" | "onClose"> & {
   buttonText?: string;
   buttonVariant?: TButtonVariant;
-}) => {
+}) {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
@@ -61,9 +61,9 @@ const ModalDemo = ({
       </ModalPortal>
     </>
   );
-};
+}
 
-const ModalContent = ({
+function ModalContent({
   title = "Modal Title",
   showCloseButton = true,
   description = "This is a modal portal component with full accessibility support. Try pressing Tab to navigate through elements or Escape to close.",
@@ -73,34 +73,36 @@ const ModalContent = ({
   showCloseButton?: boolean;
   description?: string;
   onClose?: () => void;
-}) => (
-  <div className="flex flex-col h-full bg-white">
-    <div className="flex items-center justify-between p-6 border-b border-gray-200">
-      <div>
-        <h2 className="text-xl font-semibold text-gray-900">{title}</h2>
-        <p className="text-sm text-gray-500 mt-1">Modal demonstration</p>
+}) {
+  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>
+          <h2 className="text-18 font-semibold text-gray-900">{title}</h2>
+          <p className="text-13 text-gray-500 mt-1">Modal demonstration</p>
+        </div>
+        {showCloseButton && onClose && (
+          <Button variant="ghost" onClick={onClose} aria-label="Close modal">
+            ✕
+          </Button>
+        )}
       </div>
-      {showCloseButton && onClose && (
-        <Button variant="link-neutral" size="sm" onClick={onClose} aria-label="Close modal">
-          ✕
-        </Button>
-      )}
-    </div>
-    <div className="flex-1 p-6 overflow-y-auto">
-      <p className="text-gray-600 mb-6">{description}</p>
+      <div className="flex-1 p-6 overflow-y-auto">
+        <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">
-            <li>• ESC key closes the modal</li>
-            <li>• Click outside overlay to close</li>
-          </ul>
+        <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-13 text-gray-600 space-y-1">
+              <li>• ESC key closes the modal</li>
+              <li>• Click outside overlay to close</li>
+            </ul>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-);
+  );
+}
 
 export const Default: Story = {};
 
@@ -113,7 +115,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
@@ -144,7 +146,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
@@ -172,7 +174,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="fixed top-4 right-4 p-4 bg-blue-500 text-on-color rounded-sm shadow-lg z-50">
             This content is rendered in a portal!
           </div>
         </PortalWrapper>
diff --git a/packages/propel/src/scrollarea/scrollarea.stories.tsx b/packages/propel/src/scrollarea/scrollarea.stories.tsx
index 1841bc99e1..4714a1283f 100644
--- a/packages/propel/src/scrollarea/scrollarea.stories.tsx
+++ b/packages/propel/src/scrollarea/scrollarea.stories.tsx
@@ -28,7 +28,7 @@ export const Default: Story = {
     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>
+          <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
@@ -66,19 +66,19 @@ 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>
+          <div className="text-13 font-medium">Small</div>
           <ScrollArea className="h-48 w-80 border rounded-lg" size="sm">
             {content}
           </ScrollArea>
         </div>
         <div className="space-y-2">
-          <div className="text-sm font-medium">Medium</div>
+          <div className="text-13 font-medium">Medium</div>
           <ScrollArea className="h-48 w-80 border rounded-lg" size="md">
             {content}
           </ScrollArea>
         </div>
         <div className="space-y-2">
-          <div className="text-sm font-medium">Large</div>
+          <div className="text-13 font-medium">Large</div>
           <ScrollArea className="h-48 w-80 border rounded-lg" size="lg">
             {content}
           </ScrollArea>
@@ -93,7 +93,7 @@ export const ScrollTypeAlways: Story = {
     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>
+          <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>
           ))}
@@ -108,8 +108,8 @@ export const ScrollTypeScroll: Story = {
     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>
+          <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>
           ))}
@@ -124,8 +124,8 @@ export const ScrollTypeHover: Story = {
     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>
+          <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>
           ))}
@@ -141,10 +141,7 @@ export const HorizontalScroll: Story = {
       <ScrollArea className="h-32 w-96 border rounded-lg" orientation="horizontal">
         <div className="flex gap-4 p-4 w-[1200px]">
           {[...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-shrink-0 w-32 h-20 bg-layer-1 rounded-sm flex items-center justify-center">
               Item {i + 1}
             </div>
           ))}
@@ -159,8 +156,8 @@ export const BothDirections: Story = {
     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>
+          <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
@@ -178,19 +175,19 @@ export const ListExample: Story = {
     return (
       <ScrollArea className="h-80 w-96 border rounded-lg">
         <div className="p-4">
-          <h3 className="text-lg font-semibold mb-4">User List</h3>
+          <h3 className="text-16 font-semibold mb-4">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 items-center gap-3 p-3 bg-layer-1 rounded-sm hover:bg-surface-2 cursor-pointer"
               >
-                <div className="w-10 h-10 rounded-full bg-custom-primary-100 flex items-center justify-center text-white font-medium">
+                <div className="w-10 h-10 rounded-full bg-accent-primary flex items-center justify-center text-on-color font-medium">
                   {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 +232,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 border rounded-lg bg-surface-1">
+        <pre className="p-4 text-13">
           <code>{code}</code>
         </pre>
       </ScrollArea>
@@ -252,11 +249,9 @@ export const ChatMessages: Story = {
           {[...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%] p-3 rounded-lg ${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>
@@ -272,7 +267,7 @@ export const DataTable: Story = {
     return (
       <ScrollArea className="h-96 w-full max-w-3xl border rounded-lg">
         <table className="w-full">
-          <thead className="bg-custom-background-80 sticky top-0">
+          <thead className="bg-layer-1 sticky top-0">
             <tr>
               <th className="px-4 py-2 text-left">ID</th>
               <th className="px-4 py-2 text-left">Name</th>
@@ -282,13 +277,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={`px-2 py-1 rounded-sm text-11 ${i % 3 === 0 ? "bg-green-500/20 text-green-500" : "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 e15d02e121..d942794a99 100644
--- a/packages/propel/src/scrollarea/scrollarea.tsx
+++ b/packages/propel/src/scrollarea/scrollarea.tsx
@@ -54,9 +54,9 @@ const verticalSizeStyles = {
 } as const;
 
 const thumbSizeStyles = {
-  sm: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-11 before:min-w-11 before:-translate-x-1/2 before:-translate-y-1/2",
-  md: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-14 before:min-w-14 before:-translate-x-1/2 before:-translate-y-1/2",
-  lg: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-17 before:min-w-17 before:-translate-x-1/2 before:-translate-y-1/2",
+  sm: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-11 before:-translate-x-1/2 before:-translate-y-1/2",
+  md: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-14 before:-translate-x-1/2 before:-translate-y-1/2",
+  lg: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-17 before:-translate-x-1/2 before:-translate-y-1/2",
 } as const;
 
 interface ScrollBarProps extends React.ComponentProps<typeof BaseScrollArea.Scrollbar> {
@@ -76,12 +76,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 +89,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 1484ce8f32..6d5168bb3d 100644
--- a/packages/propel/src/separator/separator.stories.tsx
+++ b/packages/propel/src/separator/separator.stories.tsx
@@ -43,12 +43,12 @@ export const WithinContainer: Story = {
       <div className="w-[300px] rounded-lg border p-6 space-y-4">
         <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>
+          <p className="text-13 text-muted-foreground">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>
+          <p className="text-13 text-muted-foreground">Description for section 2</p>
         </div>
       </div>
     );
diff --git a/packages/propel/src/separator/separator.tsx b/packages/propel/src/separator/separator.tsx
index 5e02309dcd..7b6a8681ed 100644
--- a/packages/propel/src/separator/separator.tsx
+++ b/packages/propel/src/separator/separator.tsx
@@ -10,18 +10,21 @@ interface SeparatorProps extends React.ComponentProps<typeof SeparatorPrimitive>
   orientation?: "horizontal" | "vertical";
 }
 
-const Separator = React.forwardRef<React.ElementRef<typeof SeparatorPrimitive>, SeparatorProps>(
-  ({ orientation = "horizontal", ...props }, ref) => (
+const Separator = React.forwardRef(function Separator(
+  { orientation = "horizontal", className, ...props }: SeparatorProps,
+  ref: React.ForwardedRef<React.ElementRef<typeof SeparatorPrimitive>>
+) {
+  return (
     <SeparatorPrimitive
       ref={ref}
       orientation={orientation}
       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)}
     />
-  )
-);
+  );
+});
 
 Separator.displayName = "Separator";
 
diff --git a/packages/propel/src/skeleton/root.tsx b/packages/propel/src/skeleton/root.tsx
index dee2c27f06..2a3130311b 100644
--- a/packages/propel/src/skeleton/root.tsx
+++ b/packages/propel/src/skeleton/root.tsx
@@ -8,11 +8,13 @@ type SkeletonProps = {
   ariaLabel?: string;
 };
 
-const SkeletonRoot = ({ children, className = "", ariaLabel = "Loading content" }: SkeletonProps) => (
-  <div data-slot="skeleton" className={cn("animate-pulse", className)} role="status" aria-label={ariaLabel}>
-    {children}
-  </div>
-);
+function SkeletonRoot({ children, className = "", ariaLabel = "Loading content" }: SkeletonProps) {
+  return (
+    <div data-slot="skeleton" className={cn("animate-pulse", className)} role="status" aria-label={ariaLabel}>
+      {children}
+    </div>
+  );
+}
 
 type ItemProps = {
   height?: string;
@@ -20,17 +22,13 @@ type ItemProps = {
   className?: string;
 };
 
-const SkeletonItem: React.FC<ItemProps> = ({ height = "auto", width = "auto", className = "" }) => (
-  <div
-    data-slot="skeleton-item"
-    className={cn("rounded-md bg-custom-background-80", className)}
-    style={{ height, width }}
-  />
-);
+function SkeletonItem({ height = "auto", width = "auto", className = "" }: ItemProps) {
+  return <div data-slot="skeleton-item" className={cn("rounded-md bg-layer-1", className)} style={{ height, width }} />;
+}
 
 const Skeleton = Object.assign(SkeletonRoot, { Item: SkeletonItem });
 
 SkeletonRoot.displayName = "plane-ui-skeleton";
 SkeletonItem.displayName = "plane-ui-skeleton-item";
 
-export { Skeleton };
+export { Skeleton, SkeletonRoot, SkeletonItem };
diff --git a/packages/propel/src/spinners/circular-bar-spinner.stories.tsx b/packages/propel/src/spinners/circular-bar-spinner.stories.tsx
index 4a76d4a841..e32cfacffc 100644
--- a/packages/propel/src/spinners/circular-bar-spinner.stories.tsx
+++ b/packages/propel/src/spinners/circular-bar-spinner.stories.tsx
@@ -59,23 +59,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="mt-2 text-11 text-gray-600">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="mt-2 text-11 text-gray-600">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="mt-2 text-11 text-gray-600">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="mt-2 text-11 text-gray-600">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="mt-2 text-11 text-gray-600">XL</p>
         </div>
       </div>
     );
@@ -88,23 +88,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="mt-2 text-11 text-gray-600">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>
+          <p className="mt-2 text-11 text-gray-600">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>
+          <p className="mt-2 text-11 text-gray-600">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="mt-2 text-11 text-gray-600">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="mt-2 text-11 text-gray-600">Orange</p>
         </div>
       </div>
     );
@@ -114,7 +114,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="flex items-center gap-2 rounded-sm bg-green-500 px-4 py-2 text-on-color">
         <CircularBarSpinner height="16px" width="16px" />
         <span>Processing...</span>
       </button>
@@ -128,7 +128,7 @@ export const CenteredInCard: Story = {
       <div className="w-96 rounded-lg border border-gray-200 bg-white p-8 shadow-md">
         <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-13 text-gray-600">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 fb773397a8..ab6b002eda 100644
--- a/packages/propel/src/spinners/circular-bar-spinner.tsx
+++ b/packages/propel/src/spinners/circular-bar-spinner.tsx
@@ -6,30 +6,28 @@ export interface ICircularBarSpinner extends React.SVGAttributes<SVGElement> {
   className?: string | undefined;
 }
 
-export const CircularBarSpinner: React.FC<ICircularBarSpinner> = ({
-  height = "16px",
-  width = "16px",
-  className = "",
-}) => (
-  <div role="status">
-    <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" className={className}>
-      <g>
-        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.14} />
-        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.29} transform="rotate(30 12 12)" />
-        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.43} transform="rotate(60 12 12)" />
-        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.57} transform="rotate(90 12 12)" />
-        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.71} transform="rotate(120 12 12)" />
-        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.86} transform="rotate(150 12 12)" />
-        <rect width={2} height={5} x={11} y={1} fill="currentColor" transform="rotate(180 12 12)" />
-        <animateTransform
-          attributeName="transform"
-          calcMode="discrete"
-          dur="0.75s"
-          repeatCount="indefinite"
-          type="rotate"
-          values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12"
-        />
-      </g>
-    </svg>
-  </div>
-);
+export function CircularBarSpinner({ height = "16px", width = "16px", className = "" }: ICircularBarSpinner) {
+  return (
+    <div role="status">
+      <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" className={className}>
+        <g>
+          <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.14} />
+          <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.29} transform="rotate(30 12 12)" />
+          <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.43} transform="rotate(60 12 12)" />
+          <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.57} transform="rotate(90 12 12)" />
+          <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.71} transform="rotate(120 12 12)" />
+          <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.86} transform="rotate(150 12 12)" />
+          <rect width={2} height={5} x={11} y={1} fill="currentColor" transform="rotate(180 12 12)" />
+          <animateTransform
+            attributeName="transform"
+            calcMode="discrete"
+            dur="0.75s"
+            repeatCount="indefinite"
+            type="rotate"
+            values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12"
+          />
+        </g>
+      </svg>
+    </div>
+  );
+}
diff --git a/packages/propel/src/spinners/circular-spinner.stories.tsx b/packages/propel/src/spinners/circular-spinner.stories.tsx
index fec8b05a8e..42d88dc5b0 100644
--- a/packages/propel/src/spinners/circular-spinner.stories.tsx
+++ b/packages/propel/src/spinners/circular-spinner.stories.tsx
@@ -59,23 +59,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="mt-2 text-11 text-gray-600">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="mt-2 text-11 text-gray-600">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="mt-2 text-11 text-gray-600">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="mt-2 text-11 text-gray-600">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="mt-2 text-11 text-gray-600">XL</p>
         </div>
       </div>
     );
@@ -88,23 +88,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="mt-2 text-11 text-gray-600">Blue</p>
         </div>
         <div className="text-center">
           <Spinner className="text-green-500" />
-          <p className="mt-2 text-xs text-gray-600">Green</p>
+          <p className="mt-2 text-11 text-gray-600">Green</p>
         </div>
         <div className="text-center">
           <Spinner className="text-red-500" />
-          <p className="mt-2 text-xs text-gray-600">Red</p>
+          <p className="mt-2 text-11 text-gray-600">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="mt-2 text-11 text-gray-600">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="mt-2 text-11 text-gray-600">Orange</p>
         </div>
       </div>
     );
@@ -114,7 +114,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="flex items-center gap-2 rounded-sm bg-blue-500 px-4 py-2 text-on-color">
         <Spinner height="16px" width="16px" />
         <span>Loading...</span>
       </button>
@@ -128,7 +128,7 @@ export const CenteredInCard: Story = {
       <div className="w-96 rounded-lg border border-gray-200 bg-white p-8 shadow-md">
         <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-13 text-gray-600">Loading content...</p>
         </div>
       </div>
     );
diff --git a/packages/propel/src/spinners/circular-spinner.tsx b/packages/propel/src/spinners/circular-spinner.tsx
index 21dc1cb629..5b12166d76 100644
--- a/packages/propel/src/spinners/circular-spinner.tsx
+++ b/packages/propel/src/spinners/circular-spinner.tsx
@@ -8,26 +8,28 @@ export interface ISpinner extends React.SVGAttributes<SVGElement> {
   className?: string | undefined;
 }
 
-export const Spinner: React.FC<ISpinner> = ({ height = "32px", width = "32px", className = "" }) => (
-  <div role="status">
-    <svg
-      aria-hidden="true"
-      height={height}
-      width={width}
-      className={clsx("animate-spin text-custom-text-200", className)}
-      viewBox="0 0 100 101"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-        fill="currentColor"
-      />
-      <path
-        className="fill-custom-primary-100"
-        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>
-    <span className="sr-only">Loading...</span>
-  </div>
-);
+export function Spinner({ height = "32px", width = "32px", className = "" }: ISpinner) {
+  return (
+    <div role="status">
+      <svg
+        aria-hidden="true"
+        height={height}
+        width={width}
+        className={clsx("animate-spin text-secondary", className)}
+        viewBox="0 0 100 101"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+          fill="currentColor"
+        />
+        <path
+          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>
+      <span className="sr-only">Loading...</span>
+    </div>
+  );
+}
diff --git a/packages/propel/src/styles/fonts/Inter/LICENSE b/packages/propel/src/styles/fonts/Inter/LICENSE
deleted file mode 100644
index 46d45c6a1b..0000000000
--- 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 c59d2397ed..0000000000
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 2d99c5bcfa..0000000000
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 21db79416d..0000000000
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 da1c039b75..0000000000
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 775f7575e6..0000000000
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 39b9673d88..0000000000
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 d228a4af2f..0000000000
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 c86ff014ad..0000000000
--- 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 03d95f1b04..0000000000
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 7d6779d226..0000000000
--- 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 7373b3f9cf..1a541c46c8 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/root.tsx b/packages/propel/src/switch/root.tsx
index 99cdf40a1a..01335f70bb 100644
--- a/packages/propel/src/switch/root.tsx
+++ b/packages/propel/src/switch/root.tsx
@@ -11,46 +11,48 @@ export interface IToggleSwitchProps {
   className?: string;
 }
 
-const Switch: React.FC<IToggleSwitchProps> = ({ value, onChange, label, size = "sm", disabled, className }) => (
-  <BaseSwitch.Root
-    checked={value}
-    disabled={disabled}
-    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",
-      // 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"
-        : value
-          ? "cursor-pointer bg-custom-primary-100"
-          : "cursor-pointer bg-custom-background-90",
-      className
-    )}
-  >
-    {label && <span className="sr-only">{label}</span>}
-    <BaseSwitch.Thumb
-      aria-hidden="true"
+function Switch({ value, onChange, label, size = "sm", disabled, className }: IToggleSwitchProps) {
+  return (
+    <BaseSwitch.Root
+      checked={value}
+      disabled={disabled}
+      onCheckedChange={onChange}
+      aria-label={label}
       className={cn(
-        "inline-block self-center rounded-full shadow ring-0 transition-transform duration-200 ease-in-out",
+        "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-3 w-3" : size === "md" ? "h-4 w-4" : "h-5 w-5",
-        // position + color by state
-        value
-          ? size === "sm"
-            ? "translate-x-3 bg-white"
-            : size === "md"
-              ? "translate-x-4 bg-white"
-              : "translate-x-5 bg-white"
-          : "translate-x-0.5 bg-custom-background-90",
-        // disabled
-        disabled && "cursor-not-allowed bg-custom-background-90"
+        size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10",
+        // state
+        disabled
+          ? "cursor-not-allowed bg-layer-1"
+          : value
+            ? "cursor-pointer bg-accent-primary"
+            : "cursor-pointer bg-surface-2",
+        className
       )}
-    />
-  </BaseSwitch.Root>
-);
+    >
+      {label && <span className="sr-only">{label}</span>}
+      <BaseSwitch.Thumb
+        aria-hidden="true"
+        className={cn(
+          "inline-block self-center rounded-full shadow 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
+          value
+            ? size === "sm"
+              ? "translate-x-3 bg-white"
+              : size === "md"
+                ? "translate-x-4 bg-white"
+                : "translate-x-5 bg-white"
+            : "translate-x-0.5 bg-surface-2",
+          // disabled
+          disabled && "cursor-not-allowed bg-surface-2"
+        )}
+      />
+    </BaseSwitch.Root>
+  );
+}
 
 Switch.displayName = "plane-ui-switch";
 
diff --git a/packages/propel/src/switch/switch.stories.tsx b/packages/propel/src/switch/switch.stories.tsx
index c9e12b1cfa..fd913b3e72 100644
--- a/packages/propel/src/switch/switch.stories.tsx
+++ b/packages/propel/src/switch/switch.stories.tsx
@@ -33,7 +33,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 +69,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="mt-2 text-11 text-gray-600">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="mt-2 text-11 text-gray-600">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="mt-2 text-11 text-gray-600">Large</p>
         </div>
       </div>
     );
@@ -95,19 +95,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-13 text-gray-600">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-13 text-gray-600">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-13 text-gray-600">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-13 text-gray-600">Disabled Checked</span>
         </div>
       </div>
     );
@@ -122,26 +122,26 @@ export const InForm: Story = {
 
     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>
+        <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-11 text-gray-500">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-11 text-gray-500">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-11 text-gray-500">Get notified about product updates</p>
             </div>
             <Switch value={updates} onChange={setUpdates} size="md" />
           </div>
@@ -159,8 +159,8 @@ export const WithDescription: Story = {
       <div className="w-96 rounded-lg border border-gray-200 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="mt-1 text-11 text-gray-500">
               Add an extra layer of security to your account by enabling two-factor authentication.
             </p>
           </div>
@@ -178,14 +178,14 @@ export const Interactive: Story = {
     return (
       <div className="w-80 space-y-4 rounded-lg border border-gray-200 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="rounded-sm bg-gray-50 p-4">
+          <p className="text-13 text-gray-700">
             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-green-600">Feature is now active and ready to use!</p>}
         </div>
       </div>
     );
@@ -204,7 +204,7 @@ export const CustomStyles: Story = {
           size="lg"
           className="border-2 border-purple-300 data-[state=checked]:bg-purple-500"
         />
-        <span className="text-sm">Custom styled switch</span>
+        <span className="text-13">Custom styled switch</span>
       </div>
     );
   },
@@ -226,11 +226,11 @@ 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>
+        <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
new file mode 100644
index 0000000000..4dcc80d106
--- /dev/null
+++ b/packages/propel/src/tab-navigation/index.ts
@@ -0,0 +1,3 @@
+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
new file mode 100644
index 0000000000..8a88fb497b
--- /dev/null
+++ b/packages/propel/src/tab-navigation/tab-navigation-item.tsx
@@ -0,0 +1,33 @@
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "../utils";
+import type { TTabNavigationItemProps } from "./tab-navigation-types";
+
+export function TabNavigationItem({ children, isActive, className }: TTabNavigationItemProps) {
+  return (
+    <div
+      className={cn(
+        "relative flex items-center gap-2 rounded-md px-2 py-1.5 text-13 font-medium transition-colors z-10",
+        isActive ? "text-primary" : "text-secondary hover:text-primary hover:bg-layer-transparent-hover",
+        className
+      )}
+    >
+      <AnimatePresence>
+        {isActive && (
+          <motion.div
+            className="absolute inset-0 bg-layer-transparent-active rounded-md -z-10"
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.9 }}
+            transition={{
+              duration: 0.3,
+              ease: [0.4, 0, 0.2, 1],
+            }}
+          />
+        )}
+      </AnimatePresence>
+      {children}
+    </div>
+  );
+}
+
+TabNavigationItem.displayName = "TabNavigationItem";
diff --git a/packages/propel/src/tab-navigation/tab-navigation-list.tsx b/packages/propel/src/tab-navigation/tab-navigation-list.tsx
new file mode 100644
index 0000000000..c572394778
--- /dev/null
+++ b/packages/propel/src/tab-navigation/tab-navigation-list.tsx
@@ -0,0 +1,14 @@
+import type { FC } from "react";
+import { LayoutGroup } from "framer-motion";
+import { cn } from "../utils";
+import type { TTabNavigationListProps } from "./tab-navigation-types";
+
+export function TabNavigationList({ children, className }: TTabNavigationListProps) {
+  return (
+    <LayoutGroup id="tab-navigation">
+      <div className={cn("relative flex items-center gap-1 rounded-md", className)}>{children}</div>
+    </LayoutGroup>
+  );
+}
+
+TabNavigationList.displayName = "TabNavigationList";
diff --git a/packages/propel/src/tab-navigation/tab-navigation-types.ts b/packages/propel/src/tab-navigation/tab-navigation-types.ts
new file mode 100644
index 0000000000..2116123243
--- /dev/null
+++ b/packages/propel/src/tab-navigation/tab-navigation-types.ts
@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+
+export type TTabNavigationItemProps = {
+  /** The content to display inside the tab (icons, text, etc.) */
+  children: ReactNode;
+  /** Whether this tab is currently active */
+  isActive: boolean;
+  /** Additional CSS class names */
+  className?: string;
+};
+
+export type TTabNavigationListProps = {
+  /** The navigation items (each should be a TabNavigationItem wrapped in a routing component) */
+  children: ReactNode;
+  /** Additional CSS class names for the container */
+  className?: string;
+};
diff --git a/packages/propel/src/tab-navigation/tab-navigation.stories.tsx b/packages/propel/src/tab-navigation/tab-navigation.stories.tsx
new file mode 100644
index 0000000000..71b2b93b0b
--- /dev/null
+++ b/packages/propel/src/tab-navigation/tab-navigation.stories.tsx
@@ -0,0 +1,100 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+// icons import
+import { OverviewIcon } from "../icons/overview-icon";
+import { CycleIcon } from "../icons/project/cycle-icon";
+import { IntakeIcon } from "../icons/project/intake-icon";
+import { ModuleIcon } from "../icons/project/module-icon";
+import { PageIcon } from "../icons/project/page-icon";
+import { ViewsIcon } from "../icons/project/view-icon";
+import { WorkItemsIcon } from "../icons/project/work-items-icon";
+// tab navigation import
+import { TabNavigationItem } from "./tab-navigation-item";
+import { TabNavigationList } from "./tab-navigation-list";
+
+const meta: Meta<typeof TabNavigationList> = {
+  title: "Components/TabNavigation",
+  component: TabNavigationList,
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[900px] p-8 bg-surface-1">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render() {
+    const [activeNavTab, setActiveNavTab] = useState("work_items");
+
+    // Example navigation items (matching actual Plane project navigation)
+    const navItems = [
+      { key: "overview", name: "Overview", href: "#overview", icon: OverviewIcon },
+      { key: "work_items", name: "Work items", href: "#work_items", icon: WorkItemsIcon },
+      { key: "cycles", name: "Cycles", href: "#cycles", icon: CycleIcon },
+      { key: "modules", name: "Modules", href: "#modules", icon: ModuleIcon },
+      { key: "views", name: "Views", href: "#views", icon: ViewsIcon },
+      { key: "pages", name: "Pages", href: "#pages", icon: PageIcon },
+      { key: "intake", name: "Intake", href: "#intake", icon: IntakeIcon },
+    ];
+
+    return (
+      <div className="space-y-8">
+        {/* Example 1: Navigation with anchor tags (simulating React Router Link) */}
+        <div className="space-y-3">
+          <div className="text-11 font-medium text-tertiary uppercase tracking-wide">
+            With Navigation Links (e.g., React Router)
+          </div>
+          <TabNavigationList>
+            {navItems.map((item) => (
+              <a
+                key={item.key}
+                href={item.href}
+                onClick={(e) => {
+                  e.preventDefault();
+                  setActiveNavTab(item.key);
+                }}
+              >
+                <TabNavigationItem isActive={activeNavTab === item.key}>
+                  <div className="flex items-center gap-2 z-10">
+                    <item.icon className="h-4 w-4" />
+                    <span>{item.name}</span>
+                  </div>
+                </TabNavigationItem>
+              </a>
+            ))}
+          </TabNavigationList>
+          <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-layer-1 rounded-md">
+          <div className="text-11 font-medium text-secondary mb-2">Example Code:</div>
+          <pre className="text-11 text-tertiary overflow-x-auto">
+            {`// With React Router Link
+<TabNavigationList>
+  {items.map(item => (
+    <Link key={item.key} to={item.href}>
+      <TabNavigationItem isActive={pathname === item.href}>
+        <item.icon className="h-4 w-4" />
+        <span>{item.name}</span>
+      </TabNavigationItem>
+    </Link>
+  ))}
+</TabNavigationList>
+`}
+          </pre>
+        </div>
+      </div>
+    );
+  },
+};
diff --git a/packages/propel/src/table/core.tsx b/packages/propel/src/table/core.tsx
index 074bb7f370..2beade09d6 100644
--- a/packages/propel/src/table/core.tsx
+++ b/packages/propel/src/table/core.tsx
@@ -2,79 +2,87 @@ import * as React from "react";
 
 import { cn } from "../utils/classname";
 
-const Table = React.forwardRef<React.ComponentRef<"table">, React.ComponentPropsWithoutRef<"table">>(
-  ({ className, ...props }, ref) => (
+const Table = React.forwardRef(function Table(
+  { className, ...props }: React.ComponentPropsWithoutRef<"table">,
+  ref: React.ForwardedRef<React.ComponentRef<"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>
-  )
-);
+  );
+});
 Table.displayName = "Table";
 
-const TableHeader = React.forwardRef<React.ComponentRef<"thead">, React.ComponentPropsWithoutRef<"thead">>(
-  ({ className, ...props }, ref) => (
-    <thead
-      ref={ref}
-      className={cn("bg-custom-background-80 py-4 border-y border-custom-border-200", className)}
-      {...props}
-    />
-  )
-);
+const TableHeader = React.forwardRef(function TableHeader(
+  { className, ...props }: React.ComponentPropsWithoutRef<"thead">,
+  ref: React.ForwardedRef<React.ComponentRef<"thead">>
+) {
+  return <thead ref={ref} className={cn("bg-layer-1 py-4 border-y border-subtle", className)} {...props} />;
+});
 TableHeader.displayName = "TableHeader";
 
-const TableBody = React.forwardRef<React.ComponentRef<"tbody">, React.ComponentPropsWithoutRef<"tbody">>(
-  ({ className, ...props }, ref) => <tbody ref={ref} className={cn("", className)} {...props} />
-);
+const TableBody = React.forwardRef(function TableBody(
+  { className, ...props }: React.ComponentPropsWithoutRef<"tbody">,
+  ref: React.ForwardedRef<React.ComponentRef<"tbody">>
+) {
+  return <tbody ref={ref} className={cn("", className)} {...props} />;
+});
 TableBody.displayName = "TableBody";
 
-const TableFooter = React.forwardRef<React.ComponentRef<"tfoot">, React.ComponentPropsWithoutRef<"tfoot">>(
-  ({ className, ...props }, ref) => (
-    <tfoot ref={ref} className={cn("bg-custom-background-300 font-medium", className)} {...props} />
-  )
-);
+const TableFooter = React.forwardRef(function TableFooter(
+  { className, ...props }: React.ComponentPropsWithoutRef<"tfoot">,
+  ref: React.ForwardedRef<React.ComponentRef<"tfoot">>
+) {
+  return <tfoot ref={ref} className={cn("bg-layer-1 font-medium", className)} {...props} />;
+});
 TableFooter.displayName = "TableFooter";
 
-const TableRow = React.forwardRef<React.ComponentRef<"tr">, React.ComponentPropsWithoutRef<"tr">>(
-  ({ className, ...props }, ref) => (
-    <tr
-      ref={ref}
-      className={cn("transition-colors data-[state=selected]:bg-custom-background-100", className)}
-      {...props}
-    />
-  )
-);
+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-surface-1", className)} {...props} />;
+});
 TableRow.displayName = "TableRow";
 
-const TableHead = React.forwardRef<React.ComponentRef<"th">, React.ComponentPropsWithoutRef<"th">>(
-  ({ className, ...props }, ref) => (
+const TableHead = React.forwardRef(function TableHead(
+  { className, ...props }: React.ComponentPropsWithoutRef<"th">,
+  ref: React.ForwardedRef<React.ComponentRef<"th">>
+) {
+  return (
     <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}
     />
-  )
-);
+  );
+});
 TableHead.displayName = "TableHead";
 
-const TableCell = React.forwardRef<React.ComponentRef<"td">, React.ComponentPropsWithoutRef<"td">>(
-  ({ className, ...props }, ref) => (
+const TableCell = React.forwardRef(function TableCell(
+  { className, ...props }: React.ComponentPropsWithoutRef<"td">,
+  ref: React.ForwardedRef<React.ComponentRef<"td">>
+) {
+  return (
     <td
       ref={ref}
       className={cn("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className)}
       {...props}
     />
-  )
-);
+  );
+});
 TableCell.displayName = "TableCell";
 
-const TableCaption = React.forwardRef<React.ComponentRef<"caption">, React.ComponentPropsWithoutRef<"caption">>(
-  ({ className, ...props }, ref) => (
-    <caption ref={ref} className={cn("mt-4 text-sm text-custom-text-300", className)} {...props} />
-  )
-);
+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-13 text-tertiary", className)} {...props} />;
+});
 TableCaption.displayName = "TableCaption";
 
 export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/packages/propel/src/table/table.stories.tsx b/packages/propel/src/table/table.stories.tsx
index c38edcef14..4e0c4026d0 100644
--- a/packages/propel/src/table/table.stories.tsx
+++ b/packages/propel/src/table/table.stories.tsx
@@ -173,30 +173,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="rounded-full bg-green-100 px-2 py-1 text-11 text-green-800">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="rounded-full bg-red-100 px-2 py-1 text-11 text-red-800">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="rounded-full bg-blue-100 px-2 py-1 text-11 text-blue-800">Planned</span>
             </TableCell>
             <TableCell>
-              <span className="rounded-full bg-yellow-100 px-2 py-1 text-xs text-yellow-800">Medium</span>
+              <span className="rounded-full bg-yellow-100 px-2 py-1 text-11 text-yellow-800">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="rounded-full bg-gray-100 px-2 py-1 text-11 text-gray-800">Completed</span>
             </TableCell>
             <TableCell>
-              <span className="rounded-full bg-green-100 px-2 py-1 text-xs text-green-800">Low</span>
+              <span className="rounded-full bg-green-100 px-2 py-1 text-11 text-green-800">Low</span>
             </TableCell>
             <TableCell>Bob Wilson</TableCell>
           </TableRow>
@@ -296,7 +296,7 @@ export const LargeDataset: Story = {
               <TableCell>{["Engineering", "Sales", "Marketing", "Support"][i % 4]}</TableCell>
               <TableCell>
                 <span
-                  className={`rounded-full px-2 py-1 text-xs ${
+                  className={`rounded-full px-2 py-1 text-11 ${
                     i % 2 === 0 ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
                   }`}
                 >
diff --git a/packages/propel/src/tabs/tabs.stories.tsx b/packages/propel/src/tabs/tabs.stories.tsx
index a0a5614fbd..10f40bface 100644
--- a/packages/propel/src/tabs/tabs.stories.tsx
+++ b/packages/propel/src/tabs/tabs.stories.tsx
@@ -51,9 +51,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">
+              <div className="text-13">
                 <h3 className="font-medium mb-2">{option.label}</h3>
-                <p className="text-custom-text-300">Content for the {option.label.toLowerCase()} tab.</p>
+                <p className="text-tertiary">Content for the {option.label.toLowerCase()} tab.</p>
               </div>
             </Tabs.Content>
           ))}
@@ -75,7 +75,7 @@ export const Sizes: Story = {
       <div className="w-[400px] grid 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 +99,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 +113,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 +136,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>
@@ -173,7 +173,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>
@@ -204,7 +204,7 @@ export const IconsOnly: Story = {
           </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 +237,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="px-3 py-1.5 text-13 bg-layer-1 rounded-sm hover:bg-surface-2">
             Add Tab
           </button>
         </div>
@@ -266,7 +263,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 +291,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 +316,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 px-3 py-2 bg-layer-1 rounded-sm" />
               </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 px-3 py-2 bg-layer-1 rounded-sm" />
               </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 px-3 py-2 bg-layer-1 rounded-sm" />
               </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 px-3 py-2 bg-layer-1 rounded-sm" />
               </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 5bd148ba48..98d1a2d53f 100644
--- a/packages/propel/src/tabs/tabs.tsx
+++ b/packages/propel/src/tabs/tabs.tsx
@@ -2,16 +2,29 @@ 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>>
@@ -19,72 +32,105 @@ type TabsCompound = React.ForwardRefExoticComponent<
   Indicator: React.ForwardRefExoticComponent<React.ComponentProps<"div"> & React.RefAttributes<HTMLDivElement>>;
 };
 
-const TabsRoot = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Root>,
-  React.ComponentProps<typeof TabsPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Root data-slot="tabs" className={cn("flex flex-col w-full h-full", className)} {...props} ref={ref} />
-));
+const TabsRoot = React.forwardRef(function TabsRoot(
+  { className, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.Root> & { variant?: TabsVariant },
+  ref: React.ForwardedRef<React.ElementRef<typeof TabsPrimitive.Root>>
+) {
+  return (
+    <TabsContext.Provider value={{ variant }}>
+      <TabsPrimitive.Root
+        data-slot="tabs"
+        className={cn("flex flex-col w-full h-full", className)}
+        {...props}
+        ref={ref}
+      />
+    </TabsContext.Provider>
+  );
+});
 
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentProps<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    data-slot="tabs-list"
-    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 relative overflow-auto",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-));
+const TabsList = React.forwardRef(function TabsList(
+  {
+    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-lg text-13 p-0.5 relative overflow-auto",
+        {
+          "bg-layer-3": background === "contained",
+        },
+        className
+      )}
+      {...props}
+      ref={ref}
+    />
+  );
+});
 
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Tab>,
-  React.ComponentProps<typeof TabsPrimitive.Tab> & { size?: "sm" | "md" | "lg" }
->(({ className, size = "md", ...props }, ref) => (
-  <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",
-      {
-        "text-xs": size === "sm",
-        "text-sm": size === "md",
-        "text-base": size === "lg",
-      },
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-));
+const TabsTrigger = React.forwardRef(function TabsTrigger(
+  {
+    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-primary outline-none focus:outline-none cursor-pointer transition-all duration-200 ease-in-out rounded-md border border-transparent",
+        " data-[selected]:text-primary data-[selected]:shadow-sm data-[selected]:bg-layer-2 data-[selected]:border data-[selected]:border-subtle-1 data-[selected]:raised-200",
+        "text-placeholder  hover:text-tertiary hover:bg-layer-transparent-hover",
+        "disabled:text-placeholder disabled:cursor-not-allowed",
+        {
+          "text-11": size === "sm",
+          "text-13": size === "md",
+          "text-14": size === "lg",
+        },
+        className
+      )}
+      {...props}
+      ref={ref}
+    />
+  );
+});
 
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Panel>,
-  React.ComponentProps<typeof TabsPrimitive.Panel>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Panel
-    data-slot="tabs-content"
-    className={cn("relative outline-none", className)}
-    {...props}
-    ref={ref}
-  />
-));
-const TabsIndicator = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => (
-  <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",
-      className
-    )}
-    {...props}
-    ref={ref}
-  />
-));
+const TabsContent = React.forwardRef(function TabsContent(
+  { className, ...props }: React.ComponentProps<typeof TabsPrimitive.Panel>,
+  ref: React.ForwardedRef<React.ElementRef<typeof TabsPrimitive.Panel>>
+) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("relative outline-none", className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+const TabsIndicator = React.forwardRef(function TabsIndicator(
+  { className, ...props }: React.ComponentProps<"div">,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  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-xs bg-surface-1 shadow-sm transition-[width,transform] duration-200 ease-in-out",
+        className
+      )}
+      {...props}
+      ref={ref}
+    />
+  );
+});
 
 export const Tabs = Object.assign(TabsRoot, {
   List: TabsList,
diff --git a/packages/propel/src/toast/toast.stories.tsx b/packages/propel/src/toast/toast.stories.tsx
index 475cde44d7..8a8fd1bb56 100644
--- a/packages/propel/src/toast/toast.stories.tsx
+++ b/packages/propel/src/toast/toast.stories.tsx
@@ -1,6 +1,5 @@
-import { useState } from "react";
 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",
@@ -23,10 +22,10 @@ export const Provider: Story = {
       <div>
         <Toast theme="light" />
         <div className="space-y-2">
-          <p className="text-sm text-gray-600">
+          <p className="text-13 text-gray-600">
             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="block rounded-sm bg-gray-100 p-2 text-11">{`<Toast theme="light" />`}</code>
         </div>
       </div>
     );
@@ -46,7 +45,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>
@@ -68,7 +67,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>
@@ -90,7 +89,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>
@@ -112,7 +111,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>
@@ -133,7 +132,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 bg-layer-2 border border-subtle px-4 py-2 text-13 text-primary hover:bg-layer-1"
         >
           Show Loading Toast
         </button>
@@ -154,23 +153,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>
@@ -199,7 +189,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>
       </>
@@ -232,7 +225,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>
       </>
@@ -254,7 +250,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>
@@ -266,7 +262,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>
@@ -278,7 +274,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>
@@ -290,7 +286,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>
@@ -301,7 +297,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 bg-layer-2 border border-subtle px-3 py-2 text-13 text-primary hover:bg-layer-1"
           >
             Loading
           </button>
@@ -338,7 +334,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>
@@ -359,7 +355,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>
@@ -382,7 +378,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>
@@ -390,3 +386,318 @@ export const LongMessage: Story = {
     );
   },
 };
+
+// ========== Static Variants ==========
+
+export const StaticVariants: Story = {
+  render() {
+    return (
+      <div className="grid grid-cols-1 gap-4">
+        <div>
+          <p className="text-13 text-secondary mb-2 font-medium">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 p-6 bg-canvas rounded-lg" data-theme="dark">
+        <p className="text-13 text-secondary mb-2 font-medium">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="text-16 font-semibold text-primary mb-2">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="text-14 font-semibold text-primary mb-3">Token Mapping by Variant</h3>
+          <div className="overflow-x-auto">
+            <table className="w-full text-11 border border-subtle rounded-lg">
+              <thead>
+                <tr className="bg-layer-1">
+                  <th className="text-left px-3 py-2 font-semibold text-primary border-b border-subtle">Variant</th>
+                  <th className="text-left px-3 py-2 font-semibold text-primary border-b border-subtle">Title Text</th>
+                  <th className="text-left px-3 py-2 font-semibold text-primary border-b border-subtle">Icon BG</th>
+                  <th className="text-left px-3 py-2 font-semibold text-primary border-b border-subtle">Toast BG</th>
+                  <th className="text-left px-3 py-2 font-semibold text-primary border-b border-subtle">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="text-10 bg-layer-1 px-1.5 py-0.5 rounded">text-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">bg-success-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">bg-surface-1</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">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="text-10 bg-layer-1 px-1.5 py-0.5 rounded">text-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">bg-danger-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">bg-surface-1</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">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="text-10 bg-layer-1 px-1.5 py-0.5 rounded">text-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">bg-warning-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">bg-surface-1</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">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="text-10 bg-layer-1 px-1.5 py-0.5 rounded">text-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">bg-accent-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">bg-surface-1</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">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="text-10 bg-layer-1 px-1.5 py-0.5 rounded">text-primary</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">bg-layer-2</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">bg-surface-1</code>
+                  </td>
+                  <td className="px-3 py-2">
+                    <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">border-subtle</code>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <h3 className="text-14 font-semibold text-primary mb-3">Typography</h3>
+            <ul className="space-y-2 text-12 text-secondary">
+              <li>
+                <span className="font-medium text-primary">Title:</span>{" "}
+                <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">text-14 font-semibold</code>
+              </li>
+              <li>
+                <span className="font-medium text-primary">Message:</span>{" "}
+                <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">text-13</code>
+              </li>
+              <li>
+                <span className="font-medium text-primary">Message Color:</span>{" "}
+                <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">text-secondary</code>
+              </li>
+              <li>
+                <span className="font-medium text-primary">Action Button:</span>{" "}
+                <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">text-13 font-medium</code>
+              </li>
+            </ul>
+          </div>
+
+          <div>
+            <h3 className="text-14 font-semibold text-primary mb-3">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="text-10 bg-layer-1 px-1.5 py-0.5 rounded">shadow-raised-200</code>
+              </li>
+              <li>
+                <span className="font-medium text-primary">Border Width:</span> 1px
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div>
+          <h3 className="text-14 font-semibold text-primary mb-3">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="text-10 bg-layer-1 px-1.5 py-0.5 rounded">text-on-color</code>
+            </li>
+            <li>
+              <span className="font-medium text-primary">Icon Background:</span>{" "}
+              <code className="text-10 bg-layer-1 px-1.5 py-0.5 rounded">
+                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="text-10 bg-layer-1 px-1.5 py-0.5 rounded">
+                text-icon-secondary hover:text-icon-tertiary
+              </code>
+            </li>
+          </ul>
+        </div>
+
+        <div className="bg-layer-1 p-4 rounded-lg">
+          <h3 className="text-14 font-semibold text-primary mb-2">Visual Examples</h3>
+          <p className="text-12 text-secondary mb-4">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 3ab3663cb8..fac617a7af 100644
--- a/packages/propel/src/toast/toast.tsx
+++ b/packages/propel/src/toast/toast.tsx
@@ -1,7 +1,7 @@
 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";
@@ -49,60 +49,63 @@ export type ToastProps = {
 
 const toastManager = BaseToast.createToastManager();
 
-export const Toast = (props: ToastProps) => (
-  <BaseToast.Provider toastManager={toastManager}>
-    <BaseToast.Portal>
-      <BaseToast.Viewport data-theme={props.theme}>
-        <ToastList />
-      </BaseToast.Viewport>
-    </BaseToast.Portal>
-  </BaseToast.Provider>
-);
+export function Toast(props: ToastProps) {
+  return (
+    <BaseToast.Provider toastManager={toastManager}>
+      <BaseToast.Portal>
+        <BaseToast.Viewport data-theme={props.theme}>
+          <ToastList />
+        </BaseToast.Viewport>
+      </BaseToast.Portal>
+    </BaseToast.Provider>
+  );
+}
 
 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",
   },
 };
-const ToastList = () => {
+
+function ToastList() {
   const { toasts } = BaseToast.useToastManager();
   return toasts.map((toast) => <ToastRender key={toast.id} id={toast.id} toast={toast} />);
-};
+}
 
-const ToastRender = ({ id, toast }: { id: React.Key; toast: BaseToast.Root.ToastObject }) => {
+function ToastRender({ id, toast }: { id: React.Key; toast: BaseToast.Root.ToastObject }) {
   const toastData = toast.data as SetToastProps;
   const type = toastData.type as TOAST_TYPE;
   const data = TOAST_DATA[type];
@@ -113,7 +116,7 @@ const 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]",
+        "flex group items-center rounded-lg border shadow-raised-200 w-[350px]",
         "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;",
 
@@ -154,48 +157,91 @@ const 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 text-icon-secondary hover:text-icon-tertiary cursor-pointer">
+        <CloseIcon strokeWidth={1.5} width={16} height={16} />
+      </BaseToast.Close>
+      <div className="flex items-start gap-2 w-full p-4">
+        <div className="py-1">
+          {data.icon && (
+            <div
+              className={cn("flex items-center justify-center rounded-full size-4 flex-shrink-0", data.iconBgClassName)}
             >
-              <CloseIcon strokeWidth={1.5} width={14} height={14} />
-            </BaseToast.Close>
-          </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>
+              {data.icon}
             </div>
-            {toastData.actionItems && <div className="flex items-center pl-[32px]">{toastData.actionItems}</div>}
-          </div>
-        </>
-      )}
+          )}
+        </div>
+        <div className="flex flex-col gap-1 flex-1 min-w-0">
+          <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
+          "flex group items-start rounded-lg border border-subtle-1 rounded-lg shadow-overlay-100 w-[350px]",
+          "relative",
+          data.backgroundColorClassName,
+          data.borderColorClassName
+        )}
+      >
+        <div className="absolute top-1 right-1 text-icon-tertiary cursor-default">
+          <CloseIcon strokeWidth={1.5} width={14} height={14} />
+        </div>
+        <div className="flex items-start gap-3 w-full p-4">
+          <div className="py-1">
+            {data.icon && (
+              <div
+                className={cn(
+                  "flex items-center justify-center rounded-full size-4 flex-shrink-0",
+                  data.iconBgClassName
+                )}
+              >
+                {data.icon}
+              </div>
+            )}
+          </div>
+          <div className="flex flex-col gap-1 flex-1 min-w-0">
+            <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>
+      </div>
+    </div>
+  );
+}
+
 export const setToast = (props: SetToastProps) => {
   let toastId: string | undefined;
   if (props.type !== TOAST_TYPE.LOADING) {
diff --git a/packages/propel/src/toolbar/toolbar.stories.tsx b/packages/propel/src/toolbar/toolbar.stories.tsx
index b663710633..dc6aee784a 100644
--- a/packages/propel/src/toolbar/toolbar.stories.tsx
+++ b/packages/propel/src/toolbar/toolbar.stories.tsx
@@ -38,7 +38,7 @@ export const Default: Story = {
   render() {
     return (
       <div className="p-4 space-y-4">
-        <div className="w-96 border rounded">
+        <div className="w-96 border rounded-sm">
           <Toolbar>
             <Toolbar.Group isFirst>
               <Toolbar.Item icon={Undo} tooltip="Undo" />
@@ -101,16 +101,16 @@ 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">
+        <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">
+            <div className="flex flex-shrink-0 items-stretch gap-0.5 rounded-sm border-[0.5px] border-subtle p-1">
               <Toolbar.Item icon={Lock} tooltip="Private" isActive />
               <Toolbar.Item icon={Globe2} 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 0acf3b20ef..9b3ac7e4dd 100644
--- a/packages/propel/src/toolbar/toolbar.tsx
+++ b/packages/propel/src/toolbar/toolbar.tsx
@@ -35,22 +35,30 @@ export interface ToolbarSubmitButtonProps extends React.ButtonHTMLAttributes<HTM
   children: React.ReactNode;
 }
 
-const ToolbarRoot = React.forwardRef<HTMLDivElement, ToolbarProps>(({ className, children, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex h-9 w-full items-stretch gap-1.5 bg-custom-background-90 overflow-x-scroll", className)}
-    {...props}
-  >
-    {children}
-  </div>
-));
+const ToolbarRoot = React.forwardRef(function ToolbarRoot(
+  { className, children, ...props }: ToolbarProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  return (
+    <div
+      ref={ref}
+      className={cn("flex h-9 w-full items-stretch gap-1.5 bg-surface-2 overflow-x-scroll", className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+});
 
-const ToolbarGroup = React.forwardRef<HTMLDivElement, ToolbarGroupProps>(
-  ({ className, children, isFirst = false, ...props }, ref) => (
+const ToolbarGroup = React.forwardRef(function ToolbarGroup(
+  { className, children, isFirst = false, ...props }: ToolbarGroupProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  return (
     <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,
         },
@@ -60,75 +68,81 @@ const ToolbarGroup = React.forwardRef<HTMLDivElement, ToolbarGroupProps>(
     >
       {children}
     </div>
-  )
-);
+  );
+});
 
-const ToolbarItem = React.forwardRef<HTMLButtonElement, ToolbarItemProps>(
-  ({ icon: Icon, isActive = false, tooltip, shortcut, className, children, ...props }, ref) => {
-    const button = (
-      <button
-        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",
-          {
-            "bg-custom-background-80 text-custom-text-100": isActive,
-          },
-          className
-        )}
-        {...props}
+const ToolbarItem = React.forwardRef(function ToolbarItem(
+  { icon: Icon, isActive = false, tooltip, shortcut, className, children, ...props }: ToolbarItemProps,
+  ref: React.ForwardedRef<HTMLButtonElement>
+) {
+  const button = (
+    <button
+      ref={ref}
+      type="button"
+      className={cn(
+        "grid place-items-center aspect-square rounded-xs p-0.5 text-placeholder hover:bg-layer-1 transition-colors",
+        {
+          "bg-layer-1 text-primary": isActive,
+        },
+        className
+      )}
+      {...props}
+    >
+      <Icon
+        className={cn("h-3.5 w-3.5", {
+          "text-primary": isActive,
+        })}
+        strokeWidth={2.5}
+      />
+      {children}
+    </button>
+  );
+
+  if (tooltip) {
+    return (
+      <Tooltip
+        tooltipContent={
+          <div className="flex flex-col gap-1 text-center text-11">
+            <span className="font-medium">{tooltip}</span>
+            {shortcut && <kbd className="text-placeholder">{shortcut.join(" + ")}</kbd>}
+          </div>
+        }
       >
-        <Icon
-          className={cn("h-3.5 w-3.5", {
-            "text-custom-text-100": isActive,
-          })}
-          strokeWidth={2.5}
-        />
-        {children}
-      </button>
+        {button}
+      </Tooltip>
     );
-
-    if (tooltip) {
-      return (
-        <Tooltip
-          tooltipContent={
-            <div className="flex flex-col gap-1 text-center text-xs">
-              <span className="font-medium">{tooltip}</span>
-              {shortcut && <kbd className="text-custom-text-400">{shortcut.join(" + ")}</kbd>}
-            </div>
-          }
-        >
-          {button}
-        </Tooltip>
-      );
-    }
-
-    return button;
   }
-);
 
-const ToolbarSeparator = React.forwardRef<HTMLDivElement, ToolbarSeparatorProps>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("h-full w-px bg-custom-border-200 mx-1", className)} {...props} />
-));
+  return button;
+});
+
+const ToolbarSeparator = React.forwardRef(function ToolbarSeparator(
+  { className, ...props }: ToolbarSeparatorProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
+  return <div ref={ref} className={cn("h-full w-px bg-subtle-1 mx-1", 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-red-500 text-on-color hover:bg-red-600 focus:bg-red-600",
 };
 
-const ToolbarSubmitButton = React.forwardRef<HTMLButtonElement, ToolbarSubmitButtonProps>(
-  ({ loading = false, variant = "primary", className, children, disabled, ...props }, ref) => (
+const ToolbarSubmitButton = React.forwardRef(function ToolbarSubmitButton(
+  { loading = false, variant = "primary", className, children, disabled, ...props }: ToolbarSubmitButtonProps,
+  ref: React.ForwardedRef<HTMLButtonElement>
+) {
+  return (
     <div className="sticky right-1">
       <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",
+          "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:outline-none focus:ring-2 focus:ring-accent-strong/20 focus:ring-offset-2",
           "disabled:opacity-50 disabled:pointer-events-none",
           buttonVariants[variant],
           className
@@ -140,8 +154,8 @@ const ToolbarSubmitButton = React.forwardRef<HTMLButtonElement, ToolbarSubmitBut
         {children}
       </button>
     </div>
-  )
-);
+  );
+});
 
 ToolbarRoot.displayName = "ToolbarRoot";
 ToolbarGroup.displayName = "ToolbarGroup";
diff --git a/packages/propel/src/tooltip/root.tsx b/packages/propel/src/tooltip/root.tsx
index 590f3e5ddc..a5f840d240 100644
--- a/packages/propel/src/tooltip/root.tsx
+++ b/packages/propel/src/tooltip/root.tsx
@@ -1,6 +1,6 @@
 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 +50,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 break-words rounded-lg border border-subtle-1 bg-layer-2 px-2 py-1.5 shadow-overlay-200",
               {
                 hidden: isMobile,
               },
@@ -61,8 +61,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 d9cf4bf56c..1ba3cc7093 100644
--- a/packages/propel/src/tooltip/tooltip.stories.tsx
+++ b/packages/propel/src/tooltip/tooltip.stories.tsx
@@ -17,7 +17,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color">Hover me</button>,
   },
 };
 
@@ -25,7 +25,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color">Hover me</button>,
   },
 };
 
@@ -33,7 +33,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color">Top</button>,
   },
 };
 
@@ -41,7 +41,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color">Bottom</button>,
   },
 };
 
@@ -49,7 +49,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color">Left</button>,
   },
 };
 
@@ -57,7 +57,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color">Right</button>,
   },
 };
 
@@ -76,7 +76,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="rounded-sm bg-gray-400 px-4 py-2 text-on-color">Hover me (disabled)</button>,
   },
 };
 
@@ -85,7 +85,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color">Long content</button>,
   },
 };
 
@@ -93,7 +93,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color">Custom delay (1s)</button>,
   },
 };
 
@@ -101,7 +101,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="rounded-sm bg-blue-500 px-4 py-2 text-on-color">Custom offset</button>,
   },
 };
 
@@ -113,18 +113,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="rounded-sm bg-blue-500 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="rounded-sm bg-blue-500 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="rounded-sm bg-blue-500 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="rounded-sm bg-blue-500 px-4 py-2 text-13 text-on-color">Bottom</button>
         </Tooltip>
       </div>
     );
@@ -137,7 +137,7 @@ export const OnText: Story = {
   },
   render() {
     return (
-      <p className="text-sm text-gray-700">
+      <p className="text-13 text-gray-700">
         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>
@@ -155,7 +155,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="cursor-not-allowed rounded-sm bg-gray-300 px-4 py-2 text-gray-500" disabled>
           Disabled Button
         </button>
       </Tooltip>
@@ -169,19 +169,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-11 text-gray-400">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="rounded-sm bg-blue-500 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="rounded-sm bg-purple-500 px-4 py-2 text-on-color">Custom style</button>,
   },
 };
 
@@ -193,16 +193,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="rounded-sm bg-green-500 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="rounded-sm bg-red-500 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="rounded-sm bg-blue-500 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="rounded-sm bg-purple-500 px-4 py-2 text-13 text-on-color">Share</button>
         </Tooltip>
       </div>
     );
@@ -217,7 +217,7 @@ 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="rounded-sm p-2 hover:bg-gray-100">
             <svg
               className="h-5 w-5 text-gray-600"
               fill="none"
@@ -235,7 +235,7 @@ export const IconButtons: Story = {
           </button>
         </Tooltip>
         <Tooltip tooltipContent="Delete" position="top">
-          <button className="rounded p-2 hover:bg-gray-100">
+          <button className="rounded-sm p-2 hover:bg-gray-100">
             <svg
               className="h-5 w-5 text-red-600"
               fill="none"
@@ -253,7 +253,7 @@ export const IconButtons: Story = {
           </button>
         </Tooltip>
         <Tooltip tooltipContent="Share" position="top">
-          <button className="rounded p-2 hover:bg-gray-100">
+          <button className="rounded-sm p-2 hover:bg-gray-100">
             <svg
               className="h-5 w-5 text-blue-600"
               fill="none"
@@ -282,7 +282,7 @@ 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="mb-1 flex items-center gap-2 text-13 font-medium text-gray-700">
           Email Address
           <Tooltip
             tooltipHeading="Email Requirements"
@@ -294,7 +294,7 @@ export const InFormField: Story = {
         </label>
         <input
           type="email"
-          className="w-full rounded border border-gray-300 px-3 py-2 text-sm"
+          className="w-full rounded-sm border border-gray-300 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 7b3aeb2f8c..125aa4036b 100644
--- a/packages/propel/src/utils/classname.tsx
+++ b/packages/propel/src/utils/classname.tsx
@@ -1,5 +1,63 @@
-import clsx from "clsx";
+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/tailwind.config.ts b/packages/propel/tailwind.config.ts
deleted file mode 100644
index 859971bab5..0000000000
--- 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/tsconfig.json b/packages/propel/tsconfig.json
index 873c92af07..9f93e2c026 100644
--- a/packages/propel/tsconfig.json
+++ b/packages/propel/tsconfig.json
@@ -1,9 +1,10 @@
 {
   "extends": "@plane/typescript-config/react-library.json",
-  "compilerOptions": {
-    "jsx": "react-jsx",
-    "lib": ["esnext", "dom"]
-  },
   "include": ["src"],
+  "compilerOptions": {
+    "exactOptionalPropertyTypes": false,
+    "noUnusedLocals": false,
+    "noImplicitReturns": false
+  },
   "exclude": ["node_modules", "dist"]
 }
diff --git a/packages/propel/tsdown.config.ts b/packages/propel/tsdown.config.ts
index 02bf9e10de..8c3c3d8e7c 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",
@@ -29,25 +31,22 @@ export default defineConfig({
     "src/skeleton/index.ts",
     "src/switch/index.ts",
     "src/table/index.ts",
+    "src/tab-navigation/index.ts",
     "src/tabs/index.ts",
     "src/toast/index.ts",
     "src/toolbar/index.ts",
     "src/tooltip/index.ts",
     "src/utils/index.ts",
   ],
-  outDir: "dist",
-  format: ["esm", "cjs"],
+  format: ["esm"],
+  dts: true,
+  copy: ["src/styles"],
   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",
     }),
   },
-  copy: ["src/styles"],
-  dts: true,
-  clean: true,
-  sourcemap: false,
+  platform: "neutral",
 });
diff --git a/packages/services/.eslintignore b/packages/services/.eslintignore
deleted file mode 100644
index 6019047c3e..0000000000
--- a/packages/services/.eslintignore
+++ /dev/null
@@ -1,3 +0,0 @@
-build/*
-dist/*
-out/*
\ No newline at end of file
diff --git a/packages/services/.eslintrc.cjs b/packages/services/.eslintrc.cjs
deleted file mode 100644
index ba0e590e8e..0000000000
--- a/packages/services/.eslintrc.cjs
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["@plane/eslint-config/library.js"],
-};
diff --git a/packages/services/.prettierignore b/packages/services/.prettierignore
index acc3e36325..b0b8bc622a 100644
--- a/packages/services/.prettierignore
+++ b/packages/services/.prettierignore
@@ -1,6 +1,10 @@
-.turbo
-.next
-.vercel
-out/
-dist/
+.next/
+.react-router/
+.turbo/
+.vite/
 build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/services/.prettierrc b/packages/services/.prettierrc
deleted file mode 100644
index 87d988f1b2..0000000000
--- a/packages/services/.prettierrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "printWidth": 120,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}
diff --git a/packages/services/package.json b/packages/services/package.json
index 469485338a..e2fed6d878 100644
--- a/packages/services/package.json
+++ b/packages/services/package.json
@@ -1,24 +1,24 @@
 {
   "name": "@plane/services",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "AGPL-3.0",
   "private": true,
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "types": "./dist/index-BliaS-AT.d.ts",
+      "import": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
   "scripts": {
     "build": "tsdown",
     "dev": "tsdown --watch",
-    "check:lint": "eslint . --max-warnings 62",
+    "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=1131",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check \"**/*.{ts,tsx,md,json,css,scss}\"",
-    "fix:lint": "eslint . --fix",
-    "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\"",
+    "check:format": "prettier . --cache --check",
+    "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=1131",
+    "fix:format": "prettier . --cache --write",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
@@ -28,12 +28,11 @@
     "file-type": "^21.0.0"
   },
   "devDependencies": {
-    "@plane/eslint-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
     "tsdown": "catalog:",
     "typescript": "catalog:"
   },
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "types": "./dist/index.d.cts"
+  "types": "./dist/index.d.ts"
 }
diff --git a/packages/services/src/dashboard/dashboard.service.ts b/packages/services/src/dashboard/dashboard.service.ts
index a705b1e188..2934b4f6ae 100644
--- a/packages/services/src/dashboard/dashboard.service.ts
+++ b/packages/services/src/dashboard/dashboard.service.ts
@@ -77,3 +77,5 @@ export default class DashboardService extends APIService {
       });
   }
 }
+
+export { DashboardService };
diff --git a/packages/services/src/developer/webhook.service.ts b/packages/services/src/developer/webhook.service.ts
index 846e780d76..a9bb7d7993 100644
--- a/packages/services/src/developer/webhook.service.ts
+++ b/packages/services/src/developer/webhook.service.ts
@@ -102,3 +102,5 @@ export default class WebhookService extends APIService {
       });
   }
 }
+
+export { WebhookService };
diff --git a/packages/services/src/file/sites-file.service.ts b/packages/services/src/file/sites-file.service.ts
index 4c10198576..fa2713282c 100644
--- a/packages/services/src/file/sites-file.service.ts
+++ b/packages/services/src/file/sites-file.service.ts
@@ -98,10 +98,10 @@ export class SitesFileService extends FileService {
    * @returns {Promise<void>} Promise resolving to void
    * @throws {Error} If the request fails
    */
-  async restoreNewAsset(workspaceSlug: string, src: string): Promise<void> {
+  async restoreNewAsset(anchor: string, src: string): Promise<void> {
     // remove the last slash and get the asset id
     const assetId = getAssetIdFromUrl(src);
-    return this.post(`/api/public/assets/v2/workspaces/${workspaceSlug}/restore/${assetId}/`)
+    return this.post(`/api/public/assets/v2/anchor/${anchor}/restore/${assetId}/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
diff --git a/packages/services/src/intake/intake.service.ts b/packages/services/src/intake/intake.service.ts
index 1c4a93c18a..576790ef4e 100644
--- a/packages/services/src/intake/intake.service.ts
+++ b/packages/services/src/intake/intake.service.ts
@@ -6,3 +6,5 @@ export default class IntakeService extends APIService {
     super(BASE_URL || API_BASE_URL);
   }
 }
+
+export { IntakeService };
diff --git a/packages/services/src/intake/issue.service.ts b/packages/services/src/intake/issue.service.ts
index b48328df49..009bc0c2f6 100644
--- a/packages/services/src/intake/issue.service.ts
+++ b/packages/services/src/intake/issue.service.ts
@@ -16,3 +16,5 @@ export default class IntakeIssueService extends APIService {
       });
   }
 }
+
+export { IntakeIssueService };
diff --git a/packages/services/tsconfig.json b/packages/services/tsconfig.json
index e8af9092ad..932ae713ed 100644
--- a/packages/services/tsconfig.json
+++ b/packages/services/tsconfig.json
@@ -1,8 +1,8 @@
 {
   "extends": "@plane/typescript-config/react-library.json",
   "compilerOptions": {
-    "jsx": "react",
-    "lib": ["esnext", "dom"]
+    "exactOptionalPropertyTypes": false,
+    "noUnusedLocals": false
   },
   "include": ["./src"],
   "exclude": ["dist", "build", "node_modules"]
diff --git a/packages/services/tsdown.config.ts b/packages/services/tsdown.config.ts
index 7b2ea6fe2f..78c3dcba86 100644
--- a/packages/services/tsdown.config.ts
+++ b/packages/services/tsdown.config.ts
@@ -2,10 +2,7 @@ import { defineConfig } from "tsdown";
 
 export default defineConfig({
   entry: ["src/index.ts"],
-  outDir: "dist",
-  format: ["esm", "cjs"],
-  exports: true,
+  format: ["esm"],
   dts: true,
-  clean: true,
-  sourcemap: true,
+  platform: "neutral",
 });
diff --git a/packages/shared-state/.eslintignore b/packages/shared-state/.eslintignore
deleted file mode 100644
index 6019047c3e..0000000000
--- a/packages/shared-state/.eslintignore
+++ /dev/null
@@ -1,3 +0,0 @@
-build/*
-dist/*
-out/*
\ No newline at end of file
diff --git a/packages/shared-state/.eslintrc.js b/packages/shared-state/.eslintrc.js
deleted file mode 100644
index ba0e590e8e..0000000000
--- a/packages/shared-state/.eslintrc.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["@plane/eslint-config/library.js"],
-};
diff --git a/packages/shared-state/.prettierignore b/packages/shared-state/.prettierignore
new file mode 100644
index 0000000000..b0b8bc622a
--- /dev/null
+++ b/packages/shared-state/.prettierignore
@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/shared-state/.prettierrc b/packages/shared-state/.prettierrc
deleted file mode 100644
index 87d988f1b2..0000000000
--- a/packages/shared-state/.prettierrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "printWidth": 120,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}
diff --git a/packages/shared-state/package.json b/packages/shared-state/package.json
index 7dd11e4df9..c3eac20995 100644
--- a/packages/shared-state/package.json
+++ b/packages/shared-state/package.json
@@ -1,17 +1,28 @@
 {
   "name": "@plane/shared-state",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "AGPL-3.0",
   "description": "Shared state shared across multiple apps internally",
   "private": true,
-  "main": "./src/index.ts",
-  "types": "./src/index.ts",
+  "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"
+    },
+    "./package.json": "./package.json"
+  },
   "scripts": {
-    "check:lint": "eslint . --max-warnings 4",
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=191",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check \"**/*.{ts,tsx,md,json,css,scss}\"",
-    "fix:lint": "eslint . --fix",
-    "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\"",
+    "check:format": "prettier . --cache --check",
+    "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=191",
+    "fix:format": "prettier . --cache --write",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
@@ -25,10 +36,10 @@
     "zod": "^3.22.2"
   },
   "devDependencies": {
-    "@plane/eslint-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
     "@types/lodash-es": "catalog:",
     "@types/node": "catalog:",
+    "tsdown": "catalog:",
     "typescript": "catalog:"
   }
 }
diff --git a/packages/shared-state/src/store/rich-filters/adapter.ts b/packages/shared-state/src/store/rich-filters/adapter.ts
index 17e8b806ad..ec9fe58c55 100644
--- a/packages/shared-state/src/store/rich-filters/adapter.ts
+++ b/packages/shared-state/src/store/rich-filters/adapter.ts
@@ -8,9 +8,10 @@ import type { IFilterAdapter, TExternalFilter, TFilterExpression, TFilterPropert
  * @template K - Property key type that extends TFilterProperty
  * @template E - External filter type that extends TExternalFilter
  */
-export abstract class FilterAdapter<K extends TFilterProperty, E extends TExternalFilter>
-  implements IFilterAdapter<K, E>
-{
+export abstract class FilterAdapter<K extends TFilterProperty, E extends TExternalFilter> implements IFilterAdapter<
+  K,
+  E
+> {
   /**
    * Converts an external filter format to internal filter expression.
    * Must be implemented by concrete adapter classes.
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 4ef6af6d07..62c079a883 100644
--- a/packages/shared-state/src/store/rich-filters/config-manager.ts
+++ b/packages/shared-state/src/store/rich-filters/config-manager.ts
@@ -55,9 +55,10 @@ export type TConfigManagerParams = {
  * @template V - The filter value type extending TFilterValue
  * @template E - The external filter type extending TExternalFilter
  */
-export class FilterConfigManager<P extends TFilterProperty, E extends TExternalFilter = TExternalFilter>
-  implements IFilterConfigManager<P>
-{
+export class FilterConfigManager<
+  P extends TFilterProperty,
+  E extends TExternalFilter = TExternalFilter,
+> implements IFilterConfigManager<P> {
   // observables
   filterConfigs: IFilterConfigManager<P>["filterConfigs"];
   configOptions: IFilterConfigManager<P>["configOptions"];
diff --git a/packages/shared-state/src/store/rich-filters/config.ts b/packages/shared-state/src/store/rich-filters/config.ts
index c2cbabe5d1..3eb0cec0ae 100644
--- a/packages/shared-state/src/store/rich-filters/config.ts
+++ b/packages/shared-state/src/store/rich-filters/config.ts
@@ -25,8 +25,10 @@ type TOperatorOptionForDisplay = {
   label: string;
 };
 
-export interface IFilterConfig<P extends TFilterProperty, V extends TFilterValue = TFilterValue>
-  extends TFilterConfig<P, V> {
+export interface IFilterConfig<P extends TFilterProperty, V extends TFilterValue = TFilterValue> extends TFilterConfig<
+  P,
+  V
+> {
   // computed
   allEnabledSupportedOperators: TSupportedOperators[];
   firstOperator: TSupportedOperators | undefined;
@@ -35,18 +37,16 @@ export interface IFilterConfig<P extends TFilterProperty, V extends TFilterValue
     operator: TAllAvailableOperatorsForDisplay
   ) => TOperatorSpecificConfigs<V>[keyof TOperatorSpecificConfigs<V>] | undefined;
   getLabelForOperator: (operator: TAllAvailableOperatorsForDisplay | undefined) => string;
-  getDisplayOperatorByValue: <T extends TSupportedOperators | TAllAvailableOperatorsForDisplay>(
-    operator: T,
-    value: V
-  ) => T;
+  getDisplayOperatorByValue: <T extends TSupportedOperators>(operator: T, value: V) => T;
   getAllDisplayOperatorOptionsByValue: (value: V) => TOperatorOptionForDisplay[];
   // actions
   mutate: (updates: Partial<TFilterConfig<P, V>>) => void;
 }
 
-export class FilterConfig<P extends TFilterProperty, V extends TFilterValue = TFilterValue>
-  implements IFilterConfig<P, V>
-{
+export class FilterConfig<P extends TFilterProperty, V extends TFilterValue = TFilterValue> implements IFilterConfig<
+  P,
+  V
+> {
   // observables
   id: IFilterConfig<P, V>["id"];
   label: IFilterConfig<P, V>["label"];
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 dff175c073..0c8a807573 100644
--- a/packages/shared-state/src/store/rich-filters/filter-helpers.ts
+++ b/packages/shared-state/src/store/rich-filters/filter-helpers.ts
@@ -70,9 +70,10 @@ export interface IFilterInstanceHelper<P extends TFilterProperty, E extends TExt
  * @template K - The filter property type extending TFilterProperty
  * @template E - The external filter type extending TExternalFilter
  */
-export class FilterInstanceHelper<P extends TFilterProperty, E extends TExternalFilter>
-  implements IFilterInstanceHelper<P, E>
-{
+export class FilterInstanceHelper<
+  P extends TFilterProperty,
+  E extends TExternalFilter,
+> implements IFilterInstanceHelper<P, E> {
   // parent filter instance
   private _filterInstance: IFilterInstance<P, E>;
   // adapter
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 0e61749c35..155561dd58 100644
--- a/packages/shared-state/src/store/work-item-filters/adapter.ts
+++ b/packages/shared-state/src/store/work-item-filters/adapter.ts
@@ -194,12 +194,12 @@ class WorkItemFiltersAdapter extends FilterAdapter<TWorkItemFilterProperty, TWor
     const property = key.substring(0, lastDoubleUnderscoreIndex);
     const operator = key.substring(lastDoubleUnderscoreIndex + 2) as TSupportedOperators;
 
-    const rawValue = data[key as TWorkItemFilterConditionKey];
+    const rawValue = data[key];
 
     // Parse comma-separated values
     const parsedValue = MULTI_VALUE_OPERATORS.includes(operator) ? this._parseFilterValue(rawValue) : rawValue;
 
-    return [property as TWorkItemFilterProperty, operator as TSupportedOperators, parsedValue];
+    return [property as TWorkItemFilterProperty, operator, parsedValue];
   };
 
   /**
@@ -242,7 +242,7 @@ class WorkItemFiltersAdapter extends FilterAdapter<TWorkItemFilterProperty, TWor
     operator: TSupportedOperators,
     value: SingleOrArray<TFilterValue>
   ): TWorkItemFilterConditionData => {
-    const conditionKey = `${property}__${operator}` as TWorkItemFilterConditionKey;
+    const conditionKey = `${property}__${operator}`;
 
     // Convert value to string format
     const stringValue = Array.isArray(value) ? value.join(",") : value;
diff --git a/packages/shared-state/tsconfig.json b/packages/shared-state/tsconfig.json
index 0c2f64d1a8..87d0755004 100644
--- a/packages/shared-state/tsconfig.json
+++ b/packages/shared-state/tsconfig.json
@@ -1,12 +1,11 @@
 {
   "extends": "@plane/typescript-config/react-library.json",
   "compilerOptions": {
-    "jsx": "react",
-    "lib": ["esnext", "dom"],
+    "exactOptionalPropertyTypes": false,
     "paths": {
       "@/*": ["./src/*"]
     }
   },
-  "include": ["./src"],
-  "exclude": ["dist", "build", "node_modules"]
+  "include": ["src"],
+  "exclude": ["dist", "node_modules"]
 }
diff --git a/packages/shared-state/tsdown.config.ts b/packages/shared-state/tsdown.config.ts
new file mode 100644
index 0000000000..78c3dcba86
--- /dev/null
+++ b/packages/shared-state/tsdown.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from "tsdown";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm"],
+  dts: true,
+  platform: "neutral",
+});
diff --git a/packages/tailwind-config/.prettierignore b/packages/tailwind-config/.prettierignore
new file mode 100644
index 0000000000..b0b8bc622a
--- /dev/null
+++ b/packages/tailwind-config/.prettierignore
@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/tailwind-config/AGENTS.md b/packages/tailwind-config/AGENTS.md
new file mode 100644
index 0000000000..57e4876ae6
--- /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 0000000000..3c846184c2
--- /dev/null
+++ b/packages/tailwind-config/animations.css
@@ -0,0 +1,77 @@
+@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;
+    }
+  }
+}
diff --git a/packages/tailwind-config/global.css b/packages/tailwind-config/global.css
deleted file mode 100644
index 95a3b70c7a..0000000000
--- 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 0000000000..ecebd1a56b
--- /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 ada4cc5e81..a3b57b18d5 100644
--- a/packages/tailwind-config/package.json
+++ b/packages/tailwind-config/package.json
@@ -1,16 +1,20 @@
 {
   "name": "@plane/tailwind-config",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "AGPL-3.0",
   "description": "common tailwind configuration across monorepo",
   "main": "tailwind.config.js",
   "private": true,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "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/postcss": "4.1.17",
+    "postcss": "8.5.6",
+    "tailwindcss": "4.1.17"
+  },
+  "exports": {
+    "./index.css": "./index.css",
+    "./postcss.config.js": "./postcss.config.js"
   }
 }
diff --git a/packages/tailwind-config/postcss.config.js b/packages/tailwind-config/postcss.config.js
index cbfea5ea20..48431249a5 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 cc8c113922..0000000000
--- 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 0000000000..a23cbbbd98
--- /dev/null
+++ b/packages/tailwind-config/variables.css
@@ -0,0 +1,1178 @@
+@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"] *));
+
+@theme {
+  --color-*: initial;
+
+  /* ---------- Alpha colors ---------- */
+  /* White alpha */
+  --color-white: oklch(1 0 0);
+  --color-alpha-white-0: oklch(1 0 0 / 0%);
+  --color-alpha-white-100: oklch(1 0 0 / 5%);
+  --color-alpha-white-200: oklch(1 0 0 / 10%);
+  --color-alpha-white-300: oklch(1 0 0 / 15%);
+  --color-alpha-white-400: oklch(1 0 0 / 20%);
+  --color-alpha-white-500: oklch(1 0 0 / 30%);
+  --color-alpha-white-600: oklch(1 0 0 / 40%);
+  --color-alpha-white-700: oklch(1 0 0 / 50%);
+  --color-alpha-white-800: oklch(1 0 0 / 60%);
+  --color-alpha-white-900: oklch(1 0 0 / 70%);
+  --color-alpha-white-1000: oklch(1 0 0 / 80%);
+  --color-alpha-white-1100: oklch(1 0 0 / 90%);
+  --color-alpha-white-1200: oklch(1 0 0 / 95%);
+
+  /* Black alpha */
+  --color-black: oklch(0.1482 0.0034 196.79);
+  --color-alpha-black-0: oklch(0.1482 0.0034 196.79 / 0%);
+  --color-alpha-black-100: oklch(0.1482 0.0034 196.79 / 5%);
+  --color-alpha-black-200: oklch(0.1482 0.0034 196.79 / 10%);
+  --color-alpha-black-300: oklch(0.1482 0.0034 196.79 / 15%);
+  --color-alpha-black-400: oklch(0.1482 0.0034 196.79 / 20%);
+  --color-alpha-black-500: oklch(0.1482 0.0034 196.79 / 30%);
+  --color-alpha-black-600: oklch(0.1482 0.0034 196.79 / 40%);
+  --color-alpha-black-700: oklch(0.1482 0.0034 196.79 / 50%);
+  --color-alpha-black-800: oklch(0.1482 0.0034 196.79 / 60%);
+  --color-alpha-black-900: oklch(0.1482 0.0034 196.79 / 70%);
+  --color-alpha-black-1000: oklch(0.1482 0.0034 196.79 / 80%);
+  --color-alpha-black-1100: oklch(0.1482 0.0034 196.79 / 90%);
+  --color-alpha-black-1200: oklch(0.1482 0.0034 196.79 / 95%);
+
+  /* ---------- 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;
+  --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-*: initial;
+  --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);
+
+  /* ---------- 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;
+
+  /* --------- Priority colors --------- */
+  --color-priority-urgent: oklch(0.5798 0.1766 26.99);
+  --color-priority-high: oklch(0.6802 0.1633 50.67);
+  --color-priority-medium: oklch(0.79 0.1466 82.04);
+  --color-priority-low: oklch(0.579 0.1807 262.31);
+  --color-priority-none: oklch(0.6376 0.0129 231.77);
+
+  /* Priority text colors */
+  --text-color-priority-urgent: var(--color-priority-urgent);
+  --text-color-priority-high: var(--color-priority-high);
+  --text-color-priority-medium: var(--color-priority-medium);
+  --text-color-priority-low: var(--color-priority-low);
+  --text-color-priority-none: var(--color-priority-none);
+
+  /* Priority border colors */
+  --border-color-priority-urgent: var(--color-priority-urgent);
+  --border-color-priority-high: var(--color-priority-high);
+  --border-color-priority-medium: var(--color-priority-medium);
+  --border-color-priority-low: var(--color-priority-low);
+  --border-color-priority-none: var(--color-priority-none);
+
+  /* --------- Extended colors ---------- */
+  /* Purple colors */
+  --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 colors */
+  --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 colors */
+  --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 colors */
+  --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 colors */
+  --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 colors */
+  --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 colors */
+  --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 colors */
+  --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);
+}
+
+/* -------------------- Light mode color tokens -------------------- */
+@theme {
+  /* Neutral colors */
+  --color-neutral-white: oklch(1 0 0);
+  --color-neutral-100: oklch(0.9848 0.0003 230.66);
+  --color-neutral-200: oklch(0.9696 0.0007 230.67);
+  --color-neutral-300: oklch(0.9543 0.001 230.67);
+  --color-neutral-400: oklch(0.9389 0.0014 230.68);
+  --color-neutral-500: oklch(0.9235 0.001733 230.6853);
+  --color-neutral-600: oklch(0.8925 0.0024 230.7);
+  --color-neutral-700: oklch(0.8612 0.0032 230.71);
+  --color-neutral-800: oklch(0.6668 0.0079 230.82);
+  --color-neutral-900: oklch(0.6161 0.009153 230.867);
+  --color-neutral-1000: oklch(0.5288 0.0083 230.88);
+  --color-neutral-1100: oklch(0.4377 0.0066 230.87);
+  --color-neutral-1200: oklch(0.2378 0.0029 230.83);
+  --color-neutral-black: oklch(0.1472 0.0034 230.83);
+
+  /* Brand colors */
+  --color-brand-100: oklch(0.9847 0.0083 236.56);
+  --color-brand-200: oklch(0.9715 0.0167 230.9);
+  --color-brand-300: oklch(0.9428 0.0341 230.22);
+  --color-brand-400: oklch(0.9008 0.0587 232);
+  --color-brand-500: oklch(0.8414 0.0947 233.08);
+  --color-brand-600: oklch(0.7649 0.1392 236.3);
+  --color-brand-700: oklch(0.6766 0.1665 243.91);
+  --color-brand-900: oklch(0.4347 0.104093 242.4823);
+  --color-brand-1000: oklch(0.3399 0.0783 240.32);
+  --color-brand-1100: oklch(0.2626 0.0578 237.5);
+  --color-brand-1200: oklch(0.2093 0.0438 234.02);
+  --color-brand-default: oklch(0.4799 0.1158 242.91);
+
+  /* Green/Success colors */
+  --color-green-100: oklch(0.9819 0.0181 155.83);
+  --color-green-200: oklch(0.9624 0.0434 156.74);
+  --color-green-300: oklch(0.9258 0.0845 155.86);
+  --color-green-400: oklch(0.8704 0.149 154.62);
+  --color-green-500: oklch(0.7914 0.2091 151.66);
+  --color-green-600: oklch(0.7289 0.2119 147.82);
+  --color-green-700: oklch(0.632 0.185972 147.3695);
+  --color-green-800: oklch(0.5296 0.149485 148.9899);
+  --color-green-900: oklch(0.4468 0.1187 151.4);
+  --color-green-1000: oklch(0.3935 0.0957 152.28);
+  --color-green-1100: oklch(0.2654 0.0651 152.77);
+
+  /* Amber/Warning colors */
+  --color-amber-100: oklch(0.9869 0.0214 95.28);
+  --color-amber-200: oklch(0.9617 0.0592 95.89);
+  --color-amber-300: oklch(0.9244 0.1203 95.85);
+  --color-amber-400: oklch(0.8781 0.1688 91.86);
+  --color-amber-500: oklch(0.829 0.1712 81.04);
+  --color-amber-600: oklch(0.7724 0.172798 65.367);
+  --color-amber-700: oklch(0.6671 0.1685 53.38);
+  --color-amber-800: oklch(0.557 0.158291 45.3594);
+  --color-amber-900: oklch(0.4747 0.135757 44.9806);
+  --color-amber-1000: oklch(0.4149 0.1126 45.88);
+  --color-amber-1100: oklch(0.279 0.0773 45.6);
+
+  /* Red/Danger colors */
+  --color-red-100: oklch(0.9705 0.0129 17.38);
+  --color-red-200: oklch(0.9365 0.032 17.74);
+  --color-red-300: oklch(0.8834 0.0616 18.39);
+  --color-red-400: oklch(0.8053 0.1109 19.78);
+  --color-red-500: oklch(0.7022 0.1892 22.23);
+  --color-red-600: oklch(0.6378 0.2373 25.44);
+  --color-red-700: oklch(0.583 0.238666 28.4765);
+  --color-red-800: oklch(0.5095 0.208583 28.513);
+  --color-red-900: oklch(0.4446 0.1774 26.79);
+  --color-red-1000: oklch(0.3967 0.1408 25.71);
+  --color-red-1100: oklch(0.3493 0.1215 25.21);
+
+  /* Scrollbar colors */
+  --color-scrollbar-thumb: var(--color-alpha-black-200);
+  --color-scrollbar-thumb-surface-hover: var(--color-alpha-black-300);
+  --color-scrollbar-thumb-hover: var(--color-alpha-black-400);
+  --color-scrollbar-thumb-active: var(--color-alpha-black-500);
+
+  /* -------------------- Light mode custom(derived) colors -------------------- */
+  /* Background colors */
+  --background-color-canvas: var(--color-neutral-300);
+  --background-color-surface-1: var(--color-neutral-white);
+  --background-color-surface-2: var(--color-neutral-100);
+  --background-color-layer-1: var(--color-neutral-200);
+  --background-color-layer-1-hover: var(--color-neutral-300);
+  --background-color-layer-1-active: var(--color-neutral-400);
+  --background-color-layer-1-selected: var(--color-neutral-400);
+  --background-color-layer-2: var(--color-neutral-white);
+  --background-color-layer-2-hover: var(--color-neutral-100);
+  --background-color-layer-2-active: var(--color-neutral-200);
+  --background-color-layer-2-selected: var(--color-neutral-200);
+  --background-color-layer-3: var(--color-neutral-300);
+  --background-color-layer-3-hover: var(--color-neutral-400);
+  --background-color-layer-3-active: var(--color-neutral-500);
+  --background-color-layer-3-selected: var(--color-neutral-500);
+  --background-color-layer-transparent: var(--color-alpha-white-0);
+  --background-color-layer-transparent-hover: var(--color-alpha-black-100);
+  --background-color-layer-transparent-active: var(--color-alpha-black-200);
+  --background-color-layer-transparent-selected: var(--color-alpha-black-300);
+  --background-color-layer-disabled: var(--color-neutral-400);
+  --background-color-accent-primary: var(--color-brand-default);
+  --background-color-accent-primary-hover: var(--color-brand-900);
+  --background-color-accent-primary-active: var(--color-brand-1000);
+  --background-color-accent-subtle: var(--color-brand-100);
+  --background-color-accent-subtle-hover: var(--color-brand-200);
+  --background-color-accent-subtle-active: var(--color-brand-300);
+  --background-color-success-primary: var(--color-green-700);
+  --background-color-success-subtle: var(--color-green-100);
+  --background-color-success-subtle-1: var(--color-green-200);
+  --background-color-warning-primary: var(--color-amber-600);
+  --background-color-warning-subtle: var(--color-amber-100);
+  --background-color-danger-primary: var(--color-red-700);
+  --background-color-danger-primary-hover: var(--color-red-800);
+  --background-color-danger-primary-active: var(--color-red-900);
+  --background-color-danger-primary-selected: var(--color-red-900);
+  --background-color-danger-subtle: var(--color-red-100);
+  --background-color-danger-subtle-hover: var(--color-red-200);
+  --background-color-danger-subtle-active: var(--color-red-300);
+  --background-color-danger-subtle-selected: var(--color-red-300);
+  --background-color-danger-transparent: var(--color-red-100);
+  --background-color-danger-transparent-hover: var(--color-red-100);
+  --background-color-danger-transparent-active: var(--color-red-100);
+  --background-color-danger-transparent-selected: var(--color-red-100);
+  --background-color-backdrop: var(--color-alpha-black-500);
+  --background-color-inverse: var(--color-alpha-black-1000);
+
+  /* Border colors */
+  --border-color-subtle: var(--color-neutral-400);
+  --border-color-subtle-1: var(--color-neutral-500);
+  --border-color-strong: var(--color-neutral-600);
+  --border-color-strong-1: var(--color-neutral-700);
+  --border-color-inverse: var(--color-neutral-white);
+  --border-color-disabled: var(--color-neutral-300);
+  --border-color-accent-strong: var(--color-brand-default);
+  --border-color-accent-subtle: var(--color-brand-300);
+  --border-color-success-strong: var(--color-green-700);
+  --border-color-success-subtle: var(--color-green-300);
+  --border-color-warning-strong: var(--color-amber-700);
+  --border-color-warning-subtle: var(--color-amber-400);
+  --border-color-danger-strong: var(--color-red-700);
+  --border-color-danger-subtle: var(--color-red-400);
+
+  /* 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(--color-neutral-1200);
+  --text-color-secondary: var(--color-neutral-1100);
+  --text-color-tertiary: var(--color-neutral-1000);
+  --text-color-placeholder: var(--color-neutral-900);
+  --text-color-disabled: var(--color-neutral-800);
+  --text-color-accent-primary: var(--color-brand-default);
+  --text-color-accent-secondary: var(--color-brand-700);
+  --text-color-on-color: var(--color-neutral-100);
+  --text-color-on-color-disabled: var(--color-alpha-black-400);
+  --text-color-inverse: var(--color-neutral-white);
+  --text-color-success: var(--color-green-700);
+  --text-color-success-primary: var(--color-green-900);
+  --text-color-success-secondary: var(--color-green-700);
+  --text-color-warning: var(--color-amber-700);
+  --text-color-warning-primary: var(--color-amber-900);
+  --text-color-warning-secondary: var(--color-amber-700);
+  --text-color-danger: var(--color-red-700);
+  --text-color-danger-primary: var(--color-red-900);
+  --text-color-danger-secondary: var(--color-red-700);
+
+  /* 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(--color-neutral-1200);
+  --text-color-icon-accent-subtle: var(--color-brand-500);
+  --text-color-icon-accent-primary: var(--color-brand-default);
+  --text-color-icon-danger-primary: var(--color-red-900);
+  --text-color-icon-danger-secondary: var(--color-red-700);
+  --text-color-icon-success-primary: var(--color-green-900);
+  --text-color-icon-success-secondary: var(--color-green-700);
+  --text-color-icon-warning-primary: var(--color-amber-900);
+  --text-color-icon-warning-secondary: var(--color-amber-700);
+  --text-color-icon-accent-primary-inverse: var(--color-brand-900);
+  --text-color-icon-accent-secondary: var(--color-brand-1200);
+  --text-color-icon-secondary: var(--color-neutral-1100);
+  --text-color-icon-tertiary: var(--color-neutral-900);
+  --text-color-icon-placeholder: var(--color-neutral-800);
+  --text-color-icon-disabled: var(--color-neutral-700);
+  --text-color-icon-danger: var(--color-red-700);
+  --text-color-icon-on-color: var(--color-neutral-white);
+  --text-color-icon-on-color-disabled: var(--color-alpha-black-400);
+  --text-color-icon-inverse: var(--color-neutral-white);
+
+  /* Link colors */
+  --text-color-link-primary: var(--color-brand-default);
+  --text-color-link-primary-hover: var(--color-brand-900);
+  --text-color-link-secondary: var(--color-neutral-900);
+
+  /* Label colors */
+  --color-label-indigo-bg: var(--extended-color-indigo-100);
+  --color-label-indigo-bg-strong: var(--extended-color-indigo-700);
+  --color-label-indigo-hover: var(--extended-color-indigo-300);
+  --color-label-indigo-icon: var(--extended-color-indigo-700);
+  --color-label-indigo-text: var(--extended-color-indigo-700);
+  --color-label-indigo-border: var(--extended-color-indigo-700);
+  --color-label-indigo-focus: var(--extended-color-indigo-500);
+  --color-label-emerald-bg: var(--extended-color-emerald-50);
+  --color-label-emerald-bg-strong: var(--extended-color-emerald-600);
+  --color-label-emerald-hover: var(--extended-color-emerald-200);
+  --color-label-emerald-icon: var(--extended-color-emerald-600);
+  --color-label-emerald-text: var(--extended-color-emerald-800);
+  --color-label-emerald-border: var(--extended-color-emerald-800);
+  --color-label-emerald-focus: var(--extended-color-emerald-700);
+  --color-label-grey-bg: var(--extended-color-grey-50);
+  --color-label-grey-bg-strong: var(--extended-color-grey-700);
+  --color-label-grey-hover: var(--extended-color-grey-100);
+  --color-label-grey-icon: var(--extended-color-grey-700);
+  --color-label-grey-text: var(--extended-color-grey-700);
+  --color-label-grey-border: var(--extended-color-grey-700);
+  --color-label-grey-focus: var(--extended-color-grey-500);
+  --color-label-crimson-bg: var(--extended-color-crimson-50);
+  --color-label-crimson-bg-strong: var(--extended-color-crimson-700);
+  --color-label-crimson-hover: var(--extended-color-crimson-100);
+  --color-label-crimson-icon: var(--extended-color-crimson-700);
+  --color-label-crimson-text: var(--extended-color-crimson-700);
+  --color-label-crimson-border: var(--extended-color-crimson-700);
+  --color-label-crimson-focus: var(--extended-color-crimson-500);
+  --color-label-yellow-bg: var(--extended-color-yellow-50);
+  --color-label-yellow-bg-strong: var(--extended-color-yellow-600);
+  --color-label-yellow-hover: var(--extended-color-yellow-100);
+  --color-label-yellow-icon: var(--extended-color-yellow-600);
+  --color-label-yellow-text: var(--extended-color-yellow-600);
+  --color-label-yellow-border: var(--extended-color-yellow-600);
+  --color-label-yellow-focus: var(--extended-color-yellow-400);
+
+  /* Illustration colors */
+  --illustration-fill-primary: var(--color-neutral-white);
+  --illustration-fill-secondary: var(--color-neutral-200);
+  --illustration-fill-tertiary: var(--color-neutral-400);
+  --illustration-fill-quaternary: var(--color-neutral-700);
+  --illustration-stroke-primary: var(--color-neutral-700);
+  --illustration-stroke-secondary: var(--color-neutral-800);
+  --illustration-stroke-tertiary: var(--color-neutral-1200);
+
+  /* Neutral plan colors */
+  --text-color-plans-neutral-primary: var(--color-neutral-1000);
+  --text-color-plans-neutral-color: var(--color-neutral-100);
+  --background-color-plans-neutral-subtle: var(--color-neutral-400);
+  --background-color-plans-neutral-solid: var(--color-neutral-1200);
+
+  /* Brand plan colors */
+  --text-color-plans-brand-primary: var(--color-brand-1200);
+  --text-color-plans-brand-color: var(--color-neutral-100);
+  --background-color-plans-brand-subtle: var(--color-brand-200);
+  --background-color-plans-brand-solid: var(--color-brand-1200);
+}
+
+@layer theme {
+  :root,
+  :host {
+    /* ---------- Dark mode color tokens ---------- */
+    @variant dark {
+      /* Neutral colors */
+      --color-neutral-black: oklch(0.1689 0.0021 230.81);
+      --color-neutral-100: oklch(0.1932 0.002 230.81);
+      --color-neutral-200: oklch(0.2158 0.0025 230.82);
+      --color-neutral-300: oklch(0.2378 0.0029 230.83);
+      --color-neutral-400: oklch(0.2593 0.0033 230.84);
+      --color-neutral-500: oklch(0.3011 0.0041 230.85);
+      --color-neutral-600: oklch(0.3415 0.0049 230.86);
+      --color-neutral-700: oklch(0.3999 0.0059 230.87);
+      --color-neutral-800: oklch(0.5989 0.0096 230.88);
+      --color-neutral-900: oklch(0.6835 0.0074 230.81);
+      --color-neutral-1000: oklch(0.7655 0.0054 230.76);
+      --color-neutral-1100: oklch(0.8455 0.0035 230.72);
+      --color-neutral-1200: oklch(0.9235 0.001733 230.6853);
+      --color-neutral-white: oklch(0.9702 0 0);
+
+      /* Brand colors */
+      --color-brand-100: oklch(0.2029 0.03 232.24);
+      --color-brand-200: oklch(0.2513 0.0418 234.6);
+      --color-brand-300: oklch(0.3208 0.05806 236.44);
+      --color-brand-400: oklch(0.4088 0.077702 237.13);
+      --color-brand-500: oklch(0.4511 0.087024 237.37);
+      --color-brand-700: oklch(0.7408 0.100309 233.89);
+      --color-brand-800: oklch(0.8318 0.065614 232.07);
+      --color-brand-900: oklch(0.8969 0.040089 231.35);
+      --color-brand-1000: oklch(0.9409 0.022883 231.01);
+      --color-brand-1100: oklch(0.9704 0.011421 230.82);
+      --color-brand-1200: oklch(0.9856 0.005 228.82);
+      --color-brand-default: oklch(0.6311 0.126281 238.01);
+
+      /* Green colors */
+      --color-green-100: oklch(0.2721 0.067322 152.52);
+      --color-green-200: oklch(0.3935 0.0957 152.28);
+      --color-green-300: oklch(0.4468 0.1187 151.4);
+      --color-green-400: oklch(0.5296 0.149485 148.9899);
+      --color-green-500: oklch(0.632 0.185972 147.3695);
+      --color-green-600: oklch(0.7289 0.2119 147.82);
+      --color-green-700: oklch(0.7914 0.2091 151.66);
+      --color-green-800: oklch(0.8704 0.149 154.62);
+      --color-green-900: oklch(0.9258 0.0845 155.86);
+      --color-green-1000: oklch(0.9624 0.0434 156.74);
+      --color-green-1100: oklch(0.9819 0.0181 155.83);
+
+      /* Amber colors */
+      --color-amber-100: oklch(0.3042 0.0853 45.16);
+      --color-amber-200: oklch(0.4149 0.1126 45.88);
+      --color-amber-300: oklch(0.4747 0.135757 44.9806);
+      --color-amber-400: oklch(0.557 0.158291 45.3594);
+      --color-amber-500: oklch(0.6671 0.1685 53.38);
+      --color-amber-600: oklch(0.7724 0.172798 65.367);
+      --color-amber-700: oklch(0.829 0.1712 81.04);
+      --color-amber-800: oklch(0.8781 0.1688 91.86);
+      --color-amber-900: oklch(0.9244 0.1203 95.85);
+      --color-amber-1000: oklch(0.9617 0.0592 95.89);
+      --color-amber-1100: oklch(0.9869 0.0214 95.28);
+
+      /* Red colors */
+      --color-red-100: oklch(0.2615 0.085 24.41);
+      --color-red-200: oklch(0.3967 0.1408 25.71);
+      --color-red-300: oklch(0.4446 0.1774 26.79);
+      --color-red-400: oklch(0.5095 0.208583 28.513);
+      --color-red-500: oklch(0.583 0.238666 28.4765);
+      --color-red-600: oklch(0.6378 0.2373 25.44);
+      --color-red-700: oklch(0.7022 0.1892 22.23);
+      --color-red-800: oklch(0.8053 0.1109 19.78);
+      --color-red-900: oklch(0.8834 0.0616 18.39);
+      --color-red-1000: oklch(0.9365 0.032 17.74);
+      --color-red-1100: oklch(0.9705 0.0129 17.38);
+
+      /* Scrollbar colors */
+      --color-scrollbar-thumb: var(--color-alpha-white-200);
+      --color-scrollbar-thumb-surface-hover: var(--color-alpha-white-300);
+      --color-scrollbar-thumb-hover: var(--color-alpha-white-400);
+      --color-scrollbar-thumb-active: var(--color-alpha-white-500);
+
+      /* -------------------- Dark mode derived colors -------------------- */
+      /* Background colors */
+      --background-color-canvas: var(--color-neutral-black);
+      --background-color-surface-1: var(--color-neutral-100);
+      --background-color-surface-2: var(--color-neutral-200);
+      --background-color-layer-1: var(--color-neutral-200);
+      --background-color-layer-1-hover: var(--color-neutral-300);
+      --background-color-layer-1-active: var(--color-neutral-400);
+      --background-color-layer-1-selected: var(--color-neutral-400);
+      --background-color-layer-2: var(--color-neutral-300);
+      --background-color-layer-2-hover: var(--color-neutral-400);
+      --background-color-layer-2-active: var(--color-neutral-500);
+      --background-color-layer-2-selected: var(--color-neutral-500);
+      --background-color-layer-3: var(--color-neutral-400);
+      --background-color-layer-3-hover: var(--color-neutral-500);
+      --background-color-layer-3-active: var(--color-neutral-600);
+      --background-color-layer-3-selected: var(--color-neutral-600);
+      --background-color-layer-transparent: var(--color-alpha-black-0);
+      --background-color-layer-transparent-hover: var(--color-alpha-white-100);
+      --background-color-layer-transparent-active: var(--color-alpha-white-200);
+      --background-color-layer-transparent-selected: var(--color-alpha-white-300);
+      --background-color-layer-disabled: var(--color-neutral-700);
+      --background-color-accent-primary: var(--color-brand-default);
+      --background-color-accent-primary-hover: var(--color-brand-500);
+      --background-color-accent-primary-active: var(--color-brand-400);
+      --background-color-accent-subtle: var(--color-brand-100);
+      --background-color-accent-subtle-hover: var(--color-brand-200);
+      --background-color-accent-subtle-active: var(--color-brand-300);
+      --background-color-success-primary: var(--color-green-700);
+      --background-color-success-subtle: var(--color-green-100);
+      --background-color-success-subtle-1: var(--color-green-100);
+      --background-color-warning-primary: var(--color-amber-600);
+      --background-color-warning-subtle: var(--color-amber-100);
+      --background-color-danger-primary: var(--color-red-300);
+      --background-color-danger-primary-hover: var(--color-red-400);
+      --background-color-danger-primary-active: var(--color-red-500);
+      --background-color-danger-primary-selected: var(--color-red-500);
+      --background-color-danger-subtle: var(--color-red-100);
+      --background-color-danger-subtle-hover: var(--color-red-200);
+      --background-color-danger-subtle-active: var(--color-red-300);
+      --background-color-danger-subtle-selected: var(--color-red-300);
+      --background-color-danger-transparent: var(--color-red-100);
+      --background-color-danger-transparent-hover: var(--color-red-100);
+      --background-color-danger-transparent-active: var(--color-red-100);
+      --background-color-danger-transparent-selected: var(--color-red-100);
+      --background-color-backdrop: var(--color-alpha-black-1000);
+      --background-color-inverse: var(--color-alpha-white-1000);
+
+      /* Border colors */
+      --border-color-subtle: var(--color-neutral-400);
+      --border-color-subtle-1: var(--color-neutral-500);
+      --border-color-strong: var(--color-neutral-600);
+      --border-color-strong-1: var(--color-neutral-700);
+      --border-color-inverse: var(--color-neutral-100);
+      --border-color-disabled: var(--color-neutral-300);
+      --border-color-accent-strong: var(--color-brand-default);
+      --border-color-accent-subtle: var(--color-brand-300);
+      --border-color-success-strong: var(--color-green-400);
+      --border-color-success-subtle: var(--color-green-200);
+      --border-color-warning-strong: var(--color-amber-400);
+      --border-color-warning-subtle: var(--color-amber-200);
+      --border-color-danger-strong: var(--color-red-400);
+      --border-color-danger-subtle: var(--color-red-200);
+
+      /* Text colors */
+      --text-color-primary: var(--color-neutral-1200);
+      --text-color-secondary: var(--color-neutral-1100);
+      --text-color-tertiary: var(--color-neutral-1000);
+      --text-color-placeholder: var(--color-neutral-900);
+      --text-color-disabled: var(--color-neutral-800);
+      --text-color-accent-primary: var(--color-brand-default);
+      --text-color-accent-secondary: var(--color-brand-700);
+      --text-color-on-color: var(--color-neutral-1200);
+      --text-color-on-color-disabled: var(--color-alpha-white-400);
+      --text-color-inverse: var(--color-neutral-black);
+      --text-color-success: var(--color-green-700);
+      --text-color-success-primary: var(--color-green-900);
+      --text-color-success-secondary: var(--color-green-700);
+      --text-color-warning: var(--color-amber-700);
+      --text-color-warning-primary: var(--color-amber-900);
+      --text-color-warning-secondary: var(--color-amber-700);
+      --text-color-danger: var(--color-red-700);
+      --text-color-danger-primary: var(--color-red-900);
+      --text-color-danger-secondary: var(--color-red-700);
+
+      /* Icon colors */
+      --text-color-icon-primary: var(--color-neutral-1200);
+      --text-color-icon-accent-subtle: var(--color-brand-700);
+      --text-color-icon-accent-primary: var(--color-brand-default);
+      --text-color-icon-accent-primary-inverse: var(--color-brand-900);
+      --text-color-icon-accent-secondary: var(--color-brand-1200);
+      --text-color-icon-danger-primary: var(--color-red-900);
+      --text-color-icon-danger-secondary: var(--color-red-700);
+      --text-color-icon-success-primary: var(--color-green-900);
+      --text-color-icon-success-secondary: var(--color-green-700);
+      --text-color-icon-warning-primary: var(--color-amber-900);
+      --text-color-icon-warning-secondary: var(--color-amber-700);
+      --text-color-icon-secondary: var(--color-neutral-1100);
+      --text-color-icon-tertiary: var(--color-neutral-1000);
+      --text-color-icon-placeholder: var(--color-neutral-800);
+      --text-color-icon-disabled: var(--color-neutral-700);
+      --text-color-icon-danger: var(--color-red-700);
+      --text-color-icon-on-color: var(--color-neutral-white);
+      --text-color-icon-on-color-disabled: var(--color-alpha-white-400);
+      --text-color-icon-inverse: var(--color-neutral-black);
+
+      /* Link colors */
+      --text-color-link-primary: var(--color-brand-default);
+      --text-color-link-primary-hover: var(--color-brand-700);
+      --text-color-link-secondary: var(--color-neutral-1100);
+
+      /* Label colors */
+      --color-label-indigo-bg: var(--extended-color-indigo-800);
+      --color-label-indigo-bg-strong: var(--extended-color-indigo-500);
+      --color-label-indigo-hover: var(--extended-color-indigo-700);
+      --color-label-indigo-icon: var(--extended-color-indigo-500);
+      --color-label-indigo-text: var(--extended-color-indigo-500);
+      --color-label-indigo-border: var(--extended-color-indigo-500);
+      --color-label-indigo-focus: var(--extended-color-indigo-400);
+      --color-label-emerald-bg: var(--extended-color-emerald-700);
+      --color-label-emerald-bg-strong: var(--extended-color-emerald-600);
+      --color-label-emerald-hover: var(--extended-color-emerald-800);
+      --color-label-emerald-icon: var(--extended-color-emerald-600);
+      --color-label-emerald-text: var(--extended-color-emerald-400);
+      --color-label-emerald-border: var(--extended-color-emerald-400);
+      --color-label-emerald-focus: var(--extended-color-emerald-700);
+      --color-label-grey-bg: var(--extended-color-grey-800);
+      --color-label-grey-bg-strong: var(--extended-color-grey-500);
+      --color-label-grey-hover: var(--extended-color-grey-700);
+      --color-label-grey-icon: var(--extended-color-grey-500);
+      --color-label-grey-text: var(--extended-color-grey-500);
+      --color-label-grey-border: var(--extended-color-grey-500);
+      --color-label-grey-focus: var(--extended-color-grey-400);
+      --color-label-crimson-bg: var(--extended-color-crimson-800);
+      --color-label-crimson-bg-strong: var(--extended-color-crimson-500);
+      --color-label-crimson-hover: var(--extended-color-crimson-700);
+      --color-label-crimson-icon: var(--extended-color-crimson-500);
+      --color-label-crimson-text: var(--extended-color-crimson-500);
+      --color-label-crimson-border: var(--extended-color-crimson-500);
+      --color-label-crimson-focus: var(--extended-color-crimson-400);
+      --color-label-yellow-bg: var(--extended-color-yellow-900);
+      --color-label-yellow-bg-strong: var(--extended-color-yellow-500);
+      --color-label-yellow-hover: var(--extended-color-yellow-800);
+      --color-label-yellow-icon: var(--extended-color-yellow-500);
+      --color-label-yellow-text: var(--extended-color-yellow-500);
+      --color-label-yellow-border: var(--extended-color-yellow-500);
+      --color-label-yellow-focus: var(--extended-color-yellow-400);
+
+      /* Illustration colors */
+      --illustration-fill-primary: var(--color-neutral-400);
+      --illustration-fill-secondary: var(--color-neutral-500);
+      --illustration-fill-tertiary: var(--color-neutral-700);
+      --illustration-fill-quaternary: var(--color-neutral-700);
+      --illustration-stroke-primary: var(--color-neutral-700);
+      --illustration-stroke-secondary: var(--color-neutral-800);
+      --illustration-stroke-tertiary: var(--color-neutral-1000);
+
+      /* Neutral plan colors */
+      --text-color-plans-neutral-primary: var(--color-neutral-1000);
+      --text-color-plans-neutral-color: var(--color-neutral-100);
+      --background-color-plans-neutral-subtle: var(--color-neutral-500);
+      --background-color-plans-neutral-solid: var(--color-neutral-1100);
+
+      /* Brand plan colors */
+      --text-color-plans-brand-primary: var(--color-brand-1000);
+      --text-color-plans-brand-color: var(--color-brand-100);
+      --background-color-plans-brand-subtle: var(--color-brand-200);
+      --background-color-plans-brand-solid: var(--colo-brand-1100);
+    }
+
+    /* -------------------- Dark high contrast mode derived colors -------------------- */
+    @variant dark-high-contrast {
+      /* Border colors */
+      --border-color-subtle: var(--color-neutral-1200);
+      --border-color-subtle-1: var(--color-neutral-1100);
+      --border-color-strong: var(--color-neutral-1000);
+      --border-color-strong-1: var(--color-neutral-900);
+      --border-color-inverse: var(--color-neutral-white);
+      --border-color-disabled: var(--color-neutral-700);
+      --border-color-accent-strong: var(--color-brand-default);
+      --border-color-accent-subtle: var(--color-brand-300);
+      --border-color-success-strong: var(--color-green-400);
+      --border-color-success-subtle: var(--color-green-200);
+      --border-color-warning-strong: var(--color-amber-400);
+      --border-color-warning-subtle: var(--color-amber-200);
+      --border-color-danger-strong: var(--color-red-400);
+      --border-color-danger-subtle: var(--color-red-200);
+    }
+
+    /* -------------------- Light high contrast mode derived colors -------------------- */
+    @variant light-high-contrast {
+      /* Border colors */
+      --border-color-subtle: var(--color-neutral-1200);
+      --border-color-subtle-1: var(--color-neutral-1100);
+      --border-color-strong: var(--color-neutral-1000);
+      --border-color-strong-1: var(--color-neutral-900);
+      --border-color-inverse: var(--color-neutral-black);
+      --border-color-disabled: var(--color-neutral-700);
+      --border-color-accent-strong: var(--color-brand-default);
+      --border-color-accent-subtle: var(--color-brand-300);
+      --border-color-success-strong: var(--color-green-700);
+      --border-color-success-subtle: var(--color-green-600);
+      --border-color-warning-strong: var(--color-amber-700);
+      --border-color-warning-subtle: var(--color-amber-400);
+      --border-color-danger-strong: var(--color-red-700);
+      --border-color-danger-subtle: var(--color-red-400);
+    }
+  }
+}
+
+/* ---------- 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-16);
+  --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-16);
+  --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-16);
+  --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-16);
+  --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-14);
+  --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-14);
+  --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-14);
+  --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-14);
+  --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 p-page-x {
+  padding: 1.35rem;
+}
+
+@utility px-page-x {
+  padding-left: 1.35rem;
+  padding-right: 1.35rem;
+}
+
+@utility py-page-y {
+  padding-top: 1.35rem;
+  padding-bottom: 1.35rem;
+}
+
+@utility pt-page-y {
+  padding-top: 1.35rem;
+}
+
+@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/.eslintrc.js b/packages/types/.eslintrc.js
deleted file mode 100644
index ba0e590e8e..0000000000
--- a/packages/types/.eslintrc.js
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["@plane/eslint-config/library.js"],
-};
diff --git a/packages/types/.prettierignore b/packages/types/.prettierignore
index 90b14aaf9d..b0b8bc622a 100644
--- a/packages/types/.prettierignore
+++ b/packages/types/.prettierignore
@@ -1,7 +1,10 @@
-.turbo
-out/
-dist/
+.next/
+.react-router/
+.turbo/
+.vite/
 build/
-.next
-.vercel
-.turbo
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/types/.prettierrc b/packages/types/.prettierrc
deleted file mode 100644
index 87d988f1b2..0000000000
--- a/packages/types/.prettierrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "printWidth": 120,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}
diff --git a/packages/types/package.json b/packages/types/package.json
index 3537c81d37..56840345fd 100644
--- a/packages/types/package.json
+++ b/packages/types/package.json
@@ -1,23 +1,21 @@
 {
   "name": "@plane/types",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "AGPL-3.0",
   "private": true,
+  "type": "module",
   "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    },
+    ".": "./dist/index.mjs",
     "./package.json": "./package.json"
   },
   "scripts": {
     "dev": "tsdown --watch",
     "build": "tsdown",
-    "check:lint": "eslint . --max-warnings 36",
+    "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=151",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check \"**/*.{ts,tsx,md,json,css,scss}\"",
-    "fix:lint": "eslint . --fix",
-    "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\"",
+    "check:format": "prettier . --cache --check",
+    "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=151",
+    "fix:format": "prettier . --cache --write",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "peerDependencies": {
@@ -25,14 +23,14 @@
     "react-dom": "catalog:"
   },
   "devDependencies": {
-    "@plane/eslint-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
+    "@types/node": "catalog:",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "tsdown": "catalog:",
     "typescript": "catalog:"
   },
-  "main": "./dist/index.js",
+  "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts"
+  "types": "./dist/index.d.mts"
 }
diff --git a/packages/types/src/base-layouts/base.ts b/packages/types/src/base-layouts/base.ts
index 6bd7d441c8..0e0cd8a9af 100644
--- a/packages/types/src/base-layouts/base.ts
+++ b/packages/types/src/base-layouts/base.ts
@@ -79,8 +79,7 @@ export interface IBaseLayoutsBaseProps<T extends IBaseLayoutsBaseItem> extends I
 // Group Props
 
 export interface IBaseLayoutsBaseGroupProps<T extends IBaseLayoutsBaseItem>
-  extends IDragDropHandlers<T>,
-    IRenderProps<T> {
+  extends IDragDropHandlers<T>, IRenderProps<T> {
   group: IBaseLayoutsBaseGroup;
   itemIds: string[];
   items: Record<string, T>;
@@ -92,8 +91,7 @@ export interface IBaseLayoutsBaseGroupProps<T extends IBaseLayoutsBaseItem>
 // Item Props
 
 export interface IBaseLayoutsBaseItemProps<T extends IBaseLayoutsBaseItem>
-  extends IDragDropHandlers<T>,
-    IItemRenderProps<T> {
+  extends IDragDropHandlers<T>, IItemRenderProps<T> {
   item: T;
   index: number;
   groupId: string;
diff --git a/packages/types/src/base-layouts/gantt/index.ts b/packages/types/src/base-layouts/gantt/index.ts
index 5787d93153..147cd06d6e 100644
--- a/packages/types/src/base-layouts/gantt/index.ts
+++ b/packages/types/src/base-layouts/gantt/index.ts
@@ -56,7 +56,8 @@ export type TGanttDisplayOptions = {
 
 // Main Gantt Layout Props
 export interface IBaseLayoutsGanttProps<T extends IBaseLayoutsGanttItem>
-  extends Omit<IBaseLayoutsBaseProps<T>, "renderItem" | "enableDragDrop" | "onDrop" | "canDrag">,
+  extends
+    Omit<IBaseLayoutsBaseProps<T>, "renderItem" | "enableDragDrop" | "onDrop" | "canDrag">,
     IGanttRenderProps<T>,
     IGanttCapabilities,
     TGanttDisplayOptions {
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index c646506a15..9908d5dba6 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -24,6 +24,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";
@@ -32,6 +33,7 @@ export * from "./pragmatic";
 export * from "./project";
 export * from "./publish";
 export * from "./reaction";
+export * from "./intake";
 export * from "./rich-filters";
 export * from "./search";
 export * from "./state";
diff --git a/packages/types/src/instance/auth-ee.ts b/packages/types/src/instance/auth-ee.ts
index 0ffe5501cc..115f0bac01 100644
--- a/packages/types/src/instance/auth-ee.ts
+++ b/packages/types/src/instance/auth-ee.ts
@@ -1 +1,3 @@
-export type TExtendedInstanceAuthenticationModeKeys = never;
\ No newline at end of file
+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 93b287d2da..de0612a3f4 100644
--- a/packages/types/src/instance/auth.ts
+++ b/packages/types/src/instance/auth.ts
@@ -30,19 +30,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
@@ -70,3 +79,5 @@ 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 742698f563..10aa0d39ab 100644
--- a/packages/types/src/instance/base.ts
+++ b/packages/types/src/instance/base.ts
@@ -5,7 +5,9 @@ import type {
   TInstanceImageConfigurationKeys,
   TInstanceAuthenticationKeys,
   TInstanceWorkspaceConfigurationKeys,
+  TCoreLoginMediums,
 } from "./";
+import type { TExtendedLoginMediums } from "./auth-ee";
 
 export interface IInstanceInfo {
   instance: IInstance;
@@ -56,6 +58,7 @@ export interface IInstanceConfig {
   app_base_url: string | undefined;
   space_base_url: string | undefined;
   admin_base_url: string | undefined;
+  is_self_managed: boolean;
   // intercom
   is_intercom_enabled: boolean;
   intercom_app_id: string | undefined;
@@ -97,3 +100,5 @@ export interface IInstanceConfiguration {
 export type IFormattedInstanceConfiguration = {
   [key in TInstanceConfigurationKeys]: string;
 };
+
+export type TLoginMediums = TCoreLoginMediums | TExtendedLoginMediums;
diff --git a/packages/types/src/instance/index.ts b/packages/types/src/instance/index.ts
index bc6474b832..ec67eb273a 100644
--- a/packages/types/src/instance/index.ts
+++ b/packages/types/src/instance/index.ts
@@ -1,5 +1,6 @@
 export * from "./ai";
 export * from "./auth";
+export * from "./auth-ee";
 export * from "./base";
 export * from "./email";
 export * from "./image";
diff --git a/packages/types/src/intake/index.ts b/packages/types/src/intake/index.ts
new file mode 100644
index 0000000000..be6f715713
--- /dev/null
+++ b/packages/types/src/intake/index.ts
@@ -0,0 +1 @@
+export * from "./state";
diff --git a/packages/types/src/intake/state.ts b/packages/types/src/intake/state.ts
new file mode 100644
index 0000000000..27984a0707
--- /dev/null
+++ b/packages/types/src/intake/state.ts
@@ -0,0 +1,13 @@
+export type TIntakeStateGroups = "triage";
+
+export interface IIntakeState {
+  readonly id: string;
+  color: string;
+  default: boolean;
+  description: string;
+  group: TIntakeStateGroups;
+  name: string;
+  project_id: string;
+  sequence: number;
+  workspace_id: string;
+}
diff --git a/packages/types/src/issues/activity/issue_comment.ts b/packages/types/src/issues/activity/issue_comment.ts
index a4d887be54..f5a411e53d 100644
--- a/packages/types/src/issues/activity/issue_comment.ts
+++ b/packages/types/src/issues/activity/issue_comment.ts
@@ -47,6 +47,7 @@ export type TCommentsOperations = {
   updateComment: (commentId: string, data: Partial<TIssueComment>) => Promise<void>;
   removeComment: (commentId: string) => Promise<void>;
   uploadCommentAsset: (blockId: string, file: File, commentId?: string) => Promise<TFileSignedURLResponse>;
+  duplicateCommentAsset: (assetId: string, commentId?: string) => Promise<{ asset_id: string }>;
   addCommentReaction: (commentId: string, reactionEmoji: string) => Promise<void>;
   deleteCommentReaction: (commentId: string, reactionEmoji: string) => Promise<void>;
   react: (commentId: string, reactionEmoji: string, userReactions: string[]) => Promise<void>;
diff --git a/packages/types/src/issues/issue-identifier.ts b/packages/types/src/issues/issue-identifier.ts
new file mode 100644
index 0000000000..26a070b5db
--- /dev/null
+++ b/packages/types/src/issues/issue-identifier.ts
@@ -0,0 +1,37 @@
+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 127dc1cad4..9a6aa5d5a8 100644
--- a/packages/types/src/issues/issue.ts
+++ b/packages/types/src/issues/issue.ts
@@ -153,31 +153,30 @@ export type TWorkItemWidgets = "sub-work-items" | "relations" | "links" | "attac
 
 export type TIssueServiceType = EIssueServiceType.ISSUES | EIssueServiceType.EPICS | EIssueServiceType.WORK_ITEMS;
 
-export interface IPublicIssue
-  extends Pick<
-    TIssue,
-    | "description_html"
-    | "created_at"
-    | "updated_at"
-    | "created_by"
-    | "id"
-    | "name"
-    | "priority"
-    | "state_id"
-    | "project_id"
-    | "sequence_id"
-    | "sort_order"
-    | "start_date"
-    | "target_date"
-    | "cycle_id"
-    | "module_ids"
-    | "label_ids"
-    | "assignee_ids"
-    | "attachment_count"
-    | "sub_issues_count"
-    | "link_count"
-    | "estimate_point"
-  > {
+export interface IPublicIssue extends Pick<
+  TIssue,
+  | "description_html"
+  | "created_at"
+  | "updated_at"
+  | "created_by"
+  | "id"
+  | "name"
+  | "priority"
+  | "state_id"
+  | "project_id"
+  | "sequence_id"
+  | "sort_order"
+  | "start_date"
+  | "target_date"
+  | "cycle_id"
+  | "module_ids"
+  | "label_ids"
+  | "assignee_ids"
+  | "attachment_count"
+  | "sub_issues_count"
+  | "link_count"
+  | "estimate_point"
+> {
   comments: TIssuePublicComment[];
   reaction_items: IIssuePublicReaction[];
   vote_items: IPublicVote[];
diff --git a/packages/types/src/project/projects.ts b/packages/types/src/project/projects.ts
index afcb28793c..9da12b5703 100644
--- a/packages/types/src/project/projects.ts
+++ b/packages/types/src/project/projects.ts
@@ -51,6 +51,7 @@ export interface IProject extends IPartialProject {
   is_favorite?: boolean;
   members?: string[];
   timezone?: string;
+  next_work_item_sequence?: number;
 }
 
 export type TProjectAnalyticsCountParams = {
@@ -110,6 +111,27 @@ export interface IProjectBulkAddFormData {
   members: { role: TUserPermissions | EUserProjectRoles; member_id: string }[];
 }
 
+export type IProjectMemberNavigationPreferences = {
+  default_tab: string;
+  hide_in_more_menu: string[];
+};
+
+export type IProjectMemberPreferencesUpdate = {
+  navigation: IProjectMemberNavigationPreferences;
+};
+
+export type IProjectMemberPreferencesResponse = {
+  preferences: {
+    navigation: IProjectMemberNavigationPreferences;
+  };
+};
+
+export type IProjectMemberPreferencesFullResponse = IProjectMemberPreferencesResponse & {
+  project_id: string;
+  member_id: string;
+  workspace_id: string;
+};
+
 export interface IGithubRepository {
   id: string;
   full_name: string;
diff --git a/packages/types/src/users.ts b/packages/types/src/users.ts
index ef1bfa5a2d..327cbb482d 100644
--- a/packages/types/src/users.ts
+++ b/packages/types/src/users.ts
@@ -1,5 +1,6 @@
 import type { TUserPermissions } from "./enums";
 import type { IIssueActivity, TIssuePriorities, TStateGroups } from ".";
+import type { TLoginMediums } from "./instance";
 
 /**
  * @description The start of the week for the user
@@ -15,8 +16,6 @@ export enum EStartOfTheWeek {
   SATURDAY = 6,
 }
 
-export type TLoginMediums = "email" | "magic-code" | "github" | "gitlab" | "google";
-
 export interface IUserLite {
   avatar_url: string;
   display_name: string;
@@ -60,14 +59,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;
@@ -102,14 +97,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/workspace.ts b/packages/types/src/workspace.ts
index 356d0993ec..8c37ff2391 100644
--- a/packages/types/src/workspace.ts
+++ b/packages/types/src/workspace.ts
@@ -3,6 +3,7 @@ import type { ICycle } from "./cycle";
 import type { TUserPermissions } from "./enums";
 import type { TProjectMembership } from "./project";
 import type { IUser, IUserLite } from "./users";
+import type { TLoginMediums } from "./instance";
 import type { IWorkspaceViewProps } from "./view-props";
 
 export enum EUserWorkspaceRoles {
@@ -26,6 +27,7 @@ export interface IWorkspace {
   organization_size: string;
   total_projects?: number;
   role: number;
+  timezone: string;
 }
 
 export interface IWorkspaceLite {
@@ -82,7 +84,7 @@ export interface IWorkspaceMember {
   last_name?: string;
   joining_date?: string;
   display_name?: string;
-  last_login_medium?: string;
+  last_login_medium?: TLoginMediums;
   is_active?: boolean;
 }
 
@@ -227,7 +229,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/types/tsconfig.json b/packages/types/tsconfig.json
index 9a94573fb5..c3fc87213e 100644
--- a/packages/types/tsconfig.json
+++ b/packages/types/tsconfig.json
@@ -1,11 +1,5 @@
 {
-  "extends": "@plane/typescript-config/base.json",
-  "compilerOptions": {
-    "outDir": "dist",
-    "rootDir": "src",
-    "allowSyntheticDefaultImports": true,
-    "strictNullChecks": true
-  },
+  "extends": "@plane/typescript-config/node-library.json",
   "include": ["src/**/*"],
   "exclude": ["node_modules", "dist"]
 }
diff --git a/packages/types/tsdown.config.ts b/packages/types/tsdown.config.ts
index 7b2ea6fe2f..5f7ccadb7d 100644
--- a/packages/types/tsdown.config.ts
+++ b/packages/types/tsdown.config.ts
@@ -2,10 +2,7 @@ import { defineConfig } from "tsdown";
 
 export default defineConfig({
   entry: ["src/index.ts"],
-  outDir: "dist",
-  format: ["esm", "cjs"],
-  exports: true,
+  format: ["esm"],
   dts: true,
-  clean: true,
-  sourcemap: true,
+  exports: true,
 });
diff --git a/packages/typescript-config/.prettierignore b/packages/typescript-config/.prettierignore
new file mode 100644
index 0000000000..b0b8bc622a
--- /dev/null
+++ b/packages/typescript-config/.prettierignore
@@ -0,0 +1,10 @@
+.next/
+.react-router/
+.turbo/
+.vite/
+build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/typescript-config/base.json b/packages/typescript-config/base.json
index 8844bd66be..ea09a513f3 100644
--- a/packages/typescript-config/base.json
+++ b/packages/typescript-config/base.json
@@ -1,18 +1,30 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
   "compilerOptions": {
+    "composite": true,
     "declaration": true,
     "declarationMap": true,
+    "emitDeclarationOnly": false,
     "esModuleInterop": true,
-    "incremental": false,
+    "exactOptionalPropertyTypes": true,
+    "forceConsistentCasingInFileNames": true,
+    "incremental": true,
     "isolatedModules": true,
-    "lib": ["es2022", "DOM", "DOM.Iterable"],
-    "module": "NodeNext",
+    "lib": ["es2023"],
+    "module": "preserve",
     "moduleDetection": "force",
-    "moduleResolution": "NodeNext",
+    "moduleResolution": "bundler",
+    "noEmit": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "ES2022"
+    "target": "esnext",
+    "tsBuildInfoFile": ".turbo/tsconfig.tsbuildinfo",
+    "verbatimModuleSyntax": true
   }
 }
diff --git a/packages/typescript-config/node-library.json b/packages/typescript-config/node-library.json
index 9cd7acbde8..d3623d797f 100644
--- a/packages/typescript-config/node-library.json
+++ b/packages/typescript-config/node-library.json
@@ -1,4 +1,8 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "./base.json"
+  "extends": "./base.json",
+  "compilerOptions": {
+    "lib": ["es2023"],
+    "types": ["node"]
+  }
 }
diff --git a/packages/typescript-config/package.json b/packages/typescript-config/package.json
index 45c6ac232a..c8d21d9ae5 100644
--- a/packages/typescript-config/package.json
+++ b/packages/typescript-config/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@plane/typescript-config",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "AGPL-3.0",
   "private": true,
   "files": [
diff --git a/packages/typescript-config/react-library.json b/packages/typescript-config/react-library.json
index 6065fccff5..7b06a2ea15 100644
--- a/packages/typescript-config/react-library.json
+++ b/packages/typescript-config/react-library.json
@@ -2,8 +2,7 @@
   "$schema": "https://json.schemastore.org/tsconfig",
   "extends": "./base.json",
   "compilerOptions": {
-    "module": "Preserve",
-    "moduleResolution": "bundler",
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "lib": ["es2023", "DOM", "DOM.Iterable"]
   }
 }
diff --git a/packages/ui/.eslintignore b/packages/ui/.eslintignore
deleted file mode 100644
index 6019047c3e..0000000000
--- a/packages/ui/.eslintignore
+++ /dev/null
@@ -1,3 +0,0 @@
-build/*
-dist/*
-out/*
\ No newline at end of file
diff --git a/packages/ui/.eslintrc.cjs b/packages/ui/.eslintrc.cjs
deleted file mode 100644
index ba0e590e8e..0000000000
--- a/packages/ui/.eslintrc.cjs
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["@plane/eslint-config/library.js"],
-};
diff --git a/packages/ui/.prettierignore b/packages/ui/.prettierignore
index 3cd6b08a0f..b0b8bc622a 100644
--- a/packages/ui/.prettierignore
+++ b/packages/ui/.prettierignore
@@ -1,6 +1,10 @@
-.next
-.vercel
-.tubro
-out/
-dist/
+.next/
+.react-router/
+.turbo/
+.vite/
 build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/ui/.prettierrc b/packages/ui/.prettierrc
deleted file mode 100644
index 87d988f1b2..0000000000
--- a/packages/ui/.prettierrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "printWidth": 120,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 78774bfd44..78bd7560db 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -2,17 +2,17 @@
   "name": "@plane/ui",
   "description": "UI components shared across multiple apps internally",
   "private": true,
-  "version": "1.1.0",
+  "version": "1.2.0",
   "sideEffects": false,
   "license": "AGPL-3.0",
   "type": "module",
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "types": "./dist/index.d.cts",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
@@ -22,11 +22,11 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "postcss": "postcss styles/globals.css -o styles/output.css --watch",
-    "check:lint": "eslint . --max-warnings 94",
+    "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=643",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check \"**/*.{ts,tsx,md,json,css,scss}\"",
-    "fix:lint": "eslint . --fix",
-    "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\"",
+    "check:format": "prettier . --cache --check",
+    "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=643",
+    "fix:format": "prettier . --cache --write",
     "clean": "rm -rf .turbo && rm -rf .next && rm -rf node_modules && rm -rf dist"
   },
   "peerDependencies": {
@@ -52,12 +52,11 @@
     "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": {
     "@chromatic-com/storybook": "^1.4.0",
-    "@plane/eslint-config": "workspace:*",
     "@plane/tailwind-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
     "@storybook/addon-essentials": "^8.1.1",
@@ -78,7 +77,7 @@
     "autoprefixer": "^10.4.19",
     "postcss-cli": "^11.0.0",
     "postcss-nested": "^6.0.1",
-    "storybook": "^8.1.1",
+    "storybook": "9.1.17",
     "tsdown": "catalog:",
     "typescript": "catalog:"
   }
diff --git a/packages/ui/postcss.config.js b/packages/ui/postcss.config.js
index 9b1e55fc44..3ad28f15f3 100644
--- a/packages/ui/postcss.config.js
+++ b/packages/ui/postcss.config.js
@@ -1,2 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-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 81994790b8..5c7501559e 100644
--- a/packages/ui/src/auth-form/auth-confirm-password-input.tsx
+++ b/packages/ui/src/auth-form/auth-confirm-password-input.tsx
@@ -2,8 +2,10 @@ 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 interface AuthConfirmPasswordInputProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "autoComplete"
+> {
   password: string;
   label?: string;
   error?: string;
@@ -15,7 +17,7 @@ export interface AuthConfirmPasswordInputProps
   onPasswordMatchChange?: (matches: boolean) => void;
 }
 
-export const AuthConfirmPasswordInput: React.FC<AuthConfirmPasswordInputProps> = ({
+export function AuthConfirmPasswordInput({
   password,
   label = "Confirm Password",
   error,
@@ -27,7 +29,7 @@ export const AuthConfirmPasswordInput: React.FC<AuthConfirmPasswordInputProps> =
   onChange,
   onPasswordMatchChange,
   ...props
-}) => {
+}: AuthConfirmPasswordInputProps) {
   const [isFocused, setIsFocused] = useState(false);
 
   const confirmPassword = value as string;
@@ -71,7 +73,7 @@ export const AuthConfirmPasswordInput: React.FC<AuthConfirmPasswordInputProps> =
         onBlur={handleBlur}
         autoComplete="on"
       />
-      {confirmPassword && passwordsMatch && <p className="text-sm text-green-500">Passwords match</p>}
+      {confirmPassword && passwordsMatch && <p className="text-13 text-green-500">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 02df0380e3..52defca6b2 100644
--- a/packages/ui/src/auth-form/auth-forgot-password.tsx
+++ b/packages/ui/src/auth-form/auth-forgot-password.tsx
@@ -8,12 +8,12 @@ export interface AuthForgotPasswordProps {
   disabled?: boolean;
 }
 
-export const AuthForgotPassword: React.FC<AuthForgotPasswordProps> = ({
+export function AuthForgotPassword({
   onForgotPassword,
   className = "",
   text = "Forgot your password?",
   disabled = false,
-}) => {
+}: AuthForgotPasswordProps) {
   const handleClick = (e: React.MouseEvent) => {
     e.preventDefault();
     if (!disabled && onForgotPassword) {
@@ -27,7 +27,7 @@ export const AuthForgotPassword: React.FC<AuthForgotPasswordProps> = ({
       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 hover:text-accent-secondary transition-colors duration-200",
         {
           "opacity-50 cursor-not-allowed": disabled,
           "cursor-pointer": !disabled,
@@ -38,4 +38,4 @@ export const AuthForgotPassword: React.FC<AuthForgotPasswordProps> = ({
       {text}
     </button>
   );
-};
+}
diff --git a/packages/ui/src/auth-form/auth-form.tsx b/packages/ui/src/auth-form/auth-form.tsx
index e44991c8fb..5930c1e7da 100644
--- a/packages/ui/src/auth-form/auth-form.tsx
+++ b/packages/ui/src/auth-form/auth-form.tsx
@@ -35,7 +35,7 @@ export interface AuthFormProps {
   alternateModeButtonText?: string;
 }
 
-export const AuthForm: React.FC<AuthFormProps> = ({
+export function AuthForm({
   mode,
   initialData = {},
   onSubmit,
@@ -52,7 +52,7 @@ export const AuthForm: React.FC<AuthFormProps> = ({
   submitButtonText,
   alternateModeText,
   alternateModeButtonText,
-}) => {
+}: AuthFormProps) {
   const [formData, setFormData] = useState<AuthFormData>({
     email: initialData.email || "",
     password: initialData.password || "",
@@ -190,11 +190,11 @@ export const AuthForm: React.FC<AuthFormProps> = ({
         {/* 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 hover:text-accent-secondary transition-colors duration-200"
               disabled={disabled}
             >
               {getAlternateModeButtonText()}
@@ -204,4 +204,4 @@ export const AuthForm: React.FC<AuthFormProps> = ({
       </div>
     </form>
   );
-};
+}
diff --git a/packages/ui/src/auth-form/auth-input.tsx b/packages/ui/src/auth-form/auth-input.tsx
index 7038a005b0..526cd4f353 100644
--- a/packages/ui/src/auth-form/auth-input.tsx
+++ b/packages/ui/src/auth-form/auth-input.tsx
@@ -13,7 +13,7 @@ export interface AuthInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
 
 const baseContainerClassName = "flex flex-col gap-1.5";
 
-export const AuthInput: React.FC<AuthInputProps> = ({
+export function AuthInput({
   label,
   error,
   showPasswordToggle = false,
@@ -21,7 +21,7 @@ export const AuthInput: React.FC<AuthInputProps> = ({
   className = "",
   type = "text",
   ...props
-}) => {
+}: AuthInputProps) {
   const { id } = props;
   const [showPassword, setShowPassword] = useState(false);
   const isPasswordType = type === "password";
@@ -31,18 +31,16 @@ export const AuthInput: React.FC<AuthInputProps> = ({
   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 py-2 px-3 transition-all")}>
         <Input
           {...props}
           type={inputType}
           className={cn(
-            "rounded-md disable-autofill-style h-6 w-full placeholder:text-base placeholder:text-custom-text-400 p-0 border-none",
+            "rounded-md disable-autofill-style h-6 w-full placeholder:text-14 placeholder:text-placeholder p-0 border-none",
             {
               "border-red-500": error,
             },
@@ -53,14 +51,14 @@ export const AuthInput: React.FC<AuthInputProps> = ({
           <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-red-500", 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 2a468e1706..1841379815 100644
--- a/packages/ui/src/auth-form/auth-password-input.tsx
+++ b/packages/ui/src/auth-form/auth-password-input.tsx
@@ -16,7 +16,7 @@ export interface AuthPasswordInputProps extends Omit<React.InputHTMLAttributes<H
   onPasswordStrengthChange?: (strength: E_PASSWORD_STRENGTH) => void;
 }
 
-export const AuthPasswordInput: React.FC<AuthPasswordInputProps> = ({
+export function AuthPasswordInput({
   label = "Password",
   error,
   showPasswordStrength = true,
@@ -29,7 +29,7 @@ export const AuthPasswordInput: React.FC<AuthPasswordInputProps> = ({
   onPasswordChange,
   onPasswordStrengthChange,
   ...props
-}) => {
+}: AuthPasswordInputProps) {
   const [isFocused, setIsFocused] = useState(false);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -74,4 +74,4 @@ export const AuthPasswordInput: React.FC<AuthPasswordInputProps> = ({
       )}
     </div>
   );
-};
+}
diff --git a/packages/ui/src/avatar/avatar-group.tsx b/packages/ui/src/avatar/avatar-group.tsx
index 991fdd34ed..ed62e67697 100644
--- a/packages/ui/src/avatar/avatar-group.tsx
+++ b/packages/ui/src/avatar/avatar-group.tsx
@@ -4,8 +4,8 @@ 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 = {
   /**
@@ -32,7 +32,7 @@ type Props = {
   size?: TAvatarSize;
 };
 
-export const AvatarGroup: React.FC<Props> = (props) => {
+export function AvatarGroup(props: Props) {
   const { children, max = 2, showTooltip = true, size = "md" } = props;
 
   // calculate total length of avatars inside the group
@@ -60,7 +60,7 @@ export const AvatarGroup: React.FC<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 +68,7 @@ export const AvatarGroup: React.FC<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 bg-accent-subtle text-9 text-accent-primary border border-subtle-1",
               {
                 [sizeInfo.avatarSize]: !isAValidNumber(size),
               }
@@ -88,4 +88,4 @@ export const AvatarGroup: React.FC<Props> = (props) => {
       )}
     </div>
   );
-};
+}
diff --git a/packages/ui/src/avatar/avatar.tsx b/packages/ui/src/avatar/avatar.tsx
index 37cc0668b9..09f2c1e5ff 100644
--- a/packages/ui/src/avatar/avatar.tsx
+++ b/packages/ui/src/avatar/avatar.tsx
@@ -1,10 +1,9 @@
-import React from "react";
 // 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,70 +49,7 @@ 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 const Avatar: React.FC<Props> = (props) => {
+export function Avatar(props: Props) {
   const {
     name,
     fallbackBackgroundColor,
@@ -166,4 +102,4 @@ export const Avatar: React.FC<Props> = (props) => {
       </div>
     </Tooltip>
   );
-};
+}
diff --git a/packages/ui/src/avatar/helper.tsx b/packages/ui/src/avatar/helper.tsx
new file mode 100644
index 0000000000..a5019473a1
--- /dev/null
+++ b/packages/ui/src/avatar/helper.tsx
@@ -0,0 +1,64 @@
+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/badge/badge.tsx b/packages/ui/src/badge/badge.tsx
index 663e7f25e5..7f1cca1c4f 100644
--- a/packages/ui/src/badge/badge.tsx
+++ b/packages/ui/src/badge/badge.tsx
@@ -15,7 +15,7 @@ export interface BadgeProps extends React.ButtonHTMLAttributes<HTMLButtonElement
   children: React.ReactNode;
 }
 
-const Badge = React.forwardRef<HTMLButtonElement, BadgeProps>((props, ref) => {
+const Badge = React.forwardRef(function Badge(props: BadgeProps, ref: React.ForwardedRef<HTMLButtonElement>) {
   const {
     variant = "primary",
     size = "md",
diff --git a/packages/ui/src/badge/helper.tsx b/packages/ui/src/badge/helper.tsx
index 31f18aef7f..73d1fee7ff 100644
--- a/packages/ui/src/badge/helper.tsx
+++ b/packages/ui/src/badge/helper.tsx
@@ -27,10 +27,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,39 +44,39 @@ 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`,
   },
@@ -86,13 +86,13 @@ export const badgeStyling: IBadgeStyling = {
     disabled: `cursor-not-allowed !text-green-300`,
   },
   "outline-success": {
-    default: `text-green-500 bg-custom-background-100 border border-green-500`,
+    default: `text-green-500 bg-surface-1 border border-green-500`,
     hover: `hover:text-green-600 hover:bg-green-50`,
     disabled: `cursor-not-allowed !text-green-300 border-green-300`,
   },
 
   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,13 +102,13 @@ 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`,
   },
@@ -118,7 +118,7 @@ export const badgeStyling: IBadgeStyling = {
     disabled: `cursor-not-allowed !text-red-300`,
   },
   "outline-destructive": {
-    default: `text-red-500 bg-custom-background-100 border border-red-500`,
+    default: `text-red-500 bg-surface-1 border border-red-500`,
     hover: `hover:text-red-600 hover:bg-red-50`,
     disabled: `cursor-not-allowed !text-red-300 border-red-300`,
   },
diff --git a/packages/ui/src/billing/index.ts b/packages/ui/src/billing/index.ts
deleted file mode 100644
index 75c2cf410a..0000000000
--- 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 98c03d337a..0000000000
--- 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 bb047f57ef..acddb1757f 100644
--- a/packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.stories.tsx
@@ -19,18 +19,18 @@ type TBreadcrumbBlockProps = {
 };
 
 // TODO: remove this component and use web Link component
-const BreadcrumbBlock: React.FC<TBreadcrumbBlockProps> = (props) => {
+function BreadcrumbBlock(props: TBreadcrumbBlockProps) {
   const { label, icon, disableTooltip = false } = props;
 
   return (
     <>
       <Breadcrumbs.ItemWrapper label={label} disableTooltip={disableTooltip}>
-        {icon && <div className="flex size-4 items-center justify-center overflow-hidden !text-[1rem]">{icon}</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] overflow-hidden truncate">{label}</div>}
       </Breadcrumbs.ItemWrapper>
     </>
   );
-};
+}
 
 export default meta;
 type Story = StoryObj<typeof Breadcrumbs>;
diff --git a/packages/ui/src/breadcrumbs/breadcrumbs.tsx b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
index 2da6b88c4d..378490fb0a 100644
--- a/packages/ui/src/breadcrumbs/breadcrumbs.tsx
+++ b/packages/ui/src/breadcrumbs/breadcrumbs.tsx
@@ -10,16 +10,18 @@ type BreadcrumbsProps = {
   isLoading?: boolean;
 };
 
-export const BreadcrumbItemLoader = () => (
-  <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" />
+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-sm px-2 py-1 text-13 font-medium">
+        <span className="h-full w-5 bg-layer-1 rounded-sm" />
+        <span className="h-full w-16 bg-layer-1 rounded-sm" />
+      </div>
     </div>
-  </div>
-);
+  );
+}
 
-const Breadcrumbs = ({ className, children, onBack, isLoading = false }: BreadcrumbsProps) => {
+function Breadcrumbs({ className, children, onBack, isLoading = false }: BreadcrumbsProps) {
   const [isSmallScreen, setIsSmallScreen] = React.useState(false);
 
   React.useEffect(() => {
@@ -60,11 +62,11 @@ const 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 ? (
@@ -82,7 +84,7 @@ const Breadcrumbs = ({ className, children, onBack, isLoading = false }: Breadcr
       {isSmallScreen && childrenArray.length === 1 && childrenArray}
     </div>
   );
-};
+}
 
 // breadcrumb item
 type BreadcrumbItemProps = {
@@ -91,7 +93,7 @@ type BreadcrumbItemProps = {
   isLast?: boolean;
 };
 
-const BreadcrumbItem: React.FC<BreadcrumbItemProps> = (props) => {
+function BreadcrumbItem(props: BreadcrumbItemProps) {
   const { component, showSeparator = true, isLast = false } = props;
   return (
     <div className="flex items-center gap-0.5 h-6">
@@ -99,7 +101,7 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = (props) => {
       {showSeparator && !isLast && <BreadcrumbSeparator />}
     </div>
   );
-};
+}
 
 // breadcrumb icon
 type BreadcrumbIconProps = {
@@ -107,10 +109,10 @@ type BreadcrumbIconProps = {
   className?: string;
 };
 
-const BreadcrumbIcon: React.FC<BreadcrumbIconProps> = (props) => {
+function BreadcrumbIcon(props: BreadcrumbIconProps) {
   const { children, className } = props;
   return <div className={cn("flex size-4 items-center justify-start overflow-hidden", className)}>{children}</div>;
-};
+}
 
 // breadcrumb label
 type BreadcrumbLabelProps = {
@@ -118,14 +120,14 @@ type BreadcrumbLabelProps = {
   className?: string;
 };
 
-const BreadcrumbLabel: React.FC<BreadcrumbLabelProps> = (props) => {
+function BreadcrumbLabel(props: BreadcrumbLabelProps) {
   const { children, className } = props;
   return (
     <div className={cn("relative line-clamp-1 block max-w-[150px] overflow-hidden truncate", className)}>
       {children}
     </div>
   );
-};
+}
 
 // breadcrumb separator
 type BreadcrumbSeparatorProps = {
@@ -135,14 +137,14 @@ type BreadcrumbSeparatorProps = {
   showDivider?: boolean;
 };
 
-const BreadcrumbSeparator: React.FC<BreadcrumbSeparatorProps> = (props) => {
+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" />}
+      {showDivider && <span className="absolute -left-0.5 top-0 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 items-center justify-center flex-shrink-0 rounded-sm text-placeholder transition-all",
           containerClassName
         )}
       >
@@ -150,7 +152,7 @@ const BreadcrumbSeparator: React.FC<BreadcrumbSeparatorProps> = (props) => {
       </div>
     </div>
   );
-};
+}
 
 // breadcrumb wrapper
 type BreadcrumbItemWrapperProps = {
@@ -162,15 +164,17 @@ type BreadcrumbItemWrapperProps = {
   isLast?: boolean;
 };
 
-const BreadcrumbItemWrapper: React.FC<BreadcrumbItemWrapperProps> = (props) => {
+function BreadcrumbItemWrapper(props: BreadcrumbItemWrapperProps) {
   const { label, disableTooltip = false, children, className, type = "link", isLast = false } = props;
   return (
     <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 h-full flex items-center gap-2 rounded-sm px-1.5 py-1 text-13 font-medium cursor-default",
           {
-            "hover:text-custom-text-100 hover:bg-custom-background-90 cursor-pointer": type === "link" && !isLast,
+            "text-primary": isLast,
+            "text-tertiary": !isLast,
+            "hover:text-primary hover:bg-layer-transparent-hover cursor-pointer": type === "link" && !isLast,
           },
           className
         )}
@@ -179,7 +183,7 @@ const BreadcrumbItemWrapper: React.FC<BreadcrumbItemWrapperProps> = (props) => {
       </div>
     </Tooltip>
   );
-};
+}
 
 Breadcrumbs.Item = BreadcrumbItem;
 Breadcrumbs.Icon = BreadcrumbIcon;
diff --git a/packages/ui/src/breadcrumbs/navigation-dropdown.tsx b/packages/ui/src/breadcrumbs/navigation-dropdown.tsx
index d06bb4636e..9010602c5a 100644
--- a/packages/ui/src/breadcrumbs/navigation-dropdown.tsx
+++ b/packages/ui/src/breadcrumbs/navigation-dropdown.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { CheckIcon } from "lucide-react";
 import * as React from "react";
 // ui
@@ -17,7 +15,7 @@ type TBreadcrumbNavigationDropdownProps = {
   isLast?: boolean;
 };
 
-export const BreadcrumbNavigationDropdown = (props: TBreadcrumbNavigationDropdownProps) => {
+export function BreadcrumbNavigationDropdown(props: TBreadcrumbNavigationDropdownProps) {
   const { selectedItemKey, navigationItems, navigationDisabled = false, handleOnClick, isLast = false } = props;
   const [isOpen, setIsOpen] = React.useState(false);
   // derived values
@@ -29,31 +27,33 @@ export const BreadcrumbNavigationDropdown = (props: TBreadcrumbNavigationDropdow
   // if no selected item, return null
   if (!selectedItem) return null;
 
-  const NavigationButton = () => (
-    <Tooltip tooltipContent={selectedItem.title} position="bottom" disabled={isOpen}>
-      <button
-        onClick={(e) => {
-          if (!isLast) {
-            e.preventDefault();
-            e.stopPropagation();
-            handleOnClick?.();
-          }
-        }}
-        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",
-          {
-            "hover:bg-custom-background-80 hover:text-custom-text-100": !isLast,
-          }
-        )}
-      >
-        <div className="flex @4xl:hidden text-custom-text-300">...</div>
-        <div className="hidden @4xl:flex gap-2">
-          {selectedItemIcon && <Breadcrumbs.Icon>{selectedItemIcon}</Breadcrumbs.Icon>}
-          <Breadcrumbs.Label>{selectedItem.title}</Breadcrumbs.Label>
-        </div>
-      </button>
-    </Tooltip>
-  );
+  function NavigationButton() {
+    return (
+      <Tooltip tooltipContent={selectedItem?.title} position="bottom" disabled={isOpen}>
+        <button
+          onClick={(e) => {
+            if (!isLast) {
+              e.preventDefault();
+              e.stopPropagation();
+              handleOnClick?.();
+            }
+          }}
+          className={cn(
+            "group h-full flex items-center gap-2 px-1.5 py-1 text-13 font-medium text-tertiary cursor-pointer rounded-sm rounded-r-none",
+            {
+              "hover:bg-layer-1 hover:text-primary": !isLast,
+            }
+          )}
+        >
+          <div className="flex @4xl:hidden text-tertiary">...</div>
+          <div className="hidden @4xl:flex gap-2 items-center">
+            {selectedItemIcon && <Breadcrumbs.Icon>{selectedItemIcon}</Breadcrumbs.Icon>}
+            <Breadcrumbs.Label>{selectedItem?.title}</Breadcrumbs.Label>
+          </div>
+        </button>
+      </Tooltip>
+    );
+  }
 
   if (navigationDisabled) {
     return <NavigationButton />;
@@ -65,13 +65,13 @@ export const 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 +79,11 @@ export const 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 items-center gap-0.5 rounded-sm hover:bg-surface-2 outline-none cursor-pointer h-full rounded-sm",
         {
-          "bg-custom-background-90": isOpen,
+          "bg-surface-2": isOpen,
         }
       )}
       closeOnSelect
@@ -108,7 +108,7 @@ export const BreadcrumbNavigationDropdown = (props: TBreadcrumbNavigationDropdow
             className={cn(
               "flex items-center gap-2",
               {
-                "text-custom-text-400": item.disabled,
+                "text-placeholder": item.disabled,
               },
               item.className
             )}
@@ -119,8 +119,8 @@ export const 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("text-tertiary whitespace-pre-line", {
+                    "text-placeholder": item.disabled,
                   })}
                 >
                   {item.description}
@@ -133,4 +133,4 @@ export const BreadcrumbNavigationDropdown = (props: TBreadcrumbNavigationDropdow
       })}
     </CustomMenu>
   );
-};
+}
diff --git a/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx b/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx
index cd3d96083a..0ccc2e5090 100644
--- a/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx
+++ b/packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx
@@ -19,7 +19,7 @@ type TBreadcrumbNavigationSearchDropdownProps = {
   shouldTruncate?: boolean;
 };
 
-export const BreadcrumbNavigationSearchDropdown: React.FC<TBreadcrumbNavigationSearchDropdownProps> = (props) => {
+export function BreadcrumbNavigationSearchDropdown(props: TBreadcrumbNavigationSearchDropdownProps) {
   const {
     icon,
     title,
@@ -61,16 +61,16 @@ export const BreadcrumbNavigationSearchDropdown: React.FC<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 h-full flex items-center gap-2 px-1.5 py-1 text-13 font-medium text-tertiary cursor-pointer rounded-sm rounded-r-none",
                 {
-                  "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 @4xl:hidden text-tertiary">...</div>}
               <div
                 className={cn("flex gap-2", {
-                  "hidden @4xl:flex gap-2": shouldTruncate,
+                  "hidden @4xl:flex gap-2 items-center": shouldTruncate,
                 })}
               >
                 {icon && <Breadcrumbs.Icon>{icon}</Breadcrumbs.Icon>}
@@ -79,13 +79,13 @@ export const BreadcrumbNavigationSearchDropdown: React.FC<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,13 +93,13 @@ export const BreadcrumbNavigationSearchDropdown: React.FC<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 items-center gap-0.5 rounded-sm hover:bg-surface-2 outline-none cursor-pointer h-full rounded-sm",
         {
-          "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 c5e01f24d7..1717d8a8a9 100644
--- a/packages/ui/src/button/button.tsx
+++ b/packages/ui/src/button/button.tsx
@@ -15,7 +15,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   children: React.ReactNode;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+const Button = React.forwardRef(function Button(props: ButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) {
   const {
     variant = "primary",
     size = "md",
diff --git a/packages/ui/src/button/helper.tsx b/packages/ui/src/button/helper.tsx
index 4a823aad7a..af923cdf53 100644
--- a/packages/ui/src/button/helper.tsx
+++ b/packages/ui/src/button/helper.tsx
@@ -23,10 +23,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 +38,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`,
+    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 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`,
+    default: `text-red-500 bg-surface-1`,
     hover: `hover:text-red-400`,
     pressed: `focus:text-red-400`,
-    disabled: `cursor-not-allowed !text-red-300`,
+    disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
   },
   "tertiary-danger": {
-    default: `text-red-500 bg-custom-background-100 border border-red-200`,
+    default: `text-red-500 bg-surface-1 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`,
+    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/toggle-switch.tsx b/packages/ui/src/button/toggle-switch.tsx
index c97428c2f4..37651b9f61 100644
--- a/packages/ui/src/button/toggle-switch.tsx
+++ b/packages/ui/src/button/toggle-switch.tsx
@@ -1,5 +1,4 @@
 import { Switch } from "@headlessui/react";
-import * as React from "react";
 // helpers
 import { cn } from "../utils";
 
@@ -12,7 +11,7 @@ interface IToggleSwitchProps {
   className?: string;
 }
 
-const ToggleSwitch: React.FC<IToggleSwitchProps> = (props) => {
+function ToggleSwitch(props: IToggleSwitchProps) {
   const { value, onChange, label, size = "sm", disabled, className } = props;
 
   return (
@@ -21,12 +20,14 @@ const ToggleSwitch: React.FC<IToggleSwitchProps> = (props) => {
       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 flex-shrink-0 h-6 w-10 cursor-pointer rounded-full border border-subtle transition-colors duration-200 ease-in-out focus:outline-none bg-layer-1",
         {
-          "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 opacity-50 bg-accent-primary": value && disabled,
+          "cursor-not-allowed opacity-50 bg-(--text-color-icon-placeholder)": !value && disabled,
         },
         className
       )}
@@ -35,21 +36,20 @@ const ToggleSwitch: React.FC<IToggleSwitchProps> = (props) => {
       <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 self-center h-5 w-5 transform 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,
           }
         )}
       />
     </Switch>
   );
-};
+}
 
 ToggleSwitch.displayName = "plane-ui-toggle-switch";
 
diff --git a/packages/ui/src/card/card.tsx b/packages/ui/src/card/card.tsx
index 174fda0e2a..444d5772e3 100644
--- a/packages/ui/src/card/card.tsx
+++ b/packages/ui/src/card/card.tsx
@@ -11,7 +11,7 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 
-const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
+const Card = React.forwardRef(function Card(props: CardProps, ref: React.ForwardedRef<HTMLDivElement>) {
   const {
     variant = ECardVariant.WITH_SHADOW,
     direction = ECardDirection.COLUMN,
diff --git a/packages/ui/src/card/helper.tsx b/packages/ui/src/card/helper.tsx
index 8b80d0d933..fabaeb74ee 100644
--- a/packages/ui/src/card/helper.tsx
+++ b/packages/ui/src/card/helper.tsx
@@ -18,11 +18,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/collapsible/collapsible-button.tsx b/packages/ui/src/collapsible/collapsible-button.tsx
index c618ab74d7..bdb6cb89bf 100644
--- a/packages/ui/src/collapsible/collapsible-button.tsx
+++ b/packages/ui/src/collapsible/collapsible-button.tsx
@@ -15,7 +15,7 @@ type Props = {
   ChevronIcon?: React.FC<ISvgIcons>;
 };
 
-export const CollapsibleButton: FC<Props> = (props) => {
+export function CollapsibleButton(props: Props) {
   const {
     isOpen,
     title,
@@ -27,26 +27,21 @@ export const CollapsibleButton: FC<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 items-center justify-between gap-3 h-12 px-2.5 py-3 border-b border-subtle", 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 hover:text-secondary duration-300", {
                 "-rotate-90": !isOpen,
               })}
             />
           )}
-          <span className={cn("text-base text-custom-text-100 font-medium", titleClassName)}>{title}</span>
+          <span className={cn("text-14 text-primary font-medium", titleClassName)}>{title}</span>
         </div>
         {indicatorElement && indicatorElement}
       </div>
       {actionItemElement && isOpen && actionItemElement}
     </div>
   );
-};
+}
diff --git a/packages/ui/src/collapsible/collapsible.tsx b/packages/ui/src/collapsible/collapsible.tsx
index 529451a600..8d83eda65d 100644
--- a/packages/ui/src/collapsible/collapsible.tsx
+++ b/packages/ui/src/collapsible/collapsible.tsx
@@ -1,5 +1,4 @@
 import { Disclosure, Transition } from "@headlessui/react";
-import type { FC } from "react";
 import React, { useState, useEffect, useCallback } from "react";
 
 export type TCollapsibleProps = {
@@ -13,7 +12,7 @@ export type TCollapsibleProps = {
   defaultOpen?: boolean;
 };
 
-export const Collapsible: FC<TCollapsibleProps> = (props) => {
+export function Collapsible(props: TCollapsibleProps) {
   const { title, children, buttonRef, className, buttonClassName, isOpen, onToggle, defaultOpen } = props;
   // state
   const [localIsOpen, setLocalIsOpen] = useState<boolean>(isOpen || defaultOpen ? true : false);
@@ -40,15 +39,18 @@ export const Collapsible: FC<TCollapsibleProps> = (props) => {
       </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/color-picker/color-picker.tsx b/packages/ui/src/color-picker/color-picker.tsx
index e53fdc10df..d6993d6539 100644
--- a/packages/ui/src/color-picker/color-picker.tsx
+++ b/packages/ui/src/color-picker/color-picker.tsx
@@ -6,7 +6,7 @@ interface ColorPickerProps {
   className?: string;
 }
 
-export const ColorPicker: React.FC<ColorPickerProps> = (props) => {
+export function ColorPicker(props: ColorPickerProps) {
   const { value, onChange, className = "" } = props;
   // refs
   const inputRef = React.useRef<HTMLInputElement>(null);
@@ -35,4 +35,4 @@ export const ColorPicker: React.FC<ColorPickerProps> = (props) => {
       />
     </div>
   );
-};
+}
diff --git a/packages/ui/src/content-wrapper/content-wrapper.tsx b/packages/ui/src/content-wrapper/content-wrapper.tsx
index 526ef49559..af79cbc759 100644
--- a/packages/ui/src/content-wrapper/content-wrapper.tsx
+++ b/packages/ui/src/content-wrapper/content-wrapper.tsx
@@ -11,7 +11,10 @@ export interface ContentWrapperProps extends React.HTMLAttributes<HTMLDivElement
 }
 const DEFAULT_STYLE = "flex flex-col vertical-scrollbar scrollbar-lg h-full w-full overflow-y-auto";
 
-const ContentWrapper = React.forwardRef<HTMLDivElement, ContentWrapperProps>((props, ref) => {
+const ContentWrapper = React.forwardRef(function ContentWrapper(
+  props: ContentWrapperProps,
+  ref: React.ForwardedRef<HTMLDivElement>
+) {
   const { variant = ERowVariant.REGULAR, className = "", children, ...rest } = props;
 
   return (
diff --git a/packages/ui/src/control-link/control-link.tsx b/packages/ui/src/control-link/control-link.tsx
index 83c719ca11..b5df552df1 100644
--- a/packages/ui/src/control-link/control-link.tsx
+++ b/packages/ui/src/control-link/control-link.tsx
@@ -10,7 +10,10 @@ export type TControlLink = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
   draggable?: boolean;
 };
 
-export const ControlLink = React.forwardRef<HTMLAnchorElement, TControlLink>((props, ref) => {
+export const ControlLink = React.forwardRef(function ControlLink(
+  props: TControlLink,
+  ref: React.ForwardedRef<HTMLAnchorElement>
+) {
   const { href, onClick, children, target = "_blank", disabled = false, className, draggable = false, ...rest } = props;
   const LEFT_CLICK_EVENT_CODE = 0;
 
diff --git a/packages/ui/src/drag-handle.tsx b/packages/ui/src/drag-handle.tsx
index 5ec26ecd35..da140272c8 100644
--- a/packages/ui/src/drag-handle.tsx
+++ b/packages/ui/src/drag-handle.tsx
@@ -8,7 +8,10 @@ interface IDragHandle {
   disabled?: boolean;
 }
 
-export const DragHandle = forwardRef<HTMLButtonElement | null, IDragHandle>((props, ref) => {
+export const DragHandle = forwardRef(function DragHandle(
+  props: IDragHandle,
+  ref: React.ForwardedRef<HTMLButtonElement | null>
+) {
   const { className, disabled = false } = props;
 
   if (disabled) {
@@ -18,18 +21,15 @@ export const DragHandle = forwardRef<HTMLButtonElement | null, IDragHandle>((pro
   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("p-0.5 flex flex-shrink-0 rounded-sm bg-surface-2 text-secondary cursor-grab", 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 b8982be065..4b1f1be2d7 100644
--- a/packages/ui/src/drop-indicator.tsx
+++ b/packages/ui/src/drop-indicator.tsx
@@ -6,20 +6,20 @@ type Props = {
   classNames?: string;
 };
 
-export const DropIndicator = (props: Props) => {
+export function DropIndicator(props: Props) {
   const { isVisible, classNames = "" } = 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`,
+    before:left-0 before:relative before:block before:top-[-2px] before:h-[6px] before:w-[6px] before:rounded-sm
+    after:left-[calc(100%-6px)] after:relative after:block after:top-[-8px] 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 9e7d55a6e6..7583d58dfa 100644
--- a/packages/ui/src/dropdown/common/button.tsx
+++ b/packages/ui/src/dropdown/common/button.tsx
@@ -4,7 +4,7 @@ import React, { Fragment } from "react";
 import { cn } from "../../utils";
 import type { IMultiSelectDropdownButton, ISingleSelectDropdownButton } from "../dropdown";
 
-export const DropdownButton: React.FC<IMultiSelectDropdownButton | ISingleSelectDropdownButton> = (props) => {
+export function DropdownButton(props: IMultiSelectDropdownButton | ISingleSelectDropdownButton) {
   const {
     isOpen,
     buttonContent,
@@ -23,7 +23,7 @@ export const DropdownButton: React.FC<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
@@ -34,4 +34,4 @@ export const DropdownButton: React.FC<IMultiSelectDropdownButton | ISingleSelect
       </button>
     </Combobox.Button>
   );
-};
+}
diff --git a/packages/ui/src/dropdown/common/input-search.tsx b/packages/ui/src/dropdown/common/input-search.tsx
index d82d573dc5..6d046a9c23 100644
--- a/packages/ui/src/dropdown/common/input-search.tsx
+++ b/packages/ui/src/dropdown/common/input-search.tsx
@@ -16,7 +16,7 @@ interface IInputSearch {
   isMobile: boolean;
 }
 
-export const InputSearch: FC<IInputSearch> = (props) => {
+export function InputSearch(props: IInputSearch) {
   const { isOpen, query, updateQuery, inputIcon, inputContainerClassName, inputClassName, inputPlaceholder, isMobile } =
     props;
 
@@ -39,16 +39,16 @@ export const InputSearch: FC<IInputSearch> = (props) => {
   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}</> : <Search 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}
@@ -58,4 +58,4 @@ export const InputSearch: FC<IInputSearch> = (props) => {
       />
     </div>
   );
-};
+}
diff --git a/packages/ui/src/dropdown/common/loader.tsx b/packages/ui/src/dropdown/common/loader.tsx
index c19bda620a..d93460f448 100644
--- a/packages/ui/src/dropdown/common/loader.tsx
+++ b/packages/ui/src/dropdown/common/loader.tsx
@@ -1,10 +1,12 @@
 import { range } from "lodash-es";
 import React from "react";
 
-export const DropdownOptionsLoader = () => (
-  <div className="flex flex-col gap-1 animate-pulse">
-    {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>
-);
+export function DropdownOptionsLoader() {
+  return (
+    <div className="flex flex-col gap-1 animate-pulse">
+      {range(6).map((index) => (
+        <div key={index} className="flex h-[1.925rem] w-full rounded-sm px-1 py-1.5 bg-surface-2" />
+      ))}
+    </div>
+  );
+}
diff --git a/packages/ui/src/dropdown/common/options.tsx b/packages/ui/src/dropdown/common/options.tsx
index 90eef932c1..2937c1ca69 100644
--- a/packages/ui/src/dropdown/common/options.tsx
+++ b/packages/ui/src/dropdown/common/options.tsx
@@ -8,7 +8,7 @@ import type { IMultiSelectDropdownOptions, ISingleSelectDropdownOptions } from "
 // components
 import { DropdownOptionsLoader, InputSearch } from ".";
 
-export const DropdownOptions: React.FC<IMultiSelectDropdownOptions | ISingleSelectDropdownOptions> = (props) => {
+export function DropdownOptions(props: IMultiSelectDropdownOptions | ISingleSelectDropdownOptions) {
   const {
     isOpen,
     query,
@@ -51,11 +51,11 @@ export const DropdownOptions: React.FC<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 select-none items-center justify-between gap-2 truncate rounded-sm px-1 py-1.5",
                       {
-                        "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 })
                     )
@@ -77,7 +77,7 @@ export const DropdownOptions: React.FC<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 italic text-placeholder">No matching results</p>
             )
           ) : loader ? (
             <> {loader} </>
@@ -88,4 +88,4 @@ export const DropdownOptions: React.FC<IMultiSelectDropdownOptions | ISingleSele
       </div>
     </>
   );
-};
+}
diff --git a/packages/ui/src/dropdown/multi-select.tsx b/packages/ui/src/dropdown/multi-select.tsx
index 8a98c33f82..bc67130aee 100644
--- a/packages/ui/src/dropdown/multi-select.tsx
+++ b/packages/ui/src/dropdown/multi-select.tsx
@@ -12,7 +12,7 @@ import { DropdownButton } from "./common";
 import { DropdownOptions } from "./common/options";
 import type { IMultiSelectDropdown } from "./dropdown";
 
-export const MultiSelectDropdown: FC<IMultiSelectDropdown> = (props) => {
+export function MultiSelectDropdown(props: IMultiSelectDropdown) {
   const {
     value,
     onChange,
@@ -138,7 +138,7 @@ export const MultiSelectDropdown: FC<IMultiSelectDropdown> = (props) => {
         <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}
@@ -165,4 +165,4 @@ export const MultiSelectDropdown: FC<IMultiSelectDropdown> = (props) => {
       )}
     </Combobox>
   );
-};
+}
diff --git a/packages/ui/src/dropdown/single-select.tsx b/packages/ui/src/dropdown/single-select.tsx
index 8d6088805f..9c8911a76e 100644
--- a/packages/ui/src/dropdown/single-select.tsx
+++ b/packages/ui/src/dropdown/single-select.tsx
@@ -12,7 +12,7 @@ import { DropdownButton } from "./common";
 import { DropdownOptions } from "./common/options";
 import type { ISingleSelectDropdown } from "./dropdown";
 
-export const Dropdown: FC<ISingleSelectDropdown> = (props) => {
+export function Dropdown(props: ISingleSelectDropdown) {
   const {
     value,
     onChange,
@@ -137,7 +137,7 @@ export const Dropdown: FC<ISingleSelectDropdown> = (props) => {
         <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}
@@ -165,4 +165,4 @@ export const Dropdown: FC<ISingleSelectDropdown> = (props) => {
       )}
     </Combobox>
   );
-};
+}
diff --git a/packages/ui/src/dropdowns/combo-box.tsx b/packages/ui/src/dropdowns/combo-box.tsx
index bbb0446dc9..2b36852f05 100644
--- a/packages/ui/src/dropdowns/combo-box.tsx
+++ b/packages/ui/src/dropdowns/combo-box.tsx
@@ -17,7 +17,7 @@ type Props = {
   children: ReactNode;
 };
 
-const ComboDropDown = forwardRef((props: Props, ref) => {
+const ComboDropDown = forwardRef(function ComboDropDown(props: Props, ref) {
   const { button, renderByDefault = true, children, ...rest } = props;
 
   const dropDownButtonRef = useRef<HTMLDivElement | null>(null);
@@ -49,7 +49,7 @@ const ComboDropDown = forwardRef((props: Props, ref) => {
   }
 
   return (
-    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error
     <Combobox {...rest} ref={ref}>
       <Combobox.Button as={Fragment}>{button}</Combobox.Button>
diff --git a/packages/ui/src/dropdowns/context-menu/item.tsx b/packages/ui/src/dropdowns/context-menu/item.tsx
index 892ca98904..a02997e573 100644
--- a/packages/ui/src/dropdowns/context-menu/item.tsx
+++ b/packages/ui/src/dropdowns/context-menu/item.tsx
@@ -14,7 +14,7 @@ type ContextMenuItemProps = {
   item: TContextMenuItem;
 };
 
-export const ContextMenuItem: React.FC<ContextMenuItemProps> = (props) => {
+export function ContextMenuItem(props: ContextMenuItemProps) {
   const { handleActiveItem, handleClose, isActive, item } = props;
 
   // Nested menu state
@@ -152,10 +152,10 @@ export const ContextMenuItem: React.FC<ContextMenuItemProps> = (props) => {
         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",
+          "w-full flex items-center gap-2 px-1 py-1.5 text-left text-secondary rounded-sm text-11 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 +170,8 @@ export const ContextMenuItem: React.FC<ContextMenuItemProps> = (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("text-tertiary whitespace-pre-line", {
+                    "text-placeholder": item.disabled,
                   })}
                 >
                   {item.description}
@@ -190,10 +190,7 @@ export const ContextMenuItem: React.FC<ContextMenuItemProps> = (props) => {
             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">
@@ -202,10 +199,10 @@ export const ContextMenuItem: React.FC<ContextMenuItemProps> = (props) => {
                   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",
+                    "w-full flex items-center gap-2 px-1 py-1.5 text-left text-secondary rounded-sm text-11 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 +222,8 @@ export const ContextMenuItem: React.FC<ContextMenuItemProps> = (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("text-tertiary whitespace-pre-line", {
+                              "text-placeholder": nestedItem.disabled,
                             })}
                           >
                             {nestedItem.description}
@@ -243,4 +240,4 @@ export const ContextMenuItem: React.FC<ContextMenuItemProps> = (props) => {
       )}
     </>
   );
-};
+}
diff --git a/packages/ui/src/dropdowns/context-menu/root.tsx b/packages/ui/src/dropdowns/context-menu/root.tsx
index b801a62df1..1ba97f8711 100644
--- a/packages/ui/src/dropdowns/context-menu/root.tsx
+++ b/packages/ui/src/dropdowns/context-menu/root.tsx
@@ -28,7 +28,7 @@ interface PortalProps {
   container?: Element | null;
 }
 
-export const Portal: React.FC<PortalProps> = ({ children, container }) => {
+export function Portal({ children, container }: PortalProps) {
   const [mounted, setMounted] = React.useState(false);
 
   React.useEffect(() => {
@@ -42,7 +42,7 @@ export const Portal: React.FC<PortalProps> = ({ children, container }) => {
 
   const targetContainer = container || document.body;
   return ReactDOM.createPortal(children, targetContainer);
-};
+}
 
 // Context for managing nested menus
 export const ContextMenuContext = React.createContext<{
@@ -57,7 +57,7 @@ type ContextMenuProps = {
   portalContainer?: Element | null;
 };
 
-const ContextMenuWithoutPortal: React.FC<ContextMenuProps> = (props) => {
+function ContextMenuWithoutPortal(props: ContextMenuProps) {
   const { parentRef, items, portalContainer } = props;
   // states
   const [isOpen, setIsOpen] = useState(false);
@@ -206,7 +206,7 @@ const ContextMenuWithoutPortal: React.FC<ContextMenuProps> = (props) => {
     >
       <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="fixed border-[0.5px] border-subtle-1 bg-surface-1 rounded-md px-2 py-2.5 max-h-72 min-w-[12rem] overflow-y-scroll vertical-scrollbar scrollbar-sm"
         style={{
           top: position.y,
           left: position.x,
@@ -227,11 +227,11 @@ const ContextMenuWithoutPortal: React.FC<ContextMenuProps> = (props) => {
       </div>
     </div>
   );
-};
+}
 
-export const ContextMenu: React.FC<ContextMenuProps> = (props) => {
+export function ContextMenu(props: ContextMenuProps) {
   let contextMenu = <ContextMenuWithoutPortal {...props} />;
   const portal = document.querySelector("#context-menu-portal");
   if (portal) contextMenu = ReactDOM.createPortal(contextMenu, portal);
   return contextMenu;
-};
+}
diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx
index c63bcd52b2..cd68872e55 100644
--- a/packages/ui/src/dropdowns/custom-menu.tsx
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@@ -25,7 +25,7 @@ interface PortalProps {
   asChild?: boolean;
 }
 
-const Portal: React.FC<PortalProps> = ({ children, container, asChild = false }) => {
+function Portal({ children, container, asChild = false }: PortalProps) {
   const [mounted, setMounted] = React.useState(false);
 
   React.useEffect(() => {
@@ -44,7 +44,7 @@ const Portal: React.FC<PortalProps> = ({ children, container, asChild = false })
   }
 
   return ReactDOM.createPortal(<div data-radix-portal="">{children}</div>, targetContainer);
-};
+}
 
 // Context for main menu to communicate with submenus
 const MenuContext = React.createContext<{
@@ -52,7 +52,7 @@ const MenuContext = React.createContext<{
   registerSubmenu: (closeSubmenu: () => void) => () => void;
 } | null>(null);
 
-const CustomMenu = (props: ICustomMenuDropdownProps) => {
+function CustomMenu(props: ICustomMenuDropdownProps) {
   const {
     ariaLabel,
     buttonClassName = "",
@@ -194,7 +194,7 @@ const 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 overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 px-2 py-2.5 text-11 focus:outline-none min-w-[12rem] whitespace-nowrap",
           {
             "max-h-60": maxHeight === "lg",
             "max-h-48": maxHeight === "md",
@@ -257,8 +257,8 @@ const 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 +271,10 @@ const 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 whitespace-nowrap rounded-md px-2.5 py-1 text-11 duration-300 ${
+                      open ? "text-primary" : "text-secondary"
+                    } ${noBorder ? "" : "border border-strong shadow-sm focus:outline-none"} ${
+                      disabled ? "cursor-not-allowed text-secondary" : "cursor-pointer hover:bg-layer-transparent-hover"
                     } ${buttonClassName}`}
                     onClick={handleMenuButtonClick}
                     tabIndex={customButtonTabIndex}
@@ -295,7 +293,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
       )}
     </Menu>
   );
-};
+}
 
 // SubMenu context for closing submenu from nested items
 const SubMenuContext = React.createContext<{ closeSubmenu: () => void } | null>(null);
@@ -304,7 +302,7 @@ const SubMenuContext = React.createContext<{ closeSubmenu: () => void } | null>(
 const useSubMenu = () => React.useContext(SubMenuContext);
 
 // SubMenu implementation
-const SubMenu: React.FC<ICustomSubMenuProps> = (props) => {
+function SubMenu(props: ICustomSubMenuProps) {
   const {
     children,
     trigger,
@@ -396,10 +394,10 @@ const SubMenu: React.FC<ICustomSubMenuProps> = (props) => {
           {({ 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",
+                "w-full select-none rounded-sm px-1 py-1.5 text-left text-secondary flex items-center justify-between cursor-pointer",
                 {
-                  "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 +417,7 @@ const SubMenu: React.FC<ICustomSubMenuProps> = (props) => {
             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"
@@ -447,9 +444,9 @@ const SubMenu: React.FC<ICustomSubMenuProps> = (props) => {
       )}
     </div>
   );
-};
+}
 
-const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
+function MenuItem(props: ICustomMenuItemProps) {
   const { children, disabled = false, onClick, className } = props;
   const submenuContext = useSubMenu();
 
@@ -459,10 +456,10 @@ const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
         <button
           type="button"
           className={cn(
-            "w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200",
+            "w-full select-none truncate rounded-sm px-1 py-1.5 text-left text-secondary",
             {
-              "bg-custom-background-80": active && !disabled,
-              "text-custom-text-400": disabled,
+              "bg-layer-transparent-hover": active && !disabled,
+              "text-placeholder": disabled,
             },
             className
           )}
@@ -479,9 +476,9 @@ const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
       )}
     </Menu.Item>
   );
-};
+}
 
-const SubMenuTrigger: React.FC<ICustomSubMenuTriggerProps> = (props) => {
+function SubMenuTrigger(props: ICustomSubMenuTriggerProps) {
   const { children, disabled = false, className } = props;
 
   return (
@@ -489,10 +486,10 @@ const SubMenuTrigger: React.FC<ICustomSubMenuTriggerProps> = (props) => {
       {({ 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",
+            "w-full select-none rounded-sm px-1 py-1.5 text-left text-secondary flex items-center justify-between",
             {
-              "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,
             },
@@ -505,22 +502,22 @@ const SubMenuTrigger: React.FC<ICustomSubMenuTriggerProps> = (props) => {
       )}
     </Menu.Item>
   );
-};
+}
 
-const SubMenuContent: React.FC<ICustomSubMenuContentProps> = (props) => {
+function SubMenuContent(props: ICustomSubMenuContentProps) {
   const { children, className } = props;
 
   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
       )}
     >
       {children}
     </div>
   );
-};
+}
 
 // Add all components as static properties for external use
 CustomMenu.Portal = Portal;
diff --git a/packages/ui/src/dropdowns/custom-search-select.tsx b/packages/ui/src/dropdowns/custom-search-select.tsx
index 54175aad52..18a881b766 100644
--- a/packages/ui/src/dropdowns/custom-search-select.tsx
+++ b/packages/ui/src/dropdowns/custom-search-select.tsx
@@ -12,7 +12,7 @@ import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 import { cn } from "../utils";
 import type { ICustomSearchSelectProps } from "./helper";
 
-export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
+export function CustomSearchSelect(props: ICustomSearchSelectProps) {
   const {
     customButtonClassName = "",
     buttonClassName = "",
@@ -99,10 +99,10 @@ export const 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 +117,12 @@ export const 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 +140,17 @@ export const 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",
+                      "my-1 overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 py-2.5 text-11 focus:outline-none min-w-48 whitespace-nowrap z-30",
                       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="flex items-center gap-1.5 rounded-sm border border-subtle px-2 mx-2">
+                      <Search 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"
@@ -175,10 +175,10 @@ export const 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",
+                                  "w-full truncate flex items-center justify-between gap-2 rounded-sm px-1 py-1.5 cursor-pointer select-none",
                                   {
-                                    "bg-custom-background-80": active,
-                                    "text-custom-text-400 opacity-60 cursor-not-allowed": option.disabled,
+                                    "bg-layer-transparent-hover": active,
+                                    "text-placeholder opacity-60 cursor-not-allowed": option.disabled,
                                   }
                                 )
                               }
@@ -195,7 +195,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                                     <>
                                       {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 +207,10 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                             </Combobox.Option>
                           ))
                         ) : (
-                          <p className="text-custom-text-400 italic py-1 px-1.5">{noResultsMessage}</p>
+                          <p className="text-placeholder italic py-1 px-1.5">{noResultsMessage}</p>
                         )
                       ) : (
-                        <p className="text-custom-text-400 italic py-1 px-1.5">Loading...</p>
+                        <p className="text-placeholder italic py-1 px-1.5">Loading...</p>
                       )}
                     </div>
                     {footerOption}
@@ -223,4 +223,4 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
       }}
     </Combobox>
   );
-};
+}
diff --git a/packages/ui/src/dropdowns/custom-select.tsx b/packages/ui/src/dropdowns/custom-select.tsx
index 8f720fa29c..4be2e2d65b 100644
--- a/packages/ui/src/dropdowns/custom-select.tsx
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@@ -1,6 +1,6 @@
 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";
@@ -13,7 +13,10 @@ import { cn } from "../utils";
 // types
 import type { ICustomSelectItemProps, ICustomSelectProps } from "./helper";
 
-const CustomSelect = (props: ICustomSelectProps) => {
+// Context to share the close handler with option components
+const DropdownContext = createContext<() => void>(() => {});
+
+function CustomSelect(props: ICustomSelectProps) {
   const {
     customButtonClassName = "",
     buttonClassName = "",
@@ -42,121 +45,139 @@ const 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 text-11 rounded ${
+                  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(
+                  "my-1 overflow-y-scroll rounded-md border-[0.5px] border-subtle-1 bg-surface-1 px-2 py-2.5 text-11 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",
+                  })}
+                >
+                  {children}
+                </div>
               </div>
-            </div>
-          </Combobox.Options>,
-          document.body
-        )}
-    </Combobox>
+            </Combobox.Options>,
+            document.body
+          )}
+      </Combobox>
+    </DropdownContext.Provider>
   );
-};
+}
 
-const Option = (props: ICustomSelectItemProps) => {
+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",
+          "cursor-pointer select-none truncate rounded-sm px-1 py-1.5 text-secondary flex items-center justify-between gap-2",
           {
-            "bg-custom-background-80": active,
+            "bg-layer-transparent-hover": active,
           },
           className
         )
       }
+      onClick={handleClick}
     >
       {({ selected }) => (
-        <>
+        <div className="flex items-center justify-between gap-2 w-full">
           {children}
           {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
-        </>
+        </div>
       )}
     </Combobox.Option>
   );
-};
+}
 
 CustomSelect.Option = Option;
 
diff --git a/packages/ui/src/favorite-star.tsx b/packages/ui/src/favorite-star.tsx
index 8614f65656..0dfaad944a 100644
--- a/packages/ui/src/favorite-star.tsx
+++ b/packages/ui/src/favorite-star.tsx
@@ -10,20 +10,20 @@ type Props = {
   selected: boolean;
 };
 
-export const FavoriteStar: React.FC<Props> = (props) => {
+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}>
       <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
         )}
       />
     </button>
   );
-};
+}
diff --git a/packages/ui/src/form-fields/checkbox.tsx b/packages/ui/src/form-fields/checkbox.tsx
index 7f9b8134dc..b49d95de30 100644
--- a/packages/ui/src/form-fields/checkbox.tsx
+++ b/packages/ui/src/form-fields/checkbox.tsx
@@ -8,7 +8,7 @@ export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElemen
   indeterminate?: boolean;
 }
 
-const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
+const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, ref: React.ForwardedRef<HTMLInputElement>) {
   const {
     id,
     name,
@@ -30,12 +30,14 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props, ref)
         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",
+          "appearance-none shrink-0 size-4 border rounded-[3px] focus:outline-1 focus:outline-offset-4 focus:outline-accent-strong cursor-pointer",
           {
-            "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":
+            "border-subtle bg-layer-1 cursor-not-allowed": disabled,
+            "border-strong hover:border-strong-1 bg-transparent": !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 +46,10 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props, ref)
       />
       <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",
+          "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 text-on-color",
           {
             block: checked,
-            "stroke-custom-text-400 opacity-40": disabled,
+            "text-placeholder opacity-40": disabled,
           },
           iconClassName
         )}
@@ -65,7 +67,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>((props, ref)
         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",
           {
-            "stroke-custom-text-400 opacity-40": disabled,
+            "stroke-placeholder opacity-40": disabled,
             block: indeterminate && !checked,
           },
           iconClassName
diff --git a/packages/ui/src/form-fields/input-color-picker.tsx b/packages/ui/src/form-fields/input-color-picker.tsx
index 0294dff523..0e3a30ed45 100644
--- a/packages/ui/src/form-fields/input-color-picker.tsx
+++ b/packages/ui/src/form-fields/input-color-picker.tsx
@@ -19,7 +19,7 @@ export interface InputColorPickerProps {
   placeholder: string;
 }
 
-export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
+export function InputColorPicker(props: InputColorPickerProps) {
   const { value, hasError, onChange, name, className, style, placeholder } = props;
 
   const [referenceElement, setReferenceElement] = React.useState<HTMLButtonElement | null>(null);
@@ -48,67 +48,58 @@ export const InputColorPicker: React.FC<InputColorPickerProps> = (props) => {
         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.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 d42c4c098e..a9094977f8 100644
--- a/packages/ui/src/form-fields/input.tsx
+++ b/packages/ui/src/form-fields/input.tsx
@@ -10,7 +10,7 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>
   autoComplete?: "on" | "off";
 }
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+const Input = React.forwardRef(function Input(props: InputProps, ref: React.ForwardedRef<HTMLInputElement>) {
   const {
     id,
     type,
@@ -30,12 +30,12 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
       type={type}
       name={name}
       className={cn(
-        "block rounded-md bg-transparent text-sm placeholder-custom-text-400 focus:outline-none",
+        "block rounded-md bg-layer-2 text-13 placeholder-tertiary border-subtle-1 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",
+          "rounded-sm border-none bg-transparent ring-0": mode === "true-transparent",
           "border-red-500": hasError,
           "px-1.5 py-1": inputSize === "xs",
           "px-3 py-2": inputSize === "sm",
diff --git a/packages/ui/src/form-fields/password/helper.tsx b/packages/ui/src/form-fields/password/helper.tsx
index cb93f7dbd0..33f80b1454 100644
--- a/packages/ui/src/form-fields/password/helper.tsx
+++ b/packages/ui/src/form-fields/password/helper.tsx
@@ -14,7 +14,7 @@ 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:
@@ -38,7 +38,7 @@ export const getStrengthInfo = (strength: E_PASSWORD_STRENGTH): StrengthInfo =>
     default:
       return {
         message: "Please enter your password",
-        textColor: "text-custom-text-100",
+        textColor: "text-primary",
         activeFragments: 0,
       };
   }
@@ -49,7 +49,7 @@ 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) {
@@ -60,6 +60,6 @@ export const getFragmentColor = (fragmentIndex: number, activeFragments: number)
     case 3:
       return "bg-green-500";
     default:
-      return "bg-custom-background-80";
+      return "bg-layer-1";
   }
 };
diff --git a/packages/ui/src/form-fields/password/indicator.tsx b/packages/ui/src/form-fields/password/indicator.tsx
index 72ce448504..95534fa6e6 100644
--- a/packages/ui/src/form-fields/password/indicator.tsx
+++ b/packages/ui/src/form-fields/password/indicator.tsx
@@ -10,11 +10,11 @@ export interface PasswordStrengthIndicatorProps {
   isFocused?: boolean;
 }
 
-export const PasswordStrengthIndicator: React.FC<PasswordStrengthIndicatorProps> = ({
+export function PasswordStrengthIndicator({
   password,
   showCriteria = true,
   isFocused = false,
-}) => {
+}: PasswordStrengthIndicatorProps) {
   const strength = getPasswordStrength(password);
   const criteria = getPasswordCriteria(password);
   const strengthInfo = getStrengthInfo(strength);
@@ -34,7 +34,7 @@ export const PasswordStrengthIndicator: React.FC<PasswordStrengthIndicatorProps>
             <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 +42,7 @@ export const PasswordStrengthIndicator: React.FC<PasswordStrengthIndicatorProps>
         </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 */}
@@ -54,14 +54,14 @@ export const PasswordStrengthIndicator: React.FC<PasswordStrengthIndicatorProps>
                 <CircleCheck
                   className={cn("h-3 w-3 flex-shrink-0", {
                     "text-green-500": criterion.isValid,
-                    "text-custom-text-100": !criterion.isValid,
+                    "text-primary": !criterion.isValid,
                   })}
                 />
               </div>
               <span
-                className={cn("text-xs", {
+                className={cn("!text-11", {
                   "text-green-500": criterion.isValid,
-                  "text-custom-text-100": !criterion.isValid,
+                  "text-primary": !criterion.isValid,
                 })}
               >
                 {criterion.label}
@@ -72,4 +72,4 @@ export const PasswordStrengthIndicator: React.FC<PasswordStrengthIndicatorProps>
       )}
     </div>
   );
-};
+}
diff --git a/packages/ui/src/form-fields/password/password-input.tsx b/packages/ui/src/form-fields/password/password-input.tsx
index ad990f257c..34e99a8af8 100644
--- a/packages/ui/src/form-fields/password/password-input.tsx
+++ b/packages/ui/src/form-fields/password/password-input.tsx
@@ -13,7 +13,7 @@ interface PasswordInputProps {
   error?: boolean;
 }
 
-export const PasswordInput: React.FC<PasswordInputProps> = ({
+export function PasswordInput({
   id,
   value,
   onChange,
@@ -21,7 +21,7 @@ export const PasswordInput: React.FC<PasswordInputProps> = ({
   className,
   showToggle = true,
   error = false,
-}) => {
+}: PasswordInputProps) {
   const [showPassword, setShowPassword] = useState(false);
   return (
     <div className="relative">
@@ -31,9 +31,9 @@ export const PasswordInput: React.FC<PasswordInputProps> = ({
         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 px-3 py-2 pr-10 text-secondary border rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong placeholder:text-placeholder focus:border-transparent transition-all duration-200",
           {
-            "border-custom-border-300": !error,
+            "border-strong": !error,
             "border-red-500": error,
           },
           className
@@ -45,7 +45,7 @@ export const PasswordInput: React.FC<PasswordInputProps> = ({
           <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 pr-3 flex items-center text-secondary hover:text-primary transition-colors duration-200"
           >
             <div className="relative w-4 h-4">
               <Eye
@@ -66,4 +66,4 @@ export const PasswordInput: React.FC<PasswordInputProps> = ({
       )}
     </div>
   );
-};
+}
diff --git a/packages/ui/src/form-fields/root.tsx b/packages/ui/src/form-fields/root.tsx
index 782b6e1aa5..03f7d39afa 100644
--- a/packages/ui/src/form-fields/root.tsx
+++ b/packages/ui/src/form-fields/root.tsx
@@ -8,11 +8,13 @@ interface LabelProps {
   className?: string;
 }
 
-export const Label: React.FC<LabelProps> = ({ htmlFor, children, className }) => (
-  <label htmlFor={htmlFor} className={cn("block text-sm font-medium text-custom-text-100", className)}>
-    {children}
-  </label>
-);
+export function Label({ htmlFor, children, className }: LabelProps) {
+  return (
+    <label htmlFor={htmlFor} className={cn("block text-13 font-medium text-primary", className)}>
+      {children}
+    </label>
+  );
+}
 
 // Reusable Form Field Component
 interface FormFieldProps {
@@ -23,15 +25,17 @@ interface FormFieldProps {
   optional?: boolean;
 }
 
-export const FormField: React.FC<FormFieldProps> = ({ label, htmlFor, children, className, optional = false }) => (
-  <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>}
-    </Label>
-    {children}
-  </div>
-);
+export function FormField({ label, htmlFor, children, className, optional = false }: FormFieldProps) {
+  return (
+    <div className={cn("flex flex-col gap-1.5", className)}>
+      <Label htmlFor={htmlFor}>
+        {label}
+        {optional && <span className="text-placeholder text-13"> (optional)</span>}
+      </Label>
+      {children}
+    </div>
+  );
+}
 
 // Reusable Validation Message Component
 interface ValidationMessageProps {
@@ -40,17 +44,19 @@ interface ValidationMessageProps {
   className?: string;
 }
 
-export const ValidationMessage: React.FC<ValidationMessageProps> = ({ type, message, className }) => (
-  <p
-    className={cn(
-      "text-sm",
-      {
-        "text-red-500": type === "error",
-        "text-green-500": type === "success",
-      },
-      className
-    )}
-  >
-    {message}
-  </p>
-);
+export function ValidationMessage({ type, message, className }: ValidationMessageProps) {
+  return (
+    <p
+      className={cn(
+        "text-13",
+        {
+          "text-red-500": type === "error",
+          "text-green-500": type === "success",
+        },
+        className
+      )}
+    >
+      {message}
+    </p>
+  );
+}
diff --git a/packages/ui/src/form-fields/textarea.tsx b/packages/ui/src/form-fields/textarea.tsx
index b4ad0c4bc5..5f1b5ed948 100644
--- a/packages/ui/src/form-fields/textarea.tsx
+++ b/packages/ui/src/form-fields/textarea.tsx
@@ -11,7 +11,10 @@ export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextArea
   className?: string;
 }
 
-const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => {
+const TextArea = React.forwardRef(function TextArea(
+  props: TextAreaProps,
+  ref: React.ForwardedRef<HTMLTextAreaElement>
+) {
   const {
     id,
     name,
@@ -34,12 +37,12 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, re
       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",
diff --git a/packages/ui/src/header/header.tsx b/packages/ui/src/header/header.tsx
index ba98c58d37..1f80bc36b6 100644
--- a/packages/ui/src/header/header.tsx
+++ b/packages/ui/src/header/header.tsx
@@ -13,7 +13,8 @@ export interface HeaderProps {
 }
 
 const HeaderContext = React.createContext<THeaderVariant | null>(null);
-const Header = (props: HeaderProps) => {
+
+function Header(props: HeaderProps) {
   const {
     variant = EHeaderVariant.PRIMARY,
     className = "",
@@ -35,25 +36,28 @@ const Header = (props: HeaderProps) => {
       </Row>
     </HeaderContext.Provider>
   );
-};
+}
 
-const LeftItem = (props: HeaderProps) => (
-  <div
-    className={cn(
-      "flex flex-wrap items-center gap-2 overflow-ellipsis whitespace-nowrap max-w-[80%] flex-grow",
-      props.className
-    )}
-  >
-    {props.children}
-  </div>
-);
-const RightItem = (props: HeaderProps) => {
+function LeftItem(props: HeaderProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-wrap items-center gap-2 overflow-ellipsis whitespace-nowrap max-w-[80%] flex-grow",
+        props.className
+      )}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+function RightItem(props: HeaderProps) {
   const variant = React.useContext(HeaderContext);
   if (variant === undefined) throw new Error("RightItem must be used within Header");
   return (
     <div
       className={cn(
-        "flex justify-end gap-3 w-auto items-start",
+        "flex justify-end gap-2 w-auto items-center",
         {
           "items-baseline": variant === EHeaderVariant.TERNARY,
         },
@@ -63,7 +67,7 @@ const RightItem = (props: HeaderProps) => {
       {props.children}
     </div>
   );
-};
+}
 
 Header.LeftItem = LeftItem;
 Header.RightItem = RightItem;
diff --git a/packages/ui/src/header/helper.tsx b/packages/ui/src/header/helper.tsx
index a2d21cd370..b43ab2343b 100644
--- a/packages/ui/src/header/helper.tsx
+++ b/packages/ui/src/header/helper.tsx
@@ -10,11 +10,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/index.ts b/packages/ui/src/index.ts
index 36aeaa9767..5792b26d42 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -30,5 +30,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 1b98e27b08..1358237932 100644
--- a/packages/ui/src/link/block.tsx
+++ b/packages/ui/src/link/block.tsx
@@ -14,7 +14,7 @@ export type TLinkItemBlockProps = {
   onClick?: () => void;
 };
 
-export const LinkItemBlock: FC<TLinkItemBlockProps> = (props) => {
+export function LinkItemBlock(props: TLinkItemBlockProps) {
   // props
   const { title, url, createdAt, menuItems, onClick } = props;
   // icons
@@ -22,14 +22,14 @@ export const LinkItemBlock: FC<TLinkItemBlockProps> = (props) => {
   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="cursor-pointer group flex items-center bg-surface-1 px-4 w-[230px] h-[56px] border-[0.5px] border-subtle rounded-md gap-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="flex-shrink-0 size-8 rounded-sm p-2 bg-surface-2 grid place-items-center">
+        <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="text-13 font-medium truncate">{title}</div>
+        {createdAt && <div className="text-11 font-medium text-placeholder">{calculateTimeAgo(createdAt)}</div>}
       </div>
       {menuItems && (
         <div className="hidden group-hover:block">
@@ -43,7 +43,7 @@ export const LinkItemBlock: FC<TLinkItemBlockProps> = (props) => {
                   item.action();
                 }}
                 className={cn("flex items-center gap-2 w-full ", {
-                  "text-custom-text-400": item.disabled,
+                  "text-placeholder": item.disabled,
                 })}
                 disabled={item.disabled}
               >
@@ -52,8 +52,8 @@ export const LinkItemBlock: FC<TLinkItemBlockProps> = (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("text-tertiary whitespace-pre-line", {
+                        "text-placeholder": item.disabled,
                       })}
                     >
                       {item.description}
@@ -67,4 +67,4 @@ export const LinkItemBlock: FC<TLinkItemBlockProps> = (props) => {
       )}
     </div>
   );
-};
+}
diff --git a/packages/ui/src/loader.tsx b/packages/ui/src/loader.tsx
index 6eaa74c65d..8369fc99da 100644
--- a/packages/ui/src/loader.tsx
+++ b/packages/ui/src/loader.tsx
@@ -7,11 +7,13 @@ type Props = {
   className?: string;
 };
 
-const Loader = ({ children, className = "" }: Props) => (
-  <div className={cn("animate-pulse", className)} role="status">
-    {children}
-  </div>
-);
+function Loader({ children, className = "" }: Props) {
+  return (
+    <div className={cn("animate-pulse", className)} role="status">
+      {children}
+    </div>
+  );
+}
 
 type ItemProps = {
   height?: string;
@@ -19,9 +21,9 @@ type ItemProps = {
   className?: string;
 };
 
-const Item: React.FC<ItemProps> = ({ height = "auto", width = "auto", className = "" }) => (
-  <div className={cn("rounded-md bg-custom-background-80", className)} style={{ height: height, width: width }} />
-);
+function Item({ height = "auto", width = "auto", className = "" }: ItemProps) {
+  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 dfffec802d..9d9705732e 100644
--- a/packages/ui/src/modals/alert-modal.tsx
+++ b/packages/ui/src/modals/alert-modal.tsx
@@ -2,8 +2,8 @@ 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 +28,7 @@ type Props = {
   title: string;
   variant?: TModalVariant;
   width?: EModalWidth;
+  customIcon?: React.ReactNode;
 };
 
 const VARIANT_ICONS: Record<TModalVariant, LucideIcon> = {
@@ -36,16 +37,16 @@ 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",
+  primary: "bg-accent-primary/20 text-accent-primary",
 };
 
-export const AlertModalCore: React.FC<Props> = (props) => {
+export function AlertModalCore(props: Props) {
   const {
     content,
     handleClose,
@@ -62,6 +63,7 @@ export const AlertModalCore: React.FC<Props> = (props) => {
     title,
     variant = "danger",
     width = EModalWidth.XL,
+    customIcon,
   } = props;
 
   const Icon = VARIANT_ICONS[variant];
@@ -76,22 +78,22 @@ export const AlertModalCore: React.FC<Props> = (props) => {
               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="px-5 py-4 flex flex-col-reverse sm:flex-row sm:justify-end gap-2 border-t-[0.5px] border-subtle">
+        <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>
     </ModalCore>
   );
-};
+}
diff --git a/packages/ui/src/modals/modal-core.tsx b/packages/ui/src/modals/modal-core.tsx
index ff8e94a74b..9ff4674086 100644
--- a/packages/ui/src/modals/modal-core.tsx
+++ b/packages/ui/src/modals/modal-core.tsx
@@ -13,7 +13,7 @@ type Props = {
   width?: EModalWidth;
   className?: string;
 };
-export const ModalCore: React.FC<Props> = (props) => {
+export function ModalCore(props: Props) {
   const {
     children,
     handleClose,
@@ -35,7 +35,7 @@ export const ModalCore: React.FC<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 +51,7 @@ export const ModalCore: React.FC<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 transform rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all w-full",
                   width,
                   className
                 )}
@@ -64,4 +64,4 @@ export const ModalCore: React.FC<Props> = (props) => {
       </Dialog>
     </Transition.Root>
   );
-};
+}
diff --git a/packages/ui/src/oauth/oauth-button.tsx b/packages/ui/src/oauth/oauth-button.tsx
index 1bf454dad3..06b8c99016 100644
--- a/packages/ui/src/oauth/oauth-button.tsx
+++ b/packages/ui/src/oauth/oauth-button.tsx
@@ -7,21 +7,26 @@ export interface OAuthButtonProps extends React.ButtonHTMLAttributes<HTMLButtonE
   compact?: boolean;
 }
 
-const OAuthButton = React.forwardRef<HTMLButtonElement, OAuthButtonProps>((props, ref) => {
+const OAuthButton = React.forwardRef(function OAuthButton(
+  props: OAuthButtonProps,
+  ref: React.ForwardedRef<HTMLButtonElement>
+) {
   const { text, icon, compact = false, className = "", ...rest } = props;
 
   return (
     <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",
+        "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 bg-onboarding-background-200 hover:bg-onboarding-background-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 transition-opacity duration-300 text-body-sm-regular">
+          {text}
+        </span>
       )}
     </button>
   );
diff --git a/packages/ui/src/oauth/oauth-options.tsx b/packages/ui/src/oauth/oauth-options.tsx
index 1c42cb19d5..4eddb4b186 100644
--- a/packages/ui/src/oauth/oauth-options.tsx
+++ b/packages/ui/src/oauth/oauth-options.tsx
@@ -18,7 +18,7 @@ type OAuthOptionsProps = {
   containerClassName?: string;
 };
 
-export const OAuthOptions = (props: OAuthOptionsProps) => {
+export function OAuthOptions(props: OAuthOptionsProps) {
   const { options, compact = false, className = "", containerClassName = "" } = props;
 
   // Filter enabled options
@@ -48,10 +48,10 @@ export const 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" />
+        <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/popover-menu.stories.tsx b/packages/ui/src/popovers/popover-menu.stories.tsx
index 4e8a56cda6..b65d1a1a7b 100644
--- a/packages/ui/src/popovers/popover-menu.stories.tsx
+++ b/packages/ui/src/popovers/popover-menu.stories.tsx
@@ -16,7 +16,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 +25,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-13 text-gray-600 hover:text-gray-700 rounded-xs cursor-pointer hover:bg-gray-200 transition-all px-1.5 py-0.5 capitalize">
         {item.name}
       </div>
     ),
diff --git a/packages/ui/src/popovers/popover-menu.tsx b/packages/ui/src/popovers/popover-menu.tsx
index fa5f2833a3..896f49893c 100644
--- a/packages/ui/src/popovers/popover-menu.tsx
+++ b/packages/ui/src/popovers/popover-menu.tsx
@@ -6,7 +6,7 @@ import { Popover } from "./popover";
 // types
 import type { TPopoverMenu } from "./types";
 
-export const PopoverMenu = <T,>(props: TPopoverMenu<T>) => {
+export function PopoverMenu<T>(props: TPopoverMenu<T>) {
   const {
     popperPosition = "bottom-end",
     popperPadding = 0,
@@ -29,7 +29,7 @@ export const 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}
@@ -42,4 +42,4 @@ export const PopoverMenu = <T,>(props: TPopoverMenu<T>) => {
       </Fragment>
     </Popover>
   );
-};
+}
diff --git a/packages/ui/src/popovers/popover.stories.tsx b/packages/ui/src/popovers/popover.stories.tsx
index 241ff7ee6c..f3b4a32d67 100644
--- a/packages/ui/src/popovers/popover.stories.tsx
+++ b/packages/ui/src/popovers/popover.stories.tsx
@@ -17,12 +17,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-13 font-medium text-gray-500">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-13 text-gray-600 hover:text-gray-700 rounded-xs cursor-pointer hover:bg-gray-200 transition-all px-1.5 py-0.5 capitalize"
         >
           {option}
         </div>
@@ -35,7 +35,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 +44,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="p-2 text-13 font-medium rounded-sm bg-gray-100 hover:bg-gray-200 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 96027798dd..237622bc4d 100644
--- a/packages/ui/src/popovers/popover.tsx
+++ b/packages/ui/src/popovers/popover.tsx
@@ -8,7 +8,7 @@ import { cn } from "../utils";
 // types
 import type { TPopover } from "./types";
 
-export const Popover = (props: TPopover) => {
+export function Popover(props: TPopover) {
   const {
     popperPosition = "bottom-end",
     popperPadding = 0,
@@ -45,7 +45,7 @@ export const 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 justify-center items-center text-14 h-6 w-6 rounded-sm transition-all bg-surface-2 hover:bg-layer-1":
                 !button,
             },
             buttonClassName
@@ -76,4 +76,4 @@ export const Popover = (props: TPopover) => {
       </Transition>
     </HeadlessReactPopover>
   );
-};
+}
diff --git a/packages/ui/src/progress/circular-progress-indicator.tsx b/packages/ui/src/progress/circular-progress-indicator.tsx
index 139297c40e..4e0200bb76 100644
--- a/packages/ui/src/progress/circular-progress-indicator.tsx
+++ b/packages/ui/src/progress/circular-progress-indicator.tsx
@@ -8,8 +8,8 @@ interface ICircularProgressIndicator {
   children?: React.ReactNode;
 }
 
-export const CircularProgressIndicator: React.FC<ICircularProgressIndicator> = (props) => {
-  const { size = 40, percentage = 25, strokeWidth = 6, strokeColor = "stroke-custom-primary-100", children } = props;
+export function CircularProgressIndicator(props: ICircularProgressIndicator) {
+  const { size = 40, percentage = 25, strokeWidth = 6, strokeColor = "stroke-success", children } = props;
 
   const sqSize = size;
   const radius = (size - strokeWidth) / 2;
@@ -20,7 +20,7 @@ export const CircularProgressIndicator: React.FC<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}
@@ -81,4 +81,4 @@ export const CircularProgressIndicator: React.FC<ICircularProgressIndicator> = (
       </div>
     </div>
   );
-};
+}
diff --git a/packages/ui/src/progress/linear-progress-indicator.tsx b/packages/ui/src/progress/linear-progress-indicator.tsx
index 9400690e39..e625c3fec3 100644
--- a/packages/ui/src/progress/linear-progress-indicator.tsx
+++ b/packages/ui/src/progress/linear-progress-indicator.tsx
@@ -11,14 +11,14 @@ type Props = {
   barClassName?: string;
 };
 
-export const LinearProgressIndicator: React.FC<Props> = ({
+export function LinearProgressIndicator({
   data,
   noTooltip = false,
   inPercentage = false,
   size = "sm",
   className = "",
   barClassName = "",
-}) => {
+}: Props) {
   const total = data.reduce((acc: any, cur: any) => acc + cur.value, 0);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   let progress = 0;
@@ -35,23 +35,21 @@ export const LinearProgressIndicator: React.FC<Props> = ({
     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] p-[2px] bg-surface-2 rounded-xs", className)}>{bars}</div>
     </div>
   );
-};
+}
diff --git a/packages/ui/src/progress/progress-bar.tsx b/packages/ui/src/progress/progress-bar.tsx
index b92b568ac6..4493548b80 100644
--- a/packages/ui/src/progress/progress-bar.tsx
+++ b/packages/ui/src/progress/progress-bar.tsx
@@ -9,14 +9,14 @@ type Props = {
   inactiveStrokeColor?: string;
 };
 
-export const ProgressBar: React.FC<Props> = ({
+export function ProgressBar({
   maxValue = 0,
   value = 0,
   radius = 8,
   strokeWidth = 2,
   activeStrokeColor = "#3e98c7",
   inactiveStrokeColor = "#ddd",
-}) => {
+}: Props) {
   // PIE Calc Fn
   const generatePie = (value: any) => {
     const x = radius - Math.cos((2 * Math.PI) / (100 / value)) * radius;
@@ -65,4 +65,4 @@ export const ProgressBar: React.FC<Props> = ({
       <circle r={radius - strokeWidth} cx={radius} cy={radius} className="progress-bar" />
     </svg>
   );
-};
+}
diff --git a/packages/ui/src/progress/radial-progress.tsx b/packages/ui/src/progress/radial-progress.tsx
index ea386b06b3..173566d277 100644
--- a/packages/ui/src/progress/radial-progress.tsx
+++ b/packages/ui/src/progress/radial-progress.tsx
@@ -5,7 +5,7 @@ interface IRadialProgressBar {
   progress: number;
 }
 
-export const RadialProgressBar: FC<IRadialProgressBar> = (props) => {
+export function RadialProgressBar(props: IRadialProgressBar) {
   const { progress } = props;
   const [circumference, setCircumference] = useState(0);
 
@@ -43,4 +43,4 @@ export const RadialProgressBar: FC<IRadialProgressBar> = (props) => {
       </svg>
     </div>
   );
-};
+}
diff --git a/packages/ui/src/row/row.tsx b/packages/ui/src/row/row.tsx
index 740e22fc51..cc223c0e8f 100644
--- a/packages/ui/src/row/row.tsx
+++ b/packages/ui/src/row/row.tsx
@@ -9,7 +9,7 @@ export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
 }
 
-const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
+const Row = React.forwardRef(function Row(props: RowProps, ref: React.ForwardedRef<HTMLDivElement>) {
   const { variant = ERowVariant.REGULAR, className = "", children, ...rest } = props;
 
   const style = rowStyle[variant];
diff --git a/packages/ui/src/scroll-area.tsx b/packages/ui/src/scroll-area.tsx
index 9378b46385..088f54bfba 100644
--- a/packages/ui/src/scroll-area.tsx
+++ b/packages/ui/src/scroll-area.tsx
@@ -1,4 +1,3 @@
-"use client";
 import * as RadixScrollArea from "@radix-ui/react-scroll-area";
 import type { FC } from "react";
 import React from "react";
@@ -24,7 +23,7 @@ const thumbSizeStyles = {
   lg: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-17 before:min-w-17 before:-translate-x-1/2 before:-translate-y-1/2",
 };
 
-export const ScrollArea: FC<TScrollAreaProps> = (props) => {
+export function ScrollArea(props: TScrollAreaProps) {
   const { type = "always", className = "", scrollHideDelay = 600, size = "md", children } = props;
 
   return (
@@ -43,7 +42,7 @@ export const ScrollArea: FC<TScrollAreaProps> = (props) => {
       >
         <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]
           )}
         />
@@ -57,11 +56,11 @@ export const ScrollArea: FC<TScrollAreaProps> = (props) => {
       >
         <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.Root>
   );
-};
+}
diff --git a/packages/ui/src/sortable/draggable.tsx b/packages/ui/src/sortable/draggable.tsx
index cea7f50654..8661eec2cb 100644
--- a/packages/ui/src/sortable/draggable.tsx
+++ b/packages/ui/src/sortable/draggable.tsx
@@ -20,7 +20,8 @@ type Props = {
   data: any; //@todo make this generic
   className?: string;
 };
-const Draggable = ({ children, data, className }: Props) => {
+
+function Draggable({ children, data, className }: Props) {
   const ref = useRef<HTMLDivElement>(null);
   const [dragging, setDragging] = useState<boolean>(false); // NEW
   const [isDraggedOver, setIsDraggedOver] = useState(false);
@@ -69,6 +70,6 @@ const Draggable = ({ children, data, className }: Props) => {
       {<DropIndicator isVisible={isDraggedOver && closestEdge === "bottom"} />}
     </div>
   );
-};
+}
 
 export { Draggable };
diff --git a/packages/ui/src/sortable/sortable.tsx b/packages/ui/src/sortable/sortable.tsx
index 0461e9b87a..b767aa482d 100644
--- a/packages/ui/src/sortable/sortable.tsx
+++ b/packages/ui/src/sortable/sortable.tsx
@@ -32,26 +32,23 @@ const moveItem = <T,>(
 
   const symbolKey = Reflect.ownKeys(destination).find((key) => key.toString() === "Symbol(closestEdge)");
   const position = symbolKey ? destination[symbolKey as symbol] : "bottom"; // Add 'as symbol' to cast symbolKey to symbol
+
+  // Calculate final position before removing source item
+  const finalIndex = position === "bottom" ? destinationIndex + 1 : destinationIndex;
+
+  // Adjust for the fact that we're removing the source item first
+  // If source is before destination, removing it shifts everything back by 1
+  const adjustedDestinationIndex = finalIndex > sourceIndex ? finalIndex - 1 : finalIndex;
+
   const newData = [...data];
   const [movedItem] = newData.splice(sourceIndex, 1);
 
-  let adjustedDestinationIndex = destinationIndex;
-  if (position === "bottom") {
-    adjustedDestinationIndex++;
-  }
-
-  // Prevent moving item out of bounds
-  if (adjustedDestinationIndex > newData.length) {
-    adjustedDestinationIndex = newData.length;
-  }
-
+  // Insert at the calculated position (bounds check is implicit in splice)
   newData.splice(adjustedDestinationIndex, 0, movedItem);
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { __uuid__: movedItemId, ...movedItemData } = movedItem;
   return {
     newData: newData.map((item) => {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const { __uuid__: uuid, ...rest } = item;
       return rest as T;
     }),
@@ -59,7 +56,7 @@ const moveItem = <T,>(
   };
 };
 
-export const Sortable = <T,>({ data, render, onChange, keyExtractor, containerClassName, id }: Props<T>) => {
+export function Sortable<T>({ data, render, onChange, keyExtractor, containerClassName, id }: Props<T>) {
   useEffect(() => {
     const unsubscribe = monitorForElements({
       // @ts-expect-error Due to live server dependencies
@@ -100,6 +97,6 @@ export const Sortable = <T,>({ data, render, onChange, keyExtractor, containerCl
       ))}
     </>
   );
-};
+}
 
 export default Sortable;
diff --git a/packages/ui/src/spinners/circular-bar-spinner.tsx b/packages/ui/src/spinners/circular-bar-spinner.tsx
index 3be8af43aa..ab5e5ef758 100644
--- a/packages/ui/src/spinners/circular-bar-spinner.tsx
+++ b/packages/ui/src/spinners/circular-bar-spinner.tsx
@@ -6,30 +6,28 @@ interface ICircularBarSpinner extends React.SVGAttributes<SVGElement> {
   className?: string | undefined;
 }
 
-export const CircularBarSpinner: React.FC<ICircularBarSpinner> = ({
-  height = "16px",
-  width = "16px",
-  className = "",
-}) => (
-  <div role="status">
-    <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" className={className}>
-      <g>
-        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.14} />
-        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.29} transform="rotate(30 12 12)" />
-        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.43} transform="rotate(60 12 12)" />
-        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.57} transform="rotate(90 12 12)" />
-        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.71} transform="rotate(120 12 12)" />
-        <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.86} transform="rotate(150 12 12)" />
-        <rect width={2} height={5} x={11} y={1} fill="currentColor" transform="rotate(180 12 12)" />
-        <animateTransform
-          attributeName="transform"
-          calcMode="discrete"
-          dur="0.75s"
-          repeatCount="indefinite"
-          type="rotate"
-          values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12"
-        />
-      </g>
-    </svg>
-  </div>
-);
+export function CircularBarSpinner({ height = "16px", width = "16px", className = "" }: ICircularBarSpinner) {
+  return (
+    <div role="status">
+      <svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} viewBox="0 0 24 24" className={className}>
+        <g>
+          <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.14} />
+          <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.29} transform="rotate(30 12 12)" />
+          <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.43} transform="rotate(60 12 12)" />
+          <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.57} transform="rotate(90 12 12)" />
+          <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.71} transform="rotate(120 12 12)" />
+          <rect width={2} height={5} x={11} y={1} fill="currentColor" opacity={0.86} transform="rotate(150 12 12)" />
+          <rect width={2} height={5} x={11} y={1} fill="currentColor" transform="rotate(180 12 12)" />
+          <animateTransform
+            attributeName="transform"
+            calcMode="discrete"
+            dur="0.75s"
+            repeatCount="indefinite"
+            type="rotate"
+            values="0 12 12;30 12 12;60 12 12;90 12 12;120 12 12;150 12 12;180 12 12;210 12 12;240 12 12;270 12 12;300 12 12;330 12 12;360 12 12"
+          />
+        </g>
+      </svg>
+    </div>
+  );
+}
diff --git a/packages/ui/src/spinners/circular-spinner.tsx b/packages/ui/src/spinners/circular-spinner.tsx
index 357f009082..1516c029d9 100644
--- a/packages/ui/src/spinners/circular-spinner.tsx
+++ b/packages/ui/src/spinners/circular-spinner.tsx
@@ -8,26 +8,28 @@ export interface ISpinner extends React.SVGAttributes<SVGElement> {
   className?: string | undefined;
 }
 
-export const Spinner: React.FC<ISpinner> = ({ height = "32px", width = "32px", className = "" }) => (
-  <div role="status">
-    <svg
-      aria-hidden="true"
-      height={height}
-      width={width}
-      className={cn("animate-spin fill-custom-primary-100 text-custom-text-200", className)}
-      viewBox="0 0 100 101"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-        fill="currentColor"
-      />
-      <path
-        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"
-        fill="currentFill"
-      />
-    </svg>
-    <span className="sr-only">Loading...</span>
-  </div>
-);
+export function Spinner({ height = "32px", width = "32px", className = "" }: ISpinner) {
+  return (
+    <div role="status">
+      <svg
+        aria-hidden="true"
+        height={height}
+        width={width}
+        className={cn("animate-spin fill-accent-primary text-secondary", className)}
+        viewBox="0 0 100 101"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+          fill="currentColor"
+        />
+        <path
+          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"
+          fill="currentFill"
+        />
+      </svg>
+      <span className="sr-only">Loading...</span>
+    </div>
+  );
+}
diff --git a/packages/ui/src/tables/table.stories.tsx b/packages/ui/src/tables/table.stories.tsx
index b780c49f15..30b8a1fe0b 100644
--- a/packages/ui/src/tables/table.stories.tsx
+++ b/packages/ui/src/tables/table.stories.tsx
@@ -52,7 +52,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 707a1677b2..956af8435e 100644
--- a/packages/ui/src/tables/table.tsx
+++ b/packages/ui/src/tables/table.tsx
@@ -4,7 +4,7 @@ import { cn } from "../utils";
 // types
 import type { TTableData } from "./types";
 
-export const Table = <T,>(props: TTableData<T>) => {
+export function Table<T>(props: TTableData<T>) {
   const {
     data,
     columns,
@@ -20,8 +20,8 @@ export const Table = <T,>(props: TTableData<T>) => {
 
   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)}>
+      <thead className={cn("divide-y divide-subtle-1", tHeadClassName)}>
+        <tr className={cn("divide-x divide-subtle-1 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 +29,11 @@ export const Table = <T,>(props: TTableData<T>) => {
           ))}
         </tr>
       </thead>
-      <tbody className={cn("divide-y divide-custom-border-200", tBodyClassName)}>
+      <tbody className={cn("divide-y divide-subtle-1", 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-1 text-13 text-secondary", tBodyTrClassName)}
           >
             {columns.map((column) => (
               <td key={`${column.key}-${keyExtractor(item)}`} className={cn("px-2.5 py-2", tdClassName)}>
@@ -45,4 +45,4 @@ export const Table = <T,>(props: TTableData<T>) => {
       </tbody>
     </table>
   );
-};
+}
diff --git a/packages/ui/src/tabs/tab-list.tsx b/packages/ui/src/tabs/tab-list.tsx
index 5a828f2ce0..286a398a4a 100644
--- a/packages/ui/src/tabs/tab-list.tsx
+++ b/packages/ui/src/tabs/tab-list.tsx
@@ -19,54 +19,62 @@ type TTabListProps = {
   tabClassName?: string;
   size?: "sm" | "md" | "lg";
   selectedTab?: string;
+  autoWrap?: boolean;
   onTabChange?: (key: string) => void;
 };
 
-export const TabList: FC<TTabListProps> = ({
-  tabs,
-  tabListClassName,
-  tabClassName,
-  size = "md",
-  selectedTab,
-  onTabChange,
-}) => (
-  <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",
-      tabListClassName
-    )}
-  >
-    {tabs.map((tab) => (
-      <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",
-            (selectedTab ? selectedTab === tab.key : selected)
-              ? "bg-custom-background-100 text-custom-text-100 shadow-sm"
-              : tab.disabled
-                ? "text-custom-text-400 cursor-not-allowed"
-                : "text-custom-text-400 hover:text-custom-text-300 hover:bg-custom-background-80/60",
-            {
-              "text-xs": size === "sm",
-              "text-sm": size === "md",
-              "text-base": size === "lg",
-            },
-            tabClassName
-          )
-        }
-        key={tab.key}
-        onClick={() => {
-          if (!tab.disabled) {
-            onTabChange?.(tab.key);
-            tab.onClick?.();
+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-13 p-0.5 bg-layer-1",
+        tabListClassName
+      )}
+    >
+      {tabs.map((tab) => (
+        <Tab
+          className={({ selected }) =>
+            cn(
+              "flex items-center justify-center p-1 min-w-fit w-full font-medium text-primary outline-none focus:outline-none cursor-pointer transition-all rounded-sm",
+              (selectedTab ? selectedTab === tab.key : selected)
+                ? "bg-layer-transparent-active text-primary shadow-sm"
+                : tab.disabled
+                  ? "text-placeholder cursor-not-allowed"
+                  : "text-placeholder hover:text-tertiary hover:bg-layer-transparent-hover",
+              {
+                "text-11": size === "sm",
+                "text-13": size === "md",
+                "text-14": size === "lg",
+              },
+              tabClassName
+            )
           }
-        }}
-        disabled={tab.disabled}
-      >
-        {tab.icon && <tab.icon className="size-4" />}
-        {tab.label}
-      </Tab>
-    ))}
-  </Tab.List>
-);
+          key={tab.key}
+          onClick={() => {
+            if (!tab.disabled) {
+              onTabChange?.(tab.key);
+              tab.onClick?.();
+            }
+          }}
+          disabled={tab.disabled}
+        >
+          {tab.icon && (
+            <tab.icon className={cn({ "size-3": size === "sm", "size-4": size === "md", "size-5": size === "lg" })} />
+          )}
+          {tab.label}
+        </Tab>
+      ))}
+    </Tab.List>
+  );
+}
diff --git a/packages/ui/src/tabs/tabs.tsx b/packages/ui/src/tabs/tabs.tsx
index 03cfd1de86..3aa7167b9b 100644
--- a/packages/ui/src/tabs/tabs.tsx
+++ b/packages/ui/src/tabs/tabs.tsx
@@ -28,7 +28,7 @@ type TTabsProps = {
   storeInLocalStorage?: boolean;
 };
 
-export const Tabs: FC<TTabsProps> = (props: TTabsProps) => {
+export function Tabs(props: TTabsProps) {
   const {
     tabs,
     storageKey,
@@ -87,4 +87,4 @@ export const Tabs: FC<TTabsProps> = (props: TTabsProps) => {
       </Tab.Group>
     </div>
   );
-};
+}
diff --git a/packages/ui/src/tag/helper.tsx b/packages/ui/src/tag/helper.tsx
index 064da5c231..cfd5978b06 100644
--- a/packages/ui/src/tag/helper.tsx
+++ b/packages/ui/src/tag/helper.tsx
@@ -14,7 +14,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/tag.tsx b/packages/ui/src/tag/tag.tsx
index 2e602507be..8ae14f07a6 100644
--- a/packages/ui/src/tag/tag.tsx
+++ b/packages/ui/src/tag/tag.tsx
@@ -10,7 +10,7 @@ export interface TagProps extends React.ComponentProps<"div"> {
   children: React.ReactNode;
 }
 
-const Tag = React.forwardRef<HTMLDivElement, TagProps>((props, ref) => {
+const Tag = React.forwardRef(function Tag(props: TagProps, ref: React.ForwardedRef<HTMLDivElement>) {
   const { variant = ETagVariant.OUTLINED, className = "", size = ETagSize.SM, children, ...rest } = props;
 
   const style = getTagStyle(variant, size);
diff --git a/packages/ui/src/tooltip/tooltip.tsx b/packages/ui/src/tooltip/tooltip.tsx
index 677a9ef661..5b3e96b0bc 100644
--- a/packages/ui/src/tooltip/tooltip.tsx
+++ b/packages/ui/src/tooltip/tooltip.tsx
@@ -33,7 +33,7 @@ interface ITooltipProps {
   renderByDefault?: boolean;
 }
 
-export const Tooltip: React.FC<ITooltipProps> = ({
+export function Tooltip({
   tooltipHeading,
   tooltipContent,
   position = "top",
@@ -43,8 +43,10 @@ export const Tooltip: React.FC<ITooltipProps> = ({
   openDelay = 200,
   closeDelay,
   isMobile = false,
-  renderByDefault = true, //FIXME: tooltip should always render on hover and not by default, this is a temporary fix
-}) => {
+
+  //FIXME: tooltip should always render on hover and not by default, this is a temporary fix
+  renderByDefault = true,
+}: ITooltipProps) {
   const toolTipRef = useRef<HTMLDivElement | null>(null);
 
   const [shouldRender, setShouldRender] = useState(renderByDefault);
@@ -81,24 +83,19 @@ export const Tooltip: React.FC<ITooltipProps> = ({
       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",
+            "relative block z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-surface-1 p-2 text-11 text-secondary shadow-md",
             {
               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>
       }
       position={position}
-      renderTarget={({
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        isOpen: isTooltipOpen,
-        ref: eleReference,
-        ...tooltipProps
-      }) =>
+      renderTarget={({ isOpen: isTooltipOpen, ref: eleReference, ...tooltipProps }) =>
         React.cloneElement(children, {
           ref: eleReference,
           ...tooltipProps,
@@ -107,4 +104,4 @@ export const Tooltip: React.FC<ITooltipProps> = ({
       }
     />
   );
-};
+}
diff --git a/packages/ui/src/typography/sub-heading.tsx b/packages/ui/src/typography/sub-heading.tsx
index 094d041efd..31aae6961a 100644
--- a/packages/ui/src/typography/sub-heading.tsx
+++ b/packages/ui/src/typography/sub-heading.tsx
@@ -6,10 +6,13 @@ type Props = {
   className?: string;
   noMargin?: boolean;
 };
-const SubHeading = ({ children, className, noMargin }: Props) => (
-  <h3 className={cn("text-xl font-medium text-custom-text-200 block leading-7", !noMargin && "mb-2", className)}>
-    {children}
-  </h3>
-);
+
+function SubHeading({ children, className, noMargin }: Props) {
+  return (
+    <h3 className={cn("text-18 font-medium text-secondary block leading-7", !noMargin && "mb-2", className)}>
+      {children}
+    </h3>
+  );
+}
 
 export { SubHeading };
diff --git a/packages/ui/src/utils/classname.tsx b/packages/ui/src/utils/classname.tsx
index 5a8d446f11..797f39f6bc 100644
--- a/packages/ui/src/utils/classname.tsx
+++ b/packages/ui/src/utils/classname.tsx
@@ -1,5 +1 @@
-import { clsx } from "clsx";
-import type { ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
+export { cn } from "@plane/utils";
diff --git a/packages/ui/styles/globals.css b/packages/ui/styles/globals.css
index 1cf5169222..434ca7f910 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 5970ea08ed..0000000000
--- a/packages/ui/tailwind.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-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/tsconfig.json b/packages/ui/tsconfig.json
index 2466c25e0d..f22b1c5414 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -1,8 +1,11 @@
 {
   "extends": "@plane/typescript-config/react-library.json",
   "include": ["src"],
-  "exclude": ["dist", "build", "node_modules"],
   "compilerOptions": {
-    "esModuleInterop": true
-  }
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "exactOptionalPropertyTypes": false,
+    "noImplicitReturns": false
+  },
+  "exclude": ["dist", "node_modules"]
 }
diff --git a/packages/ui/tsdown.config.ts b/packages/ui/tsdown.config.ts
index 7b2ea6fe2f..78c3dcba86 100644
--- a/packages/ui/tsdown.config.ts
+++ b/packages/ui/tsdown.config.ts
@@ -2,10 +2,7 @@ import { defineConfig } from "tsdown";
 
 export default defineConfig({
   entry: ["src/index.ts"],
-  outDir: "dist",
-  format: ["esm", "cjs"],
-  exports: true,
+  format: ["esm"],
   dts: true,
-  clean: true,
-  sourcemap: true,
+  platform: "neutral",
 });
diff --git a/packages/utils/.eslintignore b/packages/utils/.eslintignore
deleted file mode 100644
index 6019047c3e..0000000000
--- a/packages/utils/.eslintignore
+++ /dev/null
@@ -1,3 +0,0 @@
-build/*
-dist/*
-out/*
\ No newline at end of file
diff --git a/packages/utils/.eslintrc.cjs b/packages/utils/.eslintrc.cjs
deleted file mode 100644
index ba0e590e8e..0000000000
--- a/packages/utils/.eslintrc.cjs
+++ /dev/null
@@ -1,4 +0,0 @@
-module.exports = {
-  root: true,
-  extends: ["@plane/eslint-config/library.js"],
-};
diff --git a/packages/utils/.prettierignore b/packages/utils/.prettierignore
index acc3e36325..b0b8bc622a 100644
--- a/packages/utils/.prettierignore
+++ b/packages/utils/.prettierignore
@@ -1,6 +1,10 @@
-.turbo
-.next
-.vercel
-out/
-dist/
+.next/
+.react-router/
+.turbo/
+.vite/
 build/
+dist/
+node_modules/
+out/
+pnpm-lock.yaml
+storybook-static/
diff --git a/packages/utils/.prettierrc b/packages/utils/.prettierrc
deleted file mode 100644
index 87d988f1b2..0000000000
--- a/packages/utils/.prettierrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "printWidth": 120,
-  "tabWidth": 2,
-  "trailingComma": "es5"
-}
diff --git a/packages/utils/package.json b/packages/utils/package.json
index 65e3165b8d..7b1c656e97 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -1,49 +1,61 @@
 {
   "name": "@plane/utils",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Helper functions shared across multiple apps internally",
   "license": "AGPL-3.0",
   "private": true,
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
   "scripts": {
     "build": "tsdown",
     "dev": "tsdown --watch",
-    "check:lint": "eslint . --max-warnings 20",
+    "check:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --max-warnings=1062",
     "check:types": "tsc --noEmit",
-    "check:format": "prettier --check \"**/*.{ts,tsx,md,json,css,scss}\"",
-    "fix:lint": "eslint . --fix",
-    "fix:format": "prettier --write \"**/*.{ts,tsx,md,json,css,scss}\"",
+    "check:format": "prettier . --cache --check",
+    "fix:lint": "eslint . --cache --cache-location node_modules/.cache/eslint/ --fix --max-warnings=1062",
+    "fix:format": "prettier . --cache --write",
     "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",
-    "dompurify": "3.2.7",
+    "hast": "^1.0.0",
+    "hast-util-to-mdast": "^10.1.2",
     "lodash-es": "catalog:",
     "lucide-react": "catalog:",
+    "mdast": "^3.0.0",
     "react": "catalog:",
-    "tailwind-merge": "^2.5.5",
+    "rehype-parse": "^9.0.1",
+    "rehype-remark": "^10.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-stringify": "^11.0.0",
+    "sanitize-html": "2.17.0",
+    "tailwind-merge": "3.4.0",
+    "unified": "^11.0.5",
     "uuid": "catalog:"
   },
   "devDependencies": {
-    "@plane/eslint-config": "workspace:*",
     "@plane/typescript-config": "workspace:*",
+    "@types/chroma-js": "^3.1.2",
+    "@types/hast": "^3.0.4",
     "@types/lodash-es": "catalog:",
+    "@types/mdast": "^4.0.4",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
+    "@types/sanitize-html": "2.16.0",
     "tsdown": "catalog:",
     "typescript": "catalog:"
   },
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
-  "types": "./dist/index.d.cts"
+  "types": "./dist/index.d.ts"
 }
diff --git a/packages/utils/src/auth.ts b/packages/utils/src/auth.ts
index 8526079e15..28da4eb8f7 100644
--- a/packages/utils/src/auth.ts
+++ b/packages/utils/src/auth.ts
@@ -1,5 +1,3 @@
-"use client";
-
 import type { ReactNode } from "react";
 // plane imports
 import type { TAuthErrorInfo } from "@plane/constants";
@@ -80,7 +78,7 @@ export const getPasswordCriteria = (password: string): PasswordCriteria[] => [
 
 // Error code messages
 const errorCodeMessages: {
-  [key in EAuthErrorCodes]: { title: string; message: (email?: string | undefined) => ReactNode };
+  [key in EAuthErrorCodes]: { title: string; message: (email?: string) => ReactNode };
 } = {
   // global
   [EAuthErrorCodes.INSTANCE_NOT_CONFIGURED]: {
@@ -295,10 +293,7 @@ const errorCodeMessages: {
 };
 
 // Error handler
-export const authErrorHandler = (
-  errorCode: EAuthErrorCodes,
-  email?: string | undefined
-): TAuthErrorInfo | undefined => {
+export const authErrorHandler = (errorCode: EAuthErrorCodes, email?: string): TAuthErrorInfo | undefined => {
   const bannerAlertErrorCodes = [
     EAuthErrorCodes.INSTANCE_NOT_CONFIGURED,
     EAuthErrorCodes.INVALID_EMAIL,
diff --git a/packages/utils/src/common.ts b/packages/utils/src/common.ts
index 692318a937..bafd230a66 100644
--- a/packages/utils/src/common.ts
+++ b/packages/utils/src/common.ts
@@ -1,11 +1,65 @@
 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 eb33ca4635..7a2139b2a8 100644
--- a/packages/utils/src/cycle.ts
+++ b/packages/utils/src/cycle.ts
@@ -107,19 +107,14 @@ const formatV1Data = (isTypeIssue: boolean, cycle: ICycle, isBurnDown: boolean,
 
     return {
       date: p,
-      scope: p! < today ? scope(cycle, isTypeIssue) : null,
+      scope: p < today ? scope(cycle, isTypeIssue) : null,
       completed,
       backlog: isTypeIssue ? cycle.backlog_issues : cycle.backlog_estimate_points,
       started: p === today ? cycle[isTypeIssue ? "started_issues" : "started_estimate_points"] : undefined,
       unstarted: p === today ? cycle[isTypeIssue ? "unstarted_issues" : "unstarted_estimate_points"] : undefined,
       cancelled: p === today ? cycle[isTypeIssue ? "cancelled_issues" : "cancelled_estimate_points"] : undefined,
       pending: Math.abs(pending || 0),
-      ideal:
-        p < today
-          ? ideal(p, total || 0, cycle)
-          : p <= cycle.end_date!
-            ? ideal(today as string, total || 0, cycle)
-            : null,
+      ideal: p < today ? ideal(p, total || 0, cycle) : p <= cycle.end_date! ? ideal(today, total || 0, cycle) : null,
       actual: p <= today ? (isBurnDown ? Math.abs(pending) : completed) : undefined,
     };
   });
@@ -139,7 +134,7 @@ const formatV2Data = (isTypeIssue: boolean, cycle: ICycle, isBurnDown: boolean,
   if (!cycle.progress) return [];
   let today: Date | string = startOfToday();
 
-  const extendedArray = endDate > today ? generateDateArray(today as Date, endDate) : [];
+  const extendedArray = endDate > today ? generateDateArray(today, endDate) : [];
   if (isEmpty(cycle.progress)) return extendedArray;
   today = format(startOfToday(), "yyyy-MM-dd");
   const todaysData = cycle?.progress[cycle?.progress.length - 1];
diff --git a/packages/utils/src/distribution-update.ts b/packages/utils/src/distribution-update.ts
index 76bc8ce257..2278846698 100644
--- a/packages/utils/src/distribution-update.ts
+++ b/packages/utils/src/distribution-update.ts
@@ -1,5 +1,3 @@
-"use client";
-
 import { format } from "date-fns";
 import { get, set } from "lodash-es";
 // plane imports
diff --git a/packages/utils/src/editor.ts b/packages/utils/src/editor/common.ts
similarity index 95%
rename from packages/utils/src/editor.ts
rename to packages/utils/src/editor/common.ts
index 4f770b9d89..fdbaae6de0 100644
--- a/packages/utils/src/editor.ts
+++ b/packages/utils/src/editor/common.ts
@@ -1,5 +1,5 @@
 // local imports
-import { getFileURL } from "./file";
+import { getFileURL } from "../file";
 
 type TEditorSrcArgs = {
   assetId: string;
@@ -37,7 +37,7 @@ export const getEditorAssetDownloadSrc = (args: TEditorSrcArgs): string | undefi
   return url;
 };
 
-export const getTextContent = (jsx: React.ReactNode | React.ReactNode | null | undefined): string => {
+export const getTextContent = (jsx: React.ReactNode | null | undefined): string => {
   if (!jsx) return "";
 
   const div = document.createElement("div");
diff --git a/packages/utils/src/editor/index.ts b/packages/utils/src/editor/index.ts
new file mode 100644
index 0000000000..3d52959b1f
--- /dev/null
+++ b/packages/utils/src/editor/index.ts
@@ -0,0 +1,2 @@
+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
new file mode 100644
index 0000000000..5639dca9e0
--- /dev/null
+++ b/packages/utils/src/editor/markdown-parser/common.ts
@@ -0,0 +1,6 @@
+import type { Text as MDASTText } from "mdast";
+
+export const createTextNode = (value: string): MDASTText => ({
+  type: "text",
+  value,
+});
diff --git a/packages/utils/src/editor/markdown-parser/custom-components-handler.ts b/packages/utils/src/editor/markdown-parser/custom-components-handler.ts
new file mode 100644
index 0000000000..0e769366f6
--- /dev/null
+++ b/packages/utils/src/editor/markdown-parser/custom-components-handler.ts
@@ -0,0 +1,41 @@
+import type { Handle } from "hast-util-to-mdast";
+// local imports
+import { createTextNode } from "./common";
+import type { TCustomComponentsMetaData } from "./types";
+
+type TArgs = {
+  metaData: TCustomComponentsMetaData;
+};
+
+export const parseCustomComponents = (args: TArgs): Record<string, Handle> => {
+  const { metaData } = args;
+
+  const getFileAssetDetails = (id: string) => metaData.file_assets.find((asset) => asset.id === id);
+
+  return {
+    "image-component": (_state, node) => {
+      const properties = node.properties || {};
+      const src = String(properties.src);
+      const fileAssetDetails = getFileAssetDetails(src);
+      if (!src || !fileAssetDetails) return createTextNode("");
+      return createTextNode(`![${fileAssetDetails.name}](${fileAssetDetails.url})`);
+    },
+    img: (_state, node) => {
+      const properties = node.properties || {};
+      const src = String(properties.src);
+      const alt = String(properties.alt);
+      if (!src || !alt) return createTextNode("");
+      return createTextNode(`![${alt || "Image"}](${src})`);
+    },
+    "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 || ""}) `);
+    },
+    ...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
new file mode 100644
index 0000000000..a3839f79bd
--- /dev/null
+++ b/packages/utils/src/editor/markdown-parser/index.ts
@@ -0,0 +1,2 @@
+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
new file mode 100644
index 0000000000..7e3d5a6ded
--- /dev/null
+++ b/packages/utils/src/editor/markdown-parser/marks-handler.ts
@@ -0,0 +1,42 @@
+import type { Handle } from "hast-util-to-mdast";
+import type { PhrasingContent, Text as MDASTText } from "mdast";
+// local imports
+import { createTextNode } from "./common";
+
+const processMarkElement = (state: Parameters<Handle>[0], node: Parameters<Handle>[1], wrapper: string): MDASTText => {
+  if (node.children && node.children.length > 0) {
+    // Process all children and collect their text content
+    const processedChildren: PhrasingContent[] = [];
+
+    for (const child of node.children) {
+      if (child.type === "text") {
+        // Direct text child - keep as is
+        processedChildren.push(child as MDASTText);
+      } else if (child.type === "element") {
+        // Element child - recursively process it
+        const processed = state.one(child, node);
+        if (processed) {
+          if (Array.isArray(processed)) {
+            processedChildren.push(...(processed as PhrasingContent[]));
+          } else {
+            processedChildren.push(processed as PhrasingContent);
+          }
+        }
+      }
+    }
+
+    // Concatenate all text content and wrap with the specified wrapper
+    const combinedText = processedChildren.map((child) => (child.type === "text" ? child.value : "")).join("");
+
+    return createTextNode(`${wrapper}${combinedText}${wrapper}`);
+  }
+
+  // Empty element - return empty text
+  return createTextNode("");
+};
+
+export const parseMarks: Record<string, Handle> = {
+  u: (state, node) => processMarkElement(state, node, ""),
+  i: (state, node) => processMarkElement(state, node, "_"),
+  em: (state, node) => processMarkElement(state, node, "_"),
+};
diff --git a/packages/utils/src/editor/markdown-parser/root.ts b/packages/utils/src/editor/markdown-parser/root.ts
new file mode 100644
index 0000000000..972b47a08a
--- /dev/null
+++ b/packages/utils/src/editor/markdown-parser/root.ts
@@ -0,0 +1,140 @@
+// - Parses TipTap/ProseMirror HTML fragments
+// - Removes <u> tags (Markdown has no underline)
+// - Adds a space after checkbox inputs for correct GFM task list rendering
+// - Converts to Markdown using rehype→remark, GFM, and remark-stringify
+
+import type { Element as HASTElement, ElementContent, Parent as HASTParent } from "hast";
+import rehypeParse from "rehype-parse";
+import rehypeRemark from "rehype-remark";
+import remarkGfm from "remark-gfm";
+import remarkStringify from "remark-stringify";
+import { unified } from "unified";
+// local imports
+import { parseCustomComponents } from "./custom-components-handler";
+import { parseMarks } from "./marks-handler";
+import type { TCustomComponentsMetaData } from "./types";
+
+// Rehype plugin to handle TipTap task lists and convert them to GFM-compatible format
+// TipTap structure: <li data-type="taskItem"><label><input><span></span></label><div><p>text</p></div></li>
+// We need: <li><input> text (with space after checkbox for proper GFM rendering)
+function addSpacesToCheckboxes() {
+  return (tree: HASTParent) => {
+    const helper = (node: HASTParent): void => {
+      if (!Array.isArray(node.children) || node.children.length === 0) return;
+
+      for (let i = 0; i < node.children.length; i++) {
+        const child = node.children[i];
+
+        // Check if this is a task list item
+        if (
+          child &&
+          child.type === "element" &&
+          child.tagName === "li" &&
+          child.properties &&
+          child.properties["data-type"] === "taskItem"
+        ) {
+          const liElement = child;
+
+          // Find the label and div elements
+          const label = liElement.children?.find((c) => c.type === "element" && c.tagName === "label") as
+            | HASTElement
+            | undefined;
+
+          const contentDiv = liElement.children?.find((c) => c.type === "element" && c.tagName === "div") as
+            | HASTElement
+            | undefined;
+
+          if (label && contentDiv) {
+            // Find the checkbox input
+            const checkbox = label.children?.find(
+              (c) => c.type === "element" && c.tagName === "input" && c.properties?.type === "checkbox"
+            ) as HASTElement | undefined;
+
+            if (checkbox) {
+              // Extract text content from the div, unwrapping any paragraph tags
+              const textContent: ElementContent[] = [];
+              if (contentDiv.children) {
+                for (const child of contentDiv.children) {
+                  if (child.type === "element" && child.tagName === "p") {
+                    // Unwrap paragraph - add its children directly
+                    const pElement = child;
+                    if (pElement.children) {
+                      textContent.push(...pElement.children);
+                    }
+                  } else {
+                    // Keep other elements as-is
+                    textContent.push(child);
+                  }
+                }
+              }
+
+              // Flatten the structure: move checkbox and content to be direct children of li
+              liElement.children = [
+                checkbox,
+                { type: "text", value: " " }, // Add space after checkbox
+                ...textContent,
+              ];
+            }
+          }
+        } else if (child && child.type === "element") {
+          helper(child);
+        }
+      }
+    };
+
+    helper(tree);
+  };
+}
+
+type TArgs = {
+  description_html: string;
+  metaData: TCustomComponentsMetaData;
+  name?: string;
+};
+
+/**
+ * Sanitizes a string by escaping HTML entities to prevent XSS attacks
+ * @param str - The string to sanitize
+ * @returns The sanitized string with escaped HTML entities
+ */
+function sanitizeHTML(str: string): string {
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#x27;");
+}
+
+export function convertHTMLToMarkdown(args: TArgs): string {
+  const { description_html, metaData, name } = args;
+
+  let updatedDescriptionHtml = description_html;
+  if (name) {
+    const sanitizedName = sanitizeHTML(name);
+    updatedDescriptionHtml = `<h1>${sanitizedName}</h1>\n\n${description_html}`;
+  }
+
+  const result = unified()
+    .use(rehypeParse, { fragment: true })
+    .use(addSpacesToCheckboxes)
+    .use(rehypeRemark, {
+      handlers: {
+        ...parseCustomComponents({
+          metaData,
+        }),
+        ...parseMarks,
+      },
+    })
+    .use(remarkGfm)
+    .use(remarkStringify, {
+      handlers: {
+        text: (node: { value: string }): string => node.value,
+      },
+    })
+    .processSync(updatedDescriptionHtml);
+
+  const markdown = String(result.value ?? result);
+
+  return markdown;
+}
diff --git a/packages/utils/src/editor/markdown-parser/types.ts b/packages/utils/src/editor/markdown-parser/types.ts
new file mode 100644
index 0000000000..44a1a635d0
--- /dev/null
+++ b/packages/utils/src/editor/markdown-parser/types.ts
@@ -0,0 +1,16 @@
+export type TCoreCustomComponentsMetaData = {
+  file_assets: {
+    id: string;
+    name: string;
+    url: string;
+  }[];
+  user_mentions: {
+    id: string;
+    display_name: string;
+    url: string;
+  }[];
+};
+
+export type TExtendedCustomComponentsMetaData = unknown;
+
+export type TCustomComponentsMetaData = TCoreCustomComponentsMetaData & TExtendedCustomComponentsMetaData;
diff --git a/packages/utils/src/emoji.ts b/packages/utils/src/emoji.ts
index 2438cfeb72..567d3575ec 100644
--- a/packages/utils/src/emoji.ts
+++ b/packages/utils/src/emoji.ts
@@ -1,5 +1,3 @@
-"use client";
-
 // plane imports
 import { RANDOM_EMOJI_CODES } from "@plane/constants";
 
diff --git a/packages/utils/src/estimates.ts b/packages/utils/src/estimates.ts
index 0a9b377280..59c3f1136d 100644
--- a/packages/utils/src/estimates.ts
+++ b/packages/utils/src/estimates.ts
@@ -4,7 +4,7 @@ import { EEstimateSystem } from "@plane/constants";
 export const isEstimatePointValuesRepeated = (
   estimatePoints: string[],
   estimateType: EEstimateSystem,
-  newEstimatePoint?: string | undefined
+  newEstimatePoint?: string
 ) => {
   const currentEstimatePoints = estimatePoints.map((estimatePoint) => estimatePoint.trim());
   let isRepeated = false;
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index 7cc4c58e95..4b72ed3c94 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -28,6 +28,7 @@ export * from "./string";
 export * from "./subscription";
 export * from "./tab-indices";
 export * from "./theme";
+export { resolveGeneralTheme } from "./theme-legacy";
 export * from "./url";
 export * from "./work-item-filters";
 export * from "./work-item";
diff --git a/packages/utils/src/rich-filters/operations/traversal/core.ts b/packages/utils/src/rich-filters/operations/traversal/core.ts
index 4a33f362dc..7237c32610 100644
--- a/packages/utils/src/rich-filters/operations/traversal/core.ts
+++ b/packages/utils/src/rich-filters/operations/traversal/core.ts
@@ -166,11 +166,7 @@ export const findImmediateParent = <P extends TFilterProperty>(
 export const extractConditions = <P extends TFilterProperty>(
   expression: TFilterExpression<P>
 ): TFilterConditionNode<P, TFilterValue>[] =>
-  traverseExpressionTree(
-    expression,
-    (node) => (isConditionNode(node) ? node : null),
-    TreeTraversalMode.CONDITIONS
-  ) as TFilterConditionNode<P, TFilterValue>[];
+  traverseExpressionTree(expression, (node) => (isConditionNode(node) ? node : null), TreeTraversalMode.CONDITIONS);
 
 /**
  * Extracts all conditions from a filter expression, including their display operators.
diff --git a/packages/utils/src/string.ts b/packages/utils/src/string.ts
index cf5eb3df6c..b23d1b9bd8 100644
--- a/packages/utils/src/string.ts
+++ b/packages/utils/src/string.ts
@@ -1,4 +1,4 @@
-import DOMPurify from "dompurify";
+import sanitizeHtml from "sanitize-html";
 import type { Content, JSONContent } from "@plane/types";
 
 /**
@@ -120,7 +120,7 @@ const text = stripHTML(html);
 console.log(text); // Some text
  */
 export const sanitizeHTML = (htmlString: string) => {
-  const sanitizedText = DOMPurify.sanitize(htmlString, { ALLOWED_TAGS: [] }); // sanitize the string to remove all HTML tags
+  const sanitizedText = sanitizeHtml(htmlString, { allowedTags: [] }); // sanitize the string to remove all HTML tags
   return sanitizedText.trim(); // trim the string to remove leading and trailing whitespaces
 };
 
@@ -155,8 +155,8 @@ export const checkEmailValidity = (email: string): boolean => {
 };
 
 export const isEmptyHtmlString = (htmlString: string, allowedHTMLTags: string[] = []) => {
-  // Remove HTML tags using DOMPurify
-  const cleanText = DOMPurify.sanitize(htmlString, { ALLOWED_TAGS: allowedHTMLTags });
+  // Remove HTML tags using sanitize-html
+  const cleanText = sanitizeHtml(htmlString, { allowedTags: allowedHTMLTags });
   // Trim the string and check if it's empty
   return cleanText.trim() === "";
 };
diff --git a/packages/utils/src/theme-legacy.ts b/packages/utils/src/theme-legacy.ts
new file mode 100644
index 0000000000..1a8574313a
--- /dev/null
+++ b/packages/utils/src/theme-legacy.ts
@@ -0,0 +1,21 @@
+/**
+ * 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 54e6d42540..0000000000
--- 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 0000000000..5acd34cdf7
--- /dev/null
+++ b/packages/utils/src/theme/color-conversion.ts
@@ -0,0 +1,170 @@
+/**
+ * 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 0000000000..9668eed83c
--- /dev/null
+++ b/packages/utils/src/theme/color-validation.ts
@@ -0,0 +1,91 @@
+/**
+ * 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 0000000000..a30b7683cb
--- /dev/null
+++ b/packages/utils/src/theme/constants.ts
@@ -0,0 +1,144 @@
+/**
+ * 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",
+};
+
+/**
+ * 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 0000000000..a8d54a098a
--- /dev/null
+++ b/packages/utils/src/theme/index.ts
@@ -0,0 +1,61 @@
+/**
+ * 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 0000000000..f367786fd8
--- /dev/null
+++ b/packages/utils/src/theme/palette-generator.ts
@@ -0,0 +1,214 @@
+/**
+ * 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 0000000000..5e8ce421fb
--- /dev/null
+++ b/packages/utils/src/theme/theme-application.ts
@@ -0,0 +1,187 @@
+/**
+ * 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(`--color-neutral-${key}`, value);
+  });
+
+  Object.entries(brandMapping).forEach(([key, value]) => {
+    themeElement.style.setProperty(`--color-brand-${key}`, value);
+  });
+
+  Object.entries(ALPHA_MAPPING).forEach(([key, value]) => {
+    themeElement.style.setProperty(`--color-alpha-white-${key}`, oklchToCSS(neutralOKLCH, value * 100));
+    themeElement.style.setProperty(`--color-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(`--text-color-on-color`, oklchToCSS(textColor));
+  themeElement.style.setProperty(`--text-color-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(`--color-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(`--color-brand-${key}`);
+  });
+
+  Object.keys(ALPHA_MAPPING).forEach((key) => {
+    themeElement.style.removeProperty(`--color-alpha-white-${key}`);
+    themeElement.style.removeProperty(`--color-alpha-black-${key}`);
+  });
+
+  themeElement.style.removeProperty(`--text-color-on-color`);
+  themeElement.style.removeProperty(`--text-color-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 0000000000..440713f75e
--- /dev/null
+++ b/packages/utils/src/theme/theme-inversion.ts
@@ -0,0 +1,93 @@
+/**
+ * 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/work-item/modal.ts b/packages/utils/src/work-item/modal.ts
index e5c93a80c2..dded63ace6 100644
--- a/packages/utils/src/work-item/modal.ts
+++ b/packages/utils/src/work-item/modal.ts
@@ -38,7 +38,7 @@ export function getChangedIssuefields(formData: Partial<TIssue>, dirtyFields: {
 
   const dirtyFieldKeys = Object.keys(dirtyFields) as (keyof TIssue)[];
   for (const dirtyField of dirtyFieldKeys) {
-    if (!!dirtyFields[dirtyField]) {
+    if (dirtyFields[dirtyField]) {
       set(changedFields, [dirtyField], formData[dirtyField]);
     }
   }
diff --git a/packages/utils/tsconfig.json b/packages/utils/tsconfig.json
index 2256a0d8ff..d13fa1b2fc 100644
--- a/packages/utils/tsconfig.json
+++ b/packages/utils/tsconfig.json
@@ -1,5 +1,11 @@
 {
   "extends": "@plane/typescript-config/react-library.json",
-  "include": ["./src"],
-  "exclude": ["dist", "build", "node_modules"]
+  "include": ["src"],
+  "compilerOptions": {
+    "noImplicitReturns": false,
+    "noUnusedParameters": false,
+    "noUnusedLocals": false,
+    "exactOptionalPropertyTypes": false
+  },
+  "exclude": ["dist", "node_modules"]
 }
diff --git a/packages/utils/tsdown.config.ts b/packages/utils/tsdown.config.ts
index d228174b27..78c3dcba86 100644
--- a/packages/utils/tsdown.config.ts
+++ b/packages/utils/tsdown.config.ts
@@ -2,11 +2,7 @@ import { defineConfig } from "tsdown";
 
 export default defineConfig({
   entry: ["src/index.ts"],
-  outDir: "dist",
-  format: ["esm", "cjs"],
-  exports: true,
+  format: ["esm"],
   dts: true,
-  clean: true,
-  sourcemap: true,
-  target: "esnext",
+  platform: "neutral",
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a2513289d2..b330a1e0be 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,15 +18,27 @@ 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
+    '@react-router/node':
+      specifier: 7.9.5
+      version: 7.9.5
+    '@react-router/serve':
+      specifier: 7.9.5
+      version: 7.9.5
     '@sentry/node':
-      specifier: 10.24.0
-      version: 10.24.0
+      specifier: 10.27.0
+      version: 10.27.0
     '@sentry/profiling-node':
-      specifier: 10.24.0
-      version: 10.24.0
+      specifier: 10.27.0
+      version: 10.27.0
     '@sentry/react-router':
-      specifier: 10.24.0
-      version: 10.24.0
+      specifier: 10.27.0
+      version: 10.27.0
     '@tiptap/core':
       specifier: ^2.22.3
       version: 2.26.3
@@ -69,17 +81,26 @@ catalogs:
     react-dom:
       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
     swr:
       specifier: 2.2.4
       version: 2.2.4
     tsdown:
-      specifier: 0.15.5
-      version: 0.15.5
+      specifier: 0.16.0
+      version: 0.16.0
     uuid:
       specifier: 13.0.0
       version: 13.0.0
 
 overrides:
+  express: 4.22.0
+  mdast-util-to-hast: 13.2.1
+  valibot: 1.2.0
   glob: 11.1.0
   js-yaml: 4.1.1
   brace-expansion: 2.0.2
@@ -99,21 +120,87 @@ 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.6.1))(typescript@5.8.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.1))
+      eslint:
+        specifier: 9.39.1
+        version: 9.39.1(jiti@2.6.1)
+      eslint-config-prettier:
+        specifier: 10.1.8
+        version: 10.1.8(eslint@9.39.1(jiti@2.6.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.6.1))
+      eslint-plugin-import:
+        specifier: 2.32.0
+        version: 2.32.0(@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.4)(eslint@9.39.1(jiti@2.6.1))
+      eslint-plugin-jsx-a11y:
+        specifier: 6.10.2
+        version: 6.10.2(eslint@9.39.1(jiti@2.6.1))
+      eslint-plugin-n:
+        specifier: 17.23.1
+        version: 17.23.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.8.3)
+      eslint-plugin-promise:
+        specifier: 7.2.1
+        version: 7.2.1(eslint@9.39.1(jiti@2.6.1))
+      eslint-plugin-react:
+        specifier: 7.37.5
+        version: 7.37.5(eslint@9.39.1(jiti@2.6.1))
+      eslint-plugin-react-hooks:
+        specifier: 7.0.1
+        version: 7.0.1(eslint@9.39.1(jiti@2.6.1))
+      eslint-plugin-react-refresh:
+        specifier: 0.4.24
+        version: 0.4.24(eslint@9.39.1(jiti@2.6.1))
+      eslint-plugin-storybook:
+        specifier: 10.1.4
+        version: 10.1.4(eslint@9.39.1(jiti@2.6.1))(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3)
+      eslint-plugin-turbo:
+        specifier: 2.6.3
+        version: 2.6.3(eslint@9.39.1(jiti@2.6.1))(turbo@2.6.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: latest
-        version: 3.6.2
-      prettier-plugin-tailwindcss:
-        specifier: ^0.6.14
-        version: 0.6.14(prettier@3.6.2)
+        specifier: 3.7.4
+        version: 3.7.4
       turbo:
-        specifier: 2.6.1
-        version: 2.6.1
+        specifier: 2.6.3
+        version: 2.6.3
+      typescript-eslint:
+        specifier: 8.48.1
+        version: 8.48.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.8.3)
 
   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)
@@ -139,11 +226,11 @@ importers:
         specifier: workspace:*
         version: link:../../packages/utils
       '@react-router/node':
-        specifier: ^7.9.3
-        version: 7.9.4(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
+        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.24.0(@react-router/node@7.9.4(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3))(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+        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)
       '@tanstack/react-virtual':
         specifier: ^3.13.12
         version: 3.13.12(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -169,8 +256,8 @@ importers:
         specifier: 'catalog:'
         version: 9.1.1(mobx@6.12.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next-themes:
-        specifier: ^0.2.1
-        version: 0.2.1(next@14.2.32(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 0.4.6
+        version: 0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react:
         specifier: 'catalog:'
         version: 18.3.1
@@ -181,11 +268,11 @@ importers:
         specifier: 7.51.5
         version: 7.51.5(react@18.3.1)
       react-router:
-        specifier: ^7.9.1
-        version: 7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 'catalog:'
+        version: 7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-router-dom:
-        specifier: ^7.9.1
-        version: 7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 'catalog:'
+        version: 7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       serve:
         specifier: 14.2.5
         version: 14.2.5
@@ -196,9 +283,9 @@ importers:
         specifier: 'catalog:'
         version: 13.0.0
     devDependencies:
-      '@plane/eslint-config':
-        specifier: workspace:*
-        version: link:../../packages/eslint-config
+      '@dotenvx/dotenvx':
+        specifier: 'catalog:'
+        version: 1.51.1
       '@plane/tailwind-config':
         specifier: workspace:*
         version: link:../../packages/tailwind-config
@@ -206,8 +293,8 @@ importers:
         specifier: workspace:*
         version: link:../../packages/typescript-config
       '@react-router/dev':
-        specifier: ^7.9.1
-        version: 7.9.4(@react-router/serve@7.9.5(react-router@7.9.3(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.3(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)
+        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.6.1)(lightningcss@1.30.2)(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.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))(yaml@2.8.1)
       '@types/lodash-es':
         specifier: 'catalog:'
         version: 4.17.12
@@ -220,24 +307,21 @@ importers:
       '@types/react-dom':
         specifier: 'catalog:'
         version: 18.3.1
-      dotenv:
-        specifier: ^16.4.5
-        version: 16.6.1
       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)
+        version: 7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)
       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.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
 
   apps/live:
     dependencies:
       '@dotenvx/dotenvx':
-        specifier: ^1.49.0
-        version: 1.49.0
+        specifier: 'catalog:'
+        version: 1.51.1
       '@hocuspocus/extension-database':
         specifier: 2.15.2
         version: 2.15.2(y-protocols@1.0.6(yjs@13.6.27))(yjs@13.6.27)
@@ -267,10 +351,10 @@ importers:
         version: link:../../packages/types
       '@sentry/node':
         specifier: 'catalog:'
-        version: 10.24.0
+        version: 10.27.0
       '@sentry/profiling-node':
         specifier: 'catalog:'
-        version: 10.24.0
+        version: 10.27.0
       '@tiptap/core':
         specifier: 'catalog:'
         version: 2.26.3(@tiptap/pm@3.6.6)
@@ -286,15 +370,12 @@ importers:
       cors:
         specifier: ^2.8.5
         version: 2.8.5
-      dotenv:
-        specifier: ^16.4.5
-        version: 16.6.1
       express:
-        specifier: ^4.21.2
-        version: 4.21.2
+        specifier: 4.22.0
+        version: 4.22.0
       express-ws:
         specifier: ^5.0.2
-        version: 5.0.2(express@4.21.2)
+        version: 5.0.2(express@4.22.0)
       helmet:
         specifier: ^7.1.0
         version: 7.2.0
@@ -320,9 +401,6 @@ importers:
         specifier: ^3.25.76
         version: 3.25.76
     devDependencies:
-      '@plane/eslint-config':
-        specifier: workspace:*
-        version: link:../../packages/eslint-config
       '@plane/typescript-config':
         specifier: workspace:*
         version: link:../../packages/typescript-config
@@ -346,7 +424,7 @@ importers:
         version: 8.18.1
       tsdown:
         specifier: 'catalog:'
-        version: 0.15.5(typescript@5.8.3)
+        version: 0.16.0(typescript@5.8.3)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -356,12 +434,15 @@ importers:
       '@bprogress/core':
         specifier: 'catalog:'
         version: 1.3.4
-      '@emotion/react':
-        specifier: ^11.11.1
-        version: 11.14.0(@types/react@18.3.11)(react@18.3.1)
-      '@emotion/styled':
-        specifier: ^11.11.0
-        version: 11.14.0(@emotion/react@11.14.0(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1)
+      '@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)
@@ -393,14 +474,14 @@ importers:
         specifier: ^2.11.8
         version: 2.11.8
       '@react-router/node':
-        specifier: ^7.9.3
-        version: 7.9.4(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
+        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)
       '@react-router/serve':
-        specifier: ^7.9.5
-        version: 7.9.5(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
+        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.24.0(@react-router/node@7.9.4(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3))(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+        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)
       axios:
         specifier: 'catalog:'
         version: 1.12.0
@@ -429,8 +510,8 @@ importers:
         specifier: 'catalog:'
         version: 6.0.8(mobx@6.12.0)
       next-themes:
-        specifier: ^0.2.1
-        version: 0.2.1(next@14.2.32(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 0.4.6
+        version: 0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react:
         specifier: 'catalog:'
         version: 18.3.1
@@ -447,11 +528,11 @@ 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)
       react-router:
-        specifier: ^7.9.1
-        version: 7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 'catalog:'
+        version: 7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-router-dom:
-        specifier: ^7.9.1
-        version: 7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 'catalog:'
+        version: 7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       swr:
         specifier: 'catalog:'
         version: 2.2.4(react@18.3.1)
@@ -459,9 +540,9 @@ importers:
         specifier: 'catalog:'
         version: 13.0.0
     devDependencies:
-      '@plane/eslint-config':
-        specifier: workspace:*
-        version: link:../../packages/eslint-config
+      '@dotenvx/dotenvx':
+        specifier: 'catalog:'
+        version: 1.51.1
       '@plane/tailwind-config':
         specifier: workspace:*
         version: link:../../packages/tailwind-config
@@ -469,8 +550,11 @@ importers:
         specifier: workspace:*
         version: link:../../packages/typescript-config
       '@react-router/dev':
-        specifier: ^7.9.1
-        version: 7.9.3(@react-router/serve@7.9.5(react-router@7.9.3(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.3(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)
+        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.6.1)(lightningcss@1.30.2)(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.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))(yaml@2.8.1)
+      '@tailwindcss/typography':
+        specifier: 0.5.19
+        version: 0.5.19
       '@types/lodash-es':
         specifier: 'catalog:'
         version: 4.17.12
@@ -483,18 +567,15 @@ importers:
       '@types/react-dom':
         specifier: 'catalog:'
         version: 18.3.1
-      dotenv:
-        specifier: ^16.4.5
-        version: 16.6.1
       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)
+        version: 7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)
       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.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
 
   apps/web:
     dependencies:
@@ -510,6 +591,15 @@ 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)
@@ -556,11 +646,11 @@ importers:
         specifier: ^3.4.5
         version: 3.4.5(react@18.3.1)
       '@react-router/node':
-        specifier: ^7.9.3
-        version: 7.9.4(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
+        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.24.0(@react-router/node@7.9.4(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3))(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+        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)
       '@tanstack/react-table':
         specifier: ^8.21.3
         version: 8.21.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -604,8 +694,8 @@ importers:
         specifier: 'catalog:'
         version: 6.0.8(mobx@6.12.0)
       next-themes:
-        specifier: ^0.2.1
-        version: 0.2.1(next@14.2.32(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        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
@@ -643,11 +733,11 @@ 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)
       react-router:
-        specifier: ^7.9.1
-        version: 7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 'catalog:'
+        version: 7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-router-dom:
-        specifier: ^7.9.1
-        version: 7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        specifier: 'catalog:'
+        version: 7.9.5(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)
@@ -660,9 +750,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)
@@ -670,9 +757,9 @@ importers:
         specifier: 'catalog:'
         version: 13.0.0
     devDependencies:
-      '@plane/eslint-config':
-        specifier: workspace:*
-        version: link:../../packages/eslint-config
+      '@dotenvx/dotenvx':
+        specifier: 'catalog:'
+        version: 1.51.1
       '@plane/tailwind-config':
         specifier: workspace:*
         version: link:../../packages/tailwind-config
@@ -680,8 +767,11 @@ importers:
         specifier: workspace:*
         version: link:../../packages/typescript-config
       '@react-router/dev':
-        specifier: ^7.9.1
-        version: 7.9.3(@react-router/serve@7.9.5(react-router@7.9.3(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.3(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)
+        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.6.1)(lightningcss@1.30.2)(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.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))(yaml@2.8.1)
+      '@tailwindcss/typography':
+        specifier: 0.5.19
+        version: 0.5.19
       '@types/lodash-es':
         specifier: 'catalog:'
         version: 4.17.12
@@ -697,21 +787,33 @@ importers:
       '@types/react-dom':
         specifier: 'catalog:'
         version: 18.3.1
-      dotenv:
-        specifier: ^16.4.5
-        version: 16.6.1
-      prettier:
-        specifier: ^3.2.5
-        version: 3.6.2
       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)
+        version: 7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)
       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.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
+
+  packages/codemods:
+    devDependencies:
+      '@hypermod/utils':
+        specifier: ^0.7.1
+        version: 0.7.1
+      '@types/jscodeshift':
+        specifier: ^17.3.0
+        version: 17.3.0
+      ast-types:
+        specifier: 0.14.2
+        version: 0.14.2
+      jscodeshift:
+        specifier: ^17.3.0
+        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.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)
 
   packages/constants:
     dependencies:
@@ -719,9 +821,6 @@ importers:
         specifier: workspace:*
         version: link:../types
     devDependencies:
-      '@plane/eslint-config':
-        specifier: workspace:*
-        version: link:../eslint-config
       '@plane/typescript-config':
         specifier: workspace:*
         version: link:../typescript-config
@@ -733,16 +832,13 @@ importers:
         version: 18.3.11
       tsdown:
         specifier: 'catalog:'
-        version: 0.15.5(typescript@5.8.3)
+        version: 0.16.0(typescript@5.8.3)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
 
   packages/decorators:
     devDependencies:
-      '@plane/eslint-config':
-        specifier: workspace:*
-        version: link:../eslint-config
       '@plane/typescript-config':
         specifier: workspace:*
         version: link:../typescript-config
@@ -760,7 +856,7 @@ importers:
         version: 0.2.2
       tsdown:
         specifier: 'catalog:'
-        version: 0.15.5(typescript@5.8.3)
+        version: 0.16.0(typescript@5.8.3)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -799,61 +895,70 @@ importers:
         version: link:../utils
       '@tiptap/core':
         specifier: 'catalog:'
-        version: 2.26.3(@tiptap/pm@2.26.3)
+        version: 2.26.3(@tiptap/pm@2.26.1)
       '@tiptap/extension-blockquote':
         specifier: ^2.22.3
-        version: 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
       '@tiptap/extension-character-count':
         specifier: ^2.22.3
-        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
       '@tiptap/extension-collaboration':
         specifier: ^2.22.3
-        version: 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)(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))
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)(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))
+      '@tiptap/extension-document':
+        specifier: ^2.22.3
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
       '@tiptap/extension-emoji':
         specifier: ^2.22.3
-        version: 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)(@tiptap/suggestion@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3))(emojibase@16.0.0)
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)(@tiptap/suggestion@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1))(emojibase@16.0.0)
+      '@tiptap/extension-heading':
+        specifier: ^2.22.3
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
       '@tiptap/extension-image':
         specifier: ^2.22.3
-        version: 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
       '@tiptap/extension-list-item':
         specifier: ^2.22.3
-        version: 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
       '@tiptap/extension-mention':
         specifier: ^2.22.3
-        version: 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)(@tiptap/suggestion@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3))
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)(@tiptap/suggestion@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1))
       '@tiptap/extension-placeholder':
         specifier: ^2.22.3
-        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
       '@tiptap/extension-task-item':
         specifier: ^2.22.3
-        version: 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
       '@tiptap/extension-task-list':
         specifier: ^2.22.3
-        version: 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-text':
+        specifier: ^2.22.3
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
       '@tiptap/extension-text-align':
         specifier: ^2.22.3
-        version: 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
       '@tiptap/extension-text-style':
         specifier: ^2.22.3
-        version: 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
       '@tiptap/extension-underline':
         specifier: ^2.22.3
-        version: 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
       '@tiptap/html':
         specifier: 'catalog:'
-        version: 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)
+        version: 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
       '@tiptap/pm':
         specifier: ^2.22.3
-        version: 2.26.3
+        version: 2.26.1
       '@tiptap/react':
         specifier: ^2.22.3
-        version: 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@tiptap/starter-kit':
         specifier: ^2.22.3
         version: 2.26.1
       '@tiptap/suggestion':
         specifier: ^2.22.3
-        version: 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)
+        version: 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
       buffer:
         specifier: ^6.0.3
         version: 6.0.3
@@ -872,6 +977,9 @@ importers:
       linkifyjs:
         specifier: ^4.3.2
         version: 4.3.2
+      lodash-es:
+        specifier: 'catalog:'
+        version: 4.17.21
       lowlight:
         specifier: ^3.0.0
         version: 3.3.0
@@ -892,7 +1000,7 @@ importers:
         version: 6.3.7
       tiptap-markdown:
         specifier: ^0.8.10
-        version: 0.8.10(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))
+        version: 0.8.10(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
       uuid:
         specifier: 'catalog:'
         version: 13.0.0
@@ -909,15 +1017,15 @@ importers:
         specifier: ^13.6.20
         version: 13.6.27
     devDependencies:
-      '@plane/eslint-config':
-        specifier: workspace:*
-        version: link:../eslint-config
       '@plane/tailwind-config':
         specifier: workspace:*
         version: link:../tailwind-config
       '@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
@@ -932,40 +1040,7 @@ importers:
         version: 8.5.6
       tsdown:
         specifier: 'catalog:'
-        version: 0.15.5(typescript@5.8.3)
-      typescript:
-        specifier: 5.8.3
-        version: 5.8.3
-
-  packages/eslint-config:
-    devDependencies:
-      '@typescript-eslint/eslint-plugin':
-        specifier: ^8.45.0
-        version: 8.45.0(@typescript-eslint/parser@8.45.0(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1)(typescript@5.8.3)
-      '@typescript-eslint/parser':
-        specifier: ^8.45.0
-        version: 8.45.0(eslint@8.57.1)(typescript@5.8.3)
-      eslint:
-        specifier: 8.57.1
-        version: 8.57.1
-      eslint-config-next:
-        specifier: ^14.1.0
-        version: 14.2.32(eslint@8.57.1)(typescript@5.8.3)
-      eslint-config-prettier:
-        specifier: ^10.1.8
-        version: 10.1.8(eslint@8.57.1)
-      eslint-config-turbo:
-        specifier: ^2.5.8
-        version: 2.5.8(eslint@8.57.1)(turbo@2.6.1)
-      eslint-plugin-import:
-        specifier: ^2.32.0
-        version: 2.32.0(@typescript-eslint/parser@8.45.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
-      eslint-plugin-react:
-        specifier: ^7.37.5
-        version: 7.37.5(eslint@8.57.1)
-      eslint-plugin-react-hooks:
-        specifier: ^6.1.1
-        version: 6.1.1(eslint@8.57.1)
+        version: 0.16.0(typescript@5.8.3)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -976,9 +1051,6 @@ importers:
         specifier: 'catalog:'
         version: 18.3.1
     devDependencies:
-      '@plane/eslint-config':
-        specifier: workspace:*
-        version: link:../eslint-config
       '@plane/typescript-config':
         specifier: workspace:*
         version: link:../typescript-config
@@ -990,7 +1062,7 @@ importers:
         version: 18.3.11
       tsdown:
         specifier: 'catalog:'
-        version: 0.15.5(typescript@5.8.3)
+        version: 0.16.0(typescript@5.8.3)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -1016,9 +1088,6 @@ importers:
         specifier: 'catalog:'
         version: 18.3.1
     devDependencies:
-      '@plane/eslint-config':
-        specifier: workspace:*
-        version: link:../eslint-config
       '@plane/typescript-config':
         specifier: workspace:*
         version: link:../typescript-config
@@ -1033,7 +1102,7 @@ importers:
         version: 18.3.11
       tsdown:
         specifier: 'catalog:'
-        version: 0.15.5(typescript@5.8.3)
+        version: 0.16.0(typescript@5.8.3)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -1047,9 +1116,6 @@ importers:
         specifier: ^3.17.0
         version: 3.17.0
     devDependencies:
-      '@plane/eslint-config':
-        specifier: workspace:*
-        version: link:../eslint-config
       '@plane/typescript-config':
         specifier: workspace:*
         version: link:../typescript-config
@@ -1061,7 +1127,7 @@ importers:
         version: 22.12.0
       tsdown:
         specifier: 'catalog:'
-        version: 0.15.5(typescript@5.8.3)
+        version: 0.16.0(typescript@5.8.3)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -1080,11 +1146,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
@@ -1092,6 +1161,9 @@ importers:
       cmdk:
         specifier: ^1.1.1
         version: 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      framer-motion:
+        specifier: ^12.23.0
+        version: 12.23.12(@emotion/is-prop-valid@1.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       frimousse:
         specifier: ^0.3.0
         version: 0.3.0(react@18.3.1)(typescript@5.8.3)
@@ -1111,15 +1183,12 @@ 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)
     devDependencies:
-      '@plane/eslint-config':
-        specifier: workspace:*
-        version: link:../eslint-config
       '@plane/tailwind-config':
         specifier: workspace:*
         version: link:../tailwind-config
@@ -1128,28 +1197,25 @@ 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.6.2)(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.6.2)(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.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
       '@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.6.2)(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.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
       '@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.6.2)(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.52.4)(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
       '@types/react':
         specifier: 'catalog:'
         version: 18.3.11
       '@types/react-dom':
         specifier: 'catalog:'
         version: 18.3.1
-      eslint-plugin-storybook:
-        specifier: 9.1.10
-        version: 9.1.10(eslint@8.57.1)(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(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:
-        specifier: 9.1.10
-        version: 9.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+        specifier: 9.1.17
+        version: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
       tsdown:
         specifier: 'catalog:'
-        version: 0.15.5(typescript@5.8.3)
+        version: 0.16.0(typescript@5.8.3)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -1169,15 +1235,12 @@ importers:
         specifier: ^21.0.0
         version: 21.0.0
     devDependencies:
-      '@plane/eslint-config':
-        specifier: workspace:*
-        version: link:../eslint-config
       '@plane/typescript-config':
         specifier: workspace:*
         version: link:../typescript-config
       tsdown:
         specifier: 'catalog:'
-        version: 0.15.5(typescript@5.8.3)
+        version: 0.16.0(typescript@5.8.3)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -1209,9 +1272,6 @@ importers:
         specifier: ^3.22.2
         version: 3.25.76
     devDependencies:
-      '@plane/eslint-config':
-        specifier: workspace:*
-        version: link:../eslint-config
       '@plane/typescript-config':
         specifier: workspace:*
         version: link:../typescript-config
@@ -1221,30 +1281,24 @@ importers:
       '@types/node':
         specifier: 'catalog:'
         version: 22.12.0
+      tsdown:
+        specifier: 'catalog:'
+        version: 0.16.0(typescript@5.8.3)
       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)
+      '@tailwindcss/postcss':
+        specifier: 4.1.17
+        version: 4.1.17
       postcss:
-        specifier: ^8.4.38
+        specifier: 8.5.6
         version: 8.5.6
       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:
@@ -1255,12 +1309,12 @@ importers:
         specifier: 'catalog:'
         version: 18.3.1(react@18.3.1)
     devDependencies:
-      '@plane/eslint-config':
-        specifier: workspace:*
-        version: link:../eslint-config
       '@plane/typescript-config':
         specifier: workspace:*
         version: link:../typescript-config
+      '@types/node':
+        specifier: 'catalog:'
+        version: 22.12.0
       '@types/react':
         specifier: 'catalog:'
         version: 18.3.11
@@ -1269,7 +1323,7 @@ importers:
         version: 18.3.1
       tsdown:
         specifier: 'catalog:'
-        version: 0.15.5(typescript@5.8.3)
+        version: 0.16.0(typescript@5.8.3)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -1339,8 +1393,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)
@@ -1348,9 +1402,6 @@ importers:
       '@chromatic-com/storybook':
         specifier: ^1.4.0
         version: 1.9.0(react@18.3.1)
-      '@plane/eslint-config':
-        specifier: workspace:*
-        version: link:../eslint-config
       '@plane/tailwind-config':
         specifier: workspace:*
         version: link:../tailwind-config
@@ -1359,34 +1410,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.6.2))
+        version: 8.6.14(@types/react@18.3.11)(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
       '@storybook/addon-interactions':
         specifier: ^8.1.1
-        version: 8.6.14(storybook@8.6.14(prettier@3.6.2))
+        version: 8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
       '@storybook/addon-links':
         specifier: ^8.1.1
-        version: 8.6.14(react@18.3.1)(storybook@8.6.14(prettier@3.6.2))
+        version: 8.6.14(react@18.3.1)(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
       '@storybook/addon-onboarding':
         specifier: ^8.1.1
-        version: 8.6.14(storybook@8.6.14(prettier@3.6.2))
+        version: 8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
       '@storybook/addon-styling-webpack':
         specifier: ^1.0.0
-        version: 1.0.1(storybook@8.6.14(prettier@3.6.2))(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.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))(webpack@5.101.3(@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.101.3(@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.6.2))
+        version: 8.6.14(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
       '@storybook/react':
         specifier: ^8.1.1
-        version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.6.2))(typescript@5.8.3)
+        version: 8.6.14(@storybook/test@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))(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.6.2)))(@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.6.2))(typescript@5.8.3)
+        version: 8.6.14(@storybook/test@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))))(@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.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3)
       '@storybook/test':
         specifier: ^8.1.1
-        version: 8.6.14(storybook@8.6.14(prettier@3.6.2))
+        version: 8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
       '@types/lodash-es':
         specifier: 'catalog:'
         version: 4.17.12
@@ -1407,16 +1458,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.6.2)
+        specifier: 9.1.17
+        version: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
       tsdown:
         specifier: 'catalog:'
-        version: 0.15.5(typescript@5.8.3)
+        version: 0.16.0(typescript@5.8.3)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -1429,49 +1480,85 @@ 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
       date-fns:
         specifier: ^4.1.0
         version: 4.1.0
-      dompurify:
-        specifier: 3.2.7
-        version: 3.2.7
+      hast:
+        specifier: ^1.0.0
+        version: 1.0.0
+      hast-util-to-mdast:
+        specifier: ^10.1.2
+        version: 10.1.2
       lodash-es:
         specifier: 'catalog:'
         version: 4.17.21
       lucide-react:
         specifier: 'catalog:'
         version: 0.469.0(react@18.3.1)
+      mdast:
+        specifier: ^3.0.0
+        version: 3.0.0
       react:
         specifier: 'catalog:'
         version: 18.3.1
+      rehype-parse:
+        specifier: ^9.0.1
+        version: 9.0.1
+      rehype-remark:
+        specifier: ^10.0.1
+        version: 10.0.1
+      remark-gfm:
+        specifier: ^4.0.1
+        version: 4.0.1
+      remark-stringify:
+        specifier: ^11.0.0
+        version: 11.0.0
+      sanitize-html:
+        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
       uuid:
         specifier: 'catalog:'
         version: 13.0.0
     devDependencies:
-      '@plane/eslint-config':
-        specifier: workspace:*
-        version: link:../eslint-config
       '@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
       '@types/lodash-es':
         specifier: 'catalog:'
         version: 4.17.12
+      '@types/mdast':
+        specifier: ^4.0.4
+        version: 4.0.4
       '@types/node':
         specifier: 'catalog:'
         version: 22.12.0
       '@types/react':
         specifier: 'catalog:'
         version: 18.3.11
+      '@types/sanitize-html':
+        specifier: 2.16.0
+        version: 2.16.0
       tsdown:
         specifier: 'catalog:'
-        version: 0.15.5(typescript@5.8.3)
+        version: 0.16.0(typescript@5.8.3)
       typescript:
         specifier: 5.8.3
         version: 5.8.3
@@ -1485,12 +1572,19 @@ 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==}
+
   '@atlaskit/pragmatic-drag-and-drop-auto-scroll@1.4.0':
     resolution: {integrity: sha512-5GoikoTSW13UX76F9TDeWB8x3jbbGlp/Y+3aRkHe1MOBMkrWkwNpJ42MIVhhX/6NSeaZiPumP0KbGJVs2tOWSQ==}
 
@@ -1508,12 +1602,16 @@ 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==}
+  '@babel/generator@7.28.5':
+    resolution: {integrity: sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==}
     engines: {node: '>=6.9.0'}
 
   '@babel/helper-annotate-as-pure@7.27.3':
@@ -1570,8 +1668,8 @@ 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==}
+  '@babel/helper-validator-identifier@7.28.5':
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
     engines: {node: '>=6.9.0'}
 
   '@babel/helper-validator-option@7.27.1':
@@ -1582,11 +1680,22 @@ packages:
     resolution: {integrity: sha512-UPYc3SauzZ3JGgj87GgZ89JVdC5dj0AoetR5Bw6wj4niittNyFh6+eOGonYvJ1ao6B8lEa3Q3klS7ADZ53bc5g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/parser@7.28.4':
-    resolution: {integrity: sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==}
+  '@babel/parser@7.28.3':
+    resolution: {integrity: sha512-7+Ey1mAgYqFAx2h0RuoxcQT5+MlG3GTV0TQrgr7/ZliKsm/MNDxVVutlWaziMq7wJNAz8MTqz55XLpWvva6StA==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/parser@7.28.5':
+    resolution: {integrity: sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-syntax-flow@7.27.1':
+    resolution: {integrity: sha512-p9OkPbZ5G7UT1MofwYFigGebnrzGJacoBSQM0/6bi/PUMVE+qlWDD/OalvQKbwgQzU6dl0xAv6r4X7Jme0RYxA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-syntax-jsx@7.27.1':
     resolution: {integrity: sha512-y8YTNIeKoyhGd9O0Jiyzyyqk8gdjnumGTQPsz0xOZOQ2RmkVJeZ1vmmfIvFEKqucBG6axJGBZDE/7iI5suUI/w==}
     engines: {node: '>=6.9.0'}
@@ -1599,24 +1708,66 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/plugin-transform-class-properties@7.27.1':
+    resolution: {integrity: sha512-D0VcalChDMtuRvJIu3U/fwWjf8ZMykz5iZsg77Nuj821vCKI3zCyRLwRdWbsuJ/uRwZhZ002QtCqIkwC/ZkvbA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-flow-strip-types@7.27.1':
+    resolution: {integrity: sha512-G5eDKsu50udECw7DL2AcsysXiQyB7Nfg521t2OAJ4tbfTJ27doHLeF/vlI1NZGlLdbb/v+ibvtL1YBQqYOwJGg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-transform-modules-commonjs@7.27.1':
     resolution: {integrity: sha512-OJguuwlTYlN0gBZFRPqwOGNWssZjfIUdS7HMYtN8c1KmwpwHFBwTeFZrg9XZa+DFTitWOW5iTAG7tyCUPsCCyw==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/plugin-transform-nullish-coalescing-operator@7.27.1':
+    resolution: {integrity: sha512-aGZh6xMo6q9vq1JGcw58lZ1Z0+i0xB2x0XaauNIUXd6O1xXc3RwoWEBlsTQrY4KQ9Jf0s5rgD6SiNkaUdJegTA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-optional-chaining@7.28.5':
+    resolution: {integrity: sha512-N6fut9IZlPnjPwgiQkXNhb+cT8wQKFlJNqcZkWlcTqkcqx6/kU4ynGmLFoa4LViBSirn05YAwk+sQBbPfxtYzQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-private-methods@7.27.1':
+    resolution: {integrity: sha512-10FVt+X55AjRAYI9BrdISN9/AQWHqldOeZDUoLyif1Kn05a56xVBXb8ZouL8pZ9jem8QpXaOt8TS7RHUIS+GPA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-transform-typescript@7.28.0':
     resolution: {integrity: sha512-4AEiDEBPIZvLQaWlc9liCavE0xRM0dNca41WtBeM3jgFptfUOSG9z0uteLhq6+3rq+WB6jIvUwKDTpXEHPJ2Vg==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/preset-flow@7.27.1':
+    resolution: {integrity: sha512-ez3a2it5Fn6P54W8QkbfIyyIbxlXvcxyWHHvno1Wg0Ej5eiJY5hBb8ExttoIOJJk7V2dZE6prP7iby5q2aQ0Lg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/preset-typescript@7.27.1':
     resolution: {integrity: sha512-l7WfQfX0WK4M0v2RudjuQK4u99BS6yLHYEmdtVPP7lKV013zr9DygFuWNlnbvQ9LR+LS0Egz/XAvGx5U9MX0fQ==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/register@7.28.3':
+    resolution: {integrity: sha512-CieDOtd8u208eI49bYl4z1J22ySFw87IGwE+IswFEExH7e3rLgKb0WNQeumnacQ1+VoDJLYI5QFA3AJZuyZQfA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/runtime@7.26.10':
     resolution: {integrity: sha512-2WJMeRQPHKSPemqk/awGrAiuFfzBmOIPXKizAsVhWH9YJqLZ0H+HS4c8loHGgW6utJ3E/ejXQUsiGaQy2NZ9Fw==}
     engines: {node: '>=6.9.0'}
@@ -1629,8 +1780,8 @@ packages:
     resolution: {integrity: sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/types@7.28.4':
-    resolution: {integrity: sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==}
+  '@babel/types@7.28.5':
+    resolution: {integrity: sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==}
     engines: {node: '>=6.9.0'}
 
   '@base-ui-components/react@1.0.0-beta.3':
@@ -1695,14 +1846,42 @@ packages:
     resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==}
     engines: {node: '>=0.1.90'}
 
+  '@csstools/color-helpers@5.0.2':
+    resolution: {integrity: sha512-JqWH1vsgdGcw2RR6VliXXdA0/59LttzlU8UlRT/iUUsEeWfYq8I+K0yhihEUTTHLRm1EXvpsCx3083EU15ecsA==}
+    engines: {node: '>=18'}
+
+  '@csstools/css-calc@2.1.4':
+    resolution: {integrity: sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-color-parser@3.0.10':
+    resolution: {integrity: sha512-TiJ5Ajr6WRd1r8HSiwJvZBiJOqtH86aHpUjq5aEKWHiII2Qfjqd/HCWKPOW8EP4vcspXbHnXrwIDlu5savQipg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^3.0.5
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-parser-algorithms@3.0.5':
+    resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^3.0.4
+
+  '@csstools/css-tokenizer@3.0.4':
+    resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
+    engines: {node: '>=18'}
+
   '@dabh/diagnostics@2.0.3':
     resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==}
 
   '@date-fns/tz@1.4.1':
     resolution: {integrity: sha512-P5LUNhtbj6YfI3iJjw5EL9eUAG6OitD0W3fWQcpQjDRc/QIsL0tRNuO1PcDvPccWL1fSTXXdE1ds+l95DV/OFA==}
 
-  '@dotenvx/dotenvx@1.49.0':
-    resolution: {integrity: sha512-M1cyP6YstFQCjih54SAxCqHLMMi8QqV8tenpgGE48RTXWD7vfMYJiw/6xcCDpS2h28AcLpTsFCZA863Ge9yxzA==}
+  '@dotenvx/dotenvx@1.51.1':
+    resolution: {integrity: sha512-fqcQxcxC4LOaUlW8IkyWw8x0yirlLUkbxohz9OnWvVWjf73J5yyw7jxWnkOJaUKXZotcGEScDox9MU6rSkcDgg==}
     hasBin: true
 
   '@ecies/ciphers@0.2.4':
@@ -1711,69 +1890,21 @@ packages:
     peerDependencies:
       '@noble/ciphers': ^1.0.0
 
-  '@emnapi/core@1.5.0':
-    resolution: {integrity: sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==}
+  '@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==}
 
   '@emnapi/wasi-threads@1.1.0':
     resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
 
-  '@emotion/babel-plugin@11.13.5':
-    resolution: {integrity: sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==}
-
-  '@emotion/cache@11.14.0':
-    resolution: {integrity: sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==}
-
-  '@emotion/hash@0.9.2':
-    resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
-
   '@emotion/is-prop-valid@1.3.1':
     resolution: {integrity: sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==}
 
   '@emotion/memoize@0.9.0':
     resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
 
-  '@emotion/react@11.14.0':
-    resolution: {integrity: sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==}
-    peerDependencies:
-      '@types/react': '*'
-      react: '>=16.8.0'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@emotion/serialize@1.3.3':
-    resolution: {integrity: sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==}
-
-  '@emotion/sheet@1.4.0':
-    resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==}
-
-  '@emotion/styled@11.14.0':
-    resolution: {integrity: sha512-XxfOnXFffatap2IyCeJyNov3kiDQWoR08gPUQxvbL7fxKryGBKUZUkG6Hz48DZwVrJSVh9sJboyV1Ds4OW6SgA==}
-    peerDependencies:
-      '@emotion/react': ^11.0.0-rc.0
-      '@types/react': '*'
-      react: '>=16.8.0'
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@emotion/unitless@0.10.0':
-    resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==}
-
-  '@emotion/use-insertion-effect-with-fallbacks@1.2.0':
-    resolution: {integrity: sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==}
-    peerDependencies:
-      react: '>=16.8.0'
-
-  '@emotion/utils@1.4.2':
-    resolution: {integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==}
-
-  '@emotion/weak-memoize@0.4.0':
-    resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==}
-
   '@esbuild/aix-ppc64@0.25.0':
     resolution: {integrity: sha512-O7vun9Sf8DFjH2UtqK8Ku3LkquL9SZL8OLY1T5NZkA34+wG3OQF7cl4Ql8vdNzM6fzBbYfLaiRLIOZ+2FOCgBQ==}
     engines: {node: '>=18'}
@@ -1934,13 +2065,33 @@ packages:
     resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  '@eslint/eslintrc@2.1.4':
-    resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
-    engines: {node: ^12.22.0 || ^14.17.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/js@8.57.1':
-    resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.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==}
@@ -1971,6 +2122,15 @@ 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/material-symbols-rounded@5.2.30':
+    resolution: {integrity: sha512-svIEPUzsJGdBMr0PwLH3wKndh7ZNB8IVlyKZPKvbGEX0f36gpGPzE2EZiXppb4UJgDUnyjphWzjJ28StuK6NCg==}
+
   '@formatjs/ecma402-abstract@2.3.4':
     resolution: {integrity: sha512-qrycXDeaORzIqNhBOx0btnhpD1c+/qFIHAN9znofuMJX6QBwtbrmlpWfD4oiUUD2vJUOIYFA/gYtg2KAMGG7sA==}
 
@@ -2030,18 +2190,25 @@ packages:
       y-prosemirror: ^1.2.1
       yjs: ^13.6.8
 
-  '@humanwhocodes/config-array@0.13.0':
-    resolution: {integrity: sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==}
-    engines: {node: '>=10.10.0'}
-    deprecated: Use @eslint/config-array instead
+  '@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/object-schema@2.0.3':
-    resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
-    deprecated: Use @eslint/object-schema instead
+  '@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'}
 
   '@hypnosphi/create-react-context@0.3.1':
     resolution: {integrity: sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==}
@@ -2127,68 +2294,8 @@ packages:
   '@napi-rs/wasm-runtime@0.2.12':
     resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
 
-  '@napi-rs/wasm-runtime@1.0.3':
-    resolution: {integrity: sha512-rZxtMsLwjdXkMUGC3WwsPwLNVqVqnTJT6MNIB6e+5fhMcSCPP0AOsNWuMQ5mdCq6HNjs/ZeWAEchpqeprqBD2Q==}
-
-  '@next/env@14.2.32':
-    resolution: {integrity: sha512-n9mQdigI6iZ/DF6pCTwMKeWgF2e8lg7qgt5M7HXMLtyhZYMnf/u905M18sSpPmHL9MKp9JHo56C6jrD2EvWxng==}
-
-  '@next/eslint-plugin-next@14.2.32':
-    resolution: {integrity: sha512-tyZMX8g4cWg/uPW4NxiJK13t62Pab47SKGJGVZJa6YtFwtfrXovH4j1n9tdpRdXW03PGQBugYEVGM7OhWfytdA==}
-
-  '@next/swc-darwin-arm64@14.2.32':
-    resolution: {integrity: sha512-osHXveM70zC+ilfuFa/2W6a1XQxJTvEhzEycnjUaVE8kpUS09lDpiDDX2YLdyFCzoUbvbo5r0X1Kp4MllIOShw==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@next/swc-darwin-x64@14.2.32':
-    resolution: {integrity: sha512-P9NpCAJuOiaHHpqtrCNncjqtSBi1f6QUdHK/+dNabBIXB2RUFWL19TY1Hkhu74OvyNQEYEzzMJCMQk5agjw1Qg==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@next/swc-linux-arm64-gnu@14.2.32':
-    resolution: {integrity: sha512-v7JaO0oXXt6d+cFjrrKqYnR2ubrD+JYP7nQVRZgeo5uNE5hkCpWnHmXm9vy3g6foMO8SPwL0P3MPw1c+BjbAzA==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@next/swc-linux-arm64-musl@14.2.32':
-    resolution: {integrity: sha512-tA6sIKShXtSJBTH88i0DRd6I9n3ZTirmwpwAqH5zdJoQF7/wlJXR8DkPmKwYl5mFWhEKr5IIa3LfpMW9RRwKmQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@next/swc-linux-x64-gnu@14.2.32':
-    resolution: {integrity: sha512-7S1GY4TdnlGVIdeXXKQdDkfDysoIVFMD0lJuVVMeb3eoVjrknQ0JNN7wFlhCvea0hEk0Sd4D1hedVChDKfV2jw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-
-  '@next/swc-linux-x64-musl@14.2.32':
-    resolution: {integrity: sha512-OHHC81P4tirVa6Awk6eCQ6RBfWl8HpFsZtfEkMpJ5GjPsJ3nhPe6wKAJUZ/piC8sszUkAgv3fLflgzPStIwfWg==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-
-  '@next/swc-win32-arm64-msvc@14.2.32':
-    resolution: {integrity: sha512-rORQjXsAFeX6TLYJrCG5yoIDj+NKq31Rqwn8Wpn/bkPNy5rTHvOXkW8mLFonItS7QC6M+1JIIcLe+vOCTOYpvg==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@next/swc-win32-ia32-msvc@14.2.32':
-    resolution: {integrity: sha512-jHUeDPVHrgFltqoAqDB6g6OStNnFxnc7Aks3p0KE0FbwAvRg6qWKYF5mSTdCTxA3axoSAUwxYdILzXJfUwlHhA==}
-    engines: {node: '>= 10'}
-    cpu: [ia32]
-    os: [win32]
-
-  '@next/swc-win32-x64-msvc@14.2.32':
-    resolution: {integrity: sha512-2N0lSoU4GjfLSO50wvKpMQgKd4HdI2UHEhQPPPnlgfBJlOgJxkjpkYBqzk08f1gItBB6xF/n+ykso2hgxuydsA==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [win32]
+  '@napi-rs/wasm-runtime@1.1.0':
+    resolution: {integrity: sha512-Fq6DJW+Bb5jaWE69/qOE0D1TUN9+6uWhCeZpdnSBk14pjLcCWR7Q8n49PTSPHazM37JqrsdpEthXy2xn6jWWiA==}
 
   '@noble/ciphers@1.3.0':
     resolution: {integrity: sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==}
@@ -2202,22 +2309,6 @@ packages:
     resolution: {integrity: sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==}
     engines: {node: ^14.21.3 || >=16}
 
-  '@nodelib/fs.scandir@2.1.5':
-    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
-    engines: {node: '>= 8'}
-
-  '@nodelib/fs.stat@2.0.5':
-    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
-    engines: {node: '>= 8'}
-
-  '@nodelib/fs.walk@1.2.8':
-    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
-    engines: {node: '>= 8'}
-
-  '@nolyfill/is-core-module@1.0.39':
-    resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
-    engines: {node: '>=12.4.0'}
-
   '@npmcli/git@4.1.0':
     resolution: {integrity: sha512-9hwoB3gStVfa0N31ymBmrX+GuDGdVA/QWShZVqE0HK2Af+7QGGrCTbZia/SW0ImUTjTne7SP91qxDmtXvDHRPQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -2230,206 +2321,284 @@ packages:
     resolution: {integrity: sha512-gGq0NJkIGSwdbUt4yhdF8ZrmkGKVz9vAdVzpOfnom+V8PLSmSOVhZwbNvZZS1EYcJN5hzzKBxmmVVAInM6HQLg==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
-  '@opentelemetry/api-logs@0.204.0':
-    resolution: {integrity: sha512-DqxY8yoAaiBPivoJD4UtgrMS8gEmzZ5lnaxzPojzLVHBGqPxgWm4zcuvcUHZiqQ6kRX2Klel2r9y8cA2HAtqpw==}
+  '@opentelemetry/api-logs@0.208.0':
+    resolution: {integrity: sha512-CjruKY9V6NMssL/T1kAFgzosF1v9o6oeN+aX5JB/C/xPNtmgIJqcXHG7fA82Ou1zCpWGl4lROQUKwUNE1pMCyg==}
     engines: {node: '>=8.0.0'}
 
-  '@opentelemetry/api-logs@0.57.2':
-    resolution: {integrity: sha512-uIX52NnTM0iBh84MShlpouI7UKqkZ7MrUszTmaypHBu4r7NofznSnQRfJ+uUeDtQDj6w8eFGg5KBLDAwAPz1+A==}
-    engines: {node: '>=14'}
-
   '@opentelemetry/api@1.9.0':
     resolution: {integrity: sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==}
     engines: {node: '>=8.0.0'}
 
-  '@opentelemetry/context-async-hooks@2.1.0':
-    resolution: {integrity: sha512-zOyetmZppnwTyPrt4S7jMfXiSX9yyfF0hxlA8B5oo2TtKl+/RGCy7fi4DrBfIf3lCPrkKsRBWZZD7RFojK7FDg==}
+  '@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.1.0':
-    resolution: {integrity: sha512-RMEtHsxJs/GiHHxYT58IY57UXAQTuUnZVco6ymDEqTNlJKTimM4qPUPVe8InNFyBjhHBEAx4k3Q8LtNayBsbUQ==}
+  '@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.51.0':
-    resolution: {integrity: sha512-XGmjYwjVRktD4agFnWBWQXo9SiYHKBxR6Ag3MLXwtLE4R99N3a08kGKM5SC1qOFKIELcQDGFEFT9ydXMH00Luw==}
+  '@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.48.0':
-    resolution: {integrity: sha512-OMjc3SFL4pC16PeK+tDhwP7MRvDPalYCGSvGqUhX5rASkI2H0RuxZHOWElYeXkV0WP+70Gw6JHWac/2Zqwmhdw==}
+  '@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.22.0':
-    resolution: {integrity: sha512-bXnTcwtngQsI1CvodFkTemrrRSQjAjZxqHVc+CJZTDnidT0T6wt3jkKhnsjU/Kkkc0lacr6VdRpCu2CUWa0OKw==}
+  '@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.53.0':
-    resolution: {integrity: sha512-r/PBafQmFYRjuxLYEHJ3ze1iBnP2GDA1nXOSS6E02KnYNZAVjj6WcDA1MSthtdAUUK0XnotHvvWM8/qz7DMO5A==}
+  '@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.24.0':
-    resolution: {integrity: sha512-HjIxJ6CBRD770KNVaTdMXIv29Sjz4C1kPCCK5x1Ujpc6SNnLGPqUVyJYZ3LUhhnHAqdbrl83ogVWjCgeT4Q0yw==}
+  '@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.48.0':
-    resolution: {integrity: sha512-TLv/On8pufynNR+pUbpkyvuESVASZZKMlqCm4bBImTpXKTpqXaJJ3o/MUDeMlM91rpen+PEv2SeyOKcHCSlgag==}
+  '@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.52.0':
-    resolution: {integrity: sha512-3fEJ8jOOMwopvldY16KuzHbRhPk8wSsOTSF0v2psmOCGewh6ad+ZbkTx/xyUK9rUdUMWAxRVU0tFpj4Wx1vkPA==}
+  '@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.51.0':
-    resolution: {integrity: sha512-qyf27DaFNL1Qhbo/da+04MSCw982B02FhuOS5/UF+PMhM61CcOiu7fPuXj8TvbqyReQuJFljXE6UirlvoT/62g==}
+  '@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.204.0':
-    resolution: {integrity: sha512-1afJYyGRA4OmHTv0FfNTrTAzoEjPQUYgd+8ih/lX0LlZBnGio/O80vxA0lN3knsJPS7FiDrsDrWq25K7oAzbkw==}
+  '@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.52.0':
-    resolution: {integrity: sha512-rUvlyZwI90HRQPYicxpDGhT8setMrlHKokCtBtZgYxQWRF5RBbG4q0pGtbZvd7kyseuHbFpA3I/5z7M8b/5ywg==}
+  '@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.14.0':
-    resolution: {integrity: sha512-kbB5yXS47dTIdO/lfbbXlzhvHFturbux4EpP0+6H78Lk0Bn4QXiZQW7rmZY1xBCY16mNcCb8Yt0mhz85hTnSVA==}
+  '@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.49.0':
-    resolution: {integrity: sha512-NKsRRT27fbIYL4Ix+BjjP8h4YveyKc+2gD6DMZbr5R5rUeDqfC8+DTfIt3c3ex3BIc5Vvek4rqHnN7q34ZetLQ==}
+  '@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.52.0':
-    resolution: {integrity: sha512-JJSBYLDx/mNSy8Ibi/uQixu2rH0bZODJa8/cz04hEhRaiZQoeJ5UrOhO/mS87IdgVsHrnBOsZ6vDu09znupyuA==}
+  '@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-lru-memoizer@0.49.0':
-    resolution: {integrity: sha512-ctXu+O/1HSadAxtjoEg2w307Z5iPyLOMM8IRNwjaKrIpNAthYGSOanChbk1kqY6zU5CrpkPHGdAT6jk8dXiMqw==}
+  '@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-mongodb@0.57.0':
-    resolution: {integrity: sha512-KD6Rg0KSHWDkik+qjIOWoksi1xqSpix8TSPfquIK1DTmd9OTFb5PHmMkzJe16TAPVEuElUW8gvgP59cacFcrMQ==}
+  '@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-mongoose@0.51.0':
-    resolution: {integrity: sha512-gwWaAlhhV2By7XcbyU3DOLMvzsgeaymwP/jktDC+/uPkCmgB61zurwqOQdeiRq9KAf22Y2dtE5ZLXxytJRbEVA==}
+  '@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-mysql2@0.51.0':
-    resolution: {integrity: sha512-zT2Wg22Xn43RyfU3NOUmnFtb5zlDI0fKcijCj9AcK9zuLZ4ModgtLXOyBJSSfO+hsOCZSC1v/Fxwj+nZJFdzLQ==}
+  '@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-mysql@0.50.0':
-    resolution: {integrity: sha512-duKAvMRI3vq6u9JwzIipY9zHfikN20bX05sL7GjDeLKr2qV0LQ4ADtKST7KStdGcQ+MTN5wghWbbVdLgNcB3rA==}
+  '@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-pg@0.57.0':
-    resolution: {integrity: sha512-dWLGE+r5lBgm2A8SaaSYDE3OKJ/kwwy5WLyGyzor8PLhUL9VnJRiY6qhp4njwhnljiLtzeffRtG2Mf/YyWLeTw==}
+  '@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-redis@0.53.0':
-    resolution: {integrity: sha512-WUHV8fr+8yo5RmzyU7D5BIE1zwiaNQcTyZPwtxlfr7px6NYYx7IIpSihJK7WA60npWynfxxK1T67RAVF0Gdfjg==}
+  '@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-tedious@0.23.0':
-    resolution: {integrity: sha512-3TMTk/9VtlRonVTaU4tCzbg4YqW+Iq/l5VnN2e5whP6JgEg/PKfrGbqQ+CxQWNLfLaQYIUgEZqAn5gk/inh1uQ==}
-    engines: {node: ^18.19.0 || >=20.6.0}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/instrumentation-undici@0.15.0':
-    resolution: {integrity: sha512-sNFGA/iCDlVkNjzTzPRcudmI11vT/WAfAguRdZY9IspCw02N4WSC72zTuQhSMheh2a1gdeM9my1imnKRvEEvEg==}
+  '@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.204.0':
-    resolution: {integrity: sha512-vV5+WSxktzoMP8JoYWKeopChy6G3HKk4UQ2hESCRDUUTZqQ3+nM3u8noVG0LmNfRWwcFBnbZ71GKC7vaYYdJ1g==}
+  '@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/instrumentation@0.57.2':
-    resolution: {integrity: sha512-BdBGhQBh8IjZ2oIIX6F2/Q3LKm/FDDKi6ccYKcBTeilh6SNdNKveDOLk73BkSJjQLJk6qe4Yh+hHw1UPhCDdrg==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      '@opentelemetry/api': ^1.3.0
-
-  '@opentelemetry/redis-common@0.38.0':
-    resolution: {integrity: sha512-4Wc0AWURII2cfXVVoZ6vDqK+s5n4K5IssdrlVrvGsx6OEOKdghKtJZqXAHWFiZv4nTDLH2/2fldjIHY8clMOjQ==}
+  '@opentelemetry/redis-common@0.38.2':
+    resolution: {integrity: sha512-1BCcU93iwSRZvDAgwUxC/DV4T/406SkMfxGqu5ojc3AvNI+I9GhV7v0J1HljsczuuhcnFLYqD5VmwVXfCGHzxA==}
     engines: {node: ^18.19.0 || >=20.6.0}
 
-  '@opentelemetry/resources@2.1.0':
-    resolution: {integrity: sha512-1CJjf3LCvoefUOgegxi8h6r4B/wLSzInyhGP2UmIBYNlo4Qk5CZ73e1eEyWmfXvFtm1ybkmfb2DqWvspsYLrWw==}
+  '@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.1.0':
-    resolution: {integrity: sha512-uTX9FBlVQm4S2gVQO1sb5qyBLq/FPjbp+tmGoxu4tIgtYGmBYB44+KX/725RFDe30yBSaA9Ml9fqphe1hbUyLQ==}
+  '@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.38.0':
-    resolution: {integrity: sha512-kocjix+/sSggfJhwXqClZ3i9Y/MI0fp7b+g7kCRm6psy2dsf8uApTRclwG18h8Avm7C9+fnt+O36PspJ/OzoWg==}
+  '@opentelemetry/semantic-conventions@1.37.0':
+    resolution: {integrity: sha512-JD6DerIKdJGmRp4jQyX5FlrQjA4tjOw1cvfsPAZXfOOEErMUHjPcPSICS+6WnM0nB0efSFARh0KAZss+bvExOA==}
     engines: {node: '>=14'}
 
-  '@opentelemetry/sql-common@0.41.0':
-    resolution: {integrity: sha512-pmzXctVbEERbqSfiAgdes9Y63xjoOyXcD7B6IXBkVb+vbM7M9U98mn33nGXxPf4dfYR0M+vhcKRZmbSJ7HfqFA==}
+  '@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-project/runtime@0.82.3':
-    resolution: {integrity: sha512-LNh5GlJvYHAnMurO+EyA8jJwN1rki7l3PSHuosDh2I7h00T6/u9rCkUjg/SvPmT1CZzvhuW0y+gf7jcqUy/Usg==}
-    engines: {node: '>=6.9.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-project/types@0.82.3':
-    resolution: {integrity: sha512-6nCUxBnGX0c6qfZW5MaF6/fmu5dHJDMiMPaioKHKs5mi5+8/FHQ7WGjgQIz1zxpmceMYfdIXkOaLYE+ejbuOtA==}
+  '@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.96.0':
+    resolution: {integrity: sha512-r/xkmoXA0xEpU6UGtn18CNVjXH6erU3KCpCDbpLmbVxBFor1U9MqN5Z2uMmCHJuXjJzlnDR+hWY+yPoLo8oHDw==}
+
+  '@oxc-project/types@0.99.0':
+    resolution: {integrity: sha512-LLDEhXB7g1m5J+woRSgfKsFPS3LhR9xRhTeIoEBm5WrkwMxn6eZ0Ld0c0K5eHB57ChZX6I3uSmmLjZ8pcjlRcw==}
 
   '@popperjs/core@2.11.8':
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
@@ -2444,8 +2613,12 @@ packages:
       '@types/react':
         optional: true
 
-  '@prisma/instrumentation@6.15.0':
-    resolution: {integrity: sha512-6TXaH6OmDkMOQvOxwLZ8XS51hU2v4A3vmE2pSijCIiGRJYyNeMcL6nMHQMyYdZRD8wl7LF3Wzc+AMPMV/9Oo7A==}
+  '@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
 
@@ -2704,35 +2877,14 @@ packages:
   '@react-pdf/types@2.9.0':
     resolution: {integrity: sha512-ckj80vZLlvl9oYrQ4tovEaqKWP3O06Eb1D48/jQWbdwz1Yh7Y9v1cEmwlP8ET+a1Whp8xfdM0xduMexkuPANCQ==}
 
-  '@react-router/dev@7.9.3':
-    resolution: {integrity: sha512-oPaO+OpvCo/rNTJrRipHSp31/K4It19PE5A24x21FlYlemPTe3fbGX/kyC2+8au/abXbvzNHfRbuIBD/rfojmA==}
+  '@react-router/dev@7.9.5':
+    resolution: {integrity: sha512-MkWI4zN7VbQ0tteuJtX5hmDINNS26IW236a8lM8+o1344xdnT/ZsBvcUh8AkzDdCRYEz1blgzgirpj0Wc1gmXg==}
     engines: {node: '>=20.0.0'}
     hasBin: true
     peerDependencies:
-      '@react-router/serve': ^7.9.3
+      '@react-router/serve': ^7.9.5
       '@vitejs/plugin-rsc': '*'
-      react-router: ^7.9.3
-      typescript: 5.8.3
-      vite: 7.1.11
-      wrangler: ^3.28.2 || ^4.0.0
-    peerDependenciesMeta:
-      '@react-router/serve':
-        optional: true
-      '@vitejs/plugin-rsc':
-        optional: true
-      typescript:
-        optional: true
-      wrangler:
-        optional: true
-
-  '@react-router/dev@7.9.4':
-    resolution: {integrity: sha512-bLs6DjKMJExT7Y57EBx25hkeGGUla3pURxvOn15IN8Mmaw2+euDtBUX9+OFrAPsAzD1xIj6+2HNLXlFH/LB86Q==}
-    engines: {node: '>=20.0.0'}
-    hasBin: true
-    peerDependencies:
-      '@react-router/serve': ^7.9.4
-      '@vitejs/plugin-rsc': '*'
-      react-router: ^7.9.4
+      react-router: ^7.9.5
       typescript: 5.8.3
       vite: 7.1.11
       wrangler: ^3.28.2 || ^4.0.0
@@ -2750,33 +2902,13 @@ packages:
     resolution: {integrity: sha512-Mg94Tw9JSaRuwkvIC6PaODRzsLs6mo70ppz5qdIK/G3iotSxsH08TDNdzot7CaXXevk/pIiD/+Tbn0H/asHsYA==}
     engines: {node: '>=20.0.0'}
     peerDependencies:
-      express: ^4.17.1 || ^5
+      express: 4.22.0
       react-router: 7.9.5
       typescript: 5.8.3
     peerDependenciesMeta:
       typescript:
         optional: true
 
-  '@react-router/node@7.9.3':
-    resolution: {integrity: sha512-+OvWxPPUgouOshw85QlG0J6yFJM0GMCCpXqPj38IcveeFLlP7ppOAEkOi7RBFrDvg7vSUtCEBDnsbuDCvxUPJg==}
-    engines: {node: '>=20.0.0'}
-    peerDependencies:
-      react-router: 7.9.3
-      typescript: 5.8.3
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@react-router/node@7.9.4':
-    resolution: {integrity: sha512-sdeDNRaqAB71BR2hPlhcQbPbrXh8uGJUjLVc+NpRiPsQbv6B8UvIucN4IX9YGVJkw3UxVQBn2vPSwxACAck32Q==}
-    engines: {node: '>=20.0.0'}
-    peerDependencies:
-      react-router: 7.9.4
-      typescript: 5.8.3
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@react-router/node@7.9.5':
     resolution: {integrity: sha512-3mDd32mXh3gEkG0cLPnUaoLkY1pApsTPqn7O1j+P8aLf997uYz5lYDjt33vtMhaotlRM0x+5JziAKtz/76YBpQ==}
     engines: {node: '>=20.0.0'}
@@ -2800,78 +2932,91 @@ packages:
   '@remix-run/node-fetch-server@0.9.0':
     resolution: {integrity: sha512-SoLMv7dbH+njWzXnOY6fI08dFMI5+/dQ+vY3n8RnnbdG7MdJEgiP28Xj/xWlnRnED/aB6SFw56Zop+LbmaaKqA==}
 
-  '@rolldown/binding-android-arm64@1.0.0-beta.34':
-    resolution: {integrity: sha512-jf5GNe5jP3Sr1Tih0WKvg2bzvh5T/1TA0fn1u32xSH7ca/p5t+/QRr4VRFCV/na5vjwKEhwWrChsL2AWlY+eoA==}
+  '@rolldown/binding-android-arm64@1.0.0-beta.46':
+    resolution: {integrity: sha512-1nfXUqZ227uKuLw9S12OQZU5z+h+cUOXLW5orntWVxHWvt20pt1PGUcVoIU8ssngKABu0vzHY268kAxuYX24BQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
-  '@rolldown/binding-darwin-arm64@1.0.0-beta.34':
-    resolution: {integrity: sha512-2F/TqH4QuJQ34tgWxqBjFL3XV1gMzeQgUO8YRtCPGBSP0GhxtoFzsp7KqmQEothsxztlv+KhhT9Dbg3HHwHViQ==}
+  '@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-x64@1.0.0-beta.34':
-    resolution: {integrity: sha512-E1QuFslgLWbHQ8Qli/AqUKdfg0pockQPwRxVbhNQ74SciZEZpzLaujkdmOLSccMlSXDfFCF8RPnMoRAzQ9JV8Q==}
+  '@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-freebsd-x64@1.0.0-beta.34':
-    resolution: {integrity: sha512-VS8VInNCwnkpI9WeQaWu3kVBq9ty6g7KrHdLxYMzeqz24+w9hg712TcWdqzdY6sn+24lUoMD9jTZrZ/qfVpk0g==}
+  '@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-linux-arm-gnueabihf@1.0.0-beta.34':
-    resolution: {integrity: sha512-4St4emjcnULnxJYb/5ZDrH/kK/j6PcUgc3eAqH5STmTrcF+I9m/X2xvSF2a2bWv1DOQhxBewThu0KkwGHdgu5w==}
+  '@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-arm64-gnu@1.0.0-beta.34':
-    resolution: {integrity: sha512-a737FTqhFUoWfnebS2SnQ2BS50p0JdukdkUBwy2J06j4hZ6Eej0zEB8vTfAqoCjn8BQKkXBy+3Sx0IRkgwz1gA==}
+  '@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]
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.34':
-    resolution: {integrity: sha512-NH+FeQWKyuw0k+PbXqpFWNfvD8RPvfJk766B/njdaWz4TmiEcSB0Nb6guNw1rBpM1FmltQYb3fFnTumtC6pRfA==}
+  '@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]
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.34':
-    resolution: {integrity: sha512-Q3RSCivp8pNadYK8ke3hLnQk08BkpZX9BmMjgwae2FWzdxhxxUiUzd9By7kneUL0vRQ4uRnhD9VkFQ+Haeqdvw==}
+  '@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]
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-beta.34':
-    resolution: {integrity: sha512-wDd/HrNcVoBhWWBUW3evJHoo7GJE/RofssBy3Dsiip05YUBmokQVrYAyrboOY4dzs/lJ7HYeBtWQ9hj8wlyF0A==}
+  '@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]
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-beta.34':
-    resolution: {integrity: sha512-dH3FTEV6KTNWpYSgjSXZzeX7vLty9oBYn6R3laEdhwZftQwq030LKL+5wyQdlbX5pnbh4h127hpv3Hl1+sj8dg==}
+  '@rolldown/binding-openharmony-arm64@1.0.0-beta.46':
+    resolution: {integrity: sha512-6SpDGH+0Dud3/RFDoC6fva6+Cm/0COnMRKR8kI4ssHWlCXPymlM59kYFCIBLZZqwURpNVVMPln4rWjxXuwD23w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-beta.34':
-    resolution: {integrity: sha512-y5BUf+QtO0JsIDKA51FcGwvhJmv89BYjUl8AmN7jqD6k/eU55mH6RJYnxwCsODq5m7KSSTigVb6O7/GqB8wbPw==}
+  '@rolldown/binding-wasm32-wasi@1.0.0-beta.46':
+    resolution: {integrity: sha512-peWDGp8YUAbTw5RJzr9AuPlTuf2adr+TBNIGF6ysMbobBKuQL41wYfGQlcerXJfLmjnQLf6DU2zTPBTfrS2Y8A==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.34':
-    resolution: {integrity: sha512-ga5hFhdTwpaNxEiuxZHWnD3ed0GBAzbgzS5tRHpe0ObptxM1a9Xrq6TVfNQirBLwb5Y7T/FJmJi3pmdLy95ljg==}
+  '@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-ia32-msvc@1.0.0-beta.34':
-    resolution: {integrity: sha512-4/MBp9T9eRnZskxWr8EXD/xHvLhdjWaeX/qY9LPRG1JdCGV3DphkLTy5AWwIQ5jhAy2ZNJR5z2fYRlpWU0sIyQ==}
+  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.46':
+    resolution: {integrity: sha512-XcPZG2uDxEn6G3takXQvi7xWgDiJqdC0N6mubL/giKD4I65zgQtbadwlIR8oDB/erOahZr5IX8cRBVcK3xcvpg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ia32]
     os: [win32]
 
-  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.34':
-    resolution: {integrity: sha512-7O5iUBX6HSBKlQU4WykpUoEmb0wQmonb6ziKFr3dJTHud2kzDnWMqk344T0qm3uGv9Ddq6Re/94pInxo1G2d4w==}
+  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.46':
+    resolution: {integrity: sha512-VPC+F9S6nllv02aGG+gxHRgpOaOlYBPn94kDe9DCFSLOztf4uYIAkN+tLDlg5OcsOC8XNR5rP49zOfI0PfnHYw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
 
-  '@rolldown/pluginutils@1.0.0-beta.34':
-    resolution: {integrity: sha512-LyAREkZHP5pMom7c24meKmJCdhf2hEyvam2q0unr3or9ydwDL+DJ8chTF6Av/RFPb3rH8UFBdMzO5MxTZW97oA==}
+  '@rolldown/pluginutils@1.0.0-beta.46':
+    resolution: {integrity: sha512-xMNwJo/pHkEP/mhNVnW+zUiJDle6/hxrwO0mfSJuEVRbBfgrJFuUSRoZx/nYUw5pCjrysl9OkNXCkAdih8GCnA==}
 
   '@rollup/pluginutils@5.2.0':
     resolution: {integrity: sha512-qWJ2ZTbmumwiLFomfzTyt5Kng4hwPi9rwCYN4SHb6eaRU1KNO4ccxINHr/VhH4GgPlt1XfSTLX2LBTme8ne4Zw==}
@@ -2995,138 +3140,135 @@ packages:
   '@rtsao/scc@1.1.0':
     resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
 
-  '@rushstack/eslint-patch@1.12.0':
-    resolution: {integrity: sha512-5EwMtOqvJMMa3HbmxLlF74e+3/HhwBTMcvt3nqVJgGCozO6hzIPOBlwm8mGVNR9SN2IJpxSnlxczyDjcn7qIyw==}
-
-  '@sentry-internal/browser-utils@10.24.0':
-    resolution: {integrity: sha512-2nLj5TgPc/KkGy7LCW9sBGJT0CT+9U+Vlqa8yl7APd5agzxrpRyTcm4hPBBOw5tw7D4NWWUMulFxtZKZzT/Rcw==}
+  '@sentry-internal/browser-utils@10.27.0':
+    resolution: {integrity: sha512-17tO6AXP+rmVQtLJ3ROQJF2UlFmvMWp7/8RDT5x9VM0w0tY31z8Twc0gw2KA7tcDxa5AaHDUbf9heOf+R6G6ow==}
     engines: {node: '>=18'}
 
-  '@sentry-internal/feedback@10.24.0':
-    resolution: {integrity: sha512-leYFQfgax50sYTEgkcEzPP8lTvtE12nryJSsdtPNym6gmQgA2SN20oSRNlxo1AitNpwNnTkj+ow/Y9ytrJlXUQ==}
+  '@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.24.0':
-    resolution: {integrity: sha512-pjNZ+/L/ct0huutkTQrcR+V/v3ICf5wKE8OOB2Dt3DcjNsbLKtUsy9Um6bCbSz/fRI8K/ZFlVLjiIQkMW+WX0Q==}
+  '@sentry-internal/replay-canvas@10.27.0':
+    resolution: {integrity: sha512-inhsRYSVBpu3BI1kZphXj6uB59baJpYdyHeIPCiTfdFNBE5tngNH0HS/aedZ1g9zICw290lwvpuyrWJqp4VBng==}
     engines: {node: '>=18'}
 
-  '@sentry-internal/replay@10.24.0':
-    resolution: {integrity: sha512-xqSw3sCu5yxDQFpo/42t1zzxe+6kn542DRwHNBqIBd0CWN7un/j5YIW1Sq/+TdHYGbeG8LzD5UOuvZsT4zF2nQ==}
+  '@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.24.0':
-    resolution: {integrity: sha512-kKSNYupPIIk02+4OVR13qpJ8/uzsf6SrCzgxr6EvdK8qEuGYLJyM6lLJze/C5BZTSsam6UGAfahrSI1K5il8oQ==}
+  '@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.1':
-    resolution: {integrity: sha512-4olophuk8VHSeybiyBVgGaYpM/4+V6Ex0jsS/P6cv6ilZ3VPK6PomuOPmdW7VP29tQHstZu/Xb3tAIDXelwjpA==}
+  '@sentry/cli-darwin@2.58.2':
+    resolution: {integrity: sha512-MArsb3zLhA2/cbd4rTm09SmTpnEuZCoZOpuZYkrpDw1qzBVJmRFA1W1hGAQ9puzBIk/ubY3EUhhzuU3zN2uD6w==}
     engines: {node: '>=10'}
     os: [darwin]
 
-  '@sentry/cli-linux-arm64@2.58.1':
-    resolution: {integrity: sha512-WIfXiyZkDH6Jdm1KsxJmvqh6WjENklyzprffdUmaNQ98p+cfBTDGWOlk9MM1EE4yryump22LQSeVC8hJrzI7vA==}
+  '@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.1':
-    resolution: {integrity: sha512-R4Tyw9yYgnf6MOrw47ad8jf2gHk/BOtOOeyyjQw/7taTVZf2r97S35WhZh1kRecxhJh/A6Cwylq+SxbeFiMYww==}
+  '@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.1':
-    resolution: {integrity: sha512-I1CjUoNYYFfeUtwI2CubNQCBJtlVEs0/BhBhU4qF/4q4JlUDBgl6mJv6M2C03/zTyqP8StuRxSKkzJa301MC3Q==}
+  '@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.1':
-    resolution: {integrity: sha512-2jR/4I8GXyhiA2eutqToZrGSBIxfagxAZXMeCEye2MSJIRfOwc8Yz49FYtP3EtWqByE6f5Smfjk52tjPCNc32w==}
+  '@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.1':
-    resolution: {integrity: sha512-NKrLuHhgRcfD19y04EGY9WMSXhrqf3QQKn9MHfre4vN1UaEqpNX2adkPim94BRLzEDtFiNSZfTqHrEbou/Nxpw==}
+  '@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.1':
-    resolution: {integrity: sha512-Y64LJ4jD3WpWSR6cHif514EHWpGVY76qYAGawGJlQ+7EHuPyPOwNy9qVf/1dKwTD8KNDd8goDh4VXOoYsbic7A==}
+  '@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.1':
-    resolution: {integrity: sha512-Rc/kBryZeTAsgb0o5ygU9LaNNmzaAcitY5jfHToBBaYemciJzhpVVtSEPe6SJw1DT45MIW1PVD4XBx+YXO56Ag==}
+  '@sentry/cli-win32-x64@2.58.2':
+    resolution: {integrity: sha512-2NAFs9UxVbRztQbgJSP5i8TB9eJQ7xraciwj/93djrSMHSEbJ0vC47TME0iifgvhlHMs5vqETOKJtfbbpQAQFA==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [win32]
 
-  '@sentry/cli@2.58.1':
-    resolution: {integrity: sha512-yva4lLFvrPmqIgjbHy73vUfm8qOfLZkYGj5FyWQXCdjTV3s2HirQV1QW4Ezm4QeT8Ktu1jj14sluLELABGCvZg==}
+  '@sentry/cli@2.58.2':
+    resolution: {integrity: sha512-U4u62V4vaTWF+o40Mih8aOpQKqKUbZQt9A3LorIJwaE3tO3XFLRI70eWtW2se1Qmy0RZ74zB14nYcFNFl2t4Rw==}
     engines: {node: '>= 10'}
     hasBin: true
 
-  '@sentry/core@10.24.0':
-    resolution: {integrity: sha512-apJ1NtCK/Kt5uTytee+4rhhcTm4u3+z0bESH8GNMXMcuJ/A3Rvy3HUh+gqCx4BTOR0Sa44dbMvJcm/ewO+mzVg==}
+  '@sentry/core@10.27.0':
+    resolution: {integrity: sha512-Zc68kdH7tWTDtDbV1zWIbo3Jv0fHAU2NsF5aD2qamypKgfSIMSbWVxd22qZyDBkaX8gWIPm/0Sgx6aRXRBXrYQ==}
     engines: {node: '>=18'}
 
-  '@sentry/node-core@10.24.0':
-    resolution: {integrity: sha512-OTvJSrPstEc0NydMDpdmyYeuOcOQxZ0ZT8rmdKkrw4odYs56pYS4euMHNler8Tw9j8mZxqyI/wjzl//xGI+F0w==}
+  '@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
-      '@opentelemetry/core': ^1.30.1 || ^2.1.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
-      '@opentelemetry/sdk-trace-base': ^1.30.1 || ^2.1.0
+      '@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.24.0':
-    resolution: {integrity: sha512-OsyMzemG+a1QHe9BXDduA0bL4r5dlViOpIocSL3atPNupYTxoSZqOP/wFwqTGE+M/2oIv0/VIIWoXJUd8BLUAg==}
+  '@sentry/node@10.27.0':
+    resolution: {integrity: sha512-1cQZ4+QqV9juW64Jku1SMSz+PoZV+J59lotz4oYFvCNYzex8hRAnDKvNiKW1IVg5mEEkz98mg1fvcUtiw7GTiQ==}
     engines: {node: '>=18'}
 
-  '@sentry/opentelemetry@10.24.0':
-    resolution: {integrity: sha512-yOqeAUTnikx1eG8XMWvY4FWEU/aBp24sKlejxE0k7jmw5X2vCBd+4FUgDAwKsHwvEGOeD2XVfMqgLYjrNkm+Vg==}
+  '@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
-      '@opentelemetry/core': ^1.30.1 || ^2.1.0
-      '@opentelemetry/sdk-trace-base': ^1.30.1 || ^2.1.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.24.0':
-    resolution: {integrity: sha512-2TNwG0/mnArV8k2dV32qwzAt6md36BNeZB01DsPPRzos55oCMZDKG9kkI3pnIC1QUAKLUIVGt4AxS6naVNnWVw==}
+  '@sentry/profiling-node@10.27.0':
+    resolution: {integrity: sha512-IMUdgNaiT7aji6/VDF5F1noY8LPpF3yFD6BjomQz72h0KeUrN/88S5MZNjcY7ZpW7wvI2yahUDLkMk11ScSMXQ==}
     engines: {node: '>=18'}
     hasBin: true
 
-  '@sentry/react-router@10.24.0':
-    resolution: {integrity: sha512-9H06C+4qnnrJnd/pcBWFlXJEewG7zUG8B6PQML/6QGkr738L5dSrSRj9fSTQxcooFxTUZ9Pog1x+Vq9Cp/cpGQ==}
+  '@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.24.0':
-    resolution: {integrity: sha512-HW83v7LC5E06H/cYtU4fnlOV5fykNl5QkrOoZzKrYfAUCh4T11gjd4RvlvI+WaXb6nhD+gW2YLu95iIRHid/TA==}
+  '@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
@@ -3135,6 +3277,9 @@ packages:
     resolution: {integrity: sha512-fMR2d+EHwbzBa0S1fp45SNUTProxmyFBp+DeBWWQOSP9IU6AH6ea2rqrpMAnp/skkcdW4z4LSRrOEpMZ5rWXLw==}
     engines: {node: '>= 14'}
 
+  '@standard-schema/spec@1.0.0':
+    resolution: {integrity: sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==}
+
   '@storybook/addon-actions@8.6.14':
     resolution: {integrity: sha512-mDQxylxGGCQSK7tJPkD144J8jWh9IU9ziJMHfB84PKpI/V5ZgqMDnpr2bssTrUaGDqU5e1/z8KcRF+Melhs9pQ==}
     peerDependencies:
@@ -3270,14 +3415,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:
@@ -3483,19 +3620,99 @@ packages:
   '@swc/helpers@0.5.17':
     resolution: {integrity: sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==}
 
-  '@swc/helpers@0.5.5':
-    resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
-
   '@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]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.17':
+    resolution: {integrity: sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.17':
+    resolution: {integrity: sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.17':
+    resolution: {integrity: sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@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'
 
@@ -3548,8 +3765,8 @@ packages:
     peerDependencies:
       '@tiptap/pm': ^2.7.0
 
-  '@tiptap/extension-blockquote@2.26.2':
-    resolution: {integrity: sha512-SQNMX2rkWdAOYT6pM9KZ4bZK07YiCqX6wkHiKbLSZ8GMLi35dhkiSBxvY2I72q5ucIjgC9asGf8knA/2fbVypA==}
+  '@tiptap/extension-blockquote@2.26.1':
+    resolution: {integrity: sha512-viQ6AHRhjCYYipKK6ZepBzwZpkuMvO9yhRHeUZDvlSOAh8rvsUTSre0y74nu8QRYUt4a44lJJ6BpphJK7bEgYA==}
     peerDependencies:
       '@tiptap/core': ^2.7.0
 
@@ -3586,15 +3803,15 @@ packages:
     peerDependencies:
       '@tiptap/core': ^2.7.0
 
-  '@tiptap/extension-collaboration@2.26.2':
-    resolution: {integrity: sha512-kvlzKnkhH57YgpuDIOu/h9iOuoIRZf8Bc+yAy/ldbCz9EnT8/k4BMaixb98lrYExaQfozGxuAAOZmK0sR95j4Q==}
+  '@tiptap/extension-collaboration@2.26.1':
+    resolution: {integrity: sha512-ozCrGW5IAzi/18Ngdi0v/Q175D7J3ZGoTffDDyPxnTK/oksfROajoe+ZIEgoDGXPeI/I7TTlTONuqQ6LZT5r7Q==}
     peerDependencies:
       '@tiptap/core': ^2.7.0
       '@tiptap/pm': ^2.7.0
       y-prosemirror: ^1.2.11
 
-  '@tiptap/extension-document@2.26.2':
-    resolution: {integrity: sha512-s0/P3A8zxWL/h3e20xWMTT/rcwD0+57I6mT9JgNBPtvhPePy8d698G6/qFK+x+GdIyjJylfsq2BrSE9H+QhIBg==}
+  '@tiptap/extension-document@2.26.1':
+    resolution: {integrity: sha512-2P2IZp1NRAE+21mRuFBiP3X2WKfZ6kUC23NJKpn8bcOamY3obYqCt0ltGPhE4eR8n8QAl2fI/3jIgjR07dC8ow==}
     peerDependencies:
       '@tiptap/core': ^2.7.0
 
@@ -3604,8 +3821,8 @@ packages:
       '@tiptap/core': ^2.7.0
       '@tiptap/pm': ^2.7.0
 
-  '@tiptap/extension-emoji@2.26.2':
-    resolution: {integrity: sha512-NeYU3H2arrjx7fFPnWl4IqjTMID8k5BKyDRgWarKQ1ApJpeq+8EzTGIffflHNcrIiZxezTtx4anhsC1NL+/Gdw==}
+  '@tiptap/extension-emoji@2.26.1':
+    resolution: {integrity: sha512-CtK10GF80Qr4lgJ7P6W6tVThOjpq1lh8oyoBospZ+CjD4GYcY73bdl+FP0uxhZdJsMHzaqzMP5wWQ54zHsIaIg==}
     peerDependencies:
       '@tiptap/core': ^2.7.0
       '@tiptap/pm': ^2.7.0
@@ -3628,8 +3845,8 @@ packages:
     peerDependencies:
       '@tiptap/core': ^2.7.0
 
-  '@tiptap/extension-heading@2.26.2':
-    resolution: {integrity: sha512-0VAr1l1QKFJ0B2l4D4wV0LRlyFYeJt0S09mz+HPF2TqKF4twmPjaGD6o5zzXWl8c4cQj1CmM8P+9an3SKRjOaA==}
+  '@tiptap/extension-heading@2.26.1':
+    resolution: {integrity: sha512-KSzL8WZV3pjJG9ke4RaU70+B5UlYR2S6olNt5UCAawM+fi11mobVztiBoC19xtpSVqIXC1AmXOqUgnuSvmE4ZA==}
     peerDependencies:
       '@tiptap/core': ^2.7.0
 
@@ -3645,8 +3862,8 @@ packages:
       '@tiptap/core': ^2.7.0
       '@tiptap/pm': ^2.7.0
 
-  '@tiptap/extension-image@2.26.2':
-    resolution: {integrity: sha512-3gK+ETLiWGAUdyPDXDheNJ38OgQabSzZJ+1nQo9KWjI7P3LQ7/ctxLtT+hAFpxX0qMK4bnu5vZaItSXxE3ZtpQ==}
+  '@tiptap/extension-image@2.26.1':
+    resolution: {integrity: sha512-96+MaYBJebQlR/ik5W72GLUfXdEoxFs+6jsoERxbM5qEdhb7TEnodBFtWZOwgDO27kFd6rSNZuW9r5KJNtljEg==}
     peerDependencies:
       '@tiptap/core': ^2.7.0
 
@@ -3655,13 +3872,13 @@ packages:
     peerDependencies:
       '@tiptap/core': ^2.7.0
 
-  '@tiptap/extension-list-item@2.26.2':
-    resolution: {integrity: sha512-T1dFfx1JjRRX0iyStSTwMNajMyT+OE7XEggn+DON1g+zbgA+4cJ11WQpfrfA9VM2H5QWYyKGfHFigoFcJ8rjog==}
+  '@tiptap/extension-list-item@2.26.1':
+    resolution: {integrity: sha512-quOXckC73Luc3x+Dcm88YAEBW+Crh3x5uvtQOQtn2GEG91AshrvbnhGRiYnfvEN7UhWIS+FYI5liHFcRKSUKrQ==}
     peerDependencies:
       '@tiptap/core': ^2.7.0
 
-  '@tiptap/extension-mention@2.26.2':
-    resolution: {integrity: sha512-fezYJQlewhfaIXBQ85LTDRBMsWfynb9xSsEYC8EeRhbwI5fFlWKEAi876oQiSqqJTg6NV/pda9dUn+wZkV7U4w==}
+  '@tiptap/extension-mention@2.26.1':
+    resolution: {integrity: sha512-sBrlJ9nWjFx7oWCtt0hV192FgCBXva1zwImWbgXTCGPAjv0d5EoPymIfRgoeanAmuQjOHoKzzZnJ6bELTZhkGw==}
     peerDependencies:
       '@tiptap/core': ^2.7.0
       '@tiptap/pm': ^2.7.0
@@ -3688,34 +3905,34 @@ packages:
     peerDependencies:
       '@tiptap/core': ^2.7.0
 
-  '@tiptap/extension-task-item@2.26.2':
-    resolution: {integrity: sha512-KFfl9QraNldIR9ayP7t+b69BvjmdGeE9Mr+u/6h6jOmUVFpnES45geuEBSYuWWpK4EeD3ZUKXo7WGEWnTLSyfQ==}
+  '@tiptap/extension-task-item@2.26.1':
+    resolution: {integrity: sha512-b7JNeOsBqEd1p2oQ5N6Msz9fr2o73WR1WsYDC0WhECg07Goud2gQEkwWkQaLsvfcwuS746eMJK/nrT2pVEngYA==}
     peerDependencies:
       '@tiptap/core': ^2.7.0
       '@tiptap/pm': ^2.7.0
 
-  '@tiptap/extension-task-list@2.26.2':
-    resolution: {integrity: sha512-mQdB0BVULJiiFPGdst4JbQPm/ZGZMIeYafVu6iGSMYxdP4piMvMbY4txtLV8zN8oUEAO5zooiXXbS3OFFBDZyQ==}
+  '@tiptap/extension-task-list@2.26.1':
+    resolution: {integrity: sha512-xR4LMpMPZ6bpkZNmFvIojmNGtdGKNlKFbpvyIOgs4qhlWskbFQQVevglHjV1R8xJLic5c+byJQaAmQdQudqGng==}
     peerDependencies:
       '@tiptap/core': ^2.7.0
 
-  '@tiptap/extension-text-align@2.26.2':
-    resolution: {integrity: sha512-fra+weXocCINVPGjykteTiQ+p34POSWyxw+Y+KFBegw24uecHhB5NCK6aXa68tvEMLC9EdvZRHuoKRfkxBQ9rw==}
+  '@tiptap/extension-text-align@2.26.1':
+    resolution: {integrity: sha512-x6mpNGELy2QtSPBoQqNgiXO9PjZoB+O2EAfXA9YRiBDSIRNOrw+7vOVpi+IgzswFmhMNgIYUVfQRud4FHUCNew==}
     peerDependencies:
       '@tiptap/core': ^2.7.0
 
-  '@tiptap/extension-text-style@2.26.2':
-    resolution: {integrity: sha512-rNkV3dgT3nTISEf3Ax/DdqQsSy9p46n2fOBkD8FCtdrwsWNH5N4uUh4jI/q0exYKJUyZGvl60uXwCkZiQ3pVBA==}
+  '@tiptap/extension-text-style@2.26.1':
+    resolution: {integrity: sha512-t9Nc/UkrbCfnSHEUi1gvUQ2ZPzvfdYFT5TExoV2DTiUCkhG6+mecT5bTVFGW3QkPmbToL+nFhGn4ZRMDD0SP3Q==}
     peerDependencies:
       '@tiptap/core': ^2.7.0
 
-  '@tiptap/extension-text@2.26.2':
-    resolution: {integrity: sha512-Rb8Le/Li+EixQNc/pGkEJpLjozTjWYP9glaYfnjPtRVw4tHcd7khVm5mer0TQjonbBUjVC1zSuXv9gifXOv6DQ==}
+  '@tiptap/extension-text@2.26.1':
+    resolution: {integrity: sha512-p2n8WVMd/2vckdJlol24acaTDIZAhI7qle5cM75bn01sOEZoFlSw6SwINOULrUCzNJsYb43qrLEibZb4j2LeQw==}
     peerDependencies:
       '@tiptap/core': ^2.7.0
 
-  '@tiptap/extension-underline@2.26.2':
-    resolution: {integrity: sha512-kpKJSfsn1+b8l96YPg2GRn3aaN78pLqSeyzfA5FYVbN0lyptbqRVOrNM8p3n6l0LbAkiEjc/TgOMwNNEL93kyA==}
+  '@tiptap/extension-underline@2.26.1':
+    resolution: {integrity: sha512-/fufv41WDMdf0a4xmFAxONoAz08TonJXX6NEoSJmuGKO59M/Y0Pz8DTK1g32Wk44kn7dyScDiPlvvndl+UOv0A==}
     peerDependencies:
       '@tiptap/core': ^2.7.0
 
@@ -3725,14 +3942,14 @@ packages:
       '@tiptap/core': ^2.7.0
       '@tiptap/pm': ^2.7.0
 
-  '@tiptap/pm@2.26.3':
-    resolution: {integrity: sha512-8gUmdxWlUevmgq2mNvGxvf2CpDW097tVKECMWKEn8sf846kXv3CoqaGRhI3db4kfR+09uWZeRM7rtrjRBmUThg==}
+  '@tiptap/pm@2.26.1':
+    resolution: {integrity: sha512-8aF+mY/vSHbGFqyG663ds84b+vca5Lge3tHdTMTKazxCnhXR9dn2oQJMnZ78YZvdRbkPkMJJHti9h3K7u2UQvw==}
 
   '@tiptap/pm@3.6.6':
     resolution: {integrity: sha512-E/rtpPEqPiQJrchdOUDcMPR69x96a+JeMWLL12fos4KfF7YVzQ5oUIij21RffV+qeHxug7HMUpQKBtCuJfek/Q==}
 
-  '@tiptap/react@2.26.2':
-    resolution: {integrity: sha512-p7jv0sltCC2L4iHIVNthtjv/CIxajOalb7ytjLx6ijx5q2J564VIny0U7O33Ymbo2cV0dJoB+Bo5aeaJ5SfHGg==}
+  '@tiptap/react@2.26.1':
+    resolution: {integrity: sha512-Zxlwzi1iML7aELa+PyysFD2ncVo2mEcjTkhoDok9iTbMGpm1oU8hgR1i6iHrcSNQLfaRiW6M7HNhZZQPKIC9yw==}
     peerDependencies:
       '@tiptap/core': ^2.7.0
       '@tiptap/pm': ^2.7.0
@@ -3742,8 +3959,8 @@ packages:
   '@tiptap/starter-kit@2.26.1':
     resolution: {integrity: sha512-oziMGCds8SVQ3s5dRpBxVdEKZAmO/O//BjZ69mhA3q4vJdR0rnfLb5fTxSeQvHiqB878HBNn76kNaJrHrV35GA==}
 
-  '@tiptap/suggestion@2.26.2':
-    resolution: {integrity: sha512-BtigI3xOJQbdNh2OeKN5wQDI/EPGN4GXdpoMHhENZeXKrX6PvWNaqjyLVsV3QiLgv6P352nZWcgo51wPXY2JgQ==}
+  '@tiptap/suggestion@2.26.1':
+    resolution: {integrity: sha512-iNWJdQN7h01keNoVwyCsdI7ZX11YkrexZjCnutWK17Dd72s3NYVTmQXu7saftwddT4nDdlczNxAFosrt0zMhcg==}
     peerDependencies:
       '@tiptap/core': ^2.7.0
       '@tiptap/pm': ^2.7.0
@@ -3779,6 +3996,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==}
 
@@ -3860,6 +4080,9 @@ packages:
   '@types/http-errors@2.0.5':
     resolution: {integrity: sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==}
 
+  '@types/jscodeshift@17.3.0':
+    resolution: {integrity: sha512-ogvGG8VQQqAQQ096uRh+d6tBHrYuZjsumHirKtvBa5qEyTMN3IQJ7apo+sw9lxaB/iKWIhbbLlF3zmAWk9XQIg==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -3887,6 +4110,9 @@ packages:
   '@types/mdast@3.0.15':
     resolution: {integrity: sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==}
 
+  '@types/mdast@4.0.4':
+    resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
+
   '@types/mdurl@1.0.5':
     resolution: {integrity: sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA==}
 
@@ -3914,8 +4140,8 @@ packages:
   '@types/pg-pool@2.0.6':
     resolution: {integrity: sha512-TaAUE5rq2VQYxab5Ts7WZhKNmuN78Q6PiFonTDdpbx8a1H0M1vhy3rhiMjl+e2iHmogyMw7jZF4FrE6eJUy5HQ==}
 
-  '@types/pg@8.15.5':
-    resolution: {integrity: sha512-LF7lF6zWEKxuT3/OR8wAZGzkg4ENGXFNyiV/JeOt9z5B+0ZVwbql9McqX5c/WStFq1GaGso7H1AzP/qSzmlCKQ==}
+  '@types/pg@8.15.6':
+    resolution: {integrity: sha512-NoaMtzhxOrubeL/7UZuNTrejB4MPAJ0RpxZqXQf2qXuVlTPuG6Y8p4u9dKRaue4yjmC7ZhzVO2/Yyyn25znrPQ==}
 
   '@types/prop-types@15.7.15':
     resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
@@ -3945,6 +4171,9 @@ packages:
   '@types/resolve@1.20.6':
     resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==}
 
+  '@types/sanitize-html@2.16.0':
+    resolution: {integrity: sha512-l6rX1MUXje5ztPT0cAFtUayXF06DqPhRyfVXareEN5gGCFaP/iwsxIyKODr9XDhfxPpN6vXUFNfo5kZMXCxBtw==}
+
   '@types/semver@7.7.1':
     resolution: {integrity: sha512-FmgJfu+MOcQ370SD0ev7EI8TlCAfKYU+B4m5T3yXc1CiRN94g/SZPtsCkk506aUDtlMnFZvasDwHHUcZUEaYuA==}
 
@@ -3954,9 +4183,6 @@ packages:
   '@types/serve-static@1.15.8':
     resolution: {integrity: sha512-roei0UY3LhpOJvjbIP6ZZFngyLKl5dskOtDhxY5THRSpO+ZI+nzJ+m5yUMzGrp89YRa7lvknKkMYjqQFGwA7Sg==}
 
-  '@types/shimmer@1.2.0':
-    resolution: {integrity: sha512-UE7oxhQLLd9gub6JKIAhDq06T0F6FnztwMNRvYgjeQSBeMc1ZG/tA47EwfduvkuQS8apbkM/lpLpWsaCeYsXVg==}
-
   '@types/tedious@4.0.14':
     resolution: {integrity: sha512-KHPsfX/FoVbUGbyYvk1q9MMQHLPeRZhRJZdO45Q4YjvFkv4hMNghCWTvy7rdKessBsmtz4euWCWAB6/tVpI1Iw==}
 
@@ -3981,63 +4207,100 @@ packages:
   '@types/ws@8.18.1':
     resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
 
-  '@typescript-eslint/eslint-plugin@8.45.0':
-    resolution: {integrity: sha512-HC3y9CVuevvWCl/oyZuI47dOeDF9ztdMEfMH8/DW/Mhwa9cCLnK1oD7JoTVGW/u7kFzNZUKUoyJEqkaJh5y3Wg==}
+  '@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.45.0
+      '@typescript-eslint/parser': ^8.48.1
       eslint: ^8.57.0 || ^9.0.0
       typescript: 5.8.3
 
-  '@typescript-eslint/parser@8.45.0':
-    resolution: {integrity: sha512-TGf22kon8KW+DeKaUmOibKWktRY8b2NSAZNdtWh798COm1NWx8+xJ6iFBtk3IvLdv6+LGLJLRlyhrhEDZWargQ==}
+  '@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.45.0':
-    resolution: {integrity: sha512-3pcVHwMG/iA8afdGLMuTibGR7pDsn9RjDev6CCB+naRsSYs2pns5QbinF4Xqw6YC/Sj3lMrm/Im0eMfaa61WUg==}
+  '@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/scope-manager@8.45.0':
-    resolution: {integrity: sha512-clmm8XSNj/1dGvJeO6VGH7EUSeA0FMs+5au/u3lrA3KfG8iJ4u8ym9/j2tTEoacAffdW1TVUzXO30W1JTJS7dA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@typescript-eslint/tsconfig-utils@8.45.0':
-    resolution: {integrity: sha512-aFdr+c37sc+jqNMGhH+ajxPXwjv9UtFZk79k8pLoJ6p4y0snmYpPA52GuWHgt2ZF4gRRW6odsEj41uZLojDt5w==}
+  '@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/type-utils@8.45.0':
-    resolution: {integrity: sha512-bpjepLlHceKgyMEPglAeULX1vixJDgaKocp0RVJ5u4wLJIMNuKtUXIczpJCPcn2waII0yuvks/5m5/h3ZQKs0A==}
+  '@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.45.0':
-    resolution: {integrity: sha512-WugXLuOIq67BMgQInIxxnsSyRLFxdkJEJu8r4ngLR56q/4Q5LrbfkFRH27vMTjxEK8Pyz7QfzuZe/G15qQnVRA==}
+  '@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/typescript-estree@8.45.0':
-    resolution: {integrity: sha512-GfE1NfVbLam6XQ0LcERKwdTTPlLvHvXXhOeUGC1OXi4eQBoyy1iVsW+uzJ/J9jtCz6/7GCQ9MtrQ0fml/jWCnA==}
+  '@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/utils@8.45.0':
-    resolution: {integrity: sha512-bxi1ht+tLYg4+XV2knz/F7RVhU0k6VrSMc9sb8DQ6fyCTrGQLHfo7lDtN0QJjZjKkLA2ThrKuCdHEvLReqtIGg==}
+  '@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/visitor-keys@8.45.0':
-    resolution: {integrity: sha512-qsaFBA3e09MIDAGFUrTk+dzqtfv1XPVz8t8d1f0ybTzrCY7BKiMC5cjrl1O/P7UmHsNyW90EYSkU/ZWpmXelag==}
+  '@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':
@@ -4138,12 +4401,28 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@vitest/eslint-plugin@1.5.1':
+    resolution: {integrity: sha512-t49CNERe/YadnLn90NTTKJLKzs99xBkXElcoUTLodG6j1G0Q7jy3mXqqiHd3N5aryG2KkgOg4UAoGwgwSrZqKQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      eslint: '>=8.57.0'
+      typescript: 5.8.3
+      vitest: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+      vitest:
+        optional: true
+
   '@vitest/expect@2.0.5':
     resolution: {integrity: sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==}
 
   '@vitest/expect@3.2.4':
     resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
 
+  '@vitest/expect@4.0.15':
+    resolution: {integrity: sha512-Gfyva9/GxPAWXIWjyGDli9O+waHDC0Q0jaLdFP1qPAUUfo1FEXPXUfUkp3eZA0sSq340vPycSyOlYUeM15Ft1w==}
+
   '@vitest/mocker@3.2.4':
     resolution: {integrity: sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==}
     peerDependencies:
@@ -4155,6 +4434,17 @@ packages:
       vite:
         optional: true
 
+  '@vitest/mocker@4.0.15':
+    resolution: {integrity: sha512-CZ28GLfOEIFkvCFngN8Sfx5h+Se0zN+h4B7yOsPVCcgtiO7t5jt9xQh2E1UkFep+eb9fjyMfuC5gBypwb07fvQ==}
+    peerDependencies:
+      msw: ^2.4.9
+      vite: 7.1.11
+    peerDependenciesMeta:
+      msw:
+        optional: true
+      vite:
+        optional: true
+
   '@vitest/pretty-format@2.0.5':
     resolution: {integrity: sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==}
 
@@ -4164,12 +4454,24 @@ packages:
   '@vitest/pretty-format@3.2.4':
     resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==}
 
+  '@vitest/pretty-format@4.0.15':
+    resolution: {integrity: sha512-SWdqR8vEv83WtZcrfLNqlqeQXlQLh2iilO1Wk1gv4eiHKjEzvgHb2OVc3mIPyhZE6F+CtfYjNlDJwP5MN6Km7A==}
+
+  '@vitest/runner@4.0.15':
+    resolution: {integrity: sha512-+A+yMY8dGixUhHmNdPUxOh0la6uVzun86vAbuMT3hIDxMrAOmn5ILBHm8ajrqHE0t8R9T1dGnde1A5DTnmi3qw==}
+
+  '@vitest/snapshot@4.0.15':
+    resolution: {integrity: sha512-A7Ob8EdFZJIBjLjeO0DZF4lqR6U7Ydi5/5LIZ0xcI+23lYlsYJAfGn8PrIWTYdZQRNnSRlzhg0zyGu37mVdy5g==}
+
   '@vitest/spy@2.0.5':
     resolution: {integrity: sha512-c/jdthAhvJdpfVuaexSrnawxZz6pywlTPe84LUB2m/4t3rl2fTo9NFGBG4oWgaD+FTgDDV8hJ/nibT7IfH3JfA==}
 
   '@vitest/spy@3.2.4':
     resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==}
 
+  '@vitest/spy@4.0.15':
+    resolution: {integrity: sha512-+EIjOJmnY6mIfdXtE/bnozKEvTC4Uczg19yeZ2vtCz5Yyb0QQ31QWVQ8hswJ3Ysx/K2EqaNsVanjr//2+P3FHw==}
+
   '@vitest/utils@2.0.5':
     resolution: {integrity: sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==}
 
@@ -4179,6 +4481,9 @@ packages:
   '@vitest/utils@3.2.4':
     resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==}
 
+  '@vitest/utils@4.0.15':
+    resolution: {integrity: sha512-HXjPW2w5dxhTD0dLwtYHDnelK3j8sR8cWIaLxr22evTyY6q8pRCjZSmhRWVjBaOVXChQd6AwMzi9pucorXCPZA==}
+
   '@webassemblyjs/ast@1.14.1':
     resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
 
@@ -4265,6 +4570,10 @@ packages:
     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'}
+
   ajv-formats@2.1.1:
     resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
     peerDependencies:
@@ -4295,6 +4604,10 @@ packages:
   ansi-align@3.0.1:
     resolution: {integrity: sha512-IOfwwBF5iczOjp/WeY4YxyjqAFMQoZufdQWDd19SEExbVLNXqvpzSJ/M7Za4/sCPmQ0+GRquoA7bGcINcxew6w==}
 
+  ansi-escapes@7.0.0:
+    resolution: {integrity: sha512-GdYO7a61mR0fOlAsvC9/rIHf7L96sBc6dEWzeOu+KAea5bZyQRPIpojrVoI4AXGJS/ycu/fBTdLrUkA4ODrvjw==}
+    engines: {node: '>=18'}
+
   ansi-html-community@0.0.8:
     resolution: {integrity: sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==}
     engines: {'0': node >= 0.8.0}
@@ -4328,9 +4641,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'}
@@ -4394,13 +4704,17 @@ packages:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
-  ast-kit@2.1.2:
-    resolution: {integrity: sha512-cl76xfBQM6pztbrFWRnxbrDm9EOqDr1BF6+qQnnDZG2Co2LjyUktkN9GTJfBAfdae+DbT2nJf2nCGAdDDN7W2g==}
-    engines: {node: '>=20.18.0'}
+  ast-kit@2.2.0:
+    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'}
+
   ast-types@0.16.1:
     resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
     engines: {node: '>=4'}
@@ -4489,8 +4803,8 @@ packages:
   bind-event-listener@3.0.0:
     resolution: {integrity: sha512-PJvH288AWQhKs2v9zyfYdPzlPqf5bXbGMmhmUIY9x4dAUGIWgomO771oBQNwJnMQSnUIXhKu6sgzpBRXTlvb8Q==}
 
-  birpc@2.6.1:
-    resolution: {integrity: sha512-LPnFhlDpdSH6FJhJyn4M0kFO7vtQ5iPw24FnG0y21q09xC7e8+1LeR31S1MAIrDAHp4m7aas4bEkTDTvMAtebQ==}
+  birpc@2.9.0:
+    resolution: {integrity: sha512-KrayHS5pBi69Xi9JmvoqrIgYGDkD6mcSe/i6YKi3w5kekCLzrX4+nawcXqrj2tIp50Kw/mT/s3p+GVK0A0sKxw==}
 
   bluebird@3.7.2:
     resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==}
@@ -4533,10 +4847,6 @@ packages:
   buffer@6.0.3:
     resolution: {integrity: sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==}
 
-  busboy@1.6.0:
-    resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
-    engines: {node: '>=10.16.0'}
-
   bytes@3.0.0:
     resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==}
     engines: {node: '>= 0.8'}
@@ -4568,16 +4878,12 @@ 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'}
 
-  caniuse-lite@1.0.30001743:
-    resolution: {integrity: sha512-e6Ojr7RV14Un7dz6ASD0aZDmQPT/A+eZU+nuTNfjqmRrmkmQlnTNWH0SKmqagx9PeW87UVqapSurtAXifmtdmw==}
+  caniuse-lite@1.0.30001759:
+    resolution: {integrity: sha512-Pzfx9fOKoKvevQf8oCXoyNRQ5QyxJj+3O0Rqx2V5oxT61KGx8+n6hV/IUyJeifUci2clnmmKVpvtiqRzgiWjSw==}
 
   capital-case@1.0.4:
     resolution: {integrity: sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==}
@@ -4586,10 +4892,17 @@ packages:
     resolution: {integrity: sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==}
     engines: {node: '>=4'}
 
+  ccount@2.0.1:
+    resolution: {integrity: sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==}
+
   chai@5.3.3:
     resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
     engines: {node: '>=18'}
 
+  chai@6.2.1:
+    resolution: {integrity: sha512-p4Z49OGG5W/WBCPSS/dH3jQ73kD6tiMmUM+bckNK6Jr5JHMG3k9bg/BvKR8lKmtVBKmOiuVaV2ws8s9oSbwysg==}
+    engines: {node: '>=18'}
+
   chalk-template@0.4.0:
     resolution: {integrity: sha512-/ghrgmhfY8RaSdeo43hNXxpoHAtxdbskUHjPpfqUWGttFgycUhYPGx3YZBCnUCvOa7Doivn1IZec3DEGFoMgLg==}
     engines: {node: '>=12'}
@@ -4613,6 +4926,12 @@ packages:
   change-case@4.1.2:
     resolution: {integrity: sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==}
 
+  character-entities-html4@2.1.0:
+    resolution: {integrity: sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==}
+
+  character-entities-legacy@3.0.0:
+    resolution: {integrity: sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==}
+
   character-entities@2.0.2:
     resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
 
@@ -4624,6 +4943,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
@@ -4657,6 +4979,14 @@ packages:
     resolution: {integrity: sha512-/lzGpEWL/8PfI0BmBOPRwp0c/wFNX1RdUML3jK/RcSBA9T8mZDdQpqYBKtCFTOfQbwPqWEOpjqW+Fnayc0969g==}
     engines: {node: '>=10'}
 
+  cli-cursor@5.0.0:
+    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
+    engines: {node: '>=18'}
+
+  cli-truncate@5.1.1:
+    resolution: {integrity: sha512-SroPvNHxUnk+vIW/dOSfNqdy1sPEFkrTk6TUtqLCnBlo3N7TNYYkzzN7uSD6+jVjrdO4+p8nH7JzH6cIvUem6A==}
+    engines: {node: '>=20'}
+
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
@@ -4668,6 +4998,10 @@ packages:
     resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
     engines: {node: '>=12'}
 
+  clone-deep@4.0.1:
+    resolution: {integrity: sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==}
+    engines: {node: '>=6'}
+
   clone@2.1.2:
     resolution: {integrity: sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==}
     engines: {node: '>=0.8'}
@@ -4725,13 +5059,13 @@ packages:
     resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
     engines: {node: '>=16'}
 
+  commander@14.0.2:
+    resolution: {integrity: sha512-TywoWNNRbhoD0BXs1P3ZEScW8W5iKrnbithIl0YH+uCmBd0QpPOA8yc82DS3BIE5Ma6FnBVUsJ7wVUDz4dvOWQ==}
+    engines: {node: '>=20'}
+
   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'}
@@ -4768,9 +5102,6 @@ packages:
     resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
     engines: {node: '>= 0.6'}
 
-  convert-source-map@1.9.0:
-    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
-
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -4846,6 +5177,10 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  cssstyle@4.6.0:
+    resolution: {integrity: sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==}
+    engines: {node: '>=18'}
+
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
@@ -4896,6 +5231,10 @@ packages:
   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'}
@@ -4951,8 +5290,8 @@ packages:
   dedent@0.7.0:
     resolution: {integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==}
 
-  dedent@1.7.0:
-    resolution: {integrity: sha512-HGFtf8yhuhGhqO07SV79tRp+br4MnbdjeVxotpn1QBl30pcLLCQjX5b2295ll0fv8RKDKsmWYrl05usHM9CewQ==}
+  dedent@1.6.0:
+    resolution: {integrity: sha512-F1Z+5UCFpmQUzJa11agbyPVMbpgT/qA3/SKyJ1jyBgm7dUcUEa8v9JwDkerSQXfakBwFljIxhOJqGkjUwZ9FSA==}
     peerDependencies:
       babel-plugin-macros: ^3.1.0
     peerDependenciesMeta:
@@ -5024,8 +5363,8 @@ packages:
     resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
 
-  detect-libc@2.1.0:
-    resolution: {integrity: sha512-vEtk+OcP7VBRtQZ1EJ3bdgzSfBjgnEalLTp5zjJrS+2Z1w2KZly4SBdac/WDU3hhsNAZ9E8SC96ME4Ey8MZ7cg==}
+  detect-libc@2.0.4:
+    resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
     engines: {node: '>=8'}
 
   detect-node-es@1.1.0:
@@ -5037,9 +5376,6 @@ 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==}
     engines: {node: '>=0.3.1'}
@@ -5048,9 +5384,6 @@ packages:
     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'}
@@ -5091,9 +5424,6 @@ packages:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
-  dompurify@3.2.7:
-    resolution: {integrity: sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==}
-
   domutils@2.8.0:
     resolution: {integrity: sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==}
 
@@ -5115,9 +5445,9 @@ packages:
     resolution: {integrity: sha512-kQhDYKZecqnM0fCnzI5eIv5L4cAe/iRI+HqMbO/hbRdTAeXDG+M9FjipUxNfbARuEg4iHIbhnhs78BCHNbSxEQ==}
     engines: {node: '>=12'}
 
-  dts-resolver@2.1.2:
-    resolution: {integrity: sha512-xeXHBQkn2ISSXxbJWD828PFjtyg+/UrMDo7W4Ffcs7+YWCquxU8YjV1KoxuiL+eJ5pg3ll+bC6flVv61L3LKZg==}
-    engines: {node: '>=20.18.0'}
+  dts-resolver@2.1.3:
+    resolution: {integrity: sha512-bihc7jPC90VrosXNzK0LTE2cuLP6jr0Ro8jk+kMugHReJVLIpHz/xadeq3MhuwyO4TD4OA3L1Q8pBBFRc08Tsw==}
+    engines: {node: '>=20.19.0'}
     peerDependencies:
       oxc-resolver: '>=11.0.0'
     peerDependenciesMeta:
@@ -5201,6 +5531,14 @@ packages:
     resolution: {integrity: sha512-BeJFvFRJddxobhvEdm5GqHzRV/X+ACeuw0/BuuxsCh1EUZcAIz8+kYmBp/LrQuloy6K1f3a0M7+IhmZ7QnkISA==}
     engines: {node: '>=0.12'}
 
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
+  environment@1.1.0:
+    resolution: {integrity: sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==}
+    engines: {node: '>=18'}
+
   err-code@2.0.3:
     resolution: {integrity: sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==}
 
@@ -5267,14 +5605,15 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
-  eslint-config-next@14.2.32:
-    resolution: {integrity: sha512-mP/NmYtDBsKlKIOBnH+CW+pYeyR3wBhE+26DAqQ0/aRtEBeTEjgY2wAFUugUELkTLmrX6PpuMSSTpOhz7j9kdQ==}
+  escape-string-regexp@5.0.0:
+    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: ^7.23.0 || ^8.0.0
-      typescript: 5.8.3
-    peerDependenciesMeta:
-      typescript:
-        optional: true
+      eslint: '>=6.0.0'
 
   eslint-config-prettier@10.1.8:
     resolution: {integrity: sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==}
@@ -5282,18 +5621,21 @@ packages:
     peerDependencies:
       eslint: '>=7.0.0'
 
-  eslint-config-turbo@2.5.8:
-    resolution: {integrity: sha512-wzxmN7dJNFGDwOvR/4j8U2iaIH/ruYez8qg/sCKrezJ3+ljbFMvJLmgKKt/1mDuyU9wj5aZqO6VijP3QH169FA==}
+  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:
-      eslint: '>6.6.0'
-      turbo: '>2.0.0'
+      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@3.10.1:
-    resolution: {integrity: sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==}
-    engines: {node: ^14.18.0 || >=16.0.0}
+  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: '*'
@@ -5325,6 +5667,12 @@ packages:
       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'}
@@ -5341,33 +5689,43 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
 
-  eslint-plugin-react-hooks@5.0.0-canary-7118f5dd7-20230705:
-    resolution: {integrity: sha512-AZYbMo/NW9chdL7vk6HQzQhT+PvTAEVqWk9ziruUoW2kAOcN5qNyelv70e0F1VNQAbvutOC9oc+xfWycI9FxDw==}
-    engines: {node: '>=10'}
+  eslint-plugin-n@17.23.1:
+    resolution: {integrity: sha512-68PealUpYoHOBh332JLLD9Sj7OQUDkFpmcfqt8R9sySfFSeuGJjMTJQvCRRB96zO3A/PELRLkPrzsHmzEFQQ5A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0
+      eslint: '>=8.23.0'
 
-  eslint-plugin-react-hooks@6.1.1:
-    resolution: {integrity: sha512-St9EKZzOAQF704nt2oJvAKZHjhrpg25ClQoaAlHmPZuajFldVLqRDW4VBNAS01NzeiQF0m0qhG1ZA807K6aVaQ==}
+  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@9.1.10:
-    resolution: {integrity: sha512-HAVQ9HTMydcFj5KjnzsETOwPe19eIViwRBhc47lvU04YEFTgEg2rlXN1xozxHUlQ+XkkoKYkIUYoqo7KgGhkIA==}
-    engines: {node: '>=20.0.0'}
+  eslint-plugin-storybook@10.1.4:
+    resolution: {integrity: sha512-itG2eLrWyuP5RGIL3TMGA5KSGoBOX3aTnQd43qLJu36ZMzd9H4RHN1I8WTVvyiaInppYJMGB4nnXzSdNXUUeTQ==}
     peerDependencies:
       eslint: '>=8'
-      storybook: ^9.1.10
+      storybook: ^10.1.4
 
-  eslint-plugin-turbo@2.5.8:
-    resolution: {integrity: sha512-bVjx4vTH0oTKIyQ7EGFAXnuhZMrKIfu17qlex/dps7eScPnGQLJ3r1/nFq80l8xA+8oYjsSirSQ2tXOKbz3kEw==}
+  eslint-plugin-turbo@2.6.3:
+    resolution: {integrity: sha512-91WZ+suhT/pk+qNS0/rqT43xLUlUblsa3a8jKmAStGhkJCmR2uX0oWo/e0Edb+It8MdnteXuYpCkvsK4Vw8FtA==}
     peerDependencies:
       eslint: '>6.6.0'
       turbo: '>2.0.0'
@@ -5376,9 +5734,9 @@ packages:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
 
-  eslint-scope@7.2.2:
-    resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.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==}
@@ -5388,15 +5746,19 @@ packages:
     resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  eslint@8.57.1:
-    resolution: {integrity: sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
+  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@9.6.1:
-    resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  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==}
@@ -5439,6 +5801,9 @@ packages:
   eventemitter3@4.0.7:
     resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
 
+  eventemitter3@5.0.1:
+    resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
+
   events@3.3.0:
     resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
     engines: {node: '>=0.8.x'}
@@ -5451,6 +5816,10 @@ packages:
     resolution: {integrity: sha512-eNTPlAD67BmP31LDINZ3U7HSF8l57TxOY2PmBJ1shpCvpnxBF93mWCE8YHBnXs8qiUZJc9WDcWIeC3a2HIAMfw==}
     engines: {node: '>=6'}
 
+  expect-type@1.3.0:
+    resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
+    engines: {node: '>=12.0.0'}
+
   export-to-csv@1.4.0:
     resolution: {integrity: sha512-6CX17Cu+rC2Fi2CyZ4CkgVG3hLl6BFsdAxfXiZkmDFIDY4mRx2y2spdeH6dqPHI9rP+AsHEfGeKz84Uuw7+Pmg==}
     engines: {node: ^v12.20.0 || >=v14.13.0}
@@ -5465,10 +5834,10 @@ packages:
     resolution: {integrity: sha512-0uvmuk61O9HXgLhGl3QhNSEtRsQevtmbL94/eILaliEADZBHZOQUAiHFrGPrgsjikohyrmSG5g+sCfASTt0lkQ==}
     engines: {node: '>=4.5.0'}
     peerDependencies:
-      express: ^4.0.0 || ^5.0.0-alpha.1
+      express: 4.22.0
 
-  express@4.21.2:
-    resolution: {integrity: sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==}
+  express@4.22.0:
+    resolution: {integrity: sha512-c2iPh3xp5vvCLgaHK03+mWLFPhox7j1LwyxcZwFVApEv5i0X+IjPpbT50SJJwwLpdBVfp45AkK/v+AFgv/XlfQ==}
     engines: {node: '>= 0.10.0'}
 
   extend@3.0.2:
@@ -5481,10 +5850,6 @@ 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==}
 
@@ -5497,9 +5862,6 @@ packages:
   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'}
@@ -5518,9 +5880,9 @@ packages:
   fflate@0.8.2:
     resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
 
-  file-entry-cache@6.0.1:
-    resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
-    engines: {node: ^10.12.0 || >=12.0.0}
+  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==}
@@ -5542,12 +5904,17 @@ packages:
     resolution: {integrity: sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==}
     engines: {node: '>= 0.8'}
 
+  find-cache-dir@2.1.0:
+    resolution: {integrity: sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==}
+    engines: {node: '>=6'}
+
   find-cache-dir@3.3.2:
     resolution: {integrity: sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==}
     engines: {node: '>=8'}
 
-  find-root@1.1.0:
-    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
+  find-up@3.0.0:
+    resolution: {integrity: sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==}
+    engines: {node: '>=6'}
 
   find-up@4.1.0:
     resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
@@ -5571,9 +5938,17 @@ 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==}
 
+  flow-parser@0.293.0:
+    resolution: {integrity: sha512-8tEGAcWpCqioajiSqrJr2+JSmkEI2vO/UACFGG378RO106ez9xugVxe9EpXD3aI1Vbf+mEUGhMt0gMpveJwVGA==}
+    engines: {node: '>=0.4.0'}
+
   fn.name@1.1.0:
     resolution: {integrity: sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==}
 
@@ -5621,6 +5996,20 @@ packages:
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
+  framer-motion@12.23.12:
+    resolution: {integrity: sha512-6e78rdVtnBvlEVgu6eFEAgG9v3wLnYEboM8I5O5EXvfKC8gxGQB8wXJdhkMy10iVcn05jl6CNw7/HTsTCfwcWg==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   fresh@0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
@@ -5668,6 +6057,10 @@ packages:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
 
+  get-east-asian-width@1.4.0:
+    resolution: {integrity: sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q==}
+    engines: {node: '>=18'}
+
   get-intrinsic@1.3.0:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
@@ -5698,6 +6091,9 @@ packages:
   get-tsconfig@4.10.1:
     resolution: {integrity: sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==}
 
+  get-tsconfig@4.13.0:
+    resolution: {integrity: sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==}
+
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -5714,9 +6110,17 @@ packages:
     engines: {node: 20 || >=22}
     hasBin: true
 
-  globals@13.24.0:
-    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
-    engines: {node: '>=8'}
+  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==}
@@ -5769,9 +6173,55 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  hast-util-embedded@3.0.0:
+    resolution: {integrity: sha512-naH8sld4Pe2ep03qqULEtvYr7EjrLK2QHY8KJR6RJkTUjPGObe1vnx585uzem2hGra+s1q08DZZpfgDVYRbaXA==}
+
+  hast-util-from-html@2.0.3:
+    resolution: {integrity: sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==}
+
+  hast-util-from-parse5@8.0.3:
+    resolution: {integrity: sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==}
+
+  hast-util-has-property@3.0.0:
+    resolution: {integrity: sha512-MNilsvEKLFpV604hwfhVStK0usFY/QmM5zX16bo7EjnAEGofr5YyI37kzopBlZJkHD4t887i+q/C8/tr5Q94cA==}
+
+  hast-util-is-body-ok-link@3.0.1:
+    resolution: {integrity: sha512-0qpnzOBLztXHbHQenVB8uNuxTnm/QBFUOmdOSsEn7GnBtyY07+ENTWVFBAnXd/zEgd9/SUG3lRY7hSIBWRgGpQ==}
+
+  hast-util-is-element@3.0.0:
+    resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==}
+
+  hast-util-minify-whitespace@1.0.1:
+    resolution: {integrity: sha512-L96fPOVpnclQE0xzdWb/D12VT5FabA7SnZOUMtL1DbXmYiHJMXZvFkIZfiMmTCNJHUeO2K9UYNXoVyfz+QHuOw==}
+
+  hast-util-parse-selector@4.0.0:
+    resolution: {integrity: sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==}
+
+  hast-util-phrasing@3.0.1:
+    resolution: {integrity: sha512-6h60VfI3uBQUxHqTyMymMZnEbNl1XmEGtOxxKYL7stY2o601COo62AWAYBQR9lZbYXYSBoxag8UpPRXK+9fqSQ==}
+
+  hast-util-to-html@9.0.5:
+    resolution: {integrity: sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==}
+
+  hast-util-to-mdast@10.1.2:
+    resolution: {integrity: sha512-FiCRI7NmOvM4y+f5w32jPRzcxDIz+PUqDwEqn1A+1q2cdp3B8Gx7aVrXORdOKjMNDQsD1ogOr896+0jJHW1EFQ==}
+
+  hast-util-to-text@4.0.2:
+    resolution: {integrity: sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==}
+
   hast-util-whitespace@2.0.1:
     resolution: {integrity: sha512-nAxA0v8+vXSBDt3AnRUNjyRIQ0rD+ntpbAp4LnPkumc5M9yUbSMa4XDU9Q6etY4f1Wp4bNgvc1yjiZtsTTrSng==}
 
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
+
+  hast@1.0.0:
+    resolution: {integrity: sha512-vFUqlRV5C+xqP76Wwq2SrM0kipnmpxJm7OfvVXpB35Fp+Fn4MV+ozr+JZr5qFvyR1q/U+Foim2x+3P+x9S1PLA==}
+    deprecated: Renamed to rehype
+
+  hastscript@9.0.1:
+    resolution: {integrity: sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==}
+
   he@1.2.0:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
@@ -5783,6 +6233,12 @@ 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'}
@@ -5803,6 +6259,10 @@ packages:
   hsl-to-rgb-for-reals@1.1.1:
     resolution: {integrity: sha512-LgOWAkrN0rFaQpfdWBQlv/VhkOxb5AsBjk6NQVx4yEzWS923T07X0M1Y0VNko2H52HeSpZrZNNMJ0aFqsdVzQg==}
 
+  html-encoding-sniffer@4.0.0:
+    resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
+    engines: {node: '>=18'}
+
   html-entities@2.6.0:
     resolution: {integrity: sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==}
 
@@ -5811,6 +6271,9 @@ packages:
     engines: {node: '>=12'}
     hasBin: true
 
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
+
   html-webpack-plugin@5.6.4:
     resolution: {integrity: sha512-V/PZeWsqhfpE27nKeX9EO2sbR+D17A+tLf6qU+ht66jdUsN0QLKJN27Z+1+gHrVMKgndBahes0PU6rRihDgHTw==}
     engines: {node: '>=10.13.0'}
@@ -5826,18 +6289,34 @@ packages:
   htmlparser2@6.1.0:
     resolution: {integrity: sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==}
 
+  htmlparser2@8.0.2:
+    resolution: {integrity: sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==}
+
   http-errors@2.0.0:
     resolution: {integrity: sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==}
     engines: {node: '>= 0.8'}
 
+  http-proxy-agent@7.0.2:
+    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'}
+
   human-signals@2.1.0:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
 
+  husky@9.1.7:
+    resolution: {integrity: sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   hyphen@1.10.6:
     resolution: {integrity: sha512-fXHXcGFTXOvZTSkPJuGOQf5Lv5T/R2itiiCVPg9LxAje5D00O0pP83yJShFq5V89Ly//Gt6acj7z8pbBr34stw==}
 
@@ -5845,6 +6324,10 @@ packages:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
 
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
   icss-utils@5.1.0:
     resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==}
     engines: {node: ^10 || ^12 || >= 14}
@@ -5869,8 +6352,8 @@ packages:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
 
-  import-in-the-middle@1.14.2:
-    resolution: {integrity: sha512-5tCuY9BV8ujfOpwtAGgsTx9CGUapcFMEEyByLv1B+v2+6DhAcw+Zr0nhQT7uwaZ7DiourxFEscghOR8e1aPLQw==}
+  import-in-the-middle@2.0.0:
+    resolution: {integrity: sha512-yNZhyQYqXpkT0AKq3F3KLasUSK4fHvebNH5hOsKQw2dhGSALvQ4U0BqUc5suziKvydO5u5hgN2hy1RJaho8U5A==}
 
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
@@ -5985,6 +6468,10 @@ packages:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
 
+  is-fullwidth-code-point@5.1.0:
+    resolution: {integrity: sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==}
+    engines: {node: '>=18'}
+
   is-generator-function@1.1.0:
     resolution: {integrity: sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==}
     engines: {node: '>= 0.4'}
@@ -6009,18 +6496,25 @@ packages:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
 
-  is-path-inside@3.0.3:
-    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
-    engines: {node: '>=8'}
-
   is-plain-obj@4.1.0:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
 
+  is-plain-object@2.0.4:
+    resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}
+    engines: {node: '>=0.10.0'}
+
+  is-plain-object@5.0.0:
+    resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
+    engines: {node: '>=0.10.0'}
+
   is-port-reachable@4.0.0:
     resolution: {integrity: sha512-9UoipoxYmSk6Xy7QFgRv2HDyaysmgSG75TFQs6S+3pDM7ZhKTF/bskZV+0UlABHzKjNVhPjYCLfeZUEg1wXxig==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
   is-regex@1.2.1:
     resolution: {integrity: sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==}
     engines: {node: '>= 0.4'}
@@ -6082,6 +6576,10 @@ packages:
     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'}
+
   isomorphic.js@0.2.5:
     resolution: {integrity: sha512-PIeMbHqMt4DnUP3MA/Flc0HElYjMXArsw1qwJZcm9sqR8mq3l8NYizFMty0pWwE/tzIGH3EKK5+jes5mAr85yw==}
 
@@ -6100,14 +6598,14 @@ 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==}
     hasBin: true
 
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -6115,9 +6613,24 @@ packages:
     resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
     hasBin: true
 
-  jsdoc-type-pratt-parser@4.8.0:
-    resolution: {integrity: sha512-iZ8Bdb84lWRuGHamRXFyML07r21pcwBrLkHEuHgEY5UbCouBwv7ECknDRKzsQIXMiqpPymqtIf8TC/shYKB5rw==}
-    engines: {node: '>=12.0.0'}
+  jscodeshift@17.3.0:
+    resolution: {integrity: sha512-LjFrGOIORqXBU+jwfC9nbkjmQfFldtMIoS6d9z2LG/lkmyNXsJAySPT+2SWXJEoE68/bCWcxKpXH37npftgmow==}
+    engines: {node: '>=16'}
+    hasBin: true
+    peerDependencies:
+      '@babel/preset-env': ^7.1.6
+    peerDependenciesMeta:
+      '@babel/preset-env':
+        optional: true
+
+  jsdom@26.1.0:
+    resolution: {integrity: sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
 
   jsesc@3.0.2:
     resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
@@ -6170,6 +6683,10 @@ packages:
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
+  kind-of@6.0.3:
+    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
+    engines: {node: '>=0.10.0'}
+
   kleur@4.1.5:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
@@ -6193,6 +6710,76 @@ packages:
     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]
+
+  lightningcss-linux-arm64-musl@1.30.2:
+    resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.30.2:
+    resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.30.2:
+    resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  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'}
@@ -6209,6 +6796,15 @@ packages:
   linkifyjs@4.3.2:
     resolution: {integrity: sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==}
 
+  lint-staged@16.2.7:
+    resolution: {integrity: sha512-lDIj4RnYmK7/kXMya+qJsmkRFkGolciXjrsZ6PC25GdTfWOAWetR0ZbsNXRAj1EHHImRSalc+whZFg56F5DVow==}
+    engines: {node: '>=20.17'}
+    hasBin: true
+
+  listr2@9.0.5:
+    resolution: {integrity: sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==}
+    engines: {node: '>=20.0.0'}
+
   lit-element@3.3.3:
     resolution: {integrity: sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==}
 
@@ -6222,6 +6818,10 @@ packages:
     resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==}
     engines: {node: '>=6.11.5'}
 
+  locate-path@3.0.0:
+    resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==}
+    engines: {node: '>=6'}
+
   locate-path@5.0.0:
     resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
     engines: {node: '>=8'}
@@ -6237,9 +6837,6 @@ packages:
   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.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
 
@@ -6252,19 +6849,23 @@ 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==}
 
+  log-update@6.1.0:
+    resolution: {integrity: sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==}
+    engines: {node: '>=18'}
+
   logform@2.7.0:
     resolution: {integrity: sha512-TFYA4jnP7PVbmlBIfhlSe+WKxs9dklXMTEGcBCIvLhE/Tn3H6Gk1norupVW7m5Cnd4bLcr08AytbyV/xj7f/kQ==}
     engines: {node: '>= 12.0.0'}
 
+  longest-streak@3.1.0:
+    resolution: {integrity: sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==}
+
   loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
@@ -6278,6 +6879,9 @@ packages:
   lowlight@3.3.0:
     resolution: {integrity: sha512-0JNhgFoPvP6U6lE/UdVsSq99tn6DhjjpAj5MxG49ewd2mOBVtwWYIT8ClyABhq198aXXODMU6Ox8DrGy/CpTZQ==}
 
+  lru-cache@10.4.3:
+    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
+
   lru-cache@11.2.1:
     resolution: {integrity: sha512-r8LA6i4LP4EeWOhqBaZZjDWwehd1xUJPCJd9Sv300H0ZmcUER4+JPh7bqqZeqs1o5pgtgvXm+d9UGrB5zZGDiQ==}
     engines: {node: 20 || >=22}
@@ -6301,10 +6905,17 @@ packages:
   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'}
 
+  make-dir@2.1.0:
+    resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
+    engines: {node: '>=6'}
+
   make-dir@3.1.0:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
     engines: {node: '>=8'}
@@ -6319,6 +6930,9 @@ packages:
     resolution: {integrity: sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==}
     hasBin: true
 
+  markdown-table@3.0.4:
+    resolution: {integrity: sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==}
+
   masonry-layout@4.2.2:
     resolution: {integrity: sha512-iGtAlrpHNyxaR19CvKC3npnEcAwszXoyJiI8ARV2ePi7fmYhIud25MHK8Zx4P0LCC4d3TNO9+rFa1KoK1OEOaA==}
 
@@ -6329,18 +6943,52 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
-  mdast-util-definitions@5.1.2:
-    resolution: {integrity: sha512-8SVPMuHqlPME/z3gqVwWY4zVXn8lqKv/pAhC57FuJ40ImXyBpmO5ukh98zB2v7Blql2FiHjHv9LVztSIqjY+MA==}
+  mdast-util-find-and-replace@3.0.2:
+    resolution: {integrity: sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==}
 
   mdast-util-from-markdown@1.3.1:
     resolution: {integrity: sha512-4xTO/M8c82qBcnQc1tgpNtubGUW/Y1tBQ1B0i5CtSoelOLKFYlElIr3bvgREYYO5iRqbMY1YuqZng0GVOI8Qww==}
 
-  mdast-util-to-hast@12.3.0:
-    resolution: {integrity: sha512-pits93r8PhnIoU4Vy9bjW39M2jJ6/tdHyja9rrot9uujkN7UTU9SDnE6WNJz/IGyQk3XHX6yNNtrBH6cQzm8Hw==}
+  mdast-util-from-markdown@2.0.2:
+    resolution: {integrity: sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==}
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    resolution: {integrity: sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==}
+
+  mdast-util-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==}
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    resolution: {integrity: sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==}
+
+  mdast-util-gfm-table@2.0.0:
+    resolution: {integrity: sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==}
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    resolution: {integrity: sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==}
+
+  mdast-util-gfm@3.1.0:
+    resolution: {integrity: sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==}
+
+  mdast-util-phrasing@4.1.0:
+    resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==}
+
+  mdast-util-to-hast@13.2.1:
+    resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==}
+
+  mdast-util-to-markdown@2.1.2:
+    resolution: {integrity: sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==}
 
   mdast-util-to-string@3.2.0:
     resolution: {integrity: sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==}
 
+  mdast-util-to-string@4.0.0:
+    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}
+
+  mdast@3.0.0:
+    resolution: {integrity: sha512-xySmf8g4fPKMeC07jXGz971EkLbWAJ83s4US2Tj9lEdnZ142UP5grN73H1Xd3HzrdbU5o9GYYP/y8F9ZSwLE9g==}
+    deprecated: '`mdast` was renamed to `remark`'
+
   mdn-data@2.0.14:
     resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
 
@@ -6367,10 +7015,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'}
@@ -6378,66 +7022,150 @@ packages:
   micromark-core-commonmark@1.1.0:
     resolution: {integrity: sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw==}
 
+  micromark-core-commonmark@2.0.3:
+    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    resolution: {integrity: sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==}
+
+  micromark-extension-gfm-footnote@2.1.0:
+    resolution: {integrity: sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==}
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    resolution: {integrity: sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==}
+
+  micromark-extension-gfm-table@2.1.1:
+    resolution: {integrity: sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==}
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    resolution: {integrity: sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==}
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    resolution: {integrity: sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==}
+
+  micromark-extension-gfm@3.0.0:
+    resolution: {integrity: sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==}
+
   micromark-factory-destination@1.1.0:
     resolution: {integrity: sha512-XaNDROBgx9SgSChd69pjiGKbV+nfHGDPVYFs5dOoDd7ZnMAE+Cuu91BCpsY8RT2NP9vo/B8pds2VQNCLiu0zhg==}
 
+  micromark-factory-destination@2.0.1:
+    resolution: {integrity: sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==}
+
   micromark-factory-label@1.1.0:
     resolution: {integrity: sha512-OLtyez4vZo/1NjxGhcpDSbHQ+m0IIGnT8BoPamh+7jVlzLJBH98zzuCoUeMxvM6WsNeh8wx8cKvqLiPHEACn0w==}
 
+  micromark-factory-label@2.0.1:
+    resolution: {integrity: sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==}
+
   micromark-factory-space@1.1.0:
     resolution: {integrity: sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ==}
 
+  micromark-factory-space@2.0.1:
+    resolution: {integrity: sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==}
+
   micromark-factory-title@1.1.0:
     resolution: {integrity: sha512-J7n9R3vMmgjDOCY8NPw55jiyaQnH5kBdV2/UXCtZIpnHH3P6nHUKaH7XXEYuWwx/xUJcawa8plLBEjMPU24HzQ==}
 
+  micromark-factory-title@2.0.1:
+    resolution: {integrity: sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==}
+
   micromark-factory-whitespace@1.1.0:
     resolution: {integrity: sha512-v2WlmiymVSp5oMg+1Q0N1Lxmt6pMhIHD457whWM7/GUlEks1hI9xj5w3zbc4uuMKXGisksZk8DzP2UyGbGqNsQ==}
 
+  micromark-factory-whitespace@2.0.1:
+    resolution: {integrity: sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==}
+
   micromark-util-character@1.2.0:
     resolution: {integrity: sha512-lXraTwcX3yH/vMDaFWCQJP1uIszLVebzUa3ZHdrgxr7KEU/9mL4mVgCpGbyhvNLNlauROiNUq7WN5u7ndbY6xg==}
 
+  micromark-util-character@2.1.1:
+    resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
+
   micromark-util-chunked@1.1.0:
     resolution: {integrity: sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==}
 
+  micromark-util-chunked@2.0.1:
+    resolution: {integrity: sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==}
+
   micromark-util-classify-character@1.1.0:
     resolution: {integrity: sha512-SL0wLxtKSnklKSUplok1WQFoGhUdWYKggKUiqhX+Swala+BtptGCu5iPRc+xvzJ4PXE/hwM3FNXsfEVgoZsWbw==}
 
+  micromark-util-classify-character@2.0.1:
+    resolution: {integrity: sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==}
+
   micromark-util-combine-extensions@1.1.0:
     resolution: {integrity: sha512-Q20sp4mfNf9yEqDL50WwuWZHUrCO4fEyeDCnMGmG5Pr0Cz15Uo7KBs6jq+dq0EgX4DPwwrh9m0X+zPV1ypFvUA==}
 
+  micromark-util-combine-extensions@2.0.1:
+    resolution: {integrity: sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==}
+
   micromark-util-decode-numeric-character-reference@1.1.0:
     resolution: {integrity: sha512-m9V0ExGv0jB1OT21mrWcuf4QhP46pH1KkfWy9ZEezqHKAxkj4mPCy3nIH1rkbdMlChLHX531eOrymlwyZIf2iw==}
 
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    resolution: {integrity: sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==}
+
   micromark-util-decode-string@1.1.0:
     resolution: {integrity: sha512-YphLGCK8gM1tG1bd54azwyrQRjCFcmgj2S2GoJDNnh4vYtnL38JS8M4gpxzOPNyHdNEpheyWXCTnnTDY3N+NVQ==}
 
+  micromark-util-decode-string@2.0.1:
+    resolution: {integrity: sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==}
+
   micromark-util-encode@1.1.0:
     resolution: {integrity: sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw==}
 
+  micromark-util-encode@2.0.1:
+    resolution: {integrity: sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==}
+
   micromark-util-html-tag-name@1.2.0:
     resolution: {integrity: sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==}
 
+  micromark-util-html-tag-name@2.0.1:
+    resolution: {integrity: sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==}
+
   micromark-util-normalize-identifier@1.1.0:
     resolution: {integrity: sha512-N+w5vhqrBihhjdpM8+5Xsxy71QWqGn7HYNUvch71iV2PM7+E3uWGox1Qp90loa1ephtCxG2ftRV/Conitc6P2Q==}
 
+  micromark-util-normalize-identifier@2.0.1:
+    resolution: {integrity: sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==}
+
   micromark-util-resolve-all@1.1.0:
     resolution: {integrity: sha512-b/G6BTMSg+bX+xVCshPTPyAu2tmA0E4X98NSR7eIbeC6ycCqCeE7wjfDIgzEbkzdEVJXRtOG4FbEm/uGbCRouA==}
 
+  micromark-util-resolve-all@2.0.1:
+    resolution: {integrity: sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==}
+
   micromark-util-sanitize-uri@1.2.0:
     resolution: {integrity: sha512-QO4GXv0XZfWey4pYFndLUKEAktKkG5kZTdUNaTAkzbuJxn2tNBOr+QtxR2XpWaMhbImT2dPzyLrPXLlPhph34A==}
 
+  micromark-util-sanitize-uri@2.0.1:
+    resolution: {integrity: sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==}
+
   micromark-util-subtokenize@1.1.0:
     resolution: {integrity: sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==}
 
+  micromark-util-subtokenize@2.1.0:
+    resolution: {integrity: sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==}
+
   micromark-util-symbol@1.1.0:
     resolution: {integrity: sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==}
 
+  micromark-util-symbol@2.0.1:
+    resolution: {integrity: sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==}
+
   micromark-util-types@1.1.0:
     resolution: {integrity: sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==}
 
+  micromark-util-types@2.0.2:
+    resolution: {integrity: sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==}
+
   micromark@3.2.0:
     resolution: {integrity: sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==}
 
+  micromark@4.0.2:
+    resolution: {integrity: sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==}
+
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
     engines: {node: '>=8.6'}
@@ -6471,6 +7199,10 @@ packages:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
 
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
   min-indent@1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
@@ -6534,6 +7266,12 @@ packages:
     resolution: {integrity: sha512-223dMRJtI/l25dJKWpgij2cMtywuG/WiUKXdvwfbhGKBhy1puASqXwFzmWZ7+K73vUPoR7SS2Qz2cI/g9MKw0A==}
     engines: {node: '>= 0.8.0'}
 
+  motion-dom@12.23.12:
+    resolution: {integrity: sha512-RcR4fvMCTESQBD/uKQe49D5RUeDOokkGRmz4ceaJKDBgHYtZtntC/s2vLvY38gqGaytinij/yi3hMcWVcEF5Kw==}
+
+  motion-utils@12.23.6:
+    resolution: {integrity: sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==}
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -6544,8 +7282,9 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  mz@2.7.0:
-    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+  nano-spawn@2.0.0:
+    resolution: {integrity: sha512-tacvGzUY5o2D8CBh2rrwxyNojUsZNU2zjNTzKQrkgGJQTbGAfArVWXSKMBokBeeg6C7OLRGUEyoFlYbfeWQIqw==}
+    engines: {node: '>=20.17'}
 
   nanoid@3.3.8:
     resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
@@ -6571,30 +7310,11 @@ packages:
   neo-async@2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
 
-  next-themes@0.2.1:
-    resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==}
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
     peerDependencies:
-      next: '*'
-      react: '*'
-      react-dom: '*'
-
-  next@14.2.32:
-    resolution: {integrity: sha512-fg5g0GZ7/nFc09X8wLe6pNSU8cLWbLRG3TZzPJ1BJvi2s9m7eF991se67wliM9kR5yLHRkyGKU49MMx58s3LJg==}
-    engines: {node: '>=18.17.0'}
-    hasBin: true
-    peerDependencies:
-      '@opentelemetry/api': ^1.1.0
-      '@playwright/test': ^1.41.2
-      react: ^18.2.0
-      react-dom: ^18.2.0
-      sass: ^1.3.0
-    peerDependenciesMeta:
-      '@opentelemetry/api':
-        optional: true
-      '@playwright/test':
-        optional: true
-      sass:
-        optional: true
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
 
   no-case@3.0.4:
     resolution: {integrity: sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==}
@@ -6662,14 +7382,13 @@ packages:
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
+  nwsapi@2.2.21:
+    resolution: {integrity: sha512-o6nIY3qwiSXl7/LuOU0Dmuctd34Yay0yeuZRLFmDPrrdHpXKFndPj3hM+YEPVHYC5fx2otBx4Ilc/gyYSAUaIA==}
+
   object-assign@4.1.1:
     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'}
@@ -6709,6 +7428,9 @@ packages:
   objectorarray@1.0.5:
     resolution: {integrity: sha512-eJJDYkhJFFbBBAxeh8xW+weHlkI28n2ZdQV/J/DNfWfSKlGEf2xcfAbZTv3riEXHAhL9SVOTs2pRmXiSTf78xg==}
 
+  obug@2.1.1:
+    resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
+
   on-finished@2.3.0:
     resolution: {integrity: sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==}
     engines: {node: '>= 0.8'}
@@ -6728,6 +7450,10 @@ packages:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
     engines: {node: '>=6'}
 
+  onetime@7.0.0:
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
+
   open@8.4.2:
     resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
     engines: {node: '>=12'}
@@ -6746,6 +7472,10 @@ packages:
     resolution: {integrity: sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==}
     engines: {node: '>= 0.4'}
 
+  oxc-parser@0.99.0:
+    resolution: {integrity: sha512-MpS1lbd2vR0NZn1v0drpgu7RUFu3x9Rd0kxExObZc2+F+DIrV0BOMval/RO3BYGwssIOerII6iS8EbbpCCZQpQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
   p-limit@2.3.0:
     resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
     engines: {node: '>=6'}
@@ -6758,6 +7488,10 @@ packages:
     resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
 
+  p-locate@3.0.0:
+    resolution: {integrity: sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==}
+    engines: {node: '>=6'}
+
   p-locate@4.1.0:
     resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
     engines: {node: '>=8'}
@@ -6774,6 +7508,10 @@ packages:
     resolution: {integrity: sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==}
     engines: {node: '>=6'}
 
+  p-map@7.0.3:
+    resolution: {integrity: sha512-VkndIv2fIB99swvQoA65bm+fsmt6UNdGeIB0oxBs+WhAhdh08QA04JXpI7rbB9r08/nkbysKoya9rtDERYOYMA==}
+    engines: {node: '>=18'}
+
   p-try@2.2.0:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
@@ -6798,9 +7536,15 @@ packages:
     resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
     engines: {node: '>=8'}
 
+  parse-srcset@1.0.2:
+    resolution: {integrity: sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==}
+
   parse-svg-path@0.1.2:
     resolution: {integrity: sha512-JyPSBnkTJ0AI8GGJLfMXvKq42cj5c006fnLz6fXy6zfoVjJizi8BNTpu8on8ziI1cKy9d9DGNuY17Ce7wuejpQ==}
 
+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+
   parseurl@1.3.3:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}
@@ -6814,6 +7558,10 @@ packages:
   path-case@3.0.4:
     resolution: {integrity: sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==}
 
+  path-exists@3.0.0:
+    resolution: {integrity: sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==}
+    engines: {node: '>=4'}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -6878,14 +7626,27 @@ packages:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
+  pidtree@0.6.0:
+    resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
   pify@2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
 
+  pify@4.0.1:
+    resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
+    engines: {node: '>=6'}
+
   pirates@4.0.7:
     resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
     engines: {node: '>= 6'}
 
+  pkg-dir@3.0.0:
+    resolution: {integrity: sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==}
+    engines: {node: '>=6'}
+
   pkg-dir@4.2.0:
     resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
     engines: {node: '>=8'}
@@ -6909,30 +7670,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'}
@@ -6999,10 +7736,6 @@ packages:
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  postcss@8.4.31:
-    resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
-    engines: {node: ^10 || ^12 || >=14}
-
   postcss@8.5.6:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -7041,69 +7774,8 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
-  prettier-plugin-tailwindcss@0.6.14:
-    resolution: {integrity: sha512-pi2e/+ZygeIqntN+vC573BcW5Cve8zUB0SSAGxqpB4f96boZF4M3phPVoOFCeypwkpRYdi7+jQ5YJJUwrkGUAg==}
-    engines: {node: '>=14.21.3'}
-    peerDependencies:
-      '@ianvs/prettier-plugin-sort-imports': '*'
-      '@prettier/plugin-hermes': '*'
-      '@prettier/plugin-oxc': '*'
-      '@prettier/plugin-pug': '*'
-      '@shopify/prettier-plugin-liquid': '*'
-      '@trivago/prettier-plugin-sort-imports': '*'
-      '@zackad/prettier-plugin-twig': '*'
-      prettier: ^3.0
-      prettier-plugin-astro: '*'
-      prettier-plugin-css-order: '*'
-      prettier-plugin-import-sort: '*'
-      prettier-plugin-jsdoc: '*'
-      prettier-plugin-marko: '*'
-      prettier-plugin-multiline-arrays: '*'
-      prettier-plugin-organize-attributes: '*'
-      prettier-plugin-organize-imports: '*'
-      prettier-plugin-sort-imports: '*'
-      prettier-plugin-style-order: '*'
-      prettier-plugin-svelte: '*'
-    peerDependenciesMeta:
-      '@ianvs/prettier-plugin-sort-imports':
-        optional: true
-      '@prettier/plugin-hermes':
-        optional: true
-      '@prettier/plugin-oxc':
-        optional: true
-      '@prettier/plugin-pug':
-        optional: true
-      '@shopify/prettier-plugin-liquid':
-        optional: true
-      '@trivago/prettier-plugin-sort-imports':
-        optional: true
-      '@zackad/prettier-plugin-twig':
-        optional: true
-      prettier-plugin-astro:
-        optional: true
-      prettier-plugin-css-order:
-        optional: true
-      prettier-plugin-import-sort:
-        optional: true
-      prettier-plugin-jsdoc:
-        optional: true
-      prettier-plugin-marko:
-        optional: true
-      prettier-plugin-multiline-arrays:
-        optional: true
-      prettier-plugin-organize-attributes:
-        optional: true
-      prettier-plugin-organize-imports:
-        optional: true
-      prettier-plugin-sort-imports:
-        optional: true
-      prettier-plugin-style-order:
-        optional: true
-      prettier-plugin-svelte:
-        optional: true
-
-  prettier@3.6.2:
-    resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
+  prettier@3.7.4:
+    resolution: {integrity: sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -7148,6 +7820,9 @@ packages:
   property-information@6.5.0:
     resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
 
+  property-information@7.1.0:
+    resolution: {integrity: sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==}
+
   prosemirror-changeset@2.3.1:
     resolution: {integrity: sha512-j0kORIBm8ayJNl3zQvD1TTPHJX3g042et6y/KQhZhnPrruO8exkTgG8X+NRpj7kIyMMEx74Xb3DyMIBtO0IKkQ==}
 
@@ -7243,9 +7918,6 @@ packages:
   quansync@0.2.11:
     resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
 
-  queue-microtask@1.2.3:
-    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-
   queue@6.0.2:
     resolution: {integrity: sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==}
 
@@ -7384,15 +8056,15 @@ packages:
       '@types/react':
         optional: true
 
-  react-router-dom@7.9.3:
-    resolution: {integrity: sha512-1QSbA0TGGFKTAc/aWjpfW/zoEukYfU4dc1dLkT/vvf54JoGMkW+fNA+3oyo2gWVW1GM7BxjJVHz5GnPJv40rvg==}
+  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.3:
-    resolution: {integrity: sha512-4o2iWCFIwhI/eYAIL43+cjORXYn/aRQPgtFRRZb3VzoyQ5Uej0Bmqj7437L97N9NJW4wnicSwLOLS+yCXfAPgg==}
+  react-router@7.9.5:
+    resolution: {integrity: sha512-JmxqrnBZ6E9hWmf02jzNn9Jm3UqyeimyiwzD69NjxGySG6lIz/1LVPsoTCwN7NBX2XjCEa1LIX5EMz1j2b6u6A==}
     engines: {node: '>=20.0.0'}
     peerDependencies:
       react: '>=18'
@@ -7494,16 +8166,34 @@ packages:
     resolution: {integrity: sha512-ZbgR5aZEdf4UKZVBPYIgaglBmSF2Hi94s2PcIHhRGFjKYu+chjJdYfHn4rt3hB6eCKLJ8giVIIfgMa1ehDfZKA==}
     engines: {node: '>=0.10.0'}
 
+  rehype-minify-whitespace@6.0.2:
+    resolution: {integrity: sha512-Zk0pyQ06A3Lyxhe9vGtOtzz3Z0+qZ5+7icZ/PL/2x1SHPbKao5oB/g/rlc6BCTajqBb33JcOe71Ye1oFsuYbnw==}
+
+  rehype-parse@9.0.1:
+    resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==}
+
+  rehype-remark@10.0.1:
+    resolution: {integrity: sha512-EmDndlb5NVwXGfUa4c9GPK+lXeItTilLhE6ADSaQuHr4JUlKw9MidzGzx4HpqZrNCt6vnHmEifXQiiA+CEnjYQ==}
+
   relateurl@0.2.7:
     resolution: {integrity: sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==}
     engines: {node: '>= 0.10'}
 
+  remark-gfm@4.0.1:
+    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
+
   remark-parse@10.0.2:
     resolution: {integrity: sha512-3ydxgHa/ZQzG8LvC7jTXccARYDcRld3VfcgIIFs7bI6vbRSxJJmzgLEIIoYKyrfhaY+ujuWaf/PJiMZXoiCXgw==}
 
+  remark-parse@11.0.0:
+    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
+
   remark-rehype@10.1.0:
     resolution: {integrity: sha512-EFmR5zppdBp0WQeDVZ/b66CWJipB2q2VLNFMabzDSGR66Z2fQii83G5gTBbgGEnEEA0QRussvrFHxk1HWGJskw==}
 
+  remark-stringify@11.0.0:
+    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
+
   renderkid@3.0.0:
     resolution: {integrity: sha512-q/7VIQA8lmM1hF+jn+sFSPWGlMkSAeNYcPLmDQx2zzuiDfaLrOmumR8iaUKlenFgh0XRPIUeSPlH3A+AW3Z5pg==}
 
@@ -7515,9 +8205,9 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
-  require-in-the-middle@7.5.2:
-    resolution: {integrity: sha512-gAZ+kLqBdHarXB64XpAe2VCjB7rIRv+mU8tfRWziHRJ5umKsIHN2tLLv6EtMw7WCdP19S0ERVMldNvxYCHnhSQ==}
-    engines: {node: '>=8.6.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==}
@@ -7538,6 +8228,10 @@ packages:
     resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
     hasBin: true
 
+  restore-cursor@5.1.0:
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
+
   restructure@3.0.2:
     resolution: {integrity: sha512-gSfoiOEA0VPE6Tukkrr7I0RBdE0s7H1eFCDBk05l1KIQT1UIKNc5JZy6jdyW6eYH3aR3g5b3PuL77rq0hvwtAw==}
 
@@ -7545,22 +8239,21 @@ packages:
     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==}
 
   rimraf@3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
     deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
-  rolldown-plugin-dts@0.16.11:
-    resolution: {integrity: sha512-9IQDaPvPqTx3RjG2eQCK5GYZITo203BxKunGI80AGYicu1ySFTUyugicAaTZWRzFWh9DSnzkgNeMNbDWBbSs0w==}
-    engines: {node: '>=20.18.0'}
+  rolldown-plugin-dts@0.17.8:
+    resolution: {integrity: sha512-76EEBlhF00yeY6M7VpMkWKI4r9WjuoMiOGey7j4D6zf3m0BR+ZrrY9hvSXdueJ3ljxSLq4DJBKFpX/X9+L7EKw==}
+    engines: {node: '>=20.19.0'}
     peerDependencies:
       '@ts-macro/tsc': ^0.3.6
       '@typescript/native-preview': '>=7.0.0-dev.20250601.1'
-      rolldown: ^1.0.0-beta.9
+      rolldown: ^1.0.0-beta.44
       typescript: 5.8.3
       vue-tsc: ~3.1.0
     peerDependenciesMeta:
@@ -7573,8 +8266,9 @@ packages:
       vue-tsc:
         optional: true
 
-  rolldown@1.0.0-beta.34:
-    resolution: {integrity: sha512-Wwh7EwalMzzX3Yy3VN58VEajeR2Si8+HDNMf706jPLIqU7CxneRW+dQVfznf5O0TWTnJyu4npelwg2bzTXB1Nw==}
+  rolldown@1.0.0-beta.46:
+    resolution: {integrity: sha512-FYUbq0StVHOjkR/hEJ667Pup3ugeB9odBcbmxU5il9QfT9X2t/FPhkqFYQthbYxD2bKnQyO+2vHTgnmOHwZdeA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
   rollup@4.52.4:
@@ -7585,8 +8279,8 @@ packages:
   rope-sequence@1.3.4:
     resolution: {integrity: sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==}
 
-  run-parallel@1.2.0:
-    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+  rrweb-cssom@0.8.0:
+    resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
 
   sade@1.8.1:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
@@ -7617,6 +8311,13 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
+  sanitize-html@2.17.0:
+    resolution: {integrity: sha512-dLAADUSS8rBwhaevT12yCezvioCA+bmUTPH/u57xKPT8d++voeYE6HeluA/bPbQ15TwDBG2ii+QZIEmYx8VdxA==}
+
+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+
   scheduler@0.17.0:
     resolution: {integrity: sha512-7rro8Io3tnCPuY4la/NuI5F2yfESpnfZyT6TtkXnSWVkcu0BCDJ+8gk5ozUaFaxpIyNuWAPXrH0yFcSi28fnDA==}
 
@@ -7634,6 +8335,10 @@ packages:
   scroll-into-view-if-needed@3.1.0:
     resolution: {integrity: sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==}
 
+  semver@5.7.2:
+    resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
+    hasBin: true
+
   semver@6.3.1:
     resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
     hasBin: true
@@ -7643,6 +8348,11 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  semver@7.7.3:
+    resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   send@0.19.0:
     resolution: {integrity: sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==}
     engines: {node: '>= 0.8.0'}
@@ -7683,6 +8393,10 @@ packages:
   setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
+  shallow-clone@3.0.1:
+    resolution: {integrity: sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==}
+    engines: {node: '>=8'}
+
   shebang-command@2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
     engines: {node: '>=8'}
@@ -7691,9 +8405,6 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
-  shimmer@1.2.1:
-    resolution: {integrity: sha512-sQTKC1Re/rM6XyFM6fIAGHRPVGvyXfgzIDvzoq608vM+jeyVD0Tu1E6Np0Kc2zAIFWIj963V2800iF/9LPieQw==}
-
   side-channel-list@1.0.0:
     resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
     engines: {node: '>= 0.4'}
@@ -7710,6 +8421,9 @@ packages:
     resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
     engines: {node: '>= 0.4'}
 
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
   signal-exit@3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
 
@@ -7724,6 +8438,10 @@ packages:
     resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
     engines: {node: '>=14.16'}
 
+  slice-ansi@7.1.2:
+    resolution: {integrity: sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==}
+    engines: {node: '>=18'}
+
   smooth-scroll-into-view-if-needed@2.0.2:
     resolution: {integrity: sha512-z54WzUSlM+xHHvJu3lMIsh+1d1kA4vaakcAtQvqzeGJ5Ffau7EKjpRrMHh1/OBo5zyU2h30ZYEt77vWmPHqg7Q==}
 
@@ -7737,10 +8455,6 @@ packages:
   source-map-support@0.5.21:
     resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
 
-  source-map@0.5.7:
-    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
-    engines: {node: '>=0.10.0'}
-
   source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
@@ -7760,12 +8474,16 @@ packages:
   spdx-license-ids@3.0.22:
     resolution: {integrity: sha512-4PRT4nh1EImPbt2jASOKHX7PB7I+e4IWNLvkKFDxNhJlfjbYlleYQh285Z/3mPTHSAK/AvdMmw5BNNuYH8ShgQ==}
 
-  stable-hash@0.0.5:
-    resolution: {integrity: sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==}
+  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==}
 
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
   standard-as-callback@2.1.0:
     resolution: {integrity: sha512-qoRRSyROncaz1z0mvYqIE4lCd9p2R90i6GxW3uZv5ucSu8tU7B5HXUP1gG8pVZsYNVaXjk8ClXHPttLyxAL48A==}
 
@@ -7773,12 +8491,15 @@ packages:
     resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
     engines: {node: '>= 0.8'}
 
+  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==}
+  storybook@9.1.17:
+    resolution: {integrity: sha512-kfr6kxQAjA96ADlH6FMALJwJ+eM80UqXy106yVHNgdsAP/CdzkkicglRAhZAvUycXK9AeadF6KZ00CWLtVMN4w==}
     hasBin: true
     peerDependencies:
       prettier: ^2 || ^3
@@ -7786,18 +8507,9 @@ packages:
       prettier:
         optional: true
 
-  storybook@9.1.10:
-    resolution: {integrity: sha512-4+U7gF9hMpGilQmdVJwQaVZZEkD7XwC4ZDmBa51mobaPYelELEMoMfNM2hLyvB2x12gk1IJui1DnwOE4t+MXhw==}
-    hasBin: true
-    peerDependencies:
-      prettier: ^2 || ^3
-    peerDependenciesMeta:
-      prettier:
-        optional: true
-
-  streamsearch@1.1.0:
-    resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
-    engines: {node: '>=10.0.0'}
+  string-argv@0.3.2:
+    resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
+    engines: {node: '>=0.6.19'}
 
   string-width@4.2.3:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
@@ -7807,6 +8519,14 @@ packages:
     resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
     engines: {node: '>=12'}
 
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
+  string-width@8.1.0:
+    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'}
@@ -7833,10 +8553,17 @@ packages:
   string_decoder@1.3.0:
     resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
 
+  stringify-entities@4.0.4:
+    resolution: {integrity: sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==}
+
   strip-ansi@6.0.1:
     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'}
@@ -7878,27 +8605,6 @@ packages:
   style-to-object@0.4.4:
     resolution: {integrity: sha512-HYNoHZa2GorYNyqiCaBgsxvcJIn7OHq6inEga+E6Ke3m5JkoqpQbnFssk4jwe+K7AhGa2fcha4wSOf1Kn01dMg==}
 
-  styled-jsx@5.1.1:
-    resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
-    engines: {node: '>= 12.0.0'}
-    peerDependencies:
-      '@babel/core': '*'
-      babel-plugin-macros: '*'
-      react: '>= 16.8.0 || 17.x.x || ^18.0.0-0'
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-      babel-plugin-macros:
-        optional: true
-
-  stylis@4.2.0:
-    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
-
-  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'}
@@ -7929,24 +8635,17 @@ packages:
     peerDependencies:
       react: ^16.11.0 || ^17.0.0 || ^18.0.0
 
+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+
   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==}
@@ -7976,30 +8675,24 @@ packages:
   text-hex@1.0.0:
     resolution: {integrity: sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==}
 
-  text-table@0.2.0:
-    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
-
   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==}
 
   tiny-invariant@1.3.3:
     resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
 
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
   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==}
+    engines: {node: '>=18'}
 
   tinyglobby@0.2.15:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
@@ -8013,6 +8706,10 @@ packages:
     resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==}
     engines: {node: '>=14.0.0'}
 
+  tinyrainbow@3.0.3:
+    resolution: {integrity: sha512-PSkbLUoxOFRzJYjjxHJt9xro7D+iilgMX/C9lawzVuYiIdcihh9DXmVibBe8lmcFrRi/VzlPjBxbN7rH24q8/Q==}
+    engines: {node: '>=14.0.0'}
+
   tinyspy@3.0.2:
     resolution: {integrity: sha512-n1cw8k1k0x4pgA2+9XrOkFydTerNcJ1zWCO5Nn9scWHTD+5tp8dghT2x1uduQePZTZgd3Tupf+x9BxJjeJi77Q==}
     engines: {node: '>=14.0.0'}
@@ -8029,6 +8726,17 @@ packages:
     peerDependencies:
       '@tiptap/core': ^2.0.3
 
+  tldts-core@6.1.86:
+    resolution: {integrity: sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==}
+
+  tldts@6.1.86:
+    resolution: {integrity: sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==}
+    hasBin: true
+
+  tmp@0.2.5:
+    resolution: {integrity: sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==}
+    engines: {node: '>=14.14'}
+
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -8041,9 +8749,17 @@ packages:
     resolution: {integrity: sha512-kh9LVIWH5CnL63Ipf0jhlBIy0UsrMj/NJDfpsy1SqOXlLKEVyXXYrnFxFT1yOOYVGBSApeVnjPw/sBz5BfEjAQ==}
     engines: {node: '>=14.16'}
 
+  tough-cookie@5.1.2:
+    resolution: {integrity: sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==}
+    engines: {node: '>=16'}
+
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
+  tr46@5.1.1:
+    resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==}
+    engines: {node: '>=18'}
+
   tree-kill@1.2.2:
     resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
     hasBin: true
@@ -8051,6 +8767,9 @@ packages:
   trim-lines@3.0.1:
     resolution: {integrity: sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==}
 
+  trim-trailing-lines@2.1.0:
+    resolution: {integrity: sha512-5UR5Biq4VlVOtzqkm2AZlgvSlDJtME46uV0br0gENbwN4l5+mMKT4b9gJKqWtuL2zAIqajGJGuvbCbcAJUZqBg==}
+
   triple-beam@1.4.1:
     resolution: {integrity: sha512-aZbgViZrg1QNcG+LULa7nhZpJTZSLm/mXnHXnbAbjmN5aSa0y7V+wvv6+4WaBtpISJzThKy+PIPxc1Nq1EJ9mg==}
     engines: {node: '>= 14.0.0'}
@@ -8064,13 +8783,15 @@ packages:
     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}
@@ -8088,19 +8809,23 @@ packages:
     resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
     engines: {node: '>=6'}
 
-  tsdown@0.15.5:
-    resolution: {integrity: sha512-2UP5hDBVYGHnnQSIYtDxMDjePmut7EDpvW5E2kVnjpZ17JgiPvRJPHwk5Dm045bC75+q8yxAlw/CMIELymTWaw==}
+  tsdown@0.16.0:
+    resolution: {integrity: sha512-VCqqxT5FbjCmxmLNlOLHiNhu1MBtdvCsk43murvUFloQzQzr/C0FRauWtAw7lAPmS40rZlgocCoTNFqX72WSTg==}
     engines: {node: '>=20.19.0'}
     hasBin: true
     peerDependencies:
       '@arethetypeswrong/core': ^0.18.1
+      '@vitejs/devtools': ^0.0.0-alpha.10
       publint: ^0.3.0
       typescript: 5.8.3
       unplugin-lightningcss: ^0.4.0
       unplugin-unused: ^0.5.0
+      unrun: ^0.2.1
     peerDependenciesMeta:
       '@arethetypeswrong/core':
         optional: true
+      '@vitejs/devtools':
+        optional: true
       publint:
         optional: true
       typescript:
@@ -8109,6 +8834,8 @@ packages:
         optional: true
       unplugin-unused:
         optional: true
+      unrun:
+        optional: true
 
   tslib@2.5.3:
     resolution: {integrity: sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==}
@@ -8116,38 +8843,38 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
-  turbo-darwin-64@2.6.1:
-    resolution: {integrity: sha512-Dm0HwhyZF4J0uLqkhUyCVJvKM9Rw7M03v3J9A7drHDQW0qAbIGBrUijQ8g4Q9Cciw/BXRRd8Uzkc3oue+qn+ZQ==}
+  turbo-darwin-64@2.6.3:
+    resolution: {integrity: sha512-BlJJDc1CQ7SK5Y5qnl7AzpkvKSnpkfPmnA+HeU/sgny3oHZckPV2776ebO2M33CYDSor7+8HQwaodY++IINhYg==}
     cpu: [x64]
     os: [darwin]
 
-  turbo-darwin-arm64@2.6.1:
-    resolution: {integrity: sha512-U0PIPTPyxdLsrC3jN7jaJUwgzX5sVUBsKLO7+6AL+OASaa1NbT1pPdiZoTkblBAALLP76FM0LlnsVQOnmjYhyw==}
+  turbo-darwin-arm64@2.6.3:
+    resolution: {integrity: sha512-MwVt7rBKiOK7zdYerenfCRTypefw4kZCue35IJga9CH1+S50+KTiCkT6LBqo0hHeoH2iKuI0ldTF2a0aB72z3w==}
     cpu: [arm64]
     os: [darwin]
 
-  turbo-linux-64@2.6.1:
-    resolution: {integrity: sha512-eM1uLWgzv89bxlK29qwQEr9xYWBhmO/EGiH22UGfq+uXr+QW1OvNKKMogSN65Ry8lElMH4LZh0aX2DEc7eC0Mw==}
+  turbo-linux-64@2.6.3:
+    resolution: {integrity: sha512-cqpcw+dXxbnPtNnzeeSyWprjmuFVpHJqKcs7Jym5oXlu/ZcovEASUIUZVN3OGEM6Y/OTyyw0z09tOHNt5yBAVg==}
     cpu: [x64]
     os: [linux]
 
-  turbo-linux-arm64@2.6.1:
-    resolution: {integrity: sha512-MFFh7AxAQAycXKuZDrbeutfWM5Ep0CEZ9u7zs4Hn2FvOViTCzIfEhmuJou3/a5+q5VX1zTxQrKGy+4Lf5cdpsA==}
+  turbo-linux-arm64@2.6.3:
+    resolution: {integrity: sha512-MterpZQmjXyr4uM7zOgFSFL3oRdNKeflY7nsjxJb2TklsYqiu3Z9pQ4zRVFFH8n0mLGna7MbQMZuKoWqqHb45w==}
     cpu: [arm64]
     os: [linux]
 
-  turbo-windows-64@2.6.1:
-    resolution: {integrity: sha512-buq7/VAN7KOjMYi4tSZT5m+jpqyhbRU2EUTTvp6V0Ii8dAkY2tAAjQN1q5q2ByflYWKecbQNTqxmVploE0LVwQ==}
+  turbo-windows-64@2.6.3:
+    resolution: {integrity: sha512-biDU70v9dLwnBdLf+daoDlNJVvqOOP8YEjqNipBHzgclbQlXbsi6Gqqelp5er81Qo3BiRgmTNx79oaZQTPb07Q==}
     cpu: [x64]
     os: [win32]
 
-  turbo-windows-arm64@2.6.1:
-    resolution: {integrity: sha512-7w+AD5vJp3R+FB0YOj1YJcNcOOvBior7bcHTodqp90S3x3bLgpr7tE6xOea1e8JkP7GK6ciKVUpQvV7psiwU5Q==}
+  turbo-windows-arm64@2.6.3:
+    resolution: {integrity: sha512-dDHVKpSeukah3VsI/xMEKeTnV9V9cjlpFSUs4bmsUiLu3Yv2ENlgVEZv65wxbeE0bh0jjpmElDT+P1KaCxArQQ==}
     cpu: [arm64]
     os: [win32]
 
-  turbo@2.6.1:
-    resolution: {integrity: sha512-qBwXXuDT3rA53kbNafGbT5r++BrhRgx3sAo0cHoDAeG9g1ItTmUMgltz3Hy7Hazy1ODqNpR+C7QwqL6DYB52yA==}
+  turbo@2.6.3:
+    resolution: {integrity: sha512-bf6YKUv11l5Xfcmg76PyWoy/e2vbkkxFNBGJSnfdSXQC33ZiUfutYh6IXidc5MhsnrFkWfdNNLyaRk+kHMLlwA==}
     hasBin: true
 
   tween-functions@1.2.0:
@@ -8157,10 +8884,6 @@ packages:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
-  type-fest@0.20.2:
-    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
-    engines: {node: '>=10'}
-
   type-fest@2.19.0:
     resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
     engines: {node: '>=12.20'}
@@ -8188,6 +8911,13 @@ packages:
   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'}
@@ -8223,24 +8953,39 @@ packages:
   unified@10.1.2:
     resolution: {integrity: sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==}
 
-  unist-util-generated@2.0.1:
-    resolution: {integrity: sha512-qF72kLmPxAw0oN2fwpWIqbXAVyEqUzDHMsbtPvOudIlUzXYFIeQIuxXQCRCFh22B7cixvU0MG7m3MW8FTq/S+A==}
+  unified@11.0.5:
+    resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
+
+  unist-util-find-after@5.0.0:
+    resolution: {integrity: sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==}
 
   unist-util-is@5.2.1:
     resolution: {integrity: sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==}
 
-  unist-util-position@4.0.4:
-    resolution: {integrity: sha512-kUBE91efOWfIVBo8xzh/uZQ7p9ffYRtUbMRZBNFYwf0RK8koUMx6dGUfwylLOKmaT2cs4wSW96QoYUSXAyEtpg==}
+  unist-util-is@6.0.0:
+    resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
+
+  unist-util-position@5.0.0:
+    resolution: {integrity: sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==}
 
   unist-util-stringify-position@3.0.3:
     resolution: {integrity: sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==}
 
+  unist-util-stringify-position@4.0.0:
+    resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
+
   unist-util-visit-parents@5.1.3:
     resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==}
 
+  unist-util-visit-parents@6.0.1:
+    resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
+
   unist-util-visit@4.1.2:
     resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==}
 
+  unist-util-visit@5.0.0:
+    resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
+
   universalify@2.0.1:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
@@ -8341,16 +9086,8 @@ packages:
     engines: {node: '>=8'}
     hasBin: true
 
-  valibot@0.41.0:
-    resolution: {integrity: sha512-igDBb8CTYr8YTQlOKgaN9nSS0Be7z+WRuaeYqGf3Cjz3aKmSnqEmYnkfVjzIuumGqfHpa3fLIvMEAfhrpqN8ng==}
-    peerDependencies:
-      typescript: 5.8.3
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  valibot@1.1.0:
-    resolution: {integrity: sha512-Nk8lX30Qhu+9txPYTwM0cFlWLdPFsFr6LblzqIySfbZph9+BFsAHsNvHOymEviUepeIW6KFHzpX8TKhbptBXXw==}
+  valibot@1.2.0:
+    resolution: {integrity: sha512-mm1rxUsmOxzrwnX5arGS+U4T25RdvpPjPN4yR0u9pUBov9+zGVtO84tif1eY4r6zWxVxu3KzIyknJy3rxfRZZg==}
     peerDependencies:
       typescript: 5.8.3
     peerDependenciesMeta:
@@ -8368,12 +9105,21 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  vfile-location@5.0.3:
+    resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
+
   vfile-message@3.1.4:
     resolution: {integrity: sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==}
 
+  vfile-message@4.0.3:
+    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
+
   vfile@5.3.7:
     resolution: {integrity: sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==}
 
+  vfile@6.0.3:
+    resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
+
   victory-vendor@36.9.2:
     resolution: {integrity: sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==}
 
@@ -8434,9 +9180,47 @@ packages:
       yaml:
         optional: true
 
+  vitest@4.0.15:
+    resolution: {integrity: sha512-n1RxDp8UJm6N0IbJLQo+yzLZ2sQCDyl1o0LeugbPWf8+8Fttp29GghsQBjYJVmWq3gBFfe9Hs1spR44vovn2wA==}
+    engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@opentelemetry/api': ^1.9.0
+      '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0
+      '@vitest/browser-playwright': 4.0.15
+      '@vitest/browser-preview': 4.0.15
+      '@vitest/browser-webdriverio': 4.0.15
+      '@vitest/ui': 4.0.15
+      happy-dom: 20.0.2
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@opentelemetry/api':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser-playwright':
+        optional: true
+      '@vitest/browser-preview':
+        optional: true
+      '@vitest/browser-webdriverio':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
   w3c-keyname@2.2.8:
     resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}
 
+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
+
   warning@4.0.3:
     resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==}
 
@@ -8444,12 +9228,19 @@ packages:
     resolution: {integrity: sha512-c5EGNOiyxxV5qmTtAB7rbiXxi1ooX1pQKMLX/MIabJjRA0SJBQOjKF+KSVfHkr9U1cADPon0mRiVe/riyaiDUA==}
     engines: {node: '>=10.13.0'}
 
+  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==}
 
+  webidl-conversions@7.0.0:
+    resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==}
+    engines: {node: '>=12'}
+
   webpack-dev-middleware@6.1.3:
     resolution: {integrity: sha512-A4ChP0Qj8oGociTs6UdlRUGANIGrCDL3y+pmQMc+dSsraXHCatFpmMey4mYELA+juqwUqwQsUgJJISXl1KWmiw==}
     engines: {node: '>= 14.15.0'}
@@ -8482,6 +9273,18 @@ packages:
       webpack-cli:
         optional: true
 
+  whatwg-encoding@3.1.1:
+    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+    engines: {node: '>=18'}
+
+  whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
+
+  whatwg-url@14.2.0:
+    resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==}
+    engines: {node: '>=18'}
+
   whatwg-url@5.0.0:
     resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
 
@@ -8516,6 +9319,11 @@ packages:
     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'}
+    hasBin: true
+
   widest-line@4.0.1:
     resolution: {integrity: sha512-o0cyEG0e8GPzT4iGHphIOh0cJOV8fivsXxddQasHPHfoZf1ZexrfeA21w2NaEN1RHE+fXlfISmOE8R9N3u3Qig==}
     engines: {node: '>=12'}
@@ -8540,6 +9348,14 @@ packages:
     resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
     engines: {node: '>=12'}
 
+  wrap-ansi@9.0.0:
+    resolution: {integrity: sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==}
+    engines: {node: '>=18'}
+
+  write-file-atomic@5.0.1:
+    resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
   ws@7.5.10:
     resolution: {integrity: sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==}
     engines: {node: '>=8.3.0'}
@@ -8564,6 +9380,13 @@ packages:
       utf-8-validate:
         optional: true
 
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+
+  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'}
@@ -8642,12 +9465,20 @@ packages:
   zod@3.25.76:
     resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
 
+  zwitch@2.0.4:
+    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
+
 snapshots:
 
   '@adobe/css-tools@4.4.4': {}
 
   '@alloc/quick-lru@5.2.0': {}
 
+  '@ampproject/remapping@2.3.0':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
   '@apm-js-collab/code-transformer@0.8.2': {}
 
   '@apm-js-collab/tracing-hooks@0.3.1':
@@ -8658,6 +9489,15 @@ snapshots:
     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)
+      '@csstools/css-color-parser': 3.0.10(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+      lru-cache: 10.4.3
+    optional: true
+
   '@atlaskit/pragmatic-drag-and-drop-auto-scroll@1.4.0':
     dependencies:
       '@atlaskit/pragmatic-drag-and-drop': 1.7.4
@@ -8676,23 +9516,43 @@ 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.5
+      '@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.5
+      '@babel/template': 7.27.2
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.5
+      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
@@ -8702,17 +9562,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/generator@7.28.3':
+  '@babel/generator@7.28.5':
     dependencies:
-      '@babel/parser': 7.28.4
-      '@babel/types': 7.28.4
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
       '@jridgewell/gen-mapping': 0.3.13
       '@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:
@@ -8722,6 +9582,19 @@ snapshots:
       lru-cache: 5.1.1
       semver: 6.3.1
 
+  '@babel/helper-create-class-features-plugin@7.28.3(@babel/core@7.28.3)':
+    dependencies:
+      '@babel/core': 7.28.3
+      '@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-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/traverse': 7.28.4
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/helper-create-class-features-plugin@7.28.3(@babel/core@7.28.4)':
     dependencies:
       '@babel/core': 7.28.4
@@ -8740,14 +9613,23 @@ snapshots:
   '@babel/helper-member-expression-to-functions@7.27.1':
     dependencies:
       '@babel/traverse': 7.28.4
-      '@babel/types': 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
+      '@babel/types': 7.28.5
+    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.28.5
+      '@babel/traverse': 7.28.4
     transitivePeerDependencies:
       - supports-color
 
@@ -8755,17 +9637,26 @@ 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)':
+    dependencies:
+      '@babel/core': 7.28.3
+      '@babel/helper-member-expression-to-functions': 7.27.1
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/traverse': 7.28.4
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/helper-replace-supers@7.27.1(@babel/core@7.28.4)':
     dependencies:
       '@babel/core': 7.28.4
@@ -8778,35 +9669,76 @@ snapshots:
   '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
     dependencies:
       '@babel/traverse': 7.28.4
-      '@babel/types': 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': {}
 
   '@babel/helpers@7.26.10':
     dependencies:
       '@babel/template': 7.27.2
-      '@babel/types': 7.28.4
+      '@babel/types': 7.28.5
 
-  '@babel/parser@7.28.4':
+  '@babel/parser@7.28.3':
     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)':
+    dependencies:
+      '@babel/core': 7.28.3
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.3)':
+    dependencies:
+      '@babel/core': 7.28.3
+      '@babel/helper-plugin-utils': 7.27.1
 
   '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.28.4)':
     dependencies:
       '@babel/core': 7.28.4
       '@babel/helper-plugin-utils': 7.27.1
 
+  '@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.28.3)':
+    dependencies:
+      '@babel/core': 7.28.3
+      '@babel/helper-plugin-utils': 7.27.1
+
   '@babel/plugin-syntax-typescript@7.27.1(@babel/core@7.28.4)':
     dependencies:
       '@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)':
+    dependencies:
+      '@babel/core': 7.28.3
+      '@babel/helper-create-class-features-plugin': 7.28.3(@babel/core@7.28.3)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-flow-strip-types@7.27.1(@babel/core@7.28.3)':
+    dependencies:
+      '@babel/core': 7.28.3
+      '@babel/helper-plugin-utils': 7.27.1
+      '@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.28.3)
+
+  '@babel/plugin-transform-modules-commonjs@7.27.1(@babel/core@7.28.3)':
+    dependencies:
+      '@babel/core': 7.28.3
+      '@babel/helper-module-transforms': 7.28.3(@babel/core@7.28.3)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/plugin-transform-modules-commonjs@7.27.1(@babel/core@7.28.4)':
     dependencies:
       '@babel/core': 7.28.4
@@ -8815,6 +9747,38 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-transform-nullish-coalescing-operator@7.27.1(@babel/core@7.28.3)':
+    dependencies:
+      '@babel/core': 7.28.3
+      '@babel/helper-plugin-utils': 7.27.1
+
+  '@babel/plugin-transform-optional-chaining@7.28.5(@babel/core@7.28.3)':
+    dependencies:
+      '@babel/core': 7.28.3
+      '@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)':
+    dependencies:
+      '@babel/core': 7.28.3
+      '@babel/helper-create-class-features-plugin': 7.28.3(@babel/core@7.28.3)
+      '@babel/helper-plugin-utils': 7.27.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-typescript@7.28.0(@babel/core@7.28.3)':
+    dependencies:
+      '@babel/core': 7.28.3
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-create-class-features-plugin': 7.28.3(@babel/core@7.28.3)
+      '@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)
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/plugin-transform-typescript@7.28.0(@babel/core@7.28.4)':
     dependencies:
       '@babel/core': 7.28.4
@@ -8826,6 +9790,24 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/preset-flow@7.27.1(@babel/core@7.28.3)':
+    dependencies:
+      '@babel/core': 7.28.3
+      '@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/preset-typescript@7.27.1(@babel/core@7.28.3)':
+    dependencies:
+      '@babel/core': 7.28.3
+      '@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)
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/preset-typescript@7.27.1(@babel/core@7.28.4)':
     dependencies:
       '@babel/core': 7.28.4
@@ -8837,6 +9819,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/register@7.28.3(@babel/core@7.28.3)':
+    dependencies:
+      '@babel/core': 7.28.3
+      clone-deep: 4.0.1
+      find-cache-dir: 2.1.0
+      make-dir: 2.1.0
+      pirates: 4.0.7
+      source-map-support: 0.5.21
+
   '@babel/runtime@7.26.10':
     dependencies:
       regenerator-runtime: 0.14.1
@@ -8844,25 +9835,25 @@ snapshots:
   '@babel/template@7.27.2':
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@babel/parser': 7.28.4
-      '@babel/types': 7.28.4
+      '@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.4':
+  '@babel/types@7.28.5':
     dependencies:
       '@babel/helper-string-parser': 7.27.1
-      '@babel/helper-validator-identifier': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
 
   '@base-ui-components/react@1.0.0-beta.3(@types/react@18.3.11)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
@@ -8949,6 +9940,31 @@ snapshots:
 
   '@colors/colors@1.6.0': {}
 
+  '@csstools/color-helpers@5.0.2':
+    optional: true
+
+  '@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)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+    optional: true
+
+  '@csstools/css-color-parser@3.0.10(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/color-helpers': 5.0.2
+      '@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)
+      '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
+      '@csstools/css-tokenizer': 3.0.4
+    optional: true
+
+  '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
+    dependencies:
+      '@csstools/css-tokenizer': 3.0.4
+    optional: true
+
+  '@csstools/css-tokenizer@3.0.4':
+    optional: true
+
   '@dabh/diagnostics@2.0.3':
     dependencies:
       colorspace: 1.1.4
@@ -8957,7 +9973,7 @@ snapshots:
 
   '@date-fns/tz@1.4.1': {}
 
-  '@dotenvx/dotenvx@1.49.0':
+  '@dotenvx/dotenvx@1.51.1':
     dependencies:
       commander: 11.1.0
       dotenv: 17.2.1
@@ -8973,13 +9989,13 @@ snapshots:
     dependencies:
       '@noble/ciphers': 1.3.0
 
-  '@emnapi/core@1.5.0':
+  '@emnapi/core@1.7.1':
     dependencies:
       '@emnapi/wasi-threads': 1.1.0
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/runtime@1.5.0':
+  '@emnapi/runtime@1.7.1':
     dependencies:
       tslib: 2.8.1
     optional: true
@@ -8989,88 +10005,13 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@emotion/babel-plugin@11.13.5':
-    dependencies:
-      '@babel/helper-module-imports': 7.27.1
-      '@babel/runtime': 7.26.10
-      '@emotion/hash': 0.9.2
-      '@emotion/memoize': 0.9.0
-      '@emotion/serialize': 1.3.3
-      babel-plugin-macros: 3.1.0
-      convert-source-map: 1.9.0
-      escape-string-regexp: 4.0.0
-      find-root: 1.1.0
-      source-map: 0.5.7
-      stylis: 4.2.0
-    transitivePeerDependencies:
-      - supports-color
-
-  '@emotion/cache@11.14.0':
-    dependencies:
-      '@emotion/memoize': 0.9.0
-      '@emotion/sheet': 1.4.0
-      '@emotion/utils': 1.4.2
-      '@emotion/weak-memoize': 0.4.0
-      stylis: 4.2.0
-
-  '@emotion/hash@0.9.2': {}
-
   '@emotion/is-prop-valid@1.3.1':
     dependencies:
       '@emotion/memoize': 0.9.0
+    optional: true
 
-  '@emotion/memoize@0.9.0': {}
-
-  '@emotion/react@11.14.0(@types/react@18.3.11)(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.26.10
-      '@emotion/babel-plugin': 11.13.5
-      '@emotion/cache': 11.14.0
-      '@emotion/serialize': 1.3.3
-      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@18.3.1)
-      '@emotion/utils': 1.4.2
-      '@emotion/weak-memoize': 0.4.0
-      hoist-non-react-statics: 3.3.2
-      react: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.3.11
-    transitivePeerDependencies:
-      - supports-color
-
-  '@emotion/serialize@1.3.3':
-    dependencies:
-      '@emotion/hash': 0.9.2
-      '@emotion/memoize': 0.9.0
-      '@emotion/unitless': 0.10.0
-      '@emotion/utils': 1.4.2
-      csstype: 3.1.3
-
-  '@emotion/sheet@1.4.0': {}
-
-  '@emotion/styled@11.14.0(@emotion/react@11.14.0(@types/react@18.3.11)(react@18.3.1))(@types/react@18.3.11)(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.26.10
-      '@emotion/babel-plugin': 11.13.5
-      '@emotion/is-prop-valid': 1.3.1
-      '@emotion/react': 11.14.0(@types/react@18.3.11)(react@18.3.1)
-      '@emotion/serialize': 1.3.3
-      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@18.3.1)
-      '@emotion/utils': 1.4.2
-      react: 18.3.1
-    optionalDependencies:
-      '@types/react': 18.3.11
-    transitivePeerDependencies:
-      - supports-color
-
-  '@emotion/unitless@0.10.0': {}
-
-  '@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@18.3.1)':
-    dependencies:
-      react: 18.3.1
-
-  '@emotion/utils@1.4.2': {}
-
-  '@emotion/weak-memoize@0.4.0': {}
+  '@emotion/memoize@0.9.0':
+    optional: true
 
   '@esbuild/aix-ppc64@0.25.0':
     optional: true
@@ -9147,19 +10088,35 @@ snapshots:
   '@esbuild/win32-x64@0.25.0':
     optional: true
 
-  '@eslint-community/eslint-utils@4.9.0(eslint@8.57.1)':
+  '@eslint-community/eslint-utils@4.9.0(eslint@9.39.1(jiti@2.6.1))':
     dependencies:
-      eslint: 8.57.1
+      eslint: 9.39.1(jiti@2.6.1)
       eslint-visitor-keys: 3.4.3
 
   '@eslint-community/regexpp@4.12.1': {}
 
-  '@eslint/eslintrc@2.1.4':
+  '@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: 9.6.1
-      globals: 13.24.0
+      espree: 10.4.0
+      globals: 14.0.0
       ignore: 5.3.2
       import-fresh: 3.3.1
       js-yaml: 4.1.1
@@ -9168,7 +10125,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/js@8.57.1': {}
+  '@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:
@@ -9205,6 +10169,12 @@ snapshots:
 
   '@floating-ui/utils@0.2.10': {}
 
+  '@fontsource-variable/inter@5.2.8': {}
+
+  '@fontsource/ibm-plex-mono@5.2.7': {}
+
+  '@fontsource/material-symbols-rounded@5.2.30': {}
+
   '@formatjs/ecma402-abstract@2.3.4':
     dependencies:
       '@formatjs/fast-memoize': 2.2.7
@@ -9309,17 +10279,23 @@ 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
 
-  '@humanwhocodes/config-array@0.13.0':
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.7':
     dependencies:
-      '@humanwhocodes/object-schema': 2.0.3
-      debug: 4.4.3
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.4.3
 
   '@humanwhocodes/module-importer@1.0.1': {}
 
-  '@humanwhocodes/object-schema@2.0.3': {}
+  '@humanwhocodes/retry@0.4.3': {}
+
+  '@hypermod/utils@0.7.1':
+    dependencies:
+      jscodeshift: 17.3.0
+    transitivePeerDependencies:
+      - '@babel/preset-env'
+      - supports-color
 
   '@hypnosphi/create-react-context@0.3.1(prop-types@15.8.1)(react@18.3.1)':
     dependencies:
@@ -9346,17 +10322,17 @@ snapshots:
     dependencies:
       string-width: 5.1.2
       string-width-cjs: string-width@4.2.3
-      strip-ansi: 7.1.2
+      strip-ansi: 7.1.0
       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.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))':
     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.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)
     optionalDependencies:
       typescript: 5.8.3
 
@@ -9406,51 +10382,18 @@ snapshots:
 
   '@napi-rs/wasm-runtime@0.2.12':
     dependencies:
-      '@emnapi/core': 1.5.0
-      '@emnapi/runtime': 1.5.0
+      '@emnapi/core': 1.7.1
+      '@emnapi/runtime': 1.7.1
       '@tybys/wasm-util': 0.10.1
     optional: true
 
-  '@napi-rs/wasm-runtime@1.0.3':
+  '@napi-rs/wasm-runtime@1.1.0':
     dependencies:
-      '@emnapi/core': 1.5.0
-      '@emnapi/runtime': 1.5.0
+      '@emnapi/core': 1.7.1
+      '@emnapi/runtime': 1.7.1
       '@tybys/wasm-util': 0.10.1
     optional: true
 
-  '@next/env@14.2.32': {}
-
-  '@next/eslint-plugin-next@14.2.32':
-    dependencies:
-      glob: 11.1.0
-
-  '@next/swc-darwin-arm64@14.2.32':
-    optional: true
-
-  '@next/swc-darwin-x64@14.2.32':
-    optional: true
-
-  '@next/swc-linux-arm64-gnu@14.2.32':
-    optional: true
-
-  '@next/swc-linux-arm64-musl@14.2.32':
-    optional: true
-
-  '@next/swc-linux-x64-gnu@14.2.32':
-    optional: true
-
-  '@next/swc-linux-x64-musl@14.2.32':
-    optional: true
-
-  '@next/swc-win32-arm64-msvc@14.2.32':
-    optional: true
-
-  '@next/swc-win32-ia32-msvc@14.2.32':
-    optional: true
-
-  '@next/swc-win32-x64-msvc@14.2.32':
-    optional: true
-
   '@noble/ciphers@1.3.0': {}
 
   '@noble/curves@1.9.7':
@@ -9459,20 +10402,6 @@ snapshots:
 
   '@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
-
-  '@nolyfill/is-core-module@1.0.39': {}
-
   '@npmcli/git@4.1.0':
     dependencies:
       '@npmcli/promise-spawn': 6.0.2
@@ -9481,7 +10410,7 @@ snapshots:
       proc-log: 3.0.0
       promise-inflight: 1.0.1
       promise-retry: 2.0.1
-      semver: 7.7.2
+      semver: 7.7.3
       which: 3.0.1
     transitivePeerDependencies:
       - bluebird
@@ -9494,7 +10423,7 @@ snapshots:
       json-parse-even-better-errors: 3.0.2
       normalize-package-data: 5.0.0
       proc-log: 3.0.0
-      semver: 7.7.2
+      semver: 7.7.3
     transitivePeerDependencies:
       - bluebird
 
@@ -9502,261 +10431,287 @@ snapshots:
     dependencies:
       which: 3.0.1
 
-  '@opentelemetry/api-logs@0.204.0':
-    dependencies:
-      '@opentelemetry/api': 1.9.0
-
-  '@opentelemetry/api-logs@0.57.2':
+  '@opentelemetry/api-logs@0.208.0':
     dependencies:
       '@opentelemetry/api': 1.9.0
 
   '@opentelemetry/api@1.9.0': {}
 
-  '@opentelemetry/context-async-hooks@2.1.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.1.0(@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.38.0
+      '@opentelemetry/semantic-conventions': 1.37.0
 
-  '@opentelemetry/instrumentation-amqplib@0.51.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-amqplib@0.55.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.204.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.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.48.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-connect@0.52.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.204.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.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.22.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-dataloader@0.26.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.204.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-express@0.53.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-express@0.57.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.204.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.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.24.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-fs@0.28.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.204.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)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-generic-pool@0.48.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-generic-pool@0.52.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.204.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-graphql@0.52.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-graphql@0.56.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.204.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-hapi@0.51.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-hapi@0.55.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.204.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.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.204.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-http@0.208.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.204.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.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.52.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-ioredis@0.56.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.204.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/redis-common': 0.38.0
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/redis-common': 0.38.2
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-kafkajs@0.14.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-kafkajs@0.18.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.204.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.37.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-knex@0.49.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-knex@0.53.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.204.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.37.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-koa@0.52.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-koa@0.57.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.204.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.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.49.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-lru-memoizer@0.53.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.204.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-mongodb@0.57.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-mongodb@0.61.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.204.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-mongoose@0.51.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-mongoose@0.55.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.204.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.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.51.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-mysql2@0.55.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.204.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
-      '@opentelemetry/sql-common': 0.41.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)
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-mysql@0.50.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-mysql@0.54.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.204.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
       '@types/mysql': 2.15.27
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-pg@0.57.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-pg@0.61.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.204.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
-      '@opentelemetry/sql-common': 0.41.0(@opentelemetry/api@1.9.0)
-      '@types/pg': 8.15.5
+      '@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.53.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-redis@0.57.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.204.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/redis-common': 0.38.0
-      '@opentelemetry/semantic-conventions': 1.38.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.23.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-tedious@0.27.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/instrumentation': 0.204.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
       '@types/tedious': 4.0.14
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation-undici@0.15.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation-undici@0.19.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.204.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/semantic-conventions': 1.37.0
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation@0.204.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/instrumentation@0.208.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/api-logs': 0.204.0
-      import-in-the-middle: 1.14.2
-      require-in-the-middle: 7.5.2
+      '@opentelemetry/api-logs': 0.208.0
+      import-in-the-middle: 2.0.0
+      require-in-the-middle: 8.0.1
     transitivePeerDependencies:
       - supports-color
 
-  '@opentelemetry/instrumentation@0.57.2(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/redis-common@0.38.2': {}
+
+  '@opentelemetry/resources@2.2.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/api-logs': 0.57.2
-      '@types/shimmer': 1.2.0
-      import-in-the-middle: 1.14.2
-      require-in-the-middle: 7.5.2
-      semver: 7.7.2
-      shimmer: 1.2.1
-    transitivePeerDependencies:
-      - supports-color
+      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
+      '@opentelemetry/semantic-conventions': 1.37.0
 
-  '@opentelemetry/redis-common@0.38.0': {}
-
-  '@opentelemetry/resources@2.1.0(@opentelemetry/api@1.9.0)':
+  '@opentelemetry/sdk-trace-base@2.2.0(@opentelemetry/api@1.9.0)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.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/sdk-trace-base@2.1.0(@opentelemetry/api@1.9.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.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
+      '@opentelemetry/core': 2.2.0(@opentelemetry/api@1.9.0)
 
-  '@opentelemetry/semantic-conventions@1.38.0': {}
+  '@oxc-parser/binding-android-arm64@0.99.0':
+    optional: true
 
-  '@opentelemetry/sql-common@0.41.0(@opentelemetry/api@1.9.0)':
+  '@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:
-      '@opentelemetry/api': 1.9.0
-      '@opentelemetry/core': 2.1.0(@opentelemetry/api@1.9.0)
+      '@napi-rs/wasm-runtime': 1.1.0
+    optional: true
 
-  '@oxc-project/runtime@0.82.3': {}
+  '@oxc-parser/binding-win32-arm64-msvc@0.99.0':
+    optional: true
 
-  '@oxc-project/types@0.82.3': {}
+  '@oxc-parser/binding-win32-x64-msvc@0.99.0':
+    optional: true
+
+  '@oxc-project/types@0.96.0': {}
+
+  '@oxc-project/types@0.99.0': {}
 
   '@popperjs/core@2.11.8': {}
 
@@ -9767,10 +10722,14 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.11
 
-  '@prisma/instrumentation@6.15.0(@opentelemetry/api@1.9.0)':
+  '@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.57.2(@opentelemetry/api@1.9.0)
+      '@opentelemetry/instrumentation': 0.208.0(@opentelemetry/api@1.9.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -10092,39 +11051,40 @@ snapshots:
       '@react-pdf/primitives': 4.1.1
       '@react-pdf/stylesheet': 6.1.0
 
-  '@react-router/dev@7.9.3(@react-router/serve@7.9.5(react-router@7.9.3(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.3(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-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.6.1)(lightningcss@1.30.2)(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.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))(yaml@2.8.1)':
     dependencies:
       '@babel/core': 7.28.4
-      '@babel/generator': 7.28.3
-      '@babel/parser': 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.4
+      '@babel/types': 7.28.5
       '@npmcli/package-json': 4.0.1
-      '@react-router/node': 7.9.3(react-router@7.9.3(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)
       '@remix-run/node-fetch-server': 0.9.0
       arg: 5.0.2
       babel-dead-code-elimination: 1.0.10
       chokidar: 3.6.0
-      dedent: 1.7.0(babel-plugin-macros@3.1.0)
+      dedent: 1.6.0(babel-plugin-macros@3.1.0)
       es-module-lexer: 1.7.0
       exit-hook: 2.2.1
       isbot: 5.1.31
       jsesc: 3.0.2
       lodash: 4.17.21
+      p-map: 7.0.3
       pathe: 1.1.2
       picocolors: 1.1.1
-      prettier: 3.6.2
+      prettier: 3.7.4
       react-refresh: 0.14.2
-      react-router: 7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      semver: 7.7.2
+      react-router: 7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      semver: 7.7.3
       tinyglobby: 0.2.15
-      valibot: 0.41.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)
+      valibot: 1.2.0(typescript@5.8.3)
+      vite: 7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(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.1)
     optionalDependencies:
-      '@react-router/serve': 7.9.5(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(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)
       typescript: 5.8.3
     transitivePeerDependencies:
       - '@types/node'
@@ -10142,95 +11102,31 @@ snapshots:
       - tsx
       - yaml
 
-  '@react-router/dev@7.9.4(@react-router/serve@7.9.5(react-router@7.9.3(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.3(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-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)':
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/generator': 7.28.3
-      '@babel/parser': 7.28.4
-      '@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.4
-      '@npmcli/package-json': 4.0.1
-      '@react-router/node': 7.9.4(react-router@7.9.3(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
-      arg: 5.0.2
-      babel-dead-code-elimination: 1.0.10
-      chokidar: 3.6.0
-      dedent: 1.7.0(babel-plugin-macros@3.1.0)
-      es-module-lexer: 1.7.0
-      exit-hook: 2.2.1
-      isbot: 5.1.31
-      jsesc: 3.0.2
-      lodash: 4.17.21
-      pathe: 1.1.2
-      picocolors: 1.1.1
-      prettier: 3.6.2
-      react-refresh: 0.14.2
-      react-router: 7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      semver: 7.7.2
-      tinyglobby: 0.2.15
-      valibot: 1.1.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)
-    optionalDependencies:
-      '@react-router/serve': 7.9.5(react-router@7.9.3(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
-      - sass
-      - sass-embedded
-      - stylus
-      - sugarss
-      - supports-color
-      - terser
-      - tsx
-      - yaml
-
-  '@react-router/express@7.9.5(express@4.21.2)(react-router@7.9.3(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.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
-      express: 4.21.2
-      react-router: 7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.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)
+      express: 4.22.0
+      react-router: 7.9.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     optionalDependencies:
       typescript: 5.8.3
 
-  '@react-router/node@7.9.3(react-router@7.9.3(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)':
     dependencies:
       '@mjackson/node-fetch-server': 0.2.0
-      react-router: 7.9.3(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)
     optionalDependencies:
       typescript: 5.8.3
 
-  '@react-router/node@7.9.4(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(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)':
     dependencies:
       '@mjackson/node-fetch-server': 0.2.0
-      react-router: 7.9.3(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.3(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.3(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.3(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.21.2)(react-router@7.9.3(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.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
+      '@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)
       compression: 1.8.1
-      express: 4.21.2
+      express: 4.22.0
       get-port: 5.1.1
       morgan: 1.10.1
-      react-router: 7.9.3(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)
       source-map-support: 0.5.21
     transitivePeerDependencies:
       - supports-color
@@ -10240,51 +11136,51 @@ snapshots:
 
   '@remix-run/node-fetch-server@0.9.0': {}
 
-  '@rolldown/binding-android-arm64@1.0.0-beta.34':
+  '@rolldown/binding-android-arm64@1.0.0-beta.46':
     optional: true
 
-  '@rolldown/binding-darwin-arm64@1.0.0-beta.34':
+  '@rolldown/binding-darwin-arm64@1.0.0-beta.46':
     optional: true
 
-  '@rolldown/binding-darwin-x64@1.0.0-beta.34':
+  '@rolldown/binding-darwin-x64@1.0.0-beta.46':
     optional: true
 
-  '@rolldown/binding-freebsd-x64@1.0.0-beta.34':
+  '@rolldown/binding-freebsd-x64@1.0.0-beta.46':
     optional: true
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.34':
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.46':
     optional: true
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.34':
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.46':
     optional: true
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.34':
+  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.46':
     optional: true
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.34':
+  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.46':
     optional: true
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-beta.34':
+  '@rolldown/binding-linux-x64-musl@1.0.0-beta.46':
     optional: true
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-beta.34':
+  '@rolldown/binding-openharmony-arm64@1.0.0-beta.46':
     optional: true
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-beta.34':
+  '@rolldown/binding-wasm32-wasi@1.0.0-beta.46':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.0.3
+      '@napi-rs/wasm-runtime': 1.1.0
     optional: true
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.34':
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.46':
     optional: true
 
-  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.34':
+  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.46':
     optional: true
 
-  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.34':
+  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.46':
     optional: true
 
-  '@rolldown/pluginutils@1.0.0-beta.34': {}
+  '@rolldown/pluginutils@1.0.0-beta.46': {}
 
   '@rollup/pluginutils@5.2.0(rollup@4.52.4)':
     dependencies:
@@ -10362,46 +11258,44 @@ snapshots:
 
   '@rtsao/scc@1.1.0': {}
 
-  '@rushstack/eslint-patch@1.12.0': {}
-
-  '@sentry-internal/browser-utils@10.24.0':
+  '@sentry-internal/browser-utils@10.27.0':
     dependencies:
-      '@sentry/core': 10.24.0
+      '@sentry/core': 10.27.0
 
-  '@sentry-internal/feedback@10.24.0':
+  '@sentry-internal/feedback@10.27.0':
     dependencies:
-      '@sentry/core': 10.24.0
+      '@sentry/core': 10.27.0
 
   '@sentry-internal/node-cpu-profiler@2.2.0':
     dependencies:
-      detect-libc: 2.1.0
+      detect-libc: 2.0.4
       node-abi: 3.75.0
 
-  '@sentry-internal/replay-canvas@10.24.0':
+  '@sentry-internal/replay-canvas@10.27.0':
     dependencies:
-      '@sentry-internal/replay': 10.24.0
-      '@sentry/core': 10.24.0
+      '@sentry-internal/replay': 10.27.0
+      '@sentry/core': 10.27.0
 
-  '@sentry-internal/replay@10.24.0':
+  '@sentry-internal/replay@10.27.0':
     dependencies:
-      '@sentry-internal/browser-utils': 10.24.0
-      '@sentry/core': 10.24.0
+      '@sentry-internal/browser-utils': 10.27.0
+      '@sentry/core': 10.27.0
 
   '@sentry/babel-plugin-component-annotate@4.6.0': {}
 
-  '@sentry/browser@10.24.0':
+  '@sentry/browser@10.27.0':
     dependencies:
-      '@sentry-internal/browser-utils': 10.24.0
-      '@sentry-internal/feedback': 10.24.0
-      '@sentry-internal/replay': 10.24.0
-      '@sentry-internal/replay-canvas': 10.24.0
-      '@sentry/core': 10.24.0
+      '@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.4
       '@sentry/babel-plugin-component-annotate': 4.6.0
-      '@sentry/cli': 2.58.1
+      '@sentry/cli': 2.58.2
       dotenv: 16.6.1
       find-up: 5.0.0
       glob: 11.1.0
@@ -10411,31 +11305,31 @@ snapshots:
       - encoding
       - supports-color
 
-  '@sentry/cli-darwin@2.58.1':
+  '@sentry/cli-darwin@2.58.2':
     optional: true
 
-  '@sentry/cli-linux-arm64@2.58.1':
+  '@sentry/cli-linux-arm64@2.58.2':
     optional: true
 
-  '@sentry/cli-linux-arm@2.58.1':
+  '@sentry/cli-linux-arm@2.58.2':
     optional: true
 
-  '@sentry/cli-linux-i686@2.58.1':
+  '@sentry/cli-linux-i686@2.58.2':
     optional: true
 
-  '@sentry/cli-linux-x64@2.58.1':
+  '@sentry/cli-linux-x64@2.58.2':
     optional: true
 
-  '@sentry/cli-win32-arm64@2.58.1':
+  '@sentry/cli-win32-arm64@2.58.2':
     optional: true
 
-  '@sentry/cli-win32-i686@2.58.1':
+  '@sentry/cli-win32-i686@2.58.2':
     optional: true
 
-  '@sentry/cli-win32-x64@2.58.1':
+  '@sentry/cli-win32-x64@2.58.2':
     optional: true
 
-  '@sentry/cli@2.58.1':
+  '@sentry/cli@2.58.2':
     dependencies:
       https-proxy-agent: 5.0.1
       node-fetch: 2.7.0
@@ -10443,117 +11337,117 @@ snapshots:
       proxy-from-env: 1.1.0
       which: 2.0.2
     optionalDependencies:
-      '@sentry/cli-darwin': 2.58.1
-      '@sentry/cli-linux-arm': 2.58.1
-      '@sentry/cli-linux-arm64': 2.58.1
-      '@sentry/cli-linux-i686': 2.58.1
-      '@sentry/cli-linux-x64': 2.58.1
-      '@sentry/cli-win32-arm64': 2.58.1
-      '@sentry/cli-win32-i686': 2.58.1
-      '@sentry/cli-win32-x64': 2.58.1
+      '@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.24.0': {}
+  '@sentry/core@10.27.0': {}
 
-  '@sentry/node-core@10.24.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.204.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.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.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/core': 2.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.204.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-base': 2.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
-      '@sentry/core': 10.24.0
-      '@sentry/opentelemetry': 10.24.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)
-      import-in-the-middle: 1.14.2
+      '@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.24.0':
+  '@sentry/node@10.27.0':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/context-async-hooks': 2.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/core': 2.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.204.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-amqplib': 0.51.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-connect': 0.48.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-dataloader': 0.22.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-express': 0.53.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-fs': 0.24.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-generic-pool': 0.48.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-graphql': 0.52.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-hapi': 0.51.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-http': 0.204.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-ioredis': 0.52.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-kafkajs': 0.14.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-knex': 0.49.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-koa': 0.52.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-lru-memoizer': 0.49.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mongodb': 0.57.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mongoose': 0.51.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mysql': 0.50.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-mysql2': 0.51.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-pg': 0.57.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-redis': 0.53.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-tedious': 0.23.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation-undici': 0.15.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/resources': 2.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-base': 2.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
-      '@prisma/instrumentation': 6.15.0(@opentelemetry/api@1.9.0)
-      '@sentry/core': 10.24.0
-      '@sentry/node-core': 10.24.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.204.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)
-      '@sentry/opentelemetry': 10.24.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.0)
-      import-in-the-middle: 1.14.2
+      '@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.24.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.1.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.38.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)':
     dependencies:
       '@opentelemetry/api': 1.9.0
-      '@opentelemetry/context-async-hooks': 2.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/core': 2.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/sdk-trace-base': 2.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
-      '@sentry/core': 10.24.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.24.0':
+  '@sentry/profiling-node@10.27.0':
     dependencies:
       '@sentry-internal/node-cpu-profiler': 2.2.0
-      '@sentry/core': 10.24.0
-      '@sentry/node': 10.24.0
+      '@sentry/core': 10.27.0
+      '@sentry/node': 10.27.0
     transitivePeerDependencies:
       - supports-color
 
-  '@sentry/react-router@10.24.0(@react-router/node@7.9.4(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3))(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
+  '@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.1.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/instrumentation': 0.204.0(@opentelemetry/api@1.9.0)
-      '@opentelemetry/semantic-conventions': 1.38.0
-      '@react-router/node': 7.9.4(react-router@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(typescript@5.8.3)
-      '@sentry/browser': 10.24.0
-      '@sentry/cli': 2.58.1
-      '@sentry/core': 10.24.0
-      '@sentry/node': 10.24.0
-      '@sentry/react': 10.24.0(react@18.3.1)
+      '@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.3(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)
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@sentry/react@10.24.0(react@18.3.1)':
+  '@sentry/react@10.27.0(react@18.3.1)':
     dependencies:
-      '@sentry/browser': 10.24.0
-      '@sentry/core': 10.24.0
+      '@sentry/browser': 10.27.0
+      '@sentry/core': 10.27.0
       hoist-non-react-statics: 3.3.2
       react: 18.3.1
 
@@ -10565,183 +11459,185 @@ snapshots:
       - encoding
       - supports-color
 
-  '@storybook/addon-actions@8.6.14(storybook@8.6.14(prettier@3.6.2))':
+  '@standard-schema/spec@1.0.0': {}
+
+  '@storybook/addon-actions@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     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.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
       uuid: 9.0.1
 
-  '@storybook/addon-backgrounds@8.6.14(storybook@8.6.14(prettier@3.6.2))':
+  '@storybook/addon-backgrounds@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     dependencies:
       '@storybook/global': 5.0.0
       memoizerific: 1.11.3
-      storybook: 8.6.14(prettier@3.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
       ts-dedent: 2.2.0
 
-  '@storybook/addon-controls@8.6.14(storybook@8.6.14(prettier@3.6.2))':
+  '@storybook/addon-controls@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     dependencies:
       '@storybook/global': 5.0.0
       dequal: 2.0.3
-      storybook: 8.6.14(prettier@3.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
       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.6.2)(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.6.2)(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.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     dependencies:
       '@figspec/react': 1.0.4(react@18.3.1)
-      storybook: 9.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
     optionalDependencies:
-      '@storybook/addon-docs': 9.1.10(@types/react@18.3.11)(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(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.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
       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.6.2))':
+  '@storybook/addon-docs@8.6.14(@types/react@18.3.11)(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     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.6.2))
-      '@storybook/csf-plugin': 8.6.14(storybook@8.6.14(prettier@3.6.2))
-      '@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.6.2))
+      '@storybook/blocks': 8.6.14(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
+      '@storybook/csf-plugin': 8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
+      '@storybook/react-dom-shim': 8.6.14(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      storybook: 8.6.14(prettier@3.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
       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.6.2)(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.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     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.6.2)(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.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
       '@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.6.2)(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.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
       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.6.2)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
       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.6.2))':
+  '@storybook/addon-essentials@8.6.14(@types/react@18.3.11)(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     dependencies:
-      '@storybook/addon-actions': 8.6.14(storybook@8.6.14(prettier@3.6.2))
-      '@storybook/addon-backgrounds': 8.6.14(storybook@8.6.14(prettier@3.6.2))
-      '@storybook/addon-controls': 8.6.14(storybook@8.6.14(prettier@3.6.2))
-      '@storybook/addon-docs': 8.6.14(@types/react@18.3.11)(storybook@8.6.14(prettier@3.6.2))
-      '@storybook/addon-highlight': 8.6.14(storybook@8.6.14(prettier@3.6.2))
-      '@storybook/addon-measure': 8.6.14(storybook@8.6.14(prettier@3.6.2))
-      '@storybook/addon-outline': 8.6.14(storybook@8.6.14(prettier@3.6.2))
-      '@storybook/addon-toolbars': 8.6.14(storybook@8.6.14(prettier@3.6.2))
-      '@storybook/addon-viewport': 8.6.14(storybook@8.6.14(prettier@3.6.2))
-      storybook: 8.6.14(prettier@3.6.2)
+      '@storybook/addon-actions': 8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
+      '@storybook/addon-backgrounds': 8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
+      '@storybook/addon-controls': 8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
+      '@storybook/addon-docs': 8.6.14(@types/react@18.3.11)(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
+      '@storybook/addon-highlight': 8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
+      '@storybook/addon-measure': 8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
+      '@storybook/addon-outline': 8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
+      '@storybook/addon-toolbars': 8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
+      '@storybook/addon-viewport': 8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
 
-  '@storybook/addon-highlight@8.6.14(storybook@8.6.14(prettier@3.6.2))':
+  '@storybook/addon-highlight@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 8.6.14(prettier@3.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
 
-  '@storybook/addon-interactions@8.6.14(storybook@8.6.14(prettier@3.6.2))':
+  '@storybook/addon-interactions@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/instrumenter': 8.6.14(storybook@8.6.14(prettier@3.6.2))
-      '@storybook/test': 8.6.14(storybook@8.6.14(prettier@3.6.2))
+      '@storybook/instrumenter': 8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
+      '@storybook/test': 8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
       polished: 4.3.1
-      storybook: 8.6.14(prettier@3.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
       ts-dedent: 2.2.0
 
-  '@storybook/addon-links@8.6.14(react@18.3.1)(storybook@8.6.14(prettier@3.6.2))':
+  '@storybook/addon-links@8.6.14(react@18.3.1)(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 8.6.14(prettier@3.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
       ts-dedent: 2.2.0
     optionalDependencies:
       react: 18.3.1
 
-  '@storybook/addon-measure@8.6.14(storybook@8.6.14(prettier@3.6.2))':
+  '@storybook/addon-measure@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 8.6.14(prettier@3.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
       tiny-invariant: 1.3.3
 
-  '@storybook/addon-onboarding@8.6.14(storybook@8.6.14(prettier@3.6.2))':
+  '@storybook/addon-onboarding@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     dependencies:
-      storybook: 8.6.14(prettier@3.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
 
-  '@storybook/addon-outline@8.6.14(storybook@8.6.14(prettier@3.6.2))':
+  '@storybook/addon-outline@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 8.6.14(prettier@3.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
       ts-dedent: 2.2.0
 
-  '@storybook/addon-styling-webpack@1.0.1(storybook@8.6.14(prettier@3.6.2))(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.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17)))':
     dependencies:
-      '@storybook/node-logger': 8.6.14(storybook@8.6.14(prettier@3.6.2))
-      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.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
+      webpack: 5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))
     transitivePeerDependencies:
       - storybook
 
-  '@storybook/addon-toolbars@8.6.14(storybook@8.6.14(prettier@3.6.2))':
+  '@storybook/addon-toolbars@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     dependencies:
-      storybook: 8.6.14(prettier@3.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
 
-  '@storybook/addon-viewport@8.6.14(storybook@8.6.14(prettier@3.6.2))':
+  '@storybook/addon-viewport@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     dependencies:
       memoizerific: 1.11.3
-      storybook: 8.6.14(prettier@3.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
 
-  '@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.101.3(@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.101.3(@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.6.2))':
+  '@storybook/blocks@8.6.14(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     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.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
       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.6.2)(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.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))':
     dependencies:
-      '@storybook/csf-plugin': 9.1.10(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(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.6.2)(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.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
       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.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)
 
-  '@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.6.2))(typescript@5.8.3)':
+  '@storybook/builder-webpack5@8.6.14(@swc/core@1.13.5(@swc/helpers@0.5.17))(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3)':
     dependencies:
-      '@storybook/core-webpack': 8.6.14(storybook@8.6.14(prettier@3.6.2))
+      '@storybook/core-webpack': 8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
       '@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.101.3(@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.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17)))
+      html-webpack-plugin: 5.6.4(webpack@5.101.3(@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.2
-      storybook: 8.6.14(prettier@3.6.2)
-      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.3
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
+      style-loader: 3.3.4(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17)))
+      terser-webpack-plugin: 5.3.14(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack@5.101.3(@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.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))
+      webpack-dev-middleware: 6.1.3(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17)))
       webpack-hot-middleware: 2.26.1
       webpack-virtual-modules: 0.6.2
     optionalDependencies:
@@ -10753,44 +11649,23 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@storybook/components@8.6.14(storybook@8.6.14(prettier@3.6.2))':
+  '@storybook/components@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     dependencies:
-      storybook: 8.6.14(prettier@3.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
 
-  '@storybook/core-webpack@8.6.14(storybook@8.6.14(prettier@3.6.2))':
+  '@storybook/core-webpack@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     dependencies:
-      storybook: 8.6.14(prettier@3.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
       ts-dedent: 2.2.0
 
-  '@storybook/core@8.6.14(prettier@3.6.2)(storybook@8.6.14(prettier@3.6.2))':
+  '@storybook/csf-plugin@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     dependencies:
-      '@storybook/theming': 8.6.14(storybook@8.6.14(prettier@3.6.2))
-      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.2
-      util: 0.12.5
-      ws: 8.18.3
-    optionalDependencies:
-      prettier: 3.6.2
-    transitivePeerDependencies:
-      - bufferutil
-      - storybook
-      - supports-color
-      - utf-8-validate
-
-  '@storybook/csf-plugin@8.6.14(storybook@8.6.14(prettier@3.6.2))':
-    dependencies:
-      storybook: 8.6.14(prettier@3.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
       unplugin: 1.16.1
 
-  '@storybook/csf-plugin@9.1.10(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(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.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     dependencies:
-      storybook: 9.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
       unplugin: 1.16.1
 
   '@storybook/global@5.0.0': {}
@@ -10800,36 +11675,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.6.2))':
+  '@storybook/instrumenter@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     dependencies:
       '@storybook/global': 5.0.0
       '@vitest/utils': 2.1.9
-      storybook: 8.6.14(prettier@3.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
 
-  '@storybook/manager-api@8.6.14(storybook@8.6.14(prettier@3.6.2))':
+  '@storybook/manager-api@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     dependencies:
-      storybook: 8.6.14(prettier@3.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
 
-  '@storybook/node-logger@8.6.14(storybook@8.6.14(prettier@3.6.2))':
+  '@storybook/node-logger@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     dependencies:
-      storybook: 8.6.14(prettier@3.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
 
-  '@storybook/preset-react-webpack@8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2)))(@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.6.2))(typescript@5.8.3)':
+  '@storybook/preset-react-webpack@8.6.14(@storybook/test@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))))(@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.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3)':
     dependencies:
-      '@storybook/core-webpack': 8.6.14(storybook@8.6.14(prettier@3.6.2))
-      '@storybook/react': 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.6.2))(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.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
+      '@storybook/react': 8.6.14(@storybook/test@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))(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)))
       '@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.2
-      storybook: 8.6.14(prettier@3.6.2)
+      semver: 7.7.3
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
       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.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -10840,11 +11715,11 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@storybook/preview-api@8.6.14(storybook@8.6.14(prettier@3.6.2))':
+  '@storybook/preview-api@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     dependencies:
-      storybook: 8.6.14(prettier@3.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
 
-  '@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.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17)))':
     dependencies:
       debug: 4.4.3
       endent: 2.1.0
@@ -10854,50 +11729,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.101.3(@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.6.2))':
+  '@storybook/react-dom-shim@8.6.14(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     dependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      storybook: 8.6.14(prettier@3.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(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.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(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.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     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.6.2)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(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.52.4)(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(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.52.4)(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))':
     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))
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.6.1(typescript@5.8.3)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(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.6.2)(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.6.2)(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/builder-vite': 9.1.10(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(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.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3)
       find-up: 7.0.0
       magic-string: 0.30.19
       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.6.2)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
       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.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)
     transitivePeerDependencies:
       - rollup
       - supports-color
       - typescript
 
-  '@storybook/react-webpack5@8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2)))(@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.6.2))(typescript@5.8.3)':
+  '@storybook/react-webpack5@8.6.14(@storybook/test@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))))(@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.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))(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.6.2))(typescript@5.8.3)
-      '@storybook/preset-react-webpack': 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2)))(@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.6.2))(typescript@5.8.3)
-      '@storybook/react': 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.6.2))(typescript@5.8.3)
+      '@storybook/builder-webpack5': 8.6.14(@swc/core@1.13.5(@swc/helpers@0.5.17))(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3)
+      '@storybook/preset-react-webpack': 8.6.14(@storybook/test@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))))(@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.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3)
+      '@storybook/react': 8.6.14(@storybook/test@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      storybook: 8.6.14(prettier@3.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -10909,45 +11784,45 @@ snapshots:
       - uglify-js
       - webpack-cli
 
-  '@storybook/react@8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.6.14(prettier@3.6.2))(typescript@5.8.3)':
+  '@storybook/react@8.6.14(@storybook/test@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3)':
     dependencies:
-      '@storybook/components': 8.6.14(storybook@8.6.14(prettier@3.6.2))
+      '@storybook/components': 8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
       '@storybook/global': 5.0.0
-      '@storybook/manager-api': 8.6.14(storybook@8.6.14(prettier@3.6.2))
-      '@storybook/preview-api': 8.6.14(storybook@8.6.14(prettier@3.6.2))
-      '@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.6.2))
-      '@storybook/theming': 8.6.14(storybook@8.6.14(prettier@3.6.2))
+      '@storybook/manager-api': 8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
+      '@storybook/preview-api': 8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
+      '@storybook/react-dom-shim': 8.6.14(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
+      '@storybook/theming': 8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      storybook: 8.6.14(prettier@3.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
     optionalDependencies:
-      '@storybook/test': 8.6.14(storybook@8.6.14(prettier@3.6.2))
+      '@storybook/test': 8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(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.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(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.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))(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.6.2)(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.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
       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.6.2)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
     optionalDependencies:
       typescript: 5.8.3
 
-  '@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2))':
+  '@storybook/test@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/instrumenter': 8.6.14(storybook@8.6.14(prettier@3.6.2))
+      '@storybook/instrumenter': 8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))
       '@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.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
 
-  '@storybook/theming@8.6.14(storybook@8.6.14(prettier@3.6.2))':
+  '@storybook/theming@8.6.14(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))':
     dependencies:
-      storybook: 8.6.14(prettier@3.6.2)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
 
   '@swc/core-darwin-arm64@1.13.5':
     optional: true
@@ -11002,26 +11877,82 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@swc/helpers@0.5.5':
-    dependencies:
-      '@swc/counter': 0.1.3
-      tslib: 2.8.1
-
   '@swc/types@0.1.24':
     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:
@@ -11077,165 +12008,165 @@ snapshots:
     dependencies:
       '@testing-library/dom': 10.4.0
 
-  '@tiptap/core@2.26.3(@tiptap/pm@2.26.3)':
+  '@tiptap/core@2.26.3(@tiptap/pm@2.26.1)':
     dependencies:
-      '@tiptap/pm': 2.26.3
+      '@tiptap/pm': 2.26.1
 
   '@tiptap/core@2.26.3(@tiptap/pm@3.6.6)':
     dependencies:
       '@tiptap/pm': 3.6.6
 
-  '@tiptap/extension-blockquote@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))':
+  '@tiptap/extension-blockquote@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
 
-  '@tiptap/extension-bold@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))':
+  '@tiptap/extension-bold@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
 
-  '@tiptap/extension-bubble-menu@2.26.3(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)':
+  '@tiptap/extension-bubble-menu@2.26.3(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
-      '@tiptap/pm': 2.26.3
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
       tippy.js: 6.3.7
 
-  '@tiptap/extension-bullet-list@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))':
+  '@tiptap/extension-bullet-list@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
 
-  '@tiptap/extension-character-count@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)':
+  '@tiptap/extension-character-count@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
-      '@tiptap/pm': 2.26.3
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
 
-  '@tiptap/extension-code-block@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)':
+  '@tiptap/extension-code-block@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
-      '@tiptap/pm': 2.26.3
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
 
-  '@tiptap/extension-code@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))':
+  '@tiptap/extension-code@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
 
-  '@tiptap/extension-collaboration@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)(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))':
+  '@tiptap/extension-collaboration@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)(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))':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
-      '@tiptap/pm': 2.26.3
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
       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)
 
-  '@tiptap/extension-document@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))':
+  '@tiptap/extension-document@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
 
-  '@tiptap/extension-dropcursor@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)':
+  '@tiptap/extension-dropcursor@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
-      '@tiptap/pm': 2.26.3
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
 
-  '@tiptap/extension-emoji@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)(@tiptap/suggestion@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3))(emojibase@16.0.0)':
+  '@tiptap/extension-emoji@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)(@tiptap/suggestion@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1))(emojibase@16.0.0)':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
-      '@tiptap/pm': 2.26.3
-      '@tiptap/suggestion': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
+      '@tiptap/suggestion': 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
       emoji-regex: 10.5.0
       emojibase-data: 15.3.2(emojibase@16.0.0)
       is-emoji-supported: 0.0.5
     transitivePeerDependencies:
       - emojibase
 
-  '@tiptap/extension-floating-menu@2.26.3(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)':
+  '@tiptap/extension-floating-menu@2.26.3(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
-      '@tiptap/pm': 2.26.3
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
       tippy.js: 6.3.7
 
-  '@tiptap/extension-gapcursor@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)':
+  '@tiptap/extension-gapcursor@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
-      '@tiptap/pm': 2.26.3
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
 
-  '@tiptap/extension-hard-break@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))':
+  '@tiptap/extension-hard-break@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
 
-  '@tiptap/extension-heading@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))':
+  '@tiptap/extension-heading@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
 
-  '@tiptap/extension-history@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)':
+  '@tiptap/extension-history@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
-      '@tiptap/pm': 2.26.3
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
 
-  '@tiptap/extension-horizontal-rule@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)':
+  '@tiptap/extension-horizontal-rule@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
-      '@tiptap/pm': 2.26.3
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
 
-  '@tiptap/extension-image@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))':
+  '@tiptap/extension-image@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
 
-  '@tiptap/extension-italic@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))':
+  '@tiptap/extension-italic@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
 
-  '@tiptap/extension-list-item@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))':
+  '@tiptap/extension-list-item@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
 
-  '@tiptap/extension-mention@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)(@tiptap/suggestion@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3))':
+  '@tiptap/extension-mention@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)(@tiptap/suggestion@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1))':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
-      '@tiptap/pm': 2.26.3
-      '@tiptap/suggestion': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
+      '@tiptap/suggestion': 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
 
-  '@tiptap/extension-ordered-list@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))':
+  '@tiptap/extension-ordered-list@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
 
-  '@tiptap/extension-paragraph@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))':
+  '@tiptap/extension-paragraph@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
 
-  '@tiptap/extension-placeholder@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)':
+  '@tiptap/extension-placeholder@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
-      '@tiptap/pm': 2.26.3
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
 
-  '@tiptap/extension-strike@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))':
+  '@tiptap/extension-strike@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
 
-  '@tiptap/extension-task-item@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)':
+  '@tiptap/extension-task-item@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
-      '@tiptap/pm': 2.26.3
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
 
-  '@tiptap/extension-task-list@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))':
+  '@tiptap/extension-task-list@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
 
-  '@tiptap/extension-text-align@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))':
+  '@tiptap/extension-text-align@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
 
-  '@tiptap/extension-text-style@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))':
+  '@tiptap/extension-text-style@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
 
-  '@tiptap/extension-text@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))':
+  '@tiptap/extension-text@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
 
-  '@tiptap/extension-underline@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))':
+  '@tiptap/extension-underline@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
 
-  '@tiptap/html@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)':
+  '@tiptap/html@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
-      '@tiptap/pm': 2.26.3
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
       zeed-dom: 0.15.1
 
   '@tiptap/html@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@3.6.6))(@tiptap/pm@3.6.6)':
@@ -11244,7 +12175,7 @@ snapshots:
       '@tiptap/pm': 3.6.6
       zeed-dom: 0.15.1
 
-  '@tiptap/pm@2.26.3':
+  '@tiptap/pm@2.26.1':
     dependencies:
       prosemirror-changeset: 2.3.1
       prosemirror-collab: 1.3.1
@@ -11286,12 +12217,12 @@ snapshots:
       prosemirror-transform: 1.10.4
       prosemirror-view: 1.40.0
 
-  '@tiptap/react@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@tiptap/react@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
-      '@tiptap/extension-bubble-menu': 2.26.3(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)
-      '@tiptap/extension-floating-menu': 2.26.3(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)
-      '@tiptap/pm': 2.26.3
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/extension-bubble-menu': 2.26.3(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
+      '@tiptap/extension-floating-menu': 2.26.3(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
       '@types/use-sync-external-store': 0.0.6
       fast-deep-equal: 3.1.3
       react: 18.3.1
@@ -11300,32 +12231,32 @@ snapshots:
 
   '@tiptap/starter-kit@2.26.1':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
-      '@tiptap/extension-blockquote': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))
-      '@tiptap/extension-bold': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))
-      '@tiptap/extension-bullet-list': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))
-      '@tiptap/extension-code': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))
-      '@tiptap/extension-code-block': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)
-      '@tiptap/extension-document': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))
-      '@tiptap/extension-dropcursor': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)
-      '@tiptap/extension-gapcursor': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)
-      '@tiptap/extension-hard-break': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))
-      '@tiptap/extension-heading': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))
-      '@tiptap/extension-history': 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)
-      '@tiptap/extension-horizontal-rule': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)
-      '@tiptap/extension-italic': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))
-      '@tiptap/extension-list-item': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))
-      '@tiptap/extension-ordered-list': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))
-      '@tiptap/extension-paragraph': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))
-      '@tiptap/extension-strike': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))
-      '@tiptap/extension-text': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))
-      '@tiptap/extension-text-style': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))
-      '@tiptap/pm': 2.26.3
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/extension-blockquote': 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-bold': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-bullet-list': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-code': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-code-block': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
+      '@tiptap/extension-document': 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-dropcursor': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
+      '@tiptap/extension-gapcursor': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
+      '@tiptap/extension-hard-break': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-heading': 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-history': 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
+      '@tiptap/extension-horizontal-rule': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)
+      '@tiptap/extension-italic': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-list-item': 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-ordered-list': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-paragraph': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-strike': 2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-text': 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/extension-text-style': 2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))
+      '@tiptap/pm': 2.26.1
 
-  '@tiptap/suggestion@2.26.2(@tiptap/core@2.26.3(@tiptap/pm@2.26.3))(@tiptap/pm@2.26.3)':
+  '@tiptap/suggestion@2.26.1(@tiptap/core@2.26.3(@tiptap/pm@2.26.1))(@tiptap/pm@2.26.1)':
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
-      '@tiptap/pm': 2.26.3
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
+      '@tiptap/pm': 2.26.1
 
   '@tokenizer/inflate@0.2.7':
     dependencies:
@@ -11346,24 +12277,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:
@@ -11374,6 +12305,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
@@ -11472,6 +12405,11 @@ snapshots:
 
   '@types/http-errors@2.0.5': {}
 
+  '@types/jscodeshift@17.3.0':
+    dependencies:
+      ast-types: 0.16.1
+      recast: 0.23.11
+
   '@types/json-schema@7.0.15': {}
 
   '@types/json5@0.0.29': {}
@@ -11500,6 +12438,10 @@ snapshots:
     dependencies:
       '@types/unist': 2.0.11
 
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
   '@types/mdurl@1.0.5': {}
 
   '@types/mdurl@2.0.0': {}
@@ -11522,9 +12464,9 @@ snapshots:
 
   '@types/pg-pool@2.0.6':
     dependencies:
-      '@types/pg': 8.15.5
+      '@types/pg': 8.15.6
 
-  '@types/pg@8.15.5':
+  '@types/pg@8.15.6':
     dependencies:
       '@types/node': 22.12.0
       pg-protocol: 1.10.3
@@ -11556,6 +12498,10 @@ snapshots:
 
   '@types/resolve@1.20.6': {}
 
+  '@types/sanitize-html@2.16.0':
+    dependencies:
+      htmlparser2: 8.0.2
+
   '@types/semver@7.7.1': {}
 
   '@types/send@0.17.5':
@@ -11569,8 +12515,6 @@ snapshots:
       '@types/node': 22.12.0
       '@types/send': 0.17.5
 
-  '@types/shimmer@1.2.0': {}
-
   '@types/tedious@4.0.14':
     dependencies:
       '@types/node': 22.12.0
@@ -11591,15 +12535,15 @@ snapshots:
     dependencies:
       '@types/node': 22.12.0
 
-  '@typescript-eslint/eslint-plugin@8.45.0(@typescript-eslint/parser@8.45.0(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1)(typescript@5.8.3)':
+  '@typescript-eslint/eslint-plugin@8.48.1(@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.8.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.8.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.45.0(eslint@8.57.1)(typescript@5.8.3)
-      '@typescript-eslint/scope-manager': 8.45.0
-      '@typescript-eslint/type-utils': 8.45.0(eslint@8.57.1)(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.45.0(eslint@8.57.1)(typescript@5.8.3)
-      '@typescript-eslint/visitor-keys': 8.45.0
-      eslint: 8.57.1
+      '@typescript-eslint/parser': 8.48.1(eslint@9.39.1(jiti@2.6.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.6.1))(typescript@5.8.3)
+      '@typescript-eslint/utils': 8.48.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.8.3)
+      '@typescript-eslint/visitor-keys': 8.48.1
+      eslint: 9.39.1(jiti@2.6.1)
       graphemer: 1.4.0
       ignore: 7.0.5
       natural-compare: 1.4.0
@@ -11608,80 +12552,130 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.45.0(eslint@8.57.1)(typescript@5.8.3)':
+  '@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.8.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.45.0
-      '@typescript-eslint/types': 8.45.0
-      '@typescript-eslint/typescript-estree': 8.45.0(typescript@5.8.3)
-      '@typescript-eslint/visitor-keys': 8.45.0
+      '@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: 8.57.1
+      eslint: 9.39.1(jiti@2.6.1)
       typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.45.0(typescript@5.8.3)':
+  '@typescript-eslint/project-service@8.48.1(typescript@5.8.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.45.0(typescript@5.8.3)
-      '@typescript-eslint/types': 8.45.0
+      '@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.45.0':
+  '@typescript-eslint/project-service@8.49.0(typescript@5.8.3)':
     dependencies:
-      '@typescript-eslint/types': 8.45.0
-      '@typescript-eslint/visitor-keys': 8.45.0
+      '@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/tsconfig-utils@8.45.0(typescript@5.8.3)':
+  '@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/type-utils@8.45.0(eslint@8.57.1)(typescript@5.8.3)':
+  '@typescript-eslint/tsconfig-utils@8.49.0(typescript@5.8.3)':
     dependencies:
-      '@typescript-eslint/types': 8.45.0
-      '@typescript-eslint/typescript-estree': 8.45.0(typescript@5.8.3)
-      '@typescript-eslint/utils': 8.45.0(eslint@8.57.1)(typescript@5.8.3)
+      typescript: 5.8.3
+
+  '@typescript-eslint/type-utils@8.48.1(eslint@9.39.1(jiti@2.6.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.6.1))(typescript@5.8.3)
       debug: 4.4.3
-      eslint: 8.57.1
+      eslint: 9.39.1(jiti@2.6.1)
       ts-api-utils: 2.1.0(typescript@5.8.3)
       typescript: 5.8.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@8.45.0': {}
+  '@typescript-eslint/types@8.48.1': {}
 
-  '@typescript-eslint/typescript-estree@8.45.0(typescript@5.8.3)':
+  '@typescript-eslint/types@8.49.0': {}
+
+  '@typescript-eslint/typescript-estree@8.48.1(typescript@5.8.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.45.0(typescript@5.8.3)
-      '@typescript-eslint/tsconfig-utils': 8.45.0(typescript@5.8.3)
-      '@typescript-eslint/types': 8.45.0
-      '@typescript-eslint/visitor-keys': 8.45.0
+      '@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
-      fast-glob: 3.3.3
-      is-glob: 4.0.3
       minimatch: 9.0.5
-      semver: 7.7.2
+      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.45.0(eslint@8.57.1)(typescript@5.8.3)':
+  '@typescript-eslint/typescript-estree@8.49.0(typescript@5.8.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@8.57.1)
-      '@typescript-eslint/scope-manager': 8.45.0
-      '@typescript-eslint/types': 8.45.0
-      '@typescript-eslint/typescript-estree': 8.45.0(typescript@5.8.3)
-      eslint: 8.57.1
+      '@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/visitor-keys@8.45.0':
+  '@typescript-eslint/utils@8.48.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.8.3)':
     dependencies:
-      '@typescript-eslint/types': 8.45.0
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.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.6.1)
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.49.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.8.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.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.6.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': {}
@@ -11745,6 +12739,17 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
     optional: true
 
+  '@vitest/eslint-plugin@1.5.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.8.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.1))':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.49.0
+      '@typescript-eslint/utils': 8.49.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.8.3)
+      eslint: 9.39.1(jiti@2.6.1)
+    optionalDependencies:
+      typescript: 5.8.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.1)
+    transitivePeerDependencies:
+      - supports-color
+
   '@vitest/expect@2.0.5':
     dependencies:
       '@vitest/spy': 2.0.5
@@ -11760,13 +12765,30 @@ snapshots:
       chai: 5.3.3
       tinyrainbow: 2.0.0
 
-  '@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/expect@4.0.15':
+    dependencies:
+      '@standard-schema/spec': 1.0.0
+      '@types/chai': 5.2.2
+      '@vitest/spy': 4.0.15
+      '@vitest/utils': 4.0.15
+      chai: 6.2.1
+      tinyrainbow: 3.0.3
+
+  '@vitest/mocker@3.2.4(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))':
     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.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)
+
+  '@vitest/mocker@4.0.15(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))':
+    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.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)
 
   '@vitest/pretty-format@2.0.5':
     dependencies:
@@ -11780,6 +12802,21 @@ snapshots:
     dependencies:
       tinyrainbow: 2.0.0
 
+  '@vitest/pretty-format@4.0.15':
+    dependencies:
+      tinyrainbow: 3.0.3
+
+  '@vitest/runner@4.0.15':
+    dependencies:
+      '@vitest/utils': 4.0.15
+      pathe: 2.0.3
+
+  '@vitest/snapshot@4.0.15':
+    dependencies:
+      '@vitest/pretty-format': 4.0.15
+      magic-string: 0.30.21
+      pathe: 2.0.3
+
   '@vitest/spy@2.0.5':
     dependencies:
       tinyspy: 3.0.2
@@ -11788,6 +12825,8 @@ snapshots:
     dependencies:
       tinyspy: 4.0.3
 
+  '@vitest/spy@4.0.15': {}
+
   '@vitest/utils@2.0.5':
     dependencies:
       '@vitest/pretty-format': 2.0.5
@@ -11807,6 +12846,11 @@ snapshots:
       loupe: 3.2.1
       tinyrainbow: 2.0.0
 
+  '@vitest/utils@4.0.15':
+    dependencies:
+      '@vitest/pretty-format': 4.0.15
+      tinyrainbow: 3.0.3
+
   '@webassemblyjs/ast@1.14.1':
     dependencies:
       '@webassemblyjs/helper-numbers': 1.13.2
@@ -11916,6 +12960,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  agent-base@7.1.4:
+    optional: true
+
   ajv-formats@2.1.1(ajv@8.17.1):
     optionalDependencies:
       ajv: 8.17.1
@@ -11954,6 +13001,10 @@ snapshots:
     dependencies:
       string-width: 4.2.3
 
+  ansi-escapes@7.0.0:
+    dependencies:
+      environment: 1.1.0
+
   ansi-html-community@0.0.8: {}
 
   ansi-regex@5.0.1: {}
@@ -11974,8 +13025,6 @@ snapshots:
 
   ansis@4.2.0: {}
 
-  any-promise@1.3.0: {}
-
   anymatch@3.1.3:
     dependencies:
       normalize-path: 3.0.0
@@ -12068,13 +13117,17 @@ snapshots:
 
   assertion-error@2.0.1: {}
 
-  ast-kit@2.1.2:
+  ast-kit@2.2.0:
     dependencies:
-      '@babel/parser': 7.28.4
+      '@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
+
   ast-types@0.16.1:
     dependencies:
       tslib: 2.8.1
@@ -12092,7 +13145,7 @@ snapshots:
   autoprefixer@10.4.21(postcss@8.5.6):
     dependencies:
       browserslist: 4.26.2
-      caniuse-lite: 1.0.30001743
+      caniuse-lite: 1.0.30001759
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.1.1
@@ -12118,9 +13171,9 @@ snapshots:
   babel-dead-code-elimination@1.0.10:
     dependencies:
       '@babel/core': 7.28.4
-      '@babel/parser': 7.28.4
+      '@babel/parser': 7.28.5
       '@babel/traverse': 7.28.4
-      '@babel/types': 7.28.4
+      '@babel/types': 7.28.5
     transitivePeerDependencies:
       - supports-color
 
@@ -12129,6 +13182,7 @@ snapshots:
       '@babel/runtime': 7.26.10
       cosmiconfig: 7.1.0
       resolve: 1.22.10
+    optional: true
 
   bail@2.0.2: {}
 
@@ -12158,7 +13212,7 @@ snapshots:
 
   bind-event-listener@3.0.0: {}
 
-  birpc@2.6.1: {}
+  birpc@2.9.0: {}
 
   bluebird@3.7.2: {}
 
@@ -12213,7 +13267,7 @@ snapshots:
   browserslist@4.26.2:
     dependencies:
       baseline-browser-mapping: 2.8.4
-      caniuse-lite: 1.0.30001743
+      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)
@@ -12225,10 +13279,6 @@ snapshots:
       base64-js: 1.5.1
       ieee754: 1.2.1
 
-  busboy@1.6.0:
-    dependencies:
-      streamsearch: 1.1.0
-
   bytes@3.0.0: {}
 
   bytes@3.1.2: {}
@@ -12259,11 +13309,9 @@ snapshots:
       pascal-case: 3.1.2
       tslib: 2.8.1
 
-  camelcase-css@2.0.1: {}
-
   camelcase@7.0.1: {}
 
-  caniuse-lite@1.0.30001743: {}
+  caniuse-lite@1.0.30001759: {}
 
   capital-case@1.0.4:
     dependencies:
@@ -12273,6 +13321,8 @@ snapshots:
 
   case-sensitive-paths-webpack-plugin@2.4.0: {}
 
+  ccount@2.0.1: {}
+
   chai@5.3.3:
     dependencies:
       assertion-error: 2.0.1
@@ -12281,6 +13331,8 @@ snapshots:
       loupe: 3.2.1
       pathval: 2.0.1
 
+  chai@6.2.1: {}
+
   chalk-template@0.4.0:
     dependencies:
       chalk: 4.1.2
@@ -12318,6 +13370,10 @@ snapshots:
       snake-case: 3.0.4
       tslib: 2.8.1
 
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@3.0.0: {}
+
   character-entities@2.0.2: {}
 
   check-error@2.1.1: {}
@@ -12334,6 +13390,8 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  chroma-js@3.2.0: {}
+
   chromatic@11.29.0: {}
 
   chrome-trace-event@1.0.4: {}
@@ -12352,6 +13410,15 @@ snapshots:
 
   cli-boxes@3.0.0: {}
 
+  cli-cursor@5.0.0:
+    dependencies:
+      restore-cursor: 5.1.0
+
+  cli-truncate@5.1.1:
+    dependencies:
+      slice-ansi: 7.1.2
+      string-width: 8.1.0
+
   client-only@0.0.1: {}
 
   clipboardy@3.0.0:
@@ -12366,6 +13433,12 @@ snapshots:
       strip-ansi: 6.0.1
       wrap-ansi: 7.0.0
 
+  clone-deep@4.0.1:
+    dependencies:
+      is-plain-object: 2.0.4
+      kind-of: 6.0.3
+      shallow-clone: 3.0.1
+
   clone@2.1.2: {}
 
   clsx@2.1.1: {}
@@ -12423,9 +13496,9 @@ snapshots:
 
   commander@11.1.0: {}
 
-  commander@2.20.3: {}
+  commander@14.0.2: {}
 
-  commander@4.1.1: {}
+  commander@2.20.3: {}
 
   commander@8.3.0: {}
 
@@ -12465,8 +13538,6 @@ snapshots:
 
   content-type@1.0.5: {}
 
-  convert-source-map@1.9.0: {}
-
   convert-source-map@2.0.0: {}
 
   cookie-signature@1.0.6: {}
@@ -12511,7 +13582,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.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))):
     dependencies:
       icss-utils: 5.1.0(postcss@8.5.6)
       postcss: 8.5.6
@@ -12520,9 +13591,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.2
+      semver: 7.7.3
     optionalDependencies:
-      webpack: 5.101.3(@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))
 
   css-select@4.3.0:
     dependencies:
@@ -12551,6 +13622,12 @@ snapshots:
 
   cssesc@3.0.0: {}
 
+  cssstyle@4.6.0:
+    dependencies:
+      '@asamuzakjp/css-color': 3.2.0
+      rrweb-cssom: 0.8.0
+    optional: true
+
   csstype@3.1.3: {}
 
   d3-array@3.2.4:
@@ -12593,6 +13670,12 @@ snapshots:
 
   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
@@ -12637,7 +13720,7 @@ snapshots:
 
   dedent@0.7.0: {}
 
-  dedent@1.7.0(babel-plugin-macros@3.1.0):
+  dedent@1.6.0(babel-plugin-macros@3.1.0):
     optionalDependencies:
       babel-plugin-macros: 3.1.0
 
@@ -12690,7 +13773,7 @@ snapshots:
 
   destroy@1.2.0: {}
 
-  detect-libc@2.1.0: {}
+  detect-libc@2.0.4: {}
 
   detect-node-es@1.1.0: {}
 
@@ -12700,14 +13783,10 @@ 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
@@ -12753,10 +13832,6 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
-  dompurify@3.2.7:
-    optionalDependencies:
-      '@types/trusted-types': 2.0.7
-
   domutils@2.8.0:
     dependencies:
       dom-serializer: 1.4.1
@@ -12780,7 +13855,7 @@ snapshots:
 
   dotenv@17.2.1: {}
 
-  dts-resolver@2.1.2: {}
+  dts-resolver@2.1.3: {}
 
   dunder-proto@1.0.1:
     dependencies:
@@ -12847,6 +13922,10 @@ snapshots:
 
   entities@5.0.0: {}
 
+  entities@6.0.1: {}
+
+  environment@1.1.0: {}
+
   err-code@2.0.3: {}
 
   error-ex@1.3.4:
@@ -12999,35 +14078,23 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
-  eslint-config-next@14.2.32(eslint@8.57.1)(typescript@5.8.3):
+  escape-string-regexp@5.0.0: {}
+
+  eslint-compat-utils@0.5.1(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
-      '@next/eslint-plugin-next': 14.2.32
-      '@rushstack/eslint-patch': 1.12.0
-      '@typescript-eslint/eslint-plugin': 8.45.0(@typescript-eslint/parser@8.45.0(eslint@8.57.1)(typescript@5.8.3))(eslint@8.57.1)(typescript@5.8.3)
-      '@typescript-eslint/parser': 8.45.0(eslint@8.57.1)(typescript@5.8.3)
-      eslint: 8.57.1
-      eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.1)
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.45.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
-      eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.1)
-      eslint-plugin-react: 7.37.5(eslint@8.57.1)
-      eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1)
+      eslint: 9.39.1(jiti@2.6.1)
+      semver: 7.7.3
+
+  eslint-config-prettier@10.1.8(eslint@9.39.1(jiti@2.6.1)):
+    dependencies:
+      eslint: 9.39.1(jiti@2.6.1)
+
+  eslint-import-context@0.1.9(unrs-resolver@1.11.1):
+    dependencies:
+      get-tsconfig: 4.13.0
+      stable-hash-x: 0.2.0
     optionalDependencies:
-      typescript: 5.8.3
-    transitivePeerDependencies:
-      - eslint-import-resolver-webpack
-      - eslint-plugin-import-x
-      - supports-color
-
-  eslint-config-prettier@10.1.8(eslint@8.57.1):
-    dependencies:
-      eslint: 8.57.1
-
-  eslint-config-turbo@2.5.8(eslint@8.57.1)(turbo@2.6.1):
-    dependencies:
-      eslint: 8.57.1
-      eslint-plugin-turbo: 2.5.8(eslint@8.57.1)(turbo@2.6.1)
-      turbo: 2.6.1
+      unrs-resolver: 1.11.1
 
   eslint-import-resolver-node@0.3.9:
     dependencies:
@@ -13037,33 +14104,40 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.1):
+  eslint-import-resolver-typescript@4.4.4(eslint-plugin-import@2.32.0)(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
-      '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.3
-      eslint: 8.57.1
+      eslint: 9.39.1(jiti@2.6.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: 0.0.5
+      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.45.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.4)(eslint@9.39.1(jiti@2.6.1))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.45.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1):
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@2.6.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.6.1)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 8.45.0(eslint@8.57.1)(typescript@5.8.3)
-      eslint: 8.57.1
+      '@typescript-eslint/parser': 8.48.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.8.3)
+      eslint: 9.39.1(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 4.4.4(eslint-plugin-import@2.32.0)(eslint@9.39.1(jiti@2.6.1))
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.45.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1):
+  eslint-plugin-es-x@7.8.0(eslint@9.39.1(jiti@2.6.1)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
+      '@eslint-community/regexpp': 4.12.1
+      eslint: 9.39.1(jiti@2.6.1)
+      eslint-compat-utils: 0.5.1(eslint@9.39.1(jiti@2.6.1))
+
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.4)(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9
@@ -13072,9 +14146,9 @@ snapshots:
       array.prototype.flatmap: 1.3.3
       debug: 3.2.7
       doctrine: 2.1.0
-      eslint: 8.57.1
+      eslint: 9.39.1(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.45.0(eslint@8.57.1)(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1)
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.48.1(eslint@9.39.1(jiti@2.6.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.6.1))
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -13086,13 +14160,13 @@ snapshots:
       string.prototype.trimend: 1.0.9
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 8.45.0(eslint@8.57.1)(typescript@5.8.3)
+      '@typescript-eslint/parser': 8.48.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.8.3)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-jsx-a11y@6.10.2(eslint@8.57.1):
+  eslint-plugin-jsx-a11y@6.10.2(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
       aria-query: 5.3.2
       array-includes: 3.1.9
@@ -13102,7 +14176,7 @@ snapshots:
       axobject-query: 4.1.0
       damerau-levenshtein: 1.0.8
       emoji-regex: 9.2.2
-      eslint: 8.57.1
+      eslint: 9.39.1(jiti@2.6.1)
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
       language-tags: 1.0.9
@@ -13111,21 +14185,42 @@ snapshots:
       safe-regex-test: 1.1.0
       string.prototype.includes: 2.0.1
 
-  eslint-plugin-react-hooks@5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1):
+  eslint-plugin-n@17.23.1(eslint@9.39.1(jiti@2.6.1))(typescript@5.8.3):
     dependencies:
-      eslint: 8.57.1
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
+      enhanced-resolve: 5.18.3
+      eslint: 9.39.1(jiti@2.6.1)
+      eslint-plugin-es-x: 7.8.0(eslint@9.39.1(jiti@2.6.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-react-hooks@6.1.1(eslint@8.57.1):
+  eslint-plugin-promise@7.2.1(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
-      '@babel/core': 7.28.4
-      '@babel/parser': 7.28.4
-      eslint: 8.57.1
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
+      eslint: 9.39.1(jiti@2.6.1)
+
+  eslint-plugin-react-hooks@7.0.1(eslint@9.39.1(jiti@2.6.1)):
+    dependencies:
+      '@babel/core': 7.28.3
+      '@babel/parser': 7.28.3
+      eslint: 9.39.1(jiti@2.6.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@7.37.5(eslint@8.57.1):
+  eslint-plugin-react-refresh@0.4.24(eslint@9.39.1(jiti@2.6.1)):
+    dependencies:
+      eslint: 9.39.1(jiti@2.6.1)
+
+  eslint-plugin-react@7.37.5(eslint@9.39.1(jiti@2.6.1)):
     dependencies:
       array-includes: 3.1.9
       array.prototype.findlast: 1.2.5
@@ -13133,7 +14228,7 @@ snapshots:
       array.prototype.tosorted: 1.1.4
       doctrine: 2.1.0
       es-iterator-helpers: 1.2.1
-      eslint: 8.57.1
+      eslint: 9.39.1(jiti@2.6.1)
       estraverse: 5.3.0
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
@@ -13147,27 +14242,27 @@ snapshots:
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
-  eslint-plugin-storybook@9.1.10(eslint@8.57.1)(storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(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):
+  eslint-plugin-storybook@10.1.4(eslint@9.39.1(jiti@2.6.1))(storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)))(typescript@5.8.3):
     dependencies:
-      '@typescript-eslint/utils': 8.45.0(eslint@8.57.1)(typescript@5.8.3)
-      eslint: 8.57.1
-      storybook: 9.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1))
+      '@typescript-eslint/utils': 8.49.0(eslint@9.39.1(jiti@2.6.1))(typescript@5.8.3)
+      eslint: 9.39.1(jiti@2.6.1)
+      storybook: 9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  eslint-plugin-turbo@2.5.8(eslint@8.57.1)(turbo@2.6.1):
+  eslint-plugin-turbo@2.6.3(eslint@9.39.1(jiti@2.6.1))(turbo@2.6.3):
     dependencies:
       dotenv: 16.0.3
-      eslint: 8.57.1
-      turbo: 2.6.1
+      eslint: 9.39.1(jiti@2.6.1)
+      turbo: 2.6.3
 
   eslint-scope@5.1.1:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 4.3.0
 
-  eslint-scope@7.2.2:
+  eslint-scope@8.4.0:
     dependencies:
       esrecurse: 4.3.0
       estraverse: 5.3.0
@@ -13176,54 +14271,52 @@ snapshots:
 
   eslint-visitor-keys@4.2.1: {}
 
-  eslint@8.57.1:
+  eslint@9.39.1(jiti@2.6.1):
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@8.57.1)
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
       '@eslint-community/regexpp': 4.12.1
-      '@eslint/eslintrc': 2.1.4
-      '@eslint/js': 8.57.1
-      '@humanwhocodes/config-array': 0.13.0
+      '@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
-      '@nodelib/fs.walk': 1.2.8
-      '@ungap/structured-clone': 1.3.0
+      '@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
-      doctrine: 3.0.0
       escape-string-regexp: 4.0.0
-      eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.3
-      espree: 9.6.1
+      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: 6.0.1
+      file-entry-cache: 8.0.0
       find-up: 5.0.0
       glob-parent: 6.0.2
-      globals: 13.24.0
-      graphemer: 1.4.0
       ignore: 5.3.2
       imurmurhash: 0.1.4
       is-glob: 4.0.3
-      is-path-inside: 3.0.3
-      js-yaml: 4.1.1
       json-stable-stringify-without-jsonify: 1.0.1
-      levn: 0.4.1
       lodash.merge: 4.6.2
       minimatch: 3.1.2
       natural-compare: 1.4.0
       optionator: 0.9.4
-      strip-ansi: 6.0.1
-      text-table: 0.2.0
+    optionalDependencies:
+      jiti: 2.6.1
     transitivePeerDependencies:
       - supports-color
 
-  espree@9.6.1:
+  espree@10.4.0:
     dependencies:
       acorn: 8.15.0
       acorn-jsx: 5.3.2(acorn@8.15.0)
-      eslint-visitor-keys: 3.4.3
+      eslint-visitor-keys: 4.2.1
 
   esprima@4.0.1: {}
 
@@ -13253,6 +14346,8 @@ snapshots:
 
   eventemitter3@4.0.7: {}
 
+  eventemitter3@5.0.1: {}
+
   events@3.3.0: {}
 
   execa@5.1.1:
@@ -13269,6 +14364,8 @@ snapshots:
 
   exit-hook@2.2.1: {}
 
+  expect-type@1.3.0: {}
+
   export-to-csv@1.4.0: {}
 
   express-winston@4.2.0(winston@3.17.0):
@@ -13277,15 +14374,15 @@ snapshots:
       lodash: 4.17.21
       winston: 3.17.0
 
-  express-ws@5.0.2(express@4.21.2):
+  express-ws@5.0.2(express@4.22.0):
     dependencies:
-      express: 4.21.2
+      express: 4.22.0
       ws: 7.5.10
     transitivePeerDependencies:
       - bufferutil
       - utf-8-validate
 
-  express@4.21.2:
+  express@4.22.0:
     dependencies:
       accepts: 1.3.8
       array-flatten: 1.1.1
@@ -13308,7 +14405,7 @@ snapshots:
       parseurl: 1.3.3
       path-to-regexp: 0.1.12
       proxy-addr: 2.0.7
-      qs: 6.13.0
+      qs: 6.14.0
       range-parser: 1.2.1
       safe-buffer: 5.2.1
       send: 0.19.0
@@ -13327,14 +14424,6 @@ snapshots:
 
   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: {}
@@ -13343,10 +14432,6 @@ snapshots:
 
   fast-uri@3.0.6: {}
 
-  fastq@1.19.1:
-    dependencies:
-      reusify: 1.1.0
-
   fdir@6.5.0(picomatch@4.0.3):
     optionalDependencies:
       picomatch: 4.0.3
@@ -13357,9 +14442,9 @@ snapshots:
 
   fflate@0.8.2: {}
 
-  file-entry-cache@6.0.1:
+  file-entry-cache@8.0.0:
     dependencies:
-      flat-cache: 3.2.0
+      flat-cache: 4.0.1
 
   file-selector@2.1.2:
     dependencies:
@@ -13392,13 +14477,21 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  find-cache-dir@2.1.0:
+    dependencies:
+      commondir: 1.0.1
+      make-dir: 2.1.0
+      pkg-dir: 3.0.0
+
   find-cache-dir@3.3.2:
     dependencies:
       commondir: 1.0.1
       make-dir: 3.1.0
       pkg-dir: 4.2.0
 
-  find-root@1.1.0: {}
+  find-up@3.0.0:
+    dependencies:
+      locate-path: 3.0.0
 
   find-up@4.1.0:
     dependencies:
@@ -13428,8 +14521,15 @@ snapshots:
       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: {}
 
+  flow-parser@0.293.0: {}
+
   fn.name@1.1.0: {}
 
   follow-redirects@1.15.11: {}
@@ -13457,7 +14557,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.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))):
     dependencies:
       '@babel/code-frame': 7.27.1
       chalk: 4.1.2
@@ -13469,10 +14569,10 @@ snapshots:
       minimatch: 3.1.2
       node-abort-controller: 3.1.1
       schema-utils: 3.3.0
-      semver: 7.7.2
+      semver: 7.7.3
       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.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))
 
   form-data@4.0.4:
     dependencies:
@@ -13488,6 +14588,16 @@ snapshots:
 
   fraction.js@4.3.7: {}
 
+  framer-motion@12.23.12(@emotion/is-prop-valid@1.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      motion-dom: 12.23.12
+      motion-utils: 12.23.6
+      tslib: 2.8.1
+    optionalDependencies:
+      '@emotion/is-prop-valid': 1.3.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   fresh@0.5.2: {}
 
   frimousse@0.3.0(react@18.3.1)(typescript@5.8.3):
@@ -13530,6 +14640,8 @@ snapshots:
 
   get-caller-file@2.0.5: {}
 
+  get-east-asian-width@1.4.0: {}
+
   get-intrinsic@1.3.0:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -13566,6 +14678,10 @@ snapshots:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
+  get-tsconfig@4.13.0:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
@@ -13585,9 +14701,11 @@ snapshots:
       package-json-from-dist: 1.0.1
       path-scurry: 2.0.0
 
-  globals@13.24.0:
-    dependencies:
-      type-fest: 0.20.2
+  globals@14.0.0: {}
+
+  globals@15.15.0: {}
+
+  globals@16.5.0: {}
 
   globalthis@1.0.4:
     dependencies:
@@ -13628,8 +14746,117 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  hast-util-embedded@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-is-element: 3.0.0
+
+  hast-util-from-html@2.0.3:
+    dependencies:
+      '@types/hast': 3.0.4
+      devlop: 1.1.0
+      hast-util-from-parse5: 8.0.3
+      parse5: 7.3.0
+      vfile: 6.0.3
+      vfile-message: 4.0.3
+
+  hast-util-from-parse5@8.0.3:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      devlop: 1.1.0
+      hastscript: 9.0.1
+      property-information: 7.1.0
+      vfile: 6.0.3
+      vfile-location: 5.0.3
+      web-namespaces: 2.0.1
+
+  hast-util-has-property@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast-util-is-body-ok-link@3.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast-util-is-element@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast-util-minify-whitespace@1.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-embedded: 3.0.0
+      hast-util-is-element: 3.0.0
+      hast-util-whitespace: 3.0.0
+      unist-util-is: 6.0.0
+
+  hast-util-parse-selector@4.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast-util-phrasing@3.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-embedded: 3.0.0
+      hast-util-has-property: 3.0.0
+      hast-util-is-body-ok-link: 3.0.1
+      hast-util-is-element: 3.0.0
+
+  hast-util-to-html@9.0.5:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
+
+  hast-util-to-mdast@10.1.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.3.0
+      hast-util-phrasing: 3.0.1
+      hast-util-to-html: 9.0.5
+      hast-util-to-text: 4.0.2
+      hast-util-whitespace: 3.0.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-hast: 13.2.1
+      mdast-util-to-string: 4.0.0
+      rehype-minify-whitespace: 6.0.2
+      trim-trailing-lines: 2.1.0
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+
+  hast-util-to-text@4.0.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      hast-util-is-element: 3.0.0
+      unist-util-find-after: 5.0.0
+
   hast-util-whitespace@2.0.1: {}
 
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
+
+  hast@1.0.0: {}
+
+  hastscript@9.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      hast-util-parse-selector: 4.0.0
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+
   he@1.2.0: {}
 
   header-case@2.0.4:
@@ -13639,6 +14866,12 @@ 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:
@@ -13657,6 +14890,11 @@ snapshots:
 
   hsl-to-rgb-for-reals@1.1.1: {}
 
+  html-encoding-sniffer@4.0.0:
+    dependencies:
+      whatwg-encoding: 3.1.1
+    optional: true
+
   html-entities@2.6.0: {}
 
   html-minifier-terser@6.1.0:
@@ -13669,7 +14907,9 @@ snapshots:
       relateurl: 0.2.7
       terser: 5.43.1
 
-  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-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))):
     dependencies:
       '@types/html-minifier-terser': 6.1.0
       html-minifier-terser: 6.1.0
@@ -13677,7 +14917,7 @@ snapshots:
       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.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))
 
   htmlparser2@6.1.0:
     dependencies:
@@ -13686,6 +14926,13 @@ snapshots:
       domutils: 2.8.0
       entities: 2.2.0
 
+  htmlparser2@8.0.2:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      entities: 4.5.0
+
   http-errors@2.0.0:
     dependencies:
       depd: 2.0.0
@@ -13694,6 +14941,14 @@ snapshots:
       statuses: 2.0.1
       toidentifier: 1.0.1
 
+  http-proxy-agent@7.0.2:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
   https-proxy-agent@5.0.1:
     dependencies:
       agent-base: 6.0.2
@@ -13701,14 +14956,29 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  https-proxy-agent@7.0.6:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+    optional: true
+
   human-signals@2.1.0: {}
 
+  husky@9.1.7: {}
+
   hyphen@1.10.6: {}
 
   iconv-lite@0.4.24:
     dependencies:
       safer-buffer: 2.1.2
 
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+    optional: true
+
   icss-utils@5.1.0(postcss@8.5.6):
     dependencies:
       postcss: 8.5.6
@@ -13728,7 +14998,7 @@ snapshots:
       parent-module: 1.0.1
       resolve-from: 4.0.0
 
-  import-in-the-middle@1.14.2:
+  import-in-the-middle@2.0.0:
     dependencies:
       acorn: 8.15.0
       acorn-import-attributes: 1.9.5(acorn@8.15.0)
@@ -13832,7 +15102,7 @@ snapshots:
 
   is-bun-module@2.0.0:
     dependencies:
-      semver: 7.7.2
+      semver: 7.7.3
 
   is-callable@1.2.7: {}
 
@@ -13863,6 +15133,10 @@ snapshots:
 
   is-fullwidth-code-point@3.0.0: {}
 
+  is-fullwidth-code-point@5.1.0:
+    dependencies:
+      get-east-asian-width: 1.4.0
+
   is-generator-function@1.1.0:
     dependencies:
       call-bound: 1.0.4
@@ -13885,12 +15159,19 @@ snapshots:
 
   is-number@7.0.0: {}
 
-  is-path-inside@3.0.3: {}
-
   is-plain-obj@4.1.0: {}
 
+  is-plain-object@2.0.4:
+    dependencies:
+      isobject: 3.0.1
+
+  is-plain-object@5.0.0: {}
+
   is-port-reachable@4.0.0: {}
 
+  is-potential-custom-element-name@1.0.1:
+    optional: true
+
   is-regex@1.2.1:
     dependencies:
       call-bound: 1.0.4
@@ -13946,6 +15227,8 @@ snapshots:
 
   isexe@3.1.1: {}
 
+  isobject@3.0.1: {}
+
   isomorphic.js@0.2.5: {}
 
   iterator.prototype@1.1.5:
@@ -13971,17 +15254,66 @@ 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
 
-  jsdoc-type-pratt-parser@4.8.0: {}
+  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)
+      flow-parser: 0.293.0
+      graceful-fs: 4.2.11
+      micromatch: 4.0.8
+      neo-async: 2.6.2
+      picocolors: 1.1.1
+      recast: 0.23.11
+      tmp: 0.2.5
+      write-file-atomic: 5.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  jsdom@26.1.0:
+    dependencies:
+      cssstyle: 4.6.0
+      data-urls: 5.0.0
+      decimal.js: 10.6.0
+      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.8.0
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 5.1.2
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 7.0.0
+      whatwg-encoding: 3.1.1
+      whatwg-mimetype: 4.0.0
+      whatwg-url: 14.2.0
+      ws: 8.18.3
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    optional: true
 
   jsesc@3.0.2: {}
 
@@ -14026,6 +15358,8 @@ snapshots:
     dependencies:
       json-buffer: 3.0.1
 
+  kind-of@6.0.3: {}
+
   kleur@4.1.5: {}
 
   kuler@2.0.0: {}
@@ -14045,6 +15379,55 @@ snapshots:
     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:
@@ -14060,6 +15443,25 @@ snapshots:
 
   linkifyjs@4.3.2: {}
 
+  lint-staged@16.2.7:
+    dependencies:
+      commander: 14.0.2
+      listr2: 9.0.5
+      micromatch: 4.0.8
+      nano-spawn: 2.0.0
+      pidtree: 0.6.0
+      string-argv: 0.3.2
+      yaml: 2.8.1
+
+  listr2@9.0.5:
+    dependencies:
+      cli-truncate: 5.1.1
+      colorette: 2.0.20
+      eventemitter3: 5.0.1
+      log-update: 6.1.0
+      rfdc: 1.4.1
+      wrap-ansi: 9.0.0
+
   lit-element@3.3.3:
     dependencies:
       '@lit-labs/ssr-dom-shim': 1.4.0
@@ -14078,6 +15480,11 @@ snapshots:
 
   loader-runner@4.3.0: {}
 
+  locate-path@3.0.0:
+    dependencies:
+      p-locate: 3.0.0
+      path-exists: 3.0.0
+
   locate-path@5.0.0:
     dependencies:
       p-locate: 4.1.0
@@ -14092,8 +15499,6 @@ snapshots:
 
   lodash-es@4.17.21: {}
 
-  lodash.castarray@4.4.0: {}
-
   lodash.debounce@4.0.8: {}
 
   lodash.defaults@4.2.0: {}
@@ -14102,12 +15507,18 @@ snapshots:
 
   lodash.isarguments@3.1.0: {}
 
-  lodash.isplainobject@4.0.6: {}
-
   lodash.merge@4.6.2: {}
 
   lodash@4.17.21: {}
 
+  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.2
+      wrap-ansi: 9.0.0
+
   logform@2.7.0:
     dependencies:
       '@colors/colors': 1.6.0
@@ -14117,6 +15528,8 @@ snapshots:
       safe-stable-stringify: 2.5.0
       triple-beam: 1.4.1
 
+  longest-streak@3.1.0: {}
+
   loose-envify@1.4.0:
     dependencies:
       js-tokens: 4.0.0
@@ -14133,6 +15546,9 @@ snapshots:
       devlop: 1.1.0
       highlight.js: 11.11.1
 
+  lru-cache@10.4.3:
+    optional: true
+
   lru-cache@11.2.1: {}
 
   lru-cache@5.1.1:
@@ -14151,10 +15567,19 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
   magic-string@0.30.8:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
+  make-dir@2.1.0:
+    dependencies:
+      pify: 4.0.1
+      semver: 5.7.2
+
   make-dir@3.1.0:
     dependencies:
       semver: 6.3.1
@@ -14172,6 +15597,8 @@ snapshots:
       punycode.js: 2.3.1
       uc.micro: 2.1.0
 
+  markdown-table@3.0.4: {}
+
   masonry-layout@4.2.2:
     dependencies:
       get-size: 2.0.3
@@ -14181,11 +15608,12 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
-  mdast-util-definitions@5.1.2:
+  mdast-util-find-and-replace@3.0.2:
     dependencies:
-      '@types/mdast': 3.0.15
-      '@types/unist': 2.0.11
-      unist-util-visit: 4.1.2
+      '@types/mdast': 4.0.4
+      escape-string-regexp: 5.0.0
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
 
   mdast-util-from-markdown@1.3.1:
     dependencies:
@@ -14204,21 +15632,119 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  mdast-util-to-hast@12.3.0:
+  mdast-util-from-markdown@2.0.2:
     dependencies:
-      '@types/hast': 2.3.10
-      '@types/mdast': 3.0.15
-      mdast-util-definitions: 5.1.2
-      micromark-util-sanitize-uri: 1.2.0
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      decode-named-character-reference: 1.2.0
+      devlop: 1.1.0
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.2
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-decode-string: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-stringify-position: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-autolink-literal@2.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-find-and-replace: 3.0.2
+      micromark-util-character: 2.1.1
+
+  mdast-util-gfm-footnote@2.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      micromark-util-normalize-identifier: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-strikethrough@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-table@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      markdown-table: 3.0.4
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm-task-list-item@2.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-gfm@3.1.0:
+    dependencies:
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-gfm-autolink-literal: 2.0.1
+      mdast-util-gfm-footnote: 2.1.0
+      mdast-util-gfm-strikethrough: 2.0.0
+      mdast-util-gfm-table: 2.0.0
+      mdast-util-gfm-task-list-item: 2.0.0
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  mdast-util-phrasing@4.1.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      unist-util-is: 6.0.0
+
+  mdast-util-to-hast@13.2.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.3.0
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
       trim-lines: 3.0.1
-      unist-util-generated: 2.0.1
-      unist-util-position: 4.0.4
-      unist-util-visit: 4.1.2
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+
+  mdast-util-to-markdown@2.1.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      longest-streak: 3.1.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-string: 4.0.0
+      micromark-util-classify-character: 2.0.1
+      micromark-util-decode-string: 2.0.1
+      unist-util-visit: 5.0.0
+      zwitch: 2.0.4
 
   mdast-util-to-string@3.2.0:
     dependencies:
       '@types/mdast': 3.0.15
 
+  mdast-util-to-string@4.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+
+  mdast@3.0.0: {}
+
   mdn-data@2.0.14: {}
 
   mdurl@2.0.0: {}
@@ -14239,8 +15765,6 @@ snapshots:
 
   merge-stream@2.0.0: {}
 
-  merge2@1.4.1: {}
-
   methods@1.1.2: {}
 
   micromark-core-commonmark@1.1.0:
@@ -14262,12 +15786,95 @@ snapshots:
       micromark-util-types: 1.1.0
       uvu: 0.5.6
 
+  micromark-core-commonmark@2.0.3:
+    dependencies:
+      decode-named-character-reference: 1.2.0
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.0.1
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-autolink-literal@2.1.0:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-footnote@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-strikethrough@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-table@2.1.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-tagfilter@2.0.0:
+    dependencies:
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm-task-list-item@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
+  micromark-extension-gfm@3.0.0:
+    dependencies:
+      micromark-extension-gfm-autolink-literal: 2.1.0
+      micromark-extension-gfm-footnote: 2.1.0
+      micromark-extension-gfm-strikethrough: 2.1.0
+      micromark-extension-gfm-table: 2.1.1
+      micromark-extension-gfm-tagfilter: 2.0.0
+      micromark-extension-gfm-task-list-item: 2.1.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
+
   micromark-factory-destination@1.1.0:
     dependencies:
       micromark-util-character: 1.2.0
       micromark-util-symbol: 1.1.0
       micromark-util-types: 1.1.0
 
+  micromark-factory-destination@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
   micromark-factory-label@1.1.0:
     dependencies:
       micromark-util-character: 1.2.0
@@ -14275,11 +15882,23 @@ snapshots:
       micromark-util-types: 1.1.0
       uvu: 0.5.6
 
+  micromark-factory-label@2.0.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
   micromark-factory-space@1.1.0:
     dependencies:
       micromark-util-character: 1.2.0
       micromark-util-types: 1.1.0
 
+  micromark-factory-space@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.2
+
   micromark-factory-title@1.1.0:
     dependencies:
       micromark-factory-space: 1.1.0
@@ -14287,6 +15906,13 @@ snapshots:
       micromark-util-symbol: 1.1.0
       micromark-util-types: 1.1.0
 
+  micromark-factory-title@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
   micromark-factory-whitespace@1.1.0:
     dependencies:
       micromark-factory-space: 1.1.0
@@ -14294,30 +15920,61 @@ snapshots:
       micromark-util-symbol: 1.1.0
       micromark-util-types: 1.1.0
 
+  micromark-factory-whitespace@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
   micromark-util-character@1.2.0:
     dependencies:
       micromark-util-symbol: 1.1.0
       micromark-util-types: 1.1.0
 
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
   micromark-util-chunked@1.1.0:
     dependencies:
       micromark-util-symbol: 1.1.0
 
+  micromark-util-chunked@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
   micromark-util-classify-character@1.1.0:
     dependencies:
       micromark-util-character: 1.2.0
       micromark-util-symbol: 1.1.0
       micromark-util-types: 1.1.0
 
+  micromark-util-classify-character@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
   micromark-util-combine-extensions@1.1.0:
     dependencies:
       micromark-util-chunked: 1.1.0
       micromark-util-types: 1.1.0
 
+  micromark-util-combine-extensions@2.0.1:
+    dependencies:
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.2
+
   micromark-util-decode-numeric-character-reference@1.1.0:
     dependencies:
       micromark-util-symbol: 1.1.0
 
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
   micromark-util-decode-string@1.1.0:
     dependencies:
       decode-named-character-reference: 1.2.0
@@ -14325,24 +15982,49 @@ snapshots:
       micromark-util-decode-numeric-character-reference: 1.1.0
       micromark-util-symbol: 1.1.0
 
+  micromark-util-decode-string@2.0.1:
+    dependencies:
+      decode-named-character-reference: 1.2.0
+      micromark-util-character: 2.1.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-symbol: 2.0.1
+
   micromark-util-encode@1.1.0: {}
 
+  micromark-util-encode@2.0.1: {}
+
   micromark-util-html-tag-name@1.2.0: {}
 
+  micromark-util-html-tag-name@2.0.1: {}
+
   micromark-util-normalize-identifier@1.1.0:
     dependencies:
       micromark-util-symbol: 1.1.0
 
+  micromark-util-normalize-identifier@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+
   micromark-util-resolve-all@1.1.0:
     dependencies:
       micromark-util-types: 1.1.0
 
+  micromark-util-resolve-all@2.0.1:
+    dependencies:
+      micromark-util-types: 2.0.2
+
   micromark-util-sanitize-uri@1.2.0:
     dependencies:
       micromark-util-character: 1.2.0
       micromark-util-encode: 1.1.0
       micromark-util-symbol: 1.1.0
 
+  micromark-util-sanitize-uri@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-encode: 2.0.1
+      micromark-util-symbol: 2.0.1
+
   micromark-util-subtokenize@1.1.0:
     dependencies:
       micromark-util-chunked: 1.1.0
@@ -14350,10 +16032,21 @@ snapshots:
       micromark-util-types: 1.1.0
       uvu: 0.5.6
 
+  micromark-util-subtokenize@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+
   micromark-util-symbol@1.1.0: {}
 
+  micromark-util-symbol@2.0.1: {}
+
   micromark-util-types@1.1.0: {}
 
+  micromark-util-types@2.0.2: {}
+
   micromark@3.2.0:
     dependencies:
       '@types/debug': 4.1.12
@@ -14376,6 +16069,28 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  micromark@4.0.2:
+    dependencies:
+      '@types/debug': 4.1.12
+      debug: 4.4.3
+      decode-named-character-reference: 1.2.0
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-encode: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
   micromatch@4.0.8:
     dependencies:
       braces: 3.0.3
@@ -14399,6 +16114,8 @@ snapshots:
 
   mimic-fn@2.1.0: {}
 
+  mimic-function@5.0.1: {}
+
   min-indent@1.0.1: {}
 
   minimatch@10.1.1:
@@ -14451,17 +16168,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  motion-dom@12.23.12:
+    dependencies:
+      motion-utils: 12.23.6
+
+  motion-utils@12.23.6: {}
+
   mri@1.2.0: {}
 
   ms@2.0.0: {}
 
   ms@2.1.3: {}
 
-  mz@2.7.0:
-    dependencies:
-      any-promise: 1.3.0
-      object-assign: 4.1.1
-      thenify-all: 1.6.0
+  nano-spawn@2.0.0: {}
 
   nanoid@3.3.8: {}
 
@@ -14475,38 +16194,11 @@ snapshots:
 
   neo-async@2.6.2: {}
 
-  next-themes@0.2.1(next@14.2.32(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  next-themes@0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      next: 14.2.32(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  next@14.2.32(@babel/core@7.28.4)(@opentelemetry/api@1.9.0)(babel-plugin-macros@3.1.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      '@next/env': 14.2.32
-      '@swc/helpers': 0.5.5
-      busboy: 1.6.0
-      caniuse-lite: 1.0.30001743
-      graceful-fs: 4.2.11
-      postcss: 8.4.31
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      styled-jsx: 5.1.1(@babel/core@7.28.4)(babel-plugin-macros@3.1.0)(react@18.3.1)
-    optionalDependencies:
-      '@next/swc-darwin-arm64': 14.2.32
-      '@next/swc-darwin-x64': 14.2.32
-      '@next/swc-linux-arm64-gnu': 14.2.32
-      '@next/swc-linux-arm64-musl': 14.2.32
-      '@next/swc-linux-x64-gnu': 14.2.32
-      '@next/swc-linux-x64-musl': 14.2.32
-      '@next/swc-win32-arm64-msvc': 14.2.32
-      '@next/swc-win32-ia32-msvc': 14.2.32
-      '@next/swc-win32-x64-msvc': 14.2.32
-      '@opentelemetry/api': 1.9.0
-    transitivePeerDependencies:
-      - '@babel/core'
-      - babel-plugin-macros
-
   no-case@3.0.4:
     dependencies:
       lower-case: 2.0.2
@@ -14514,7 +16206,7 @@ snapshots:
 
   node-abi@3.75.0:
     dependencies:
-      semver: 7.7.2
+      semver: 7.7.3
 
   node-abort-controller@3.1.1: {}
 
@@ -14533,7 +16225,7 @@ snapshots:
     dependencies:
       hosted-git-info: 6.1.3
       is-core-module: 2.16.1
-      semver: 7.7.2
+      semver: 7.7.3
       validate-npm-package-license: 3.0.4
 
   normalize-path@3.0.0: {}
@@ -14548,7 +16240,7 @@ snapshots:
 
   npm-install-checks@6.3.0:
     dependencies:
-      semver: 7.7.2
+      semver: 7.7.3
 
   npm-normalize-package-bin@3.0.1: {}
 
@@ -14556,7 +16248,7 @@ snapshots:
     dependencies:
       hosted-git-info: 6.1.3
       proc-log: 3.0.0
-      semver: 7.7.2
+      semver: 7.7.3
       validate-npm-package-name: 5.0.1
 
   npm-pick-manifest@8.0.2:
@@ -14564,7 +16256,7 @@ snapshots:
       npm-install-checks: 6.3.0
       npm-normalize-package-bin: 3.0.1
       npm-package-arg: 10.1.0
-      semver: 7.7.2
+      semver: 7.7.3
 
   npm-run-path@4.0.1:
     dependencies:
@@ -14574,9 +16266,10 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
-  object-assign@4.1.1: {}
+  nwsapi@2.2.21:
+    optional: true
 
-  object-hash@3.0.0: {}
+  object-assign@4.1.1: {}
 
   object-inspect@1.13.4: {}
 
@@ -14627,6 +16320,8 @@ snapshots:
 
   objectorarray@1.0.5: {}
 
+  obug@2.1.1: {}
+
   on-finished@2.3.0:
     dependencies:
       ee-first: 1.1.1
@@ -14645,6 +16340,10 @@ snapshots:
     dependencies:
       mimic-fn: 2.1.0
 
+  onetime@7.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
   open@8.4.2:
     dependencies:
       define-lazy-prop: 2.0.0
@@ -14674,6 +16373,26 @@ snapshots:
       object-keys: 1.1.1
       safe-push-apply: 1.0.0
 
+  oxc-parser@0.99.0:
+    dependencies:
+      '@oxc-project/types': 0.99.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
+
   p-limit@2.3.0:
     dependencies:
       p-try: 2.2.0
@@ -14686,6 +16405,10 @@ snapshots:
     dependencies:
       yocto-queue: 1.2.1
 
+  p-locate@3.0.0:
+    dependencies:
+      p-limit: 2.3.0
+
   p-locate@4.1.0:
     dependencies:
       p-limit: 2.3.0
@@ -14700,6 +16423,8 @@ snapshots:
 
   p-map@2.1.0: {}
 
+  p-map@7.0.3: {}
+
   p-try@2.2.0: {}
 
   package-json-from-dist@1.0.1: {}
@@ -14724,8 +16449,14 @@ snapshots:
       json-parse-even-better-errors: 2.3.1
       lines-and-columns: 1.2.4
 
+  parse-srcset@1.0.2: {}
+
   parse-svg-path@0.1.2: {}
 
+  parse5@7.3.0:
+    dependencies:
+      entities: 6.0.1
+
   parseurl@1.3.3: {}
 
   pascal-case@3.1.2:
@@ -14740,6 +16471,8 @@ snapshots:
       dot-case: 3.0.4
       tslib: 2.8.1
 
+  path-exists@3.0.0: {}
+
   path-exists@4.0.0: {}
 
   path-exists@5.0.0: {}
@@ -14785,10 +16518,18 @@ snapshots:
 
   picomatch@4.0.3: {}
 
+  pidtree@0.6.0: {}
+
   pify@2.3.0: {}
 
+  pify@4.0.1: {}
+
   pirates@4.0.7: {}
 
+  pkg-dir@3.0.0:
+    dependencies:
+      find-up: 3.0.0
+
   pkg-dir@4.2.0:
     dependencies:
       find-up: 4.1.0
@@ -14801,14 +16542,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
@@ -14819,31 +16560,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
     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):
@@ -14895,12 +16617,6 @@ snapshots:
 
   postcss-value-parser@4.2.0: {}
 
-  postcss@8.4.31:
-    dependencies:
-      nanoid: 3.3.8
-      picocolors: 1.1.1
-      source-map-js: 1.2.1
-
   postcss@8.5.6:
     dependencies:
       nanoid: 3.3.8
@@ -14928,11 +16644,7 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  prettier-plugin-tailwindcss@0.6.14(prettier@3.6.2):
-    dependencies:
-      prettier: 3.6.2
-
-  prettier@3.6.2: {}
+  prettier@3.7.4: {}
 
   pretty-error@4.0.0:
     dependencies:
@@ -14968,6 +16680,8 @@ snapshots:
 
   property-information@6.5.0: {}
 
+  property-information@7.1.0: {}
+
   prosemirror-changeset@2.3.1:
     dependencies:
       prosemirror-transform: 1.10.4
@@ -15101,8 +16815,6 @@ snapshots:
 
   quansync@0.2.11: {}
 
-  queue-microtask@1.2.3: {}
-
   queue@6.0.2:
     dependencies:
       inherits: 2.0.4
@@ -15162,7 +16874,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
@@ -15177,7 +16889,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
@@ -15292,13 +17004,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.11
 
-  react-router-dom@7.9.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  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.3(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.9.3(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):
     dependencies:
       cookie: 1.0.2
       react: 18.3.1
@@ -15427,8 +17139,38 @@ snapshots:
     dependencies:
       rc: 1.2.8
 
+  rehype-minify-whitespace@6.0.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-minify-whitespace: 1.0.1
+
+  rehype-parse@9.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-from-html: 2.0.3
+      unified: 11.0.5
+
+  rehype-remark@10.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      hast-util-to-mdast: 10.1.2
+      unified: 11.0.5
+      vfile: 6.0.3
+
   relateurl@0.2.7: {}
 
+  remark-gfm@4.0.1:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-gfm: 3.1.0
+      micromark-extension-gfm: 3.0.0
+      remark-parse: 11.0.0
+      remark-stringify: 11.0.0
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
   remark-parse@10.0.2:
     dependencies:
       '@types/mdast': 3.0.15
@@ -15437,13 +17179,28 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  remark-parse@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.2
+      micromark-util-types: 2.0.2
+      unified: 11.0.5
+    transitivePeerDependencies:
+      - supports-color
+
   remark-rehype@10.1.0:
     dependencies:
       '@types/hast': 2.3.10
       '@types/mdast': 3.0.15
-      mdast-util-to-hast: 12.3.0
+      mdast-util-to-hast: 13.2.1
       unified: 10.1.2
 
+  remark-stringify@11.0.0:
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-to-markdown: 2.1.2
+      unified: 11.0.5
+
   renderkid@3.0.0:
     dependencies:
       css-select: 4.3.0
@@ -15456,11 +17213,10 @@ snapshots:
 
   require-from-string@2.0.2: {}
 
-  require-in-the-middle@7.5.2:
+  require-in-the-middle@8.0.1:
     dependencies:
       debug: 4.4.3
       module-details-from-path: 1.0.4
-      resolve: 1.22.10
     transitivePeerDependencies:
       - supports-color
 
@@ -15482,55 +17238,57 @@ snapshots:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
+  restore-cursor@5.1.0:
+    dependencies:
+      onetime: 7.0.0
+      signal-exit: 4.1.0
+
   restructure@3.0.2: {}
 
   retry@0.12.0: {}
 
-  reusify@1.1.0: {}
+  rfdc@1.4.1: {}
 
   rimraf@3.0.2:
     dependencies:
       glob: 11.1.0
 
-  rolldown-plugin-dts@0.16.11(rolldown@1.0.0-beta.34)(typescript@5.8.3):
+  rolldown-plugin-dts@0.17.8(rolldown@1.0.0-beta.46)(typescript@5.8.3):
     dependencies:
-      '@babel/generator': 7.28.3
-      '@babel/parser': 7.28.4
-      '@babel/types': 7.28.4
-      ast-kit: 2.1.2
-      birpc: 2.6.1
-      debug: 4.4.3
-      dts-resolver: 2.1.2
-      get-tsconfig: 4.10.1
-      magic-string: 0.30.19
-      rolldown: 1.0.0-beta.34
+      '@babel/generator': 7.28.5
+      '@babel/parser': 7.28.5
+      '@babel/types': 7.28.5
+      ast-kit: 2.2.0
+      birpc: 2.9.0
+      dts-resolver: 2.1.3
+      get-tsconfig: 4.13.0
+      magic-string: 0.30.21
+      obug: 2.1.1
+      rolldown: 1.0.0-beta.46
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
       - oxc-resolver
-      - supports-color
 
-  rolldown@1.0.0-beta.34:
+  rolldown@1.0.0-beta.46:
     dependencies:
-      '@oxc-project/runtime': 0.82.3
-      '@oxc-project/types': 0.82.3
-      '@rolldown/pluginutils': 1.0.0-beta.34
-      ansis: 4.2.0
+      '@oxc-project/types': 0.96.0
+      '@rolldown/pluginutils': 1.0.0-beta.46
     optionalDependencies:
-      '@rolldown/binding-android-arm64': 1.0.0-beta.34
-      '@rolldown/binding-darwin-arm64': 1.0.0-beta.34
-      '@rolldown/binding-darwin-x64': 1.0.0-beta.34
-      '@rolldown/binding-freebsd-x64': 1.0.0-beta.34
-      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-beta.34
-      '@rolldown/binding-linux-arm64-gnu': 1.0.0-beta.34
-      '@rolldown/binding-linux-arm64-musl': 1.0.0-beta.34
-      '@rolldown/binding-linux-x64-gnu': 1.0.0-beta.34
-      '@rolldown/binding-linux-x64-musl': 1.0.0-beta.34
-      '@rolldown/binding-openharmony-arm64': 1.0.0-beta.34
-      '@rolldown/binding-wasm32-wasi': 1.0.0-beta.34
-      '@rolldown/binding-win32-arm64-msvc': 1.0.0-beta.34
-      '@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.34
-      '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.34
+      '@rolldown/binding-android-arm64': 1.0.0-beta.46
+      '@rolldown/binding-darwin-arm64': 1.0.0-beta.46
+      '@rolldown/binding-darwin-x64': 1.0.0-beta.46
+      '@rolldown/binding-freebsd-x64': 1.0.0-beta.46
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-beta.46
+      '@rolldown/binding-linux-arm64-gnu': 1.0.0-beta.46
+      '@rolldown/binding-linux-arm64-musl': 1.0.0-beta.46
+      '@rolldown/binding-linux-x64-gnu': 1.0.0-beta.46
+      '@rolldown/binding-linux-x64-musl': 1.0.0-beta.46
+      '@rolldown/binding-openharmony-arm64': 1.0.0-beta.46
+      '@rolldown/binding-wasm32-wasi': 1.0.0-beta.46
+      '@rolldown/binding-win32-arm64-msvc': 1.0.0-beta.46
+      '@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.46
+      '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.46
 
   rollup@4.52.4:
     dependencies:
@@ -15562,9 +17320,8 @@ snapshots:
 
   rope-sequence@1.3.4: {}
 
-  run-parallel@1.2.0:
-    dependencies:
-      queue-microtask: 1.2.3
+  rrweb-cssom@0.8.0:
+    optional: true
 
   sade@1.8.1:
     dependencies:
@@ -15597,6 +17354,20 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
+  sanitize-html@2.17.0:
+    dependencies:
+      deepmerge: 4.3.1
+      escape-string-regexp: 4.0.0
+      htmlparser2: 8.0.2
+      is-plain-object: 5.0.0
+      parse-srcset: 1.0.2
+      postcss: 8.5.6
+
+  saxes@6.0.0:
+    dependencies:
+      xmlchars: 2.2.0
+    optional: true
+
   scheduler@0.17.0:
     dependencies:
       loose-envify: 1.4.0
@@ -15623,10 +17394,14 @@ snapshots:
     dependencies:
       compute-scroll-into-view: 3.1.1
 
+  semver@5.7.2: {}
+
   semver@6.3.1: {}
 
   semver@7.7.2: {}
 
+  semver@7.7.3: {}
+
   send@0.19.0:
     dependencies:
       debug: 2.6.9
@@ -15716,14 +17491,16 @@ snapshots:
 
   setprototypeof@1.2.0: {}
 
+  shallow-clone@3.0.1:
+    dependencies:
+      kind-of: 6.0.3
+
   shebang-command@2.0.0:
     dependencies:
       shebang-regex: 3.0.0
 
   shebang-regex@3.0.0: {}
 
-  shimmer@1.2.1: {}
-
   side-channel-list@1.0.0:
     dependencies:
       es-errors: 1.3.0
@@ -15752,6 +17529,8 @@ snapshots:
       side-channel-map: 1.0.1
       side-channel-weakmap: 1.0.2
 
+  siginfo@2.0.0: {}
+
   signal-exit@3.0.7: {}
 
   signal-exit@4.1.0: {}
@@ -15762,6 +17541,11 @@ snapshots:
 
   slash@5.1.0: {}
 
+  slice-ansi@7.1.2:
+    dependencies:
+      ansi-styles: 6.2.3
+      is-fullwidth-code-point: 5.1.0
+
   smooth-scroll-into-view-if-needed@2.0.2:
     dependencies:
       scroll-into-view-if-needed: 3.1.0
@@ -15778,8 +17562,6 @@ snapshots:
       buffer-from: 1.1.2
       source-map: 0.6.1
 
-  source-map@0.5.7: {}
-
   source-map@0.6.1: {}
 
   space-separated-tokens@2.0.2: {}
@@ -15798,45 +17580,39 @@ snapshots:
 
   spdx-license-ids@3.0.22: {}
 
-  stable-hash@0.0.5: {}
+  stable-hash-x@0.2.0: {}
 
   stack-trace@0.0.10: {}
 
+  stackback@0.0.2: {}
+
   standard-as-callback@2.1.0: {}
 
   statuses@2.0.1: {}
 
+  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.6.2):
-    dependencies:
-      '@storybook/core': 8.6.14(prettier@3.6.2)(storybook@8.6.14(prettier@3.6.2))
-    optionalDependencies:
-      prettier: 3.6.2
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - utf-8-validate
-
-  storybook@9.1.10(@testing-library/dom@10.4.0)(prettier@3.6.2)(vite@7.1.11(@types/node@22.12.0)(jiti@2.5.1)(terser@5.43.1)(yaml@2.8.1)):
+  storybook@9.1.17(@testing-library/dom@10.4.0)(prettier@3.7.4)(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)):
     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.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
       '@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.3
       ws: 8.18.3
     optionalDependencies:
-      prettier: 3.6.2
+      prettier: 3.7.4
     transitivePeerDependencies:
       - '@testing-library/dom'
       - bufferutil
@@ -15845,7 +17621,7 @@ snapshots:
       - utf-8-validate
       - vite
 
-  streamsearch@1.1.0: {}
+  string-argv@0.3.2: {}
 
   string-width@4.2.3:
     dependencies:
@@ -15859,6 +17635,17 @@ snapshots:
       emoji-regex: 9.2.2
       strip-ansi: 7.1.2
 
+  string-width@7.2.0:
+    dependencies:
+      emoji-regex: 10.5.0
+      get-east-asian-width: 1.4.0
+      strip-ansi: 7.1.2
+
+  string-width@8.1.0:
+    dependencies:
+      get-east-asian-width: 1.4.0
+      strip-ansi: 7.1.2
+
   string.prototype.includes@2.0.1:
     dependencies:
       call-bind: 1.0.8
@@ -15913,10 +17700,19 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
+  stringify-entities@4.0.4:
+    dependencies:
+      character-entities-html4: 2.1.0
+      character-entities-legacy: 3.0.0
+
   strip-ansi@6.0.1:
     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
@@ -15939,34 +17735,14 @@ snapshots:
     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.101.3(@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.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))
 
   style-to-object@0.4.4:
     dependencies:
       inline-style-parser: 0.1.1
 
-  styled-jsx@5.1.1(@babel/core@7.28.4)(babel-plugin-macros@3.1.0)(react@18.3.1):
-    dependencies:
-      client-only: 0.0.1
-      react: 18.3.1
-    optionalDependencies:
-      '@babel/core': 7.28.4
-      babel-plugin-macros: 3.1.0
-
-  stylis@4.2.0: {}
-
-  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
@@ -15983,11 +17759,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.101.3(@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.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))
 
   swr@2.2.4(react@18.3.1):
     dependencies:
@@ -15995,56 +17771,27 @@ snapshots:
       react: 18.3.1
       use-sync-external-store: 1.5.0(react@18.3.1)
 
+  symbol-tree@3.2.4:
+    optional: true
+
   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.14(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack@5.101.3(@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
       terser: 5.43.1
-      webpack: 5.101.3(@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))
     optionalDependencies:
       '@swc/core': 1.13.5(@swc/helpers@0.5.17)
-      esbuild: 0.25.0
 
   terser@5.43.1:
     dependencies:
@@ -16055,25 +17802,17 @@ snapshots:
 
   text-hex@1.0.0: {}
 
-  text-table@0.2.0: {}
-
   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: {}
 
+  tinybench@2.9.0: {}
+
   tinycolor2@1.6.0: {}
 
-  tinyexec@1.0.1: {}
+  tinyexec@1.0.2: {}
 
   tinyglobby@0.2.15:
     dependencies:
@@ -16084,6 +17823,8 @@ snapshots:
 
   tinyrainbow@2.0.0: {}
 
+  tinyrainbow@3.0.3: {}
+
   tinyspy@3.0.2: {}
 
   tinyspy@4.0.3: {}
@@ -16092,14 +17833,24 @@ snapshots:
     dependencies:
       '@popperjs/core': 2.11.8
 
-  tiptap-markdown@0.8.10(@tiptap/core@2.26.3(@tiptap/pm@2.26.3)):
+  tiptap-markdown@0.8.10(@tiptap/core@2.26.3(@tiptap/pm@2.26.1)):
     dependencies:
-      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.3)
+      '@tiptap/core': 2.26.3(@tiptap/pm@2.26.1)
       '@types/markdown-it': 13.0.9
       markdown-it: 14.1.0
       markdown-it-task-lists: 2.1.1
       prosemirror-markdown: 1.13.2
 
+  tldts-core@6.1.86:
+    optional: true
+
+  tldts@6.1.86:
+    dependencies:
+      tldts-core: 6.1.86
+    optional: true
+
+  tmp@0.2.5: {}
+
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
@@ -16112,12 +17863,24 @@ snapshots:
       '@tokenizer/token': 0.3.0
       ieee754: 1.2.1
 
+  tough-cookie@5.1.2:
+    dependencies:
+      tldts: 6.1.86
+    optional: true
+
   tr46@0.0.3: {}
 
+  tr46@5.1.1:
+    dependencies:
+      punycode: 2.3.1
+    optional: true
+
   tree-kill@1.2.2: {}
 
   trim-lines@3.0.1: {}
 
+  trim-trailing-lines@2.1.0: {}
+
   triple-beam@1.4.1: {}
 
   trough@2.2.0: {}
@@ -16126,9 +17889,12 @@ snapshots:
     dependencies:
       typescript: 5.8.3
 
-  ts-dedent@2.2.0: {}
+  ts-declaration-location@1.0.7(typescript@5.8.3):
+    dependencies:
+      picomatch: 4.0.3
+      typescript: 5.8.3
 
-  ts-interface-checker@0.1.13: {}
+  ts-dedent@2.2.0: {}
 
   tsconfck@3.1.6(typescript@5.8.3):
     optionalDependencies:
@@ -16147,7 +17913,7 @@ snapshots:
       minimist: 1.2.8
       strip-bom: 3.0.0
 
-  tsdown@0.15.5(typescript@5.8.3):
+  tsdown@0.16.0(typescript@5.8.3):
     dependencies:
       ansis: 4.2.0
       cac: 6.7.14
@@ -16156,10 +17922,10 @@ snapshots:
       diff: 8.0.2
       empathic: 2.0.0
       hookable: 5.5.3
-      rolldown: 1.0.0-beta.34
-      rolldown-plugin-dts: 0.16.11(rolldown@1.0.0-beta.34)(typescript@5.8.3)
-      semver: 7.7.2
-      tinyexec: 1.0.1
+      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.2
       tinyglobby: 0.2.15
       tree-kill: 1.2.2
       unconfig: 7.3.3
@@ -16176,32 +17942,32 @@ snapshots:
 
   tslib@2.8.1: {}
 
-  turbo-darwin-64@2.6.1:
+  turbo-darwin-64@2.6.3:
     optional: true
 
-  turbo-darwin-arm64@2.6.1:
+  turbo-darwin-arm64@2.6.3:
     optional: true
 
-  turbo-linux-64@2.6.1:
+  turbo-linux-64@2.6.3:
     optional: true
 
-  turbo-linux-arm64@2.6.1:
+  turbo-linux-arm64@2.6.3:
     optional: true
 
-  turbo-windows-64@2.6.1:
+  turbo-windows-64@2.6.3:
     optional: true
 
-  turbo-windows-arm64@2.6.1:
+  turbo-windows-arm64@2.6.3:
     optional: true
 
-  turbo@2.6.1:
+  turbo@2.6.3:
     optionalDependencies:
-      turbo-darwin-64: 2.6.1
-      turbo-darwin-arm64: 2.6.1
-      turbo-linux-64: 2.6.1
-      turbo-linux-arm64: 2.6.1
-      turbo-windows-64: 2.6.1
-      turbo-windows-arm64: 2.6.1
+      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
 
   tween-functions@1.2.0: {}
 
@@ -16209,8 +17975,6 @@ snapshots:
     dependencies:
       prelude-ls: 1.2.1
 
-  type-fest@0.20.2: {}
-
   type-fest@2.19.0: {}
 
   type-is@1.6.18:
@@ -16253,6 +18017,17 @@ snapshots:
 
   typed-styles@0.0.7: {}
 
+  typescript-eslint@8.48.1(eslint@9.39.1(jiti@2.6.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.6.1))(typescript@5.8.3))(eslint@9.39.1(jiti@2.6.1))(typescript@5.8.3)
+      '@typescript-eslint/parser': 8.48.1(eslint@9.39.1(jiti@2.6.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.6.1))(typescript@5.8.3)
+      eslint: 9.39.1(jiti@2.6.1)
+      typescript: 5.8.3
+    transitivePeerDependencies:
+      - supports-color
+
   typescript@5.8.3: {}
 
   uc.micro@2.1.0: {}
@@ -16297,31 +18072,63 @@ snapshots:
       trough: 2.2.0
       vfile: 5.3.7
 
-  unist-util-generated@2.0.1: {}
+  unified@11.0.5:
+    dependencies:
+      '@types/unist': 3.0.3
+      bail: 2.0.2
+      devlop: 1.1.0
+      extend: 3.0.2
+      is-plain-obj: 4.1.0
+      trough: 2.2.0
+      vfile: 6.0.3
+
+  unist-util-find-after@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
 
   unist-util-is@5.2.1:
     dependencies:
       '@types/unist': 2.0.11
 
-  unist-util-position@4.0.4:
+  unist-util-is@6.0.0:
     dependencies:
-      '@types/unist': 2.0.11
+      '@types/unist': 3.0.3
+
+  unist-util-position@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
 
   unist-util-stringify-position@3.0.3:
     dependencies:
       '@types/unist': 2.0.11
 
+  unist-util-stringify-position@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+
   unist-util-visit-parents@5.1.3:
     dependencies:
       '@types/unist': 2.0.11
       unist-util-is: 5.2.1
 
+  unist-util-visit-parents@6.0.1:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+
   unist-util-visit@4.1.2:
     dependencies:
       '@types/unist': 2.0.11
       unist-util-is: 5.2.1
       unist-util-visit-parents: 5.1.3
 
+  unist-util-visit@5.0.0:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
+
   universalify@2.0.1: {}
 
   unpipe@1.0.0: {}
@@ -16441,11 +18248,7 @@ snapshots:
       kleur: 4.1.5
       sade: 1.8.1
 
-  valibot@0.41.0(typescript@5.8.3):
-    optionalDependencies:
-      typescript: 5.8.3
-
-  valibot@1.1.0(typescript@5.8.3):
+  valibot@1.2.0(typescript@5.8.3):
     optionalDependencies:
       typescript: 5.8.3
 
@@ -16458,11 +18261,21 @@ snapshots:
 
   vary@1.1.2: {}
 
+  vfile-location@5.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile: 6.0.3
+
   vfile-message@3.1.4:
     dependencies:
       '@types/unist': 2.0.11
       unist-util-stringify-position: 3.0.3
 
+  vfile-message@4.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      unist-util-stringify-position: 4.0.0
+
   vfile@5.3.7:
     dependencies:
       '@types/unist': 2.0.11
@@ -16470,6 +18283,11 @@ snapshots:
       unist-util-stringify-position: 3.0.3
       vfile-message: 3.1.4
 
+  vfile@6.0.3:
+    dependencies:
+      '@types/unist': 3.0.3
+      vfile-message: 4.0.3
+
   victory-vendor@36.9.2:
     dependencies:
       '@types/d3-array': 3.2.1
@@ -16493,13 +18311,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.1):
     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.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -16514,18 +18332,18 @@ 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.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)):
     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.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)
     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.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1):
     dependencies:
       esbuild: 0.25.0
       fdir: 6.5.0(picomatch@4.0.3)
@@ -16536,12 +18354,57 @@ snapshots:
     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
 
+  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.1):
+    dependencies:
+      '@vitest/expect': 4.0.15
+      '@vitest/mocker': 4.0.15(vite@7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1))
+      '@vitest/pretty-format': 4.0.15
+      '@vitest/runner': 4.0.15
+      '@vitest/snapshot': 4.0.15
+      '@vitest/spy': 4.0.15
+      '@vitest/utils': 4.0.15
+      es-module-lexer: 1.7.0
+      expect-type: 1.3.0
+      magic-string: 0.30.21
+      obug: 2.1.1
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      std-env: 3.10.0
+      tinybench: 2.9.0
+      tinyexec: 1.0.2
+      tinyglobby: 0.2.15
+      tinyrainbow: 3.0.3
+      vite: 7.1.11(@types/node@22.12.0)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.43.1)(yaml@2.8.1)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@opentelemetry/api': 1.9.0
+      '@types/node': 22.12.0
+      jsdom: 26.1.0
+    transitivePeerDependencies:
+      - jiti
+      - less
+      - lightningcss
+      - msw
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - terser
+      - tsx
+      - yaml
+
   w3c-keyname@2.2.8: {}
 
+  w3c-xmlserializer@5.0.0:
+    dependencies:
+      xml-name-validator: 5.0.0
+    optional: true
+
   warning@4.0.3:
     dependencies:
       loose-envify: 1.4.0
@@ -16551,11 +18414,16 @@ snapshots:
       glob-to-regexp: 0.4.1
       graceful-fs: 4.2.11
 
+  web-namespaces@2.0.1: {}
+
   web-vitals@4.2.4: {}
 
   webidl-conversions@3.0.1: {}
 
-  webpack-dev-middleware@6.1.3(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17))(esbuild@0.25.0)):
+  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))):
     dependencies:
       colorette: 2.0.20
       memfs: 3.5.3
@@ -16563,7 +18431,7 @@ snapshots:
       range-parser: 1.2.1
       schema-utils: 4.3.2
     optionalDependencies:
-      webpack: 5.101.3(@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))
 
   webpack-hot-middleware@2.26.1:
     dependencies:
@@ -16577,7 +18445,7 @@ snapshots:
 
   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.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17)):
     dependencies:
       '@types/eslint-scope': 3.7.7
       '@types/estree': 1.0.8
@@ -16601,7 +18469,7 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 4.3.2
       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.14(@swc/core@1.13.5(@swc/helpers@0.5.17))(webpack@5.101.3(@swc/core@1.13.5(@swc/helpers@0.5.17)))
       watchpack: 2.4.4
       webpack-sources: 3.3.3
     transitivePeerDependencies:
@@ -16609,6 +18477,20 @@ snapshots:
       - esbuild
       - uglify-js
 
+  whatwg-encoding@3.1.1:
+    dependencies:
+      iconv-lite: 0.6.3
+    optional: true
+
+  whatwg-mimetype@4.0.0:
+    optional: true
+
+  whatwg-url@14.2.0:
+    dependencies:
+      tr46: 5.1.1
+      webidl-conversions: 7.0.0
+    optional: true
+
   whatwg-url@5.0.0:
     dependencies:
       tr46: 0.0.3
@@ -16667,6 +18549,11 @@ snapshots:
     dependencies:
       isexe: 3.1.1
 
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
   widest-line@4.0.1:
     dependencies:
       string-width: 5.1.2
@@ -16705,10 +18592,27 @@ snapshots:
       string-width: 5.1.2
       strip-ansi: 7.1.2
 
+  wrap-ansi@9.0.0:
+    dependencies:
+      ansi-styles: 6.2.3
+      string-width: 7.2.0
+      strip-ansi: 7.1.2
+
+  write-file-atomic@5.0.1:
+    dependencies:
+      imurmurhash: 0.1.4
+      signal-exit: 4.1.0
+
   ws@7.5.10: {}
 
   ws@8.18.3: {}
 
+  xml-name-validator@5.0.0:
+    optional: true
+
+  xmlchars@2.2.0:
+    optional: true
+
   xtend@4.0.2: {}
 
   y-indexeddb@9.0.12(yjs@13.6.27):
@@ -16770,3 +18674,5 @@ snapshots:
       zod: 3.25.76
 
   zod@3.25.76: {}
+
+  zwitch@2.0.4: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 902a347dac..b85c8612e1 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -9,28 +9,35 @@ catalog:
   "@atlaskit/pragmatic-drag-and-drop-hitbox": 1.1.0
   "@atlaskit/pragmatic-drag-and-drop": 1.7.4
   "@bprogress/core": ^1.3.4
-  "@sentry/node": 10.24.0
-  "@sentry/profiling-node": 10.24.0
-  "@sentry/react-router": 10.24.0
-  axios: 1.12.0
-  mobx: 6.12.0
-  mobx-react: 9.1.1
-  mobx-utils: 6.0.8
-  lodash-es: 4.17.21
-  "@types/lodash-es": 4.17.12
-  lucide-react: 0.469.0
-  swr: 2.2.4
-  react: 18.3.1
-  react-dom: 18.3.1
-  "@types/react": 18.3.11
-  "@types/react-dom": 18.3.1
-  "@types/node": 22.12.0
-  typescript: 5.8.3
-  tsdown: 0.15.5
-  vite: 7.1.11
-  uuid: 13.0.0
+  "@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
   "@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
+  express: 4.22.0
+  lodash-es: 4.17.21
+  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: 18.3.1
+  swr: 2.2.4
+  tsdown: 0.16.0
+  typescript: 5.8.3
+  uuid: 13.0.0
+  vite: 7.1.11
 
 onlyBuiltDependencies:
 - turbo
diff --git a/turbo.json b/turbo.json
index a8d985457d..443c8fc703 100644
--- a/turbo.json
+++ b/turbo.json
@@ -1,80 +1,98 @@
 {
-  "$schema": "https://turbo.build/schema.json",
+  "$schema": "https://turborepo.com/schema.json",
+  "globalDependencies": [".npmrc", ".prettierrc", "eslint.config.mjs"],
   "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_LIVE_BASE_PATH",
+    "VITE_LIVE_BASE_URL",
     "VITE_POSTHOG_DEBUG",
-    "VITE_SUPPORT_EMAIL",
-    "ENABLE_EXPERIMENTAL_COREPACK",
+    "VITE_POSTHOG_HOST",
+    "VITE_POSTHOG_KEY",
     "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": {
+    "check": {
+      "dependsOn": ["check:format", "check:lint", "check:types"]
+    },
+    "check:format": {
+      "inputs": ["$TURBO_DEFAULT$"],
+      "outputs": ["node_modules/.cache/prettier/**"]
+    },
+    "check:lint": {
       "dependsOn": ["^build"],
-      "cache": false,
-      "persistent": true
+      "inputs": ["$TURBO_DEFAULT$", "!**/*.md"],
+      "outputs": ["node_modules/.cache/eslint/**"]
     },
     "check:types": {
       "dependsOn": ["^build"],
+      "inputs": ["$TURBO_DEFAULT$", "!**/*.md"],
+      "outputs": []
+    },
+    "clean": {
       "cache": false
     },
-    "check:lint": {
+    "dev": {
       "cache": false,
-      "inputs": ["**/*", "!**/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": ["node_modules/.cache/prettier/**"]
+    },
+    "fix:lint": {
+      "dependsOn": ["^build"],
+      "inputs": ["$TURBO_DEFAULT$", "!**/*.md"],
+      "outputs": ["node_modules/.cache/eslint/**"]
+    },
+    "start": {
+      "cache": false,
+      "persistent": true
     },
     "test": {
       "dependsOn": ["^build"],
       "outputs": []
-    },
-    "start": {
-      "cache": false
-    },
-    "clean": {
-      "cache": false
     }
   }
 }