first commit

2025-04-24 13:11:28 +08:00
commit ff9c54d5e4
5960 changed files with 834111 additions and 0 deletions
--- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/all.scss
@@ -0,0 +1,5 @@
+@import 'mixins';
+@import 'variables';
+@import 'variable-overrides';
+@import 'themes-common-variables';
+@import 'templates-search';
--- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss
@@ -0,0 +1,211 @@
+// Button
+
+@mixin ol-button-size(
+  $font-size,
+  $line-height,
+  $padding-y,
+  $padding-x: var(--spacing-06)
+) {
+  --bs-btn-font-size: #{$font-size};
+  --bs-btn-line-height: #{$line-height};
+  --bs-btn-padding-y: #{$padding-y};
+  --bs-btn-padding-x: #{$padding-x};
+}
+
+@mixin ol-button-variant(
+  $color,
+  $background,
+  $border: $background,
+  $hover-background: $background,
+  $hover-border: $hover-background,
+  $borderless: true
+) {
+  --bs-btn-color: #{$color};
+  --bs-btn-bg: #{$background};
+  --bs-btn-border-color: #{$border};
+  --bs-btn-hover-color: #{$color};
+  --bs-btn-hover-bg: #{$hover-background};
+  --bs-btn-hover-border-color: #{$hover-border};
+  --bs-btn-active-color: #{$color};
+  --bs-btn-active-bg: #{$hover-background};
+  --bs-btn-active-border-color: #{$hover-border};
+  --bs-btn-disabled-color: var(--content-disabled);
+  --bs-btn-disabled-bg: var(--bg-light-disabled);
+  --bs-btn-disabled-border-color: var(--bg-light-disabled);
+
+  @if $borderless {
+    --bs-btn-border-width: 0;
+  }
+
+  // Use the default state colors when in a loading state
+  &[data-ol-loading='true'] {
+    color: var(--bs-btn-color);
+    background-color: var(--bs-btn-bg);
+    border-color: var(--bs-btn-border-color);
+    opacity: 1;
+  }
+}
+
+@mixin action-button {
+  font-size: 0;
+  line-height: 1;
+  border-radius: 50%;
+  color: var(--content-primary);
+  background-color: transparent;
+
+  &:hover,
+  &:active,
+  &[aria-expanded='true'] {
+    background-color: rgb($neutral-90, 0.08);
+  }
+}
+
+@mixin reset-button() {
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  appearance: none;
+}
+
+@mixin modal-lg {
+  max-width: 960px;
+}
+
+@mixin modal-md {
+  max-width: 640px;
+}
+
+@mixin modal-sm {
+  max-width: 480px;
+}
+
+// Toolbar
+@mixin toolbar-sm-height {
+  height: var(--toolbar-small-height);
+}
+
+@mixin toolbar-alt-bg() {
+  background-color: var(--toolbar-alt-bg-color);
+}
+
+@mixin theme($name) {
+  @if index($themes, $name) {
+    [data-theme='#{$name}'] {
+      @content;
+    }
+  } @else {
+    @error 'Theme "#{$name}" is not supported. Supported themes are: #{$themes}.';
+  }
+}
+
+@mixin box-shadow-button-input {
+  box-shadow: 0 0 0 2px var(--blue-30);
+}
+
+@mixin animation($animation) {
+  animation: $animation;
+}
+
+@mixin striped($color: rgba(255, 255, 255, 0.15), $angle: 45deg) {
+  background-image: linear-gradient(
+    $angle,
+    $color 25%,
+    transparent 25%,
+    transparent 50%,
+    $color 50%,
+    $color 75%,
+    transparent 75%,
+    transparent
+  );
+}
+
+@mixin mask-image($gradient) {
+  // mask-image isn't supported without the -webkit prefix on all browsers we support yet
+  -webkit-mask-image: $gradient;
+  mask-image: $gradient;
+}
+
+@mixin premium-background {
+  background-image: var(--premium-gradient);
+}
+
+@mixin premium-text {
+  @include premium-background;
+
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: var(--white); // Fallback
+  background-color: var(--blue-70); // Fallback
+}
+
+@mixin dark-bg {
+  --link-color: var(--link-color-dark);
+  --link-hover-color: var(--link-hover-color-dark);
+  --link-visited-color: var(--link-visited-color-dark);
+}
+
+@mixin triangle($direction, $width, $height, $color) {
+  position: absolute;
+  border-color: transparent;
+  border-style: solid;
+  width: 0;
+  height: 0;
+
+  @if $direction == top {
+    border-width: 0 calc(#{$width} / 2) #{$height} calc(#{$width} / 2);
+    border-bottom-color: $color;
+    border-left-color: transparent;
+    border-right-color: transparent;
+  } @else if $direction == bottom {
+    border-width: #{$height} calc(#{$width} / 2) 0 calc(#{$width} / 2);
+    border-top-color: $color;
+    border-left-color: transparent;
+    border-right-color: transparent;
+  } @else if $direction == right {
+    border-width: calc(#{$height} / 2) 0 calc(#{$height} / 2) #{$width};
+    border-left-color: $color;
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+  } @else if $direction == left {
+    border-width: calc(#{$height} / 2) #{$width} calc(#{$height} / 2) 0;
+    border-right-color: $color;
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+  }
+}
+
+// Form validation states
+
+@mixin form-control-validation($color) {
+  color: $color;
+
+  // Color the label and help text
+  .help-block,
+  .control-label,
+  .radio,
+  .checkbox,
+  .radio-inline,
+  .checkbox-inline,
+  .form-label {
+    color: $color;
+  }
+
+  .form-control {
+    border-color: $color;
+
+    &:focus {
+      border-color: $border-active;
+    }
+  }
+
+  // Optional feedback icon
+  .form-control-feedback {
+    color: $color;
+  }
+}
+
+@mixin input-disabled-styles {
+  background-color: $input-disabled-bg;
+  border-color: $input-disabled-border-color;
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/templates-search.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/templates-search.scss
@@ -0,0 +1 @@
+$templates-search-max-width: 885px;
--- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/themes-common-variables.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/themes-common-variables.scss
@@ -0,0 +1,7 @@
+:root {
+  --editor-border-color: var(--neutral-80);
+}
+
+@include theme('light') {
+  --editor-border-color: var(--neutral-20);
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss
@@ -0,0 +1,284 @@
+// Overrides for Bootstrap 5's default Sass variables
+
+$prefix: bs-;
+
+// Options
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-validation-icons: false;
+$component-active-color: $white;
+
+// Fonts
+$font-family-sans-serif: 'Noto Sans', sans-serif;
+$font-family-serif: 'Merriweather', serif;
+$font-family-monospace: 'DM Mono', monospace;
+$font-size-base: 1rem;
+$font-size-sm: var(--font-size-02);
+$line-height-base: 1.5;
+
+// Components
+// Define common padding and border radius sizes and more.
+
+$focus-ring-width: 2px;
+$focus-ring-opacity: 1;
+$focus-ring-color: $blue-30;
+$focus-ring-blur: 0;
+
+// Buttons
+$btn-font-family: $font-family-sans-serif;
+$btn-font-weight: 600;
+$btn-padding-x: $spacing-06;
+$btn-padding-y: $spacing-02;
+$btn-border-radius: $border-radius-full;
+$btn-border-radius-lg: $border-radius-full;
+$btn-border-radius-sm: $border-radius-full;
+$btn-white-space: nowrap;
+
+// Tables
+$table-cell-padding-y: $spacing-04;
+$table-cell-padding-x: $spacing-04;
+$table-cell-padding-y-sm: $spacing-02;
+$table-cell-padding-x-sm: $spacing-02;
+$table-color: var(--content-secondary);
+$table-bg: var(--bg-light-primary);
+$table-th-font-weight: 600;
+$table-striped-color: $table-color;
+$table-striped-bg: var(--bg-light-secondary);
+$table-active-color: $table-color;
+$table-active-bg: $bg-accent-03;
+$table-hover-color: $table-color;
+$table-hover-bg: var(--bg-light-secondary);
+$table-border-color: $border-divider;
+$table-striped-order: even;
+$table-caption-color: var(--content-secondary);
+
+// Forms
+
+// form-text-variables
+$form-text-margin-top: $spacing-04;
+$form-text-font-size: var(--font-size-02);
+$form-text-color: var(--content-secondary);
+
+// form-label-variables
+$form-label-margin-bottom: $spacing-02;
+$form-label-font-size: var(--font-size-02);
+$form-label-font-weight: 600;
+$form-label-color: var(--content-secondary);
+
+// form-input-variables
+$input-padding-y: $spacing-03;
+$input-padding-x: $spacing-04;
+$input-font-size: var(--font-size-03);
+$input-line-height: 1.5; // equivalent of var(--line-height-03) - BS expects a unitless value for further calculations
+
+$input-padding-y-sm: $spacing-01;
+$input-padding-x-sm: $spacing-03;
+$input-font-size-sm: var(--font-size-02);
+$input-line-height-sm: 1.25; // equivalent of var(--line-height-02) - BS expects a unitless value for further calculations
+
+$input-padding-y-lg: $spacing-05;
+$input-padding-x-lg: $spacing-05;
+$input-font-size-lg: var(--font-size-03);
+$input-bg: $bg-light-primary;
+$input-disabled-color: var(--content-disabled);
+$input-disabled-bg: $bg-light-disabled;
+$input-disabled-border-color: var(--border-disabled);
+$input-color: $content-primary;
+$input-border-color: $neutral-60;
+$input-border-width: var(--bs-border-width);
+$input-border-radius: $border-radius-base;
+$input-border-radius-sm: $border-radius-base;
+$input-border-radius-lg: $border-radius-base;
+$input-focus-border-color: var(--border-active);
+$input-placeholder-color: var(--content-placeholder);
+$input-plaintext-color: $content-primary;
+$input-height-border: calc(
+  #{$input-border-width} * 2
+); // stylelint-disable-line function-disallowed-list
+
+$input-height: add(
+  $input-line-height * 1em,
+  add($input-padding-y * 2, $input-height-border, false)
+);
+$input-height-sm: add(
+  $input-line-height-sm * 1em,
+  add($input-padding-y-sm * 2, $input-height-border, false)
+);
+$input-height-lg: add(
+  $input-line-height * 1em,
+  add($input-padding-y-lg * 2, $input-height-border, false)
+);
+
+// form-check-variables
+$form-check-label-color: var(--content-primary);
+$form-check-input-border: var(--bs-border-width) solid var(--border-primary);
+$form-check-input-border-radius: $border-radius-base;
+$form-check-input-focus-border: var(--border-primary);
+$form-check-input-disabled-opacity: 1;
+
+// form-switch-variables
+$form-switch-width: 34px;
+$form-switch-padding-start: $spacing-03;
+$form-switch-color: $component-active-color;
+$form-switch-width: 34px;
+$form-switch-padding-start: $spacing-03;
+$form-switch-focus-color: $component-active-color;
+$form-switch-checked-color: $component-active-color;
+
+// form-group
+$form-group-margin-bottom: $spacing-06;
+
+// Form validation
+
+// form-feedback-variables
+$form-feedback-invalid-color: $bg-danger-01;
+$form-feedback-icon-invalid: null;
+$form-feedback-margin-top: 0; // Our feedback component wraps Form.Text, which takes care of top margin
+
+// form-validation-colors
+$form-invalid-color: $form-feedback-invalid-color;
+$form-invalid-border-color: $bg-danger-01;
+
+// form-validation-states
+$form-validation-states: (
+  'invalid': (
+    'color': $bg-danger-01,
+    'icon': $form-feedback-icon-invalid,
+    'tooltip-color': #fff,
+    'tooltip-bg-color': var(--bs-danger),
+    'focus-box-shadow': 0 0 $focus-ring-blur $focus-ring-width
+      rgba($red-30, $focus-ring-opacity),
+    'border-color': var(--#{$prefix}form-invalid-border-color),
+  ),
+);
+
+// Close buttons
+$btn-close-color: $content-primary;
+$btn-close-opacity: 1;
+$btn-close-width: 10px;
+
+// Colors
+$primary: $bg-accent-01;
+$secondary: $bg-light-primary;
+$success: $bg-accent-01;
+$info: $bg-info-01;
+$warning: $content-warning;
+$danger: $bg-danger-01;
+$light: $bg-light-tertiary;
+$dark: $neutral-90;
+$warning-light-gb: $bg-warning-03;
+
+// Theme colors
+$theme-colors: (
+  'primary': $primary,
+  'secondary': $secondary,
+  'success': $success,
+  'info': $info,
+  'warning': $warning,
+  'warning-light-bg': $warning-light-gb,
+  'danger': $danger,
+  'light': $light,
+  'dark': $dark,
+);
+
+// Body colors
+$body-color: $content-primary;
+$body-bg: $bg-light-primary;
+$body-secondary-color: $content-secondary;
+$body-secondary-bg: $bg-light-secondary;
+$body-tertiary-color: $content-disabled;
+$body-tertiary-bg: $bg-light-tertiary;
+
+// Badges
+$badge-font-size: var(--font-size-01);
+$badge-font-weight: var(--bs-body-font-weight);
+$badge-padding-y: $spacing-01;
+$badge-padding-x: $spacing-02;
+$badge-border-radius: $border-radius-base;
+
+// Tooltips
+$tooltip-max-width: 320px;
+$tooltip-border-radius: $border-radius-base;
+$tooltip-padding-y: $spacing-04;
+$tooltip-padding-x: $spacing-06;
+
+// Popovers
+$popover-font-size: var(--font-size-02);
+$popover-bg: var(--bg-dark-primary);
+$popover-max-width: 320px;
+$popover-border-width: 0px; /* stylelint-disable-line length-zero-no-unit */
+$popover-border-radius: var(--border-radius-base);
+$popover-header-font-size: var(--font-size-02);
+$popover-header-bg: var(--bg-dark-primary);
+$popover-header-color: var(--content-primary-dark);
+$popover-header-padding-y: var(--spacing-04);
+$popover-header-padding-x: var(--spacing-06);
+$popover-body-color: var(--content-primary-dark);
+$popover-body-padding-y: var(--spacing-04);
+$popover-body-padding-x: var(--spacing-06);
+$popover-arrow-width: var(--spacing-04);
+$popover-arrow-height: var(--spacing-02);
+$popover-arrow-color: var(--bg-dark-primary);
+
+// Links. Ideally we'd point these to CSS variables but Bootstrap performs
+// calculations on link color during compilation.
+$link-color: $link-ui;
+$link-hover-color: $link-ui-hover;
+$link-hover-decoration: none;
+
+// Headings
+$headings-font-family: $font-family-sans-serif;
+$headings-margin-bottom: $spacing-05;
+
+// Horizontal rules
+$hr-margin-y: $spacing-08;
+$hr-border-color: $border-divider;
+
+// Modals
+$modal-backdrop-bg: $bg-dark-primary;
+$modal-backdrop-opacity: 0.72;
+$modal-content-color: $content-secondary;
+$modal-content-border-color: $border-divider;
+$modal-header-padding: $spacing-05 $spacing-06;
+$modal-header-padding-x: $spacing-08;
+$modal-header-padding-y: $spacing-08;
+
+// Nav toggler
+$navbar-toggler-font-size: 30px;
+$navbar-toggler-padding-x: var(--spacing-05);
+$navbar-toggler-padding-y: var(--spacing-02);
+$navbar-toggler-border-radius: var(--border-radius-base);
+
+// Nav links
+$navbar-nav-link-padding-x: var(--navbar-btn-padding-h);
+
+// Spacing scale used by Bootstrap utilities
+$spacer: $spacing-06;
+$spacers: (
+  0: 0,
+  1: $spacing-02,
+  2: $spacing-04,
+  3: $spacing-06,
+  4: $spacing-08,
+  5: $spacing-11,
+);
+
+// Dropdowns
+$dropdown-link-disabled-color: var(--content-disabled);
+$dropdown-spacer: var(--spacing-01);
+$dropdown-border-width: 0;
+$dropdown-border-radius: var(--border-radius-base);
+$dropdown-padding-x: var(--spacing-02);
+$dropdown-padding-y: var(--spacing-02);
+$dropdown-item-padding-x: var(--spacing-04);
+$dropdown-item-padding-y: var(--spacing-04);
+$dropdown-header-color: var(--content-secondary);
+
+// Offcanvas
+$offcanvas-horizontal-width: 320px;
+$offcanvas-padding-x: 12.5px;
+$offcanvas-padding-y: 12.5px;
+$offcanvas-border-width: 0;
+
+// Code
+$code-color: $content-secondary;
--- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/variables.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/variables.scss
@@ -0,0 +1,14 @@
+// Header
+$header-height: 68px;
+$toolbar-height: 40px;
+$toolbar-small-height: 32px;
+
+// Footer
+$thin-footer-height: 50px;
+$fat-footer-content-height: calc(100vh - $header-height);
+$thin-footer-content-height: calc(
+  100vh - ($header-height + $thin-footer-height)
+);
+
+// List of allowed themes
+$themes: ('default', 'light');
--- a/services/web/frontend/stylesheets/bootstrap-5/base/base.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/base/base.scss
@@ -0,0 +1,47 @@
+.grecaptcha-badge {
+  visibility: hidden;
+  height: 0 !important; // Prevent layout shift
+}
+
+@keyframes bounce {
+  0%,
+  10%,
+  26%,
+  40% {
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transform: translate3d(0, 0, 0);
+  }
+
+  20%,
+  21% {
+    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -10px, 0);
+  }
+
+  35% {
+    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    transform: translate3d(0, -5px, 0);
+  }
+
+  45% {
+    transform: translate3d(0, -2px, 0);
+  }
+
+  50% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+.bounce {
+  animation-duration: 2s;
+  animation-fill-mode: both;
+  animation-iteration-count: infinite;
+  animation-name: bounce;
+  transform-origin: center bottom;
+}
+
+.recaptcha-branding {
+  padding: var(--spacing-05) var(--spacing-05) 0 var(--spacing-05);
+  text-align: center;
+  font-size: var(--font-size-01);
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/base/bootstrap.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/base/bootstrap.scss
@@ -0,0 +1,54 @@
+// Only include the parts of Bootstrap we need to minimize bundle size
+
+// Include functions first (enabling manipulation of colors, SVGs, calc, etc. in the variable overrides)
+@import 'bootstrap-5/scss/functions';
+
+// Overrides for Bootstrap 5 Sass variables. These have to be included before
+// Bootstrap itself because Bootstrap uses them to create the CSS variables it
+// uses, and in calculations to determine, for example, what color text to use
+// on a button based on contrast.
+@import '../foundations/all';
+@import '../abstracts/all';
+
+// Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
+@import 'bootstrap-5/scss/variables';
+@import 'bootstrap-5/scss/variables-dark';
+
+// Include remainder of required parts
+@import 'bootstrap-5/scss/maps';
+@import 'bootstrap-5/scss/mixins';
+@import 'bootstrap-5/scss/utilities';
+
+// Layout & components
+@import 'bootstrap-5/scss/root';
+@import 'bootstrap-5/scss/reboot';
+@import 'bootstrap-5/scss/transitions';
+@import 'bootstrap-5/scss/type';
+@import 'bootstrap-5/scss/images';
+@import 'bootstrap-5/scss/containers';
+@import 'bootstrap-5/scss/grid';
+@import 'bootstrap-5/scss/tables';
+@import 'bootstrap-5/scss/forms';
+@import 'bootstrap-5/scss/buttons';
+@import 'bootstrap-5/scss/dropdown';
+@import 'bootstrap-5/scss/button-group';
+@import 'bootstrap-5/scss/badge';
+@import 'bootstrap-5/scss/list-group';
+@import 'bootstrap-5/scss/modal';
+@import 'bootstrap-5/scss/tooltip';
+@import 'bootstrap-5/scss/popover';
+@import 'bootstrap-5/scss/spinners';
+@import 'bootstrap-5/scss/card';
+@import 'bootstrap-5/scss/close';
+@import 'bootstrap-5/scss/nav';
+@import 'bootstrap-5/scss/navbar';
+@import 'bootstrap-5/scss/offcanvas';
+
+// Helpers
+@import 'bootstrap-5/scss/helpers';
+
+// Utilities
+@import 'bootstrap-5/scss/utilities/api';
+
+// Mixins
+@import 'bootstrap-5/scss/mixins/breakpoints';
--- a/services/web/frontend/stylesheets/bootstrap-5/base/colors.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/base/colors.scss
@@ -0,0 +1,20 @@
+/* Website redesign */
+$vivid-tangerine: #f1a695;
+$ceil: #9597c9;
+$caramel: #f9d38f;
+$dark-jungle-green: #0f271a;
+$sapphire-blue: #4354a3;
+$sapphire-blue-dark: #3c4c93;
+$purple-bright: #939aff;
+$green-bright: #13c965;
+
+:root {
+  --vivid-tangerine: #{$vivid-tangerine};
+  --ceil: #{$ceil};
+  --caramel: #{$caramel};
+  --dark-jungle-green: #{$dark-jungle-green};
+  --sapphire-blue: #{$sapphire-blue};
+  --sapphire-blue-dark: #{$sapphire-blue-dark};
+  --green-bright: #{$green-bright};
+  --purple-bright: #{$purple-bright};
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/base/layout.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/base/layout.scss
@@ -0,0 +1,80 @@
+html {
+  height: 100%;
+}
+
+// Prevent potential for layout shifts on a page with fixed 100% height. This
+// can happen, for example, with the Grammarly extension in Firefox.
+html.fixed-size-document {
+  position: fixed;
+  width: 100%;
+}
+
+body {
+  position: relative;
+  min-height: 100%;
+}
+
+.content {
+  min-height: 100vh;
+  padding-top: $header-height + $spacing-08;
+  padding-bottom: $spacing-08;
+
+  .thin-footer & {
+    min-height: calc(100vh - #{$thin-footer-height});
+  }
+
+  .container-top-padded {
+    padding-top: var(--spacing-16);
+  }
+}
+
+.content-alt {
+  background-color: $bg-light-secondary;
+}
+
+// Page header/separator
+.page-separator,
+.page-header {
+  padding-bottom: $spacing-05;
+  border-bottom: 1px solid $border-divider;
+  margin: 0;
+
+  // Apply margin above or below this header/separator only when it has a sibling
+  * > * + &,
+  * > & + * {
+    margin-top: $spacing-08;
+  }
+}
+
+// Horizontal rule. Override Bootstrap's 25% opacity, which we don't want
+hr {
+  opacity: unset;
+}
+
+.horizontal-divider {
+  border-top: 1px solid var(--border-divider);
+}
+
+.hidden {
+  @extend .d-none;
+}
+
+.hidden-print {
+  @extend .d-print-none;
+}
+
+.row-spaced {
+  margin-top: var(--line-height-03);
+}
+
+.row-spaced-small {
+  margin-top: calc(var(--line-height-03) / 2);
+}
+
+.row-spaced-large {
+  margin-top: calc(var(--line-height-03) * 2);
+}
+
+.row-spaced-extra-large {
+  margin-top: calc(var(--line-height-03) * 4);
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/base/links.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/base/links.scss
@@ -0,0 +1,61 @@
+// Links
+
+// Use CSS variables for link colors to make it easy to override in marketing page
+:root {
+  --link-color: var(--link-ui);
+  --link-hover-color: var(--link-ui-hover);
+  --link-visited-color: var(--link-ui-visited);
+  --link-color-dark: var(--link-ui-dark);
+  --link-hover-color-dark: var(--link-ui-hover-dark);
+  --link-visited-color-dark: var(--link-ui-visited-dark);
+  --link-text-decoration: underline;
+  --link-hover-text-decoration: none;
+}
+
+a {
+  color: var(--link-color);
+  text-decoration: var(--link-text-decoration);
+
+  &:visited {
+    color: var(--link-visited-color);
+  }
+
+  &:hover {
+    color: var(--link-hover-color);
+    text-decoration: var(--link-hover-text-decoration);
+  }
+}
+
+.link-monospace {
+  @include font-mono;
+
+  font-weight: 500;
+  color: var(--green-50);
+
+  &:hover {
+    color: var(--green-60);
+  }
+}
+
+.link-black-text {
+  color: var(--neutral-90);
+  text-decoration: none;
+  font-weight: 600;
+
+  &:visited {
+    color: var(--neutral-90);
+  }
+
+  &:hover {
+    color: var(--neutral-90);
+    text-decoration: underline;
+  }
+}
+
+.link-black-full-width {
+  @extend .link-black-text;
+
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/base/typography.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/base/typography.scss
@@ -0,0 +1,98 @@
+// Typography
+
+body {
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility; /* stylelint-disable-line value-keyword-case */
+  -moz-osx-font-smoothing: grayscale;
+}
+
+// Headings
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  // Apply margin above the heading only when it has a preceding sibling or is inside a row with a preceding sibling
+  * > * + &,
+  * + .row & {
+    margin-top: $spacing-08;
+  }
+}
+
+h1,
+.h1 {
+  @include heading-xl;
+}
+
+h2,
+.h2 {
+  @include heading-md;
+}
+
+h3,
+.h3 {
+  @include heading-sm;
+}
+
+h4,
+.h4 {
+  @include heading-xs;
+}
+
+h5,
+.h5 {
+  @include body-base;
+}
+
+h6,
+.h6 {
+  @include body-sm;
+}
+
+// Miscellaneous
+.small {
+  @include body-sm;
+}
+
+// Peformatted text, sample output, code, keyboard input elements
+// E.g.: Git authentication token
+pre {
+  @include body-base;
+}
+
+code,
+kbd,
+samp {
+  font-size: 1em;
+}
+
+.list-style-check-green {
+  list-style-image: url('../../../../public/img/fa-check-green.svg');
+}
+
+.text-muted {
+  color: var(--content-disabled) !important;
+}
+
+.dm-mono {
+  @include font-mono;
+}
+
+@include media-breakpoint-up(lg) {
+  .text-center-only-desktop {
+    text-align: center;
+  }
+}
+
+@include media-breakpoint-down(lg) {
+  .text-center-only-mobile {
+    text-align: center;
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/accordion.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/accordion.scss
@@ -0,0 +1,50 @@
+.ol-accordions-container :last-child {
+  border: 0 !important;
+}
+
+.ol-accordions-container {
+  .custom-accordion-item {
+    width: 100%;
+    padding-top: var(--spacing-08);
+    padding-bottom: var(--spacing-09);
+    border-bottom: 1px solid var(--border-divider);
+
+    .custom-accordion-header {
+      text-align: left;
+      width: 100%;
+      font-size: var(--font-size-04);
+      font-weight: 600;
+      line-height: var(--line-height-03);
+      color: var(--content-primary);
+      background-color: unset;
+      border: unset;
+      display: flex;
+      justify-content: space-between;
+      padding: unset;
+
+      .custom-accordion-icon {
+        display: flex;
+        align-items: center;
+        transition: transform 0.35s ease;
+        margin-left: var(--spacing-08);
+      }
+
+      &:not(.collapsed) {
+        .custom-accordion-icon {
+          transform: rotate(180deg);
+          transition: transform 0.35s ease;
+        }
+      }
+    }
+
+    .custom-accordion-body {
+      @include body-base;
+
+      background-color: unset;
+      text-align: left;
+      padding: unset;
+      padding-right: 2rem;
+      margin-top: var(--spacing-04);
+    }
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
@@ -0,0 +1,47 @@
+@import 'accordion';
+@import 'button';
+@import 'button-group';
+@import 'dropdown-menu';
+@import 'image';
+@import 'notifications';
+@import 'system-messages';
+@import 'tooltip';
+@import 'popover';
+@import 'card';
+@import 'badge';
+@import 'form';
+@import 'icon';
+@import 'input-suggestions';
+@import 'list';
+@import 'modal';
+@import 'quote';
+@import 'footer';
+@import 'nav';
+@import 'navbar';
+@import 'styled-text';
+@import 'table';
+@import 'blog-posts';
+@import 'tabs';
+@import 'beta-badges';
+@import 'list-group';
+@import 'select';
+@import 'dictionary';
+@import 'link';
+@import 'pagination';
+@import 'interstitial';
+@import 'loading-spinner';
+@import 'gallery-search';
+@import 'error-boundary';
+@import 'close-button';
+@import 'recurly';
+@import 'dev-toolbar';
+@import 'tos';
+@import 'collapsible-file-header';
+@import 'stepper';
+@import 'radio-chip';
+@import 'panel-heading';
+@import 'menu-bar';
+@import 'invite';
+@import 'upgrade-prompt';
+@import 'integrations-panel';
+@import 'group-members';
--- a/services/web/frontend/stylesheets/bootstrap-5/components/badge.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/badge.scss
@@ -0,0 +1,152 @@
+$max-width: 160px;
+
+.badge {
+  display: inline-flex;
+  align-items: stretch;
+  max-width: 100%;
+  line-height: var(--line-height-01);
+  padding: 0 var(--bs-badge-padding-x);
+
+  &:not(.badge-tag) {
+    max-width: $max-width;
+  }
+}
+
+.badge-prepend {
+  margin-right: var(--spacing-02);
+  display: flex;
+  align-items: center;
+
+  .material-symbols {
+    font-size: inherit;
+  }
+}
+
+.badge-close {
+  @include reset-button;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 0 var(--spacing-02);
+  border-top-right-radius: inherit;
+  border-bottom-right-radius: inherit;
+  color: inherit;
+  user-select: none;
+
+  .badge-close-icon {
+    font-size: $font-size-base;
+  }
+}
+
+.badge-close,
+.badge-tag-content-btn {
+  &:hover {
+    background-color: var(--neutral-40);
+  }
+}
+
+.badge-content {
+  @include text-truncate;
+
+  padding: var(--bs-badge-padding-y) 0;
+  min-width: 1em;
+}
+
+.badge-tag {
+  @include body-sm;
+
+  padding: 0;
+  color: $dark;
+
+  &:hover {
+    background-color: var(--neutral-30) !important;
+  }
+}
+
+.badge-tag-content {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  max-width: $max-width;
+  padding-left: var(--bs-badge-padding-x);
+  padding-right: var(--bs-badge-padding-x);
+  border-top-left-radius: inherit;
+  border-bottom-left-radius: inherit;
+
+  &:last-child {
+    border-top-right-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+}
+
+.badge-tag-content-btn {
+  @include reset-button;
+
+  padding-left: var(--bs-badge-padding-x);
+  padding-right: var(--bs-badge-padding-x);
+}
+
+.badge-tag-circle {
+  display: block;
+  margin: var(--spacing-02);
+  width: var(--spacing-04);
+  height: var(--spacing-04);
+  border-radius: 50%;
+}
+
+.badge-premium {
+  background-color: var(--neutral-20);
+  color: var(--neutral-90);
+  vertical-align: middle;
+  margin-left: 5px;
+  font-weight: var(--badge-font-weight);
+}
+
+.badge-premium-gradient {
+  background: var(--premium-gradient);
+  color: var(--content-primary-dark);
+  vertical-align: middle;
+  margin-left: 5px;
+  font-weight: var(--badge-font-weight);
+}
+
+.badge-link {
+  display: inline-block;
+
+  &.badge-link-light:hover .badge {
+    background-color: var(--neutral-30) !important;
+  }
+
+  &.badge-link-no-max-width {
+    .badge {
+      max-width: none;
+    }
+  }
+
+  .badge {
+    @include body-sm;
+
+    padding: 0 var(--bs-badge-padding-x);
+    transition: background-color 0.15s ease-in-out;
+
+    &:hover {
+      transition: background-color 0.15s ease-in-out;
+    }
+  }
+}
+
+.badge-link-list {
+  display: flex;
+  gap: var(--spacing-05);
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  align-content: flex-start;
+
+  .badge {
+    max-width: 200px;
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/beta-badges.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/beta-badges.scss
@@ -0,0 +1,11 @@
+.info-badge {
+  color: var(--blue-50);
+}
+
+.alpha-badge {
+  font-family: $font-family-monospace;
+}
+
+.split-test-badge-tooltip .tooltip-inner {
+  white-space: pre-wrap;
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss
@@ -0,0 +1,179 @@
+/*
+  v2
+  Blog Pages
+*/
+
+.blog-container,
+.blog-tagged-list-container,
+.blog-post-main-container {
+  h1 {
+    margin-bottom: 0;
+  }
+}
+
+.blog-container {
+  margin-top: var(--spacing-16);
+
+  .blog-list-container-title {
+    margin-top: 0; // needed to override bootstrap * + h1
+
+    small {
+      @include body-lg;
+
+      display: block;
+      margin-top: var(--spacing-06);
+      font-weight: 400;
+    }
+  }
+}
+
+.blog-tagged-list-container {
+  margin-top: var(--spacing-10);
+
+  .blog-list-container-title {
+    margin-top: var(--spacing-11);
+
+    small {
+      color: var(--neutral-70);
+    }
+  }
+}
+
+.blog-post-main-container {
+  margin-top: var(--spacing-10);
+}
+
+.blog {
+  margin-top: var(--spacing-16);
+
+  img {
+    max-width: 100%;
+  }
+
+  .blog-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+
+    .card-header {
+      margin-bottom: var(--margin-sm);
+      padding: 0;
+    }
+
+    > li {
+      .blog-date {
+        margin-top: var(--spacing-07);
+      }
+
+      &:not(:last-child) {
+        padding-bottom: var(--spacing-09);
+        border-bottom: 1px solid var(--neutral-20);
+      }
+
+      &:not(:first-child) {
+        padding-top: var(--spacing-09);
+      }
+    }
+  }
+
+  .blog-post-container {
+    @include media-breakpoint-up(lg) {
+      padding-right: 0;
+    }
+  }
+
+  .blog-post {
+    @include media-breakpoint-up(lg) {
+      margin-right: var(--spacing-09);
+    }
+
+    .blog-title {
+      margin-bottom: var(--spacing-04);
+    }
+
+    .blog-post-title-link {
+      @include heading-lg;
+
+      margin-top: var(--spacing-04);
+      margin-bottom: var(--spacing-06);
+
+      a {
+        @extend .link-black-text;
+      }
+    }
+
+    .blog-date {
+      display: block;
+    }
+
+    .blog-content {
+      margin-top: var(--spacing-08);
+
+      > *:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .blog-content-preview {
+      p:last-child {
+        margin-bottom: 0;
+      }
+
+      & + .blog-tags > div > .tags {
+        margin-top: var(--spacing-06);
+      }
+    }
+
+    .blog-content,
+    .blog-content-preview {
+      img {
+        border-radius: var(--border-radius-medium);
+      }
+    }
+
+    .blog-footer-tags {
+      margin-top: var(--spacing-12);
+    }
+
+    .blog-read-more {
+      margin-bottom: var(--spacing-07);
+
+      a {
+        @include font-mono;
+
+        text-decoration: none;
+        font-weight: 500;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+  }
+
+  pre {
+    border: 1px solid var(--neutral-40);
+    border-radius: var(--border-radius-base);
+    padding: var(--spacing-04);
+  }
+
+  .figure {
+    background-color: #fff;
+    border: 1px solid var(--neutral-40);
+    display: inline-block;
+    margin: 0 auto var(--margin-sm) 0;
+    max-width: 100%;
+    padding: var(--spacing-04);
+
+    .figure-caption {
+      padding-top: var(--spacing-04);
+      font-size: small;
+    }
+  }
+
+  .pagination {
+    margin: var(--spacing-09) 0 0 0;
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/button-group.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/button-group.scss
@@ -0,0 +1,16 @@
+.btn-group {
+  > .btn {
+    &:first-of-type {
+      padding-left: var(--spacing-05);
+    }
+
+    &:last-of-type {
+      padding-right: var(--spacing-05);
+    }
+  }
+}
+
+.btn-toolbar {
+  gap: var(--spacing-03);
+  flex-wrap: nowrap;
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/button.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/button.scss
@@ -0,0 +1,279 @@
+.btn {
+  // Focus style for all buttons
+  --bs-btn-focus-box-shadow: 0 0 0 2px var(--border-active-dark);
+
+  &:focus-visible {
+    background-color: var(--bs-btn-bg);
+  }
+
+  // Sizes
+
+  // Default size
+  @include ol-button-size(
+    $font-size: var(--font-size-03),
+    $line-height: var(--line-height-03),
+    $padding-y: var(--spacing-03)
+  );
+
+  &.btn-lg {
+    @include ol-button-size(
+      $font-size: var(--font-size-03),
+      $line-height: var(--line-height-03),
+      $padding-y: var(--spacing-05)
+    );
+  }
+
+  &.btn-sm {
+    @include ol-button-size(
+      $font-size: var(--font-size-02),
+      $line-height: var(--line-height-02),
+      $padding-y: var(--spacing-01),
+      $padding-x: var(--spacing-05)
+    );
+  }
+
+  // Variants
+  &.btn-primary {
+    @include ol-button-variant(
+      $color: var(--content-primary-dark),
+      $background: var(--bg-accent-01),
+      $hover-background: var(--bg-accent-02),
+      $hover-border: var(--bg-accent-02)
+    );
+  }
+
+  &.btn-secondary {
+    @include ol-button-variant(
+      $color: var(--content-primary),
+      $background: var(--bg-light-primary),
+      $border: var(--border-primary),
+      $hover-background: var(--bg-light-tertiary),
+      $hover-border: var(--border-primary),
+      $borderless: false
+    );
+  }
+
+  &.btn-ghost {
+    @include ol-button-variant(
+      $color: var(--content-primary),
+      $background: var(--bg-light-primary),
+      $hover-background: var(--bg-light-tertiary)
+    );
+  }
+
+  &.btn-danger {
+    @include ol-button-variant(
+      $color: var(--content-primary-dark),
+      $background: var(--bg-danger-01),
+      $border: var(--bg-danger-01),
+      $hover-background: var(--bg-danger-02)
+    );
+  }
+
+  &.btn-danger-ghost {
+    @include ol-button-variant(
+      $color: var(--content-danger),
+      $background: var(--bg-light-primary),
+      $hover-background: var(--bg-danger-03)
+    );
+  }
+
+  &.btn-premium {
+    @include ol-button-variant(
+      $color: var(--content-primary-dark),
+      $background: var(--blue-70)
+    );
+
+    background: var(--premium-gradient);
+    transition: none;
+
+    &:hover {
+      background: var(--blue-70);
+    }
+  }
+
+  &.btn-premium-secondary {
+    @include ol-button-variant(
+      $color: var(--blue-60),
+      $background: var(--bg-light-primary),
+      $border: var(--blue-60),
+      $hover-background: var(--bg-info-03),
+      $hover-border: var(--blue-60),
+      $borderless: false
+    );
+  }
+
+  &.btn-blue {
+    @include ol-button-variant(
+      $color: var(--content-primary-dark),
+      $background: var(--sapphire-blue),
+      $border: var(--sapphire-blue),
+      $hover-background: (
+        var(--sapphire-blue-dark),
+      ),
+      $hover-border: (
+        var(--sapphire-blue-dark),
+      ),
+      $borderless: false
+    );
+  }
+
+  &.btn-social {
+    @extend .btn-secondary;
+
+    padding-left: var(--spacing-03);
+
+    .btn-social-icon {
+      height: 24px;
+      width: 24px;
+      padding: var(--spacing-01);
+      margin-right: var(--spacing-02);
+    }
+  }
+}
+
+// Link buttons
+// -------------------------
+
+// Make a button look and behave like a link
+.btn-link {
+  color: var(--link-color);
+  font-weight: normal;
+  cursor: pointer;
+  text-decoration: underline;
+  font-size: inherit;
+  vertical-align: inherit;
+  border-radius: 0;
+
+  &,
+  &:active,
+  &[disabled],
+  fieldset[disabled] & {
+    background-color: transparent;
+
+    @include box-shadow(none);
+  }
+
+  &:hover,
+  &:focus {
+    color: var(--link-hover-color);
+    text-decoration: none;
+    background-color: transparent;
+  }
+
+  &.btn-danger {
+    color: var(--content-danger);
+
+    // since it's a link, override the button states
+    &:active {
+      color: var(--content-danger);
+      background-color: transparent;
+    }
+
+    &:focus-visible {
+      background-color: transparent;
+      outline: -webkit-focus-ring-color auto 1px;
+    }
+  }
+}
+
+.btn-inline-link {
+  @extend .btn-link;
+
+  font-size: inherit;
+  padding: 0;
+  vertical-align: inherit;
+}
+
+.button-loading {
+  align-items: center;
+  display: inline-grid;
+  grid-template-areas: 'container'; // Define a single grid area
+  pointer-events: none;
+}
+
+.button-loading > * {
+  grid-area: container; // Position all the direct children within the single grid area
+}
+
+.button-loading .spinner-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .loading-spinner-small {
+    border-width: 0.2em;
+    height: 1.25rem;
+    width: 1.25rem;
+  }
+
+  .loading-spinner-large {
+    border-width: 0.2em;
+    height: 1.5rem;
+    width: 1.5rem;
+  }
+}
+
+// Hide the text when the spinner is visible
+.button-loading > [aria-hidden='true'] {
+  visibility: hidden;
+}
+
+.button-content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-04); // Add gap between text and icons
+  justify-content: center;
+
+  .icon-small {
+    font-size: 1.25rem;
+  }
+
+  .icon-large {
+    font-size: 1.5rem;
+  }
+
+  .spinner {
+    margin: var(--spacing-01);
+  }
+}
+
+.icon-button-small {
+  padding: var(--spacing-01);
+}
+
+.icon-button {
+  padding: var(--spacing-04);
+}
+
+.icon-button-large {
+  padding: var(--spacing-05);
+}
+
+// Set the visited colour for a link that is styled as a button. This is necessary because we have a generic rule that
+// sets the colour of visited links
+a[role='button']:visited,
+a.btn:visited {
+  color: var(--bs-btn-color);
+}
+
+// Copy icon button
+.copy-button {
+  text-decoration: none;
+}
+
+.btn-reset {
+  @include reset-button;
+}
+
+.btn-transparent {
+  background: none !important;
+  border-radius: 0 !important;
+  color: inherit !important;
+  font-weight: 400;
+
+  &:hover {
+    background: none !important;
+    color: inherit !important;
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/card.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/card.scss
@@ -0,0 +1,233 @@
+.card {
+  --bs-card-bg: var(--white);
+  --bs-card-border-width: 0;
+  --bs-card-border-radius: var(--border-radius-base);
+  --bs-card-spacer-x: var(--spacing-08);
+  --bs-card-spacer-y: var(--spacing-08);
+
+  .card-body {
+    > :first-child {
+      margin-top: 0;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &.card-dark-green-bg {
+    background: var(--dark-jungle-green);
+    border-radius: var(--border-radius-large);
+    color: var(--green-10);
+
+    .card-body {
+      padding: var(--spacing-09);
+    }
+
+    a:not(.btn) {
+      color: var(--green-30);
+
+      &:hover {
+        color: var(--green-30);
+      }
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    p {
+      color: var(--green-10);
+    }
+  }
+
+  &.card-purple-top-border {
+    background-color: white;
+    border-radius: var(--border-radius-medium);
+    box-shadow:
+      0 2px 4px 0 #1e253014,
+      0 4px 12px 0 #1e25301f;
+    border-top: 8px solid var(--sapphire-blue);
+
+    .card-body {
+      padding: var(--spacing-09) var(--spacing-10);
+    }
+  }
+
+  &.card-premium-border {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+      color: var(--blue-60);
+    }
+
+    border-radius: var(--spacing-04);
+    border: 2px solid transparent;
+    background:
+      linear-gradient(white, white) padding-box,
+      linear-gradient(to right, var(--blue-40), #254c84, var(--blue-70))
+        border-box;
+
+    .card-body {
+      padding: var(--spacing-10);
+    }
+
+    .btn {
+      width: 100%;
+    }
+  }
+
+  &.card-blue-border {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+      color: var(--sapphire-blue);
+    }
+
+    background-color: white;
+    border-radius: var(--spacing-04);
+    border: 2px solid var(--sapphire-blue);
+
+    .card-body {
+      padding: var(--spacing-10);
+    }
+
+    .btn {
+      width: 100%;
+    }
+  }
+
+  &.card-pattern {
+    border-radius: var(--border-radius-medium);
+    color: var(--white);
+    text-align: center;
+    background-size: cover;
+    background-image: linear-gradient(
+        to right,
+        rgba(0 0 0 / 40%) 0%,
+        var(--dark-jungle-green) 25%,
+        var(--dark-jungle-green) 75%,
+        rgba(0 0 0 / 40%) 100%
+      ),
+      url('../../../../public/img/website-redesign/overleaf-pattern-purple.png');
+
+    h2 {
+      @include heading-lg;
+    }
+
+    p {
+      @include body-lg;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    p {
+      color: var(--white);
+    }
+
+    .card-body {
+      padding: var(--spacing-13);
+    }
+  }
+
+  &.card-pattern-left-only {
+    border-radius: var(--border-radius-medium);
+    color: var(--white);
+    background-size: cover;
+    background-image: linear-gradient(
+        to right,
+        rgba(0 0 0 / 40%) 0%,
+        var(--dark-jungle-green) 20%,
+        var(--dark-jungle-green) 100%
+      ),
+      url('../../../../public/img/website-redesign/overleaf-pattern-purple.png');
+
+    h2 {
+      @include heading-lg;
+    }
+
+    p {
+      @include body-lg;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    p {
+      color: var(--white);
+    }
+
+    .card-body {
+      padding: var(--spacing-13);
+    }
+  }
+
+  &.card-grey-border {
+    background-color: white;
+    border-radius: var(--border-radius-medium);
+    border: 2px solid var(--neutral-20);
+
+    .card-body {
+      padding: var(--spacing-10);
+    }
+  }
+
+  &.card-green-border {
+    background-color: white;
+    border-radius: var(--border-radius-medium);
+    border: 2px solid var(--green-50);
+
+    .card-body {
+      padding: var(--spacing-09);
+    }
+  }
+}
+
+.card-gray {
+  background-color: var(--neutral-10);
+}
+
+.card-gray-dark {
+  background-color: var(--neutral-10);
+  border-radius: var(--border-radius-base);
+
+  .card-body {
+    padding: var(--spacing-10) var(--spacing-09);
+  }
+}
+
+.card-icon {
+  display: flex;
+  width: max-content;
+  margin: 0 auto;
+  padding: var(--spacing-08);
+  border-radius: 50%;
+  background-color: var(--bg-light-secondary);
+  color: var(--content-secondary);
+
+  .material-symbols {
+    font-size: 2rem;
+  }
+
+  &.text-primary {
+    background-color: var(--bg-accent-03);
+  }
+
+  &.text-danger {
+    background-color: var(--bg-danger-03);
+  }
+}
+
+.card-description-secondary {
+  color: var(--content-secondary);
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/close-button.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/close-button.scss
@@ -0,0 +1,10 @@
+// This is our own implementation because the Bootstrap close button requires more customization than is worthwhile
+.close {
+  @include reset-button;
+
+  color: var(--content-primary);
+
+  &.dark {
+    color: var(--content-primary-dark);
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/collapsible-file-header.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/collapsible-file-header.scss
@@ -0,0 +1,28 @@
+:root {
+  --collapsible-file-header-bg-color: var(--bg-light-tertiary);
+
+  @include theme('default') {
+    .ide-redesign-main {
+      --collapsible-file-header-bg-color: var(--bg-dark-tertiary);
+    }
+  }
+}
+
+.collapsible-file-header {
+  all: unset;
+  padding: var(--spacing-03) var(--spacing-04);
+  font-size: var(--font-size-02);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-04);
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.collapsible-file-header-count {
+  background-color: var(--collapsible-file-header-bg-color);
+  padding: var(--spacing-01) var(--spacing-02);
+  margin-left: auto;
+  border-radius: var(--border-radius-base);
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/dev-toolbar.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/dev-toolbar.scss
@@ -0,0 +1,136 @@
+.dev-toolbar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  height: 40px;
+  background-color: var(--bg-dark-primary);
+  padding: var(--spacing-02) var(--spacing-05);
+
+  button.widget {
+    color: var(--neutral-10);
+    margin: 0 var(--spacing-02);
+    padding: 0 var(--spacing-02);
+    border: none;
+    text-decoration: none;
+
+    .badge {
+      font-size: var(--font-size-03);
+    }
+  }
+
+  .collapse-button {
+    position: absolute;
+    padding: 0;
+    margin-top: calc(var(--spacing-01) * -1);
+    color: var(--neutral-50);
+    border-color: transparent;
+
+    span {
+      font-size: var(--font-size-07);
+    }
+
+    &:hover {
+      color: var(--border-primary-dark);
+    }
+  }
+}
+
+.dev-tool-bar-open-button {
+  position: fixed;
+  bottom: -2px;
+  left: 6px;
+  color: var(--neutral-70);
+
+  span {
+    font-size: var(--font-size-07);
+  }
+
+  &:hover {
+    color: var(--border-primary-dark);
+  }
+}
+
+.dev-toolbar-tooltip {
+  opacity: 1 !important;
+
+  a {
+    color: var(--blue-20) !important;
+    text-decoration: none;
+
+    &.btn {
+      color: var(--neutral-10);
+    }
+  }
+
+  &.tooltip.top {
+    margin-top: calc(var(--spacing-04) * -1);
+    opacity: 1;
+  }
+
+  .tooltip-inner {
+    padding: var(--spacing-01) var(--spacing-04) var(--spacing-04)
+      var(--spacing-04);
+    text-align: left;
+    min-width: 300px;
+    max-height: 800px;
+    overflow-y: auto;
+  }
+
+  .title {
+    margin-top: var(--spacing-02);
+  }
+
+  .test-card {
+    text-align: left;
+    color: var(--neutral-10);
+    padding: var(--spacing-03);
+    border: var(--spacing-01) solid var(--neutral-70);
+    background-color: var(--bg-dark-secondary);
+    border-radius: var(--border-radius-base);
+    margin-top: var(--spacing-04);
+
+    &.override {
+      border-color: var(--blue-40);
+    }
+
+    .test-name {
+      font-family: monospace;
+      font-size: var(--font-size-01);
+      font-weight: bold;
+    }
+
+    ul {
+      li.variant-row {
+        line-height: var(--line-height-03);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: var(--spacing-01) 0;
+
+        .btn-inline-link {
+          color: var(--content-primary-dark) !important;
+          opacity: 1;
+          font-weight: 400;
+          text-decoration: none;
+
+          .material-symbols {
+            vertical-align: sub;
+            font-weight: 400;
+            font-size: var(--font-size-03);
+          }
+        }
+      }
+    }
+  }
+
+  .actions {
+    margin-top: var(--spacing-04);
+    text-align: right;
+  }
+
+  ul {
+    margin-bottom: 0;
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/dictionary.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/dictionary.scss
@@ -0,0 +1,33 @@
+#dictionary-modal {
+  .modal-body {
+    padding: 0;
+  }
+}
+
+.dictionary-entries-list {
+  overflow-y: scroll;
+  max-height: calc(100vh - 225px);
+  margin: 0;
+  padding: var(--spacing-04);
+}
+
+.dictionary-entry {
+  word-break: break-all;
+  display: flex;
+  padding: var(--spacing-04);
+  border-bottom: solid 1px var(--border-divider);
+  align-items: center;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.dictionary-entry-name {
+  flex-grow: 1;
+  padding-right: var(--spacing-02);
+}
+
+.dictionary-empty-body {
+  padding: var(--spacing-07);
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/dropdown-menu.scss
@@ -0,0 +1,223 @@
+$dropdown-item-min-height: 36px;
+
+.dropdown {
+  display: inline-flex;
+
+  .no-left-border {
+    border-left: none;
+  }
+
+  .custom-toggle {
+    &::after {
+      content: none !important;
+    }
+
+    padding-left: var(--spacing-04);
+    padding-right: var(--spacing-05);
+    display: flex;
+    align-items: center;
+  }
+}
+
+.dropdown-header {
+  @include body-xs;
+
+  min-height: $dropdown-item-min-height; // a minimum height of 36px to be accessible for touch screens
+  padding: var(--spacing-05) var(--spacing-06) var(--spacing-02)
+    var(--spacing-04);
+}
+
+.dropdown-menu.dropdown-menu-unpositioned {
+  position: unset;
+  top: unset;
+  left: unset;
+  z-index: unset;
+  display: block;
+  float: unset;
+}
+
+.dropdown-menu {
+  @include shadow-md;
+
+  min-width: 240px;
+
+  &.dropdown-menu-sm-width {
+    min-width: 160px;
+  }
+
+  .subdued {
+    color: var(--content-disabled);
+  }
+}
+
+.dropdown-item {
+  @include body-sm;
+
+  --bs-dropdown-item-border-radius: var(--border-radius-base);
+
+  display: grid;
+  grid-auto-flow: column;
+  place-content: center start;
+  min-height: $dropdown-item-min-height; // a minimum height of 36px to be accessible for touch screens
+  position: relative;
+
+  &:active {
+    background-color: var(--bg-accent-03);
+  }
+
+  &,
+  &:active,
+  &:visited {
+    color: var(--neutral-90);
+  }
+
+  &:hover:not(.active),
+  &:focus:not(.active),
+  &.nested-dropdown-toggle-shown {
+    background-color: var(--bg-light-secondary);
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  &[variant='danger'] {
+    color: var(--content-danger);
+
+    &:hover:not(.active),
+    &:focus:not(.active) {
+      background-color: var(--bg-danger-03);
+    }
+  }
+
+  &.active {
+    background-color: var(--bg-accent-03);
+    color: var(--green-70);
+  }
+
+  &.btn-link {
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      color: inherit;
+    }
+  }
+}
+
+.dropdown-divider {
+  border-top-color: var(--border-divider);
+  margin: var(--spacing-01) var(--spacing-03);
+}
+
+.dropdown-item-description {
+  @include body-xs;
+
+  color: var(--content-secondary);
+  margin-top: var(--spacing-01);
+  text-wrap: wrap;
+}
+
+.dropdown-item-description-container {
+  grid-auto-flow: row;
+  min-height: 44px;
+  display: grid;
+  place-content: center start;
+}
+
+.dropdown-item-trailing-icon {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.dropdown-item-leading-icon {
+  display: flex;
+  align-items: center;
+  padding-right: var(--spacing-04);
+
+  &.spinner {
+    margin-left: var(--spacing-01);
+    margin-right: var(--spacing-01);
+  }
+}
+
+.dropdown-item-leading-icon,
+.dropdown-item-trailing-icon {
+  .material-symbols {
+    vertical-align: top;
+  }
+}
+
+.dropdown-item-leading-icon-empty {
+  display: inline-block;
+  width: 20px;
+}
+
+// description text should look disabled when the dropdown item is disabled
+.dropdown-item.disabled .dropdown-item-description,
+.dropdown-item[aria-disabled='true'] .dropdown-item-description {
+  background-color: transparent;
+  color: var(--content-disabled);
+}
+
+// override disabled styles when the state is active
+.dropdown-item.active .dropdown-item-description {
+  background-color: initial;
+  color: var(--green-70);
+}
+
+.dropdown-button-toggle {
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  padding-right: var(--spacing-05);
+  padding-left: var(--spacing-05);
+  margin-left: 0;
+
+  &.btn-primary,
+  &.btn-danger {
+    border-left: 1px solid rgb($neutral-90, 0.16);
+  }
+
+  &.btn-secondary {
+    border-left: 1px solid var(--neutral-60);
+  }
+
+  &[disabled],
+  &[aria-disabled='true'] {
+    border-left: 1px solid var(--neutral-10);
+  }
+}
+
+.select-dropdown-menu {
+  top: 100%;
+  margin-top: var(--spacing-04);
+  width: 100%;
+  max-height: 200px;
+  overflow: auto;
+  overflow-x: hidden;
+}
+
+.dropdown-item-highlighted {
+  background-color: var(--bg-light-secondary);
+}
+
+.dropdown-item-material-icon-small {
+  .material-symbols,
+  &.material-symbols {
+    font-size: var(--bs-body-font-size);
+
+    // Centre the symbol in a 20px-by-20px box
+    width: 20px;
+    line-height: 20px;
+    text-align: center;
+  }
+}
+
+.nested-dropdown-toggle {
+  &::after {
+    content: none !important;
+  }
+
+  display: flex;
+  justify-content: space-between;
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/error-boundary.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/error-boundary.scss
@@ -0,0 +1,22 @@
+.error-boundary-alert {
+  padding: var(--spacing-05);
+}
+
+.error-boundary-container {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-06);
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  .error-message {
+    align-items: center;
+    color: var(--content-primary);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-02);
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/footer.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/footer.scss
@@ -0,0 +1,464 @@
+@use 'sass:map';
+
+// Max width of the sidebar
+$footer-width-delta: 320px;
+
+@mixin footer-container-up($bp) {
+  $size: map.get($grid-breakpoints, $bp);
+
+  @supports (container-type: inline-size) {
+    @container fatfooter (width >= #{$size}) {
+      @content;
+    }
+  }
+
+  @supports not (container-type: inline-size) {
+    @at-root {
+      .project-ds-nav-page & {
+        @media (min-width: #{$size + $footer-width-delta}) {
+          @content;
+        }
+      }
+
+      :not(.project-ds-nav-page *) & {
+        @media (min-width: #{$size}) {
+          @content;
+        }
+      }
+    }
+  }
+}
+
+@mixin footer-container-down($bp) {
+  $size: map.get($grid-breakpoints, $bp);
+
+  @supports (container-type: inline-size) {
+    @container fatfooter (width < #{$size}) {
+      @content;
+    }
+  }
+
+  @supports not (container-type: inline-size) {
+    @at-root {
+      .project-ds-nav-page & {
+        @media (max-width: #{$size + $footer-width-delta}) {
+          @content;
+        }
+      }
+
+      :not(.project-ds-nav-page *) & {
+        @media (max-width: #{$size}) {
+          @content;
+        }
+      }
+    }
+  }
+}
+
+footer.site-footer {
+  --link-color: var(--link-web);
+  --link-hover-color: var(--link-web-hover);
+  --link-visited-color: var(--link-web-visited);
+  --link-text-decoration: none;
+  --link-hover-text-decoration: underline;
+
+  background-color: var(--bg-light-primary);
+  border-top: 1px solid var(--border-primary-dark);
+
+  @include body-sm;
+
+  min-height: $thin-footer-height;
+  line-height: $thin-footer-height - 1; // Hack — in Chrome, using the full $footer-height would generate vertical scrolling
+
+  ul.site-footer-items {
+    list-style: none;
+    margin: 0;
+
+    > li {
+      display: inline-block;
+      margin: 0 var(--spacing-04);
+    }
+
+    i {
+      font-size: var(--font-size-05);
+    }
+  }
+}
+
+.site-footer-content {
+  @extend .container-fluid;
+}
+
+.sprite-icon-lang {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+#language-picker-toggle {
+  text-decoration: none;
+  cursor: pointer;
+
+  &::after {
+    display: none;
+  }
+
+  &:hover {
+    .language-picker-text {
+      text-decoration: var(--link-hover-text-decoration);
+    }
+  }
+
+  .material-symbols {
+    vertical-align: -0.1875rem;
+  }
+}
+
+.language-picker .dropdown-menu {
+  .dropdown-item {
+    &.active {
+      color: var(--green-70);
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
+
+.fat-footer {
+  --footer-text-color: var(--content-secondary-dark);
+  --footer-background-color: var(--bg-dark-primary);
+  --link-color: var(--footer-text-color);
+  --link-hover-color: var(--footer-text-color);
+  --link-visited-color: var(--footer-text-color);
+  --link-text-decoration: none;
+  --link-hover-text-decoration: underline;
+
+  container-name: fatfooter;
+  container-type: inline-size;
+  background: var(--footer-background-color);
+  color: var(--footer-text-color);
+  display: flex;
+  flex-direction: column;
+
+  .fat-footer-container {
+    margin: var(--spacing-11) auto;
+
+    @include footer-container-down(sm) {
+      margin: var(--spacing-11) 0;
+    }
+  }
+
+  .footer-brand-container {
+    flex: 1;
+  }
+
+  .fat-footer-sections {
+    display: grid;
+    column-gap: var(--spacing-07);
+    padding: 0 var(--spacing-07) var(--spacing-07);
+  }
+
+  .footer-brand {
+    display: block;
+    height: 37px;
+    width: 130px;
+    background-image: url('../../../../public/img/ol-brand/overleaf-white.svg');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: left center;
+  }
+
+  .footer-section-heading {
+    color: var(--footer-text-color);
+
+    @include heading-sm;
+
+    margin-bottom: var(--spacing-07);
+    margin-top: var(--spacing-07);
+  }
+
+  .footer-section ul {
+    @include body-sm;
+  }
+
+  .footer-section li {
+    padding-bottom: var(--spacing-04);
+  }
+
+  #footer-brand {
+    grid-column: 1/-1;
+    margin-top: var(--spacing-07);
+  }
+
+  .fat-footer-base {
+    color: var(--content-disabled);
+
+    @include body-sm;
+
+    #language-picker-toggle {
+      color: var(--footer-text-color);
+    }
+
+    .fat-footer-base-meta a:not(.dropdown-toggle) {
+      color: inherit;
+    }
+
+    .language-picker .dropdown-menu {
+      .dropdown-header {
+        display: none; /* hiding rather than removing as still needed in the thin footer */
+      }
+    }
+  }
+
+  .fat-footer-base-item {
+    display: flex;
+    white-space: nowrap;
+  }
+
+  .fat-footer-social {
+    &.x-logo svg path {
+      fill: var(--footer-text-color);
+    }
+
+    &.facebook-logo svg,
+    &.linkedin-logo svg {
+      path.background {
+        fill: var(--footer-text-color);
+      }
+    }
+
+    &.facebook-logo svg {
+      path.text {
+        fill: transparent;
+      }
+    }
+
+    &.linkedin-logo svg {
+      path.text {
+        fill: var(--footer-background-color);
+      }
+    }
+  }
+
+  @include footer-container-down(md) {
+    .fat-footer-sections {
+      grid-template-columns: repeat(2, 1fr);
+      grid-template-rows: repeat(4, auto);
+    }
+
+    .fat-footer-base {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .fat-footer-base-section {
+        display: flex;
+        align-items: center;
+      }
+
+      .fat-footer-base-social {
+        order: 1;
+      }
+
+      .fat-footer-base-meta {
+        display: flex;
+        flex-direction: column-reverse;
+        align-items: center;
+        order: 2;
+      }
+
+      .fat-footer-base-item {
+        flex-wrap: wrap;
+        padding: var(--spacing-02);
+        margin: var(--spacing-06);
+      }
+
+      .fat-footer-base-meta .fat-footer-base-item {
+        gap: var(--spacing-09);
+        justify-content: center;
+
+        @include footer-container-down(sm) {
+          gap: var(--spacing-06);
+        }
+      }
+
+      .fat-footer-base-social .fat-footer-base-item {
+        gap: var(--spacing-07);
+        margin-top: var(--spacing-00);
+      }
+
+      .fat-footer-base-copyright {
+        order: 2;
+      }
+    }
+  }
+
+  @include footer-container-up(md) {
+    .fat-footer-container {
+      width: (map.get($grid-breakpoints, 'md') - ($spacing-04 * 2));
+    }
+
+    #footer-brand {
+      grid-column: auto;
+      grid-row: 1/-1;
+    }
+
+    .fat-footer-sections {
+      grid-template-columns: repeat(4, 1fr);
+      grid-template-rows: repeat(2, auto);
+    }
+
+    .footer-section:last-of-type {
+      grid-column: 4;
+    }
+
+    .fat-footer-base {
+      display: flex;
+      justify-content: space-between;
+      margin: var(--spacing-07) auto;
+
+      .fat-footer-base-section {
+        display: flex;
+        align-items: center;
+      }
+
+      .fat-footer-base-item {
+        padding: var(--spacing-02);
+        margin: var(--spacing-02);
+      }
+
+      .fat-footer-base-meta .fat-footer-base-item {
+        gap: var(--spacing-07);
+      }
+
+      .fat-footer-social {
+        margin: var(--spacing-07) var(--spacing-03);
+      }
+    }
+  }
+
+  @include footer-container-up(lg) {
+    .fat-footer-container {
+      width: (map.get($grid-breakpoints, 'lg') - $spacing-07);
+    }
+
+    .fat-footer-sections {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+
+  @include footer-container-up(xl) {
+    .fat-footer-container {
+      width: (map.get($grid-breakpoints, 'xl') - $spacing-09);
+    }
+
+    .fat-footer-sections {
+      grid-template-columns: repeat(6, 1fr);
+      grid-template-rows: auto;
+    }
+
+    .footer-section:last-of-type {
+      grid-column: 6;
+    }
+  }
+}
+
+.cookie-banner {
+  @include body-sm;
+
+  padding: var(--spacing-05) var(--spacing-07);
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  color: var(--content-secondary);
+  background: var(--bg-light-secondary);
+  box-shadow: 0 -5px 8px 0 #0000001a;
+
+  .cookie-banner-actions {
+    padding-top: var(--spacing-04);
+  }
+
+  @include media-breakpoint-up(md) {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+
+    .cookie-banner-content {
+      flex: 1;
+    }
+
+    .cookie-banner-actions {
+      flex-shrink: 0;
+      white-space: nowrap;
+      padding-top: var(--spacing-00);
+    }
+  }
+}
+
+.website-redesign-fat-footer,
+.website-redesign .fat-footer {
+  --footer-text-color: var(--content-primary);
+
+  .fat-footer-container {
+    @include footer-container-down(sm) {
+      margin: var(--spacing-11) 0;
+    }
+  }
+
+  &.fat-footer {
+    background: var(--content-primary-dark);
+
+    h2 {
+      font-weight: 400;
+    }
+
+    .fat-footer-base {
+      color: var(--content-primary);
+
+      #language-picker-toggle {
+        color: inherit;
+      }
+    }
+
+    // This is duplication of fill colours in the SVGs themselves. This could be fixed by using :has() but that's not
+    // supported in older versions of browsers and these logos need to be correct.
+    .fat-footer-social {
+      &.x-logo svg path {
+        fill: #0f1419;
+      }
+
+      &.facebook-logo svg,
+      &.linkedin-logo svg {
+        path.text {
+          fill: #fff;
+        }
+      }
+
+      &.facebook-logo svg {
+        path.background {
+          fill: #0866ff;
+        }
+      }
+
+      &.linkedin-logo svg {
+        path.background {
+          fill: #0b66c3;
+        }
+      }
+    }
+  }
+
+  .footer-brand {
+    background-image: url('../../../../public/img/ol-brand/overleaf-black.svg');
+  }
+
+  @include footer-container-down(sm) {
+    .fat-footer-sections {
+      grid-template-columns: repeat(1, 1fr);
+      grid-template-rows: repeat(6, auto);
+    }
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
@@ -0,0 +1,254 @@
+.form-check-input {
+  @function form-check-box-svg($color) {
+    @return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
+  }
+
+  @function form-check-radio-svg($color) {
+    @return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$color}'/></svg>");
+  }
+
+  @function form-check-indeterminate-svg($color) {
+    @return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
+  }
+
+  &:hover {
+    &:not(:disabled) {
+      border-color: var(--border-hover);
+
+      &:checked,
+      &[type='checkbox']:indeterminate {
+        background-color: var(--bg-accent-02);
+        border-color: var(--bg-accent-02);
+      }
+    }
+  }
+
+  &:disabled {
+    @include input-disabled-styles;
+
+    &[type='checkbox']:indeterminate {
+      @include input-disabled-styles;
+
+      background-image: escape-svg(form-check-indeterminate-svg($neutral-40));
+    }
+  }
+
+  // Use disabled attribute in addition of :disabled pseudo-class
+  // See: https://github.com/twbs/bootstrap/issues/28247
+  &[disabled],
+  &:disabled {
+    ~ .form-check-label {
+      color: $input-disabled-color;
+    }
+
+    &:checked {
+      &[type='checkbox'] {
+        background-image: escape-svg(form-check-box-svg($neutral-40));
+      }
+
+      &[type='radio'] {
+        background-image: escape-svg(form-check-radio-svg($neutral-40));
+      }
+    }
+  }
+
+  &:focus-visible {
+    outline: 0;
+    border-color: $input-focus-border-color;
+    box-shadow: $input-focus-box-shadow;
+  }
+}
+
+.form-control {
+  &[disabled],
+  &:disabled {
+    &::placeholder {
+      color: var(--content-disabled);
+    }
+  }
+}
+
+// Fake disabled checkbox style
+.readonly-disabled-checkbox input.form-check-input {
+  @include input-disabled-styles;
+
+  &:hover:not(:disabled):checked {
+    @include input-disabled-styles;
+  }
+}
+
+.form-switch {
+  .form-check-input {
+    --bs-form-check-bg: var(--bg-dark-tertiary);
+
+    height: 20px;
+    margin: 0;
+    border: 0;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &:disabled {
+      opacity: 0.32;
+      background-color: var(--bg-dark-tertiary);
+
+      &:checked {
+        background-color: var(--bg-accent-01);
+        background-image: #{escape-svg(
+            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$component-active-color}'/></svg>")
+          )};
+      }
+    }
+  }
+}
+
+.form-check-label-description {
+  .form-text-inner {
+    margin-top: var(--spacing-01) !important;
+  }
+}
+
+.form-text {
+  .form-control[disabled] ~ & {
+    color: var(--content-disabled);
+  }
+
+  .form-text-inner {
+    display: flex;
+    gap: var(--spacing-02);
+    line-height: var(--line-height-02);
+    margin-top: var(--spacing-04);
+  }
+}
+
+.form-label {
+  &:has(+ .form-control[disabled], + .form-control-wrapper-disabled) {
+    color: var(--content-disabled);
+  }
+}
+
+.form-group {
+  margin-bottom: $form-group-margin-bottom;
+}
+
+.form-control-wrapper {
+  position: relative;
+
+  &.form-control-wrapper-disabled {
+    .form-control-start-icon,
+    .form-control-end-icon {
+      & > * {
+        color: var(--content-disabled);
+      }
+    }
+  }
+
+  .form-control-start-icon,
+  .form-control-end-icon {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .form-control-start-icon {
+    left: 0;
+    padding-left: calc(var(--form-control-padding-x) + var(--bs-border-width));
+  }
+
+  .form-control-end-icon {
+    right: 0;
+    padding-right: calc(var(--form-control-padding-x) + var(--bs-border-width));
+
+    .form-control-search-clear-btn {
+      @include reset-button;
+
+      display: flex;
+      justify-content: center;
+    }
+  }
+
+  --icon-width: 20px;
+  --form-control-padding-x: var(--spacing-04);
+  --form-control-icon-offset-y: var(--spacing-04);
+
+  &.form-control-wrapper-sm {
+    --form-control-padding-x: var(--spacing-03);
+    --form-control-icon-offset-y: var(--spacing-02);
+  }
+
+  &.form-control-wrapper-lg {
+    --form-control-padding-x: var(--spacing-05);
+    --form-control-icon-offset-y: var(--spacing-05);
+  }
+
+  .form-control-offset-start {
+    padding-left: calc(
+      var(--form-control-padding-x) + var(--form-control-icon-offset-y) +
+        var(--icon-width)
+    );
+  }
+
+  .form-control-offset-end {
+    padding-right: calc(
+      var(--form-control-padding-x) + var(--form-control-icon-offset-y) +
+        var(--icon-width)
+    );
+  }
+}
+
+.form-control,
+.form-select {
+  &:focus,
+  &:invalid:focus,
+  &.is-invalid:focus,
+  &:focus-visible,
+  &:invalid:focus-visible,
+  &.is-invalid:focus-visible {
+    color: $input-focus-color;
+    background-color: $input-focus-bg;
+    outline: 0;
+    border-color: $input-focus-border-color;
+    box-shadow: $input-focus-box-shadow;
+  }
+}
+
+.website-redesign {
+  label {
+    color: $form-text-color;
+    display: inline-block;
+    margin-bottom: var(--spacing-02);
+    font-weight: bold;
+
+    @include body-sm;
+  }
+
+  .checkbox-label {
+    margin-left: var(--spacing-04);
+  }
+}
+
+%input-focus-style {
+  border-color: $input-focus-border-color;
+  box-shadow: $form-check-input-focus-box-shadow;
+}
+
+input[type='range'] {
+  display: block;
+  width: 100%;
+}
+
+// Feedback states
+.has-success {
+  @include form-control-validation($bg-accent-01);
+}
+
+.has-warning {
+  @include form-control-validation($bg-warning-03);
+}
+
+.has-error {
+  @include form-control-validation($bg-danger-01);
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/gallery-search.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/gallery-search.scss
@@ -0,0 +1,136 @@
+.gallery-search {
+  margin-bottom: var(--spacing-16);
+
+  form {
+    display: flex;
+    justify-content: center;
+    gap: var(--spacing-04);
+
+    @include media-breakpoint-down(md) {
+      .form-control-wrapper {
+        width: 100%;
+      }
+    }
+
+    input {
+      padding-top: var(--spacing-06);
+      padding-right: var(--spacing-06);
+      padding-bottom: var(--spacing-06);
+      height: 48px;
+
+      @include media-breakpoint-up(md) {
+        width: 544px;
+      }
+    }
+  }
+
+  .search-hits {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-08);
+
+    .search-hits-loading,
+    .search-hits-empty,
+    .search-hit:first-of-type {
+      margin-top: var(--spacing-16);
+    }
+
+    .search-hit {
+      display: flex;
+      gap: var(--spacing-08);
+
+      .search-image {
+        a {
+          display: flex;
+          align-items: flex-start;
+          justify-content: center;
+          height: 100%;
+          width: 100%;
+          position: relative;
+
+          &::before {
+            content: '';
+            background: var(--neutral-90);
+            opacity: 0;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: var(--border-radius-base);
+            transition: opacity 0.15s ease-in-out;
+          }
+
+          img {
+            @include shadow-md;
+
+            width: 185px;
+            border-radius: var(--border-radius-base);
+
+            @include media-breakpoint-down(sm) {
+              width: 35vw;
+            }
+          }
+
+          &:hover {
+            &::before {
+              opacity: 0.08;
+              transition: opacity 0.15s ease-in-out;
+            }
+          }
+        }
+      }
+
+      .search-title {
+        margin-bottom: var(--spacing-04);
+        max-width: $templates-search-max-width;
+        display: flex;
+        align-items: center;
+
+        a {
+          @include heading-md;
+
+          line-clamp: 2;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow-y: hidden;
+          color: var(--content-primary);
+          text-decoration: none;
+
+          &:hover {
+            text-decoration: underline;
+          }
+
+          @include media-breakpoint-down(lg) {
+            @include heading-sm;
+          }
+
+          @include media-breakpoint-down(md) {
+            @include heading-xs;
+
+            line-clamp: 3;
+            -webkit-line-clamp: 3;
+          }
+        }
+      }
+
+      .search-highlight {
+        max-width: $templates-search-max-width;
+      }
+
+      .search-author {
+        display: block;
+
+        & + .badge-link-list {
+          margin-top: var(--spacing-06);
+        }
+      }
+
+      .gallery-official {
+        margin-left: var(--spacing-06);
+        vertical-align: text-top;
+      }
+    }
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/group-members.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/group-members.scss
@@ -0,0 +1,169 @@
+/* Styles for group-subscription members view */
+
+.structured-list.managed-entities-list {
+  /* Override scrolling behaviour on structured-list */
+  overflow: initial;
+  overflow-y: initial;
+  overflow-x: initial;
+}
+
+.managed-entities-list {
+  vertical-align: middle;
+
+  .security-state-invite-pending {
+    color: var(--content-disabled);
+  }
+
+  .security-state-managed {
+    color: var(--content-positive);
+  }
+
+  .security-state-not-managed {
+    color: var(--content-danger);
+  }
+
+  .managed-entity-row {
+    overflow-wrap: break-word;
+  }
+
+  .managed-user-security {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.managed-entities-table {
+  width: 100%;
+  table-layout: fixed;
+
+  @include media-breakpoint-up(sm) {
+    .cell-checkbox {
+      width: 5%;
+    }
+
+    .cell-email {
+      width: 30%;
+    }
+
+    &.group-sso-active .cell-email {
+      width: 29%;
+    }
+
+    .cell-name {
+      width: 20%;
+    }
+
+    .cell-last-active {
+      width: 20%;
+    }
+
+    .cell-security {
+      width: 12%;
+    }
+
+    .cell-managed {
+      width: 15%;
+    }
+
+    .cell-dropdown {
+      width: 26%;
+      min-width: 36px;
+      text-align: right;
+    }
+
+    .cell-accepted-invite {
+      width: 17%;
+    }
+
+    &.managed-users-active {
+      .cell-email {
+        width: 30%;
+      }
+
+      &.group-sso-active {
+        .cell-checkbox {
+          width: 3%;
+        }
+
+        .cell-email {
+          width: 37%;
+        }
+
+        .cell-last-active {
+          width: 16%;
+        }
+
+        .cell-name {
+          width: 18%;
+        }
+      }
+    }
+  }
+
+  @include media-breakpoint-up(xl) {
+    .cell-checkbox {
+      width: 5%;
+    }
+
+    .cell-email {
+      width: 41%;
+    }
+
+    &.group-sso-active .cell-email {
+      width: 41%;
+    }
+
+    .cell-name {
+      width: 20%;
+    }
+
+    .cell-last-active {
+      width: 15%;
+    }
+
+    .cell-security {
+      width: 10%;
+    }
+
+    .cell-managed {
+      width: 13%;
+    }
+
+    .cell-dropdown {
+      width: 19%;
+      min-width: 36px;
+      text-align: right;
+    }
+
+    .cell-accepted-invite {
+      width: 17%;
+    }
+
+    &.managed-users-active {
+      .cell-email {
+        width: 41%;
+      }
+
+      &.group-sso-active {
+        .cell-checkbox {
+          width: 3%;
+        }
+
+        .cell-email {
+          width: 36%;
+        }
+
+        .cell-name {
+          width: 18%;
+        }
+      }
+    }
+  }
+}
+
+.managed-user-security {
+  .material-symbols {
+    position: relative;
+    top: 4px;
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/icon.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/icon.scss
@@ -0,0 +1,20 @@
+.icon-double-green-round-background {
+  border-radius: 50%;
+  background: var(--green-30);
+  color: var(--dark-jungle-green);
+  display: inline-flex;
+  border: var(--spacing-04) solid var(--green-10);
+  padding: var(--spacing-04);
+
+  i {
+    font-size: 24px;
+  }
+}
+
+.icon-large-purple-text {
+  color: var(--sapphire-blue);
+
+  i {
+    font-size: 50px;
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/image.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/image.scss
@@ -0,0 +1,21 @@
+.img-rounded {
+  border-radius: var(--border-radius-large);
+}
+
+.images-border-radius-base {
+  img {
+    border-radius: var(--border-radius-base);
+  }
+}
+
+.images-border-radius-medium {
+  img {
+    border-radius: var(--border-radius-medium);
+  }
+}
+
+.images-border-radius-large {
+  img {
+    border-radius: var(--border-radius-large);
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/input-suggestions.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/input-suggestions.scss
@@ -0,0 +1,20 @@
+.input-suggestions {
+  position: relative;
+}
+
+.input-suggestions-main {
+  position: absolute;
+  top: 0;
+  background-color: transparent;
+}
+
+.input-suggestions-shadow {
+  background-color: $input-bg;
+  color: var(--content-placeholder);
+
+  & + .input-suggestions-main {
+    &:focus {
+      background-color: transparent;
+    }
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/integrations-panel.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/integrations-panel.scss
@@ -0,0 +1,84 @@
+:root {
+  --integrations-panel-bg: var(--bg-dark-primary);
+  --integrations-panel-color: var(--content-primary-dark);
+  --integrations-panel-description-color: var(--content-secondary-dark);
+  --integrations-panel-card-border: var(--border-divider-dark);
+  --integrations-panel-card-button-hover-background: var(--bg-dark-secondary);
+  --integrations-panel-card-button-background: var(--bg-dark-primary);
+  --integrations-panel-badge-color: var(--content-primary);
+  --integrations-panel-badge-background: var(--bg-light-tertiary);
+}
+
+@include theme('light') {
+  --integrations-panel-bg: var(--white);
+  --integrations-panel-color: var(--content-primary);
+  --integrations-panel-description-color: var(--content-secondary);
+  --integrations-panel-card-border: var(--border-divider);
+  --integrations-panel-card-button-hover-background: var(--bg-light-secondary);
+  --integrations-panel-card-button-background: var(--white);
+  --integrations-panel-badge-color: var(--content-primary);
+  --integrations-panel-badge-background: var(--bg-light-tertiary);
+}
+
+.integrations-panel {
+  background-color: var(--integrations-panel-bg);
+  height: 100%;
+}
+
+.integrations-panel-card-button {
+  all: unset;
+  background-color: var(--integrations-panel-card-button-background);
+  width: 100%;
+
+  &:hover {
+    background-color: var(
+      --integrations-panel-card-button-hover-background
+    ) !important;
+  }
+}
+
+.integrations-panel-card-contents {
+  display: flex;
+  margin: 0 var(--spacing-04);
+  padding: var(--spacing-04) 0;
+  gap: var(--spacing-04);
+  border-bottom: 1px solid var(--integrations-panel-card-border);
+}
+
+.integrations-panel-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  .material-symbols {
+    background: linear-gradient(
+      245.63deg,
+      #214475 0%,
+      #254c84 28.54%,
+      #6597e0 96.69%
+    );
+    color: transparent;
+    background-clip: text;
+  }
+}
+
+.integrations-panel-card-inner {
+  flex: 1;
+}
+
+.integrations-panel-card-premium-badge.badge {
+  color: var(--integrations-panel-badge-color);
+  background-color: var(--integrations-panel-badge-background) !important;
+  font-weight: 600;
+}
+
+.integrations-panel-card-title {
+  font-size: var(--font-size-02);
+  color: var(--integrations-panel-color);
+}
+
+.integrations-panel-card-description {
+  font-size: var(--font-size-01);
+  color: var(--integrations-panel-description-color);
+  margin-bottom: 0;
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/interstitial.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/interstitial.scss
@@ -0,0 +1,23 @@
+.interstitial {
+  max-width: 400px;
+  padding: var(--spacing-08);
+  margin: 0 auto;
+  background: var(--bg-light-primary);
+  display: flex;
+  flex-direction: column;
+
+  .logo {
+    width: 130px;
+    margin: 0 auto;
+    margin-bottom: var(--spacing-08);
+  }
+
+  .btn {
+    width: 100%;
+  }
+
+  .interstitial-header {
+    margin-top: 0;
+    margin-bottom: var(--spacing-02);
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/invite.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/invite.scss
@@ -0,0 +1,25 @@
+.link-sharing-invite {
+  font-family: 'Noto Sans', sans-serif;
+
+  .link-sharing-invite-header {
+    font-size: var(--font-size-07);
+    line-height: var(--line-height-06);
+  }
+}
+
+.sharing-updates {
+  h1 {
+    // heading-sm
+    font-size: var(--font-size-05);
+    line-height: var(--line-height-04);
+    color: var(--content-primary);
+  }
+
+  p {
+    color: var(--content-secondary);
+  }
+
+  small {
+    font-size: var(--font-size-02);
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/link.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/link.scss
@@ -0,0 +1,13 @@
+.previous-page-link-container {
+  margin-bottom: var(--spacing-09);
+}
+
+.previous-page-link {
+  @extend .link-black-text;
+  @include body-sm;
+
+  i {
+    margin-right: var(--spacing-02);
+    padding-bottom: 3px;
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/list-group.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/list-group.scss
@@ -0,0 +1,5 @@
+.list-group-item {
+  display: flex;
+  align-items: center;
+  min-height: 48px;
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/list.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/list.scss
@@ -0,0 +1,42 @@
+@mixin list-checkmark {
+  $icon-size: 24px;
+
+  ul {
+    list-style: none;
+    margin-top: var(--spacing-06);
+    padding-left: 0;
+  }
+
+  li {
+    min-height: $icon-size;
+    background-size: $icon-size $icon-size;
+    margin-bottom: var(--spacing-05);
+    padding-left: calc(var(--spacing-05) + $icon-size);
+
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      margin-bottom: var(--spacing-04);
+    }
+  }
+}
+
+.list-checkmark-green {
+  @include list-checkmark;
+
+  li {
+    background: url('../../../../public/img/website-redesign/check-in-green-circle.svg')
+      no-repeat left top;
+  }
+}
+
+.list-checkmark-blue {
+  @include list-checkmark;
+
+  li {
+    background: url('../../../../public/img/website-redesign/check-in-blue-circle.svg')
+      no-repeat left top;
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/loading-spinner.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/loading-spinner.scss
@@ -0,0 +1,23 @@
+.loading {
+  display: inline-flex;
+
+  .spinner-border-sm,
+  .spinner-border {
+    // Ensure the thickness of the spinner is independent of the font size of its container
+    font-size: var(--font-size-03);
+  }
+
+  // Adjust the small spinner to be 25% larger than Bootstrap's default in each dimension
+  .spinner-border-sm {
+    --bs-spinner-width: 1.25rem;
+    --bs-spinner-height: 1.25rem;
+  }
+}
+
+.full-size-loading-spinner-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/menu-bar.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/menu-bar.scss
@@ -0,0 +1,13 @@
+.menu-bar-toggle {
+  border: none;
+  border-radius: var(--border-radius-base);
+  padding: var(--spacing-02);
+  font-size: var(--font-size-03);
+  line-height: var(--line-height-03);
+  font-weight: 400;
+  box-sizing: border-box;
+
+  &.dropdown-toggle::after {
+    display: none;
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/modal.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/modal.scss
@@ -0,0 +1,110 @@
+:root {
+  --bs-heading-color: var(--content-primary);
+}
+
+@include media-breakpoint-up(sm) {
+  .modal-dialog {
+    @include modal-md;
+  }
+
+  .modal-sm {
+    @include modal-sm;
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .modal-md {
+    @include modal-md;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .modal-lg {
+    @include modal-lg;
+  }
+}
+
+.modal-content {
+  @include shadow-lg;
+
+  border-radius: var(--border-radius-base);
+
+  .modal-header {
+    .modal-title {
+      @include heading-sm;
+
+      line-height: 35px;
+    }
+
+    .btn-close {
+      margin-right: 0;
+    }
+  }
+
+  .modal-footer {
+    padding: var(--spacing-06);
+    gap: var(--spacing-04);
+
+    > * {
+      margin: 0;
+    }
+  }
+}
+
+// Git bridge modal
+.git-bridge-copy {
+  background: var(--bg-light-secondary);
+  color: var(--content-primary);
+  padding: var(--spacing-05);
+  border-radius: var(--border-radius-base);
+  display: flex;
+  justify-content: center;
+  gap: var(--spacing-05);
+  align-items: center;
+  margin: var(--spacing-09) 0;
+
+  & code {
+    color: var(--content-primary);
+    word-break: break-word;
+  }
+}
+
+.git-bridge-optional-tokens {
+  border: 1px solid var(--border-primary);
+  border-radius: var(--border-radius-base);
+  padding: var(--spacing-07);
+  margin: var(--spacing-09) 0;
+}
+
+.git-bridge-optional-tokens-header {
+  font-size: 120%;
+  font-weight: bold;
+  margin-bottom: var(--spacing-05);
+}
+
+.git-bridge-optional-tokens-actions {
+  margin-top: var(--spacing-05);
+}
+
+.upgrade-track-changes-modal {
+  .teaser-title {
+    font-family: var(--font-sans);
+    font-size: var(--font-size-05);
+    margin-bottom: var(--spacing-05);
+    margin-top: var(--spacing-05);
+    color: var(--content-secondary);
+  }
+
+  ul.list-unstyled li {
+    font-family: var(--font-sans);
+    padding: var(--spacing-02) 0;
+    color: var(--content-secondary);
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-04);
+  }
+
+  ul.list-unstyled li .check-icon {
+    padding-top: 2px;
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/nav.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/nav.scss
@@ -0,0 +1,107 @@
+@import 'bootstrap-5/scss/functions';
+
+:root {
+  // Basics
+  --navbar-item-spacing-horizontal: var(--spacing-06);
+  --navbar-bg: var(--bg-dark-primary);
+  --navbar-border: transparent;
+  --navbar-padding-h: var(--spacing-05);
+  --navbar-padding: 0 var(--navbar-padding-h);
+  --navbar-brand-width: 130px;
+  --navbar-brand-image-url: url('../../../../public/img/ol-brand/overleaf-white.svg');
+
+  // Title, when used instead of a logo
+  --navbar-title-font-size: var(--font-size-05);
+  --navbar-title-color: var(--neutral-20);
+  --navbar-title-color-hover: var(--neutral-40);
+
+  // Button-like top-level items
+  --navbar-btn-font-size: #{$font-size-base};
+  --navbar-btn-border-radius: #{$border-radius-full};
+  --navbar-btn-border-width: #{$spacing-01};
+  --navbar-btn-font-weight: #{$font-weight-base};
+  --navbar-btn-padding-v: #{$spacing-02};
+  --navbar-btn-padding-h: #{$spacing-06};
+  --navbar-btn-line-height: #{$line-height-base};
+
+  // Properties of "subdued" items
+  --navbar-subdued-padding: calc(
+      var(--navbar-btn-padding-v) + var(--navbar-btn-border-width)
+    )
+    calc(var(--navbar-btn-padding-h) + 1px);
+  --navbar-subdued-color: var(--white);
+  --navbar-subdued-hover-bg: var(--white);
+  --navbar-subdued-hover-color: var(--green-50);
+
+  // Properties of "primary" items
+  --navbar-primary-color: var(--white);
+  --navbar-primary-border-color: var(--green-50);
+  --navbar-primary-bg: var(--green-50);
+  --navbar-primary-hover-bg: var(--green-60);
+  --navbar-primary-hover-border-color: var(--navbar-primary-hover-bg);
+
+  // Links
+  --navbar-link-color: var(--white);
+  --navbar-link-border-color: var(--navbar-link-color);
+  --navbar-link-hover-color: var(--white);
+  --navbar-link-hover-bg: var(--green-50);
+  --navbar-link-hover-border-color: var(--navbar-link-hover-bg);
+
+  // Toggler
+  --navbar-toggler-expanded-color: var(--navbar-link-color);
+  --navbar-toggler-expanded-bg: var(--blue-60);
+
+  // Mobile view
+  --navbar-hamburger-submenu-bg: var(--bg-dark-secondary);
+  --navbar-hamburger-submenu-item-color: var(--navbar-link-color);
+  --navbar-hamburger-submenu-item-hover-color: var(--navbar-link-color);
+  --navbar-hamburger-submenu-item-hover-bg: var(--navbar-link-hover-bg);
+}
+
+.nav {
+  margin-bottom: 0;
+  padding-left: 0;
+  list-style: none;
+  display: block;
+
+  > li {
+    position: relative;
+    display: block;
+
+    > a {
+      position: relative;
+      display: block;
+      padding: var(--spacing-04) var(--spacing-06);
+
+      &:hover,
+      &:focus {
+        text-decoration: none;
+        background-color: var(--bg-info-01);
+        color: var(--white);
+      }
+    }
+
+    // Disabled state sets text to gray and nukes hover/tab effects
+    &.disabled > a {
+      color: var(--content-disabled);
+
+      &:hover,
+      &:focus {
+        color: var(--content-disabled);
+        text-decoration: none;
+        background-color: transparent;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  // Open dropdowns
+  .open > a {
+    &,
+    &:hover,
+    &:focus {
+      background-color: var(--bg-info-01);
+      border-color: var(--link-ui);
+    }
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/navbar.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/navbar.scss
@@ -0,0 +1,241 @@
+// Default navbar
+.navbar-default {
+  background-color: var(--navbar-bg);
+  border-color: var(--navbar-border);
+  padding: var(--navbar-padding);
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: $header-height;
+
+  .navbar-container {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .navbar-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex: 1;
+  }
+
+  .navbar-brand {
+    width: var(--navbar-brand-width);
+    height: $header-height;
+    padding: 0;
+    background: var(--navbar-brand-image-url) no-repeat left center;
+    background-size: contain;
+  }
+
+  .navbar-title {
+    display: inline-block;
+    font-size: var(--navbar-title-font-size);
+    color: var(--navbar-title-color);
+    text-decoration: none;
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: var(--navbar-title-color-hover);
+    }
+  }
+
+  .navbar-nav {
+    > li {
+      display: inline-flex;
+      flex-shrink: 0;
+
+      > .nav-link,
+      > .dropdown-toggle {
+        display: block;
+        color: var(--navbar-link-color);
+        background-color: transparent;
+        padding: var(--navbar-btn-padding-v) var(--navbar-btn-padding-h);
+        margin-left: var(--navbar-item-spacing-horizontal);
+        border: var(--navbar-btn-border-width) solid
+          var(--navbar-link-border-color);
+        border-radius: var(--navbar-btn-border-radius);
+        font-size: var(--navbar-btn-font-size);
+        font-weight: var(--navbar-btn-font-weight);
+        line-height: var(--navbar-btn-line-height);
+        text-decoration: none;
+
+        &.show,
+        &:hover,
+        &:focus {
+          color: var(--navbar-link-hover-color);
+          background-color: var(--navbar-link-hover-bg);
+          border-color: var(--navbar-link-hover-border-color);
+        }
+      }
+
+      &.subdued > .nav-link,
+      &.subdued > .dropdown-toggle {
+        border: 0;
+        color: var(--navbar-subdued-color);
+        padding: var(--navbar-subdued-padding);
+        margin-left: 0;
+
+        &.show,
+        &:hover,
+        &:focus {
+          color: var(--navbar-subdued-hover-color);
+          background-color: var(--navbar-subdued-hover-bg);
+        }
+      }
+
+      &.primary > .nav-link {
+        color: var(--navbar-primary-color);
+        background-color: var(--navbar-primary-bg);
+        border-color: var(--navbar-primary-border-color);
+
+        &.show,
+        &:hover,
+        &:focus {
+          background-color: var(--navbar-primary-hover-bg);
+          border-color: var(--navbar-primary-hover-border-color);
+        }
+      }
+    }
+  }
+
+  .navbar-toggler {
+    --bs-navbar-toggler-padding-x: var(--spacing-04);
+
+    color: var(--navbar-link-color);
+    border-radius: var(--border-radius-base);
+    border-width: 0;
+    transition: 0.2s ease-out;
+
+    &:not(.collapsed) {
+      color: var(--navbar-toggler-expanded-color);
+      background-color: var(--navbar-toggler-expanded-bg);
+      transition: 0.2s ease-in;
+    }
+
+    & .material-symbols {
+      font-size: inherit;
+      font-weight: bold;
+      vertical-align: middle;
+    }
+  }
+
+  .navbar-collapse,
+  .navbar-form {
+    border-color: var(--navbar-border);
+  }
+}
+
+@include media-breakpoint-only(lg) {
+  :root {
+    --navbar-btn-padding-h: #{$spacing-04};
+  }
+}
+
+// Different (stacked) layout for smaller screens
+@include media-breakpoint-down(lg) {
+  .navbar-default .navbar-collapse {
+    &.show {
+      min-height: calc(100vh - $header-height);
+    }
+
+    background-color: var(--navbar-bg);
+    margin: 0 calc(-1 * var(--navbar-padding-h));
+    z-index: 1;
+
+    .navbar-nav {
+      > li {
+        display: block;
+
+        > a,
+        > .dropdown-toggle,
+        > .nav-link {
+          margin: 0;
+          padding-top: var(--spacing-05);
+          padding-bottom: var(--spacing-05);
+          width: 100%;
+          text-align: left;
+          border-radius: 0;
+          border-width: 0;
+        }
+
+        // Dropdowns get custom display when collapsed
+        .dropdown-menu.show {
+          --bs-dropdown-spacer: 0;
+
+          box-shadow: none;
+          background-color: var(--navbar-hamburger-submenu-bg);
+          width: auto;
+
+          .dropdown-item {
+            padding: var(--spacing-02) var(--spacing-06) var(--spacing-02)
+              var(--spacing-08);
+
+            &:not(.disabled) {
+              color: var(--navbar-hamburger-submenu-item-color);
+
+              &:hover,
+              &:focus {
+                color: var(--navbar-hamburger-submenu-item-hover-color);
+                background-color: var(--navbar-hamburger-submenu-item-hover-bg);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+// Accessibility
+.skip-to-content {
+  color: var(--navbar-link-color);
+  background-color: var(--navbar-link-bg);
+  border: var(--spacing-01) solid transparent;
+  border-radius: var(--navbar-btn-border-radius);
+  font-size: var(--navbar-btn-font-size);
+  font-weight: var(--navbar-btn-font-weight);
+  left: calc(var(--navbar-brand-width) + var(--spacing-09));
+  line-height: var(--navbar-btn-line-height);
+  padding: var(--navbar-btn-padding-v) var(--navbar-btn-padding-h);
+  position: absolute;
+  top: -200px;
+  z-index: 1;
+
+  &:focus {
+    background-color: var(--navbar-link-hover-bg);
+    border: var(--spacing-01) solid var(--navbar-link-hover-color);
+    color: var(--white);
+    text-decoration: none;
+    top: calc(($header-height - 36px) / 2); // 36px is the height of the link
+  }
+}
+
+.website-redesign-navbar,
+.website-redesign .navbar-default {
+  --navbar-title-color: var(--content-primary);
+  --navbar-title-color-hover: var(--content-secondary);
+  --navbar-brand-image-url: url('../../../../public/img/ol-brand/overleaf-black.svg');
+  --navbar-subdued-color: var(--content-primary);
+  --navbar-subdued-hover-bg: var(--bg-dark-primary);
+  --navbar-subdued-hover-color: var(--content-primary-dark);
+  --navbar-bg: var(--bg-light-primary);
+
+  // Navbar links
+  --navbar-link-color: var(--content-primary);
+  --navbar-link-border-color: var(--border-primary);
+  --navbar-link-hover-color: var(--navbar-link-color);
+  --navbar-link-hover-bg: var(--bg-light-tertiary);
+  --navbar-link-hover-border-color: var(--navbar-link-border-color);
+
+  // Toggler
+  --navbar-toggler-expanded-color: var(--white);
+  --navbar-toggler-expanded-bg: var(--bg-dark-primary);
+
+  // Mobile view
+  --navbar-hamburger-submenu-bg: var(--bg-light-secondary);
+  --navbar-hamburger-submenu-item-color: var(--navbar-link-color);
+  --navbar-hamburger-submenu-item-hover-color: var(--white);
+  --navbar-hamburger-submenu-item-hover-bg: var(--bg-dark-primary);
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/notifications.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/notifications.scss
@@ -0,0 +1,259 @@
+.notification-body {
+  // will be deprecated once notifications moved to use .notification (see below)
+  flex-grow: 1;
+  width: 90%;
+
+  @include media-breakpoint-up(md) {
+    width: auto;
+  }
+}
+
+.notification-action {
+  $line-height-computed: $font-size-base * $line-height-base; // 24px
+
+  // will be deprecated once notifications moved to use .notification (see below)
+  margin-top: calc($line-height-computed / 2); // match paragraph padding
+  order: 1;
+
+  @include media-breakpoint-up(md) {
+    margin-top: 0;
+    order: 0;
+    padding-left: $spacing-05;
+  }
+}
+
+.notification-close {
+  // will be deprecated once notifications moved to use .notification (see below)
+  padding-left: $spacing-05;
+  text-align: right;
+  width: 10%;
+
+  button {
+    aspect-ratio: 1;
+    border-radius: 50%;
+    display: flex;
+    float: right;
+    padding: 5.5px;
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+
+    &:hover,
+    &:focus {
+      background-color: rgba($neutral-90, 0.08);
+      color: var(--content-secondary);
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    width: auto;
+  }
+}
+
+.notification {
+  border-radius: $border-radius-base;
+  color: var(--content-primary);
+  display: flex;
+  padding: 0 $spacing-06; // vertical padding added by elements within notification
+  width: 100%;
+
+  a:not(.btn) {
+    text-decoration: underline;
+  }
+
+  p {
+    margin-bottom: $spacing-02;
+  }
+
+  .notification-icon {
+    flex-grow: 0;
+    padding: 18px $spacing-06 0 0;
+  }
+
+  .notification-content-and-cta {
+    // shared container to align cta with text on smaller screens
+    display: flex;
+    flex-grow: 1;
+    flex-wrap: wrap;
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .notification-content {
+    flex-grow: 1;
+    padding: $spacing-06 0;
+    width: 100%;
+  }
+
+  .notification-cta {
+    padding-bottom: $spacing-06;
+
+    a {
+      font-weight: 700;
+    }
+
+    a,
+    button {
+      white-space: nowrap;
+    }
+  }
+
+  .notification-disclaimer {
+    color: var(--neutral-60);
+    font-size: $font-size-sm;
+    padding-bottom: $spacing-06;
+  }
+
+  .notification-close-btn {
+    height: $spacing-12;
+    align-items: center;
+    display: flex;
+    padding: 0 0 0 $spacing-06;
+
+    button {
+      aspect-ratio: 1;
+      border-radius: 50%;
+      display: flex;
+      float: right;
+      padding: 5.5px;
+      cursor: pointer;
+      background: transparent;
+      border: 0;
+
+      &:hover,
+      &:focus {
+        background-color: rgba($neutral-90, 0.08);
+        color: var(--content-secondary);
+      }
+    }
+  }
+
+  &.notification-type-info {
+    background-color: var(--bg-info-03);
+    border: 1px solid var(--blue-20);
+
+    .notification-icon {
+      color: var(--blue-50);
+    }
+  }
+
+  &.notification-type-success {
+    background-color: var(--bg-accent-03);
+    border: 1px solid var(--green-20);
+
+    .notification-icon {
+      color: var(--green-50);
+    }
+  }
+
+  &.notification-type-warning {
+    background-color: var(--bg-warning-03);
+    border: 1px solid var(--yellow-20);
+
+    .notification-icon {
+      color: var(--yellow-40);
+    }
+  }
+
+  &.notification-type-error {
+    background-color: var(--bg-danger-03);
+    border: 1px solid var(--red-20);
+
+    .notification-icon {
+      color: var(--red-50);
+    }
+  }
+
+  &.notification-type-offer {
+    background-color: var(--bg-light-primary);
+    border: 1px solid var(--neutral-20);
+
+    .notification-icon {
+      color: var(--neutral-50);
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    &:not(.notification-cta-below-content) {
+      .notification-content-and-cta {
+        flex-wrap: nowrap;
+      }
+
+      .notification-content {
+        width: auto;
+      }
+
+      .notification-cta {
+        height: $spacing-12;
+        padding-left: $spacing-06;
+        padding-bottom: 0;
+        align-items: center;
+        display: flex;
+      }
+    }
+  }
+}
+
+.notification-with-scroll-margin {
+  scroll-margin: $spacing-06;
+}
+
+.notification-list {
+  .notification {
+    margin-bottom: $spacing-07;
+  }
+}
+
+// Reconfirmation notification
+
+.reconfirm-notification {
+  display: flex;
+  width: 100%;
+
+  .fa-warning {
+    margin-right: $spacing-05;
+  }
+
+  .btn-reconfirm {
+    float: right;
+    margin-left: $spacing-05;
+    text-transform: capitalize;
+  }
+}
+
+.group-invitation-cancel-subscription-notification-buttons {
+  display: flex;
+  align-items: center;
+}
+
+// Settings page
+.affiliations-table {
+  .reconfirm-notification {
+    margin: 0 auto $spacing-05 auto !important;
+    padding: $spacing-07;
+  }
+
+  .reconfirm-row {
+    td {
+      border: 0;
+
+      .alert {
+        border: 0;
+        padding: 0;
+      }
+
+      :not(.alert) {
+        .reconfirm-notification {
+          background-color: var(--neutral-10);
+          border-radius: $border-radius-base;
+
+          .fa-warning {
+            color: var(--yellow-40);
+          }
+        }
+      }
+    }
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/pagination.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/pagination.scss
@@ -0,0 +1,62 @@
+// Pagination (multiple pages)
+// --------------------------------------------------
+.pagination {
+  display: inline-block;
+  padding-left: 0;
+  margin: 0;
+
+  > li {
+    display: inline-block;
+
+    > a,
+    > span,
+    > button {
+      position: relative;
+      float: left; // Collapse white-space
+      padding: var(--spacing-04) var(--spacing-06);
+      line-height: var(--line-height-base);
+      text-decoration: none;
+      color: var(--neutral-90);
+      background-color: #fff;
+      border: 1px solid var(--neutral-30);
+      margin-left: -1px;
+      font-weight: 600;
+      transition: background-color 0.15s ease-in-out;
+
+      &:hover,
+      &:focus {
+        color: var(--neutral-90);
+        background-color: var(--neutral-10);
+        border-color: var(--neutral-30);
+        text-decoration: none;
+        transition: background-color 0.15s ease-in-out;
+      }
+    }
+
+    &:first-child {
+      > a,
+      > span,
+      > button {
+        margin-left: 0;
+      }
+    }
+  }
+
+  > .active > a,
+  > .active > span,
+  > .active > button {
+    &,
+    &:hover,
+    &:focus {
+      z-index: 2;
+      color: var(--green-70);
+      background-color: var(--green-10);
+      border-color: var(--neutral-30);
+      cursor: default;
+    }
+  }
+
+  .ellipses {
+    pointer-events: none;
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/panel-heading.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/panel-heading.scss
@@ -0,0 +1,44 @@
+:root {
+  --panel-heading-color: var(--content-primary);
+  --panel-heading-button-hover-color: var(--bg-light-tertiary);
+
+  @include theme('default') {
+    .ide-redesign-main {
+      --panel-heading-color: var(--content-primary-dark);
+      --panel-heading-button-hover-color: var(--bg-dark-tertiary);
+    }
+  }
+}
+
+.panel-heading {
+  color: var(--panel-heading-color);
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-03) var(--spacing-02);
+  gap: 2px;
+}
+
+.panel-heading-label {
+  font-size: var(--font-size-02);
+  font-weight: bold;
+  margin: 0;
+  flex: 1;
+  text-align: start;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-02);
+}
+
+.panel-heading-close-button {
+  display: flex;
+  align-items: center;
+  border: none;
+  background-color: transparent;
+  color: var(--panel-heading-color);
+  padding: var(--spacing-01);
+
+  &:hover,
+  &:focus {
+    background-color: var(--panel-heading-button-hover-color);
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/popover.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/popover.scss
@@ -0,0 +1,16 @@
+.popover {
+  @include shadow-md;
+  @include dark-bg;
+
+  line-height: var(--line-height-02);
+}
+
+.popover-header {
+  padding-bottom: 0;
+  margin-bottom: var(--spacing-02);
+  font-weight: 600;
+
+  & + .popover-body {
+    padding-top: 0;
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/quote.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/quote.scss
@@ -0,0 +1,110 @@
+blockquote {
+  p {
+    display: inline;
+  }
+}
+
+blockquote.quote-large-text-centered {
+  text-align: center;
+  font-size: var(--font-size-07);
+  font-weight: 600;
+  line-height: var(--line-height-06);
+
+  // customize open/close quote placement.
+  // Otherwise, close is after footer and before is above quote
+  &::before,
+  &::after {
+    content: none;
+  }
+
+  .quote {
+    margin-bottom: var(--spacing-08);
+
+    &::before {
+      content: open-quote;
+    }
+
+    &::after {
+      content: close-quote;
+    }
+  }
+
+  .quote-img {
+    img {
+      border-radius: 50%;
+      height: 64px;
+      max-width: 64px;
+    }
+  }
+
+  footer {
+    color: inherit;
+    font-size: var(--font-size-03);
+    font-weight: 400;
+    line-height: var(--line-height-03);
+    padding: var(--spacing-04) 0 0 0;
+
+    &::before {
+      content: none;
+    }
+
+    .quote-link {
+      text-align: center;
+      margin-top: var(--spacing-05);
+    }
+  }
+
+  @include media-breakpoint-down(lg) {
+    font-size: var(--font-size-04);
+    line-height: var(--line-height-04);
+
+    footer {
+      font-size: var(--font-size-02);
+      line-height: var(--line-height-02);
+    }
+  }
+}
+
+blockquote.quote-left-green-border {
+  border-left: 2px solid var(--green-60);
+  text-align: left;
+  font-size: var(--font-size-07);
+  font-weight: 600;
+  line-height: var(--line-height-06);
+  color: var(--neutral-90);
+  padding: var(--spacing-04) 0 var(--spacing-04) var(--spacing-06);
+
+  // customize open/close quote placement.
+  // Otherwise, close is after footer and before is above quote
+  &::before,
+  &::after {
+    content: none;
+  }
+
+  .quote {
+    &::before {
+      content: open-quote;
+    }
+
+    &::after {
+      content: close-quote;
+    }
+  }
+
+  footer {
+    @include heading-xs;
+
+    color: var(--neutral-70);
+    font-weight: 400;
+    margin: var(--spacing-09) 0 0 0;
+    padding: 0;
+
+    &::before {
+      content: '\2014 \00A0';
+    }
+  }
+
+  .quote-link {
+    margin-top: var(--spacing-05);
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/radio-chip.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/radio-chip.scss
@@ -0,0 +1,56 @@
+.radio-chip {
+  background: #fff;
+  border: 1px solid var(--neutral-60);
+  border-radius: var(--border-radius-full);
+  color: var(--neutral-90);
+  cursor: pointer;
+  display: inline-flex;
+  font-weight: 400;
+  gap: var(--spacing-02);
+  inline-size: fit-content;
+  line-height: 1.4;
+  padding: var(--spacing-04) var(--spacing-06) var(--spacing-04)
+    var(--spacing-04);
+
+  @include media-breakpoint-down(md) {
+    width: 100%;
+  }
+
+  &:hover {
+    background: var(--neutral-20);
+  }
+
+  &:focus-within {
+    box-shadow: 0 0 0 2px var(--blue-30);
+  }
+
+  input[type='radio'] {
+    accent-color: var(--green-50);
+    cursor: pointer;
+    height: 16px;
+    margin: var(--spacing-02);
+    width: 15px;
+  }
+}
+
+.radio-chip[data-disabled='true'] {
+  border-color: var(--neutral-20);
+
+  &:hover {
+    background: #fff;
+    cursor: not-allowed;
+  }
+}
+
+.radio-group {
+  display: flex;
+  flex-flow: column wrap;
+  grid-gap: var(--spacing-06);
+  height: 180px;
+  width: 100%;
+
+  @include media-breakpoint-down(md) {
+    flex-wrap: nowrap;
+    height: 100%;
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/recurly.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/recurly.scss
@@ -0,0 +1,9 @@
+.recurly-element-card {
+  height: 50px;
+  border: 1px solid var(--neutral-60);
+  border-radius: var(--border-radius-base);
+
+  &.recurly-element-card-invalid {
+    border-color: var(--red-50);
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/select.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/select.scss
@@ -0,0 +1,15 @@
+.select-wrapper {
+  position: relative;
+}
+
+.select-trigger {
+  cursor: default;
+
+  & + .form-control-end-icon {
+    pointer-events: none;
+  }
+}
+
+.select-highlighted {
+  background-color: var(--bg-light-secondary);
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/stepper.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/stepper.scss
@@ -0,0 +1,20 @@
+.stepper {
+  display: flex;
+  gap: var(--spacing-05);
+  width: 100%;
+  height: 6px;
+
+  .step {
+    width: 100%;
+    border-radius: 6px;
+    background: var(--neutral-20);
+  }
+
+  .step.completed {
+    background: var(--green-50);
+  }
+
+  .step.active {
+    background: var(--green-20);
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/styled-text.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/styled-text.scss
@@ -0,0 +1,57 @@
+.text-with-bg {
+  @include font-mono;
+
+  padding: 0 var(--spacing-04);
+  border-radius: var(--border-radius-medium);
+  margin-top: var(--spacing-02);
+
+  // will make all spans content inline while avoiding overflowing the viewport in mobile
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/display#flow-root
+  // https://css-tricks.com/display-flow-root/
+  display: inline flow-root;
+
+  &.tangerine-bg {
+    background-color: var(--vivid-tangerine);
+  }
+
+  &.purple-bg {
+    background-color: var(--ceil);
+  }
+
+  &.yellow-bg {
+    background-color: var(--caramel);
+  }
+
+  &.green-bg {
+    background-color: var(--green-30);
+  }
+}
+
+.mono-text {
+  @include font-mono;
+  @include body-lg;
+
+  color: var(--green-60);
+  font-weight: 500;
+  margin: 0;
+}
+
+.eyebrow-text {
+  @extend .mono-text;
+
+  display: block;
+  margin-bottom: var(--spacing-04);
+}
+
+p:has(.eyebrow-text) {
+  margin-bottom: 0;
+}
+
+p:has(.eyebrow-text) + h1,
+p:has(.eyebrow-text) + h2,
+p:has(.eyebrow-text) + h3,
+p:has(.eyebrow-text) + h4,
+p:has(.eyebrow-text) + h5,
+p:has(.eyebrow-text) + h6 {
+  margin-top: 0;
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/system-messages.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/system-messages.scss
@@ -0,0 +1,19 @@
+@use 'sass:color';
+
+.system-messages {
+  @include list-unstyled;
+
+  margin: 0;
+
+  .system-message {
+    padding: var(--spacing-03) var(--spacing-05);
+    background-color: var(--bg-info-01);
+    color: var(--content-primary-dark);
+    border-bottom: solid 1px color.adjust($blue-50, $lightness: 10%);
+
+    a {
+      color: var(--content-primary-dark);
+      text-decoration: underline;
+    }
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/table.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/table.scss
@@ -0,0 +1,71 @@
+.table-container {
+  flex: 1;
+  margin-bottom: var(--spacing-06);
+  background-color: var(--white);
+  padding: var(--spacing-04);
+
+  .table {
+    margin-bottom: initial;
+  }
+}
+
+.table {
+  th,
+  td {
+    a {
+      text-decoration: none;
+    }
+  }
+
+  tbody {
+    tr {
+      &:last-child {
+        td,
+        th {
+          border-bottom-width: 0;
+        }
+      }
+
+      th[scope='row'] {
+        font-weight: normal;
+      }
+
+      th {
+        .form-label {
+          font-weight: normal;
+        }
+      }
+    }
+  }
+
+  .dropdown {
+    .dropdown-table-button-toggle {
+      @include action-button;
+
+      padding: var(--spacing-04);
+    }
+  }
+}
+
+.table-container-bordered {
+  padding: var(--spacing-04);
+  border-color: $table-border-color;
+  border-radius: var(--border-radius-base);
+  border-width: var(--bs-border-width);
+  border-style: solid;
+}
+
+.table-striped {
+  tr,
+  td,
+  th {
+    border-top-width: 0;
+    border-bottom-width: 0;
+  }
+
+  > tbody > tr:nth-of-type(#{$table-striped-order}) {
+    &:hover > * {
+      --#{$prefix}table-hover-bg: var(--bg-light-tertiary);
+    }
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/tabs.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/tabs.scss
@@ -0,0 +1,88 @@
+.ol-tabs {
+  --border-width-base: 3px;
+
+  .nav-tabs-container {
+    overflow-x: auto;
+    display: flex;
+    flex-direction: column;
+
+    @include media-breakpoint-down(md) {
+      display: block;
+    }
+
+    .nav-tabs {
+      display: inline-flex;
+      gap: var(--spacing-04);
+      margin: 0 auto;
+      padding: 0;
+      border-bottom: var(--border-width-base) solid var(--border-divider);
+      text-align: center;
+      border-top: 2px solid transparent; // so that top focus border is visible
+      min-width: max-content; // This is for horizontal scrolling
+
+      li {
+        display: inline-block;
+        float: none;
+        margin-bottom: calc(var(--border-width-base) * -0.6);
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        a,
+        button {
+          border: 0;
+          border-radius: 0;
+          color: var(--content-secondary);
+          margin-right: unset;
+          padding: var(--spacing-04);
+          line-height: var(--line-height-03);
+          text-decoration: none;
+
+          &:focus,
+          &:hover {
+            border: 0;
+          }
+
+          &:focus,
+          &:focus-visible {
+            background-color: unset;
+            outline: 0;
+          }
+
+          &:hover {
+            background-color: var(--bg-light-secondary);
+            text-decoration: none;
+          }
+
+          &:focus-visible {
+            @include box-shadow-button-input;
+          }
+        }
+      }
+
+      li > a.active,
+      li > button.active {
+        background-color: transparent;
+        border: 0;
+        border-bottom: 3px solid var(--green-50);
+        color: var(--content-primary);
+      }
+
+      &.align-left {
+        margin-left: 0;
+        margin-right: 0;
+      }
+    }
+  }
+
+  .tab-content {
+    margin-top: var(--spacing-11);
+  }
+}
+
+// Scroll the page up a bit to allow tab links to be shown when navigating to
+// a bookmarked tab hash
+[data-ol-bookmarkable-tabset] .tab-pane {
+  scroll-margin-top: 120px;
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/tooltip.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/tooltip.scss
@@ -0,0 +1,28 @@
+.tooltip {
+  line-height: 20px;
+
+  @include shadow-md;
+
+  &.#{$prefix}tooltip-top {
+    bottom: -1px !important;
+  }
+  &.#{$prefix}tooltip-end {
+    top: 1px !important;
+    left: -1px !important;
+  }
+  &.#{$prefix}tooltip-bottom {
+    top: -1px !important;
+  }
+  &.#{$prefix}tooltip-start {
+    top: 1px !important;
+    right: -1px !important;
+  }
+}
+
+.tooltip-inner {
+  text-align: initial;
+
+  .tooltip-wide & {
+    max-width: unset;
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/tos.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/tos.scss
@@ -0,0 +1,6 @@
+.tos-agreement-notice {
+  @include body-xs;
+
+  text-align: center;
+  margin: var(--spacing-04) 0 0 0;
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/components/upgrade-prompt.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/upgrade-prompt.scss
@@ -0,0 +1,85 @@
+.upgrade-prompt {
+  border-radius: var(--border-radius-base);
+  box-shadow: 0 4px 6px 0 #1e25301f;
+  padding: var(--spacing-06);
+  background-color: var(--white);
+  container: inline-size; // Defines the parent as a container
+
+  .upgrade-prompt-card-container {
+    @container (max-width: 700px) {
+      width: 100%;
+    }
+  }
+
+  .row {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .upgrade-prompt-title {
+    font-weight: 600;
+  }
+
+  .upgrade-prompt-summary {
+    margin-bottom: var(--spacing-10);
+  }
+
+  .upgrade-prompt-card {
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--border-radius-medium);
+    padding: var(--spacing-09);
+    height: 100%;
+    font-size: var(--font-size-02);
+
+    h3 {
+      margin: 0;
+      font-weight: 600;
+    }
+  }
+
+  .upgrade-prompt-card-premium {
+    border: 2px solid transparent;
+    background:
+      linear-gradient(white, white) padding-box,
+      var(--premium-gradient) border-box;
+  }
+
+  .upgrade-prompt-card-free {
+    border: 2px solid var(--border-divider);
+  }
+
+  .upgrade-prompt-price {
+    margin-bottom: var(--spacing-05);
+  }
+
+  .upgrade-prompt-price-number {
+    @include heading-xl;
+
+    font-weight: 600;
+  }
+
+  .upgrade-prompt-list {
+    margin-bottom: var(--spacing-08);
+
+    & .material-symbols {
+      vertical-align: bottom;
+    }
+
+    & li:not(:last-of-type) {
+      margin-bottom: var(--spacing-05);
+    }
+  }
+
+  .upgrade-prompt-all-plans {
+    @include body-xs;
+
+    margin-top: var(--spacing-07);
+    margin-bottom: 0;
+
+    & .material-symbols {
+      vertical-align: bottom;
+      font-size: var(--font-size-02);
+    }
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/foundations/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/foundations/all.scss
@@ -0,0 +1,5 @@
+@import 'border-radius';
+@import 'colors';
+@import 'elevation';
+@import 'spacing';
+@import 'typography';
--- a/services/web/frontend/stylesheets/bootstrap-5/foundations/border-radius.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/foundations/border-radius.scss
@@ -0,0 +1,12 @@
+// This file provides both Sass and CSS variables for border radiuses
+$border-radius-base: 4px;
+$border-radius-medium: 8px;
+$border-radius-large: 16px;
+$border-radius-full: 9999px;
+
+:root {
+  --border-radius-base: #{$border-radius-base};
+  --border-radius-medium: #{$border-radius-medium};
+  --border-radius-large: #{$border-radius-large};
+  --border-radius-full: #{$border-radius-full};
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/foundations/colors.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/foundations/colors.scss
@@ -0,0 +1,236 @@
+// This file provides CSS and Sass variables for colors as full color values.
+// To combine one of these colors with an alpha value, use Sass's built-in
+// rgba() function.
+
+// Note that colors used by Bootstrap's Sass are used in calculations and
+// therefore cannot contain CSS variables
+
+/* ====== Sass color variables ====== */
+
+/* Neutral */
+$white: #fff;
+$neutral-10: #f4f5f6;
+$neutral-20: #e7e9ee;
+$neutral-30: #d0d5dd;
+$neutral-40: #afb5c0;
+$neutral-50: #8d96a5;
+$neutral-60: #677283;
+$neutral-70: #495365;
+$neutral-80: #2f3a4c;
+$neutral-90: #1b222c;
+
+/* Green */
+$green-10: #eaf6ef;
+$green-20: #b8dbc8;
+$green-30: #86caa5;
+$green-40: #53b57f;
+$green-50: #098842;
+$green-60: #1e6b41;
+$green-70: #195936;
+
+/* Blue */
+$blue-10: #f1f4f9;
+$blue-20: #c3d0e3;
+$blue-30: #97b6e5;
+$blue-40: #6597e0;
+$blue-50: #366cbf;
+$blue-60: #28518f;
+$blue-70: #214475;
+
+/* Red */
+$red-10: #f9f1f1;
+$red-20: #f5beba;
+$red-30: #e59d9a;
+$red-40: #e36d66;
+$red-50: #b83a33;
+$red-60: #942f2a;
+$red-70: #782722;
+
+/* Yellow */
+$yellow-10: #fcf1e3;
+$yellow-20: #fcc483;
+$yellow-30: #f7a445;
+$yellow-40: #de8014;
+$yellow-50: #8f5514;
+$yellow-60: #7a4304;
+$yellow-70: #633a0b;
+
+/* ====== Semantic Sass color variables ====== */
+$bg-light-primary: $white;
+$bg-light-secondary: $neutral-10;
+$bg-light-tertiary: $neutral-20;
+$bg-light-disabled: $neutral-20;
+$bg-dark-primary: $neutral-90;
+$bg-dark-secondary: $neutral-80;
+$bg-dark-tertiary: $neutral-70;
+$bg-dark-disabled: $neutral-70;
+$bg-accent-01: $green-50;
+$bg-accent-02: $green-60;
+$bg-accent-03: $green-10;
+$bg-danger-01: $red-50;
+$bg-danger-02: $red-60;
+$bg-danger-03: $red-10;
+$bg-warning-01: $yellow-50;
+$bg-warning-02: $yellow-60;
+$bg-warning-03: $yellow-10;
+$bg-info-01: $blue-50;
+$bg-info-02: $blue-60;
+$bg-info-03: $blue-10;
+$content-primary: $neutral-90;
+$content-secondary: $neutral-70;
+$content-disabled: $neutral-40;
+$content-placeholder: $neutral-60;
+$content-danger: $red-50;
+$content-warning: $yellow-50;
+$content-positive: $green-50;
+$border-primary: $neutral-60;
+$border-hover: $neutral-70;
+$border-disabled: $neutral-20;
+$border-active: $blue-50;
+$border-danger: $red-50;
+$border-divider: $neutral-20;
+$link-web: $green-50;
+$link-web-hover: $green-60;
+$link-web-visited: $green-60;
+$link-ui: $blue-50;
+$link-ui-hover: $blue-60;
+$link-ui-visited: $blue-60;
+$content-primary-dark: $white;
+$content-secondary-dark: $neutral-20;
+$content-disabled-dark: $neutral-60;
+$content-placeholder-dark: $neutral-50;
+$content-danger-dark: $red-40;
+$content-warning-dark: $yellow-40;
+$content-positive-dark: $green-40;
+$border-primary-dark: $neutral-30;
+$border-hover-dark: $neutral-20;
+$border-disabled-dark: $neutral-80;
+$border-active-dark: $blue-30;
+$border-danger-dark: $red-40;
+$border-divider-dark: $neutral-80;
+$link-web-dark: $green-30;
+$link-web-hover-dark: $green-40;
+$link-web-visited-dark: $green-40;
+$link-ui-dark: $blue-30;
+$link-ui-hover-dark: $blue-40;
+$link-ui-visited-dark: $blue-40;
+
+/* ====== CSS color variables ====== */
+:root {
+  /* Neutral */
+  --white: #{$white};
+  --neutral-10: #{$neutral-10};
+  --neutral-20: #{$neutral-20};
+  --neutral-30: #{$neutral-30};
+  --neutral-40: #{$neutral-40};
+  --neutral-50: #{$neutral-50};
+  --neutral-60: #{$neutral-60};
+  --neutral-70: #{$neutral-70};
+  --neutral-80: #{$neutral-80};
+  --neutral-90: #{$neutral-90};
+
+  /* Green */
+  --green-10: #{$green-10};
+  --green-20: #{$green-20};
+  --green-30: #{$green-30};
+  --green-40: #{$green-40};
+  --green-50: #{$green-50};
+  --green-60: #{$green-60};
+  --green-70: #{$green-70};
+
+  /* Blue */
+  --blue-10: #{$blue-10};
+  --blue-20: #{$blue-20};
+  --blue-30: #{$blue-30};
+  --blue-40: #{$blue-40};
+  --blue-50: #{$blue-50};
+  --blue-60: #{$blue-60};
+  --blue-70: #{$blue-70};
+
+  /* Red */
+  --red-10: #{$red-10};
+  --red-20: #{$red-20};
+  --red-30: #{$red-30};
+  --red-40: #{$red-40};
+  --red-50: #{$red-50};
+  --red-60: #{$red-60};
+  --red-70: #{$red-70};
+
+  /* Yellow */
+  --yellow-10: #{$yellow-10};
+  --yellow-20: #{$yellow-20};
+  --yellow-30: #{$yellow-30};
+  --yellow-40: #{$yellow-40};
+  --yellow-50: #{$yellow-50};
+  --yellow-60: #{$yellow-60};
+  --yellow-70: #{$yellow-70};
+
+  /* ====== Semantic CSS color variables ====== */
+  --bg-light-primary: var(--white);
+  --bg-light-secondary: var(--neutral-10);
+  --bg-light-tertiary: var(--neutral-20);
+  --bg-light-disabled: var(--neutral-20);
+  --bg-dark-primary: var(--neutral-90);
+  --bg-dark-secondary: var(--neutral-80);
+  --bg-dark-tertiary: var(--neutral-70);
+  --bg-dark-disabled: var(--neutral-70);
+  --bg-accent-01: var(--green-50);
+  --bg-accent-02: var(--green-60);
+  --bg-accent-03: var(--green-10);
+  --bg-danger-01: var(--red-50);
+  --bg-danger-02: var(--red-60);
+  --bg-danger-03: var(--red-10);
+  --bg-warning-01: var(--yellow-50);
+  --bg-warning-02: var(--yellow-60);
+  --bg-warning-03: var(--yellow-10);
+  --bg-info-01: var(--blue-50);
+  --bg-info-02: var(--blue-60);
+  --bg-info-03: var(--blue-10);
+  --content-primary: var(--neutral-90);
+  --content-secondary: var(--neutral-70);
+  --content-disabled: var(--neutral-40);
+  --content-placeholder: var(--neutral-60);
+  --content-danger: var(--red-50);
+  --content-warning: var(--yellow-50);
+  --content-positive: var(--green-50);
+  --border-primary: var(--neutral-60);
+  --border-hover: var(--neutral-70);
+  --border-disabled: var(--neutral-20);
+  --border-active: var(--blue-50);
+  --border-danger: var(--red-50);
+  --border-divider: var(--neutral-20);
+  --border-dark-divider: var(--neutral-70);
+  --link-web: var(--green-50);
+  --link-web-hover: var(--green-60);
+  --link-web-visited: var(--green-50);
+  --link-ui: var(--blue-50);
+  --link-ui-hover: var(--blue-60);
+  --link-ui-visited: var(--blue-60);
+  --content-primary-dark: var(--white);
+  --content-secondary-dark: var(--neutral-20);
+  --content-disabled-dark: var(--neutral-60);
+  --content-placeholder-dark: var(--neutral-50);
+  --content-danger-dark: var(--red-40);
+  --content-warning-dark: var(--yellow-40);
+  --content-positive-dark: var(--green-40);
+  --border-primary-dark: var(--neutral-30);
+  --border-hover-dark: var(--neutral-20);
+  --border-disabled-dark: var(--neutral-80);
+  --border-active-dark: var(--blue-30);
+  --border-danger-dark: var(--red-40);
+  --border-divider-dark: var(--neutral-80);
+  --link-web-dark: var(--green-30);
+  --link-web-hover-dark: var(--green-40);
+  --link-web-visited-dark: var(--green-40);
+  --link-ui-dark: var(--blue-30);
+  --link-ui-hover-dark: var(--blue-40);
+  --link-ui-visited-dark: var(--blue-40);
+
+  /* ====== Gradients ====== */
+  --premium-gradient: linear-gradient(
+    246deg,
+    var(--blue-70) 0%,
+    #254c84 29%,
+    var(--blue-40) 97%
+  );
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/foundations/elevation.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/foundations/elevation.scss
@@ -0,0 +1,18 @@
+// Cards
+@mixin shadow-sm {
+  box-shadow: 0 2px 4px 0 rgb(30 37 48 / 16%);
+}
+
+// Tooltips, Callouts, Dropdowns, etc.
+@mixin shadow-md {
+  box-shadow:
+    0 4px 12px 0 rgb(30 37 48 / 12%),
+    0 2px 4px rgb(30 37 48 / 8%);
+}
+
+// Modals, drawers
+@mixin shadow-lg {
+  box-shadow:
+    0 8px 16px 0 rgb(30 37 48 / 12%),
+    0 4px 6px 0 rgb(30 37 48 / 12%);
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/foundations/spacing.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/foundations/spacing.scss
@@ -0,0 +1,41 @@
+// This file provides both Sass and CSS variables for spacing
+$spacing-00: 0;
+$spacing-01: 2px;
+$spacing-02: 4px;
+$spacing-03: 6px;
+$spacing-04: 8px;
+$spacing-05: 12px;
+$spacing-06: 16px;
+$spacing-07: 20px;
+$spacing-08: 24px;
+$spacing-09: 32px;
+$spacing-10: 40px;
+$spacing-11: 48px;
+$spacing-12: 56px;
+$spacing-13: 64px;
+$spacing-14: 72px;
+$spacing-15: 80px;
+$spacing-16: 96px;
+$all-spacings: spacing-00, spacing-01, spacing-02, spacing-03, spacing-04,
+  spacing-05, spacing-06, spacing-07, spacing-08, spacing-09, spacing-10,
+  spacing-11, spacing-12, spacing-13, spacing-14, spacing-15, spacing-16;
+
+:root {
+  --spacing-00: #{$spacing-00};
+  --spacing-01: #{$spacing-01};
+  --spacing-02: #{$spacing-02};
+  --spacing-03: #{$spacing-03};
+  --spacing-04: #{$spacing-04};
+  --spacing-05: #{$spacing-05};
+  --spacing-06: #{$spacing-06};
+  --spacing-07: #{$spacing-07};
+  --spacing-08: #{$spacing-08};
+  --spacing-09: #{$spacing-09};
+  --spacing-10: #{$spacing-10};
+  --spacing-11: #{$spacing-11};
+  --spacing-12: #{$spacing-12};
+  --spacing-13: #{$spacing-13};
+  --spacing-14: #{$spacing-14};
+  --spacing-15: #{$spacing-15};
+  --spacing-16: #{$spacing-16};
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/foundations/typography.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/foundations/typography.scss
@@ -0,0 +1,112 @@
+// This file provides CSS variables for font size and line height, plus Sass variables for base text size for Bootstrap
+
+:root {
+  --font-sans: 'Noto Sans', sans-serif;
+  --font-size-01: 0.75rem; // 12px
+  --font-size-02: 0.875rem; // 14px
+  --font-size-03: 1rem; // 16px
+  --font-size-04: 1.125rem; // 18px
+  --font-size-05: 1.25rem; // 20px
+  --font-size-06: 1.5rem; // 24px
+  --font-size-07: 1.875rem; // 30px
+  --font-size-08: 2.25rem; // 36px
+  --font-size-09: 3rem; // 48px
+  --font-size-10: 3.25rem; // 52px
+  --font-size-11: 3.75rem; // 60px
+  --font-size-12: 4.5rem; // 72px
+  --font-size-13: 6em; // 96px
+  --line-height-01: 1rem; // 16px
+  --line-height-02: 1.25rem; // 20px
+  --line-height-03: 1.5rem; // 24px
+  --line-height-04: 1.75rem; // 28px
+  --line-height-05: 2rem; // 32px
+  --line-height-06: 2.5rem; // 40px
+  --line-height-07: 3rem; // 48px
+  --line-height-08: 4rem; // 64px
+  --line-height-09: 4.25rem; // 68px
+  --line-height-10: 5rem; // 80px
+  --line-height-11: 6rem; // 96px
+  --line-height-12: 8rem; // 128px
+}
+
+// Semantic styles, as Sass mixins
+@mixin display-lg {
+  font-size: var(--font-size-13);
+  line-height: var(--line-height-12);
+}
+
+@mixin display-md {
+  font-size: var(--font-size-12);
+  line-height: var(--line-height-11);
+}
+
+@mixin display-sm {
+  font-size: var(--font-size-11);
+  line-height: var(--line-height-10);
+}
+
+@mixin display-xs {
+  font-size: var(--font-size-10);
+  line-height: var(--line-height-09);
+}
+
+@mixin heading-2xl {
+  font-size: var(--font-size-09);
+  line-height: var(--line-height-08);
+}
+
+@mixin heading-xl {
+  font-size: var(--font-size-08);
+  line-height: var(--line-height-07);
+}
+
+@mixin heading-lg {
+  font-size: var(--font-size-07);
+  line-height: var(--line-height-06);
+}
+
+@mixin heading-md {
+  font-size: var(--font-size-06);
+  line-height: var(--line-height-05);
+}
+
+@mixin heading-sm {
+  font-size: var(--font-size-05);
+  line-height: var(--line-height-04);
+}
+
+@mixin heading-xs {
+  font-size: var(--font-size-04);
+  line-height: var(--line-height-03);
+}
+
+@mixin body-lg {
+  font-size: var(--font-size-04);
+  line-height: var(--line-height-03);
+}
+
+@mixin body-base {
+  font-size: var(--font-size-03);
+  line-height: var(--line-height-03);
+}
+
+@mixin body-sm {
+  font-size: var(--font-size-02);
+  line-height: var(--line-height-02);
+}
+
+@mixin body-xs {
+  font-size: var(--font-size-01);
+  line-height: var(--line-height-01);
+}
+
+@mixin font-mono {
+  font-family: 'DM Mono', monospace;
+
+  // We're using the "ss05" (stylistic set 5) version of the DM Mono, by setting the `font-feature-settings` rule
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings
+  // We use the ss05 specifically to remove the "squiggle" below the f letter.
+  // You can try removing the `font-feature-settings` rule and check what happens to the letter "f",
+  // as it's quite hard to describe it with sentences alone
+  font-feature-settings: 'ss05';
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/helpers/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/helpers/all.scss
@@ -0,0 +1 @@
+@import 'visually-hidden';
--- a/services/web/frontend/stylesheets/bootstrap-5/helpers/visually-hidden.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/helpers/visually-hidden.scss
@@ -0,0 +1,5 @@
+.visually-hidden-max-md {
+  @include media-breakpoint-down(md) {
+    @include visually-hidden;
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/main-style.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/main-style.scss
@@ -0,0 +1,52 @@
+// Web fonts
+@import '../../fonts/noto-sans/noto-sans.css';
+@import '../../fonts/dm-mono/dm-mono.css';
+@import '../../fonts/merriweather/merriweather.css';
+@import '../../fonts/source-code-pro/source-code-pro.css';
+@import '../../fonts/STIXTwoMath/stix-two-math.css';
+@import '../../fonts/noto-serif/noto-serif.css';
+@import '../../fonts/open-dyslexic-mono/open-dyslexic-mono.css';
+@import '../../fonts/material-symbols/material-symbols.css';
+@import '../../fonts/font-awesome/font-awesome.css';
+
+// Vendor CSS
+// TODO Bootstrap 5: Check whether this works with Bootstrap 5, and whether we can replace it
+@import '../vendor/select/select';
+
+// Bootstrap-related
+
+// Note that files containing Bootstrap or Sass files that interact with
+// Bootstrap's Sass variables must use @import rather than @use because
+// Bootstrap relies on its variables, mixins etc. all being global.
+
+// Include Bootstrap 5 itself, plus overrides and extend Bootstrap styles.
+@import 'base/bootstrap';
+
+// Extra colours for the website redesign
+@import 'base/colors';
+
+// Components custom style
+@import 'components/all';
+
+// Typography-related
+@import 'base/typography';
+
+// Custom helpers
+@import 'helpers/all';
+
+// Modals
+@import 'modals/all';
+
+// Pages custom style
+@import 'pages/all';
+
+// Link styles
+@import 'base/links';
+@import 'base/base';
+
+// Page layout that isn't related to a particular component or page
+@import 'base/layout';
+
+// Module styles
+// TODO: find a way for modules to add styles dynamically
+@import 'modules/all';
--- a/services/web/frontend/stylesheets/bootstrap-5/modals/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/modals/all.scss
@@ -0,0 +1 @@
+@import 'contact-us-modal';
--- a/services/web/frontend/stylesheets/bootstrap-5/modals/contact-us-modal.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/modals/contact-us-modal.scss
@@ -0,0 +1,91 @@
+// Hack to make the contact modal appear above other modals
+.contact-modal {
+  z-index: 1065;
+}
+
+.contact-backdrop {
+  z-index: 1060;
+}
+
+.contact-us-modal-textarea {
+  height: 120px;
+}
+
+.modal-form-messages .notification {
+  margin-bottom: var(--spacing-05);
+}
+
+.contact-suggestions {
+  @include body-sm;
+
+  margin: 0 calc(-1 * var(--bs-modal-padding)) var(--spacing-05);
+  padding: var(--spacing-05) 0;
+  color: var(--content-secondary);
+  background-color: var(--bg-light-secondary);
+  border-top: solid 1px var(--border-primary-dark);
+  border-bottom: solid 1px var(--border-primary-dark);
+}
+
+.contact-suggestion-label {
+  margin-bottom: var(--spacing-05);
+  padding: 0 var(--spacing-07);
+}
+
+.contact-suggestion-list {
+  padding-left: 0;
+  list-style: none;
+  background-color: var(--white);
+  border-top: solid 1px var(--border-primary-dark);
+  border-bottom: solid 1px var(--border-primary-dark);
+  margin: 0;
+
+  li:last-child .contact-suggestion-list-item {
+    border-bottom: none;
+  }
+}
+
+.contact-suggestion-list-item {
+  display: flex;
+  justify-content: space-between;
+  color: var(--content-secondary);
+  padding: var(--spacing-05) var(--spacing-07);
+  border-bottom: solid 1px var(--border-divider);
+  cursor: pointer;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    background-color: var(--bg-light-secondary);
+
+    span {
+      text-decoration: underline;
+    }
+
+    .fa {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+
+  .fa {
+    color: var(--neutral-30);
+  }
+}
+
+.contact-suggestions-dropdown {
+  width: calc(100% - 2 * var(--bs-modal-padding));
+
+  .dropdown-header {
+    @include body-sm;
+
+    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
+  }
+
+  .dropdown-item {
+    white-space: normal;
+  }
+
+  .form-group + & {
+    margin-top: $spacing-02 - $form-group-margin-bottom;
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/modules/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/modules/all.scss
@@ -0,0 +1,4 @@
+@import 'third-party-references';
+@import 'symbol-palette';
+@import 'writefull';
+@import 'labs';
--- a/services/web/frontend/stylesheets/bootstrap-5/modules/labs.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/modules/labs.scss
@@ -0,0 +1,119 @@
+.labs-opt-in-wrapper {
+  color: var(--neutral-60);
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    color: var(--content-primary);
+  }
+
+  #experiments-container {
+    .title-row {
+      display: flex;
+    }
+
+    .labs-experiment-widget-container {
+      border: 1px solid var(--border-divider);
+    }
+  }
+
+  .labs-icon {
+    background-color: var(--green-50);
+    color: var(--white);
+    border-radius: 20%;
+    vertical-align: text-bottom;
+  }
+
+  p {
+    font-size: var(--font-size-02);
+    color: var(--content-secondary);
+  }
+
+  strong {
+    font-size: var(--font-size-02);
+  }
+
+  .labs-experiment-widget-container {
+    --image-size: 40px;
+    --image-padding: var(--spacing-01);
+
+    display: grid;
+    grid-template-columns: var(--image-size) 1fr auto;
+    gap: var(--spacing-07);
+    align-items: center;
+    padding: var(--spacing-05);
+
+    > div {
+      display: flex;
+      flex-direction: column;
+      padding-right: var(--spacing-07);
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+
+    .experiment-logo-container {
+      padding: var(--image-padding);
+    }
+
+    img {
+      width: calc(var(--image-size) - var(--image-padding) * 2);
+      height: calc(var(--image-size) - var(--image-padding) * 2);
+    }
+
+    .title-row {
+      margin: 0;
+      margin-bottom: var(--spacing-04);
+
+      > h3 {
+        margin: 0;
+        margin-right: var(--spacing-04);
+      }
+
+      .badge {
+        line-height: var(--line-height-02);
+      }
+    }
+
+    p {
+      margin-bottom: var(--spacing-04);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    &.disabled-experiment {
+      grid-template-columns: var(--image-size) 3fr 1fr auto;
+
+      .disabled-explanation {
+        color: var(--content-secondary);
+      }
+
+      h3,
+      p {
+        color: var(--content-disabled);
+      }
+    }
+  }
+
+  @media (width < 768px) {
+    .labs-experiment-widget-container {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+
+.disabled-experiment {
+  .ai-error-assistant-avatar {
+    filter: grayscale(0.6);
+  }
+}
+
+.labs-opt-in {
+  .form-group {
+    margin-top: var(--spacing-06);
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/modules/symbol-palette.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/modules/symbol-palette.scss
@@ -0,0 +1,207 @@
+:root {
+  --symbol-palette-bg: var(--bg-dark-tertiary);
+  --symbol-palette-color: var(--content-primary-dark);
+  --symbol-palette-header-background: var(--bg-dark-secondary);
+  --symbol-palette-item-bg: var(--bg-dark-secondary);
+  --symbol-palette-item-color: var(--content-primary-dark);
+  --symbol-palette-selected-tab-bg: var(--bg-dark-tertiary);
+  --symbol-palette-selected-tab-color: var(--content-primary-dark);
+  --symbol-palette-text-shadow-color: var(--bg-dark-primary);
+  --symbol-palette-overlay-bg: #{rgb($bg-dark-tertiary, 0.75)};
+}
+
+@include theme('light') {
+  --symbol-palette-bg: var(--bg-light-primary);
+  --symbol-palette-color: var(--content-secondary);
+  --symbol-palette-header-background: var(--bg-light-tertiary);
+  --symbol-palette-item-bg: var(--bg-light-tertiary);
+  --symbol-palette-item-color: var(--content-secondary);
+  --symbol-palette-selected-tab-bg: var(--bg-light-primary);
+  --symbol-palette-selected-tab-color: var(--blue-50);
+  --symbol-palette-text-shadow-color: var(--bg-light-tertiary);
+  --symbol-palette-overlay-bg: #{rgb($bg-light-primary, 0.75)};
+}
+
+.symbol-palette-container {
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+
+.symbol-palette {
+  display: flex;
+  flex-direction: column;
+  background: var(--symbol-palette-bg);
+  color: var(--symbol-palette-color);
+  width: 100%;
+  height: 100%;
+  min-height: 220px; // allow space for the overlay contents
+}
+
+.symbol-palette-header-outer {
+  flex-shrink: 0;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: stretch;
+  font-family: $font-family-sans-serif;
+  font-size: var(--font-size-03);
+  background: var(--symbol-palette-header-background);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
+}
+
+.symbol-palette-header {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: stretch;
+}
+
+.symbol-palette-tab-list[role='tablist'] {
+  background: none;
+  border-bottom: none;
+  flex-wrap: wrap;
+  display: flex;
+}
+
+.symbol-palette-tab[role='tab'] {
+  appearance: none;
+  background: none;
+  border: none;
+  border-bottom: 1px solid transparent;
+  color: inherit;
+  cursor: pointer;
+  display: inline-block;
+  font: inherit;
+  margin: 0;
+  padding: var(--spacing-02) var(--spacing-04);
+
+  &[aria-selected='true'] {
+    background: var(--symbol-palette-selected-tab-bg);
+    color: var(--symbol-palette-selected-tab-color);
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.25;
+  }
+}
+
+.symbol-palette-body {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.symbol-palette-items {
+  display: flex;
+  flex-wrap: wrap;
+  padding: var(--spacing-03);
+}
+
+.symbol-palette-item {
+  font-family: 'Stix Two Math', serif;
+  font-size: 24px;
+  line-height: 42px;
+  height: 42px;
+  width: 42px;
+  margin: var(--spacing-03);
+  color: var(--symbol-palette-item-color);
+  background: var(--symbol-palette-item-bg);
+  border: 1px solid transparent;
+  border-radius: var(--border-radius-base);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.symbol-palette-item-command {
+  font-family: monospace;
+  font-weight: bold;
+}
+
+.symbol-palette-item-notes {
+  margin-top: var(--spacing-03);
+}
+
+.symbol-palette-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-05);
+}
+
+.symbol-palette-search {
+  padding: var(--spacing-01) var(--spacing-05);
+  margin: var(--spacing-03);
+  line-height: 1;
+  height: auto;
+  width: auto;
+}
+
+.symbol-palette-header-group {
+  display: flex;
+  align-items: stretch;
+  white-space: nowrap;
+  margin-left: var(--spacing-03);
+}
+
+.symbol-palette-info-link,
+.symbol-palette-info-link:focus,
+.symbol-palette-info-link:hover {
+  color: inherit;
+}
+
+.symbol-palette-close-button-outer {
+  display: flex;
+}
+
+.symbol-palette-close-button {
+  --bs-btn-close-color: var(--symbol-palette-color);
+
+  [data-theme='default'] & {
+    filter: var(--bs-btn-close-white-filter);
+  }
+
+  margin-top: var(--spacing-04);
+  margin-left: var(--spacing-05);
+  margin-right: var(--spacing-03);
+
+  .symbol-palette-unavailable & {
+    visibility: hidden;
+  }
+}
+
+.symbol-palette-overlay {
+  position: absolute;
+  inset: 0;
+  background: var(--symbol-palette-overlay-bg);
+  color: var(--symbol-palette-color);
+  display: flex;
+  flex-direction: column;
+  padding: 0 var(--spacing-09) var(--spacing-05);
+  align-items: center;
+  text-shadow: 0 0 8px var(--symbol-palette-text-shadow-color);
+  min-height: 200px;
+  overflow: auto;
+
+  h4 {
+    font-weight: bold;
+    color: var(--symbol-palette-color);
+    text-align: center;
+  }
+
+  .symbol-palette-close-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  .upgrade-benefits {
+    column-count: 2;
+
+    li {
+      display: flex;
+    }
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/modules/third-party-references.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/modules/third-party-references.scss
@@ -0,0 +1,29 @@
+@keyframes slide-in {
+  0% {
+    transform: translateY(25%);
+    opacity: 0;
+    bottom: var(--spacing-05);
+  }
+
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+    bottom: var(--spacing-06);
+  }
+}
+
+.fade-slide-in {
+  opacity: 0;
+  transition: opacity 0.3s ease; /* Smooth opacity transition */
+  animation: slide-in 0.3s ease-in-out forwards;
+  animation-delay: 300ms;
+}
+
+.tpr-editor-prompt-container {
+  position: absolute;
+  z-index: 1;
+  bottom: var(--spacing-06);
+  right: var(--spacing-06);
+  width: 90%;
+  max-width: 512px;
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/modules/writefull.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/modules/writefull.scss
@@ -0,0 +1,12 @@
+.writefull-loading-bar {
+  font-size: var(--font-size-02);
+  height: 40px;
+  justify-content: center;
+}
+
+.writefull-error-notification {
+  margin: 48px 64px;
+  width: 100%;
+  max-width: 520px;
+  text-align: left;
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/about.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/about.scss
@@ -0,0 +1,39 @@
+/*
+  v2
+  About Page
+*/
+.team {
+  list-style: none;
+  padding: 0;
+
+  .team-member {
+    display: block;
+    float: left;
+    margin-bottom: var(--spacing-09);
+    width: 100%;
+
+    h3 {
+      margin: 0;
+    }
+
+    .team-pic {
+      float: left;
+      margin-right: var(--spacing-04);
+    }
+
+    .team-info {
+      overflow: hidden;
+    }
+
+    .team-connect {
+      list-style: none;
+      margin-top: var(--spacing-04);
+      padding: 0;
+
+      li {
+        display: inline-block;
+        margin: 0 var(--spacing-07) 0 0;
+      }
+    }
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/account-settings.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/account-settings.scss
@@ -0,0 +1,247 @@
+.affiliations-table {
+  table-layout: fixed;
+}
+
+.affiliations-table-cell {
+  padding: var(--spacing-04);
+  overflow-wrap: break-word;
+}
+
+.affiliations-table-cell-tabbed {
+  margin: var(--spacing-04) 0 0 var(--spacing-07);
+  padding-left: var(--spacing-04);
+}
+
+.affiliations-table-row-highlighted {
+  background-color: var(--bg-light-secondary);
+}
+
+.affiliation-change-container {
+  margin-top: var(--spacing-04);
+}
+
+.affiliations-table-label {
+  padding-top: var(--spacing-02);
+}
+
+.btn-link-accounts {
+  margin-bottom: var(--spacing-03);
+}
+
+.settings-widget-status-icon,
+.dropbox-sync-icon {
+  position: relative;
+  font-size: 1.3em;
+  line-height: 1.3em;
+  vertical-align: top;
+
+  &.status-error,
+  &.dropbox-sync-icon-error {
+    color: var(--bg-danger-01);
+  }
+
+  &.status-success,
+  &.dropbox-sync-icon-success {
+    color: var(--content-positive);
+  }
+
+  &.status-pending,
+  &.dropbox-sync-icon-updating {
+    color: var(--bg-info-01);
+
+    &::after {
+      content: '\f021';
+      position: absolute;
+      top: 0;
+      left: 50%;
+      margin-left: -20%;
+      font-size: 60%;
+      color: #fff;
+      animation: fa-spin 2s infinite linear;
+    }
+  }
+}
+
+.settings-widgets-container {
+  border: 1px solid var(--border-divider);
+
+  hr {
+    margin: 0 var(--spacing-05);
+  }
+}
+
+.settings-widget-container {
+  display: grid;
+  grid-template-columns: 50px 1fr auto;
+  gap: var(--spacing-07);
+  align-items: center;
+  padding: var(--spacing-05);
+
+  > div {
+    display: flex;
+    flex-direction: column;
+    padding-right: var(--spacing-07);
+
+    &:last-child {
+      padding-right: var(--spacing-00);
+    }
+  }
+
+  img {
+    width: 40px;
+    height: 40px;
+  }
+
+  .description-container {
+    flex-grow: 1;
+  }
+
+  .dual-logo {
+    display: flex;
+    justify-content: space-evenly;
+    height: 100%;
+  }
+
+  .title-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: var(--spacing-05);
+
+    > h4 {
+      margin: 0;
+      margin-right: var(--spacing-05);
+    }
+  }
+
+  p {
+    margin-bottom: var(--spacing-05);
+
+    &:last-child {
+      margin-bottom: var(--spacing-00);
+    }
+  }
+}
+
+@include media-breakpoint-down(md) {
+  .settings-widget-container {
+    grid-template-columns: 1fr;
+
+    .title-row {
+      display: unset;
+    }
+  }
+}
+
+// Prevents icon from large account linking sections, such as the git bridge,
+// from rendering in the center of the widget, anchoring it to the top
+.linking-icon-fixed-position {
+  align-self: start;
+  padding-top: var(--spacing-05);
+}
+
+// overrides the default `Col` padding, as the inner `affiliations-table-cell` has its own padding, and
+// the content length of the git-bridge token table is pretty much fixed (tokens and dates)
+.linking-git-bridge-table-cell {
+  padding-right: 0;
+}
+
+.linking-git-bridge-revoke-button {
+  padding: var(--spacing-01) var(--spacing-02);
+}
+
+.security-row {
+  .line-header > b {
+    color: var(--content-primary);
+  }
+
+  color: var(--content-secondary);
+  display: flex;
+  flex-direction: row;
+  padding: var(--spacing-03) 0;
+
+  .icon {
+    color: var(--content-primary);
+    display: flex;
+    flex: 1 1 7%;
+    padding: 0 var(--spacing-06);
+    margin-top: var(--spacing-06);
+  }
+
+  .text {
+    flex: 1 1 93%;
+    display: flex;
+    flex-direction: column;
+    margin-right: var(--spacing-06);
+  }
+
+  .button-column {
+    display: flex;
+    align-items: center;
+  }
+
+  .status-label {
+    @include body-sm;
+
+    border-radius: var(--border-radius-base);
+    padding: var(--spacing-01) var(--spacing-02);
+    margin-top: var(--spacing-02);
+    margin-left: var(--spacing-04);
+    flex-shrink: 0;
+
+    &.status-label-configured {
+      background-color: var(--bg-accent-01);
+      color: var(--content-secondary-dark);
+    }
+
+    &.status-label-ready {
+      background-color: var(--bg-light-tertiary);
+      color: var(--content-primary);
+    }
+  }
+}
+
+#settings-page-root {
+  .recaptcha-branding {
+    font-size: var(--font-size-01);
+    text-align: left;
+    padding: 0 0 var(--spacing-04);
+  }
+}
+
+#settings-page-root,
+#action-project-modal {
+  &#settings-page-root .confirm-email-form {
+    background: var(--bg-light-secondary);
+  }
+
+  .confirm-email-form-inner {
+    margin: auto;
+    padding: var(--spacing-08);
+    max-width: 480px;
+
+    label {
+      overflow-wrap: anywhere;
+    }
+
+    .text-danger {
+      display: flex;
+      gap: var(--spacing-03);
+      padding: var(--spacing-02);
+    }
+
+    .form-actions {
+      margin-top: var(--spacing-05);
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-05);
+
+      button {
+        white-space: normal;
+      }
+
+      .btn-danger-ghost:not(:hover) {
+        background: transparent;
+      }
+    }
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/add-secondary-email-prompt.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/add-secondary-email-prompt.scss
@@ -0,0 +1,16 @@
+.add-secondary-email {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-05);
+
+  .add-secondary-email-error {
+    display: flex;
+    gap: var(--spacing-03);
+    padding: var(--spacing-02);
+  }
+
+  .add-secondary-email-learn-more {
+    margin-top: var(--spacing-05);
+    margin-bottom: 0;
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/admin/admin.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/admin/admin.scss
@@ -0,0 +1,93 @@
+#survey-form,
+#split-test-edit,
+#split-test-create {
+  .material-switch {
+    input[type='checkbox'] {
+      display: none;
+
+      &:checked + label::before {
+        background: inherit;
+        opacity: 0.5;
+      }
+
+      &:checked + label::after {
+        background: inherit;
+        left: 20px;
+      }
+
+      &:disabled + label {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+
+    label {
+      cursor: pointer;
+      height: 0;
+      position: relative;
+      width: 40px;
+      background-color: var(--bg-accent-01);
+
+      &::before {
+        background: rgb(0 0 0);
+        box-shadow: inset 0 0 10px rgb(0 0 0 / 50%);
+        border-radius: var(--border-radius-medium);
+        content: '';
+        height: 16px;
+        margin-top: calc(var(--spacing-01) * -1);
+        position: absolute;
+        opacity: 0.3;
+        transition: all 0.2s ease-in-out;
+        width: 40px;
+      }
+
+      &::after {
+        background: rgb(255 255 255);
+        border-radius: var(--border-radius-large);
+        box-shadow: 0 0 5px rgb(0 0 0 / 30%);
+        content: '';
+        height: 24px;
+        left: -4px;
+        margin-top: calc(var(--spacing-01) * -1);
+        position: absolute;
+        top: -4px;
+        transition: all 0.2s ease-in-out;
+        width: 24px;
+      }
+    }
+  }
+
+  .hr-sect {
+    display: flex;
+    flex-basis: 100%;
+    align-items: center;
+    color: rgb(0 0 0 / 35%);
+    margin: var(--spacing-04) 0;
+  }
+
+  .hr-sect::before,
+  .hr-sect::after {
+    content: '';
+    flex-grow: 1;
+    background: rgb(0 0 0 / 35%);
+    height: 1px;
+    font-size: 0;
+    line-height: 0;
+    margin: 0 var(--spacing-04);
+  }
+}
+
+#user-info-page {
+  .confirmed-email-color,
+  .trusted-email-color {
+    color: var(--green-60);
+  }
+
+  .unconfirmed-email-color {
+    color: var(--red-50);
+  }
+
+  .untrusted-email-color {
+    color: var(--yellow-50);
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/admin/project-url-lookup.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/admin/project-url-lookup.scss
@@ -0,0 +1,22 @@
+.project-url-lookup {
+  margin-top: var(--spacing-08);
+
+  .project-url-lookup-results {
+    margin-top: var(--spacing-08);
+  }
+
+  .project-url-lookup-link-box {
+    background-color: var(--bg-light-secondary);
+    border: 1px solid var(--border-primary-dark);
+    padding: var(--spacing-03) var(--spacing-05);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .project-url-lookup-hint {
+    display: flex;
+    align-items: center;
+    padding: var(--spacing-03);
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
@@ -0,0 +1,53 @@
+@import 'account-settings';
+@import 'cms';
+@import 'content';
+@import 'project-list';
+@import 'project-list-default';
+@import 'project-list-ds-nav';
+@import 'sidebar-v2-dash-pane';
+@import 'editor/ide';
+@import 'editor/ide-redesign';
+@import 'editor/ide-redesign-switcher-modal';
+@import 'editor/rail';
+@import 'editor/settings';
+@import 'editor/toolbar';
+@import 'editor/toolbar-redesign';
+@import 'editor/online-users';
+@import 'editor/hotkeys';
+@import 'editor/left-menu';
+@import 'editor/loading-screen';
+@import 'editor/logs';
+@import 'editor/outline';
+@import 'editor/file-tree';
+@import 'editor/file-view';
+@import 'editor/figure-modal';
+@import 'editor/chat';
+@import 'editor/toast';
+@import 'editor/history';
+@import 'editor/write-and-cite';
+@import 'subscription';
+@import 'editor/pdf';
+@import 'editor/pdf-error-state';
+@import 'editor/compile-button';
+@import 'editor/publish-modal';
+@import 'editor/share';
+@import 'editor/tags-input';
+@import 'editor/review-panel-new';
+@import 'editor/table-generator-column-width-modal';
+@import 'editor/math-preview';
+@import 'editor/references-search';
+@import 'website-redesign';
+@import 'group-settings';
+@import 'templates-v2';
+@import 'homepage';
+@import 'auth';
+@import 'login-register';
+@import 'login';
+@import 'register';
+@import 'plans';
+@import 'onboarding-confirm-email';
+@import 'secondary-confirm-email';
+@import 'onboarding';
+@import 'admin/admin';
+@import 'admin/project-url-lookup';
+@import 'add-secondary-email-prompt';
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/auth.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/auth.scss
@@ -0,0 +1,82 @@
+.auth-aux-logo {
+  position: absolute;
+  top: var(--spacing-06);
+  left: var(--spacing-06);
+
+  img {
+    height: 40px;
+  }
+}
+
+.auth-aux-container {
+  padding-top: calc($header-height + $spacing-11);
+  max-width: 320px;
+  min-height: 100vh;
+  margin-left: auto;
+  margin-right: auto;
+
+  .recaptcha-branding {
+    @include body-xs;
+
+    padding: 0;
+    text-align: left;
+  }
+}
+
+.auth-aux-new-password ~ .notification {
+  margin-top: var(--spacing-04);
+}
+
+.login-overleaf-logo-container {
+  display: block;
+  padding: var(--spacing-06);
+  text-align: center;
+  padding-top: var(--spacing-13);
+  padding-bottom: var(--spacing-09);
+}
+
+.login-register-hr-text-container {
+  line-height: 1;
+  position: relative;
+  padding: var(--spacing-08) 0;
+  font-size: var(--font-size-02);
+
+  &::before {
+    content: '';
+    position: absolute;
+    height: 1px;
+    background-color: var(--neutral-20);
+    top: 50%;
+    left: 0;
+    right: 0;
+  }
+}
+
+.login-register-hr-text {
+  position: relative;
+  background-color: #fff;
+  padding: 0 var(--spacing-05);
+}
+
+.sso-auth-login-container {
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-06);
+
+  h1 {
+    font-size: var(--font-size-07);
+    line-height: var(--line-height-06);
+  }
+
+  .login-register-text {
+    font-size: var(--font-size-02);
+  }
+
+  .email-label {
+    padding-top: var(--spacing-06);
+  }
+
+  .login-register-other-links {
+    padding-top: var(--spacing-09);
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
@@ -0,0 +1,771 @@
+/*
+  CMS Generated Pages:
+  /about/*, /contact, /legal, /blog/*, /for/*, /events/*
+*/
+
+@mixin section-row-custom-gap($spacing) {
+  // only update the padding between columns
+  // not the padding before the first column
+  // or the padding after the last column
+  // rows can be nested, so only select direct col in row
+
+  > div[class*='col-'] {
+    &:not(:first-child, :last-child) {
+      padding-left: $spacing;
+      padding-right: $spacing;
+    }
+
+    &:first-child {
+      padding-right: $spacing;
+    }
+
+    &:last-child {
+      padding-left: $spacing;
+    }
+  }
+}
+
+.cms-page {
+  .sales-contact-form-left-column {
+    @include media-breakpoint-up(sm) {
+      .names-container {
+        display: flex;
+        gap: 21px;
+      }
+    }
+
+    .checkbox-label {
+      font-size: 16px;
+      font-weight: 400;
+    }
+  }
+
+  .row {
+    row-gap: var(--spacing-13);
+  }
+
+  .p-no-text-nodes:has(.btn) {
+    margin-top: var(--spacing-09);
+
+    @include media-breakpoint-down(md) {
+      .btn {
+        width: 100%;
+        margin-left: 0;
+        margin-top: var(--spacing-05);
+      }
+
+      .btn:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+
+  .linkable-list-container {
+    .row-with-id {
+      margin-top: var(--spacing-12);
+
+      h2:first-child {
+        // css specificity problem. this is more specific than header overrides below
+        margin-top: 0;
+      }
+    }
+  }
+
+  // create .paragraphs-margin-spacing-00, .paragraphs-margin-spacing-01, .paragraphs-margin-spacing-02, .paragraphs-margin-spacing-03, .paragraphs-margin-spacing-04, .paragraphs-margin-spacing-05, .paragraphs-margin-spacing-06, .paragraphs-margin-spacing-07, .paragraphs-margin-spacing-08, .paragraphs-margin-spacing-09, .paragraphs-margin-spacing-10, .paragraphs-margin-spacing-11, .paragraphs-margin-spacing-12, .paragraphs-margin-spacing-13, .paragraphs-margin-spacing-14, .paragraphs-margin-spacing-15, .paragraphs-margin-spacing-16
+  @each $spacing-option in $all-spacings {
+    .paragraphs-margin-#{$spacing-option} {
+      p {
+        margin-bottom: var(--#{$spacing-option});
+      }
+    }
+  }
+
+  // create .paragraphs-top-margin-spacing-00, .paragraphs-top-margin-spacing-01, .paragraphs-top-margin-spacing-02, .paragraphs-top-margin-spacing-03, .paragraphs-top-margin-spacing-04, .paragraphs-top-margin-spacing-05, .paragraphs-top-margin-spacing-06, .paragraphs-top-margin-spacing-07, .paragraphs-top-margin-spacing-08, .paragraphs-top-margin-spacing-09, .paragraphs-top-margin-spacing-10, .paragraphs-top-margin-spacing-11, .paragraphs-top-margin-spacing-12, .paragraphs-top-margin-spacing-13, .paragraphs-top-margin-spacing-14, .paragraphs-top-margin-spacing-15, .paragraphs-top-margin-spacing-16
+  @each $spacing-option in $all-spacings {
+    .paragraphs-top-margin-#{$spacing-option} {
+      p {
+        margin-top: var(--#{$spacing-option}) !important;
+      }
+    }
+  }
+
+  // create .headers-top-margin-spacing-00, .headers-top-margin-spacing-01, .headers-top-margin-spacing-02, .headers-top-margin-spacing-03, .headers-top-margin-spacing-04, .headers-top-margin-spacing-05, .headers-top-margin-spacing-06, .headers-top-margin-spacing-07, .headers-top-margin-spacing-08, .headers-top-margin-spacing-09, .headers-top-margin-spacing-10, .headers-top-margin-spacing-11, .headers-top-margin-spacing-12, .headers-top-margin-spacing-13, .headers-top-margin-spacing-14, .headers-top-margin-spacing-15, .headers-top-margin-spacing-16
+  @each $spacing-option in $all-spacings {
+    .headers-top-margin-#{$spacing-option} {
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        margin-top: var(
+          --#{$spacing-option}
+        ) !important; // needed for :first-child specificity
+      }
+    }
+  }
+
+  // create .headers-bottom-margin-spacing-00, .headers-bottom-margin-spacing-01, .headers-bottom-margin-spacing-02, .headers-bottom-margin-spacing-03, .headers-bottom-margin-spacing-04, .headers-bottom-margin-spacing-05, .headers-bottom-margin-spacing-06, .headers-bottom-margin-spacing-07, .headers-bottom-margin-spacing-08, .headers-bottom-margin-spacing-09, .headers-bottom-margin-spacing-10, .headers-bottom-margin-spacing-11, .headers-bottom-margin-spacing-12, .headers-bottom-margin-spacing-13, .headers-bottom-margin-spacing-14, .headers-bottom-margin-spacing-15, .headers-bottom-margin-spacing-16
+  @each $spacing-option in $all-spacings {
+    .headers-bottom-margin-#{$spacing-option} {
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        margin-bottom: var(--#{$spacing-option});
+      }
+    }
+  }
+
+  @each $spacing-option in $all-spacings {
+    // create .padding-top-spacing-00, .padding-top-spacing-01, .padding-top-spacing-02, .padding-top-spacing-03, .padding-top-spacing-04, .padding-top-spacing-05, .padding-top-spacing-06, .padding-top-spacing-07, .padding-top-spacing-08, .padding-top-spacing-09, .padding-top-spacing-10, .padding-top-spacing-11, .padding-top-spacing-12, .padding-top-spacing-13, .padding-top-spacing-14, .padding-top-spacing-15, .padding-top-spacing-16
+    .padding-top-#{$spacing-option} {
+      padding-top: var(--#{$spacing-option});
+    }
+  }
+
+  @each $spacing-option in $all-spacings {
+    // create .padding-bottom-spacing-00, .padding-bottom-spacing-01, .padding-bottom-spacing-02, .padding-bottom-spacing-03, .padding-bottom-spacing-04, .padding-bottom-spacing-05, .padding-bottom-spacing-06, .padding-bottom-spacing-07, .padding-bottom-spacing-08, .padding-bottom-spacing-09, .padding-bottom-spacing-10, .padding-bottom-spacing-11, .padding-bottom-spacing-12, .padding-bottom-spacing-13, .padding-bottom-spacing-14, .padding-bottom-spacing-15, .padding-bottom-spacing-16
+    .padding-bottom-#{$spacing-option} {
+      padding-bottom: var(--#{$spacing-option});
+    }
+  }
+
+  .font-color-green-bright {
+    p,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      color: var(--green-bright);
+    }
+  }
+
+  .card + .card {
+    margin-top: var(--spacing-09);
+  }
+
+  .optional-text {
+    font-size: 14px;
+  }
+
+  section {
+    padding: var(--spacing-16) 0 0 0;
+
+    &.no-top-padding {
+      /* opt out of padding via the CMS */
+      padding-top: 0;
+    }
+
+    // TODO: confirm if we will still support this and if so what colors to use
+    // &.color-block {
+    //   &.green-dark {
+    //     background-color: @ol-dark-green;
+    //   }
+    //   &.green {
+    //     background-color: @ol-green;
+
+    //     .no-card * {
+    //       .btn-primary,
+    //       .btn-success {
+    //         // only correct button colors when green on green
+    //         .btn-primary-on-primary-bg;
+    //       }
+    //     }
+    //   }
+    //   &.blue-gray-dark {
+    //     background-color: @ol-blue-gray-5;
+    //   }
+    //   &.blue-gray-light {
+    //     background-color: @ol-blue-gray-1;
+    //   }
+
+    //   &.green,
+    //   &.green-dark,
+    //   &.blue-gray-dark {
+    //     .no-card * {
+    //       &:not(.btn) {
+    //         color: @white;
+    //       }
+    //       a {
+    //         text-decoration: underline;
+    //       }
+    //       .btn {
+    //         text-decoration: none;
+    //       }
+
+    //       .form-control {
+    //         color: @input-color;
+    //       }
+    //     }
+    //   }
+    // }
+  }
+
+  // only first level of .section-row need to act like containers. We do not want to update .section-row nested within a .section-row
+  section > .section-row {
+    @extend .container;
+  }
+
+  padding-bottom: 0;
+
+  img {
+    height: auto;
+    max-width: 100%;
+  }
+
+  /*
+      Tabs
+    */
+  .tab-content {
+    padding-left: 0;
+    padding-right: 0;
+    width: 100%;
+  }
+
+  /*
+      When on preview mode
+    */
+  .cms-preview {
+    background-color: var(--blue-60);
+    color: white;
+    font-weight: bold;
+    height: 30px;
+    left: 0;
+    line-height: 30px;
+    opacity: 0.8;
+    position: fixed;
+    text-align: center;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+
+    &::after {
+      content: 'Preview';
+      width: 100%;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  .tab-pane {
+    .row:first-child {
+      margin-top: 0;
+    }
+  }
+
+  /*
+      Tables
+    */
+  .table-styled {
+    overflow: hidden;
+    overflow-x: auto;
+
+    table {
+      background: white;
+      max-width: none;
+
+      th,
+      td {
+        border: 1px solid var(--neutral-30);
+        padding: var(--spacing-05);
+        text-align: center;
+        word-break: normal;
+      }
+    }
+  }
+
+  .table-styled,
+  .features-table {
+    .fa-check-square,
+    .fa-check {
+      color: var(--green-50);
+    }
+  }
+
+  .features-table {
+    max-width: none;
+
+    th,
+    td {
+      border: 1px solid var(--neutral-30);
+      hyphens: auto;
+      padding: var(--spacing-05);
+      text-align: center;
+      width: 20%;
+    }
+
+    .btn {
+      max-width: 100%;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+
+    &.left-align-first-col {
+      td,
+      th {
+        text-align: left;
+      }
+
+      td + td,
+      th + th {
+        text-align: center;
+      }
+    }
+
+    .hidden-row-above-xs {
+      display: none;
+    }
+
+    @include media-breakpoint-down(md) {
+      tbody,
+      thead {
+        display: block;
+      }
+
+      tr {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: space-around;
+      }
+
+      td,
+      th {
+        display: block;
+        width: 25%;
+      }
+
+      tr:first-child {
+        th {
+          width: 50%;
+        }
+
+        th:first-child {
+          width: 100%;
+        }
+      }
+
+      td:first-child {
+        text-align: center;
+        width: 100%;
+      }
+
+      .hidden-row-xs {
+        display: none;
+      }
+
+      .hidden-row-above-xs {
+        display: flex;
+      }
+
+      .table-header {
+        text-align: center;
+      }
+    }
+  }
+
+  /*
+      universities page
+    */
+  #universities-container {
+    padding: var(--spacing-07);
+    width: 100%;
+
+    .row {
+      border-bottom: 1px solid var(--neutral-10);
+
+      div {
+        padding: var(--spacing-07);
+        vertical-align: middle;
+      }
+    }
+
+    .row:first-child {
+      // parent container contains padding
+
+      div {
+        padding-top: 0;
+      }
+    }
+
+    .row:last-child {
+      border: 0;
+
+      // parent container contains padding
+      div {
+        border: 0;
+        padding-bottom: 0;
+      }
+    }
+
+    p {
+      margin: 0 auto;
+      width: 100%;
+    }
+
+    // Logos
+    .uni-logo {
+      margin: 0 auto;
+      max-height: 55px;
+      min-width: 55px;
+    }
+
+    .university-claim-btn {
+      text-align: center;
+    }
+
+    @include media-breakpoint-up(sm) {
+      display: table;
+      table-layout: fixed;
+
+      .row {
+        display: table-row;
+
+        div {
+          border-bottom: 1px solid var(--neutral-10);
+          display: table-cell;
+          float: none;
+        }
+      }
+    }
+  }
+
+  /*
+      videos
+    */
+  video {
+    height: auto;
+    max-width: 100%;
+    box-shadow:
+      0 8px 16px 0 rgba(30 37 48 / 12%),
+      0 4px 6px 0 rgba(30 37 48 / 12%);
+  }
+
+  /*
+    cards
+  */
+  .card-body {
+    // card-body all have div before the actual content
+    // due to option to override font size
+    > :first-child {
+      > :first-child {
+        margin-top: 0;
+      }
+    }
+
+    > :last-child {
+      > :last-child {
+        margin-bottom: 0;
+
+        :last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  .card,
+  .no-card {
+    &.top-margin-sm {
+      margin-top: var(--spacing-05);
+    }
+
+    &.top-margin-md {
+      margin-top: var(--spacing-07);
+    }
+
+    &.top-margin-lg {
+      margin-top: var(--spacing-09);
+    }
+
+    &.top-margin-xl {
+      margin-top: var(--spacing-10);
+    }
+
+    &.top-margin-xxl {
+      margin-top: var(--spacing-11);
+    }
+
+    // create .top-margin-spacing-00, .top-margin-spacing-01, .top-margin-spacing-02, .top-margin-spacing-03, .top-margin-spacing-04, .top-margin-spacing-05, .top-margin-spacing-06, .top-margin-spacing-07, .top-margin-spacing-08, .top-margin-spacing-09, .top-margin-spacing-10, .top-margin-spacing-11, .top-margin-spacing-12, .top-margin-spacing-13, .top-margin-spacing-14, .top-margin-spacing-15, .top-margin-spacing-16
+    @each $spacing-option in $all-spacings {
+      &.top-margin-#{$spacing-option} {
+        margin-top: var(--#{$spacing-option});
+      }
+    }
+  }
+
+  .card {
+    @each $spacing-option in $all-spacings {
+      // create .padding-spacing-00, .padding-spacing-01, .padding-spacing-02, .padding-spacing-03, .padding-spacing-04, .padding-spacing-05, .padding-spacing-06, .padding-spacing-07, .padding-spacing-08, .padding-spacing-09, .padding-spacing-10, .padding-spacing-11, .padding-spacing-12, .padding-spacing-13, .padding-spacing-14, .padding-spacing-15, .padding-spacing-16
+      &.padding-#{$spacing-option} {
+        .card-body {
+          padding: var(--#{$spacing-option});
+        }
+      }
+    }
+  }
+
+  .no-card {
+    @each $spacing-option in $all-spacings {
+      // create .padding-spacing-00, .padding-spacing-01, .padding-spacing-02, .padding-spacing-03, .padding-spacing-04, .padding-spacing-05, .padding-spacing-06, .padding-spacing-07, .padding-spacing-08, .padding-spacing-09, .padding-spacing-10, .padding-spacing-11, .padding-spacing-12, .padding-spacing-13, .padding-spacing-14, .padding-spacing-15, .padding-spacing-16
+      &.padding-#{$spacing-option} {
+        padding: var(--#{$spacing-option});
+      }
+    }
+  }
+
+  .table-of-contents {
+    --link-color: var(--neutral-70);
+    --link-visited-color: var(--neutral-70);
+
+    border-top: 1px solid var(--neutral-30);
+    border-bottom: 1px solid var(--neutral-30);
+    padding: var(--spacing-09) 0;
+    margin-right: var(--spacing-13);
+
+    h2 {
+      @include heading-xs;
+
+      color: var(--green-60);
+      margin: 0;
+      margin-bottom: var(--spacing-06);
+    }
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      li {
+        margin-top: var(--spacing-06);
+      }
+
+      li:first-child {
+        margin-top: 0;
+      }
+    }
+
+    a {
+      text-decoration: none;
+      font-weight: 500;
+
+      &:hover {
+        text-decoration: none !important;
+      }
+    }
+  }
+}
+
+.icon-with-content {
+  display: flex;
+
+  h2,
+  h3,
+  h4 {
+    margin-top: 15px;
+  }
+
+  .icon-container {
+    background-color: var(--green-10);
+    padding: 7.5px;
+    height: 56px;
+    width: 56px;
+    border-radius: 50%;
+    margin-right: 24px;
+
+    .icon-inner-container {
+      align-items: center;
+      border: var(--green-30) 3.5px solid;
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      height: 42px;
+      width: 42px;
+    }
+
+    i {
+      color: var(--green-50);
+      font-size: 21px;
+    }
+  }
+}
+
+.visual-with-content {
+  display: flex;
+  gap: var(--spacing-06);
+  align-items: flex-start;
+}
+
+.svg-arrow-icon {
+  position: relative;
+  left: 4px;
+  bottom: 1px;
+}
+
+.vertically-center-col > div[class*='col-'] {
+  align-self: center;
+
+  // remove margin to better vertically align
+  // some elements need to be nested within a container, and others are directly within .no-card/.card
+  .card:first-child,
+  .no-card:first-child {
+    .cms-element-container {
+      > *:first-child {
+        margin-top: 0;
+      }
+    }
+
+    > *:first-child:not(.cms-element-container) {
+      margin-top: 0;
+    }
+  }
+
+  .card:last-child,
+  .no-card:last-child {
+    .cms-element-container {
+      > *:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    > *:last-child:not(.cms-element-container) {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.row-within-card {
+  .no-card {
+    div:first-child {
+      > :first-child {
+        margin-top: 0;
+      }
+    }
+
+    div:last-child {
+      > :last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.sidebar-blog {
+  .card-body {
+    padding: var(--spacing-06) !important;
+
+    h2 {
+      @extend .h5;
+
+      padding: var(--spacing-04) var(--spacing-05);
+      margin-bottom: unset;
+    }
+
+    .badge-link-list {
+      padding: 0 var(--spacing-05);
+      margin-bottom: 0 !important;
+    }
+
+    .sidebar-register-container {
+      margin-top: var(--spacing-05);
+
+      a {
+        margin-top: var(--spacing-02);
+        margin-left: var(--spacing-05);
+      }
+    }
+  }
+}
+
+.contact-form-error-container {
+  padding-bottom: var(--spacing-08);
+}
+
+// Desktop layout options depdendent on mobile breakpoint
+@include media-breakpoint-up(lg) {
+  .row-equal-column-heights > div[class*='col-'] > .card,
+  .row-equal-column-heights > div[class*='col-'] > .no-card {
+    height: 100%;
+  }
+
+  .row {
+    &.row-max-800 {
+      max-width: 800px !important;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    &.row-max-900 {
+      max-width: 900px !important;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    &.row-max-1000 {
+      max-width: 1000px !important;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    &.row-max-unset {
+      max-width: unset !important;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+
+  // create .row-gap-spacing-00, .row-gap-spacing-01, .row-gap-spacing-02, .row-gap-spacing-03, .row-gap-spacing-04, .row-gap-spacing-05, .row-gap-spacing-06, .row-gap-spacing-07, .row-gap-spacing-08, .row-gap-spacing-09, .row-gap-spacing-10, .row-gap-spacing-11, .row-gap-spacing-12, .row-gap-spacing-13, .row-gap-spacing-14, .row-gap-spacing-15, .row-gap-spacing-16
+  @each $spacing-option in $all-spacings {
+    .row-gap-#{$spacing-option} {
+      @include section-row-custom-gap(calc(var(--#{$spacing-option}) / 2));
+    }
+  }
+}
+
+// Mobile layout options depdendent on mobile breakpoint
+@include media-breakpoint-down(lg) {
+  .cms-page {
+    .reverse-col-order-mobile {
+      flex-direction: column-reverse;
+    }
+
+    // create .row-mobile-gap-spacing-00, .row-mobile-gap-spacing-01, .row-mobile-gap-spacing-02, .row-mobile-gap-spacing-03, .row-mobile-gap-spacing-04, .row-mobile-gap-spacing-05, .row-mobile-gap-spacing-06, .row-mobile-gap-spacing-07, .row-mobile-gap-spacing-08, .row-mobile-gap-spacing-09, .row-mobile-gap-spacing-10, .row-mobile-gap-spacing-11, .row-mobile-gap-spacing-12, .row-mobile-gap-spacing-13, .row-mobile-gap-spacing-14, .row-mobile-gap-spacing-15, .row-mobile-gap-spacing-16
+    @each $spacing-option in $all-spacings {
+      .row-mobile-gap-#{$spacing-option} {
+        @include section-row-custom-gap(calc(var(--#{$spacing-option}) / 2));
+      }
+    }
+  }
+}
+
+.bottom-align-last-entry {
+  &.no-card {
+    display: flex;
+    flex-direction: column;
+
+    * {
+      &:last-child {
+        flex: 1;
+        align-content: end;
+      }
+    }
+  }
+
+  &.card {
+    .card-body {
+      display: flex;
+      flex-direction: column;
+
+      * {
+        &:last-child {
+          flex: 1;
+          align-content: end;
+        }
+      }
+    }
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/content.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/content.scss
@@ -0,0 +1,79 @@
+/*
+  Styling for content pages
+  Including: about, blog, /for/__, legal, contact, portals, wiki, gallery, plans, and interstitial payment page
+*/
+
+// TODO: consolidate cms.scss and content.scss
+
+.content-page {
+  &.content {
+    padding-top: $header-height; // remove extra padding added by .content. Keep .content selector to increase specificity
+  }
+
+  word-break: break-word;
+
+  .btn + .btn,
+  .card-link + .card-link {
+    margin-left: var(--spacing-06);
+  }
+
+  .card-links {
+    @include media-breakpoint-down(md) {
+      .btn {
+        width: 100%;
+        margin-left: 0;
+        margin-top: var(--spacing-05);
+      }
+
+      .btn:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+
+  /*
+      Links and Buttons
+    */
+
+  // TODO: remove an use link style in more generic selector,
+  // which is likely .website-redesign to start
+  // a {
+  //   color: @link-color-alt;
+  //   &:hover {
+  //     color: @link-hover-color-alt;
+  //   }
+  // }
+
+  hr {
+    border-color: var(--neutral-30);
+  }
+
+  .begin-now-card {
+    margin: calc(var(--spacing-16) * 2) 0;
+  }
+
+  // TODO: only used on about page. Confirm with UX changes needed
+  // .container-small {
+  //   section .section-row {
+  //     /* match col-sm-8 */
+  //     /* @grid-gutter-width  is used for margins */
+  //     max-width: (@screen-sm * (8/12)) - @grid-gutter-width;
+  //     @media (min-width: @screen-md-min) {
+  //       max-width: (@screen-md * (8/12)) - @grid-gutter-width;
+  //     }
+  //     @media (min-width: @screen-lg-min) {
+  //       max-width: (@screen-lg * (8/12)) - @grid-gutter-width;
+  //     }
+  //   }
+  // }
+
+  /*
+      lists
+    */
+
+  .list-without-style {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/chat.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/chat.scss
@@ -0,0 +1,326 @@
+:root {
+  --chat-bg: var(--neutral-80);
+  --chat-color: var(--white);
+  --chat-instructions-color: var(--neutral-20);
+  --chat-new-message-bg: var(--neutral-70);
+  --chat-new-message-textarea-color: var(--neutral-90);
+  --chat-new-message-textarea-bg: var(--neutral-20);
+  --chat-new-message-textarea-border: var(--editor-border-color);
+  --chat-new-message-border: var(--editor-border-color);
+  --chat-message-date-color: var(--neutral-40);
+  --chat-message-name-color: var(--white);
+}
+
+.ide-redesign-main {
+  --chat-bg: var(--bg-dark-primary);
+  --chat-color: var(--content-primary);
+  --chat-instructions-color: var(--content-primary-dark);
+  --chat-new-message-bg: var(--bg-dark-primary);
+  --chat-new-message-textarea-color: var(--content-primary-dark);
+  --chat-new-message-textarea-bg: var(--bg-dark-primary);
+  --chat-message-date-color: var(--content-secondary-dark);
+  --chat-message-name-color: var(--content-secondary-dark);
+  --chat-date-align: center;
+}
+
+@include theme('light') {
+  --chat-bg: var(--white);
+  --chat-color: var(--neutral-70);
+  --chat-instructions-color: var(--neutral-70);
+  --chat-new-message-bg: var(--neutral-10);
+  --chat-new-message-textarea-color: var(--neutral-90);
+  --chat-new-message-textarea-bg: var(--white);
+  --chat-new-message-textarea-border: var(--editor-border-color);
+  --chat-new-message-border: var(--editor-border-color);
+  --chat-message-date-color: var(--neutral-70);
+  --chat-message-name-color: var(--neutral-70);
+
+  .ide-redesign-main {
+    --chat-bg: var(--white);
+    --chat-color: var(--neutral-70);
+    --chat-instructions-color: var(--neutral-70);
+    --chat-new-message-bg: var(--neutral-10);
+    --chat-new-message-textarea-color: var(--neutral-90);
+    --chat-new-message-textarea-bg: var(--white);
+    --chat-new-message-textarea-border: var(--editor-border-color);
+    --chat-new-message-border: var(--white);
+    --chat-message-date-color: var(--neutral-70);
+    --chat-message-name-color: var(--neutral-70);
+    --chat-date-align: center;
+  }
+}
+
+.chat {
+  $new-message-height: 80px;
+
+  color: var(--chat-color);
+
+  .no-messages {
+    padding: calc(var(--line-height-03) / 2);
+    color: var(--chat-instructions-color);
+  }
+
+  .first-message {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding: calc(var(--line-height-03) / 2);
+    color: var(--chat-instructions-color);
+  }
+
+  .chat-error {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background-color: var(--chat-bg);
+    padding: calc(var(--line-height-03) / 2);
+    text-align: center;
+  }
+
+  .messages {
+    position: absolute;
+    inset: 0;
+    bottom: $new-message-height;
+    overflow-x: hidden;
+    background-color: var(--chat-bg);
+
+    li.message {
+      margin: calc(var(--line-height-03) / 2);
+
+      .date {
+        font-size: var(--font-size-01);
+        color: var(--chat-message-date-color);
+        margin-bottom: calc(var(--line-height-03) / 2);
+        text-align: var(--chat-date-align, right);
+      }
+
+      .message-wrapper {
+        .name {
+          font-size: var(--font-size-01);
+          color: var(--chat-message-name-color);
+          margin-bottom: var(--spacing-02);
+          min-height: 16px;
+        }
+
+        .message {
+          border-left: 3px solid transparent;
+          font-size: var(--font-size-02);
+          box-shadow: none;
+          border-radius: var(--border-radius-base);
+          position: relative;
+
+          .message-content {
+            padding: var(--spacing-03) var(--spacing-05);
+            overflow-x: auto;
+            color: var(--white);
+            font-weight: bold;
+
+            a {
+              color: var(--white);
+            }
+          }
+
+          .arrow {
+            transform: rotate(90deg);
+            right: 90%;
+            top: -15px;
+            border: solid;
+            content: ' ';
+            height: 0;
+            width: 0;
+            position: absolute;
+            pointer-events: none;
+            border-top-color: transparent !important;
+            border-bottom-color: transparent !important;
+            border-width: 10px;
+          }
+        }
+
+        p {
+          margin-bottom: calc(var(--line-height-03) / 4);
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+        }
+      }
+
+      &:not(.self) {
+        .message {
+          .arrow {
+            border-left-color: transparent !important;
+          }
+        }
+      }
+
+      &.self {
+        margin-top: var(--line-height-03);
+
+        .message-wrapper .message {
+          border-left: none;
+          border-right: 3px solid transparent;
+
+          .arrow {
+            left: 100%;
+            right: auto;
+            border-right-color: transparent !important;
+          }
+        }
+      }
+    }
+  }
+
+  .new-message {
+    @extend .full-size;
+
+    top: auto;
+    height: $new-message-height;
+    background-color: var(--chat-new-message-bg);
+    padding: calc(var(--line-height-03) / 4);
+    border-top: 1px solid var(--chat-new-message-border);
+
+    textarea {
+      overflow: auto;
+      resize: none;
+      border-radius: var(--border-radius-base);
+      border: 1px solid var(--chat-new-message-textarea-border);
+      height: 100%;
+      width: 100%;
+      color: var(--chat-new-message-textarea-color);
+      font-size: var(--font-size-02);
+      padding: calc(var(--line-height-03) / 4);
+      background-color: var(--chat-new-message-textarea-bg);
+    }
+  }
+}
+
+.chat-empty-state-placeholder {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  height: 100%;
+  gap: var(--spacing-06);
+  padding: var(--spacing-02);
+
+  .chat-empty-state-icon {
+    padding: var(--spacing-08);
+    font-size: var(--font-size-08);
+    height: 80px;
+    width: 80px;
+    border-radius: 50%;
+    display: inline-block;
+    line-height: 32px;
+    background-color: var(--bg-light-secondary);
+
+    .material-symbols {
+      font-size: 32px;
+    }
+  }
+
+  .chat-empty-state-title {
+    font-size: var(--font-size-02);
+    line-height: var(--line-height-02);
+    font-weight: bold;
+  }
+
+  .chat-empty-state-body {
+    font-size: var(--font-size-02);
+    line-height: var(--line-height-02);
+    color: var(--content-secondary);
+  }
+}
+
+.chat-message-redesign {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-01);
+
+  .message-row {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--spacing-03);
+  }
+
+  .message-avatar,
+  .message-avatar-placeholder {
+    flex: 0 0 24px;
+  }
+
+  .message-avatar .avatar {
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    border-radius: 50%;
+    text-align: center;
+    color: var(--white);
+    text-transform: uppercase;
+  }
+
+  .message-author,
+  .message-container {
+    flex: 1 1 auto;
+    max-width: calc(100% - 24px - var(--spacing-03));
+  }
+
+  .message-container {
+    display: flex;
+    justify-content: flex-start;
+  }
+
+  .message-author {
+    color: var(--chat-message-name-color);
+    font-size: var(--font-size-01);
+    line-height: var(--line-height-01);
+  }
+
+  .message-content {
+    background-color: var(--bg-light-secondary);
+    border-radius: var(--border-radius-large);
+    padding: var(--spacing-03) var(--spacing-04);
+    width: fit-content;
+    max-width: 100%;
+    overflow-x: auto;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  .message-container.message-from-self {
+    justify-content: flex-end;
+
+    .message-content {
+      background-color: var(--bg-accent-03);
+    }
+
+    &:not(.first-row-in-message) .message-content {
+      border-top-right-radius: var(--border-radius-base);
+    }
+
+    &:not(.last-row-in-message) .message-content {
+      border-bottom-right-radius: var(--border-radius-base);
+    }
+  }
+
+  .message-container:not(.message-from-self) {
+    &:not(.first-row-in-message) .message-content {
+      border-top-left-radius: var(--border-radius-base);
+    }
+
+    &:not(.last-row-in-message) .message-content {
+      border-bottom-left-radius: var(--border-radius-base);
+    }
+  }
+}
+
+.chat-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  .chat-wrapper {
+    flex: 1 1 auto;
+    position: relative;
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/compile-button.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/compile-button.scss
@@ -0,0 +1,71 @@
+$stripe-width: 20px;
+
+@keyframes pdf-toolbar-stripes {
+  from {
+    background-position: 0 0;
+  }
+
+  to {
+    background-position: $stripe-width 0;
+  }
+}
+
+.btn-striped-animated {
+  @include striped;
+
+  background-size: $stripe-width $stripe-width;
+  background-origin: content-box;
+
+  @include animation(pdf-toolbar-stripes 2s linear infinite);
+}
+
+.detach-compile-button {
+  &[disabled],
+  &[disabled]:active {
+    background-color: var(--bs-btn-bg);
+    color: var(--bs-btn-color);
+    opacity: 1;
+    pointer-events: auto;
+    cursor: not-allowed;
+  }
+}
+
+@keyframes compile-button-flash {
+  0%,
+  100% {
+    background: rgb(0 0 0 / 0%);
+  }
+
+  25%,
+  75% {
+    background: rgb(0 0 0 / 20%);
+  }
+}
+
+@keyframes compile-button-bounce {
+  0%,
+  50%,
+  100% {
+    transform: translateY(0);
+  }
+
+  25%,
+  75% {
+    transform: translateY(2px);
+  }
+}
+
+.detach-compile-button-animate {
+  animation-duration: 1.2s;
+  animation-fill-mode: both;
+  animation-timing-function: ease-in-out;
+  animation-name: compile-button-flash;
+}
+
+.detach-compile-button-animate .material-symbols {
+  animation-duration: 0.6s;
+  animation-delay: 0.4s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+  animation-name: compile-button-bounce;
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/figure-modal.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/figure-modal.scss
@@ -0,0 +1,89 @@
+.figure-modal-help-link,
+.figure-modal-help-link:hover,
+.figure-modal-help-link:focus,
+.figure-modal-help-link:active {
+  color: var(--neutral-90) !important;
+  text-decoration: none;
+}
+
+.figure-modal-help-link {
+  padding-left: 0;
+}
+
+.figure-modal-switcher-input {
+  position: relative;
+  z-index: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.file-container {
+  width: 100%;
+  height: 120px;
+  padding: var(--spacing-07) var(--spacing-08);
+  border: 1px dashed #eaeaea;
+  background-color: #fafafa;
+  justify-content: space-between;
+  border-radius: var(--border-radius-medium);
+}
+
+.file-container-file {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--neutral-20);
+  border-radius: var(--border-radius-medium);
+  background-color: white;
+  height: 100%;
+  padding: var(--spacing-06) var(--spacing-07);
+}
+
+.file-info {
+  margin-left: var(--spacing-07);
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+}
+
+.file-name {
+  font-weight: bold;
+}
+
+.figure-modal-source-button-grid {
+  display: grid;
+  justify-content: space-between;
+  gap: 8px;
+  grid-template-columns: 1fr 1fr;
+  margin: 0 auto;
+
+  &:not(:first-of-type) {
+    margin-top: 8px;
+  }
+}
+
+.figure-modal-source-button {
+  display: flex;
+  flex: 1 1 0;
+  align-items: center;
+  box-shadow: 0 2px 4px 0 #1e253029;
+  line-height: 44px;
+  background-color: var(--white);
+  border-radius: var(--border-radius-base);
+  border: none;
+  padding: 0 var(--spacing-04);
+
+  &-title {
+    flex: 1 1 auto;
+    text-align: left;
+  }
+}
+
+.figure-modal-source-button-icon {
+  margin-right: var(--spacing-03);
+}
+
+/* stylelint-disable selector-class-pattern */
+.figure-modal-upload .uppy-Dashboard-AddFiles-list {
+  display: none;
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/file-tree.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/file-tree.scss
@@ -0,0 +1,811 @@
+:root {
+  --file-tree-item-hover-bg: var(--bg-dark-secondary);
+  --file-tree-item-selected-bg: var(--bg-accent-01);
+  --file-tree-item-color: var(--content-primary-dark);
+  --file-tree-bg: var(--bg-dark-tertiary);
+  --file-tree-item-selected-color: var(--content-primary-dark);
+  --file-tree-item-dragging-bg: #{rgb($bg-dark-secondary, 0.9)};
+  --file-tree-item-dragging-color: var(--content-primary-dark);
+  --file-tree-item-dragging-preview-bg: #{rgb($bg-accent-01, 0.6)};
+  --file-tree-item-dragging-preview-colour: var(--content-primary-dark);
+  --file-tree-line-height: 2.05;
+  --file-tree-icon-colour: var(--content-disabled);
+}
+
+@include theme('light') {
+  --file-tree-item-hover-bg: var(--bg-light-tertiary);
+  --file-tree-item-color: var(--content-secondary);
+  --file-tree-bg: var(--bg-light-primary);
+  --file-tree-item-selected-color: var(--bg-light-primary);
+  --file-tree-item-dragging-bg: #{rgb($bg-light-tertiary, 0.9)};
+  --file-tree-item-dragging-color: var(--content-secondary);
+  --file-tree-item-dragging-preview-colour: var(--bg-light-primary);
+
+  .ide-redesign-main {
+    --file-tree-item-hover-bg: var(--bg-light-secondary);
+    --file-tree-item-selected-bg: var(--bg-accent-03);
+    --file-tree-item-selected-color: var(--green-70);
+    --file-tree-item-color: var(--content-primary);
+    --file-tree-bg: var(--white);
+    --file-tree-icon-colour: var(--content-primary);
+    --file-tree-item-dragging-bg: #{rgb($bg-dark-primary, 0.9)};
+    --file-tree-item-dragging-color: var(--white);
+    --file-tree-item-dragging-preview-bg: #{rgb($bg-light-secondary, 0.6)};
+    --file-tree-item-dragging-preview-colour: #{rgb($content-primary, 0.6)};
+    --file-tree-expand-button-color: var(--content-primary);
+  }
+}
+
+// TODO ide-redesign-cleanup: Replace the existing styling with these overrides.
+.ide-redesign-main {
+  --file-tree-item-hover-bg: var(--bg-dark-secondary);
+  --file-tree-item-selected-bg: var(--green-70);
+  --file-tree-item-selected-color: var(--green-10);
+  --file-tree-item-color: var(--content-primary-dark);
+  --file-tree-bg: var(--bg-dark-primary);
+  --file-tree-icon-colour: var(--content-primary-dark);
+  --file-tree-item-dragging-bg: #{rgb($bg-light-primary, 0.9)};
+  --file-tree-item-dragging-color: var(--content-secondary);
+  --file-tree-item-dragging-preview-bg: var(--bg-light-primary);
+  --file-tree-item-dragging-preview-colour: var(--bg-light-primary);
+  --file-tree-expand-button-color: var(--content-primary-dark);
+
+  .file-tree-outline-panel-group {
+    background-color: var(--file-tree-bg);
+  }
+
+  .file-tree-toolbar {
+    display: flex;
+    justify-content: space-between;
+    height: 28px;
+    margin: var(--spacing-02);
+  }
+
+  .file-tree-panel {
+    min-height: 36px;
+  }
+
+  .file-tree-panel-collapsed {
+    max-height: 36px;
+  }
+
+  .file-tree-expand-collapse-button {
+    border-radius: var(--border-radius-base);
+    color: var(--file-tree-expand-button-color);
+    display: flex;
+    align-items: center;
+    background-color: transparent;
+    border: 0;
+    padding: 0 var(--spacing-02);
+    flex-grow: 1;
+
+    &:hover {
+      background-color: var(--file-tree-item-hover-bg);
+    }
+
+    h4 {
+      color: var(--file-tree-expand-button-color);
+      font-size: var(--font-size-02);
+      margin: 0;
+      font-weight: normal;
+    }
+  }
+
+  .file-tree-toolbar-action-buttons {
+    display: flex;
+  }
+
+  .file-tree-toolbar-action-button {
+    color: var(--file-tree-expand-button-color);
+    padding: var(--spacing-02);
+    border-radius: var(--border-radius-full);
+
+    &:hover {
+      background-color: var(--file-tree-item-hover-bg);
+    }
+
+    &:active {
+      color: var(--file-tree-expand-button-color);
+    }
+
+    .material-symbols {
+      font-size: 16px;
+    }
+  }
+
+  .file-tree {
+    background-color: var(--file-tree-bg);
+  }
+
+  .file-tree ul.file-tree-list {
+    margin: var(--spacing-02);
+  }
+
+  .file-tree-folder-list {
+    border-left: 1px solid
+      color-mix(in srgb, var(--border-primary) 24%, transparent);
+    margin-left: 14px !important;
+    margin-top: 0;
+
+    &.file-tree-list {
+      border-left: none;
+      margin-left: var(--spacing-02) !important;
+
+      > .file-tree-folder-list-inner {
+        margin-left: 0;
+      }
+    }
+  }
+
+  .file-tree-folder-list-inner {
+    margin-left: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-02);
+  }
+
+  .item-name-button,
+  .folder-expand-collapse-button {
+    display: flex;
+    align-items: center;
+    height: 20px !important;
+  }
+
+  .file-tree ul.file-tree-list li .material-symbols.file-tree-expand-icon {
+    margin-left: 0;
+  }
+
+  .file-tree ul.file-tree-list li .material-symbols.file-tree-icon {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  // TODO ide-redesign-cleanup: Remove the !important overrides once
+  // we have replaced the default styling
+  .linked-file-highlight {
+    background-color: var(--file-tree-bg) !important;
+    color: var(--file-tree-icon-colour) !important;
+    left: 14px !important;
+  }
+
+  .entity-name {
+    color: var(--file-tree-item-color);
+    border-radius: var(--border-radius-base);
+    padding: var(--spacing-02);
+
+    // TODO ide-redesign-cleanup: This is here to override the fake-full-width-bg
+    // mixin. We can just remove that mixin when we clean this up.
+    &::before {
+      content: none !important;
+    }
+  }
+
+  .item-name-button {
+    margin-left: var(--spacing-02);
+  }
+
+  .dnd-draggable-preview-item {
+    border-radius: var(--border-radius-base);
+  }
+}
+
+.ide-react-file-tree-panel {
+  display: flex;
+  flex-direction: column;
+
+  // Prevent the file tree expanding beyond the boundary of the panel
+  .file-tree {
+    width: 100%;
+  }
+}
+
+.context-menu {
+  position: fixed;
+  z-index: 100;
+}
+
+.editor-sidebar {
+  background-color: var(--file-tree-bg);
+  display: flex;
+  flex-direction: column;
+}
+
+@mixin fake-full-width-bg($bg-color) {
+  &::before {
+    content: '\00a0';
+    position: absolute;
+    width: 9999px;
+    left: -9999px;
+    background-color: $bg-color;
+  }
+}
+
+@include theme('default') {
+  .file-tree {
+    .toolbar {
+      .toolbar-right,
+      .toolbar-left {
+        button {
+          opacity: 0.8;
+
+          &:hover,
+          &:focus,
+          &:active,
+          &.active {
+            background-color: rgba(125 125 125 / 20%);
+          }
+
+          &.active,
+          &:active {
+            background-color: rgba(125 125 125 / 40%);
+          }
+        }
+      }
+    }
+  }
+}
+
+.file-tree {
+  display: flex !important; // To work around jQuery layout's inline styles
+  flex-direction: column;
+  height: 100%;
+
+  .file-tree-inner {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    overflow-y: auto;
+    width: inherit;
+    height: inherit;
+    font-size: var(--font-size-02);
+
+    &.no-toolbar {
+      top: 0;
+    }
+  }
+
+  // TODO; Consolidate with "Project files" in Overleaf
+  h3 {
+    font-size: var(--font-size-03);
+    border-bottom: 1px solid var(--border-primary);
+    padding-bottom: var(--spacing-02);
+    margin: var(--spacing-05);
+  }
+
+  .toolbar {
+    .toolbar-right,
+    .toolbar-left {
+      button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        padding: 0;
+        box-shadow: none;
+        border-radius: var(--border-radius-base);
+        border: none;
+
+        &:hover,
+        &:focus,
+        &:active,
+        &.active {
+          background-color: rgb(125 125 125 / 10%);
+          color: var(--toolbar-btn-color) !important;
+        }
+
+        &.active,
+        &:active {
+          background-color: rgb(125 125 125 / 20%);
+        }
+      }
+    }
+  }
+
+  ul.file-tree-list {
+    margin: 0;
+    overflow: hidden auto;
+    height: 100%;
+    flex-grow: 1;
+    position: relative;
+
+    .entity > ul,
+    ul[role='tree'] {
+      margin-left: var(--spacing-08);
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      min-height: var(--spacing-08);
+    }
+
+    li {
+      line-height: var(--file-tree-line-height);
+      position: relative;
+
+      .entity {
+        user-select: none;
+      }
+
+      .entity > .entity-name {
+        display: flex;
+        align-items: center;
+
+        & > button {
+          background-color: transparent;
+          border: 0;
+          padding: 0;
+
+          &.item-name-button {
+            color: inherit;
+            width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            text-align: left;
+            padding-right: var(--spacing-09);
+            white-space: pre;
+          }
+        }
+      }
+
+      .entity-name {
+        color: var(--file-tree-item-color);
+        cursor: pointer;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &.entity-name-react {
+          text-overflow: clip;
+        }
+
+        background-color: transparent;
+
+        @include fake-full-width-bg(transparent);
+
+        &:hover {
+          background-color: var(--file-tree-item-hover-bg);
+
+          // When the entity is a subfolder, the DOM element is "indented" via margin-left. This makes the
+          // element not fill the entire file-tree width (as it's spaced from the left-hand side via margin)
+          // and, in consequence, the background gets clipped. The ::before pseudo-selector is used to fill
+          // the empty space.
+          @include fake-full-width-bg(var(--file-tree-item-hover-bg));
+        }
+
+        input {
+          line-height: 1.6;
+        }
+
+        .entity-menu-toggle > .material-symbols {
+          color: var(--content-primary-dark);
+          vertical-align: middle;
+        }
+      }
+
+      .material-symbols {
+        color: var(--file-tree-icon-colour);
+
+        &.file-tree-icon {
+          margin-right: var(--spacing-02);
+          margin-left: var(--spacing-04);
+          vertical-align: sub;
+
+          &.linked-file-icon {
+            position: relative;
+            left: -2px;
+
+            + .linked-file-highlight {
+              color: var(--file-tree-bg);
+              background-color: var(--content-disabled);
+              position: absolute;
+              top: 14px;
+              left: 20px;
+              font-size: var(--font-size-01);
+              border-radius: var(--spacing-01);
+            }
+          }
+        }
+
+        &.file-tree-folder-icon {
+          margin-right: var(--spacing-02);
+          vertical-align: sub;
+        }
+
+        &.file-tree-expand-icon {
+          margin-left: var(--spacing-04);
+          vertical-align: sub;
+        }
+      }
+
+      .material-symbols.toggle {
+        width: 24px;
+        padding: var(--spacing-03);
+        font-size: var(--font-size-03);
+        color: var(--file-tree-icon-colour);
+      }
+
+      .file-tree-dropdown-toggle {
+        display: flex;
+        align-items: center;
+        color: var(--content-primary-dark);
+        line-height: 1.6;
+        font-size: var(--font-size-05);
+        padding: 0 var(--font-size-02) 0 var(--font-size-04);
+
+        &:hover,
+        &:focus {
+          text-decoration: none;
+        }
+
+        &::before {
+          content: '\00B7\00B7\00B7';
+          transform: rotate(90deg);
+          letter-spacing: 0.5px;
+        }
+      }
+
+      &.multi-selected {
+        > .entity {
+          > .entity-name {
+            > div > .material-symbols,
+            > button > .material-symbols,
+            > .material-symbols,
+            .entity-menu-toggle .material-symbols {
+              color: var(--content-primary-dark);
+            }
+
+            > .material-symbols.linked-file-highlight {
+              background-color: var(--bg-info-01);
+            }
+
+            @include fake-full-width-bg(var(--bg-info-01));
+
+            color: var(--content-primary-dark);
+            font-weight: bold;
+            background-color: var(--bg-info-01);
+
+            &:hover {
+              background-color: var(--bg-info-02);
+
+              @include fake-full-width-bg(var(--bg-info-02));
+            }
+          }
+        }
+      }
+
+      .menu-button {
+        position: absolute;
+        right: 0;
+      }
+
+      .rename-input {
+        display: block;
+        position: absolute;
+        top: 1px;
+        left: 32px;
+        right: 32px;
+        color: var(--content-primary);
+
+        input {
+          width: 100%;
+        }
+      }
+
+      > .entity > .entity-name {
+        .entity-menu-toggle {
+          display: none;
+        }
+      }
+
+      .entity-limit-hit {
+        line-height: var(--file-tree-line-height);
+        color: var(--file-tree-item-color);
+        margin-left: var(--spacing-05);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .entity-limit-hit-message {
+        font-style: italic;
+      }
+
+      .material-symbols .entity-limit-hit-tooltip-trigger {
+        margin-left: var(spacing-03);
+        cursor: pointer;
+      }
+    }
+  }
+
+  &:not(.multi-selected) {
+    ul.file-tree-list li.selected {
+      > .entity {
+        > .entity-name {
+          background-color: var(--file-tree-item-selected-bg);
+          color: var(--file-tree-item-selected-color);
+
+          > div > .material-symbols,
+          > button > .material-symbols,
+          > .material-symbols,
+          .entity-menu-toggle .material-symbols {
+            color: var(--file-tree-item-selected-color);
+          }
+
+          > .material-symbols.linked-file-highlight {
+            background-color: var(--bg-info-01);
+          }
+
+          @include fake-full-width-bg(var(--file-tree-item-selected-bg));
+
+          font-weight: bold;
+          padding-right: var(--spacing-09);
+
+          button {
+            font-weight: inherit;
+          }
+
+          .entity-menu-toggle {
+            display: inline-block;
+            background-color: transparent;
+            box-shadow: none;
+            border: 0;
+            padding-right: var(--spacing-02);
+            padding-left: var(--spacing-02);
+          }
+        }
+      }
+    }
+  }
+
+  // while dragging, the previously selected item gets no highlight
+  ul.file-tree-list.file-tree-dragging li.selected .entity .entity-name {
+    @include fake-full-width-bg(transparent);
+
+    font-weight: normal;
+    background-color: transparent;
+    color: var(--file-tree-item-color);
+
+    .material-symbols {
+      color: var(--content-disabled) !important;
+    }
+  }
+
+  // the items being dragged get the full "hover" colour
+  ul.file-tree-list.file-tree-dragging
+    li
+    .entity.file-tree-entity-dragging
+    .entity-name {
+    background-color: var(--file-tree-item-dragging-bg);
+
+    @include fake-full-width-bg(var(--file-tree-item-dragging-bg));
+
+    color: var(--file-tree-item-dragging-color);
+
+    .material-symbols {
+      color: var(--content-disabled) !important;
+    }
+  }
+
+  // the drop target gets the "selected" colour
+  ul.file-tree-list.file-tree-dragging
+    li.dnd-droppable-hover
+    .entity
+    .entity-name {
+    background-color: var(--file-tree-item-selected-bg);
+
+    @include fake-full-width-bg(var(--file-tree-item-selected-bg));
+
+    color: var(--file-tree-item-selected-color);
+
+    .material-symbols {
+      color: var(--file-tree-item-selected-color) !important;
+    }
+  }
+
+  .dnd-draggable-preview-layer {
+    position: absolute;
+    pointer-events: none;
+    z-index: 100;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    &.dnd-droppable-hover {
+      border: 3px solid var(--file-tree-item-selected-bg);
+    }
+  }
+
+  .dnd-draggable-preview-item {
+    color: var(--file-tree-item-dragging-preview-colour);
+    background-color: var(--file-tree-item-dragging-preview-bg);
+    width: 75%;
+    padding-left: var(--spacing-08);
+    line-height: 2.05;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .disconnected-overlay {
+    background-color: var(--file-tree-bg);
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+    opacity: 0.5;
+    cursor: wait;
+  }
+}
+
+.modal-new-file {
+  padding: 0;
+
+  table {
+    width: 100%;
+    table-layout: fixed;
+
+    td {
+      vertical-align: top;
+    }
+  }
+
+  .toggle-file-type-button {
+    font-size: var(--font-size-02);
+    margin-top: calc(var(--spacing-05) * -1);
+
+    .btn {
+      display: inline-block;
+      padding: 0;
+      vertical-align: baseline;
+      font-size: inherit;
+    }
+
+    .btn:focus-within {
+      outline: none;
+      text-decoration: none;
+    }
+  }
+}
+
+.modal-new-file-list {
+  background-color: var(--bg-light-secondary);
+  width: 220px;
+
+  ul {
+    li {
+      /* old modal (a) */
+      a {
+        color: var(--content-secondary);
+        padding: var(--spacing-03);
+        display: block;
+        text-decoration: none;
+      }
+
+      /* new modal (button) */
+      .btn {
+        color: var(--content-secondary);
+        padding: var(--spacing-03);
+      }
+
+      .btn:hover {
+        text-decoration: none;
+      }
+
+      .btn:focus {
+        outline: none;
+        text-decoration: none;
+        background-color: white;
+      }
+    }
+
+    li.active {
+      background-color: white;
+
+      /* old modal (a) */
+      a {
+        color: var(--link-ui);
+      }
+
+      /* new modal (button) */
+      .btn {
+        color: var(--link-ui);
+        text-decoration: none;
+      }
+    }
+
+    li:hover {
+      background-color: white;
+    }
+  }
+}
+
+.file-tree-error {
+  text-align: center;
+  color: var(--content-secondary-dark);
+  padding: 20px;
+}
+
+.file-tree-modal-alert {
+  margin-top: var(--spacing-06);
+}
+
+.btn.modal-new-file-mode {
+  justify-content: left;
+  text-align: left;
+  text-decoration: none;
+  width: 100%;
+}
+
+.modal-new-file-body {
+  padding: 20px;
+  padding-top: var(--spacing-03);
+}
+
+.modal-new-file-body-upload {
+  padding-top: 20px;
+}
+
+.modal-new-file-body-conflict {
+  background-color: var(--bg-danger-03);
+  border: 1px dashed var(--border-danger);
+  min-height: 400px;
+  border-radius: 3px;
+  color: var(--content-primary);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: var(--spacing-05);
+}
+
+.modal-footer {
+  .approaching-file-limit {
+    font-weight: bold;
+  }
+
+  .at-file-limit {
+    text-align: left;
+  }
+}
+
+/* stylelint-disable selector-class-pattern */
+.modal-new-file-body-upload .uppy-Root {
+  font-family: inherit;
+}
+
+.modal-new-file-body-upload .uppy-Dashboard {
+  .uppy-Dashboard-inner {
+    border: none;
+  }
+
+  .uppy-Dashboard-dropFilesHereHint {
+    inset: 0;
+  }
+
+  .uppy-Dashboard-AddFiles {
+    margin: 0;
+    border: 1px dashed var(--border-primary);
+    height: 100%;
+
+    .uppy-Dashboard-AddFiles-title {
+      font-size: inherit;
+    }
+  }
+
+  .uppy-Dashboard-AddFiles-title {
+    width: 26em; // sized to create a wrap between the sentences
+    max-width: 100%;
+  }
+
+  .uppy-Informer p {
+    background-color: var(--bg-info-03);
+    border: 1px solid var(--blue-20);
+    border-radius: var(--border-radius-base);
+    color: var(--content-primary);
+    font-size: var(--font-size-03);
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/file-view.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/file-view.scss
@@ -0,0 +1,103 @@
+.file-view {
+  padding: var(--spacing-05);
+  text-align: center;
+  overflow: auto;
+
+  .loading-panel {
+    padding-top: 8rem;
+    background: var(--neutral-10);
+  }
+
+  .file-view-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-03);
+    justify-content: center;
+  }
+
+  .file-view-error {
+    margin: var(--spacing-08) auto auto;
+    max-width: 400px;
+    text-align: left;
+  }
+
+  img,
+  .file-view-pdf {
+    max-width: 100%;
+    max-height: 90%;
+    display: block;
+    margin: var(--spacing-05) auto auto;
+    border: 1px solid var(--neutral-60);
+    box-shadow: 0 2px 3px var(--neutral-60);
+    background-color: var(--white);
+  }
+
+  .file-view-pdf {
+    overflow: auto;
+    width: max-content;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .pdf-page:not(:last-of-type) {
+      border-bottom: 1px solid var(--neutral-60);
+    }
+  }
+
+  .linked-file-icon {
+    color: var(--blue-50);
+  }
+
+  .no-preview {
+    color: var(--neutral-60);
+    font-size: var(--font-size-06);
+    margin-top: var(--spacing-06);
+  }
+
+  .text-preview {
+    margin-top: var(--spacing-05);
+    color: var(--content-primary);
+
+    .scroll-container {
+      background-color: var(--white);
+      font-size: 0.8em;
+      line-height: 1.1em;
+      overflow: auto;
+      border: 1px solid var(--neutral-30);
+      padding: var(--spacing-04) var(--spacing-05);
+      text-align: left;
+      white-space: pre;
+      font-family: monospace;
+    }
+  }
+}
+
+.full-size,
+.loading-panel {
+  position: absolute;
+  inset: 0;
+}
+
+.no-history-available,
+.no-file-selection-message,
+.multi-selection-message {
+  width: 50%;
+  margin: var(--spacing-10) auto;
+  text-align: center;
+}
+
+.pdf-empty,
+.no-history-available,
+.no-file-selection,
+.multi-selection-ongoing {
+  &::before {
+    @extend .full-size;
+
+    left: 20px;
+    content: '';
+    background: url(../../../../../public/img/ol-brand/overleaf-o-grey.svg)
+      center / 200px no-repeat;
+    opacity: 0.2;
+    pointer-events: none;
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/history.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/history.scss
@@ -0,0 +1,547 @@
+:root {
+  --history-react-header-bg: var(--bg-dark-secondary);
+  --history-react-header-color: var(--content-primary-dark);
+  --history-react-separator-color: var(--border-divider-dark);
+}
+
+@include theme('light') {
+  --history-react-header-bg: var(--bg-light-primary);
+  --history-react-header-color: var(--content-primary);
+  --history-react-separator-color: var(--border-divider);
+}
+
+history-root {
+  height: 100%;
+  display: block;
+}
+
+// Adding !important to override the styling of overlays and popovers
+.history-popover .popover-arrow {
+  top: 20px !important;
+  transform: unset !important;
+}
+
+.history-react {
+  --history-change-list-padding: var(--spacing-06);
+
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  background-color: var(--bg-light-primary);
+
+  .history-header {
+    @include body-sm;
+
+    height: 40px;
+    background-color: var(--history-react-header-bg);
+    color: var(--history-react-header-color);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    box-sizing: border-box;
+  }
+
+  .doc-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+
+    .toolbar-container {
+      border-bottom: 1px solid var(--history-react-separator-color);
+      padding: 0 var(--spacing-04);
+    }
+
+    .doc-container {
+      flex: 1;
+      overflow-y: auto;
+      display: flex;
+    }
+  }
+
+  .doc-container .loading {
+    margin: 10rem auto auto;
+  }
+
+  .change-list {
+    @include body-sm;
+
+    display: flex;
+    flex-direction: column;
+    width: 320px;
+    border-left: 1px solid var(--history-react-separator-color);
+    box-sizing: content-box;
+  }
+
+  .toggle-switch-label {
+    flex: 1;
+
+    span {
+      display: block;
+    }
+  }
+
+  .history-version-list-container {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .history-all-versions-scroller {
+    overflow-y: auto;
+    height: 100%;
+  }
+
+  .history-all-versions-container {
+    position: relative;
+  }
+
+  .history-versions-bottom {
+    position: absolute;
+    height: 8em;
+    bottom: 0;
+  }
+
+  .history-toggle-switch-container,
+  .history-version-day,
+  .history-version-details {
+    padding: 0 var(--history-change-list-padding);
+  }
+
+  .history-version-day {
+    background-color: white;
+    position: sticky;
+    z-index: 1;
+    top: 0;
+    display: block;
+    padding-top: var(--spacing-05);
+    padding-bottom: var(--spacing-02);
+    line-height: var(--line-height-02);
+  }
+
+  .history-version-details {
+    display: flow-root;
+    padding-top: var(--spacing-04);
+    padding-bottom: var(--spacing-04);
+    position: relative;
+
+    &.history-version-selectable {
+      cursor: pointer;
+
+      &:hover {
+        background-color: var(--bg-light-secondary);
+      }
+    }
+
+    &.history-version-selected {
+      background-color: var(--bg-accent-03);
+      border-left: var(--spacing-02) solid var(--green-50);
+      padding-left: calc(
+        var(--history-change-list-padding) - var(--spacing-02)
+      );
+    }
+
+    &.history-version-selected.history-version-selectable:hover {
+      background-color: rgb($green-70, 16%);
+      border-left: var(--spacing-02) solid var(--green-50);
+    }
+
+    &.history-version-within-selected {
+      background-color: var(--bg-light-secondary);
+      border-left: var(--spacing-02) solid var(--green-50);
+    }
+
+    &.history-version-within-selected:hover {
+      background-color: rgb($neutral-90, 8%);
+    }
+  }
+
+  .version-element-within-selected {
+    background-color: var(--bg-light-secondary);
+    border-left: var(--spacing-02) solid var(--green-50);
+  }
+
+  .version-element-selected {
+    background-color: var(--bg-accent-03);
+    border-left: var(--spacing-02) solid var(--green-50);
+  }
+
+  .history-version-metadata-time {
+    display: block;
+    margin-bottom: var(--spacing-02);
+    color: var(--content-primary);
+
+    &:last-child {
+      margin-bottom: initial;
+    }
+  }
+
+  .history-version-metadata-users,
+  .history-version-changes {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .history-version-restore-file {
+    margin-bottom: var(--spacing-04);
+  }
+
+  .history-version-metadata-users {
+    display: inline;
+    vertical-align: bottom;
+
+    > li {
+      display: inline-flex;
+      align-items: center;
+      margin-right: var(--spacing-04);
+    }
+  }
+
+  .history-version-changes {
+    > li {
+      margin-bottom: var(--spacing-02);
+    }
+  }
+
+  .history-version-user-badge-color {
+    --badge-size: 8px;
+
+    display: inline-block;
+    width: var(--badge-size);
+    height: var(--badge-size);
+    margin-right: var(--spacing-02);
+    border-radius: 2px;
+  }
+
+  .history-version-user-badge-text {
+    overflow-wrap: anywhere;
+    flex: 1;
+  }
+
+  .history-version-day,
+  .history-version-change-action,
+  .history-version-metadata-users,
+  .history-version-origin,
+  .history-version-saved-by {
+    color: var(--content-secondary);
+  }
+
+  .history-version-change-action {
+    overflow-wrap: anywhere;
+  }
+
+  .history-version-change-doc {
+    color: var(--content-primary);
+    overflow-wrap: anywhere;
+    white-space: pre-wrap;
+  }
+
+  .history-version-divider-container {
+    padding: var(--spacing-03) var(--spacing-04);
+  }
+
+  .history-version-divider {
+    margin: 0;
+    border-color: var(--border-divider);
+  }
+
+  .history-version-badge {
+    margin-bottom: var(--spacing-02);
+    margin-right: var(--spacing-05);
+    height: unset;
+    white-space: normal;
+    overflow-wrap: anywhere;
+
+    .material-symbols {
+      font-size: inherit;
+    }
+  }
+
+  .history-version-label {
+    margin-bottom: var(--spacing-02);
+
+    &:last-child {
+      margin-bottom: initial;
+    }
+  }
+
+  .loading {
+    font-family: $font-family-serif;
+  }
+
+  .history-all-versions-loading {
+    position: sticky;
+    bottom: 0;
+    padding: var(--spacing-05) 0;
+    background-color: var(--bg-light-secondary);
+    text-align: center;
+  }
+
+  .history-version-saved-by {
+    .history-version-saved-by-label {
+      margin-right: var(--spacing-04);
+    }
+  }
+
+  .dropdown.open {
+    .history-version-dropdown-menu-btn {
+      background-color: rgb(var(--bg-dark-primary) 0.08);
+      box-shadow: initial;
+    }
+  }
+
+  .history-compare-btn,
+  .history-version-dropdown-menu-btn {
+    @include reset-button;
+    @include action-button;
+
+    padding: 0;
+    width: 30px;
+    height: 30px;
+  }
+
+  .history-loading-panel {
+    padding-top: 10rem;
+    font-family: $font-family-serif;
+    text-align: center;
+  }
+
+  .history-react-toolbar {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-04);
+
+    .history-react-toolbar-file-info {
+      flex: 1;
+      text-align: right;
+    }
+
+    .history-react-toolbar-time {
+      font-weight: 700;
+    }
+  }
+
+  .history-paywall-prompt {
+    padding: var(--history-change-list-padding);
+
+    .history-feature-list {
+      list-style: none;
+      padding-left: var(--spacing-04);
+
+      li {
+        margin-bottom: var(--spacing-06);
+      }
+    }
+
+    button {
+      width: 100%;
+    }
+  }
+
+  .history-version-faded .history-version-details {
+    max-height: 6em;
+
+    @include mask-image(linear-gradient(black 35%, transparent));
+
+    overflow: hidden;
+  }
+
+  .history-paywall-heading {
+    @include heading-sm;
+    @include premium-text;
+
+    font-family: inherit;
+    font-weight: 700;
+    margin-top: var(--spacing-08);
+  }
+
+  .history-content {
+    padding: var(--spacing-05);
+  }
+}
+
+.history-version-label-tooltip {
+  padding: var(--spacing-03);
+  text-align: initial;
+
+  .history-version-label-tooltip-row {
+    margin-bottom: var(--spacing-03);
+
+    .history-version-label-tooltip-row-comment {
+      overflow-wrap: anywhere;
+
+      & .material-symbols {
+        font-size: inherit;
+      }
+    }
+
+    &:last-child {
+      margin-bottom: initial;
+    }
+  }
+}
+
+.document-diff-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  position: relative;
+
+  .cm-viewer-container,
+  .cm-editor {
+    height: 100%;
+  }
+
+  .previous-highlight-button,
+  .next-highlight-button {
+    @include shadow-md;
+
+    position: absolute;
+    right: var(--spacing-06);
+  }
+
+  .previous-highlight-button {
+    top: var(--spacing-06);
+  }
+
+  .next-highlight-button {
+    bottom: var(--spacing-06);
+  }
+}
+
+.history-dropdown-icon {
+  color: var(--content-primary);
+}
+
+.history-dropdown-icon-inverted {
+  color: var(--neutral-10);
+  vertical-align: top;
+}
+
+.history-restore-promo-icon {
+  vertical-align: middle;
+}
+
+.history-file-tree {
+  display: flex !important; // To work around jQuery layout's inline styles
+  flex-direction: column;
+  max-height: 100%;
+
+  ul.history-file-tree-list {
+    font-size: var(--font-size-02);
+    margin: 0;
+    overflow: hidden auto;
+
+    .history-file-tree-item > ul,
+    ul[role='tree'] {
+      margin-left: var(--spacing-08);
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      min-height: 25px;
+    }
+
+    li {
+      line-height: var(--file-tree-line-height);
+      position: relative;
+      margin-left: var(--spacing-04);
+
+      .history-file-tree-item {
+        color: var(--file-tree-item-color);
+        cursor: pointer;
+        white-space: nowrap;
+        user-select: none;
+        display: flex;
+        align-items: center;
+
+        @include fake-full-width-bg(transparent);
+
+        &:hover {
+          background-color: var(--file-tree-item-hover-bg);
+
+          // When the entity is a subfolder, the DOM element is "indented" via margin-left. This makes the
+          // element not fill the entire file-tree width (as it's spaced from the left-hand side via margin)
+          // and, in consequence, the background gets clipped. The ::before pseudo-selector is used to fill
+          // the empty space.
+          @include fake-full-width-bg(var(--file-tree-item-hover-bg));
+        }
+
+        .history-file-tree-folder-button {
+          padding: 0;
+          cursor: pointer;
+          background: transparent;
+          border: 0;
+        }
+
+        .history-file-tree-item-name-wrapper {
+          display: flex;
+          align-items: center;
+          width: 100%;
+          overflow: hidden;
+
+          .history-file-tree-item-name {
+            margin-right: var(--spacing-02);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            flex-grow: 1;
+            white-space: pre;
+
+            &.strikethrough {
+              text-decoration: line-through;
+            }
+          }
+
+          .history-file-tree-item-badge {
+            text-transform: capitalize;
+            font-weight: normal;
+            margin-right: var(--spacing-05);
+
+            &:hover {
+              background-color: var(--neutral-20) !important;
+            }
+          }
+        }
+      }
+
+      .material-symbols {
+        color: var(--content-disabled);
+
+        &.file-tree-icon {
+          margin-right: var(--spacing-02);
+          margin-left: var(--spacing-04);
+        }
+
+        &.file-tree-folder-icon {
+          margin-right: var(--spacing-02);
+          vertical-align: sub;
+        }
+
+        &.file-tree-expand-icon {
+          margin-left: var(--spacing-04);
+          vertical-align: sub;
+        }
+      }
+    }
+
+    li.selected > .history-file-tree-item {
+      color: var(--file-tree-item-selected-color);
+      background-color: var(--file-tree-item-selected-bg);
+      font-weight: bold;
+
+      > div > .material-symbols,
+      > button > .material-symbols,
+      > .material-symbols,
+      .material-symbols {
+        color: var(--file-tree-item-selected-color);
+      }
+
+      @include fake-full-width-bg(var(--file-tree-item-selected-bg));
+    }
+  }
+}
+
+.history-error {
+  padding: var(--spacing-06);
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/hotkeys.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/hotkeys.scss
@@ -0,0 +1,30 @@
+.hotkeys-modal {
+  font-size: var(--font-size-02);
+
+  h3:first-child {
+    margin-top: 0;
+  }
+
+  .hotkey {
+    margin-bottom: var(--spacing-05);
+  }
+
+  .description {
+    display: inline-block;
+  }
+
+  .combination {
+    padding: var(--spacing-02) var(--spacing-04);
+    border-radius: 3px;
+    background-color: var(--bg-dark-tertiary);
+    color: var(--white);
+    font-weight: 600;
+    margin-right: var(--spacing-03);
+  }
+
+  .hotkeys-modal-bottom-text {
+    background-color: var(--bg-light-secondary);
+    padding: var(--spacing-04);
+    border-radius: var(--border-radius-base);
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide-redesign-switcher-modal.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide-redesign-switcher-modal.scss
@@ -0,0 +1,28 @@
+.ide-redesign-switcher-modal .modal-content {
+  color: var(--content-primary);
+  font-size: var(--font-size-03);
+  line-height: var(--line-height-03);
+
+  p {
+    margin-bottom: 0;
+  }
+
+  .ide-redesign-switcher-modal-whats-new {
+    background-color: var(--bg-light-secondary);
+    border: 1px solid var(--border-divider);
+    padding: var(--spacing-05);
+    margin: var(--spacing-05) 0;
+
+    ul li:not(:last-child) {
+      margin-bottom: var(--spacing-04);
+    }
+  }
+
+  .ide-redesign-switcher-modal-leave-text {
+    color: var(--content-secondary);
+
+    a {
+      color: var(--link-ui);
+    }
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide-redesign.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide-redesign.scss
@@ -0,0 +1,55 @@
+:root {
+  --ide-redesign-background: var(--bg-dark-primary);
+  --ide-redesign-color: var(--content-primary-dark);
+  --ide-redesign-resizing-background: var(--bg-dark-primary);
+  --ide-redesign-color-scheme: dark;
+}
+
+@include theme('light') {
+  --ide-redesign-background: var(--bg-light-primary);
+  --ide-redesign-color: var(--content-primary);
+  --ide-redesign-resizing-background: var(--white);
+  --ide-redesign-color-scheme: light;
+}
+
+.ide-redesign-body {
+  color-scheme: var(--ide-redesign-color-scheme);
+  display: flex;
+  flex-grow: 1;
+  background-color: var(--ide-redesign-background);
+  color: var(--ide-redesign-color);
+  overflow-y: hidden;
+  z-index: 0;
+}
+
+.ide-redesign-main {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .ide-panel-group-resizing {
+    background-color: var(--ide-redesign-resizing-background);
+  }
+}
+
+.ide-skeleton-block {
+  border: 1px solid grey;
+  background-color: white;
+}
+
+.ide-redesign-full-height {
+  height: 100%;
+}
+
+.ide-redesign-pdf-container {
+  position: relative;
+}
+
+.ide-redesign-editor-container {
+  position: relative;
+  height: 100%;
+}
+
+.ide-redesign-editor-content {
+  height: 100%;
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss
@@ -0,0 +1,344 @@
+@use 'sass:color';
+
+$editor-toggler-bg-dark-color: color.adjust(
+  $content-disabled,
+  $lightness: -15%
+);
+
+:root {
+  --editor-toggler-bg-color: #{$editor-toggler-bg-dark-color};
+  --editor-resizer-bg-color: var(--bg-dark-secondary);
+}
+
+@include theme('light') {
+  --editor-toggler-bg-color: var(--content-disabled);
+  --editor-resizer-bg-color: var(--bg-light-tertiary);
+
+  .ide-redesign-main {
+    --editor-resizer-bg-color: var(--bg-light-tertiary);
+  }
+}
+
+#ide-root {
+  display: flex;
+  flex-direction: column;
+  height: 100vh; /* for backwards compatibility */
+  height: 100dvh; /* needed for mobile devices */
+
+  .global-alerts {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .chat {
+    position: relative;
+    height: 100%;
+  }
+
+  .review-panel-wrapper {
+    &.rp-state-overview {
+      position: sticky;
+      top: 0;
+      height: 100%;
+    }
+  }
+}
+
+.ide-redesign-main {
+  --editor-resizer-bg-color: var(--bg-dark-tertiary);
+
+  .ide-panel-group-resizing {
+    background-color: var(--white);
+
+    // Hide panel contents while resizing
+    .ide-redesign-editor-content,
+    .pdf {
+      display: none !important;
+    }
+  }
+}
+
+.global-alerts {
+  height: 0;
+  margin-top: var(--spacing-01);
+  text-align: center;
+
+  [role='alert'] {
+    text-align: left;
+    min-width: 400px;
+    position: relative;
+    z-index: 20;
+  }
+}
+
+.ide-react-editor-sidebar {
+  background-color: var(--file-tree-bg);
+  height: 100%;
+  color: var(--content-secondary-dark);
+  position: relative;
+}
+
+.ide-react-body {
+  flex-grow: 1;
+  background-color: var(--bg-light-secondary);
+  overflow-y: hidden;
+  z-index: 0;
+}
+
+.ide-react-main {
+  flex: 1;
+  overflow-y: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .toolbar.toolbar-header {
+    position: static;
+    flex-grow: 0;
+    color: var(--neutral-20);
+  }
+}
+
+.ide-react-symbol-palette {
+  height: 100%;
+  background-color: var(--bg-dark-tertiary);
+  color: var(--neutral-20);
+}
+
+.ide-react-editor-panel {
+  display: flex;
+  flex-direction: column;
+}
+
+// Ensure an element with class "full-size", such as the binary file view, stays within the bounds of the panel
+.ide-react-panel {
+  position: relative;
+  container-type: size;
+}
+
+.ide-panel-group-resizing {
+  background-color: var(--white);
+
+  // Hide panel contents while resizing
+  .ide-react-editor-content,
+  .pdf {
+    display: none !important;
+  }
+}
+
+.modal.lock-editor-modal {
+  display: flex !important;
+  background-color: rgba($bg-dark-primary, 0.3);
+  overflow-y: hidden;
+  pointer-events: none;
+
+  .modal-dialog {
+    top: 25px;
+  }
+}
+
+.out-of-sync-modal {
+  .text-preview {
+    margin-top: var(--spacing-05);
+
+    .scroll-container {
+      @include body-sm;
+
+      max-height: 360px;
+      width: 100%;
+      background-color: var(--bg-light-primary);
+      overflow: auto;
+      border: 1px solid var(--border-primary-dark);
+      padding: var(--spacing-04) var(--spacing-05);
+      text-align: left;
+      white-space: pre;
+      font-family: monospace;
+    }
+  }
+}
+
+.horizontal-resize-handle {
+  width: 7px !important;
+  height: 100%;
+
+  // Enable ::before and ::after pseudo-elements to position themselves correctly
+  position: relative;
+  background-color: var(--editor-resizer-bg-color);
+
+  .custom-toggler {
+    padding: 0;
+    border-width: 0;
+
+    // Override react-resizable-panels which sets a global * { cursor: ew-resize }
+    cursor: pointer !important;
+  }
+
+  &.horizontal-resize-handle-enabled {
+    &::before,
+    &::after {
+      // This SVG has the colour hard-coded to the current value of @ol-blue-gray-2, so if we changed @ol-blue-gray-2,
+      // we'd have to change this SVG too
+      content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='18' viewBox='0 0 7 18'%3E%3Cpath d='M2 0h3v3H2zM2 5h3v3H2zM2 10h3v3H2zM2 15h3v3H2z' style='fill:%239da7b7'/%3E%3C/svg%3E");
+      display: block;
+      position: absolute;
+      text-align: center;
+      left: 0;
+      width: 7px;
+      height: 18px;
+    }
+
+    &::before {
+      top: 25%;
+    }
+
+    &::after {
+      top: 75%;
+    }
+  }
+
+  &:not(.horizontal-resize-handle-enabled) {
+    cursor: default;
+  }
+
+  .synctex-controls {
+    left: -8px;
+    margin: 0;
+
+    // Ensure that SyncTex controls appear in front of PDF viewer controls and logs pane
+    z-index: 12;
+
+    .synctex-control .synctex-control-icon {
+      // Override react-resizable-panels which sets a global * { cursor: ew-resize }
+      cursor: pointer !important;
+    }
+  }
+}
+
+.custom-toggler {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 7px !important;
+  height: 50px;
+  margin-top: calc(var(--spacing-08) * -1);
+  top: 50%;
+  background-color: var(--editor-toggler-bg-color);
+
+  &:hover,
+  &:focus {
+    outline: none;
+    text-decoration: none;
+  }
+
+  // Increase hit area
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    inset: 0 -3px;
+  }
+
+  &::after {
+    font-family: FontAwesome; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
+    -moz-osx-font-smoothing: grayscale;
+    font-size: 65%;
+    font-weight: bold;
+    color: var(--white);
+    user-select: none;
+    pointer-events: none;
+  }
+
+  &:hover {
+    background-color: var(--bg-accent-01);
+  }
+}
+
+.custom-toggler-east::after {
+  content: '\f105';
+}
+
+.custom-toggler-west::after {
+  content: '\f104';
+}
+
+.custom-toggler-closed.custom-toggler-east::after {
+  content: '\f104';
+}
+
+.custom-toggler-closed.custom-toggler-west::after {
+  content: '\f105';
+}
+
+.vertical-resize-handle {
+  height: 6px;
+  background-color: var(--editor-resizer-bg-color);
+
+  &.vertical-resize-handle-enabled {
+    &:hover {
+      background-color: var(--editor-resizer-bg-color);
+    }
+  }
+
+  &:not(.vertical-resize-handle-enabled) {
+    opacity: 0.5;
+    cursor: default;
+  }
+
+  &::after {
+    // This SVG has the colour hard-coded to the current value of @ol-blue-gray-2, so if we changed @ol-blue-gray-2,
+    // we'd have to change this SVG too
+    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='6' viewBox='0 0 18 6'%3E%3Cpath d='M0 1.5h3v3H0zM5 1.5h3v3H5zM10 1.5h3v3h-3zM15 1.5h3v3h-3z' style='fill:%239da7b7'/%3E%3C/svg%3E");
+    display: block;
+    text-align: center;
+    line-height: 0;
+  }
+}
+
+.full-size {
+  position: absolute;
+  inset: 0;
+}
+
+.teaser-feature-icon {
+  vertical-align: sub;
+}
+
+.teaser-title {
+  margin-top: 0;
+  text-align: center;
+}
+
+.teaser-refresh-label {
+  text-align: center;
+}
+
+.teaser-img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin-bottom: var(--spacing-03);
+}
+
+.teaser-video-container {
+  margin: calc(var(--bs-modal-padding) * -1) calc(var(--bs-modal-padding) * -1)
+    var(--spacing-02) calc(var(--bs-modal-padding) * -1);
+  overflow: hidden;
+}
+
+.teaser-video {
+  width: 100%;
+  height: auto;
+  border-bottom: 1px solid var(--border-divider);
+}
+
+.loading-panel {
+  inset: 0;
+  text-align: center;
+  padding-top: var(--spacing-16);
+  background-color: var(--bg-light-secondary);
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/left-menu.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/left-menu.scss
@@ -0,0 +1,214 @@
+:root {
+  --left-menu-form-select-border: var(--border-primary);
+}
+
+@include theme('light') {
+  --left-menu-form-select-border: var(--border-disabled);
+}
+
+.left-menu {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  background-color: var(--bg-light-secondary);
+  z-index: 100;
+  overflow: hidden auto;
+  transition: left ease-in-out 0.5s;
+  font-size: var(--font-size-02);
+  width: 340px;
+
+  &.shown {
+    left: 0;
+  }
+
+  h4 {
+    font-family: $font-family-sans-serif;
+    font-weight: 400;
+    font-size: var(--font-size-03);
+    margin: var(--spacing-05) 0;
+    padding-bottom: var(--spacing-03);
+    color: var(--content-secondary);
+    border-bottom: 1px solid var(--border-primary-dark);
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  ul.nav {
+    .left-menu-button {
+      cursor: pointer;
+      padding: var(--spacing-03);
+      font-weight: 700;
+      color: var(--link-ui);
+      display: flex;
+      align-items: center;
+      width: 100%;
+      background-color: inherit;
+      border: none;
+      text-decoration: none;
+
+      .material-symbols {
+        margin-right: var(--spacing-04);
+        color: var(--neutral-70);
+      }
+
+      &:hover,
+      &:active {
+        background-color: var(--bg-info-01);
+        color: var(--white);
+
+        .material-symbols {
+          color: var(--white);
+        }
+      }
+    }
+
+    a {
+      cursor: pointer;
+
+      &:hover,
+      &:active,
+      &:focus {
+        background-color: var(--bg-info-01);
+        color: var(--white);
+
+        .material-symbols {
+          color: var(--white);
+        }
+      }
+
+      .material-symbols {
+        color: var(--neutral-70);
+      }
+
+      padding: var(--spacing-03);
+      font-weight: 700;
+    }
+
+    .link-disabled {
+      color: var(--content-disabled);
+    }
+  }
+
+  > ul.nav:last-child {
+    margin-bottom: var(--spacing-05);
+  }
+
+  ul.nav-downloads {
+    li {
+      display: inline-block;
+      text-align: center;
+      width: 100px;
+
+      a {
+        color: var(--content-secondary);
+        text-decoration: none;
+      }
+
+      .material-symbols {
+        margin: var(--spacing-03) 0;
+      }
+    }
+  }
+
+  form.settings {
+    label {
+      font-weight: normal;
+      color: var(--content-secondary);
+      flex: 1 0 50%;
+      margin-bottom: 0;
+      padding-right: var(--spacing-03);
+      white-space: nowrap;
+    }
+
+    button,
+    select {
+      width: 50%;
+      margin: var(--spacing-04) 0;
+    }
+  }
+
+  .left-menu-setting-position {
+    position: relative;
+
+    .left-menu-setting {
+      margin-top: 0 !important;
+    }
+
+    .left-menu-setting-icon {
+      position: absolute;
+      right: 65%;
+      top: 25%;
+    }
+  }
+
+  .left-menu-setting {
+    padding: 0 var(--spacing-02);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    border-bottom: 1px solid rgb(0 0 0 / 7%);
+    margin-bottom: 0;
+    height: 43px;
+
+    &:first-child {
+      margin-top: calc(var(--spacing-04) * -1);
+    }
+
+    &:last-child {
+      border-bottom: 0;
+    }
+
+    &:hover,
+    &:focus-within {
+      background-color: var(--bg-info-01);
+
+      label {
+        color: var(--white);
+      }
+    }
+
+    .form-select {
+      border: 1px solid var(--left-menu-form-select-border);
+    }
+  }
+}
+
+#left-menu-mask {
+  opacity: 0.4;
+  background-color: #999;
+  z-index: 99;
+  transition: opacity 0.5s;
+  position: absolute;
+  inset: 0;
+}
+
+.left-menu-modal-backdrop {
+  background-color: transparent;
+}
+
+.loading-spinner-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.full-size-loading-spinner-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.reference-manager-search-group {
+  width: '100%';
+  border-radius: 0;
+  text-align: left;
+
+  .dropdown-menu {
+    width: 100%;
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/loading-screen.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/loading-screen.scss
@@ -0,0 +1,75 @@
+@use 'sass:math';
+
+@keyframes blink {
+  0% {
+    opacity: 0.2;
+  }
+
+  20% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.2;
+  }
+}
+
+.loading-screen {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+
+  .loading-screen-brand-container {
+    min-width: 200px;
+  }
+
+  .loading-screen-brand {
+    position: relative;
+    padding-top: math.percentage(math.div(150, 130)); // dimensions of the SVG
+    height: 0;
+    background: url(../../../../../public/img/ol-brand/overleaf-o-grey.svg)
+      no-repeat bottom / 100%;
+
+    &::after {
+      content: '';
+      position: absolute;
+      height: inherit;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background: url(../../../../../public/img/ol-brand/overleaf-o.svg)
+        no-repeat bottom / 100%;
+      transition: height 0.5s;
+    }
+  }
+
+  .loading-screen-label {
+    margin: 0;
+    padding-top: var(--spacing-09);
+    font-family: $font-family-serif;
+    font-size: var(--font-size-07);
+    color: var(--content-secondary);
+  }
+
+  .loading-screen-ellip {
+    animation: blink 1.4s both infinite;
+
+    &:nth-child(2) {
+      animation-delay: 0.2s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: 0.4s;
+    }
+  }
+
+  .loading-screen-error {
+    margin: 0;
+    padding-top: var(--spacing-06);
+    color: var(--content-danger);
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/logs.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/logs.scss
@@ -0,0 +1,283 @@
+:root {
+  --logs-pane-bg: var(--bg-dark-secondary);
+}
+
+.ide-redesign-main {
+  --logs-pane-bg: var(--bg-dark-primary);
+}
+
+@include theme('light') {
+  --logs-pane-bg: var(--bg-light-secondary);
+
+  .ide-redesign-main {
+    --logs-pane-bg: #fff;
+  }
+}
+
+.logs-pane {
+  position: absolute;
+  inset: 0;
+  overflow-y: auto;
+  background-color: var(--logs-pane-bg);
+  z-index: 11; // above the PDF viewer + controls
+  top: var(--toolbar-small-height);
+
+  .logs-pane-content {
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    gap: 10px;
+    min-height: 100%;
+  }
+
+  .logs-pane-actions {
+    display: flex;
+    flex-wrap: wrap;
+    place-content: flex-end flex-end;
+    padding: var(--spacing-03) 0;
+    flex-grow: 1;
+    align-items: flex-end;
+    gap: var(--spacing-04);
+  }
+
+  .log-entry {
+    border-radius: var(--border-radius-base);
+    overflow: hidden;
+  }
+
+  .log-entry-header {
+    padding: var(--spacing-02) var(--spacing-04);
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-04);
+    border-radius: var(--border-radius-base) var(--border-radius-base) 0 0;
+    color: var(--content-primary-dark);
+
+    .material-symbols {
+      @include body-base;
+    }
+  }
+
+  .log-entry-header-error {
+    background-color: var(--content-danger);
+  }
+
+  .log-entry-header-link-error {
+    @include ol-button-variant(
+      $color: var(--content-primary-dark),
+      $background: var(--bg-danger-02),
+      $hover-background: var(--red-70)
+    );
+  }
+
+  .log-entry-header-warning {
+    background-color: var(--content-warning-dark);
+  }
+
+  .log-entry-header-link-warning {
+    @include ol-button-variant(
+      $color: var(--content-primary-dark),
+      $background: var(--bg-warning-01),
+      $hover-background: var(--bg-warning-02)
+    );
+  }
+
+  .log-entry-header-typesetting {
+    background-color: var(--blue-50);
+  }
+
+  .log-entry-header-link-typesetting {
+    @include ol-button-variant(
+      $color: var(--content-primary-dark),
+      $background: var(--blue-60),
+      $hover-background: var(--blue-70)
+    );
+  }
+
+  .log-entry-header-raw,
+  .log-entry-header-info {
+    background-color: var(--bg-dark-tertiary);
+  }
+
+  .log-entry-header-link-raw,
+  .log-entry-header-link-info {
+    @include ol-button-variant(
+      $color: var(--content-primary-dark),
+      $background: var(--bg-dark-secondary),
+      $hover-background: var(--bg-dark-primary)
+    );
+  }
+
+  .log-entry-header-success {
+    background-color: var(--green-50);
+  }
+
+  .log-entry-header-link-success {
+    @include ol-button-variant(
+      $color: var(--content-primary-dark),
+      $background: var(--green-60),
+      $hover-background: var(--green-70)
+    );
+  }
+
+  .log-entry-header-title {
+    @include body-base;
+
+    flex-grow: 1;
+    font-weight: bold;
+    margin: 0;
+    color: var(--content-primary-dark);
+  }
+
+  .log-entry-header-link {
+    color: var(--content-primary-dark);
+    border-width: 0;
+    max-width: 33%;
+    flex-shrink: 0;
+    text-decoration: none; // needed for the "close button"
+    padding: 0 var(--spacing-03);
+
+    .button-content {
+      min-width: 0; // needed to display the ellipsis on overflow
+    }
+  }
+
+  .log-entry-header-link-location {
+    white-space: nowrap;
+    direction: rtl;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .log-entry-content {
+    &:empty {
+      display: none;
+    }
+
+    background-color: var(--bg-light-primary);
+    color: var(--content-primary);
+    padding: var(--spacing-04);
+  }
+
+  .log-entry-content-raw {
+    @include body-xs;
+
+    color: var(--content-secondary);
+    padding: var(--spacing-03);
+    margin: 0;
+    white-space: pre-wrap;
+  }
+
+  .log-entry-content-button-container {
+    position: relative;
+    height: 40px;
+    margin-top: 0;
+    transition:
+      margin 0.15s ease-in-out,
+      opacity 0.15s ease-in-out;
+    padding-bottom: var(--spacing-04);
+    text-align: center;
+    background-image: linear-gradient(
+      0deg,
+      var(--bg-light-tertiary) 0%,
+      transparent 100%
+    );
+    border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
+  }
+
+  .log-entry-content-button-container-collapsed {
+    margin-top: -40px;
+  }
+
+  .log-entry-content-raw-container {
+    background-color: var(--bg-light-tertiary);
+    border-radius: var(--border-radius-base);
+    overflow: hidden;
+    margin-top: var(--spacing-03);
+  }
+}
+
+.log-entry-formatted-content,
+.log-entry-content-link {
+  font-size: var(--font-size-02);
+  margin-top: var(--spacing-02);
+
+  &:first-of-type {
+    margin-top: 0;
+  }
+}
+
+.log-location-tooltip {
+  word-break: break-all;
+
+  & > .tooltip-inner {
+    max-width: 450px;
+    text-align: left;
+  }
+}
+
+// As part of compile time paywall redesign, we are only migrating the necessary classes needed for the split test
+// Other classes should be migrated too as a part of website redesign project later on.
+
+.timeout-upgrade-paywall-prompt {
+  display: flex;
+  flex-direction: column;
+  gap: 10px; // adding this value to match existing spacing in logs pane, there is no variable for 10px
+}
+
+.website-redesign {
+  .log-entry-header {
+    @include heading-sm;
+
+    font-weight: 600;
+    padding: var(--spacing-05) var(--spacing-06);
+  }
+
+  .compile-timeout-message {
+    p {
+      margin-bottom: 0;
+    }
+  }
+
+  .log-entry-content {
+    padding: 0;
+  }
+
+  .log-bold-text {
+    font-weight: 600;
+    color: var(--neutral-90);
+  }
+
+  .log-entry-formatted-content {
+    @include body-sm;
+
+    padding: var(--spacing-06);
+    color: var(--neutral-70);
+
+    a,
+    .btn-inline-link {
+      color: var(--blue-50);
+    }
+  }
+
+  .log-entry-cta-container {
+    padding-top: var(--spacing-06);
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .log-entry-header-error {
+    background-color: var(--red-10);
+
+    .log-entry-header-title {
+      @include heading-sm;
+
+      color: var(--red-50);
+    }
+  }
+
+  .log-entry-header-raw {
+    background-color: var(--neutral-60);
+    padding: var(--spacing-04) var(--spacing-06);
+  }
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/math-preview.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/math-preview.scss
@@ -0,0 +1,37 @@
+.ol-cm-math-tooltip-container {
+  position: relative;
+  overflow: visible;
+  border: 0 !important;
+  background-color: transparent !important;
+}
+
+.ol-cm-math-tooltip {
+  display: flex;
+  gap: var(--spacing-04);
+  overflow: auto;
+  padding: var(--spacing-04);
+  border-radius: var(--border-radius-base);
+  max-height: 200px;
+  max-width: 800px;
+  margin-top: 10px;
+
+  .dropdown {
+    position: static;
+  }
+}
+
+.math-tooltip-options-toggle {
+  border: none;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+
+  &::after {
+    content: none;
+  }
+}
+
+.math-tooltip-options-keyboard-shortcut {
+  color: $content-secondary;
+  font-size: var(--font-size-02);
+}
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/online-users.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/online-users.scss
@@ -0,0 +1,37 @@
+:root {
+  --toolbar-btn-color: var(--white);
+}
+
+@include theme('light') {
+  --toolbar-btn-color: var(--neutral-70);
+}
+
+.online-users {
+  display: flex;
+  align-items: center;
+
+  .online-user {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    margin-right: var(--spacing-04);
+    text-align: center;
+    color: white;
+    text-transform: uppercase;
+    border-radius: var(--border-radius-base);
+    cursor: pointer;
+  }
+
+  .online-user-multi {
+    @include reset-button;
+
+    color: var(--toolbar-btn-color);
+    width: auto;
+    min-width: 24px;
+    padding-left: var(--spacing-04);
+    padding-right: var(--spacing-03);
+    display: flex;
+    align-items: center;
+  }
+}
--- a/Show More
+++ b/Show More