diff --git a/services/web/app/views/user/login.pug b/services/web/app/views/user/login.pug
index 8934ea62a3..4cf7a0bc5e 100644
--- a/services/web/app/views/user/login.pug
+++ b/services/web/app/views/user/login.pug
@@ -5,7 +5,7 @@ block vars
 	- var suppressNavbar = true
 
 block content
-	main#main-content.content
+	main#main-content.content.login-page
 		.container
 			.row
 				.col-12
@@ -16,7 +16,7 @@ block content
 							style='width:100%;max-width:480px;height:auto'
 						)
 			.row
-				.col-lg-6.offset-lg-3.col-xl-4.offset-xl-4
+				.login-lumiere-card.col-lg-6.offset-lg-3.col-xl-4.offset-xl-4
 					.page-header
 						if login_support_title
 							h1 !{login_support_title}
diff --git a/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss b/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss
index 198b9a775a..ab6d7d979b 100644
--- a/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss
+++ b/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss
@@ -173,6 +173,73 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
   }
 }
 
+// ── Settings modal ────────────────────────────────────────────────────────
+// :has() scopes to only this modal so other editor modals are unaffected.
+
+[data-lumiere='true'] .modal-content:has(.ide-settings-modal-body) {
+  border: 1px solid $lum-border;
+  border-radius: 14px;
+  overflow: hidden;
+  box-shadow: 0 8px 32px rgba($lum-teal, 0.14);
+
+  .modal-header {
+    position: relative;
+    background: linear-gradient(180deg, #e8f5f2 0%, #f8fffe 100%);
+    border-bottom: 1px solid $lum-border;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: linear-gradient(90deg, $lum-teal 0%, $lum-blue 100%);
+    }
+  }
+
+  .modal-title {
+    color: #1a5c52;
+    font-weight: 600;
+  }
+}
+
+[data-lumiere='true'] .ide-settings-tab-nav.nav {
+  background: linear-gradient(180deg, rgba($lum-teal, 0.04) 0%, transparent 100%);
+  border-right-color: $lum-border;
+}
+
+[data-lumiere='true'] .ide-settings-tab-link {
+  color: #1a2e3b;
+
+  &:visited { color: #1a2e3b; }
+
+  &.active {
+    color: $lum-teal;
+    background-color: rgba($lum-teal, 0.12);
+    font-weight: 600;
+  }
+
+  &:hover:not(.active) {
+    background-color: rgba($lum-teal, 0.07);
+    color: darken($lum-teal, 5%);
+    text-decoration: none;
+  }
+}
+
+[data-lumiere='true'] .ide-settings-section-title {
+  color: $lum-teal;
+  border-bottom-color: $lum-border;
+}
+
+[data-lumiere='true'] .ide-settings-tab-content {
+  .form-select:focus,
+  .form-control:focus {
+    border-color: rgba($lum-teal, 0.5);
+    box-shadow: 0 0 0 0.2rem rgba($lum-teal, 0.18);
+  }
+}
+
 // ── Compile button — teal gradient ────────────────────────────────────────
 // .compile-button-group wraps the Recompile button in the toolbar actions
 
diff --git a/services/web/frontend/stylesheets/pages/login-register.scss b/services/web/frontend/stylesheets/pages/login-register.scss
index e1ca000eef..3619c8eb9c 100644
--- a/services/web/frontend/stylesheets/pages/login-register.scss
+++ b/services/web/frontend/stylesheets/pages/login-register.scss
@@ -30,6 +30,100 @@
   }
 }
 
+// ── Lumière Login Page ───────────────────────────────────────────────────────
+// .login-page is set on main#main-content in login.pug; always applied
+// (login users haven't set a theme yet).
+
+.login-page {
+  background-image:
+    $lum-noise,
+    radial-gradient(ellipse 80% 50% at 20% 10%, rgba(42, 157, 143, 0.22) 0%, transparent 55%),
+    radial-gradient(ellipse 70% 60% at 85% 90%, rgba(61, 126, 191, 0.15) 0%, transparent 55%);
+  background-size: 200px 200px, cover, cover;
+  background-repeat: repeat, no-repeat, no-repeat;
+  background-color: #f0faf8;
+  min-height: 100vh;
+}
+
+.login-lumiere-card {
+  padding: 0 !important;
+  background: #fff;
+  border: 1px solid $lum-border;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow:
+    0 6px 28px rgba(42, 157, 143, 0.12),
+    0 1px 4px rgba(0, 0, 0, 0.06);
+  margin-top: 0.5rem;
+  margin-bottom: 2rem;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(90deg, $lum-teal 0%, $lum-blue 100%);
+    pointer-events: none;
+  }
+
+  .page-header {
+    padding: 1.75rem 1.5rem 1.25rem;
+    border-bottom-color: $lum-border;
+    margin-top: 0;
+
+    h1 {
+      font-size: 1.4rem;
+      font-weight: 700;
+      color: #1a5c52;
+      margin: 0;
+    }
+  }
+
+  form {
+    padding: 1.25rem 1.5rem 1.5rem;
+  }
+
+  label {
+    color: #1a5c52;
+    font-weight: 500;
+    font-size: 0.9rem;
+  }
+
+  .form-control:focus {
+    border-color: rgba(42, 157, 143, 0.5);
+    box-shadow: 0 0 0 0.2rem rgba(42, 157, 143, 0.18);
+  }
+
+  .btn-primary {
+    background: linear-gradient(135deg, $lum-teal 0%, darken($lum-teal, 8%) 100%);
+    border-color: darken($lum-teal, 10%);
+    border-radius: 8px;
+    font-weight: 600;
+    box-shadow: 0 2px 8px rgba(42, 157, 143, 0.3);
+    transition: all 0.15s ease;
+
+    &:hover,
+    &:focus {
+      background: linear-gradient(135deg, lighten($lum-teal, 4%) 0%, $lum-teal 100%);
+      box-shadow: 0 4px 14px rgba(42, 157, 143, 0.4);
+    }
+  }
+
+  a.float-end {
+    color: $lum-teal;
+    font-size: 0.875rem;
+    text-decoration: none;
+
+    &:hover {
+      color: darken($lum-teal, 10%);
+      text-decoration: underline;
+    }
+  }
+}
+
 .form-group-password {
   display: flex;
   position: relative;