From 05de4d83f377162f4924f737af65eae4ad454f02 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Tue, 11 Jun 2024 02:23:19 +0530
Subject: [PATCH] chore: app dir headers re-implementation  (#4751)

* chore: header refactor.

* fix: core imports

* chore: refactor profile activity header and fix all other header imports.

* fix: import fixes

* chore: header refactor.

* fix: app dir header reimplementation

* fix: removing parllel headers

* fix: adding route groups to handle pages

* fix: disabling sentry for temp

* chore: update default exports in layouts & headers for consistency.

* fix: bugfixes

* fix: build errors

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
---
 admin/app/email/layout.tsx                    |   6 +-
 admin/app/image/layout.tsx                    |   6 +-
 admin/app/layout.tsx                          |   4 +-
 .../[workspaceSlug]/(pages)/pages/layout.tsx  |   8 +
 .../[workspaceSlug]/(pages)/pages/page.tsx    |   3 +
 .../active-cycles/header.tsx                  |   4 +-
 .../(projects)/active-cycles/layout.tsx       |  13 +
 .../{ => (projects)}/active-cycles/page.tsx   |   2 +-
 .../analytics/header.tsx                      |   4 +-
 .../(projects)/analytics/layout.tsx           |  13 +
 .../{ => (projects)}/analytics/page.tsx       |   9 +-
 .../{@header => (projects)}/header.tsx        |   4 +-
 .../{ => (projects)}/layout.tsx               |   9 +-
 web/app/[workspaceSlug]/(projects)/page.tsx   |  28 +++
 .../profile/[userId]/activity/page.tsx        |   0
 .../profile/[userId]/header.tsx               |   4 +-
 .../(projects)/profile/[userId]/layout.tsx    |  69 ++++++
 .../profile/[userId]/mobile-header.tsx        |   4 +-
 .../profile/[userId]/navbar.tsx               |   0
 .../profile/[userId]/page.tsx                 |   6 +-
 .../[projectId]/archives/cycles/layout.tsx    |  14 ++
 .../[projectId]/archives/cycles/page.tsx      |   0
 .../(detail)}/[projectId]/archives/header.tsx |   4 +-
 .../(detail)}/[archivedIssueId]/page.tsx      |   0
 .../archives/issues/(detail)}/header.tsx      |   5 +-
 .../archives/issues/(detail)/layout.tsx       |  14 ++
 .../archives/issues/(list)/layout.tsx         |  14 ++
 .../archives/issues/(list)}/page.tsx          |   0
 .../[projectId]/archives/modules/layout.tsx   |  14 ++
 .../[projectId]/archives/modules/page.tsx     |   0
 .../cycles/(detail)}/[cycleId]/page.tsx       |   0
 .../[projectId]/cycles/(detail)}/header.tsx   |   9 +-
 .../[projectId]/cycles/(detail)/layout.tsx    |  15 ++
 .../cycles/(detail)}/mobile-header.tsx        |   4 +-
 .../[projectId]/cycles/(list)}/header.tsx     |   4 +-
 .../[projectId]/cycles/(list)/layout.tsx      |  15 ++
 .../cycles/(list)}/mobile-header.tsx          |   4 +-
 .../[projectId]/cycles/(list)}/page.tsx       |   0
 .../[projectId]/draft-issues/header.tsx       |   4 +-
 .../[projectId]/draft-issues/layout.tsx       |  14 ++
 .../[projectId]/draft-issues/page.tsx         |   0
 .../(detail)}/[projectId]/inbox/header.tsx    |   4 +-
 .../(detail)/[projectId]/inbox/layout.tsx     |  14 ++
 .../(detail)}/[projectId]/inbox/page.tsx      |   0
 .../issues/(detail)}/[issueId]/page.tsx       |   0
 .../[projectId]/issues/(detail)}/header.tsx   |   5 +-
 .../[projectId]/issues/(detail)/layout.tsx    |  14 ++
 .../[projectId]/issues/(list)}/header.tsx     |   4 +-
 .../[projectId]/issues/(list)/layout.tsx      |  15 ++
 .../issues/(list)}/mobile-header.tsx          |   4 +-
 .../[projectId]/issues/(list)}/page.tsx       |   0
 .../modules/(detail)}/[moduleId]/page.tsx     |   0
 .../[projectId]/modules/(detail)}/header.tsx  |   4 +-
 .../[projectId]/modules/(detail)/layout.tsx   |  15 ++
 .../modules/(detail)}/mobile-header.tsx       |   4 +-
 .../[projectId]/modules/(list)}/header.tsx    |   4 +-
 .../[projectId]/modules/(list)/layout.tsx     |  15 ++
 .../modules/(list)}/mobile-header.tsx         |   4 +-
 .../[projectId]/modules/(list)}/page.tsx      |   0
 .../pages/(detail)}/[pageId]/page.tsx         |   0
 .../[projectId]/pages/(detail)}/header.tsx    |   4 +-
 .../[projectId]/pages/(detail)/layout.tsx     |  15 ++
 .../[projectId]/pages/(list)}/header.tsx      |   4 +-
 .../[projectId]/pages/(list)/layout.tsx       |  16 ++
 .../[projectId]/pages/(list)}/page.tsx        |   0
 .../[projectId]/settings/automations/page.tsx |   0
 .../[projectId]/settings/estimates/page.tsx   |   0
 .../[projectId]/settings/features/page.tsx    |   0
 .../(detail)}/[projectId]/settings/header.tsx |   4 +-
 .../[projectId]/settings/labels/page.tsx      |   0
 .../(detail)/[projectId]/settings/layout.tsx  |  68 ++++++
 .../[projectId]/settings/members/page.tsx     |   0
 .../(detail)}/[projectId]/settings/page.tsx   |   0
 .../[projectId]/settings/sidebar.tsx          |   4 +-
 .../[projectId]/settings/states/page.tsx      |   0
 .../views/(detail)}/[viewId]/header.tsx       |   5 +-
 .../views/(detail)}/[viewId]/page.tsx         |  32 ++-
 .../[projectId]/views/(detail)/layout.tsx     |  14 ++
 .../[projectId]/views/(list)}/header.tsx      |   4 +-
 .../[projectId]/views/(list)/layout.tsx       |  14 ++
 .../[projectId]/views/(list)}/page.tsx        |   0
 .../(projects)/projects/(detail)/layout.tsx   |  11 +
 .../projects/(list)}/header.tsx               |   4 +-
 .../(projects)/projects/(list)/layout.tsx     |  17 ++
 .../projects/(list)}/mobile-header.tsx        |   4 +-
 .../projects/(list)}/page.tsx                 |  28 +--
 .../settings/api-tokens/page.tsx              |   0
 .../settings/billing/page.tsx                 |   0
 .../settings/exports/page.tsx                 |   0
 .../settings/header.tsx                       |   6 +-
 .../settings/imports/page.tsx                 |   0
 .../settings/integrations/page.tsx            |   0
 .../(projects)/settings/layout.tsx            |  36 +++
 .../settings/members/page.tsx                 |   0
 .../settings/mobile-header-tabs.tsx}          |   9 +-
 .../{ => (projects)}/settings/page.tsx        |   0
 .../{ => (projects)}/settings/sidebar.tsx     |   0
 .../settings/webhooks/[webhookId]/page.tsx    |   0
 .../settings/webhooks/page.tsx                |   0
 .../{ => (projects)}/sidebar.tsx              |   4 +-
 .../workspace-views/[globalViewId]/page.tsx   |   0
 .../workspace-views/header.tsx                |   4 +-
 .../(projects)/workspace-views/layout.tsx     |  13 +
 .../{ => (projects)}/workspace-views/page.tsx |   0
 .../@header/active-cycles/page.tsx            |   9 -
 .../@header/analytics/page.tsx                |   9 -
 web/app/[workspaceSlug]/@header/page.tsx      |   9 -
 .../profile/[userId]/[profileViewId]/page.tsx |  20 --
 .../profile/[userId]/activity/page.tsx        |   8 -
 .../@header/profile/[userId]/page.tsx         |   8 -
 .../archives/[...default-header]/page.tsx     |   2 -
 .../issues/[archivedIssueId]/page.tsx         |   9 -
 .../projects/[projectId]/archives/page.tsx    |   9 -
 .../[projectId]/cycles/[cycleId]/page.tsx     |  12 -
 .../projects/[projectId]/cycles/page.tsx      |  12 -
 .../[projectId]/draft-issues/page.tsx         |   9 -
 .../projects/[projectId]/inbox/page.tsx       |   9 -
 .../[projectId]/issues/[issueId]/page.tsx     |   9 -
 .../projects/[projectId]/issues/page.tsx      |  12 -
 .../[projectId]/modules/[moduleId]/page.tsx   |  12 -
 .../projects/[projectId]/modules/page.tsx     |  12 -
 .../[projectId]/pages/[pageId]/page.tsx       |   9 -
 .../projects/[projectId]/pages/page.tsx       |   9 -
 .../settings/[...default-header]/page.tsx     |   2 -
 .../projects/[projectId]/settings/page.tsx    |   9 -
 .../[projectId]/views/[viewId]/page.tsx       |   9 -
 .../projects/[projectId]/views/page.tsx       |   9 -
 .../[workspaceSlug]/@header/projects/page.tsx |  13 -
 .../settings/[...default-header]/page.tsx     |   2 -
 .../[workspaceSlug]/@header/settings/page.tsx |   9 -
 .../[...default-header]/page.tsx              |   2 -
 .../@header/workspace-views/page.tsx          |   9 -
 .../[workspaceSlug]/app-header-wrapper.tsx    |  26 --
 web/app/[workspaceSlug]/page.tsx              |  23 --
 .../profile/[userId]/layout.tsx               |  51 ----
 .../projects/[projectId]/layout.tsx           |  13 -
 .../projects/[projectId]/settings/layout.tsx  |  57 -----
 web/app/[workspaceSlug]/settings/layout.tsx   |  31 ---
 web/app/accounts/forgot-password/page.tsx     |   6 +-
 web/app/accounts/reset-password/page.tsx      |   6 +-
 web/app/error.tsx                             |  20 +-
 web/app/installations/[provider]/page.tsx     |   6 +-
 web/app/profile/notifications/page.tsx        |   6 +-
 web/components/core/app-header.tsx            |  28 +++
 web/components/core/content-wrapper.tsx       |  13 +
 web/components/core/index.ts                  |   2 +
 web/helpers/string.helper.ts                  |   2 +-
 web/instrumentation.ts                        |   8 +-
 web/package.json                              |   2 +-
 yarn.lock                                     | 227 +++++++++++++++++-
 150 files changed, 887 insertions(+), 648 deletions(-)
 create mode 100644 web/app/[workspaceSlug]/(pages)/pages/layout.tsx
 create mode 100644 web/app/[workspaceSlug]/(pages)/pages/page.tsx
 rename web/app/[workspaceSlug]/{@header => (projects)}/active-cycles/header.tsx (90%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/active-cycles/layout.tsx
 rename web/app/[workspaceSlug]/{ => (projects)}/active-cycles/page.tsx (93%)
 rename web/app/[workspaceSlug]/{@header => (projects)}/analytics/header.tsx (96%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/analytics/layout.tsx
 rename web/app/[workspaceSlug]/{ => (projects)}/analytics/page.tsx (93%)
 rename web/app/[workspaceSlug]/{@header => (projects)}/header.tsx (96%)
 rename web/app/[workspaceSlug]/{ => (projects)}/layout.tsx (62%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/page.tsx
 rename web/app/[workspaceSlug]/{ => (projects)}/profile/[userId]/activity/page.tsx (100%)
 rename web/app/[workspaceSlug]/{@header => (projects)}/profile/[userId]/header.tsx (96%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx
 rename web/app/[workspaceSlug]/{@header => (projects)}/profile/[userId]/mobile-header.tsx (98%)
 rename web/app/[workspaceSlug]/{ => (projects)}/profile/[userId]/navbar.tsx (100%)
 rename web/app/[workspaceSlug]/{ => (projects)}/profile/[userId]/page.tsx (96%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/layout.tsx
 rename web/app/[workspaceSlug]/{projects => (projects)/projects/(detail)}/[projectId]/archives/cycles/page.tsx (100%)
 rename web/app/[workspaceSlug]/{@header/projects => (projects)/projects/(detail)}/[projectId]/archives/header.tsx (97%)
 rename web/app/[workspaceSlug]/{projects/[projectId]/archives/issues => (projects)/projects/(detail)/[projectId]/archives/issues/(detail)}/[archivedIssueId]/page.tsx (100%)
 rename web/app/[workspaceSlug]/{@header/projects/[projectId]/archives/issues/[archivedIssueId] => (projects)/projects/(detail)/[projectId]/archives/issues/(detail)}/header.tsx (95%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/layout.tsx
 create mode 100644 web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/layout.tsx
 rename web/app/[workspaceSlug]/{projects/[projectId]/archives/issues => (projects)/projects/(detail)/[projectId]/archives/issues/(list)}/page.tsx (100%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/layout.tsx
 rename web/app/[workspaceSlug]/{projects => (projects)/projects/(detail)}/[projectId]/archives/modules/page.tsx (100%)
 rename web/app/[workspaceSlug]/{projects/[projectId]/cycles => (projects)/projects/(detail)/[projectId]/cycles/(detail)}/[cycleId]/page.tsx (100%)
 rename web/app/[workspaceSlug]/{@header/projects/[projectId]/cycles/[cycleId] => (projects)/projects/(detail)/[projectId]/cycles/(detail)}/header.tsx (98%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/layout.tsx
 rename web/app/[workspaceSlug]/{@header/projects/[projectId]/cycles/[cycleId] => (projects)/projects/(detail)/[projectId]/cycles/(detail)}/mobile-header.tsx (98%)
 rename web/app/[workspaceSlug]/{@header/projects/[projectId]/cycles => (projects)/projects/(detail)/[projectId]/cycles/(list)}/header.tsx (97%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/layout.tsx
 rename web/app/[workspaceSlug]/{@header/projects/[projectId]/cycles => (projects)/projects/(detail)/[projectId]/cycles/(list)}/mobile-header.tsx (95%)
 rename web/app/[workspaceSlug]/{projects/[projectId]/cycles => (projects)/projects/(detail)/[projectId]/cycles/(list)}/page.tsx (100%)
 rename web/app/[workspaceSlug]/{@header/projects => (projects)/projects/(detail)}/[projectId]/draft-issues/header.tsx (98%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/layout.tsx
 rename web/app/[workspaceSlug]/{projects => (projects)/projects/(detail)}/[projectId]/draft-issues/page.tsx (100%)
 rename web/app/[workspaceSlug]/{@header/projects => (projects)/projects/(detail)}/[projectId]/inbox/header.tsx (97%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/layout.tsx
 rename web/app/[workspaceSlug]/{projects => (projects)/projects/(detail)}/[projectId]/inbox/page.tsx (100%)
 rename web/app/[workspaceSlug]/{projects/[projectId]/issues => (projects)/projects/(detail)/[projectId]/issues/(detail)}/[issueId]/page.tsx (100%)
 rename web/app/[workspaceSlug]/{@header/projects/[projectId]/issues/[issueId] => (projects)/projects/(detail)/[projectId]/issues/(detail)}/header.tsx (95%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/layout.tsx
 rename web/app/[workspaceSlug]/{@header/projects/[projectId]/issues => (projects)/projects/(detail)/[projectId]/issues/(list)}/header.tsx (99%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/layout.tsx
 rename web/app/[workspaceSlug]/{@header/projects/[projectId]/issues => (projects)/projects/(detail)/[projectId]/issues/(list)}/mobile-header.tsx (98%)
 rename web/app/[workspaceSlug]/{projects/[projectId]/issues => (projects)/projects/(detail)/[projectId]/issues/(list)}/page.tsx (100%)
 rename web/app/[workspaceSlug]/{projects/[projectId]/modules => (projects)/projects/(detail)/[projectId]/modules/(detail)}/[moduleId]/page.tsx (100%)
 rename web/app/[workspaceSlug]/{@header/projects/[projectId]/modules/[moduleId] => (projects)/projects/(detail)/[projectId]/modules/(detail)}/header.tsx (99%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/layout.tsx
 rename web/app/[workspaceSlug]/{@header/projects/[projectId]/modules/[moduleId] => (projects)/projects/(detail)/[projectId]/modules/(detail)}/mobile-header.tsx (98%)
 rename web/app/[workspaceSlug]/{@header/projects/[projectId]/modules => (projects)/projects/(detail)/[projectId]/modules/(list)}/header.tsx (96%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/layout.tsx
 rename web/app/[workspaceSlug]/{@header/projects/[projectId]/modules => (projects)/projects/(detail)/[projectId]/modules/(list)}/mobile-header.tsx (94%)
 rename web/app/[workspaceSlug]/{projects/[projectId]/modules => (projects)/projects/(detail)/[projectId]/modules/(list)}/page.tsx (100%)
 rename web/app/[workspaceSlug]/{projects/[projectId]/pages => (projects)/projects/(detail)/[projectId]/pages/(detail)}/[pageId]/page.tsx (100%)
 rename web/app/[workspaceSlug]/{@header/projects/[projectId]/pages/[pageId] => (projects)/projects/(detail)/[projectId]/pages/(detail)}/header.tsx (98%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/layout.tsx
 rename web/app/[workspaceSlug]/{@header/projects/[projectId]/pages => (projects)/projects/(detail)/[projectId]/pages/(list)}/header.tsx (97%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/layout.tsx
 rename web/app/[workspaceSlug]/{projects/[projectId]/pages => (projects)/projects/(detail)/[projectId]/pages/(list)}/page.tsx (100%)
 rename web/app/[workspaceSlug]/{projects => (projects)/projects/(detail)}/[projectId]/settings/automations/page.tsx (100%)
 rename web/app/[workspaceSlug]/{projects => (projects)/projects/(detail)}/[projectId]/settings/estimates/page.tsx (100%)
 rename web/app/[workspaceSlug]/{projects => (projects)/projects/(detail)}/[projectId]/settings/features/page.tsx (100%)
 rename web/app/[workspaceSlug]/{@header/projects => (projects)/projects/(detail)}/[projectId]/settings/header.tsx (97%)
 rename web/app/[workspaceSlug]/{projects => (projects)/projects/(detail)}/[projectId]/settings/labels/page.tsx (100%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/layout.tsx
 rename web/app/[workspaceSlug]/{projects => (projects)/projects/(detail)}/[projectId]/settings/members/page.tsx (100%)
 rename web/app/[workspaceSlug]/{projects => (projects)/projects/(detail)}/[projectId]/settings/page.tsx (100%)
 rename web/app/[workspaceSlug]/{projects => (projects)/projects/(detail)}/[projectId]/settings/sidebar.tsx (96%)
 rename web/app/[workspaceSlug]/{projects => (projects)/projects/(detail)}/[projectId]/settings/states/page.tsx (100%)
 rename web/app/[workspaceSlug]/{@header/projects/[projectId]/views => (projects)/projects/(detail)/[projectId]/views/(detail)}/[viewId]/header.tsx (98%)
 rename web/app/[workspaceSlug]/{projects/[projectId]/views => (projects)/projects/(detail)/[projectId]/views/(detail)}/[viewId]/page.tsx (71%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/layout.tsx
 rename web/app/[workspaceSlug]/{@header/projects/[projectId]/views => (projects)/projects/(detail)/[projectId]/views/(list)}/header.tsx (96%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/layout.tsx
 rename web/app/[workspaceSlug]/{projects/[projectId]/views => (projects)/projects/(detail)/[projectId]/views/(list)}/page.tsx (100%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/projects/(detail)/layout.tsx
 rename web/app/[workspaceSlug]/{@header/projects => (projects)/projects/(list)}/header.tsx (98%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/projects/(list)/layout.tsx
 rename web/app/[workspaceSlug]/{@header/projects => (projects)/projects/(list)}/mobile-header.tsx (97%)
 rename web/app/[workspaceSlug]/{projects => (projects)/projects/(list)}/page.tsx (76%)
 rename web/app/[workspaceSlug]/{ => (projects)}/settings/api-tokens/page.tsx (100%)
 rename web/app/[workspaceSlug]/{ => (projects)}/settings/billing/page.tsx (100%)
 rename web/app/[workspaceSlug]/{ => (projects)}/settings/exports/page.tsx (100%)
 rename web/app/[workspaceSlug]/{@header => (projects)}/settings/header.tsx (89%)
 rename web/app/[workspaceSlug]/{ => (projects)}/settings/imports/page.tsx (100%)
 rename web/app/[workspaceSlug]/{ => (projects)}/settings/integrations/page.tsx (100%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/settings/layout.tsx
 rename web/app/[workspaceSlug]/{ => (projects)}/settings/members/page.tsx (100%)
 rename web/{components/workspace/settings/mobile-workspace-settings-tabs.tsx => app/[workspaceSlug]/(projects)/settings/mobile-header-tabs.tsx} (83%)
 rename web/app/[workspaceSlug]/{ => (projects)}/settings/page.tsx (100%)
 rename web/app/[workspaceSlug]/{ => (projects)}/settings/sidebar.tsx (100%)
 rename web/app/[workspaceSlug]/{ => (projects)}/settings/webhooks/[webhookId]/page.tsx (100%)
 rename web/app/[workspaceSlug]/{ => (projects)}/settings/webhooks/page.tsx (100%)
 rename web/app/[workspaceSlug]/{ => (projects)}/sidebar.tsx (94%)
 rename web/app/[workspaceSlug]/{ => (projects)}/workspace-views/[globalViewId]/page.tsx (100%)
 rename web/app/[workspaceSlug]/{@header => (projects)}/workspace-views/header.tsx (98%)
 create mode 100644 web/app/[workspaceSlug]/(projects)/workspace-views/layout.tsx
 rename web/app/[workspaceSlug]/{ => (projects)}/workspace-views/page.tsx (100%)
 delete mode 100644 web/app/[workspaceSlug]/@header/active-cycles/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/analytics/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/profile/[userId]/[profileViewId]/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/profile/[userId]/activity/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/profile/[userId]/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/projects/[projectId]/archives/[...default-header]/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/projects/[projectId]/archives/issues/[archivedIssueId]/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/projects/[projectId]/archives/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/projects/[projectId]/cycles/[cycleId]/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/projects/[projectId]/cycles/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/projects/[projectId]/draft-issues/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/projects/[projectId]/inbox/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/projects/[projectId]/issues/[issueId]/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/projects/[projectId]/issues/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/projects/[projectId]/modules/[moduleId]/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/projects/[projectId]/modules/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/projects/[projectId]/pages/[pageId]/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/projects/[projectId]/pages/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/projects/[projectId]/settings/[...default-header]/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/projects/[projectId]/settings/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/projects/[projectId]/views/[viewId]/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/projects/[projectId]/views/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/projects/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/settings/[...default-header]/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/settings/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/workspace-views/[...default-header]/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/@header/workspace-views/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/app-header-wrapper.tsx
 delete mode 100644 web/app/[workspaceSlug]/page.tsx
 delete mode 100644 web/app/[workspaceSlug]/profile/[userId]/layout.tsx
 delete mode 100644 web/app/[workspaceSlug]/projects/[projectId]/layout.tsx
 delete mode 100644 web/app/[workspaceSlug]/projects/[projectId]/settings/layout.tsx
 delete mode 100644 web/app/[workspaceSlug]/settings/layout.tsx
 create mode 100644 web/components/core/app-header.tsx
 create mode 100644 web/components/core/content-wrapper.tsx

diff --git a/admin/app/email/layout.tsx b/admin/app/email/layout.tsx
index 64f019ec9..e7ab5eba8 100644
--- a/admin/app/email/layout.tsx
+++ b/admin/app/email/layout.tsx
@@ -10,6 +10,6 @@ export const metadata: Metadata = {
   title: "Email Settings - God Mode",
 };
 
-const EmailLayout = ({ children }: EmailLayoutProps) => <AdminLayout>{children}</AdminLayout>;
-
-export default EmailLayout;
+export default function EmailLayout({ children }: EmailLayoutProps) {
+  return <AdminLayout>{children}</AdminLayout>;
+}
diff --git a/admin/app/image/layout.tsx b/admin/app/image/layout.tsx
index 18e9343b5..62a58391b 100644
--- a/admin/app/image/layout.tsx
+++ b/admin/app/image/layout.tsx
@@ -10,6 +10,6 @@ export const metadata: Metadata = {
   title: "Images Settings - God Mode",
 };
 
-const ImageLayout = ({ children }: ImageLayoutProps) => <AdminLayout>{children}</AdminLayout>;
-
-export default ImageLayout;
+export default function ImageLayout({ children }: ImageLayoutProps) {
+  return <AdminLayout>{children}</AdminLayout>;
+}
diff --git a/admin/app/layout.tsx b/admin/app/layout.tsx
index e79d0bac8..9fdce4017 100644
--- a/admin/app/layout.tsx
+++ b/admin/app/layout.tsx
@@ -16,7 +16,7 @@ import { UserProvider } from "@/lib/user-provider";
 // styles
 import "./globals.css";
 
-function RootLayout({ children }: { children: ReactNode }) {
+export default function RootLayout({ children }: { children: ReactNode }) {
   // themes
   const { resolvedTheme } = useTheme();
 
@@ -44,5 +44,3 @@ function RootLayout({ children }: { children: ReactNode }) {
     </html>
   );
 }
-
-export default RootLayout;
diff --git a/web/app/[workspaceSlug]/(pages)/pages/layout.tsx b/web/app/[workspaceSlug]/(pages)/pages/layout.tsx
new file mode 100644
index 000000000..deff654cb
--- /dev/null
+++ b/web/app/[workspaceSlug]/(pages)/pages/layout.tsx
@@ -0,0 +1,8 @@
+export default function WorkspacePagesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div>
+      <h1>WorkspacePages Layout </h1>
+      {children}
+    </div>
+  );
+}
diff --git a/web/app/[workspaceSlug]/(pages)/pages/page.tsx b/web/app/[workspaceSlug]/(pages)/pages/page.tsx
new file mode 100644
index 000000000..b06579362
--- /dev/null
+++ b/web/app/[workspaceSlug]/(pages)/pages/page.tsx
@@ -0,0 +1,3 @@
+export default function WorkspacePagesPage() {
+  return <div>WorkspacePagesPage</div>;
+}
diff --git a/web/app/[workspaceSlug]/@header/active-cycles/header.tsx b/web/app/[workspaceSlug]/(projects)/active-cycles/header.tsx
similarity index 90%
rename from web/app/[workspaceSlug]/@header/active-cycles/header.tsx
rename to web/app/[workspaceSlug]/(projects)/active-cycles/header.tsx
index eb6e8633d..f6565f415 100644
--- a/web/app/[workspaceSlug]/@header/active-cycles/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/active-cycles/header.tsx
@@ -7,7 +7,7 @@ import { Breadcrumbs, ContrastIcon } from "@plane/ui";
 import { BreadcrumbLink } from "@/components/common";
 // icons
 
-const WorkspaceActiveCycleHeader = observer(() => (
+export const WorkspaceActiveCycleHeader = observer(() => (
   <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
     <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
       <div className="flex items-center gap-2">
@@ -27,5 +27,3 @@ const WorkspaceActiveCycleHeader = observer(() => (
     </div>
   </div>
 ));
-
-export default WorkspaceActiveCycleHeader;
diff --git a/web/app/[workspaceSlug]/(projects)/active-cycles/layout.tsx b/web/app/[workspaceSlug]/(projects)/active-cycles/layout.tsx
new file mode 100644
index 000000000..cfe3ed842
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/active-cycles/layout.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { AppHeader, ContentWrapper } from "@/components/core";
+import { WorkspaceActiveCycleHeader } from "./header";
+
+export default function WorkspaceActiveCycleLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<WorkspaceActiveCycleHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}
diff --git a/web/app/[workspaceSlug]/active-cycles/page.tsx b/web/app/[workspaceSlug]/(projects)/active-cycles/page.tsx
similarity index 93%
rename from web/app/[workspaceSlug]/active-cycles/page.tsx
rename to web/app/[workspaceSlug]/(projects)/active-cycles/page.tsx
index 3ead5226b..5f556c4be 100644
--- a/web/app/[workspaceSlug]/active-cycles/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/active-cycles/page.tsx
@@ -20,4 +20,4 @@ const WorkspaceActiveCyclesPage = observer(() => {
   );
 });
 
-export default WorkspaceActiveCyclesPage;
\ No newline at end of file
+export default WorkspaceActiveCyclesPage;
diff --git a/web/app/[workspaceSlug]/@header/analytics/header.tsx b/web/app/[workspaceSlug]/(projects)/analytics/header.tsx
similarity index 96%
rename from web/app/[workspaceSlug]/@header/analytics/header.tsx
rename to web/app/[workspaceSlug]/(projects)/analytics/header.tsx
index 51254da58..dc503dd6d 100644
--- a/web/app/[workspaceSlug]/@header/analytics/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/analytics/header.tsx
@@ -14,7 +14,7 @@ import { cn } from "@/helpers/common.helper";
 // hooks
 import { useAppTheme } from "@/hooks/store";
 
-const WorkspaceAnalyticsHeader = observer(() => {
+export const WorkspaceAnalyticsHeader = observer(() => {
   const searchParams = useSearchParams();
   const analytics_tab = searchParams.get("analytics_tab");
   // store hooks
@@ -71,5 +71,3 @@ const WorkspaceAnalyticsHeader = observer(() => {
     </>
   );
 });
-
-export default WorkspaceAnalyticsHeader;
diff --git a/web/app/[workspaceSlug]/(projects)/analytics/layout.tsx b/web/app/[workspaceSlug]/(projects)/analytics/layout.tsx
new file mode 100644
index 000000000..8dfc8b3b0
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/analytics/layout.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { AppHeader, ContentWrapper } from "@/components/core";
+import { WorkspaceAnalyticsHeader } from "./header";
+
+export default function WorkspaceAnalyticsLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<WorkspaceAnalyticsHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}
diff --git a/web/app/[workspaceSlug]/analytics/page.tsx b/web/app/[workspaceSlug]/(projects)/analytics/page.tsx
similarity index 93%
rename from web/app/[workspaceSlug]/analytics/page.tsx
rename to web/app/[workspaceSlug]/(projects)/analytics/page.tsx
index 2a4f9b9e9..5fd4104ee 100644
--- a/web/app/[workspaceSlug]/analytics/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/analytics/page.tsx
@@ -12,7 +12,7 @@ import { EmptyState } from "@/components/empty-state";
 import { ANALYTICS_TABS } from "@/constants/analytics";
 import { EmptyStateType } from "@/constants/empty-state";
 // hooks
-import { useCommandPalette, useEventTracker, useProject, useWorkspace } from "@/hooks/store";;
+import { useCommandPalette, useEventTracker, useProject, useWorkspace } from "@/hooks/store";
 
 const AnalyticsPage = observer(() => {
   const searchParams = useSearchParams();
@@ -36,8 +36,9 @@ const AnalyticsPage = observer(() => {
                 <Tab key={tab.key} as={Fragment}>
                   {({ selected }) => (
                     <button
-                      className={`text-sm group relative flex items-center gap-1 h-[50px] px-3 cursor-pointer transition-all font-medium outline-none  ${selected ? "text-custom-primary-100 " : "hover:text-custom-text-200"
-                        }`}
+                      className={`text-sm group relative flex items-center gap-1 h-[50px] px-3 cursor-pointer transition-all font-medium outline-none  ${
+                        selected ? "text-custom-primary-100 " : "hover:text-custom-text-200"
+                      }`}
                     >
                       {tab.title}
                       <div
@@ -71,4 +72,4 @@ const AnalyticsPage = observer(() => {
   );
 });
 
-export default AnalyticsPage;
\ No newline at end of file
+export default AnalyticsPage;
diff --git a/web/app/[workspaceSlug]/@header/header.tsx b/web/app/[workspaceSlug]/(projects)/header.tsx
similarity index 96%
rename from web/app/[workspaceSlug]/@header/header.tsx
rename to web/app/[workspaceSlug]/(projects)/header.tsx
index 4afd12399..339744d5d 100644
--- a/web/app/[workspaceSlug]/@header/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/header.tsx
@@ -15,7 +15,7 @@ import { CHANGELOG_REDIRECTED, GITHUB_REDIRECTED } from "@/constants/event-track
 // hooks
 import { useEventTracker } from "@/hooks/store";
 
-const WorkspaceDashboardHeader = () => {
+export const WorkspaceDashboardHeader = () => {
   // hooks
   const { captureEvent } = useEventTracker();
   const { resolvedTheme } = useTheme();
@@ -72,5 +72,3 @@ const WorkspaceDashboardHeader = () => {
     </>
   );
 };
-
-export default WorkspaceDashboardHeader;
diff --git a/web/app/[workspaceSlug]/layout.tsx b/web/app/[workspaceSlug]/(projects)/layout.tsx
similarity index 62%
rename from web/app/[workspaceSlug]/layout.tsx
rename to web/app/[workspaceSlug]/(projects)/layout.tsx
index 06fe6dd91..f8fe0f8f9 100644
--- a/web/app/[workspaceSlug]/layout.tsx
+++ b/web/app/[workspaceSlug]/(projects)/layout.tsx
@@ -3,9 +3,9 @@
 import { CommandPalette } from "@/components/command-palette";
 import { WorkspaceAuthWrapper } from "@/layouts/auth-layout";
 import { AuthenticationWrapper } from "@/lib/wrappers";
-import AppSidebar from "./sidebar";
+import { AppSidebar } from "./sidebar";
 
-export default function WorkspaceLayout({ header, children }: { header: React.ReactNode; children: React.ReactNode }) {
+export default function WorkspaceLayout({ children }: { children: React.ReactNode }) {
   return (
     <AuthenticationWrapper>
       <CommandPalette />
@@ -13,10 +13,7 @@ export default function WorkspaceLayout({ header, children }: { header: React.Re
         <div className="relative flex h-screen w-full overflow-hidden">
           <AppSidebar />
           <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
-            {header}
-            <div className="h-full w-full overflow-hidden">
-              <div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div>
-            </div>
+            {children}
           </main>
         </div>
       </WorkspaceAuthWrapper>
diff --git a/web/app/[workspaceSlug]/(projects)/page.tsx b/web/app/[workspaceSlug]/(projects)/page.tsx
new file mode 100644
index 000000000..d684b923e
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/page.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { observer } from "mobx-react";
+// components
+import { PageHead, AppHeader, ContentWrapper } from "@/components/core";
+import { WorkspaceDashboardView } from "@/components/page-views";
+// hooks
+import { useWorkspace } from "@/hooks/store";
+// local components
+import { WorkspaceDashboardHeader } from "./header";
+
+const WorkspaceDashboardPage = observer(() => {
+  const { currentWorkspace } = useWorkspace();
+  // derived values
+  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Home` : undefined;
+
+  return (
+    <>
+      <AppHeader header={<WorkspaceDashboardHeader />} />
+      <ContentWrapper>
+        <PageHead title={pageTitle} />
+        <WorkspaceDashboardView />
+      </ContentWrapper>
+    </>
+  );
+});
+
+export default WorkspaceDashboardPage;
diff --git a/web/app/[workspaceSlug]/profile/[userId]/activity/page.tsx b/web/app/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/profile/[userId]/activity/page.tsx
rename to web/app/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx
diff --git a/web/app/[workspaceSlug]/@header/profile/[userId]/header.tsx b/web/app/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
similarity index 96%
rename from web/app/[workspaceSlug]/@header/profile/[userId]/header.tsx
rename to web/app/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
index 1f15e2c48..f39ebfc44 100644
--- a/web/app/[workspaceSlug]/@header/profile/[userId]/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
@@ -17,7 +17,7 @@ type TUserProfileHeader = {
   type?: string | undefined;
 };
 
-const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
+export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
   const { type = undefined } = props;
   // router
   const { workspaceSlug, userId } = useParams();
@@ -90,5 +90,3 @@ const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
     </div>
   );
 });
-
-export default UserProfileHeader;
diff --git a/web/app/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx b/web/app/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx
new file mode 100644
index 000000000..b37fa1ec3
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/layout.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useParams, usePathname } from "next/navigation";
+// components
+import { AppHeader, ContentWrapper } from "@/components/core";
+import { ProfileSidebar } from "@/components/profile";
+// constants
+import { PROFILE_ADMINS_TAB, PROFILE_VIEWER_TAB } from "@/constants/profile";
+import { EUserWorkspaceRoles } from "@/constants/workspace";
+// hooks
+import { useUser } from "@/hooks/store";
+// local components
+import { UserProfileHeader } from "./header";
+import { ProfileIssuesMobileHeader } from "./mobile-header";
+import { ProfileNavbar } from "./navbar";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const AUTHORIZED_ROLES = [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.VIEWER];
+
+const UseProfileLayout: React.FC<Props> = observer((props) => {
+  const { children } = props;
+  // router
+  const { workspaceSlug, userId } = useParams();
+  const pathname = usePathname();
+  // store hooks
+  const {
+    membership: { currentWorkspaceRole },
+  } = useUser();
+  // derived values
+  const isAuthorized = currentWorkspaceRole && AUTHORIZED_ROLES.includes(currentWorkspaceRole);
+  const isAuthorizedPath =
+    pathname.includes("assigned") || pathname.includes("created") || pathname.includes("subscribed");
+  const isIssuesTab = pathname.includes("assigned") || pathname.includes("created") || pathname.includes("subscribed");
+
+  const tabsList = isAuthorized ? [...PROFILE_VIEWER_TAB, ...PROFILE_ADMINS_TAB] : PROFILE_VIEWER_TAB;
+  const currentTab = tabsList.find((tab) => pathname === `/${workspaceSlug}/profile/${userId}${tab.selected}`);
+
+  return (
+    <>
+      {/* Passing the type prop from the current route value as we need the header as top most component.
+      TODO: We are depending on the route path to handle the mobile header type. If the path changes, this logic will break. */}
+      <AppHeader
+        header={<UserProfileHeader type={currentTab?.label} />}
+        mobileHeader={isIssuesTab && <ProfileIssuesMobileHeader />}
+      />
+      <ContentWrapper>
+        <div className="h-full w-full flex md:overflow-hidden">
+          <div className="flex w-full flex-col md:h-full md:overflow-hidden">
+            <ProfileNavbar isAuthorized={!!isAuthorized} showProfileIssuesFilter={isIssuesTab} />
+            {isAuthorized || !isAuthorizedPath ? (
+              <div className={`w-full overflow-hidden md:h-full`}>{children}</div>
+            ) : (
+              <div className="grid h-full w-full place-items-center text-custom-text-200">
+                You do not have the permission to access this page.
+              </div>
+            )}
+          </div>
+          <ProfileSidebar />
+        </div>
+      </ContentWrapper>
+    </>
+  );
+});
+
+export default UseProfileLayout;
diff --git a/web/app/[workspaceSlug]/@header/profile/[userId]/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
similarity index 98%
rename from web/app/[workspaceSlug]/@header/profile/[userId]/mobile-header.tsx
rename to web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
index 1bbd54cd2..2855cc129 100644
--- a/web/app/[workspaceSlug]/@header/profile/[userId]/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
@@ -24,7 +24,7 @@ import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
 import { useIssues, useLabel } from "@/hooks/store";
 
-const ProfileIssuesMobileHeader = observer(() => {
+export const ProfileIssuesMobileHeader = observer(() => {
   // router
   const { workspaceSlug, userId } = useParams();
   // store hook
@@ -187,5 +187,3 @@ const ProfileIssuesMobileHeader = observer(() => {
     </div>
   );
 });
-
-export default ProfileIssuesMobileHeader;
diff --git a/web/app/[workspaceSlug]/profile/[userId]/navbar.tsx b/web/app/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/profile/[userId]/navbar.tsx
rename to web/app/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
diff --git a/web/app/[workspaceSlug]/profile/[userId]/page.tsx b/web/app/[workspaceSlug]/(projects)/profile/[userId]/page.tsx
similarity index 96%
rename from web/app/[workspaceSlug]/profile/[userId]/page.tsx
rename to web/app/[workspaceSlug]/(projects)/profile/[userId]/page.tsx
index 3c9243c73..7d99317d7 100644
--- a/web/app/[workspaceSlug]/profile/[userId]/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/page.tsx
@@ -22,7 +22,7 @@ import { UserService } from "@/services/user.service";
 // services
 const userService = new UserService();
 
-const ProfileOverviewPage = () => {
+export default function ProfileOverviewPage() {
   const { workspaceSlug, userId } = useParams();
 
   const { data: userProfile } = useSWR(
@@ -51,6 +51,4 @@ const ProfileOverviewPage = () => {
       </div>
     </>
   );
-};
-
-export default ProfileOverviewPage;
\ No newline at end of file
+}
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/layout.tsx
new file mode 100644
index 000000000..ced92a6ac
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/layout.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+// components
+import { AppHeader, ContentWrapper } from "@/components/core";
+import { ProjectArchivesHeader } from "../header";
+
+export default function ProjectArchiveCyclesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ProjectArchivesHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/archives/cycles/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/projects/[projectId]/archives/cycles/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/cycles/page.tsx
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/archives/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
similarity index 97%
rename from web/app/[workspaceSlug]/@header/projects/[projectId]/archives/header.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
index 9595cec5d..2d8f80e2a 100644
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/archives/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
@@ -14,7 +14,7 @@ import { EIssuesStoreType } from "@/constants/issue";
 import { useIssues, useProject } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
-const ProjectArchivesHeader: FC = observer(() => {
+export const ProjectArchivesHeader: FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = useParams();
@@ -96,5 +96,3 @@ const ProjectArchivesHeader: FC = observer(() => {
     </div>
   );
 });
-
-export default ProjectArchivesHeader;
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/archives/issues/[archivedIssueId]/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/projects/[projectId]/archives/issues/[archivedIssueId]/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/[archivedIssueId]/page.tsx
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/archives/issues/[archivedIssueId]/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
similarity index 95%
rename from web/app/[workspaceSlug]/@header/projects/[projectId]/archives/issues/[archivedIssueId]/header.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
index 94df0a720..1ea183926 100644
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/archives/issues/[archivedIssueId]/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
@@ -17,7 +16,7 @@ import { IssueArchiveService } from "@/services/issue";
 
 const issueArchiveService = new IssueArchiveService();
 
-const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
+export const ProjectArchivedIssueDetailsHeader = observer(() => {
   // router
   const { workspaceSlug, projectId, archivedIssueId } = useParams();
   // store hooks
@@ -94,5 +93,3 @@ const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
     </div>
   );
 });
-
-export default ProjectArchivedIssueDetailsHeader;
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/layout.tsx
new file mode 100644
index 000000000..10e6cc582
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/layout.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+// components
+import { AppHeader, ContentWrapper } from "@/components/core";
+import { ProjectArchivedIssueDetailsHeader } from "./header";
+
+export default function ProjectArchivedIssueDetailLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ProjectArchivedIssueDetailsHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/layout.tsx
new file mode 100644
index 000000000..d12a5e01d
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/layout.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+// components
+import { AppHeader, ContentWrapper } from "@/components/core";
+import { ProjectArchivesHeader } from "../../header";
+
+export default function ProjectArchiveIssuesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ProjectArchivesHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/archives/issues/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/projects/[projectId]/archives/issues/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(list)/page.tsx
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/layout.tsx
new file mode 100644
index 000000000..333bcf74d
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/layout.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+// components
+import { AppHeader, ContentWrapper } from "@/components/core";
+import { ProjectArchivesHeader } from "../header";
+
+export default function ProjectArchiveModulesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ProjectArchivesHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/archives/modules/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/projects/[projectId]/archives/modules/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/modules/page.tsx
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/cycles/[cycleId]/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/projects/[projectId]/cycles/[cycleId]/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/[cycleId]/page.tsx
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/cycles/[cycleId]/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
similarity index 98%
rename from web/app/[workspaceSlug]/@header/projects/[projectId]/cycles/[cycleId]/header.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
index 01a16ed9e..94ea42949 100644
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/cycles/[cycleId]/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
@@ -57,7 +57,7 @@ const CycleDropdownOption: React.FC<{ cycleId: string }> = ({ cycleId }) => {
   );
 };
 
-const CycleIssuesHeader: React.FC = observer(() => {
+export const CycleIssuesHeader: React.FC = observer(() => {
   // states
   const [analyticsModal, setAnalyticsModal] = useState(false);
   // router
@@ -208,9 +208,8 @@ const CycleIssuesHeader: React.FC = observer(() => {
                           {issuesCount && issuesCount > 0 ? (
                             <Tooltip
                               isMobile={isMobile}
-                              tooltipContent={`There are ${issuesCount} ${
-                                issuesCount > 1 ? "issues" : "issue"
-                              } in this cycle`}
+                              tooltipContent={`There are ${issuesCount} ${issuesCount > 1 ? "issues" : "issue"
+                                } 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">
@@ -311,5 +310,3 @@ const CycleIssuesHeader: React.FC = observer(() => {
     </>
   );
 });
-
-export default CycleIssuesHeader;
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/layout.tsx
new file mode 100644
index 000000000..196665754
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/layout.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+// components
+import { AppHeader, ContentWrapper } from "@/components/core";
+import { CycleIssuesHeader } from "./header";
+import { CycleIssuesMobileHeader } from "./mobile-header";
+
+export default function ProjectCycleIssuesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<CycleIssuesHeader />} mobileHeader={<CycleIssuesMobileHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/cycles/[cycleId]/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
similarity index 98%
rename from web/app/[workspaceSlug]/@header/projects/[projectId]/cycles/[cycleId]/mobile-header.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
index e496a6a27..3735fd531 100644
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/cycles/[cycleId]/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/mobile-header.tsx
@@ -18,7 +18,7 @@ import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
 import { useIssues, useCycle, useProjectState, useLabel, useMember, useProject } from "@/hooks/store";
 
-const CycleIssuesMobileHeader = () => {
+export const CycleIssuesMobileHeader = () => {
   const [analyticsModal, setAnalyticsModal] = useState(false);
   const { getCycleById } = useCycle();
   const layouts = [
@@ -204,5 +204,3 @@ const CycleIssuesMobileHeader = () => {
     </>
   );
 };
-
-export default CycleIssuesMobileHeader;
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/cycles/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
similarity index 97%
rename from web/app/[workspaceSlug]/@header/projects/[projectId]/cycles/header.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
index 6e2d9b9a4..685352c1c 100644
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/cycles/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
@@ -13,7 +13,7 @@ import { EUserProjectRoles } from "@/constants/project";
 // hooks
 import { useCommandPalette, useEventTracker, useProject, useUser } from "@/hooks/store";
 
-const CyclesHeader: FC = observer(() => {
+export const CyclesListHeader: FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug } = useParams();
@@ -74,5 +74,3 @@ const CyclesHeader: FC = observer(() => {
     </div>
   );
 });
-
-export default CyclesHeader;
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/layout.tsx
new file mode 100644
index 000000000..76cbf685f
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/layout.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+// components
+import { AppHeader, ContentWrapper } from "@/components/core";
+import { CyclesListHeader } from "./header";
+import { CyclesListMobileHeader } from "./mobile-header";
+
+export default function ProjectCyclesListLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<CyclesListHeader />} mobileHeader={<CyclesListMobileHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/cycles/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx
similarity index 95%
rename from web/app/[workspaceSlug]/@header/projects/[projectId]/cycles/mobile-header.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx
index 40ffdb66c..ecb1d5b90 100644
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/cycles/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/mobile-header.tsx
@@ -10,7 +10,7 @@ import { CYCLE_VIEW_LAYOUTS } from "@/constants/cycle";
 // hooks
 import { useCycleFilter, useProject } from "@/hooks/store";
 
-const CyclesListMobileHeader = observer(() => {
+export const CyclesListMobileHeader = observer(() => {
   const { currentProjectDetails } = useProject();
   // hooks
   const { updateDisplayFilters } = useCycleFilter();
@@ -50,5 +50,3 @@ const CyclesListMobileHeader = observer(() => {
     </div>
   );
 });
-
-export default CyclesListMobileHeader;
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/cycles/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/projects/[projectId]/cycles/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/draft-issues/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx
similarity index 98%
rename from web/app/[workspaceSlug]/@header/projects/[projectId]/draft-issues/header.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx
index 749a3a949..227cdd982 100644
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/draft-issues/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx
@@ -18,7 +18,7 @@ import { calculateTotalFilters } from "@/helpers/filter.helper";
 import { useIssues, useLabel, useMember, useProject, useProjectState } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
-const ProjectDraftIssueHeader: FC = observer(() => {
+export const ProjectDraftIssueHeader: FC = observer(() => {
   // router
   const { workspaceSlug, projectId } = useParams() as { workspaceSlug: string; projectId: string };
   // store hooks
@@ -169,5 +169,3 @@ const ProjectDraftIssueHeader: FC = observer(() => {
     </div>
   );
 });
-
-export default ProjectDraftIssueHeader;
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/layout.tsx
new file mode 100644
index 000000000..f3068816e
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/layout.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+// components
+import { AppHeader, ContentWrapper } from "@/components/core";
+import { ProjectDraftIssueHeader } from "./header";
+
+export default function ProjectDraftIssuesLayou({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ProjectDraftIssueHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/draft-issues/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/projects/[projectId]/draft-issues/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/page.tsx
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/inbox/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/header.tsx
similarity index 97%
rename from web/app/[workspaceSlug]/@header/projects/[projectId]/inbox/header.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/header.tsx
index 8873bd90e..043bf84eb 100644
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/inbox/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/header.tsx
@@ -12,7 +12,7 @@ import { InboxIssueCreateEditModalRoot } from "@/components/inbox";
 // hooks
 import { useProject, useProjectInbox } from "@/hooks/store";
 
-const ProjectInboxHeader: FC = observer(() => {
+export const ProjectInboxHeader: FC = observer(() => {
   // states
   const [createIssueModal, setCreateIssueModal] = useState(false);
   // router
@@ -76,5 +76,3 @@ const ProjectInboxHeader: FC = observer(() => {
     </div>
   );
 });
-
-export default ProjectInboxHeader;
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/layout.tsx
new file mode 100644
index 000000000..167823fc2
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/layout.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+// components
+import { AppHeader, ContentWrapper } from "@/components/core";
+import { ProjectInboxHeader } from "./header";
+
+export default function ProjectInboxIssuesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ProjectInboxHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/inbox/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/projects/[projectId]/inbox/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/page.tsx
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/issues/[issueId]/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/projects/[projectId]/issues/[issueId]/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/[issueId]/page.tsx
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/issues/[issueId]/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx
similarity index 95%
rename from web/app/[workspaceSlug]/@header/projects/[projectId]/issues/[issueId]/header.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx
index 048435eab..645013378 100644
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/issues/[issueId]/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams, useRouter } from "next/navigation";
 import { PanelRight } from "lucide-react";
@@ -13,7 +12,7 @@ import { cn } from "@/helpers/common.helper";
 // hooks
 import { useAppTheme, useIssueDetail, useProject } from "@/hooks/store";
 
-const ProjectIssueDetailsHeader: FC = observer(() => {
+export const ProjectIssueDetailsHeader = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = useParams();
@@ -83,5 +82,3 @@ const ProjectIssueDetailsHeader: FC = observer(() => {
     </div>
   );
 });
-
-export default ProjectIssueDetailsHeader;
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/layout.tsx
new file mode 100644
index 000000000..37f4a7749
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/layout.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+// components
+import { AppHeader, ContentWrapper } from "@/components/core";
+import { ProjectIssueDetailsHeader } from "./header";
+
+export default function ProjectIssueDetailsLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ProjectIssueDetailsHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/issues/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx
similarity index 99%
rename from web/app/[workspaceSlug]/@header/projects/[projectId]/issues/header.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx
index dcf9d4c22..06ade9367 100644
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/issues/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx
@@ -32,7 +32,7 @@ import {
 import { useIssues } from "@/hooks/store/use-issues";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
-const ProjectIssuesHeader: React.FC = observer(() => {
+export const ProjectIssuesHeader = observer(() => {
   // states
   const [analyticsModal, setAnalyticsModal] = useState(false);
   // router
@@ -242,5 +242,3 @@ const ProjectIssuesHeader: React.FC = observer(() => {
     </>
   );
 });
-
-export default ProjectIssuesHeader;
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/layout.tsx
new file mode 100644
index 000000000..5b5c3048c
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/layout.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+// components
+import { AppHeader, ContentWrapper } from "@/components/core";
+import { ProjectIssuesHeader } from "./header";
+import { ProjectIssuesMobileHeader } from "./mobile-header";
+
+export default function ProjectIssuesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ProjectIssuesHeader />} mobileHeader={<ProjectIssuesMobileHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/issues/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
similarity index 98%
rename from web/app/[workspaceSlug]/@header/projects/[projectId]/issues/mobile-header.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
index b602091d4..444e33a61 100644
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/issues/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
@@ -19,7 +19,7 @@ import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
 import { useIssues, useLabel, useMember, useProject, useProjectState } from "@/hooks/store";
 
-const ProjectIssuesMobileHeader = observer(() => {
+export const ProjectIssuesMobileHeader = observer(() => {
   const layouts = [
     { key: "list", title: "List", icon: List },
     { key: "kanban", title: "Kanban", icon: Kanban },
@@ -182,5 +182,3 @@ const ProjectIssuesMobileHeader = observer(() => {
     </>
   );
 });
-
-export default ProjectIssuesMobileHeader;
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/issues/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/projects/[projectId]/issues/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/page.tsx
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/modules/[moduleId]/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/projects/[projectId]/modules/[moduleId]/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/[moduleId]/page.tsx
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/modules/[moduleId]/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
similarity index 99%
rename from web/app/[workspaceSlug]/@header/projects/[projectId]/modules/[moduleId]/header.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
index 990711d43..f262ef5fd 100644
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/modules/[moduleId]/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
@@ -60,7 +60,7 @@ const ModuleDropdownOption: React.FC<{ moduleId: string }> = ({ moduleId }) => {
   );
 };
 
-const ModuleIssuesHeader: React.FC = observer(() => {
+export const ModuleIssuesHeader: React.FC = observer(() => {
   // states
   const [analyticsModal, setAnalyticsModal] = useState(false);
   // router
@@ -317,5 +317,3 @@ const ModuleIssuesHeader: React.FC = observer(() => {
     </>
   );
 });
-
-export default ModuleIssuesHeader;
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/layout.tsx
new file mode 100644
index 000000000..bd409af05
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/layout.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+// components
+import { AppHeader, ContentWrapper } from "@/components/core";
+import { ModuleIssuesHeader } from "./header";
+import { ModuleIssuesMobileHeader } from "./mobile-header";
+
+export default function ProjectModuleIssuesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ModuleIssuesHeader />} mobileHeader={<ModuleIssuesMobileHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/modules/[moduleId]/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
similarity index 98%
rename from web/app/[workspaceSlug]/@header/projects/[projectId]/modules/[moduleId]/mobile-header.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
index f76cbe868..af34457c7 100644
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/modules/[moduleId]/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/mobile-header.tsx
@@ -19,7 +19,7 @@ import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
 import { useIssues, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store";
 
-const ModuleIssuesMobileHeader = observer(() => {
+export const ModuleIssuesMobileHeader = observer(() => {
   const [analyticsModal, setAnalyticsModal] = useState(false);
   const { currentProjectDetails } = useProject();
   const { getModuleById } = useModule();
@@ -185,5 +185,3 @@ const ModuleIssuesMobileHeader = observer(() => {
     </div>
   );
 });
-
-export default ModuleIssuesMobileHeader;
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/modules/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
similarity index 96%
rename from web/app/[workspaceSlug]/@header/projects/[projectId]/modules/header.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
index 343eafe8c..d87720fea 100644
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/modules/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
@@ -12,7 +12,7 @@ import { EUserProjectRoles } from "@/constants/project";
 // hooks
 import { useCommandPalette, useEventTracker, useProject, useUser } from "@/hooks/store";
 
-const ModulesListHeader: React.FC = observer(() => {
+export const ModulesListHeader: React.FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug } = useParams();
@@ -74,5 +74,3 @@ const ModulesListHeader: React.FC = observer(() => {
     </div>
   );
 });
-
-export default ModulesListHeader;
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/layout.tsx
new file mode 100644
index 000000000..12ebf41e0
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/layout.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+// components
+import { AppHeader, ContentWrapper } from "@/components/core";
+import { ModulesListHeader } from "./header";
+import { ModulesListMobileHeader } from "./mobile-header";
+
+export default function ProjectModulesListLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ModulesListHeader />} mobileHeader={<ModulesListMobileHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/modules/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
similarity index 94%
rename from web/app/[workspaceSlug]/@header/projects/[projectId]/modules/mobile-header.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
index e7f882db5..7a530ea14 100644
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/modules/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
@@ -5,7 +5,7 @@ import { CustomMenu } from "@plane/ui";
 import { MODULE_VIEW_LAYOUTS } from "@/constants/module";
 import { useModuleFilter, useProject } from "@/hooks/store";
 
-const ModulesListMobileHeader = observer(() => {
+export const ModulesListMobileHeader = observer(() => {
   const { currentProjectDetails } = useProject();
   const { updateDisplayFilters } = useModuleFilter();
 
@@ -38,5 +38,3 @@ const ModulesListMobileHeader = observer(() => {
     </div>
   );
 });
-
-export default ModulesListMobileHeader;
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/modules/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/projects/[projectId]/modules/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/page.tsx
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/pages/[pageId]/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/projects/[projectId]/pages/[pageId]/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/pages/[pageId]/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
similarity index 98%
rename from web/app/[workspaceSlug]/@header/projects/[projectId]/pages/[pageId]/header.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
index 347db29e2..73a9deda5 100644
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/pages/[pageId]/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
@@ -20,7 +20,7 @@ export interface IPagesHeaderProps {
   showButton?: boolean;
 }
 
-const PageDetailsHeader = observer(() => {
+export const PageDetailsHeader = observer(() => {
   // router
   const { workspaceSlug, pageId } = useParams();
   // state
@@ -168,5 +168,3 @@ const PageDetailsHeader = observer(() => {
     </div>
   );
 });
-
-export default PageDetailsHeader;
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/layout.tsx
new file mode 100644
index 000000000..3c6f18cf1
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/layout.tsx
@@ -0,0 +1,15 @@
+"use client";
+
+// component
+import { AppHeader, ContentWrapper } from "@/components/core";
+// local components
+import { PageDetailsHeader } from "./header";
+
+export default function ProjectPageDetailsLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<PageDetailsHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/pages/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
similarity index 97%
rename from web/app/[workspaceSlug]/@header/projects/[projectId]/pages/header.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
index 81ca9015f..c3cee8e37 100644
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/pages/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
@@ -13,7 +13,7 @@ import { EUserProjectRoles } from "@/constants/project";
 // hooks
 import { useCommandPalette, useEventTracker, useProject, useUser } from "@/hooks/store";
 
-const PagesHeader = observer(() => {
+export const PagesListHeader = observer(() => {
   // router
   const { workspaceSlug } = useParams();
   const searchParams = useSearchParams();
@@ -77,5 +77,3 @@ const PagesHeader = observer(() => {
     </div>
   );
 });
-
-export default PagesHeader;
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/layout.tsx
new file mode 100644
index 000000000..8b1bdd828
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/layout.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { ReactNode } from "react";
+// components
+import { ContentWrapper, AppHeader } from "@/components/core";
+// local components
+import { PagesListHeader } from "./header";
+
+export default function ProjectPagesListLayout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<PagesListHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/pages/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/projects/[projectId]/pages/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/page.tsx
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/settings/automations/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/automations/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/projects/[projectId]/settings/automations/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/automations/page.tsx
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/settings/estimates/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/estimates/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/projects/[projectId]/settings/estimates/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/estimates/page.tsx
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/settings/features/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/features/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/projects/[projectId]/settings/features/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/features/page.tsx
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/settings/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx
similarity index 97%
rename from web/app/[workspaceSlug]/@header/projects/[projectId]/settings/header.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx
index b98b435c2..49c65b9d3 100644
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/settings/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx
@@ -13,7 +13,7 @@ import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "@/constants/project";
 // hooks
 import { useProject, useUser } from "@/hooks/store";
 
-const ProjectSettingHeader: FC = observer(() => {
+export const ProjectSettingHeader: FC = observer(() => {
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = useParams();
@@ -82,5 +82,3 @@ const ProjectSettingHeader: FC = observer(() => {
     </div>
   );
 });
-
-export default ProjectSettingHeader;
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/settings/labels/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/labels/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/projects/[projectId]/settings/labels/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/labels/page.tsx
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/layout.tsx
new file mode 100644
index 000000000..ac14c5019
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/layout.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import { FC, ReactNode } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+// ui
+import { Button, LayersIcon } from "@plane/ui";
+// components
+import { NotAuthorizedView } from "@/components/auth-screens";
+import { AppHeader, ContentWrapper } from "@/components/core";
+// constants
+import { EUserProjectRoles } from "@/constants/project";
+// hooks
+import { useUser } from "@/hooks/store";
+// local components
+import { ProjectSettingHeader } from "./header";
+import { ProjectSettingsSidebar } from "./sidebar";
+
+export interface IProjectSettingLayout {
+  children: ReactNode;
+}
+
+const ProjectSettingLayout: FC<IProjectSettingLayout> = observer((props) => {
+  const { children } = props;
+  // router
+  const { workspaceSlug, projectId } = useParams();
+  // store hooks
+  const {
+    membership: { currentProjectRole },
+  } = useUser();
+
+  const restrictViewSettings = currentProjectRole && currentProjectRole <= EUserProjectRoles.VIEWER;
+
+  if (restrictViewSettings) {
+    return (
+      <NotAuthorizedView
+        type="project"
+        actionButton={
+          //TODO: Create a new component called Button Link to handle such scenarios
+          <Link href={`/${workspaceSlug}/projects/${projectId}/issues`}>
+            <Button variant="primary" size="md" prependIcon={<LayersIcon />}>
+              Go to issues
+            </Button>
+          </Link>
+        }
+      />
+    );
+  }
+
+  return (
+    <>
+      <AppHeader header={<ProjectSettingHeader />} />
+      <ContentWrapper>
+        <div className="inset-y-0 z-20 flex flex-grow-0 h-full w-full">
+          <div className="w-80 flex-shrink-0 overflow-y-hidden pt-8 sm:hidden hidden md:block lg:block">
+            <ProjectSettingsSidebar />
+          </div>
+          <div className="w-full pl-10 sm:pl-10 md:pl-0 lg:pl-0 overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
+            {children}
+          </div>
+        </div>
+      </ContentWrapper>
+    </>
+  );
+});
+
+export default ProjectSettingLayout;
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/settings/members/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/members/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/projects/[projectId]/settings/members/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/members/page.tsx
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/settings/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/projects/[projectId]/settings/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/page.tsx
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/settings/sidebar.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/sidebar.tsx
similarity index 96%
rename from web/app/[workspaceSlug]/projects/[projectId]/settings/sidebar.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/sidebar.tsx
index c20fabac4..af5e5355a 100644
--- a/web/app/[workspaceSlug]/projects/[projectId]/settings/sidebar.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/sidebar.tsx
@@ -10,7 +10,7 @@ import { EUserProjectRoles, PROJECT_SETTINGS_LINKS } from "@/constants/project";
 // hooks
 import { useUser } from "@/hooks/store";
 
-const ProjectSettingsSidebar = () => {
+export const ProjectSettingsSidebar = () => {
   const { workspaceSlug, projectId } = useParams();
   const pathname = usePathname();
   // mobx store
@@ -61,5 +61,3 @@ const ProjectSettingsSidebar = () => {
     </div>
   );
 };
-
-export default ProjectSettingsSidebar;
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/settings/states/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/states/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/projects/[projectId]/settings/states/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/states/page.tsx
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/views/[viewId]/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
similarity index 98%
rename from web/app/[workspaceSlug]/@header/projects/[projectId]/views/[viewId]/header.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
index 18605325b..170880d97 100644
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/views/[viewId]/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
@@ -1,4 +1,5 @@
 "use client";
+
 import { useCallback } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
@@ -29,7 +30,7 @@ import {
   useUser,
 } from "@/hooks/store";
 
-const ProjectViewIssuesHeader: React.FC = observer(() => {
+export const ProjectViewIssuesHeader: React.FC = observer(() => {
   // router
   const { workspaceSlug, projectId, viewId } = useParams();
   // store hooks
@@ -262,5 +263,3 @@ const ProjectViewIssuesHeader: React.FC = observer(() => {
     </div>
   );
 });
-
-export default ProjectViewIssuesHeader;
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/views/[viewId]/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/page.tsx
similarity index 71%
rename from web/app/[workspaceSlug]/projects/[projectId]/views/[viewId]/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/page.tsx
index ef153ca4d..45991bf93 100644
--- a/web/app/[workspaceSlug]/projects/[projectId]/views/[viewId]/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/page.tsx
@@ -31,26 +31,24 @@ const ProjectViewIssuesPage = observer(() => {
       : null
   );
 
+  if (error) {
+    <EmptyState
+      image={emptyView}
+      title="View does not exist"
+      description="The view you are looking for does not exist or has been deleted."
+      primaryButton={{
+        text: "View other views",
+        onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/views`),
+      }}
+    />;
+  }
+
   return (
     <>
-      {error ? (
-        <EmptyState
-          image={emptyView}
-          title="View does not exist"
-          description="The view you are looking for does not exist or has been deleted."
-          primaryButton={{
-            text: "View other views",
-            onClick: () => router.push(`/${workspaceSlug}/projects/${projectId}/views`),
-          }}
-        />
-      ) : (
-        <>
-          <PageHead title={pageTitle} />
-          <ProjectViewLayoutRoot />
-        </>
-      )}
+      <PageHead title={pageTitle} />
+      <ProjectViewLayoutRoot />
     </>
   );
 });
 
-export default ProjectViewIssuesPage;
\ No newline at end of file
+export default ProjectViewIssuesPage;
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/layout.tsx
new file mode 100644
index 000000000..92cbb7326
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/layout.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { AppHeader, ContentWrapper } from "@/components/core";
+// local components
+import { ProjectViewIssuesHeader } from "./[viewId]/header";
+
+export default function ProjectViewIssuesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ProjectViewIssuesHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/views/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
similarity index 96%
rename from web/app/[workspaceSlug]/@header/projects/[projectId]/views/header.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
index 390bd8441..ee5f0709c 100644
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/views/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
@@ -12,7 +12,7 @@ import { EUserProjectRoles } from "@/constants/project";
 // hooks
 import { useCommandPalette, useProject, useUser } from "@/hooks/store";
 
-const ProjectViewsHeader: React.FC = observer(() => {
+export const ProjectViewsHeader = observer(() => {
   // router
   const { workspaceSlug } = useParams();
   // store hooks
@@ -70,5 +70,3 @@ const ProjectViewsHeader: React.FC = observer(() => {
     </>
   );
 });
-
-export default ProjectViewsHeader;
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/layout.tsx
new file mode 100644
index 000000000..69493402d
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/layout.tsx
@@ -0,0 +1,14 @@
+"use client";
+
+import { AppHeader, ContentWrapper } from "@/components/core";
+// local components
+import { ProjectViewsHeader } from "./header";
+
+export default function ProjectViewsListLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ProjectViewsHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/views/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/projects/[projectId]/views/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/layout.tsx
new file mode 100644
index 000000000..fc2ec0075
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/layout.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { ReactNode } from "react";
+// layouts
+import { ProjectAuthWrapper } from "@/layouts/auth-layout";
+
+const ProjectDetailLayout = ({ children }: { children: ReactNode }) => (
+  <ProjectAuthWrapper>{children}</ProjectAuthWrapper>
+);
+
+export default ProjectDetailLayout;
diff --git a/web/app/[workspaceSlug]/@header/projects/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(list)/header.tsx
similarity index 98%
rename from web/app/[workspaceSlug]/@header/projects/header.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(list)/header.tsx
index ff3cb9709..0d01696fc 100644
--- a/web/app/[workspaceSlug]/@header/projects/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(list)/header.tsx
@@ -20,7 +20,7 @@ import { calculateTotalFilters } from "@/helpers/filter.helper";
 import { useAppRouter, useCommandPalette, useEventTracker, useMember, useProjectFilter, useUser } from "@/hooks/store";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 
-const ProjectsHeader = observer(() => {
+export const ProjectsListHeader = observer(() => {
   // states
   const [isSearchOpen, setIsSearchOpen] = useState(false);
   // refs
@@ -183,5 +183,3 @@ const ProjectsHeader = observer(() => {
     </div>
   );
 });
-
-export default ProjectsHeader;
diff --git a/web/app/[workspaceSlug]/(projects)/projects/(list)/layout.tsx b/web/app/[workspaceSlug]/(projects)/projects/(list)/layout.tsx
new file mode 100644
index 000000000..259c412dc
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/projects/(list)/layout.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import { ReactNode } from "react";
+// components
+import { AppHeader, ContentWrapper } from "@/components/core";
+// local components
+import { ProjectsListHeader } from "./header";
+import { ProjectsListMobileHeader } from "./mobile-header";
+
+export default function ProjectListLayout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<ProjectsListHeader />} mobileHeader={<ProjectsListMobileHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}
diff --git a/web/app/[workspaceSlug]/@header/projects/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(list)/mobile-header.tsx
similarity index 97%
rename from web/app/[workspaceSlug]/@header/projects/mobile-header.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(list)/mobile-header.tsx
index e5a9ebbf8..b10e8db30 100644
--- a/web/app/[workspaceSlug]/@header/projects/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(list)/mobile-header.tsx
@@ -12,7 +12,7 @@ import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
 import { useAppRouter, useMember, useProjectFilter } from "@/hooks/store";
 
-const ProjectsMobileHeader = observer(() => {
+export const ProjectsListMobileHeader = observer(() => {
   const {
     currentWorkspaceDisplayFilters: displayFilters,
     currentWorkspaceFilters: filters,
@@ -87,5 +87,3 @@ const ProjectsMobileHeader = observer(() => {
     </div>
   );
 });
-
-export default ProjectsMobileHeader;
diff --git a/web/app/[workspaceSlug]/projects/page.tsx b/web/app/[workspaceSlug]/(projects)/projects/(list)/page.tsx
similarity index 76%
rename from web/app/[workspaceSlug]/projects/page.tsx
rename to web/app/[workspaceSlug]/(projects)/projects/(list)/page.tsx
index 8cc9ae772..68ac3d125 100644
--- a/web/app/[workspaceSlug]/projects/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(list)/page.tsx
@@ -61,23 +61,23 @@ const ProjectsPage = observer(() => {
       <div className="flex h-full w-full flex-col">
         {(calculateTotalFilters(currentWorkspaceFilters ?? {}) !== 0 ||
           currentWorkspaceAppliedDisplayFilters?.length !== 0) && (
-            <div className="border-b border-custom-border-200 px-5 py-3">
-              <ProjectAppliedFiltersList
-                appliedFilters={currentWorkspaceFilters ?? {}}
-                appliedDisplayFilters={currentWorkspaceAppliedDisplayFilters ?? []}
-                handleClearAllFilters={handleClearAllFilters}
-                handleRemoveFilter={handleRemoveFilter}
-                handleRemoveDisplayFilter={handleRemoveDisplayFilter}
-                filteredProjects={filteredProjectIds?.length ?? 0}
-                totalProjects={totalProjectIds?.length ?? 0}
-                alwaysAllowEditing
-              />
-            </div>
-          )}
+          <div className="border-b border-custom-border-200 px-5 py-3">
+            <ProjectAppliedFiltersList
+              appliedFilters={currentWorkspaceFilters ?? {}}
+              appliedDisplayFilters={currentWorkspaceAppliedDisplayFilters ?? []}
+              handleClearAllFilters={handleClearAllFilters}
+              handleRemoveFilter={handleRemoveFilter}
+              handleRemoveDisplayFilter={handleRemoveDisplayFilter}
+              filteredProjects={filteredProjectIds?.length ?? 0}
+              totalProjects={totalProjectIds?.length ?? 0}
+              alwaysAllowEditing
+            />
+          </div>
+        )}
         <ProjectCardList />
       </div>
     </>
   );
 });
 
-export default ProjectsPage;
\ No newline at end of file
+export default ProjectsPage;
diff --git a/web/app/[workspaceSlug]/settings/api-tokens/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/api-tokens/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/settings/api-tokens/page.tsx
rename to web/app/[workspaceSlug]/(projects)/settings/api-tokens/page.tsx
diff --git a/web/app/[workspaceSlug]/settings/billing/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/billing/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/settings/billing/page.tsx
rename to web/app/[workspaceSlug]/(projects)/settings/billing/page.tsx
diff --git a/web/app/[workspaceSlug]/settings/exports/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/exports/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/settings/exports/page.tsx
rename to web/app/[workspaceSlug]/(projects)/settings/exports/page.tsx
diff --git a/web/app/[workspaceSlug]/@header/settings/header.tsx b/web/app/[workspaceSlug]/(projects)/settings/header.tsx
similarity index 89%
rename from web/app/[workspaceSlug]/@header/settings/header.tsx
rename to web/app/[workspaceSlug]/(projects)/settings/header.tsx
index 111cbaef4..aeaa80bb9 100644
--- a/web/app/[workspaceSlug]/@header/settings/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/header.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { FC } from "react";
-import { observer } from "mobx-react";;
+import { observer } from "mobx-react";
 import { Settings } from "lucide-react";
 // ui
 import { Breadcrumbs } from "@plane/ui";
@@ -10,7 +10,7 @@ import { BreadcrumbLink } from "@/components/common";
 // hooks
 import { useWorkspace } from "@/hooks/store";
 
-const WorkspaceSettingHeader: FC = observer(() => {
+export const WorkspaceSettingHeader: FC = observer(() => {
   const { currentWorkspace } = useWorkspace();
 
   return (
@@ -35,5 +35,3 @@ const WorkspaceSettingHeader: FC = observer(() => {
     </div>
   );
 });
-
-export default WorkspaceSettingHeader;
diff --git a/web/app/[workspaceSlug]/settings/imports/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/imports/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/settings/imports/page.tsx
rename to web/app/[workspaceSlug]/(projects)/settings/imports/page.tsx
diff --git a/web/app/[workspaceSlug]/settings/integrations/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/integrations/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/settings/integrations/page.tsx
rename to web/app/[workspaceSlug]/(projects)/settings/integrations/page.tsx
diff --git a/web/app/[workspaceSlug]/(projects)/settings/layout.tsx b/web/app/[workspaceSlug]/(projects)/settings/layout.tsx
new file mode 100644
index 000000000..bd04e2d6e
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/settings/layout.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { ReactNode } from "react";
+// components
+import { AppHeader, ContentWrapper } from "@/components/core";
+// local components
+import { WorkspaceSettingHeader } from "./header";
+import { MobileWorkspaceSettingsTabs } from "./mobile-header-tabs";
+import { WorkspaceSettingsSidebar } from "./sidebar";
+
+export interface IWorkspaceSettingLayout {
+  children: ReactNode;
+}
+
+export default function WorkspaceSettingLayout(props: IWorkspaceSettingLayout) {
+  const { children } = props;
+
+  return (
+    <>
+      <AppHeader header={<WorkspaceSettingHeader />} />
+      <ContentWrapper>
+        <div className="inset-y-0 z-20 flex h-full w-full gap-2">
+          <div className="w-80 flex-shrink-0 overflow-y-hidden pt-8 sm:hidden hidden md:block lg:block">
+            <WorkspaceSettingsSidebar />
+          </div>
+          <div className="flex flex-col relative w-full overflow-hidden">
+            <MobileWorkspaceSettingsTabs />
+            <div className="w-full pl-4 md:pl-0 md:py-8 py-2 overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
+              {children}
+            </div>
+          </div>
+        </div>
+      </ContentWrapper>
+    </>
+  );
+}
diff --git a/web/app/[workspaceSlug]/settings/members/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/members/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/settings/members/page.tsx
rename to web/app/[workspaceSlug]/(projects)/settings/members/page.tsx
diff --git a/web/components/workspace/settings/mobile-workspace-settings-tabs.tsx b/web/app/[workspaceSlug]/(projects)/settings/mobile-header-tabs.tsx
similarity index 83%
rename from web/components/workspace/settings/mobile-workspace-settings-tabs.tsx
rename to web/app/[workspaceSlug]/(projects)/settings/mobile-header-tabs.tsx
index ad093115b..d273779fe 100644
--- a/web/components/workspace/settings/mobile-workspace-settings-tabs.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/mobile-header-tabs.tsx
@@ -1,7 +1,7 @@
 import { useParams, usePathname, useRouter } from "next/navigation";
 import { WORKSPACE_SETTINGS_LINKS } from "@/constants/workspace";
 
-const MobileWorkspaceSettingsTabs = () => {
+export const MobileWorkspaceSettingsTabs = () => {
   const router = useRouter();
   const { workspaceSlug } = useParams();
   const pathname = usePathname();
@@ -9,11 +9,10 @@ const MobileWorkspaceSettingsTabs = () => {
     <div className="flex-shrink-0 md:hidden sticky inset-0 flex overflow-x-auto bg-custom-background-100 z-10">
       {WORKSPACE_SETTINGS_LINKS.map((item, index) => (
         <div
-          className={`${
-            item.highlight(pathname, `/${workspaceSlug}`)
+          className={`${item.highlight(pathname, `/${workspaceSlug}`)
               ? "text-custom-primary-100 text-sm py-2 px-3 whitespace-nowrap flex flex-grow cursor-pointer justify-around border-b border-custom-primary-200"
               : "text-custom-text-200 flex flex-grow cursor-pointer justify-around border-b border-custom-border-200 text-sm py-2 px-3 whitespace-nowrap"
-          }`}
+            }`}
           key={index}
           onClick={() => router.push(`/${workspaceSlug}${item.href}`)}
         >
@@ -23,5 +22,3 @@ const MobileWorkspaceSettingsTabs = () => {
     </div>
   );
 };
-
-export default MobileWorkspaceSettingsTabs;
diff --git a/web/app/[workspaceSlug]/settings/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/settings/page.tsx
rename to web/app/[workspaceSlug]/(projects)/settings/page.tsx
diff --git a/web/app/[workspaceSlug]/settings/sidebar.tsx b/web/app/[workspaceSlug]/(projects)/settings/sidebar.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/settings/sidebar.tsx
rename to web/app/[workspaceSlug]/(projects)/settings/sidebar.tsx
diff --git a/web/app/[workspaceSlug]/settings/webhooks/[webhookId]/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/webhooks/[webhookId]/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/settings/webhooks/[webhookId]/page.tsx
rename to web/app/[workspaceSlug]/(projects)/settings/webhooks/[webhookId]/page.tsx
diff --git a/web/app/[workspaceSlug]/settings/webhooks/page.tsx b/web/app/[workspaceSlug]/(projects)/settings/webhooks/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/settings/webhooks/page.tsx
rename to web/app/[workspaceSlug]/(projects)/settings/webhooks/page.tsx
diff --git a/web/app/[workspaceSlug]/sidebar.tsx b/web/app/[workspaceSlug]/(projects)/sidebar.tsx
similarity index 94%
rename from web/app/[workspaceSlug]/sidebar.tsx
rename to web/app/[workspaceSlug]/(projects)/sidebar.tsx
index f5ca4039f..c856b69b8 100644
--- a/web/app/[workspaceSlug]/sidebar.tsx
+++ b/web/app/[workspaceSlug]/(projects)/sidebar.tsx
@@ -14,7 +14,7 @@ import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 
 export interface IAppSidebar { }
 
-const AppSidebar: FC<IAppSidebar> = observer(() => {
+export const AppSidebar: FC<IAppSidebar> = observer(() => {
   // store hooks
   const { toggleSidebar, sidebarCollapsed } = useAppTheme();
   // refs
@@ -48,5 +48,3 @@ const AppSidebar: FC<IAppSidebar> = observer(() => {
     </div>
   );
 });
-
-export default AppSidebar;
diff --git a/web/app/[workspaceSlug]/workspace-views/[globalViewId]/page.tsx b/web/app/[workspaceSlug]/(projects)/workspace-views/[globalViewId]/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/workspace-views/[globalViewId]/page.tsx
rename to web/app/[workspaceSlug]/(projects)/workspace-views/[globalViewId]/page.tsx
diff --git a/web/app/[workspaceSlug]/@header/workspace-views/header.tsx b/web/app/[workspaceSlug]/(projects)/workspace-views/header.tsx
similarity index 98%
rename from web/app/[workspaceSlug]/@header/workspace-views/header.tsx
rename to web/app/[workspaceSlug]/(projects)/workspace-views/header.tsx
index 091847d0a..8d9c8cf70 100644
--- a/web/app/[workspaceSlug]/@header/workspace-views/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/workspace-views/header.tsx
@@ -19,7 +19,7 @@ import { calculateTotalFilters } from "@/helpers/filter.helper";
 // hooks
 import { useLabel, useMember, useUser, useIssues } from "@/hooks/store";
 
-const GlobalIssuesHeader: React.FC = observer(() => {
+export const GlobalIssuesHeader = observer(() => {
   // states
   const [createViewModal, setCreateViewModal] = useState(false);
   // router
@@ -144,5 +144,3 @@ const GlobalIssuesHeader: React.FC = observer(() => {
     </>
   );
 });
-
-export default GlobalIssuesHeader;
diff --git a/web/app/[workspaceSlug]/(projects)/workspace-views/layout.tsx b/web/app/[workspaceSlug]/(projects)/workspace-views/layout.tsx
new file mode 100644
index 000000000..a40d9318c
--- /dev/null
+++ b/web/app/[workspaceSlug]/(projects)/workspace-views/layout.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { AppHeader, ContentWrapper } from "@/components/core";
+import { GlobalIssuesHeader } from "./header";
+
+export default function GlobalIssuesLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <AppHeader header={<GlobalIssuesHeader />} />
+      <ContentWrapper>{children}</ContentWrapper>
+    </>
+  );
+}
diff --git a/web/app/[workspaceSlug]/workspace-views/page.tsx b/web/app/[workspaceSlug]/(projects)/workspace-views/page.tsx
similarity index 100%
rename from web/app/[workspaceSlug]/workspace-views/page.tsx
rename to web/app/[workspaceSlug]/(projects)/workspace-views/page.tsx
diff --git a/web/app/[workspaceSlug]/@header/active-cycles/page.tsx b/web/app/[workspaceSlug]/@header/active-cycles/page.tsx
deleted file mode 100644
index 56083aab7..000000000
--- a/web/app/[workspaceSlug]/@header/active-cycles/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-"use client";
-
-// components
-import AppHeaderWrapper from "../../app-header-wrapper";
-import WorkspaceActiveCycleHeader from "./header";
-
-const WorkspaceActiveCycleHeaderPage = () => <AppHeaderWrapper header={<WorkspaceActiveCycleHeader />} />;
-
-export default WorkspaceActiveCycleHeaderPage;
diff --git a/web/app/[workspaceSlug]/@header/analytics/page.tsx b/web/app/[workspaceSlug]/@header/analytics/page.tsx
deleted file mode 100644
index 405057b05..000000000
--- a/web/app/[workspaceSlug]/@header/analytics/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-"use client";
-
-// components
-import AppHeaderWrapper from "../../app-header-wrapper";
-import WorkspaceAnalyticsHeader from "./header";
-
-const WorkspaceAnalyticsHeaderPage = () => <AppHeaderWrapper header={<WorkspaceAnalyticsHeader />} />;
-
-export default WorkspaceAnalyticsHeaderPage;
diff --git a/web/app/[workspaceSlug]/@header/page.tsx b/web/app/[workspaceSlug]/@header/page.tsx
deleted file mode 100644
index 4175c5f38..000000000
--- a/web/app/[workspaceSlug]/@header/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-"use client";
-
-// components
-import AppHeaderWrapper from "../app-header-wrapper";
-import WorkspaceDashboardHeader from "./header";
-
-const WorkspaceDashboardHeaderPage = () => <AppHeaderWrapper header={<WorkspaceDashboardHeader />} />;
-
-export default WorkspaceDashboardHeaderPage;
diff --git a/web/app/[workspaceSlug]/@header/profile/[userId]/[profileViewId]/page.tsx b/web/app/[workspaceSlug]/@header/profile/[userId]/[profileViewId]/page.tsx
deleted file mode 100644
index d04a0a661..000000000
--- a/web/app/[workspaceSlug]/@header/profile/[userId]/[profileViewId]/page.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-"use client";
-
-import { useParams } from "next/navigation";
-// components
-import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
-import UserProfileHeader from "../header";
-import ProfileIssuesMobileHeader from "../mobile-header";
-
-const ProfileHeader = () => {
-  const { profileViewId } = useParams();
-
-  return (
-    <AppHeaderWrapper
-      header={<UserProfileHeader type={profileViewId?.toString()} />}
-      mobileHeader={<ProfileIssuesMobileHeader />}
-    />
-  );
-};
-
-export default ProfileHeader;
diff --git a/web/app/[workspaceSlug]/@header/profile/[userId]/activity/page.tsx b/web/app/[workspaceSlug]/@header/profile/[userId]/activity/page.tsx
deleted file mode 100644
index 56d3a1468..000000000
--- a/web/app/[workspaceSlug]/@header/profile/[userId]/activity/page.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-"use client";
-
-import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
-import UserProfileHeader from "../header";
-
-const ProfileActivityHeader = () => <AppHeaderWrapper header={<UserProfileHeader type="Activity" />} />;
-
-export default ProfileActivityHeader;
diff --git a/web/app/[workspaceSlug]/@header/profile/[userId]/page.tsx b/web/app/[workspaceSlug]/@header/profile/[userId]/page.tsx
deleted file mode 100644
index df2b0d83e..000000000
--- a/web/app/[workspaceSlug]/@header/profile/[userId]/page.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-"use client";
-
-import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
-import UserProfileHeader from "./header";
-
-const ProfileOverviewHeader = () => <AppHeaderWrapper header={<UserProfileHeader type="Summary" />} />;
-
-export default ProfileOverviewHeader;
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/archives/[...default-header]/page.tsx b/web/app/[workspaceSlug]/@header/projects/[projectId]/archives/[...default-header]/page.tsx
deleted file mode 100644
index 6e5cd0160..000000000
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/archives/[...default-header]/page.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-import DefaultProjectArchivesHeader from "../page";
-export default DefaultProjectArchivesHeader;
\ No newline at end of file
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/archives/issues/[archivedIssueId]/page.tsx b/web/app/[workspaceSlug]/@header/projects/[projectId]/archives/issues/[archivedIssueId]/page.tsx
deleted file mode 100644
index 60fa754ce..000000000
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/archives/issues/[archivedIssueId]/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-"use client";
-
-// components
-import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
-import ProjectArchivedIssueDetailsHeader from "./header";
-
-const ProjectArchivedIssueDetailsHeaderPage = () => <AppHeaderWrapper header={<ProjectArchivedIssueDetailsHeader />} />;
-
-export default ProjectArchivedIssueDetailsHeaderPage;
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/archives/page.tsx b/web/app/[workspaceSlug]/@header/projects/[projectId]/archives/page.tsx
deleted file mode 100644
index aa1b03169..000000000
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/archives/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-"use client";
-
-// components
-import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
-import ProjectArchivesHeader from "./header";
-
-const ProjectArchivesHeaderPage = () => <AppHeaderWrapper header={<ProjectArchivesHeader />} />;
-
-export default ProjectArchivesHeaderPage;
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/cycles/[cycleId]/page.tsx b/web/app/[workspaceSlug]/@header/projects/[projectId]/cycles/[cycleId]/page.tsx
deleted file mode 100644
index 6afb97002..000000000
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/cycles/[cycleId]/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-"use client";
-
-// components
-import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
-import CycleIssuesHeader from "./header";
-import CycleIssuesMobileHeader from "./mobile-header";
-
-const CycleIssuesHeaderPage = () => (
-  <AppHeaderWrapper header={<CycleIssuesHeader />} mobileHeader={<CycleIssuesMobileHeader />} />
-);
-
-export default CycleIssuesHeaderPage;
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/cycles/page.tsx b/web/app/[workspaceSlug]/@header/projects/[projectId]/cycles/page.tsx
deleted file mode 100644
index 457e9b3dc..000000000
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/cycles/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-"use client";
-
-// components
-import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
-import CyclesHeader from "./header";
-import CyclesListMobileHeader from "./mobile-header";
-
-const CyclesHeaderPage = () => (
-  <AppHeaderWrapper header={<CyclesHeader />} mobileHeader={<CyclesListMobileHeader />} />
-);
-
-export default CyclesHeaderPage;
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/draft-issues/page.tsx b/web/app/[workspaceSlug]/@header/projects/[projectId]/draft-issues/page.tsx
deleted file mode 100644
index a31440f48..000000000
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/draft-issues/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-"use client";
-
-// components
-import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
-import ProjectDraftIssueHeader from "./header";
-
-const ProjectDraftIssueHeaderPage = () => <AppHeaderWrapper header={<ProjectDraftIssueHeader />} />;
-
-export default ProjectDraftIssueHeaderPage;
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/inbox/page.tsx b/web/app/[workspaceSlug]/@header/projects/[projectId]/inbox/page.tsx
deleted file mode 100644
index 90d616606..000000000
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/inbox/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-"use client";
-
-// components
-import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
-import ProjectInboxHeader from "./header";
-
-const ProjectInboxHeaderPage = () => <AppHeaderWrapper header={<ProjectInboxHeader />} />;
-
-export default ProjectInboxHeaderPage;
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/issues/[issueId]/page.tsx b/web/app/[workspaceSlug]/@header/projects/[projectId]/issues/[issueId]/page.tsx
deleted file mode 100644
index 1c64134f0..000000000
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/issues/[issueId]/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-"use client";
-
-// components
-import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
-import ProjectIssueDetailsHeader from "./header";
-
-const ProjectIssueDetailsHeaderPage = () => <AppHeaderWrapper header={<ProjectIssueDetailsHeader />} />;
-
-export default ProjectIssueDetailsHeaderPage;
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/issues/page.tsx b/web/app/[workspaceSlug]/@header/projects/[projectId]/issues/page.tsx
deleted file mode 100644
index 7c4296d92..000000000
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/issues/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-"use client";
-
-// components
-import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
-import ProjectIssuesHeader from "./header";
-import ProjectIssuesMobileHeader from "./mobile-header";
-
-const ProjectIssuesHeaderPage = () => (
-  <AppHeaderWrapper header={<ProjectIssuesHeader />} mobileHeader={<ProjectIssuesMobileHeader />} />
-);
-
-export default ProjectIssuesHeaderPage;
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/modules/[moduleId]/page.tsx b/web/app/[workspaceSlug]/@header/projects/[projectId]/modules/[moduleId]/page.tsx
deleted file mode 100644
index 43ae996df..000000000
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/modules/[moduleId]/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-"use client";
-
-// components
-import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
-import ModuleIssuesHeader from "./header";
-import ModuleIssuesMobileHeader from "./mobile-header";
-
-const ModuleIssuesHeaderPage = () => (
-  <AppHeaderWrapper header={<ModuleIssuesHeader />} mobileHeader={<ModuleIssuesMobileHeader />} />
-);
-
-export default ModuleIssuesHeaderPage;
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/modules/page.tsx b/web/app/[workspaceSlug]/@header/projects/[projectId]/modules/page.tsx
deleted file mode 100644
index dce9e103f..000000000
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/modules/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-"use client";
-
-// components
-import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
-import ModulesListHeader from "./header";
-import ModulesListMobileHeader from "./mobile-header";
-
-const ModulesHeaderPage = () => (
-  <AppHeaderWrapper header={<ModulesListHeader />} mobileHeader={<ModulesListMobileHeader />} />
-);
-
-export default ModulesHeaderPage;
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/pages/[pageId]/page.tsx b/web/app/[workspaceSlug]/@header/projects/[projectId]/pages/[pageId]/page.tsx
deleted file mode 100644
index 6a426ea2a..000000000
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/pages/[pageId]/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-"use client";
-
-// components
-import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
-import PageDetailsHeader from "./header";
-
-const PageDetailsHeaderPage = () => <AppHeaderWrapper header={<PageDetailsHeader />} />;
-
-export default PageDetailsHeaderPage;
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/pages/page.tsx b/web/app/[workspaceSlug]/@header/projects/[projectId]/pages/page.tsx
deleted file mode 100644
index e59e271c7..000000000
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/pages/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-"use client";
-
-// components
-import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
-import PagesHeader from "./header";
-
-const PagesHeaderPage = () => <AppHeaderWrapper header={<PagesHeader />} />;
-
-export default PagesHeaderPage;
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/settings/[...default-header]/page.tsx b/web/app/[workspaceSlug]/@header/projects/[projectId]/settings/[...default-header]/page.tsx
deleted file mode 100644
index c9c53de65..000000000
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/settings/[...default-header]/page.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-import DefaultProjectSettingHeader from "../page";
-export default DefaultProjectSettingHeader;
\ No newline at end of file
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/settings/page.tsx b/web/app/[workspaceSlug]/@header/projects/[projectId]/settings/page.tsx
deleted file mode 100644
index 3da6a809a..000000000
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/settings/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-"use client";
-
-// components
-import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
-import ProjectSettingHeader from "./header";
-
-const ProjectSettingHeaderPage = () => <AppHeaderWrapper header={<ProjectSettingHeader />} />;
-
-export default ProjectSettingHeaderPage;
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/views/[viewId]/page.tsx b/web/app/[workspaceSlug]/@header/projects/[projectId]/views/[viewId]/page.tsx
deleted file mode 100644
index 14f135d4e..000000000
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/views/[viewId]/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-"use client";
-
-// components
-import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
-import ProjectViewIssuesHeader from "./header";
-
-const ProjectViewIssuesHeaderPage = () => <AppHeaderWrapper header={<ProjectViewIssuesHeader />} />;
-
-export default ProjectViewIssuesHeaderPage;
diff --git a/web/app/[workspaceSlug]/@header/projects/[projectId]/views/page.tsx b/web/app/[workspaceSlug]/@header/projects/[projectId]/views/page.tsx
deleted file mode 100644
index e5f8ac92a..000000000
--- a/web/app/[workspaceSlug]/@header/projects/[projectId]/views/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-"use client";
-
-// components
-import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
-import ProjectViewsHeader from "./header";
-
-const ProjectViewsHeaderPage = () => <AppHeaderWrapper header={<ProjectViewsHeader />} />;
-
-export default ProjectViewsHeaderPage;
diff --git a/web/app/[workspaceSlug]/@header/projects/page.tsx b/web/app/[workspaceSlug]/@header/projects/page.tsx
deleted file mode 100644
index 64108a13c..000000000
--- a/web/app/[workspaceSlug]/@header/projects/page.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-"use client";
-
-// components
-import AppHeaderWrapper from "@/app/[workspaceSlug]/app-header-wrapper";
-import ProjectsHeader from "./header";
-import ProjectsMobileHeader from "./mobile-header";
-
-
-const ProjectsHeaderPage = () => (
-  <AppHeaderWrapper header={<ProjectsHeader />} mobileHeader={<ProjectsMobileHeader />} />
-);
-
-export default ProjectsHeaderPage;
diff --git a/web/app/[workspaceSlug]/@header/settings/[...default-header]/page.tsx b/web/app/[workspaceSlug]/@header/settings/[...default-header]/page.tsx
deleted file mode 100644
index 9bb709262..000000000
--- a/web/app/[workspaceSlug]/@header/settings/[...default-header]/page.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-import DefaultWorkspaceSettingsHeader from "../page";
-export default DefaultWorkspaceSettingsHeader;
\ No newline at end of file
diff --git a/web/app/[workspaceSlug]/@header/settings/page.tsx b/web/app/[workspaceSlug]/@header/settings/page.tsx
deleted file mode 100644
index d7f4e2b53..000000000
--- a/web/app/[workspaceSlug]/@header/settings/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-"use client";
-
-// components
-import AppHeaderWrapper from "../../app-header-wrapper";
-import WorkspaceSettingHeader from "./header";
-
-const WorkspaceSettingHeaderPage = () => <AppHeaderWrapper header={<WorkspaceSettingHeader />} />;
-
-export default WorkspaceSettingHeaderPage;
diff --git a/web/app/[workspaceSlug]/@header/workspace-views/[...default-header]/page.tsx b/web/app/[workspaceSlug]/@header/workspace-views/[...default-header]/page.tsx
deleted file mode 100644
index a057def83..000000000
--- a/web/app/[workspaceSlug]/@header/workspace-views/[...default-header]/page.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-import DefaultWorkspaceViewsHeader from "../page";
-export default DefaultWorkspaceViewsHeader;
\ No newline at end of file
diff --git a/web/app/[workspaceSlug]/@header/workspace-views/page.tsx b/web/app/[workspaceSlug]/@header/workspace-views/page.tsx
deleted file mode 100644
index 51b81df2b..000000000
--- a/web/app/[workspaceSlug]/@header/workspace-views/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-"use client";
-
-// components
-import AppHeaderWrapper from "../../app-header-wrapper";
-import GlobalIssuesHeader from "./header";
-
-const GlobalIssuesHeaderPage = () => <AppHeaderWrapper header={<GlobalIssuesHeader />} />;
-
-export default GlobalIssuesHeaderPage;
diff --git a/web/app/[workspaceSlug]/app-header-wrapper.tsx b/web/app/[workspaceSlug]/app-header-wrapper.tsx
deleted file mode 100644
index 2ae3b8166..000000000
--- a/web/app/[workspaceSlug]/app-header-wrapper.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-"use client";
-
-import { ReactNode } from "react";
-// components
-import { SidebarHamburgerToggle } from "@/components/core";
-
-export interface IAppHeaderWrapper {
-  header: ReactNode;
-  mobileHeader?: ReactNode;
-}
-
-const AppHeaderWrapper = ({ header, mobileHeader }: IAppHeaderWrapper) => (
-  <>
-    <div className="z-[15]">
-      <div className="z-10 flex w-full items-center border-b border-custom-border-200">
-        <div className="block bg-custom-sidebar-background-100  py-4 pl-5 md:hidden">
-          <SidebarHamburgerToggle />
-        </div>
-        <div className="w-full">{header}</div>
-      </div>
-      {mobileHeader && mobileHeader}
-    </div>
-  </>
-);
-
-export default AppHeaderWrapper;
diff --git a/web/app/[workspaceSlug]/page.tsx b/web/app/[workspaceSlug]/page.tsx
deleted file mode 100644
index 5f8a4610a..000000000
--- a/web/app/[workspaceSlug]/page.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-"use client";
-
-import { observer } from "mobx-react";
-// components
-import { PageHead } from "@/components/core";
-import { WorkspaceDashboardView } from "@/components/page-views";
-// hooks
-import { useWorkspace } from "@/hooks/store";
-
-const WorkspacePage = observer(() => {
-  const { currentWorkspace } = useWorkspace();
-  // derived values
-  const pageTitle = currentWorkspace?.name ? `${currentWorkspace?.name} - Home` : undefined;
-
-  return (
-    <>
-      <PageHead title={pageTitle} />
-      <WorkspaceDashboardView />
-    </>
-  );
-});
-
-export default WorkspacePage;
diff --git a/web/app/[workspaceSlug]/profile/[userId]/layout.tsx b/web/app/[workspaceSlug]/profile/[userId]/layout.tsx
deleted file mode 100644
index 5e92abf67..000000000
--- a/web/app/[workspaceSlug]/profile/[userId]/layout.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-"use client";
-
-import { observer } from "mobx-react";
-import { usePathname } from "next/navigation";
-// components
-import { ProfileSidebar } from "@/components/profile";
-// constants
-import { EUserWorkspaceRoles } from "@/constants/workspace";
-// hooks
-import { useUser } from "@/hooks/store";
-// local components
-import { ProfileNavbar } from "./navbar";
-
-type Props = {
-  children: React.ReactNode;
-};
-
-const AUTHORIZED_ROLES = [EUserWorkspaceRoles.ADMIN, EUserWorkspaceRoles.MEMBER, EUserWorkspaceRoles.VIEWER];
-
-const ProfileAuthWrapper: React.FC<Props> = observer((props) => {
-  const { children } = props;
-  // router
-  const pathname = usePathname();
-  // store hooks
-  const {
-    membership: { currentWorkspaceRole },
-  } = useUser();
-  // derived values
-  const isAuthorized = currentWorkspaceRole && AUTHORIZED_ROLES.includes(currentWorkspaceRole);
-  const isAuthorizedPath =
-    pathname.includes("assigned") || pathname.includes("created") || pathname.includes("subscribed");
-  const isIssuesTab = pathname.includes("assigned") || pathname.includes("created") || pathname.includes("subscribed");
-
-  return (
-    <div className="h-full w-full flex md:overflow-hidden">
-      <div className="flex w-full flex-col md:h-full md:overflow-hidden">
-        <ProfileNavbar isAuthorized={!!isAuthorized} showProfileIssuesFilter={isIssuesTab} />
-        {isAuthorized || !isAuthorizedPath ? (
-          <div className={`w-full overflow-hidden md:h-full`}>{children}</div>
-        ) : (
-          <div className="grid h-full w-full place-items-center text-custom-text-200">
-            You do not have the permission to access this page.
-          </div>
-        )}
-      </div>
-      <ProfileSidebar />
-    </div>
-  );
-});
-
-export default ProfileAuthWrapper;
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/layout.tsx b/web/app/[workspaceSlug]/projects/[projectId]/layout.tsx
deleted file mode 100644
index 03f01ae38..000000000
--- a/web/app/[workspaceSlug]/projects/[projectId]/layout.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-"use client";
-
-import { ReactNode } from "react"
-// layouts
-import { ProjectAuthWrapper } from "@/layouts/auth-layout"
-
-const ProjectLayout = ({ children }: { children: ReactNode }) => (
-  <ProjectAuthWrapper>
-    {children}
-  </ProjectAuthWrapper>
-);
-
-export default ProjectLayout;
diff --git a/web/app/[workspaceSlug]/projects/[projectId]/settings/layout.tsx b/web/app/[workspaceSlug]/projects/[projectId]/settings/layout.tsx
deleted file mode 100644
index 6645eb7d6..000000000
--- a/web/app/[workspaceSlug]/projects/[projectId]/settings/layout.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-"use client";
-
-import { FC, ReactNode } from "react";
-import { observer } from "mobx-react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
-// ui
-import { Button, LayersIcon } from "@plane/ui";
-// components
-import { NotAuthorizedView } from "@/components/auth-screens";
-// constants
-import { EUserProjectRoles } from "@/constants/project";
-// hooks
-import { useUser } from "@/hooks/store";
-// local components
-import ProjectSettingsSidebar from "./sidebar";
-
-export interface IProjectSettingLayout {
-  children: ReactNode;
-}
-
-const ProjectSettingLayout: FC<IProjectSettingLayout> = observer((props) => {
-  const { children } = props;
-  // router
-  const { workspaceSlug, projectId } = useParams();
-  // store hooks
-  const {
-    membership: { currentProjectRole },
-  } = useUser();
-
-  const restrictViewSettings = currentProjectRole && currentProjectRole <= EUserProjectRoles.VIEWER;
-
-  return restrictViewSettings ? (
-    <NotAuthorizedView
-      type="project"
-      actionButton={
-        //TODO: Create a new component called Button Link to handle such scenarios
-        <Link href={`/${workspaceSlug}/projects/${projectId}/issues`}>
-          <Button variant="primary" size="md" prependIcon={<LayersIcon />}>
-            Go to issues
-          </Button>
-        </Link>
-      }
-    />
-  ) : (
-    <div className="inset-y-0 z-20 flex flex-grow-0 h-full w-full">
-      <div className="w-80 flex-shrink-0 overflow-y-hidden pt-8 sm:hidden hidden md:block lg:block">
-        <ProjectSettingsSidebar />
-      </div>
-      <div className="w-full pl-10 sm:pl-10 md:pl-0 lg:pl-0 overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
-        {children}
-      </div>
-    </div>
-  );
-});
-
-export default ProjectSettingLayout;
diff --git a/web/app/[workspaceSlug]/settings/layout.tsx b/web/app/[workspaceSlug]/settings/layout.tsx
deleted file mode 100644
index cc0274d45..000000000
--- a/web/app/[workspaceSlug]/settings/layout.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client";
-
-import { FC, ReactNode } from "react";
-// components
-import MobileWorkspaceSettingsTabs from "@/components/workspace/settings/mobile-workspace-settings-tabs";
-// local components
-import { WorkspaceSettingsSidebar } from "./sidebar";
-
-export interface IWorkspaceSettingLayout {
-  children: ReactNode;
-}
-
-const WorkspaceSettingLayout: FC<IWorkspaceSettingLayout> = (props) => {
-  const { children } = props;
-
-  return (
-    <div className="inset-y-0 z-20 flex h-full w-full gap-2">
-      <div className="w-80 flex-shrink-0 overflow-y-hidden pt-8 sm:hidden hidden md:block lg:block">
-        <WorkspaceSettingsSidebar />
-      </div>
-      <div className="flex flex-col relative w-full overflow-hidden">
-        <MobileWorkspaceSettingsTabs />
-        <div className="w-full pl-4 md:pl-0 md:py-8 py-2 overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default WorkspaceSettingLayout;
diff --git a/web/app/accounts/forgot-password/page.tsx b/web/app/accounts/forgot-password/page.tsx
index 2aaedbb21..e3bdde83a 100644
--- a/web/app/accounts/forgot-password/page.tsx
+++ b/web/app/accounts/forgot-password/page.tsx
@@ -39,7 +39,7 @@ const defaultValues: TForgotPasswordFormValues = {
 // services
 const authService = new AuthService();
 
-const ForgotPasswordPage = () => {
+export default function ForgotPasswordPage() {
   // search params
   const searchParams = useSearchParams();
   const email = searchParams.get("email");
@@ -185,6 +185,4 @@ const ForgotPasswordPage = () => {
       </div>
     </AuthenticationWrapper>
   );
-};
-
-export default ForgotPasswordPage;
+}
diff --git a/web/app/accounts/reset-password/page.tsx b/web/app/accounts/reset-password/page.tsx
index cd661feb0..4e33d77ae 100644
--- a/web/app/accounts/reset-password/page.tsx
+++ b/web/app/accounts/reset-password/page.tsx
@@ -45,7 +45,7 @@ const defaultValues: TResetPasswordFormValues = {
 // services
 const authService = new AuthService();
 
-const ResetPasswordPage = () => {
+export default function ResetPasswordPage() {
   // search params
   const searchParams = useSearchParams();
   const uidb64 = searchParams.get("uidb64");
@@ -230,6 +230,4 @@ const ResetPasswordPage = () => {
       </div>
     </AuthenticationWrapper>
   );
-};
-
-export default ResetPasswordPage;
+}
diff --git a/web/app/error.tsx b/web/app/error.tsx
index 515a107fd..78ade092c 100644
--- a/web/app/error.tsx
+++ b/web/app/error.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { useEffect } from "react";
-import * as Sentry from "@sentry/nextjs";
+// import { useEffect } from "react";
+// import * as Sentry from "@sentry/nextjs";
 // import { useRouter } from "next/navigation";
 // services
 import { Button } from "@plane/ui";
@@ -17,16 +17,18 @@ import DefaultLayout from "@/layouts/default-layout";
 // services
 // const authService = new AuthService();
 
-type props = {
-  error: Error & { digest?: string };
-};
+// type props = {
+//   error: Error & { digest?: string };
+// };
 
-const CustomErrorComponent = ({ error }: props) => {
+// TODO: adding error sentry logging.
+// const CustomErrorComponent = ({ error }: props) => {
+const CustomErrorComponent = () => {
   // const router = useRouter();
 
-  useEffect(() => {
-    Sentry.captureException(error);
-  }, [error]);
+  // useEffect(() => {
+  //   Sentry.captureException(error);
+  // }, [error]);
 
   const handleRefresh = () => {
     window.location.reload();
diff --git a/web/app/installations/[provider]/page.tsx b/web/app/installations/[provider]/page.tsx
index 78e8f682d..218d7dee2 100644
--- a/web/app/installations/[provider]/page.tsx
+++ b/web/app/installations/[provider]/page.tsx
@@ -10,7 +10,7 @@ import { AppInstallationService } from "@/services/app_installation.service";
 // services
 const appInstallationService = new AppInstallationService();
 
-const AppPostInstallation = () => {
+export default function AppPostInstallation() {
   // params
   const { provider } = useParams();
   // query params
@@ -72,6 +72,4 @@ const AppPostInstallation = () => {
       <LogoSpinner />
     </div>
   );
-};
-
-export default AppPostInstallation;
+}
diff --git a/web/app/profile/notifications/page.tsx b/web/app/profile/notifications/page.tsx
index 8e8ff3f04..76f1bf3d6 100644
--- a/web/app/profile/notifications/page.tsx
+++ b/web/app/profile/notifications/page.tsx
@@ -14,7 +14,7 @@ import { UserService } from "@/services/user.service";
 // services
 const userService = new UserService();
 
-const ProfileNotificationPage = () => {
+export default function ProfileNotificationPage() {
   // fetching user email notification settings
   const { data, isLoading } = useSWR("CURRENT_USER_EMAIL_NOTIFICATION_SETTINGS", () =>
     userService.currentUserEmailNotificationSettings()
@@ -41,6 +41,4 @@ const ProfileNotificationPage = () => {
       </div>
     </>
   );
-};
-
-export default ProfileNotificationPage;
\ No newline at end of file
+}
diff --git a/web/components/core/app-header.tsx b/web/components/core/app-header.tsx
new file mode 100644
index 000000000..83e148d4c
--- /dev/null
+++ b/web/components/core/app-header.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { ReactNode } from "react";
+// components
+import { SidebarHamburgerToggle } from "@/components/core";
+
+export interface AppHeaderProps {
+  header: ReactNode;
+  mobileHeader?: ReactNode;
+}
+
+export const AppHeader = (props: AppHeaderProps) => {
+  const { header, mobileHeader } = props;
+
+  return (
+    <>
+      <div className="z-[15]">
+        <div className="z-10 flex w-full items-center border-b border-custom-border-200">
+          <div className="block bg-custom-sidebar-background-100  py-4 pl-5 md:hidden">
+            <SidebarHamburgerToggle />
+          </div>
+          <div className="w-full">{header}</div>
+        </div>
+        {mobileHeader && mobileHeader}
+      </div>
+    </>
+  );
+};
diff --git a/web/components/core/content-wrapper.tsx b/web/components/core/content-wrapper.tsx
new file mode 100644
index 000000000..f95239967
--- /dev/null
+++ b/web/components/core/content-wrapper.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { ReactNode } from "react";
+
+export interface ContentWrapperProps {
+  children: ReactNode;
+}
+
+export const ContentWrapper = ({ children }: ContentWrapperProps) => (
+  <div className="h-full w-full overflow-hidden">
+    <div className="relative h-full w-full overflow-x-hidden overflow-y-scroll">{children}</div>
+  </div>
+);
diff --git a/web/components/core/index.ts b/web/components/core/index.ts
index 81649c648..2cc19c288 100644
--- a/web/components/core/index.ts
+++ b/web/components/core/index.ts
@@ -7,3 +7,5 @@ export * from "./favorite-star";
 export * from "./theme";
 export * from "./image-picker-popover";
 export * from "./page-title";
+export * from "./app-header";
+export * from "./content-wrapper";
diff --git a/web/helpers/string.helper.ts b/web/helpers/string.helper.ts
index 51feb4656..d8c879d43 100644
--- a/web/helpers/string.helper.ts
+++ b/web/helpers/string.helper.ts
@@ -1,4 +1,4 @@
-import * as DOMPurify from "dompurify";
+import DOMPurify from "isomorphic-dompurify";
 import {
   CYCLE_ISSUES_WITH_PARAMS,
   MODULE_ISSUES_WITH_PARAMS,
diff --git a/web/instrumentation.ts b/web/instrumentation.ts
index 7b89a972e..f8a929ba4 100644
--- a/web/instrumentation.ts
+++ b/web/instrumentation.ts
@@ -1,9 +1,9 @@
 export async function register() {
-  if (process.env.NEXT_RUNTIME === 'nodejs') {
-    await import('./sentry.server.config');
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    await import("./sentry.server.config");
   }
 
-  if (process.env.NEXT_RUNTIME === 'edge') {
-    await import('./sentry.edge.config');
+  if (process.env.NEXT_RUNTIME === "edge") {
+    await import("./sentry.edge.config");
   }
 }
diff --git a/web/package.json b/web/package.json
index 377fa80b8..ca2be4829 100644
--- a/web/package.json
+++ b/web/package.json
@@ -35,8 +35,8 @@
     "clsx": "^2.0.0",
     "cmdk": "^1.0.0",
     "date-fns": "^2.30.0",
-    "dompurify": "^3.0.11",
     "dotenv": "^16.0.3",
+    "isomorphic-dompurify": "^2.12.0",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
     "lucide-react": "^0.378.0",
diff --git a/yarn.lock b/yarn.lock
index cf4ccf04f..5f7ea0f06 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5076,6 +5076,13 @@ agent-base@6:
   dependencies:
     debug "4"
 
+agent-base@^7.0.2, agent-base@^7.1.0:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-7.1.1.tgz#bdbded7dfb096b751a2a087eeeb9664725b2e317"
+  integrity sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==
+  dependencies:
+    debug "^4.3.4"
+
 ajv-formats@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ajv-formats/-/ajv-formats-2.1.1.tgz#6e669400659eb74973bbf2e33327180a0996b520"
@@ -6252,6 +6259,13 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+cssstyle@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-4.0.1.tgz#ef29c598a1e90125c870525490ea4f354db0660a"
+  integrity sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==
+  dependencies:
+    rrweb-cssom "^0.6.0"
+
 csstype@^3.0.2, csstype@^3.1.3:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
@@ -6348,6 +6362,14 @@ damerau-levenshtein@^1.0.8:
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
   integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
 
+data-urls@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-5.0.0.tgz#2f76906bce1824429ffecb6920f45a0b30f00dde"
+  integrity sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==
+  dependencies:
+    whatwg-mimetype "^4.0.0"
+    whatwg-url "^14.0.0"
+
 data-view-buffer@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/data-view-buffer/-/data-view-buffer-1.0.1.tgz#8ea6326efec17a2e42620696e671d7d5a8bc66b2"
@@ -6408,6 +6430,11 @@ debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
+decimal.js@^10.4.3:
+  version "10.4.3"
+  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23"
+  integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==
+
 decode-named-character-reference@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz#daabac9690874c394c81e4162a0304b35d824f0e"
@@ -6700,7 +6727,7 @@ domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
   dependencies:
     domelementtype "^2.2.0"
 
-dompurify@^3.0.11:
+dompurify@^3.0.11, dompurify@^3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.5.tgz#2c6a113fc728682a0f55684b1388c58ddb79dc38"
   integrity sha512-lwG+n5h8QNpxtyrJW/gJWckL+1/DQiYMX8f7t8Z2AZTPw1esVrqjI63i7Zc2Gz0aKzLVMYC1V1PL/ky+aY/NgA==
@@ -8309,6 +8336,13 @@ hosted-git-info@^2.1.4:
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
   integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
 
+html-encoding-sniffer@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz#696df529a7cfd82446369dc5193e590a3735b448"
+  integrity sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==
+  dependencies:
+    whatwg-encoding "^3.1.1"
+
 html-entities@^2.1.0:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.5.2.tgz#201a3cf95d3a15be7099521620d19dfb4f65359f"
@@ -8364,6 +8398,14 @@ http-errors@2.0.0:
     statuses "2.0.1"
     toidentifier "1.0.1"
 
+http-proxy-agent@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz#9a8b1f246866c028509486585f62b8f2c18c270e"
+  integrity sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==
+  dependencies:
+    agent-base "^7.1.0"
+    debug "^4.3.4"
+
 https-proxy-agent@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
@@ -8372,6 +8414,14 @@ https-proxy-agent@^5.0.0:
     agent-base "6"
     debug "4"
 
+https-proxy-agent@^7.0.4:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-7.0.4.tgz#8e97b841a029ad8ddc8731f26595bad868cb4168"
+  integrity sha512-wlwpilI7YdjSkWaQ/7omYBMTliDcmCN8OLihO6I9B86g06lMyAoqgoDpV0XqoaPOKj+0DIdAvnsWfyAAhmimcg==
+  dependencies:
+    agent-base "^7.0.2"
+    debug "4"
+
 human-signals@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
@@ -8394,6 +8444,13 @@ iconv-lite@0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+iconv-lite@0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
 icss-utils@^5.0.0, icss-utils@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
@@ -8746,6 +8803,11 @@ is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
+is-potential-custom-element-name@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
+  integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
+
 is-reference@1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/is-reference/-/is-reference-1.2.1.tgz#8b2dac0b371f4bc994fdeaba9eb542d03002d0b7"
@@ -8861,6 +8923,15 @@ isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
 
+isomorphic-dompurify@^2.12.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/isomorphic-dompurify/-/isomorphic-dompurify-2.12.0.tgz#fd63aa7d1509f6fcf24f824b36cef06e663808b7"
+  integrity sha512-jJm6VgJ9toBLqNUHuLudn+2Q3NBBaoPbsh5SzzO2dp9Zq9+p6fEg4Ffuq9RZsofb8OnqE6FJVVq3MRDLlmBHpA==
+  dependencies:
+    "@types/dompurify" "^3.0.5"
+    dompurify "^3.1.5"
+    jsdom "^24.1.0"
+
 isomorphic.js@^0.2.4:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/isomorphic.js/-/isomorphic.js-0.2.5.tgz#13eecf36f2dba53e85d355e11bf9d4208c6f7f88"
@@ -8976,6 +9047,33 @@ jscodeshift@^0.15.1:
     temp "^0.8.4"
     write-file-atomic "^2.3.0"
 
+jsdom@^24.1.0:
+  version "24.1.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-24.1.0.tgz#0cffdabd42c506788bfecd160e8ac22d4387f971"
+  integrity sha512-6gpM7pRXCwIOKxX47cgOyvyQDN/Eh0f1MeKySBV2xGdKtqJBLj8P25eY3EVCWo2mglDDzozR2r2MW4T+JiNUZA==
+  dependencies:
+    cssstyle "^4.0.1"
+    data-urls "^5.0.0"
+    decimal.js "^10.4.3"
+    form-data "^4.0.0"
+    html-encoding-sniffer "^4.0.0"
+    http-proxy-agent "^7.0.2"
+    https-proxy-agent "^7.0.4"
+    is-potential-custom-element-name "^1.0.1"
+    nwsapi "^2.2.10"
+    parse5 "^7.1.2"
+    rrweb-cssom "^0.7.0"
+    saxes "^6.0.0"
+    symbol-tree "^3.2.4"
+    tough-cookie "^4.1.4"
+    w3c-xmlserializer "^5.0.0"
+    webidl-conversions "^7.0.0"
+    whatwg-encoding "^3.1.1"
+    whatwg-mimetype "^4.0.0"
+    whatwg-url "^14.0.0"
+    ws "^8.17.0"
+    xml-name-validator "^5.0.0"
+
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
@@ -10079,6 +10177,11 @@ nth-check@^2.0.1:
   dependencies:
     boolbase "^1.0.0"
 
+nwsapi@^2.2.10:
+  version "2.2.10"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.10.tgz#0b77a68e21a0b483db70b11fad055906e867cda8"
+  integrity sha512-QK0sRs7MKv0tKe1+5uZIQk/C8XGza4DAnztJG8iD+TpJIORARrCxczA738awHrZoHeTjSSoHqao2teO0dC/gFQ==
+
 nypm@^0.3.8:
   version "0.3.8"
   resolved "https://registry.yarnpkg.com/nypm/-/nypm-0.3.8.tgz#a16b078b161be5885351e72cf0b97326973722bf"
@@ -10354,6 +10457,13 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+parse5@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-7.1.2.tgz#0736bebbfd77793823240a23b7fc5e010b7f8e32"
+  integrity sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==
+  dependencies:
+    entities "^4.4.0"
+
 parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
@@ -11072,6 +11182,11 @@ proxy-from-env@^1.1.0:
   resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
   integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
 
+psl@^1.1.33:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
+  integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==
+
 pump@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
@@ -11107,7 +11222,7 @@ punycode@^1.4.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
   integrity sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==
 
-punycode@^2.1.0:
+punycode@^2.1.0, punycode@^2.1.1, punycode@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
@@ -11126,6 +11241,11 @@ qs@^6.10.0, qs@^6.11.2:
   dependencies:
     side-channel "^1.0.6"
 
+querystringify@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+  integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
@@ -11635,6 +11755,11 @@ require-in-the-middle@^7.1.1:
     module-details-from-path "^1.0.3"
     resolve "^1.22.1"
 
+requires-port@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+  integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@@ -11769,6 +11894,16 @@ rope-sequence@^1.3.0:
   resolved "https://registry.yarnpkg.com/rope-sequence/-/rope-sequence-1.3.4.tgz#df85711aaecd32f1e756f76e43a415171235d425"
   integrity sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==
 
+rrweb-cssom@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz#ed298055b97cbddcdeb278f904857629dec5e0e1"
+  integrity sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==
+
+rrweb-cssom@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/rrweb-cssom/-/rrweb-cssom-0.7.0.tgz#51cc1e7f4c20dd81218545b5092939bc6fd81bcd"
+  integrity sha512-KlSv0pm9kgQSRxXEMgtivPJ4h826YHsuob8pSHcfSZsSXGtvpEAie8S0AnXuObEJ7nhikOb4ahwxDm0H2yW17g==
+
 run-parallel@^1.1.9:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
@@ -11812,11 +11947,18 @@ safe-regex-test@^1.0.3:
     es-errors "^1.3.0"
     is-regex "^1.1.4"
 
-"safer-buffer@>= 2.1.2 < 3":
+"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0":
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+saxes@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/saxes/-/saxes-6.0.0.tgz#fe5b4a4768df4f14a201b1ba6a65c1f3d9988cc5"
+  integrity sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==
+  dependencies:
+    xmlchars "^2.2.0"
+
 scheduler@^0.23.2:
   version "0.23.2"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
@@ -12459,6 +12601,11 @@ swr@^2.1.3, swr@^2.2.2, swr@^2.2.4:
     client-only "^0.0.1"
     use-sync-external-store "^1.2.0"
 
+symbol-tree@^3.2.4:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
+  integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
+
 synckit@^0.8.6:
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/synckit/-/synckit-0.8.8.tgz#fe7fe446518e3d3d49f5e429f443cf08b6edfcd7"
@@ -12762,6 +12909,16 @@ toidentifier@1.0.1:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
   integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
 
+tough-cookie@^4.1.4:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.4.tgz#945f1461b45b5a8c76821c33ea49c3ac192c1b36"
+  integrity sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==
+  dependencies:
+    psl "^1.1.33"
+    punycode "^2.1.1"
+    universalify "^0.2.0"
+    url-parse "^1.5.3"
+
 tr46@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
@@ -12769,6 +12926,13 @@ tr46@^1.0.1:
   dependencies:
     punycode "^2.1.0"
 
+tr46@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-5.0.0.tgz#3b46d583613ec7283020d79019f1335723801cec"
+  integrity sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==
+  dependencies:
+    punycode "^2.3.1"
+
 tr46@~0.0.3:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
@@ -13210,6 +13374,11 @@ unist-util-visit@^5.0.0:
     unist-util-is "^6.0.0"
     unist-util-visit-parents "^6.0.0"
 
+universalify@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
+  integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
+
 universalify@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
@@ -13279,6 +13448,14 @@ uri-js@^4.2.2, uri-js@^4.4.1:
   dependencies:
     punycode "^2.1.0"
 
+url-parse@^1.5.3:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
+  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
+  dependencies:
+    querystringify "^2.1.1"
+    requires-port "^1.0.0"
+
 url@^0.11.0:
   version "0.11.3"
   resolved "https://registry.yarnpkg.com/url/-/url-0.11.3.tgz#6f495f4b935de40ce4a0a52faee8954244f3d3ad"
@@ -13389,6 +13566,13 @@ w3c-keyname@^2.2.0:
   resolved "https://registry.yarnpkg.com/w3c-keyname/-/w3c-keyname-2.2.8.tgz#7b17c8c6883d4e8b86ac8aba79d39e880f8869c5"
   integrity sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==
 
+w3c-xmlserializer@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz#f925ba26855158594d907313cedd1476c5967f6c"
+  integrity sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==
+  dependencies:
+    xml-name-validator "^5.0.0"
+
 warning@^4.0.2, warning@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
@@ -13421,6 +13605,11 @@ webidl-conversions@^4.0.2:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
   integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
 
+webidl-conversions@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-7.0.0.tgz#256b4e1882be7debbf01d05f0aa2039778ea080a"
+  integrity sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==
+
 webpack-dev-middleware@^6.1.2:
   version "6.1.3"
   resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-6.1.3.tgz#79f4103f8c898564c9e96c3a9c2422de50f249bc"
@@ -13494,6 +13683,26 @@ webpack@5:
     watchpack "^2.4.1"
     webpack-sources "^3.2.3"
 
+whatwg-encoding@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz#d0f4ef769905d426e1688f3e34381a99b60b76e5"
+  integrity sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==
+  dependencies:
+    iconv-lite "0.6.3"
+
+whatwg-mimetype@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz#bc1bf94a985dc50388d54a9258ac405c3ca2fc0a"
+  integrity sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==
+
+whatwg-url@^14.0.0:
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-14.0.0.tgz#00baaa7fd198744910c4b1ef68378f2200e4ceb6"
+  integrity sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==
+  dependencies:
+    tr46 "^5.0.0"
+    webidl-conversions "^7.0.0"
+
 whatwg-url@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
@@ -13788,11 +13997,21 @@ write-file-atomic@^2.3.0:
     imurmurhash "^0.1.4"
     signal-exit "^3.0.2"
 
-ws@^8.2.3:
+ws@^8.17.0, ws@^8.2.3:
   version "8.17.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.0.tgz#d145d18eca2ed25aaf791a183903f7be5e295fea"
   integrity sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==
 
+xml-name-validator@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-5.0.0.tgz#82be9b957f7afdacf961e5980f1bf227c0bf7673"
+  integrity sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==
+
+xmlchars@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
+  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
+
 xtend@^4.0.0, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"