diff --git a/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss b/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss
index 1854ab44f0..b3dd8f6f19 100644
--- a/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss
+++ b/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss
@@ -276,3 +276,68 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
     box-shadow: 0 2px 8px rgba($lum-teal, 0.35) !important;
   }
 }
+
+// ── Code / Visual editor toggle ────────────────────────────────────────────
+// Replace the pill shape with rounded-square and add a sliding indicator that
+// moves under the active tab instead of a simple background-color crossfade.
+
+[data-lumiere='true'] .toggle-switch {
+  border-radius: 10px;
+  background-color: rgba($lum-teal, 0.07);
+  border: 1px solid rgba($lum-teal, 0.18);
+  padding: 3px;
+  position: relative;
+
+  // Sliding indicator — absolutely positioned under the active label
+  &::before {
+    content: '';
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    // Each tab gets exactly half the inner area (enforced by flex: 1 below)
+    width: calc(50% - 3px);
+    height: calc(100% - 6px);
+    background: $lum-teal;
+    border-radius: 7px;
+    box-shadow: 0 2px 6px rgba($lum-teal, 0.35);
+    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  // Slide the indicator right when Visual is active
+  &:has(input[value='rich-text']:checked)::before {
+    transform: translateX(100%);
+  }
+
+  // Force Code label and Visual span wrapper to equal width
+  > label.toggle-switch-label {
+    flex: 1;
+  }
+
+  > span {
+    flex: 1;
+    display: flex;
+  }
+}
+
+[data-lumiere='true'] .toggle-switch-label {
+  flex: 1;
+  border-radius: 7px;
+  position: relative;
+  z-index: 1;
+  color: $lum-teal;
+  transition: color 0.18s ease;
+}
+
+// Active tab: white text over the teal slider; remove built-in bg/shadow
+[data-lumiere='true'] .toggle-switch-input:checked + .toggle-switch-label {
+  color: #fff;
+  background-color: transparent !important;
+  box-shadow: none !important;
+}
+
+// Disabled tab (Visual locked on non-.tex files)
+[data-lumiere='true'] .toggle-switch-input:disabled + .toggle-switch-label {
+  color: rgba($lum-teal, 0.35);
+}