diff --git a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
index 1c8a423c7c..bc3a9cfd02 100644
--- a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
+++ b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
@@ -1,18 +1,258 @@
-// Verso Lumière — card-based project dashboard theme.
+// Verso Lumière — modern card-based project dashboard theme.
 //
-// The outer element carries both project-ds-nav-page (for sidebar/navbar CSS)
-// and project-list-lumiere (our hook). We only override what differs from the
-// classic light theme: the content area background and the card grid layout.
+// The outer element carries both project-ds-nav-page + website-redesign
+// (for sidebar/navbar CSS) and project-list-lumiere (our styling hook).
+// Everything here is additive or override-only — zero impact on Classic themes.
+
+// ── Brand colours ──────────────────────────────────────────────────────────
+$lum-teal:        #2a9d8f;
+$lum-teal-dark:   #21867a;
+$lum-blue:        #3d7ebf;
+$lum-text:        #1a2e3b;
+$lum-text-sub:    #64748b;
+$lum-text-muted:  #94a3b8;
+$lum-bg:          #f0f4f8;
+$lum-border:      #e2eaf2;
 
 .project-list-lumiere {
-  // ── Content-area background ─────────────────────────────────────────────
-  // The classic theme uses --ds-nav-content-bg-secondary (a light grey).
-  // Lumière uses a cooler, airier blue-grey.
-  .project-ds-nav-content {
-    background-color: #f0f4f8;
+
+  // ══════════════════════════════════════════════════════════════════════════
+  // NAVBAR
+  // ══════════════════════════════════════════════════════════════════════════
+
+  .navbar-default {
+    // Lift the hard border; replace with soft shadow
+    border-bottom: none !important;
+    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
+    background-color: #ffffff !important;
+
+    // Teal-to-blue gradient accent stripe at the very top
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: linear-gradient(90deg, $lum-teal 0%, $lum-blue 100%);
+      z-index: 10;
+    }
+
+    // Nav link pill hover
+    .navbar-nav > li > .nav-link,
+    .navbar-nav > li > .dropdown-toggle {
+      border-color: transparent !important;
+      border-radius: 20px;
+      transition:
+        background-color 0.15s ease,
+        color 0.15s ease;
+
+      &:hover,
+      &:focus,
+      &.show {
+        background-color: rgba($lum-teal, 0.08) !important;
+        color: $lum-teal !important;
+        border-color: transparent !important;
+      }
+    }
+
+    // The instance title (e.g. "Verso V0.185 Alpha")
+    .navbar-title {
+      color: $lum-text !important;
+      font-weight: 600;
+    }
   }
 
-  // ── Header ──────────────────────────────────────────────────────────────
+  // ══════════════════════════════════════════════════════════════════════════
+  // SIDEBAR — shell
+  // ══════════════════════════════════════════════════════════════════════════
+
+  .project-list-sidebar-wrapper-react {
+    background: #ffffff !important;
+    border-right: 1px solid $lum-border;
+  }
+
+  // ══════════════════════════════════════════════════════════════════════════
+  // SIDEBAR — New Project button
+  // ══════════════════════════════════════════════════════════════════════════
+
+  .new-project-dropdown {
+    padding-bottom: 0.75rem;
+
+    .new-project-button.btn {
+      width: 100%;
+      background: linear-gradient(135deg, $lum-teal 0%, $lum-blue 100%) !important;
+      border: none !important;
+      color: #ffffff !important;
+      font-weight: 600;
+      border-radius: 10px !important;
+      box-shadow: 0 2px 8px rgba($lum-teal, 0.25);
+      transition:
+        box-shadow 0.18s ease,
+        filter 0.18s ease;
+
+      &:hover,
+      &:focus {
+        filter: brightness(1.08);
+        box-shadow: 0 4px 14px rgba($lum-teal, 0.38) !important;
+        color: #ffffff !important;
+      }
+
+      // Caret color
+      &::after {
+        border-top-color: rgba(255, 255, 255, 0.8);
+      }
+    }
+  }
+
+  // ══════════════════════════════════════════════════════════════════════════
+  // SIDEBAR — filter list
+  // ══════════════════════════════════════════════════════════════════════════
+
+  .project-list-wrapper ul.project-list-filters {
+    > li > button {
+      border-radius: 8px;
+      padding: 0.45rem 0.75rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: $lum-text-sub;
+      transition:
+        background-color 0.15s ease,
+        color 0.15s ease;
+    }
+
+    > li:hover button {
+      background-color: rgba($lum-teal, 0.07) !important;
+      color: $lum-teal;
+    }
+
+    > li.active button {
+      background: $lum-teal !important;
+      color: #ffffff !important;
+      font-weight: 600;
+    }
+
+    // Tags section header
+    .dropdown-header {
+      font-size: 0.7rem;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: $lum-teal !important;
+      padding: 0.85rem 0.75rem 0.35rem;
+    }
+
+    // Individual tag items
+    > li.tag {
+      button.tag-name {
+        border-radius: 8px;
+        font-size: 0.83rem;
+        color: $lum-text-sub;
+        display: flex;
+        align-items: center;
+        gap: 0.45rem;
+
+        &:hover {
+          color: $lum-teal;
+        }
+      }
+
+      &.active button.tag-name {
+        color: #ffffff !important;
+
+        // The colored dot inherits white from the active button — keep it visible
+        .badge {
+          opacity: 0.9;
+        }
+      }
+
+      // Overflow "..." menu button
+      .tag-menu button.dropdown-toggle {
+        border-radius: 50%;
+        transition: background-color 0.15s ease;
+
+        &:hover,
+        &:active,
+        &[aria-expanded='true'] {
+          background-color: rgba($lum-teal, 0.1) !important;
+          color: $lum-teal;
+        }
+      }
+    }
+
+    hr {
+      border-color: $lum-border;
+    }
+  }
+
+  // ══════════════════════════════════════════════════════════════════════════
+  // SIDEBAR — lower section (help / account icons + Verso logo)
+  // ══════════════════════════════════════════════════════════════════════════
+
+  .ds-nav-sidebar-lower {
+    border-top-color: $lum-border !important;
+    padding-top: 0.75rem;
+  }
+
+  .ds-nav-icon-dropdown {
+    .dropdown-toggle {
+      border-radius: 50% !important;
+      color: $lum-text-sub !important;
+      transition:
+        background-color 0.15s ease,
+        color 0.15s ease,
+        box-shadow 0.15s ease;
+
+      &:hover {
+        background-color: rgba($lum-teal, 0.09) !important;
+        color: $lum-teal !important;
+        box-shadow: 0 0 0 3px rgba($lum-teal, 0.12);
+      }
+
+      &.show {
+        background-color: rgba($lum-teal, 0.15) !important;
+        color: $lum-teal !important;
+        box-shadow: 0 0 0 3px rgba($lum-teal, 0.18);
+      }
+    }
+  }
+
+  // Verso wordmark at the very bottom — subtle separator + gentle fade
+  .ds-nav-verso-logo {
+    border-top: 1px solid $lum-border;
+    padding-top: 0.6rem;
+    margin-top: 0.25rem;
+    opacity: 0.7;
+    transition: opacity 0.15s ease;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  // Theme toggle: teal selected indicator
+  .theme-toggle-radios {
+    background-color: rgba($lum-teal, 0.07);
+  }
+
+  .theme-toggle-radio input:checked + label {
+    background-color: $lum-teal !important;
+    color: #ffffff;
+
+    .material-symbols {
+      color: #ffffff;
+    }
+  }
+
+  // ══════════════════════════════════════════════════════════════════════════
+  // MAIN CONTENT AREA
+  // ══════════════════════════════════════════════════════════════════════════
+
+  .project-ds-nav-content {
+    background-color: $lum-bg;
+  }
+
+  // ── Page header ────────────────────────────────────────────────────────────
 
   .lumiere-header {
     display: flex;
@@ -31,12 +271,11 @@
     flex-wrap: wrap;
   }
 
-  // Override ProjectListTitle styling for the Lumière serif look
   .lumiere-title {
     font-family: Georgia, 'Times New Roman', 'DejaVu Serif', serif !important;
     font-size: 2rem !important;
     font-weight: 700 !important;
-    color: #1a2e3b !important;
+    color: $lum-text !important;
     line-height: 1.15 !important;
     margin: 0 !important;
   }
@@ -44,12 +283,12 @@
   // ── Empty state ─────────────────────────────────────────────────────────
 
   .lumiere-empty {
-    color: #64748b;
+    color: $lum-text-sub;
     font-size: 0.95rem;
     margin-top: 2rem;
   }
 
-  // ── Card grid ───────────────────────────────────────────────────────────
+  // ── Card grid ─────────────────────────────────────────────────────────────
 
   .lumiere-card-grid {
     display: grid;
@@ -58,7 +297,7 @@
     margin-top: 0.5rem;
   }
 
-  // ── Individual card ──────────────────────────────────────────────────────
+  // ── Individual card ───────────────────────────────────────────────────────
 
   .lumiere-card {
     display: flex;
@@ -82,7 +321,7 @@
     }
   }
 
-  // ── Card thumbnail ───────────────────────────────────────────────────────
+  // ── Card thumbnail ────────────────────────────────────────────────────────
 
   .lumiere-card-thumb {
     position: relative;
@@ -92,7 +331,6 @@
     justify-content: center;
     overflow: hidden;
 
-    // Folded corner effect
     &::after {
       content: '';
       position: absolute;
@@ -116,24 +354,23 @@
     user-select: none;
   }
 
-  // Format-specific gradients
   .lumiere-card--latex .lumiere-card-thumb {
-    background: linear-gradient(135deg, #4caf7d 0%, #2a9d8f 100%);
+    background: linear-gradient(135deg, #4caf7d 0%, $lum-teal 100%);
   }
 
   .lumiere-card--typst .lumiere-card-thumb {
-    background: linear-gradient(135deg, #2a9d8f 0%, #3d7ebf 100%);
+    background: linear-gradient(135deg, $lum-teal 0%, $lum-blue 100%);
   }
 
   .lumiere-card--quarto .lumiere-card-thumb {
-    background: linear-gradient(135deg, #7c4dff 0%, #3d7ebf 100%);
+    background: linear-gradient(135deg, #7c4dff 0%, $lum-blue 100%);
   }
 
   .lumiere-card--quarto-slides .lumiere-card-thumb {
     background: linear-gradient(135deg, #e67e22 0%, #e74c3c 100%);
   }
 
-  // ── Card body ────────────────────────────────────────────────────────────
+  // ── Card body ─────────────────────────────────────────────────────────────
 
   .lumiere-card-body {
     display: flex;
@@ -146,7 +383,7 @@
   .lumiere-card-name {
     font-size: 0.875rem;
     font-weight: 600;
-    color: #1a2e3b;
+    color: $lum-text;
     line-height: 1.3;
     display: -webkit-box;
     -webkit-line-clamp: 2;
@@ -163,7 +400,7 @@
 
   .lumiere-card-owner {
     font-size: 0.72rem;
-    color: #64748b;
+    color: $lum-text-sub;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -172,11 +409,11 @@
 
   .lumiere-card-date {
     font-size: 0.72rem;
-    color: #94a3b8;
+    color: $lum-text-muted;
     margin-top: auto;
   }
 
-  // ── Format badges ────────────────────────────────────────────────────────
+  // ── Format badges ─────────────────────────────────────────────────────────
 
   .lumiere-format-badge {
     display: inline-block;
@@ -191,12 +428,12 @@
 
   .lumiere-format-badge--latex {
     background: #e8f5ee;
-    color: #2a9d8f;
+    color: $lum-teal;
   }
 
   .lumiere-format-badge--typst {
     background: #e0f2fe;
-    color: #3d7ebf;
+    color: $lum-blue;
   }
 
   .lumiere-format-badge--quarto,