From 2b6c4014ea214959273f2b83160d935a348976c4 Mon Sep 17 00:00:00 2001
From: Faiz <faiz@Faizs-MacBook-Pro.local>
Date: Tue, 28 Jul 2026 13:58:26 +0530
Subject: [PATCH 1/4] Project grid, list view pixel perfection

---
 assets/img/grid.svg                           |  8 +++++
 assets/img/list.svg                           | 10 ++++++
 assets/scss/main.scss                         | 25 +++++++-------
 assets/scss/theme.scss                        |  3 +-
 components/workspace-projects/ProjectCard.vue | 27 ++++++++-------
 .../workspace-projects/ProjectListRow.vue     |  4 +--
 components/workspace-projects/StatusBadge.vue | 23 ++++++-------
 composables/useProjectDisplay.ts              |  2 +-
 pages/workspace/[id]/projects/index.vue       | 33 ++++++++++++-------
 9 files changed, 82 insertions(+), 53 deletions(-)
 create mode 100644 assets/img/grid.svg
 create mode 100644 assets/img/list.svg

diff --git a/assets/img/grid.svg b/assets/img/grid.svg
new file mode 100644
index 0000000..07c5754
--- /dev/null
+++ b/assets/img/grid.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <g id="grid" transform="translate(1 1)">
+    <rect id="Rectangle_147608" data-name="Rectangle 147608" width="7" height="7" fill="none" stroke="#5a607b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <rect id="Rectangle_147609" data-name="Rectangle 147609" width="7" height="7" transform="translate(11)" fill="none" stroke="#5a607b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <rect id="Rectangle_147610" data-name="Rectangle 147610" width="7" height="7" transform="translate(11 11)" fill="none" stroke="#5a607b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <rect id="Rectangle_147611" data-name="Rectangle 147611" width="7" height="7" transform="translate(0 11)" fill="none" stroke="#5a607b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  </g>
+</svg>
diff --git a/assets/img/list.svg b/assets/img/list.svg
new file mode 100644
index 0000000..f7174ed
--- /dev/null
+++ b/assets/img/list.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="14" viewBox="0 0 20 14">
+  <g id="list" transform="translate(1 1)">
+    <line id="Line_260" data-name="Line 260" x2="13" transform="translate(5)" fill="none" stroke="#5a607b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <line id="Line_261" data-name="Line 261" x2="13" transform="translate(5 6)" fill="none" stroke="#5a607b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <line id="Line_262" data-name="Line 262" x2="13" transform="translate(5 12)" fill="none" stroke="#5a607b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <line id="Line_263" data-name="Line 263" x2="0.01" fill="none" stroke="#5a607b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <line id="Line_264" data-name="Line 264" x2="0.01" transform="translate(0 6)" fill="none" stroke="#5a607b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <line id="Line_265" data-name="Line 265" x2="0.01" transform="translate(0 12)" fill="none" stroke="#5a607b" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  </g>
+</svg>
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 56d4364..68abb01 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -141,14 +141,14 @@ label > .form-select:first-child {
 /* TDEI Utility Classes */
 
 .page-header-title {
-  font-family: var(--secondary-font-family);
-  font-size: 1.5rem;
+  font-family: var(--primary-font-family);
+  font-size: 20px;
   font-weight: 700;
   margin-bottom: 0.3125rem;
 }
 
 .page-header-subtitle {
-  font-family: var(--secondary-font-family);
+  font-family: var(--primary-font-family);
   font-size: 0.875rem;
   color: $tdei-secondary;
 }
@@ -182,31 +182,30 @@ label > .form-select:first-child {
 
 .tdei-list-title {
   color: $text-navy;
-  font-family: var(--secondary-font-family);
-  font-size: 1rem;
-  font-weight: 600;
+  font-size: 16px;
+  font-weight: 700;
   line-height: 1.45;
-  letter-spacing: -0.01em;
 }
 
 .tdei-list-meta-label {
-  color: rgba($secondary, 0.92);
-  font-size: 0.95rem;
+  color: $text-secondary;
+  font-size: 14px;
   font-weight: 400;
   line-height: 1.25;
 }
 
 .tdei-list-meta-value {
   color: $text-navy;
-  font-size: 1rem;
+  font-size: 14px;
   font-weight: 600;
   line-height: 1.3;
 }
 
 .tdei-list-progress-copy {
-  color: rgba($secondary, 0.95);
-  font-size: 1rem;
+  color: $text-secondary;
+  font-size: 14px;
   line-height: 1.25;
+  font-weight: 600;
 }
 
 .tdei-list-progress-copy strong {
@@ -229,7 +228,7 @@ label > .form-select:first-child {
 .tdei-inline-filter-label {
   color: $text-navy;
   font-size: 1rem;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1;
 }
 
diff --git a/assets/scss/theme.scss b/assets/scss/theme.scss
index b13e953..5f0a14f 100644
--- a/assets/scss/theme.scss
+++ b/assets/scss/theme.scss
@@ -22,7 +22,8 @@ $tdei-cyan: #59c3c8;
 $purple-background-light: #f4f0fb;
 $purple-background-dark: #ddd2ee;
 $purple-background-medium: #ebe4f6;
-$text-navy: #2f3661;
+$text-navy: #1A1E3D;
+$text-secondary: #5A607B;
 $dropdown-active-bg: #e2f0f8;
 $danger-red: #c7393a;
 
diff --git a/components/workspace-projects/ProjectCard.vue b/components/workspace-projects/ProjectCard.vue
index 2b0a3fe..2decf58 100644
--- a/components/workspace-projects/ProjectCard.vue
+++ b/components/workspace-projects/ProjectCard.vue
@@ -130,9 +130,9 @@ const projectRoute = computed(
   height: 100%;
   cursor: pointer;
   background-color: #ffffff;
-  border: 1px solid rgba($text-navy, 0.1);
-  border-radius: 0.8rem;
-  box-shadow: 0 0.35rem 0.9rem rgba($text-navy, 0.08);
+  box-shadow: 0px 3px 6px #0000000D;
+  border: 1px solid #E5E7F0;
+  border-radius: 10px;
   transition:
     transform 160ms ease,
     box-shadow 160ms ease,
@@ -190,7 +190,7 @@ const projectRoute = computed(
   display: flex;
   flex: 1;
   flex-direction: column;
-  gap: 1rem;
+  gap: 20px;
   padding: 0.9rem 1.2rem 1.3rem;
 }
 
@@ -198,8 +198,7 @@ const projectRoute = computed(
   display: -webkit-box;
   margin: 0;
   color: $text-navy;
-  font-family: var(--secondary-font-family);
-  font-size: 1.05rem;
+  font-size: 16px;
   font-weight: 700;
   line-height: 1.5;
   overflow: hidden;
@@ -226,18 +225,18 @@ const projectRoute = computed(
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  color: rgba($secondary, 0.95);
-  font-size: 0.95rem;
+  color: $text-secondary;
+  font-size: 14px;
 }
 
 .project-progress-copy strong {
   font-weight: 600;
-  color: $text-navy;
 }
 
 .project-progress-bar {
   height: 0.35rem;
-  background-color: #e5e8f3;
+  background-color: #EBEDF6;
+  margin-top: -10px;
 }
 
 .project-progress-bar .progress-bar {
@@ -266,8 +265,8 @@ const projectRoute = computed(
   display: block;
   min-width: 0;
   color: $text-navy;
-  font-size: 0.95rem;
-  font-weight: 400;
+  font-size: 14px;
+  font-weight: 500;
   overflow-wrap: anywhere;
   word-break: break-word;
 }
@@ -275,7 +274,7 @@ const projectRoute = computed(
 .project-card-label {
   display: block;
   margin-bottom: 0.1rem;
-  color: rgba($secondary, 0.92);
-  font-size: 0.85rem;
+  color: $text-secondary;
+  font-size: 14px;
 }
 </style>
diff --git a/components/workspace-projects/ProjectListRow.vue b/components/workspace-projects/ProjectListRow.vue
index d4da197..cd7f3f3 100644
--- a/components/workspace-projects/ProjectListRow.vue
+++ b/components/workspace-projects/ProjectListRow.vue
@@ -101,7 +101,7 @@ const projectRoute = computed(
   grid-template-columns: minmax(0, 2.9fr) minmax(8.5rem, 1.1fr) minmax(12rem, 1.35fr) minmax(11rem, 1.2fr) minmax(15rem, 1.6fr) 2.25rem;
   gap: 1.5rem;
   align-items: start;
-  padding: 2.2rem 0;
+  padding: 25px 10px;
   cursor: pointer;
   border-bottom: 1px solid rgba($text-navy, 0.08);
   transition: background-color 160ms ease;
@@ -146,7 +146,7 @@ const projectRoute = computed(
 .project-list-progress-cell {
   display: grid;
   align-content: start;
-  gap: 0.7rem;
+  gap: 15px;
   padding-top: 0.05rem;
 }
 
diff --git a/components/workspace-projects/StatusBadge.vue b/components/workspace-projects/StatusBadge.vue
index 80238a7..f78e73d 100644
--- a/components/workspace-projects/StatusBadge.vue
+++ b/components/workspace-projects/StatusBadge.vue
@@ -67,11 +67,12 @@ const badgeClasses = computed(() => ({
   gap: 0.35rem;
   border: 1px solid currentColor;
   border-radius: 999px;
-  font-size: 0.875rem;
-  font-weight: 400;
+  font-size: 12px;
+  font-weight: 600;
   line-height: 1;
-  padding: 0.38rem 0.72rem;
+  padding: 6px 10px;
   white-space: nowrap;
+  width: fit-content;
 }
 
 .project-status-badge-icon {
@@ -90,20 +91,20 @@ const badgeClasses = computed(() => ({
 }
 
 .project-status-badge-completed {
-  background-color: #f6fcfa;
-  border-color: #d4e4dd;
-  color: #5c9f83;
+  background-color: #F6FCFA;
+  border-color: #D4E4DD;
+  color: #067A57;
 }
 
 .project-status-badge-in-progress {
-  background-color: #f4fbff;
-  border-color: #c8e0ee;
-  color: #5a97cc;
+  background-color: #F4FBFF;
+  border-color: #C8E0EE;
+  color: #1A74A8;
 }
 
 .project-status-badge-draft {
-  background-color: #fffcf5;
+  background-color: #FFFCF5;
   border-color: #e9e1d3;
-  color: #b88d41;
+  color: #8F6C1A;
 }
 </style>
diff --git a/composables/useProjectDisplay.ts b/composables/useProjectDisplay.ts
index dce8afc..d7f7d68 100644
--- a/composables/useProjectDisplay.ts
+++ b/composables/useProjectDisplay.ts
@@ -13,7 +13,7 @@ export function useProjectDisplay(project: Ref<WorkspaceProject> | WorkspaceProj
 
   const taskSummary = computed(() =>
     progressPercent.value === 0
-      ? 'Not started'
+      ? 'Not Started'
       : `${completedTaskCount.value}/${projectRef.value.taskCount} Tasks Executed`,
   );
 
diff --git a/pages/workspace/[id]/projects/index.vue b/pages/workspace/[id]/projects/index.vue
index 30ec07e..a4bd284 100644
--- a/pages/workspace/[id]/projects/index.vue
+++ b/pages/workspace/[id]/projects/index.vue
@@ -71,16 +71,17 @@
             :aria-pressed="option.value === viewMode"
             @click="viewMode = option.value"
           >
-            <app-icon
-              :variant="option.icon"
-              size="20"
-              no-margin
+            <img
+              :src="option.icon"
+              :alt="option.label"
+              class="view-icon"
             />
             <span class="visually-hidden">{{ option.label }}</span>
           </button>
         </div>
 
         <span
+          v-if="isWorkspaceLead"
           class="workspace-projects-toolbar-divider"
           aria-hidden="true"
         />
@@ -208,6 +209,8 @@
 <script setup lang="ts">
 import { LoadingContext } from '~/services/loading';
 import { tdeiUserClient, workspaceProjectsClient, workspacesClient } from '~/services/index';
+import gridIcon from '~/assets/img/grid.svg';
+import listIcon from '~/assets/img/list.svg';
 
 import type {
   WorkspaceProjectsQuery,
@@ -270,8 +273,8 @@ const sortOptions: SelectOption[] = [
 ];
 
 const viewOptions: Array<{ icon: string; label: string; value: WorkspaceProjectView }> = [
-  { icon: 'grid_view', label: 'Grid view', value: 'grid' },
-  { icon: 'view_list', label: 'List view', value: 'list' },
+  { icon: gridIcon, label: 'Grid view', value: 'grid' },
+  { icon: listIcon, label: 'List view', value: 'list' },
 ];
 
 const statusOptions: SelectOption[] = [
@@ -411,7 +414,7 @@ onBeforeUnmount(() => {
 .workspace-projects-filters {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 20px;
   flex: 1;
   min-width: 0;
 }
@@ -473,15 +476,24 @@ onBeforeUnmount(() => {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 2.8rem;
+  width: 2.4rem;
   height: 2.4rem;
   color: $secondary;
   background-color: #fff;
   border: 0;
 }
 
+.workspace-projects-view-button i.material-icons{
+  margin-top: 0px;
+}
+
+.workspace-projects-view-button .view-icon {
+    width: 16px;
+    height: 16px;
+}
+
 .workspace-projects-view-button-active {
-  background-color: $gray-200;
+  background-color: #EBEDF6;
 }
 
 .workspace-projects-toolbar-divider {
@@ -505,13 +517,12 @@ onBeforeUnmount(() => {
 .workspace-projects-list {
   gap: 0;
   border-top: 1px solid rgba($text-navy, 0.08);
-  border-bottom: 1px solid rgba($text-navy, 0.08);
 }
 
 .workspace-projects-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 1.6rem 1.2rem;
+  gap: 25px 25px;
 }
 
 .workspace-projects-empty-state {

From e6613c836941c719562fe1546a5e0a6fc63109fb Mon Sep 17 00:00:00 2001
From: Faiz <faiz@Faizs-MacBook-Pro.local>
Date: Wed, 29 Jul 2026 00:24:49 +0530
Subject: [PATCH 2/4] Project details page - pixel perfection

---
 assets/scss/main.scss                         |   4 +-
 .../ContributionsTab.vue                      |  19 ++--
 .../RichTextContent.vue                       |   7 +-
 .../SelectedTaskBar.vue                       |  11 +-
 .../workspace-project-details/TasksTab.vue    |  25 +++--
 .../[id]/projects/[projectId]/index.vue       | 105 +++++++++---------
 6 files changed, 87 insertions(+), 84 deletions(-)

diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 68abb01..ec351a9 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -244,8 +244,8 @@ label > .form-select:first-child {
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  padding: 0.625rem 0.9rem;
-  color: $secondary;
+  padding: 5px 10px;
+  color: $text-secondary;
   font-size: 1rem;
   line-height: 1.2;
   text-align: left;
diff --git a/components/workspace-project-details/ContributionsTab.vue b/components/workspace-project-details/ContributionsTab.vue
index bcf3ee3..0994b24 100644
--- a/components/workspace-project-details/ContributionsTab.vue
+++ b/components/workspace-project-details/ContributionsTab.vue
@@ -89,10 +89,9 @@ const countCards = computed(() => {
 
 .project-detail-contribution-metric,
 .project-detail-contribution-count-card {
-  background: #ffffff;
-  border: 1px solid rgba($text-navy, 0.1);
-  border-radius: 1rem;
-  box-shadow: 0 0.75rem 2rem rgba($text-navy, 0.08);
+    background: #FCFCFF;
+    border: 1px solid #E2E2F5;
+    border-radius: 12px;
 }
 
 .project-detail-contribution-metric {
@@ -114,9 +113,7 @@ const countCards = computed(() => {
 
 .project-detail-contribution-copy h3,
 .project-detail-contribution-count-card h3 {
-  margin: 0;
-  color: #1a1e3d;
-  font-family: var(--secondary-font-family);
+  color: $text-secondary;
 }
 
 .project-detail-contribution-copy h3 {
@@ -126,8 +123,8 @@ const countCards = computed(() => {
 
 .project-detail-contribution-copy p,
 .project-detail-contribution-count-card p {
-  margin: 0.2rem 0 0;
-  color: #5a607b;
+  margin: 10px 0 0;
+  color: $text-navy;
 }
 
 .project-detail-contribution-copy p,
@@ -142,8 +139,8 @@ const countCards = computed(() => {
 }
 
 .project-detail-contribution-count-card h3 {
-  font-size: 0.98rem;
-  font-weight: 500;
+  font-size: 16px;
+  font-weight: 600;
 }
 
 .project-detail-contribution-summary-card {
diff --git a/components/workspace-project-details/RichTextContent.vue b/components/workspace-project-details/RichTextContent.vue
index 094c575..be4c0e7 100644
--- a/components/workspace-project-details/RichTextContent.vue
+++ b/components/workspace-project-details/RichTextContent.vue
@@ -34,10 +34,9 @@ const safeHtml = computed(() =>
 
 .project-detail-rich-text {
   overflow-x: auto;
-  color: #5a607b;
-  font-family: var(--primary-font-family);
-  font-size: 1.1rem;
-  line-height: 1.9;
+  color: $text-navy;
+  font-size: 16px;
+  line-height: 26px;
 }
 
 .project-detail-rich-text:deep(h3) {
diff --git a/components/workspace-project-details/SelectedTaskBar.vue b/components/workspace-project-details/SelectedTaskBar.vue
index 851db27..f2a1174 100644
--- a/components/workspace-project-details/SelectedTaskBar.vue
+++ b/components/workspace-project-details/SelectedTaskBar.vue
@@ -76,7 +76,7 @@ defineEmits<{
 @import "~/assets/scss/theme.scss";
 
 .project-detail-task-action-bar {
-  min-height: 6.6rem;
+  min-height: 90px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -124,8 +124,9 @@ defineEmits<{
 
 .project-detail-task-action-copy span,
 .project-detail-task-action-status span {
-  color: #707796;
-  font-size: 0.95rem;
+  color: $text-secondary;
+  font-size: 14px;
+  font-weight: 500;
 }
 
 .project-detail-task-action-copy strong,
@@ -133,8 +134,8 @@ defineEmits<{
   display: inline-flex;
   align-items: center;
   gap: 0.55rem;
-  color: #1a1e3d;
-  font-size: 1.1rem;
+  color: $text-navy;
+  font-size: 1rem;
   font-weight: 700;
 }
 
diff --git a/components/workspace-project-details/TasksTab.vue b/components/workspace-project-details/TasksTab.vue
index e1040c4..31731f7 100644
--- a/components/workspace-project-details/TasksTab.vue
+++ b/components/workspace-project-details/TasksTab.vue
@@ -317,11 +317,7 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
 @import "~/assets/scss/theme.scss";
 
 .project-detail-card {
-  padding: 1.5rem;
   background: #ffffff;
-  border: 1px solid rgba($text-navy, 0.1);
-  border-radius: 1rem;
-  box-shadow: 0 0.75rem 2rem rgba($text-navy, 0.08);
 }
 
 .project-detail-task-card {
@@ -334,6 +330,7 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
   gap: 0.85rem;
   align-items: end;
   margin-bottom: 1rem;
+  margin-top: -10px;
 }
 
 .project-detail-task-search {
@@ -341,8 +338,7 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
 }
 
 .project-detail-task-search .form-control {
-  min-height: 2.85rem;
-  padding-right: 2.9rem;
+  border-radius: 6px;
 }
 
 .project-detail-task-search-icon {
@@ -366,7 +362,7 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
 
 .project-detail-card :deep(.tdei-select-toggle),
 .project-detail-card :deep(.tdei-select-menu) {
-  border-radius: 0.75rem;
+  border-radius: 6px;
 }
 
 .project-detail-task-list-wrap {
@@ -374,7 +370,7 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
   display: grid;
   gap: 0;
   border: 1px solid rgba($text-navy, 0.08);
-  border-radius: 0.85rem;
+  border-radius: 10px;
   overflow: visible;
 }
 
@@ -391,6 +387,7 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
   font-size: 0.88rem;
   font-weight: 700;
   background: #f7f8fc;
+  border-radius: 10px 10px 4px 4px;
 }
 
 .project-detail-task-list {
@@ -407,6 +404,10 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
   border-top: 1px solid rgba($text-navy, 0.08);
 }
 
+.project-detail-task-item:nth-last-child(1) {
+  border-radius: 0px 0px 10px 10px;
+}
+
 .project-detail-task-item-selected {
   background: rgba(214, 233, 250, 0.42);
 }
@@ -447,8 +448,10 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
-  color: #37405d;
+  color: $text-navy;
   line-height: 1.35;
+  font-weight: 500;
+  font-size: 15px;
 }
 
 .project-detail-task-status-swatch {
@@ -476,9 +479,11 @@ function formatTaskStatus(task: WorkspaceProjectTaskListItem) {
 
 .project-detail-task-value {
   display: inline-block;
-  color: #37405d;
+  color: $text-navy;
   line-height: 1.35;
   word-break: break-word;
+  font-weight: 500;
+  font-size: 15px;
 }
 
 .project-detail-task-mobile-label {
diff --git a/pages/workspace/[id]/projects/[projectId]/index.vue b/pages/workspace/[id]/projects/[projectId]/index.vue
index d23af61..6664e8d 100644
--- a/pages/workspace/[id]/projects/[projectId]/index.vue
+++ b/pages/workspace/[id]/projects/[projectId]/index.vue
@@ -1076,8 +1076,7 @@ function escapeHtml(value: string) {
   display: flex;
   flex-direction: column;
   height: calc(100vh - #{$navbar-height});
-  padding-top: 1rem !important;
-  padding-bottom: 1rem !important;
+  padding: 0px 0px !important;
   overflow: hidden;
 }
 
@@ -1096,7 +1095,7 @@ function escapeHtml(value: string) {
   min-height: 0;
   background: #ffffff;
   border: 1px solid rgba($text-navy, 0.12);
-  border-radius: 1rem;
+  border-radius: 0px;
   overflow: hidden;
 }
 
@@ -1116,9 +1115,7 @@ function escapeHtml(value: string) {
 
 .project-detail-hero {
   padding: 2.2rem 2.5rem 2rem;
-  background:
-    radial-gradient(circle at top left, rgba(244, 240, 251, 0.98), rgba(244, 240, 251, 0.7) 44%, rgba(244, 240, 251, 0.28) 100%),
-    linear-gradient(180deg, #faf8fe 0%, #f7f3fc 100%);
+  background: transparent linear-gradient(283deg, #EEEAFF 0%, #F9F4FF 100%) 0% 0% no-repeat padding-box;
   border-bottom: 1px solid rgba($text-navy, 0.08);
 }
 
@@ -1127,8 +1124,9 @@ function escapeHtml(value: string) {
   flex-wrap: wrap;
   gap: 0.55rem;
   margin-bottom: 1.25rem;
-  color: #757d98;
-  font-size: 1rem;
+  color: #5A607B;
+  font-size: 14px;
+  font-weight: 500;
 }
 
 .project-detail-breadcrumbs a {
@@ -1143,12 +1141,11 @@ function escapeHtml(value: string) {
 .project-detail-title {
   max-width: 44rem;
   margin: 0;
-  color: #1a1e3d;
-  font-family: var(--secondary-font-family);
-  font-size: clamp(1rem, 2vw, 2rem);
+  color: $text-navy;
+  font-size: 26px;
   font-weight: 600;
-  line-height: 1.18;
-  letter-spacing: -0.03em;
+  line-height: 1.4;
+  // letter-spacing: -0.03em;
 }
 
 .project-detail-title-row {
@@ -1166,15 +1163,15 @@ function escapeHtml(value: string) {
 }
 
 .project-detail-edit-button {
-  width: 3rem;
-  height: 3rem;
+  width: 42px;
+  height: 42px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: #4d158d;
-  background: rgba(255, 255, 255, 0.78);
+  background: #f1eeff;
   border: 1px solid rgba(77, 21, 141, 0.28);
-  border-radius: 0.75rem;
+  border-radius: 8px;
   box-shadow: 0 0.4rem 1rem rgba(77, 21, 141, 0.08);
 }
 
@@ -1190,16 +1187,15 @@ function escapeHtml(value: string) {
 }
 
 .project-detail-activate-button {
-  min-width: 10.5rem;
-  min-height: 2.85rem;
-  padding-inline: 1.15rem;
-  flex-shrink: 0;
-  color: #ffffff;
-  font-size: 0.98rem;
-  font-weight: 700;
-  background: #4d158d;
-  border: 1px solid #4d158d;
-  border-radius: 0.6rem;
+    height: 42px;
+    padding: 0px 15px;
+    flex-shrink: 0;
+    color: #ffffff;
+    font-size: 0.98rem;
+    font-weight: 600;
+    background: #32006e;
+    border: 1px solid #32006e;
+    border-radius: 8px;
 }
 
 .project-detail-activate-button:hover:not(:disabled),
@@ -1219,19 +1215,22 @@ function escapeHtml(value: string) {
   justify-content: space-between;
   gap: 1rem;
   margin-top: 2.3rem;
-  color: #5f647a;
-  font-size: 1.1rem;
+  color: $text-secondary;
+  font-size: 14px;
+  font-weight: 500;
 }
 
 .project-detail-progress-copy strong {
-  color: #5f647a;
+  color: $text-secondary;
   font-weight: 500;
 }
 
 .project-detail-progress-bar {
-  height: 0.45rem;
+  height: 10px;
   margin-top: 0.55rem;
-  background: #e4e7f5;
+  background: #fff;
+  border: 1px solid #D9DDF0;
+  border-radius: 20px;
 }
 
 .project-detail-progress-bar .progress-bar {
@@ -1250,13 +1249,13 @@ function escapeHtml(value: string) {
 .project-detail-tab-link {
   position: relative;
   padding-bottom: 1rem;
-  color: #5a607b;
-  font-size: 1.1rem;
+  color: $text-secondary;
+  font-size: 1rem;
   text-decoration: none;
 }
 
 .project-detail-tab-link-active {
-  color: #1a1e3d;
+  color: $text-navy;
   font-weight: 700;
 }
 
@@ -1278,13 +1277,16 @@ function escapeHtml(value: string) {
 .project-detail-card,
 .project-detail-copy-card {
   background: #ffffff;
-  border: 1px solid rgba($text-navy, 0.1);
-  border-radius: 1rem;
-  box-shadow: 0 0.75rem 2rem rgba($text-navy, 0.08);
+  // border: 1px solid rgba($text-navy, 0.1);
+  // border-radius: 1rem;
+  // box-shadow: 0 0.75rem 2rem rgba($text-navy, 0.08);
 }
 
 .project-detail-summary-card {
-  padding: 1.55rem;
+    padding: 20px;
+    border: 1px solid #DFE2EF;
+    border-radius: 1rem;
+    margin-bottom: 30px;
 }
 
 .project-detail-summary-grid {
@@ -1294,32 +1296,31 @@ function escapeHtml(value: string) {
 }
 
 .project-detail-summary-item {
-  display: grid;
-  gap: 0.45rem;
+  display: flex;
+  gap: 15px;
 }
 
 .project-detail-summary-item span {
-  color: #1a1e3d;
-  font-size: 1.05rem;
-  font-weight: 700;
+  // color: $text-navy;
+  font-size: 16px;
+  font-weight: 600;
+  min-width: 120px;
 }
 
 .project-detail-summary-item strong {
-  color: #5a607b;
-  font-size: 1.05rem;
+  color: $text-secondary;
+  font-size: 16px;
   font-weight: 400;
 }
 
 .project-detail-copy-card {
-  margin-top: 1.35rem;
-  padding: 1.75rem;
+  margin-top: 0px;
 }
 
 .project-detail-copy-card h2 {
-  margin: 0 0 1.35rem;
-  color: #1a1e3d;
-  font-family: var(--secondary-font-family);
-  font-size: 1.4rem;
+  margin-bottom: 12px;
+  color: $text-navy;
+  font-size: 16px;
   font-weight: 700;
   line-height: 1.2;
 }

From 8f0054190d02541d72fda431651c5184a18682a5 Mon Sep 17 00:00:00 2001
From: Faiz <faiz@Faizs-MacBook-Pro.local>
Date: Wed, 29 Jul 2026 12:29:47 +0530
Subject: [PATCH 3/4] Project creation

---
 .../steps/AreaOfInterestStep.vue              |  8 ++---
 .../steps/ProjectDetailsStep.vue              |  1 -
 .../project-wizard/steps/ReviewStep.vue       | 21 ++++++------
 .../project-wizard/steps/SettingsStep.vue     |  3 +-
 pages/workspace/[id]/projects/create.vue      | 32 +++++++++----------
 5 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/components/project-wizard/steps/AreaOfInterestStep.vue b/components/project-wizard/steps/AreaOfInterestStep.vue
index b3e7bfc..c8df468 100644
--- a/components/project-wizard/steps/AreaOfInterestStep.vue
+++ b/components/project-wizard/steps/AreaOfInterestStep.vue
@@ -43,8 +43,9 @@
       <div class="project-wizard-area-captured-copy">
         <app-icon
           variant="check_circle"
-          size="18"
+          size="20"
           no-margin
+          class="mt-1"
         />
         <div>
           <strong>Area of interest captured</strong>
@@ -243,7 +244,6 @@ function onFileDrop(event: DragEvent) {
 .project-wizard-step-title {
   margin: 0;
   color: $text-navy;
-  font-family: var(--secondary-font-family);
   font-size: 1rem;
   font-weight: 700;
   line-height: 1.15;
@@ -331,8 +331,7 @@ function onFileDrop(event: DragEvent) {
 
 .project-wizard-area-captured {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  flex-direction: column;
   gap: 1rem;
   padding: 0.95rem 1rem;
   background: #f3fcf8;
@@ -374,6 +373,7 @@ function onFileDrop(event: DragEvent) {
   color: $text-navy;
   background: #ffffff;
   border: 1px solid rgba($text-navy, 0.14);
+  width: fit-content;
 }
 
 .project-wizard-area-dropzone-shell {
diff --git a/components/project-wizard/steps/ProjectDetailsStep.vue b/components/project-wizard/steps/ProjectDetailsStep.vue
index d3969b0..6cf2e5b 100644
--- a/components/project-wizard/steps/ProjectDetailsStep.vue
+++ b/components/project-wizard/steps/ProjectDetailsStep.vue
@@ -143,7 +143,6 @@ function findField(fieldId: ProjectWizardDetailsFieldId): ProjectWizardDetailsFi
 .project-wizard-step-title {
   margin: 0;
   color: $text-navy;
-  font-family: var(--secondary-font-family);
   font-size: 1rem;
   font-weight: 700;
   line-height: 1.15;
diff --git a/components/project-wizard/steps/ReviewStep.vue b/components/project-wizard/steps/ReviewStep.vue
index e93d2fe..15d8e18 100644
--- a/components/project-wizard/steps/ReviewStep.vue
+++ b/components/project-wizard/steps/ReviewStep.vue
@@ -121,7 +121,6 @@ function formatRole(role: WorkspaceRole) {
 .project-wizard-step-title {
   margin: 0;
   color: $text-navy;
-  font-family: var(--secondary-font-family);
   font-size: 1rem;
   font-weight: 700;
   line-height: 1.15;
@@ -137,7 +136,7 @@ function formatRole(role: WorkspaceRole) {
 
 .project-wizard-review-group {
   display: grid;
-  gap: 1.25rem;
+  gap: 25px;
 }
 
 .project-wizard-review-item {
@@ -148,13 +147,12 @@ function formatRole(role: WorkspaceRole) {
 .project-wizard-review-item h3 {
   margin: 0;
   text-align: left;
-  font-family: Lato, var(--primary-font-family), sans-serif;
-  font-size: 1.125rem;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 600;
   line-height: 1.375rem;
   letter-spacing: 0;
-  color: #1a1e3d;
+  color: $text-navy;
   opacity: 1;
 }
 
@@ -162,12 +160,12 @@ function formatRole(role: WorkspaceRole) {
   margin: 0;
   text-align: left;
   font-family: Lato, var(--primary-font-family), sans-serif;
-  font-size: 1.125rem;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: 1.625rem;
   letter-spacing: 0;
-  color: #5a607b;
+  color: $text-secondary;
   opacity: 1;
 }
 
@@ -186,6 +184,10 @@ function formatRole(role: WorkspaceRole) {
   opacity: 1;
 }
 
+.project-wizard-review-status span {
+  font-size: 1rem;
+}
+
 .project-wizard-review-validator-list {
   display: grid;
   gap: 0.55rem;
@@ -227,9 +229,8 @@ function formatRole(role: WorkspaceRole) {
 }
 
 .project-wizard-review-instructions {
-  color: #5a607b;
-  font-family: Lato, var(--primary-font-family), sans-serif;
-  font-size: 1.125rem;
+  color: $text-secondary;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: 1.625rem;
diff --git a/components/project-wizard/steps/SettingsStep.vue b/components/project-wizard/steps/SettingsStep.vue
index 4bfc209..2fd21ab 100644
--- a/components/project-wizard/steps/SettingsStep.vue
+++ b/components/project-wizard/steps/SettingsStep.vue
@@ -135,7 +135,7 @@ function onReviewRequiredChange(event: Event) {
 
 .project-wizard-step-settings {
   display: grid;
-  gap: 1.4rem;
+  gap: 30px;
 }
 
 .project-wizard-step-header,
@@ -147,7 +147,6 @@ function onReviewRequiredChange(event: Event) {
 .project-wizard-step-title {
   margin: 0;
   color: $text-navy;
-  font-family: var(--secondary-font-family);
   font-size: 1rem;
   font-weight: 700;
   line-height: 1.15;
diff --git a/pages/workspace/[id]/projects/create.vue b/pages/workspace/[id]/projects/create.vue
index d880c70..506604c 100644
--- a/pages/workspace/[id]/projects/create.vue
+++ b/pages/workspace/[id]/projects/create.vue
@@ -680,21 +680,23 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) {
 @import "~/assets/scss/theme.scss";
 
 .project-create-page {
-  height: calc(100vh - #{$navbar-height});
-  padding-top: 1rem !important;
-  padding-bottom: 1rem !important;
+  height: 100%;
+  padding: 0px 0px;
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
   overflow: hidden;
 }
 
 .project-create-shell {
-  position: relative;
+  position: absolute;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
   height: 100%;
-  background: #a9d3e6;
-  border: 1px solid rgba($text-navy, 0.12);
-  box-shadow: $box-shadow;
+  background: #ffffff;
   overflow: hidden;
+  width: 100%;
+  top: 0px;
+  z-index: 9999;
 }
 
 .project-create-header {
@@ -704,9 +706,9 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) {
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
-  padding: 1.2rem 1.5rem;
+  padding: 15px 40px;
   background-color: #fff;
-  border-bottom: 1px solid rgba($text-navy, 0.1);
+  box-shadow: 0px 3px 6px #00000029;
 }
 
 .project-create-header-copy {
@@ -719,9 +721,8 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) {
   margin: 0;
   padding-right: 1.45rem;
   color: $text-navy;
-  font-family: var(--secondary-font-family);
-  font-size: 1.15rem;
-  font-weight: 700;
+  font-size: 22px;
+  font-weight: 600;
   line-height: 1.2;
   border-right: 1px solid rgba($text-navy, 0.15);
 }
@@ -733,13 +734,12 @@ function formatProjectStatus(status: ProjectWizardCreateResult['status']) {
 }
 
 .project-create-workspace-label {
-  color: rgba($secondary, 0.95);
-  font-size: 0.95rem;
+  color: $text-secondary;
+  font-size: 14px;
 }
 
 .project-create-workspace-copy strong {
-  font-family: var(--secondary-font-family);
-  font-size: 0.95rem;
+  font-size: 16px;
   font-weight: 600;
 }
 

From 64859facb86b6ffe531c2afe0e4ac37ad57e396d Mon Sep 17 00:00:00 2001
From: Faiz <faiz@Faizs-MacBook-Pro.local>
Date: Wed, 29 Jul 2026 12:42:54 +0530
Subject: [PATCH 4/4] Removed alt text for icons

---
 pages/workspace/[id]/projects/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/workspace/[id]/projects/index.vue b/pages/workspace/[id]/projects/index.vue
index a4bd284..ca1d27c 100644
--- a/pages/workspace/[id]/projects/index.vue
+++ b/pages/workspace/[id]/projects/index.vue
@@ -73,7 +73,7 @@
           >
             <img
               :src="option.icon"
-              :alt="option.label"
+              alt=""
               class="view-icon"
             />
             <span class="visually-hidden">{{ option.label }}</span>