diff --git a/chrome/browser/resources/settings/basic_page/basic_page.html b/chrome/browser/resources/settings/basic_page/basic_page.html
index 21f042ff0b77a..fb78a72471076 100644
--- a/chrome/browser/resources/settings/basic_page/basic_page.html
+++ b/chrome/browser/resources/settings/basic_page/basic_page.html
@@ -5,6 +5,29 @@
         overflow: hidden;
       }
 
+      :host([advanced-toggling-in-progress_]) {
+        -webkit-tap-highlight-color: transparent;
+      }
+
+      #advancedToggle {
+        --ink-color: currentColor;
+        align-items: center;
+        background: transparent;
+        border: none;
+        box-shadow: none;
+        color: currentColor;
+        display: flex;
+        font-weight: 400;
+        margin-bottom: 3px;
+        margin-top: 12px;  /* Part of a 48px spacer (33px + 12px + 3px). */
+        min-height: 32px;
+        padding: 0 12px;
+      }
+
+      :host-context(.focus-outline-visible) #advancedToggle:focus {
+        outline: auto 5px -webkit-focus-ring-color;
+      }
+
       #osSettingsBanner {
         background-color: var(--cr-card-background-color);
         border-radius: var(--cr-card-border-radius);
@@ -12,7 +35,27 @@
         margin-top: 21px;
       }
 
-      :host(:not([in-search-mode])) settings-section:not([active]) {
+      #toggleContainer {
+        align-items: center;
+        color: var(--cr-primary-text-color);
+        display: flex;
+        font: inherit;
+        justify-content: center;
+        margin-bottom: 0;
+        margin-top: 0;
+        padding-bottom: 0;
+        padding-top: 0;
+      }
+
+      #toggleSpacer {
+        padding-top: 33px;  /* Part of a 48px spacer (33px + 12px + 3px). */
+      }
+
+      iron-icon {
+        margin-inline-start: 16px;
+      }
+
+      :host-context([enable-landing-page-redesign]):host(:not([in-search-mode])) settings-section:not([active]) {
         display: none;
       }
     </style>
@@ -110,6 +153,19 @@
     </template>
 
     <template is="dom-if" if="[[showAdvancedSettings_(pageVisibility.advancedSettings)]]">
+      <template is="dom-if" if="[[showAdvancedToggle_(
+          inSearchMode, hasExpandedSection_)]]">
+        <div id="toggleSpacer"></div>
+        <h2 id="toggleContainer">
+          <cr-button id="advancedToggle" on-click="advancedToggleClicked_"
+              aria-expanded$="[[boolToString_(advancedToggleExpanded)]]">
+            <span>$i18n{advancedPageTitle}</span>
+            <iron-icon icon="[[getArrowIcon_(advancedToggleExpanded)]]">
+            </iron-icon>
+          </cr-button>
+        </h2>
+      </template>
+
       <settings-idle-load id="advancedPageTemplate">
         <template>
           <div id="advancedPage" hidden$="[[!showAdvancedPage_(
diff --git a/chrome/browser/resources/settings/basic_page/basic_page.ts b/chrome/browser/resources/settings/basic_page/basic_page.ts
index 07bd17f1105a9..56d7765ad4db1 100644
--- a/chrome/browser/resources/settings/basic_page/basic_page.ts
+++ b/chrome/browser/resources/settings/basic_page/basic_page.ts
@@ -6,6 +6,7 @@
  * @fileoverview
  * 'settings-basic-page' is the settings page containing the actual settings.
  */
+import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
 import 'chrome://resources/cr_elements/hidden_style_css.m.js';
 import 'chrome://resources/cr_elements/shared_style_css.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
@@ -32,7 +33,7 @@ import '../default_browser_page/default_browser_page.js';
 // </if>
 
 import {assert} from 'chrome://resources/js/assert.m.js';
-import {beforeNextRender, html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {beforeNextRender, html, microTask, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {SettingsIdleLoadElement} from '../controls/settings_idle_load.js';
 import {loadTimeData} from '../i18n_setup.js';
@@ -111,16 +112,6 @@ export class SettingsBasicPageElement extends SettingsBasicPageElementBase {
         },
       },
 
-      /**
-       * Whether a search operation is in progress or previous search
-       * results are being displayed.
-       */
-      inSearchMode: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-      },
-
       advancedToggleExpanded: {
         type: Boolean,
         value: false,
@@ -170,7 +161,6 @@ export class SettingsBasicPageElement extends SettingsBasicPageElementBase {
   }
 
   pageVisibility: PageVisibility;
-  inSearchMode: boolean;
   advancedToggleExpanded: boolean;
   private hasExpandedSection_: boolean;
   private showResetProfileBanner_: boolean;
@@ -358,6 +348,43 @@ export class SettingsBasicPageElement extends SettingsBasicPageElementBase {
         new CustomEvent(eventName, {bubbles: true, composed: true, detail}));
   }
 
+  private advancedToggleClicked_() {
+    if (this.advancedTogglingInProgress_) {
+      return;
+    }
+
+    this.advancedTogglingInProgress_ = true;
+    const toggle =
+        this.shadowRoot!.querySelector('#toggleContainer') as HTMLElement;
+    if (!this.advancedToggleExpanded) {
+      this.advancedToggleExpanded = true;
+      microTask.run(() => {
+        this.getIdleLoad_().then(() => {
+          this.fire_('scroll-to-top', {
+            top: toggle.offsetTop,
+            callback: () => {
+              this.advancedTogglingInProgress_ = false;
+            }
+          });
+        });
+      });
+    } else {
+      this.fire_('scroll-to-bottom', {
+        bottom: toggle.offsetTop + toggle.offsetHeight + 24,
+        callback: () => {
+          this.advancedToggleExpanded = false;
+          this.advancedTogglingInProgress_ = false;
+        }
+      });
+    }
+  }
+
+  private showAdvancedToggle_(
+      inSearchMode: boolean, hasExpandedSection: boolean): boolean {
+    return !inSearchMode && !hasExpandedSection &&
+        !loadTimeData.getBoolean('enableLandingPageRedesign');
+  }
+
   /**
    * @return Whether to show the basic page, taking into account both routing
    *     and search state.
@@ -383,6 +410,14 @@ export class SettingsBasicPageElement extends SettingsBasicPageElementBase {
   private showAdvancedSettings_(visibility?: boolean): boolean {
     return visibility !== false;
   }
+
+  private getArrowIcon_(opened: boolean): string {
+    return opened ? 'cr:arrow-drop-up' : 'cr:arrow-drop-down';
+  }
+
+  private boolToString_(bool: boolean): string {
+    return bool.toString();
+  }
 }
 
 declare global {
diff --git a/chrome/browser/resources/settings/route.ts b/chrome/browser/resources/settings/route.ts
index 486e7171c9cb2..37933d4aa7746 100644
--- a/chrome/browser/resources/settings/route.ts
+++ b/chrome/browser/resources/settings/route.ts
@@ -16,8 +16,6 @@ function addPrivacyChildRoutes(r: SettingsRoutes) {
   r.CLEAR_BROWSER_DATA = r.PRIVACY.createChild('/clearBrowserData');
   r.CLEAR_BROWSER_DATA.isNavigableDialog = true;
 
-  r.SAFETY_CHECK = r.PRIVACY.createSection('/safetyCheck', 'safetyCheck');
-
   if (loadTimeData.getBoolean('privacyReviewEnabled')) {
     r.PRIVACY_REVIEW = r.PRIVACY.createChild('review');
   }
@@ -142,6 +140,12 @@ function createBrowserSettingsRoutes(): SettingsRoutes {
   if (visibility.privacy !== false) {
     r.PRIVACY = r.BASIC.createSection('/privacy', 'privacy');
     addPrivacyChildRoutes(r);
+
+    if (loadTimeData.getBoolean('enableLandingPageRedesign')) {
+      r.SAFETY_CHECK = r.PRIVACY.createSection('/safetyCheck', 'safetyCheck');
+    } else {
+      r.SAFETY_CHECK = r.BASIC.createSection('/safetyCheck', 'safetyCheck');
+    }
   }
 
   // <if expr="not chromeos and not lacros">
diff --git a/chrome/browser/resources/settings/settings.html b/chrome/browser/resources/settings/settings.html
index da9d88282a539..50cb169d54c66 100644
--- a/chrome/browser/resources/settings/settings.html
+++ b/chrome/browser/resources/settings/settings.html
@@ -1,5 +1,6 @@
 <!doctype html>
 <html dir="$i18n{textdirection}" lang="$i18n{language}" class="loading"
+    $i18n{enableLandingPageRedesignAttribute}
     $i18n{enableBrandingUpdateAttribute}>
 <head>
   <meta charset="utf-8">
diff --git a/chrome/browser/resources/settings/settings_main/settings_main.html b/chrome/browser/resources/settings/settings_main/settings_main.html
index f689ddfe8ed82..fdb634254488f 100644
--- a/chrome/browser/resources/settings/settings_main/settings_main.html
+++ b/chrome/browser/resources/settings/settings_main/settings_main.html
@@ -1,4 +1,12 @@
     <style include="cr-shared-style cr-hidden-style settings-shared">
+      #overscroll {
+        margin-top: 64px;
+      }
+
+      .showing-subpage ~ #overscroll {
+        display: none;
+      }
+
       #noSearchResults {
         margin-top: 80px;
         text-align: center;
@@ -38,6 +46,7 @@
           class="cr-centered-card-container"
           prefs="{{prefs}}"
           page-visibility="[[pageVisibility]]"
+          on-showing-section="onShowingSection_"
           on-subpage-expand="onShowingSubpage_"
           on-showing-main-page="onShowingMainPage_"
           in-search-mode="[[inSearchMode_]]"
@@ -50,3 +59,4 @@
           prefs="{{prefs}}">
       </settings-about-page>
     </template>
+    <div id="overscroll" style="padding-bottom: [[overscroll_]]px"></div>
diff --git a/chrome/browser/resources/settings/settings_main/settings_main.ts b/chrome/browser/resources/settings/settings_main/settings_main.ts
index 6a5d4fe83a85b..676e89bb516f0 100644
--- a/chrome/browser/resources/settings/settings_main/settings_main.ts
+++ b/chrome/browser/resources/settings/settings_main/settings_main.ts
@@ -35,6 +35,12 @@ type MainPageVisibility = {
   settings: boolean,
 };
 
+export interface SettingsMainElement {
+  $: {
+    overscroll: HTMLElement,
+  };
+}
+
 const SettingsMainElementBase = RouteObserverMixin(PolymerElement) as
     {new (): PolymerElement & RouteObserverMixinInterface};
 
@@ -62,6 +68,11 @@ export class SettingsMainElement extends SettingsMainElementBase {
         notify: true,
       },
 
+      overscroll_: {
+        type: Number,
+        observer: 'overscrollChanged_',
+      },
+
       /**
        * Controls which main pages are displayed via dom-ifs, based on the
        * current route.
@@ -103,12 +114,51 @@ export class SettingsMainElement extends SettingsMainElementBase {
   }
 
   advancedToggleExpanded: boolean;
+  private overscroll_: number;
   private showPages_: MainPageVisibility;
   private inSearchMode_: boolean;
   private showNoResultsFound_: boolean;
   private showingSubpage_: boolean;
   toolbarSpinnerActive: boolean;
   pageVisibility: PageVisibility;
+  private boundScroll_: (() => void)|null = null;
+
+  private overscrollChanged_() {
+    assert(!loadTimeData.getBoolean('enableLandingPageRedesign'));
+    if (!this.overscroll_ && this.boundScroll_) {
+      this.offsetParent!.removeEventListener('scroll', this.boundScroll_);
+      window.removeEventListener('resize', this.boundScroll_);
+      this.boundScroll_ = null;
+    } else if (this.overscroll_ && !this.boundScroll_) {
+      this.boundScroll_ = () => {
+        if (!this.showingSubpage_) {
+          this.setOverscroll_(0);
+        }
+      };
+      this.offsetParent!.addEventListener('scroll', this.boundScroll_);
+      window.addEventListener('resize', this.boundScroll_);
+    }
+  }
+
+  /**
+   * Sets the overscroll padding. Never forces a scroll, i.e., always leaves
+   * any currently visible overflow as-is.
+   * @param opt_minHeight The minimum overscroll height needed.
+   */
+  private setOverscroll_(opt_minHeight?: number) {
+    const scroller = this.offsetParent;
+    if (!scroller) {
+      return;
+    }
+    const overscroll = this.$.overscroll;
+    const visibleBottom = scroller.scrollTop + scroller.clientHeight;
+    const overscrollBottom = overscroll.offsetTop + overscroll.scrollHeight;
+    // How much of the overscroll is visible (may be negative).
+    const visibleOverscroll =
+        overscroll.scrollHeight - (overscrollBottom - visibleBottom);
+    this.overscroll_ =
+        Math.max(opt_minHeight || 0, Math.ceil(visibleOverscroll));
+  }
 
   /**
    * Updates the hidden state of the about and settings pages based on the
@@ -135,6 +185,27 @@ export class SettingsMainElement extends SettingsMainElementBase {
     this.showingSubpage_ = false;
   }
 
+  /**
+   * A handler for the 'showing-section' event fired from settings-basic-page,
+   * indicating that a section should be scrolled into view as a result of a
+   * navigation.
+   */
+  private onShowingSection_(e: CustomEvent<HTMLElement>) {
+    assert(!loadTimeData.getBoolean('enableLandingPageRedesign'));
+
+    const section = e.detail;
+    // Calculate the height that the overscroll padding should be set to, so
+    // that the given section is displayed at the top of the viewport.
+    // Find the distance from the section's top to the overscroll.
+    const sectionTop =
+        (section.offsetParent as HTMLElement).offsetTop + section.offsetTop;
+    const distance = this.$.overscroll.offsetTop - sectionTop;
+    const overscroll = Math.max(0, this.offsetParent!.clientHeight - distance);
+    this.setOverscroll_(overscroll);
+    section.scrollIntoView();
+    section.focus();
+  }
+
   /**
    * @return A promise indicating that searching finished.
    */
diff --git a/chrome/browser/resources/settings/settings_menu/settings_menu.html b/chrome/browser/resources/settings/settings_menu/settings_menu.html
index cb96e9cf76b94..e31d300b841d1 100644
--- a/chrome/browser/resources/settings/settings_menu/settings_menu.html
+++ b/chrome/browser/resources/settings/settings_menu/settings_menu.html
@@ -118,6 +118,16 @@
             $i18n{autofillPageTitle}
             <paper-ripple></paper-ripple>
           </a>
+          <template is="dom-if" if="[[!enableLandingPageRedesign_]]">
+            <a role="menuitem" href="/safetyCheck"
+                hidden="[[!pageVisibility.safetyCheck]]"
+                id="safetyCheck"
+                class="cr-nav-menu-item">
+              <iron-icon icon="settings20:safety-check"></iron-icon>
+              $i18n{safetyCheckSectionTitle}
+              <paper-ripple></paper-ripple>
+            </a>
+          </template>
           <a role="menuitem" href="/privacy"
               hidden="[[!pageVisibility.privacy]]"
               class="cr-nav-menu-item">
diff --git a/chrome/browser/resources/settings/settings_menu/settings_menu.ts b/chrome/browser/resources/settings/settings_menu/settings_menu.ts
index 3af538591ff48..f6c0336f1f7d6 100644
--- a/chrome/browser/resources/settings/settings_menu/settings_menu.ts
+++ b/chrome/browser/resources/settings/settings_menu/settings_menu.ts
@@ -23,6 +23,7 @@ import {IronCollapseElement} from 'chrome://resources/polymer/v3_0/iron-collapse
 import {IronSelectorElement} from 'chrome://resources/polymer/v3_0/iron-selector/iron-selector.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {loadTimeData} from '../i18n_setup.js';
 import {PageVisibility} from '../page_visibility.js';
 import {Route, RouteObserverMixin, RouteObserverMixinInterface, Router} from '../router.js';
 
@@ -61,11 +62,18 @@ export class SettingsMenuElement extends SettingsMenuElementBase {
        * Dictionary defining page visibility.
        */
       pageVisibility: Object,
+
+      enableLandingPageRedesign_: {
+        type: Boolean,
+        value: () => loadTimeData.getBoolean('enableLandingPageRedesign'),
+      },
+
     };
   }
 
   advancedOpened: boolean;
   pageVisibility: PageVisibility;
+  private enableLandingPageRedesign_: boolean;
 
   currentRouteChanged(newRoute: Route) {
     // Focus the initially selected path.
diff --git a/chrome/browser/resources/settings/settings_page/main_page_mixin.ts b/chrome/browser/resources/settings/settings_page/main_page_mixin.ts
index 3f644879d22fd..d01d80d4a05b3 100644
--- a/chrome/browser/resources/settings/settings_page/main_page_mixin.ts
+++ b/chrome/browser/resources/settings/settings_page/main_page_mixin.ts
@@ -70,6 +70,22 @@ export const MainPageMixin = dedupingMixin(
       const superClassBase = BaseMixin(superClass);
 
       class MainPageMixin extends superClassBase {
+        static get properties() {
+          return {
+            /**
+             * Whether a search operation is in progress or previous search
+             * results are being displayed.
+             */
+            inSearchMode: {
+              type: Boolean,
+              value: false,
+              observer: 'inSearchModeChanged_',
+              reflectToAttribute: true,
+            },
+          };
+        }
+
+        inSearchMode: boolean;
         scroller: HTMLElement|null = null;
         private validTransitions_: Map<RouteState, Set<RouteState>>;
         private lastScrollTop_: number = 0;
@@ -123,6 +139,31 @@ export const MainPageMixin = dedupingMixin(
           return false;
         }
 
+        private inSearchModeChanged_(_current: boolean, previous: boolean) {
+          if (loadTimeData.getBoolean('enableLandingPageRedesign')) {
+            // No need to deal with overscroll, as only one section is shown at
+            // any given time.
+            return;
+          }
+
+          // Ignore 1st occurrence which happens while the element is being
+          // initialized.
+          if (previous === undefined) {
+            return;
+          }
+
+          if (!this.inSearchMode) {
+            const route = Router.getInstance().getCurrentRoute();
+            if (this.containsRoute(route) &&
+                classifyRoute(route) === RouteState.SECTION) {
+              // Re-fire the showing-section event to trigger settings-main
+              // recalculation of the overscroll, now that sections are not
+              // hidden-by-search.
+              this.fire('showing-section', this.getSection(route.section));
+            }
+          }
+        }
+
         private shouldExpandAdvanced_(route: Route): boolean {
           const routes = Router.getInstance().getRoutes() as MinimumRoutes;
           return this.tagName === 'SETTINGS-BASIC-PAGE' && routes.ADVANCED &&
@@ -230,6 +271,15 @@ export const MainPageMixin = dedupingMixin(
           });
         }
 
+        private scrollToSection_(route: Route) {
+          this.ensureSectionForRoute_(route).then(section => {
+            if (!this.inSearchMode) {
+              this.fire('showing-section', section);
+            }
+            this.fire('show-container');
+          });
+        }
+
         /**
          * Shows the section(s) corresponding to |newRoute| and hides the
          * previously |active| section(s), if any.
@@ -298,6 +348,104 @@ export const MainPageMixin = dedupingMixin(
           const newState = transition[1];
           assert(this.validTransitions_.get(oldState)!.has(newState));
 
+          loadTimeData.getBoolean('enableLandingPageRedesign') ?
+              this.processTransitionRedesign_(
+                  oldRoute, newRoute, oldState, newState) :
+              this.processTransition_(oldRoute, newRoute, oldState, newState);
+        }
+
+        private processTransition_(
+            oldRoute: Route|null, newRoute: Route, oldState: RouteState,
+            newState: RouteState) {
+          if (oldState === RouteState.TOP_LEVEL) {
+            if (newState === RouteState.SECTION) {
+              this.scrollToSection_(newRoute);
+            } else if (newState === RouteState.SUBPAGE) {
+              this.enterSubpage_(newRoute);
+            }
+            // Nothing to do here for the case of RouteState.DIALOG or
+            // TOP_LEVEL. The latter happens when navigating from '/?search=foo'
+            // to '/' (clearing search results).
+            return;
+          }
+
+          if (oldState === RouteState.SECTION) {
+            if (newState === RouteState.SECTION) {
+              this.scrollToSection_(newRoute);
+            } else if (newState === RouteState.SUBPAGE) {
+              this.enterSubpage_(newRoute);
+            } else if (newState === RouteState.TOP_LEVEL) {
+              this.scroller!.scrollTop = 0;
+            }
+            // Nothing to do here for the case of RouteState.DIALOG.
+            return;
+          }
+
+          if (oldState === RouteState.SUBPAGE) {
+            if (newState === RouteState.SECTION) {
+              this.enterMainPage_(oldRoute!);
+
+              // Scroll to the corresponding section, only if the user
+              // explicitly navigated to a section (via the menu).
+              if (!Router.getInstance().lastRouteChangeWasPopstate()) {
+                this.scrollToSection_(newRoute);
+              }
+            } else if (newState === RouteState.SUBPAGE) {
+              // Handle case where the two subpages belong to
+              // different sections, but are linked to each other. For example
+              // /storage and /accounts (in ChromeOS).
+              if (!oldRoute!.contains(newRoute) &&
+                  !newRoute.contains(oldRoute!)) {
+                this.enterMainPage_(oldRoute!).then(() => {
+                  this.enterSubpage_(newRoute);
+                });
+                return;
+              }
+
+              // Handle case of subpage to sub-subpage navigation.
+              if (oldRoute!.contains(newRoute)) {
+                this.scroller!.scrollTop = 0;
+                return;
+              }
+              // When going from a sub-subpage to its parent subpage, scroll
+              // position is automatically restored, because we focus the
+              // sub-subpage entry point.
+            } else if (newState === RouteState.TOP_LEVEL) {
+              this.enterMainPage_(oldRoute!);
+            } else if (newState === RouteState.DIALOG) {
+              // The only known case currently for such a transition is from
+              // /syncSetup to /signOut.
+              this.enterMainPage_(oldRoute!);
+            }
+            return;
+          }
+
+          if (oldState === RouteState.INITIAL) {
+            if (newState === RouteState.SECTION) {
+              this.scrollToSection_(newRoute);
+            } else if (newState === RouteState.SUBPAGE) {
+              this.enterSubpage_(newRoute);
+            }
+            // Nothing to do here for the case of RouteState.DIALOG and
+            // TOP_LEVEL.
+            return;
+          }
+
+          if (oldState === RouteState.DIALOG) {
+            if (newState === RouteState.SUBPAGE) {
+              // The only known case currently for such a transition is from
+              // /signOut to /syncSetup.
+              this.enterSubpage_(newRoute);
+            }
+            // Nothing to do for all other cases.
+          }
+
+          // Nothing to do for when oldState === RouteState.DIALOG.
+        }
+
+        private processTransitionRedesign_(
+            oldRoute: Route|null, newRoute: Route, oldState: RouteState,
+            newState: RouteState) {
           if (oldState === RouteState.TOP_LEVEL) {
             if (newState === RouteState.SECTION) {
               this.switchToSections_(newRoute);
diff --git a/chrome/browser/resources/settings/settings_page_css.html b/chrome/browser/resources/settings/settings_page_css.html
index 8d5e6bdc59277..5ac3d7a193207 100644
--- a/chrome/browser/resources/settings/settings_page_css.html
+++ b/chrome/browser/resources/settings/settings_page_css.html
@@ -1,5 +1,9 @@
   <template>
     <style>
+      :host(.showing-subpage) settings-section:not(.expanded) {
+        display: none;
+      }
+
       :host > div > :not(.expanded) {
         /* The margin and padding here are doing two things: make the total
          * separation 24px; and make scrollIntoView align the section header
diff --git a/chrome/browser/ui/webui/settings/settings_ui.cc b/chrome/browser/ui/webui/settings/settings_ui.cc
index 66f32a2aa6b5f..3febf74651577 100644
--- a/chrome/browser/ui/webui/settings/settings_ui.cc
+++ b/chrome/browser/ui/webui/settings/settings_ui.cc
@@ -263,6 +263,14 @@ SettingsUI::SettingsUI(content::WebUI* web_ui)
         std::make_unique<IncompatibleApplicationsHandler>());
 #endif  // OS_WIN && BUILDFLAG(GOOGLE_CHROME_BRANDING)
 
+  // TODO(crbug.com/1271661): Update the UI and stop passing this boolean.
+  bool enable_landing_page_redesign = true;
+  html_source->AddString(
+      "enableLandingPageRedesignAttribute",
+      enable_landing_page_redesign ? "enable-landing-page-redesign" : "");
+  html_source->AddBoolean("enableLandingPageRedesign",
+                          enable_landing_page_redesign);
+
   html_source->AddString(
       "enableBrandingUpdateAttribute",
       base::FeatureList::IsEnabled(features::kWebUIBrandingUpdate)
diff --git a/chrome/test/data/webui/settings/advanced_page_test.js b/chrome/test/data/webui/settings/advanced_page_test.js
index ae2b4a31fc357..4dfa6fe9d35a0 100644
--- a/chrome/test/data/webui/settings/advanced_page_test.js
+++ b/chrome/test/data/webui/settings/advanced_page_test.js
@@ -38,10 +38,11 @@ suite('AdvancedPage', function() {
   });
 
   /**
-   * Verifies that a section is rendered but hidden, including all its subpages.
+   * Verifies the section has a visible #main element and that any possible
+   * sub-pages are hidden.
    * @param {!Node} section The DOM node for the section.
    */
-  function verifySectionWithSubpagesHidden(section) {
+  function verifySubpagesHidden(section) {
     // Check if there are sub-pages to verify.
     const pages = section.firstElementChild.shadowRoot.querySelector(
         'settings-animated-pages');
@@ -57,17 +58,16 @@ suite('AdvancedPage', function() {
       return element.tagName !== 'TEMPLATE';
     });
 
-    // The section's main child should be hidden since only the section
-    // corresponding to the current route should be visible.
+    // The section's main child should be stamped and visible.
     const main = stampedChildren.filter(function(element) {
       return element.getAttribute('route-path') === 'default';
     });
     const sectionName = /** @type {{section: string}} */ (section).section;
     assertEquals(
         main.length, 1, 'default card not found for section ' + sectionName);
-    assertEquals(main[0].offsetHeight, 0);
+    assertGT(main[0].offsetHeight, 0);
 
-    // Any other stamped subpages should also be hidden.
+    // Any other stamped subpages should not be visible.
     const subpages = stampedChildren.filter(function(element) {
       return element.getAttribute('route-path') !== 'default';
     });
@@ -89,7 +89,7 @@ suite('AdvancedPage', function() {
       const section = getSection(
           /** @type {!SettingsBasicPageElement} */ (basicPage), sections[i]);
       assertTrue(!!section);
-      verifySectionWithSubpagesHidden(/** @type {!Node} */ (section));
+      verifySubpagesHidden(/** @type {!Node} */ (section));
     }
   });
 });
diff --git a/chrome/test/data/webui/settings/basic_page_test.js b/chrome/test/data/webui/settings/basic_page_test.js
index 0e19d90eaff41..94086562fbffa 100644
--- a/chrome/test/data/webui/settings/basic_page_test.js
+++ b/chrome/test/data/webui/settings/basic_page_test.js
@@ -15,27 +15,14 @@ import {loadTimeData, pageVisibility, Router, routes} from 'chrome://settings/se
 import {eventToPromise, flushTasks, isVisible} from 'chrome://webui-test/test_util.js';
 // clang-format on
 
-suite('SettingsBasicPage', () => {
+// Register mocha tests.
+suite('SettingsBasicPage', function() {
   let page = null;
 
-  setup(async function() {
+  setup(function() {
     PolymerTest.clearBody();
     page = document.createElement('settings-basic-page');
     document.body.appendChild(page);
-    page.scroller = document.body;
-
-    // Need to wait for the 'show-container' event to fire after every
-    // transition, to ensure no logic related to previous transitions is still
-    // running when later transitions are tested.
-    const whenDone = eventToPromise('show-container', page);
-
-    // Ensure that all settings-section instances are rendered.
-    flush();
-    await page.$$('#advancedPageTemplate').get();
-    const sections = page.shadowRoot.querySelectorAll('settings-section');
-    assertTrue(sections.length > 1);
-
-    await whenDone;
   });
 
   test('load page', function() {
@@ -69,6 +56,41 @@ suite('SettingsBasicPage', () => {
     const sectionElement = page.$$('settings-section-safety-check');
     assertFalse(!!sectionElement);
   });
+});
+
+suite('SettingsBasicPageRedesign', () => {
+  let page = null;
+
+  suiteSetup(function() {
+    assertTrue(loadTimeData.getBoolean('enableLandingPageRedesign'));
+    const attribute =
+        loadTimeData.getString('enableLandingPageRedesignAttribute');
+    assertEquals('enable-landing-page-redesign', attribute);
+
+    // Do this manually as it is normally part of settings.html, which is not
+    // part of this test.
+    document.documentElement.toggleAttribute(attribute, true);
+  });
+
+  setup(async function() {
+    PolymerTest.clearBody();
+    page = document.createElement('settings-basic-page');
+    document.body.appendChild(page);
+    page.scroller = document.body;
+
+    // Need to wait for the 'show-container' event to fire after every
+    // transition, to ensure no logic related to previous transitions is still
+    // running when later transitions are tested.
+    const whenDone = eventToPromise('show-container', page);
+
+    // Ensure that all settings-section instances are rendered.
+    flush();
+    await page.$$('#advancedPageTemplate').get();
+    const sections = page.shadowRoot.querySelectorAll('settings-section');
+    assertTrue(sections.length > 1);
+
+    await whenDone;
+  });
 
   /** @param {string} section */
   function assertActiveSection(section) {
diff --git a/chrome/test/data/webui/settings/cr_settings_browsertest.js b/chrome/test/data/webui/settings/cr_settings_browsertest.js
index 3659758339f0e..3fd5ea56c1deb 100644
--- a/chrome/test/data/webui/settings/cr_settings_browsertest.js
+++ b/chrome/test/data/webui/settings/cr_settings_browsertest.js
@@ -82,6 +82,17 @@ TEST_F('CrSettingsBasicPageTest', 'All', function() {
   runMochaSuite('SettingsBasicPage');
 });
 
+var CrSettingsBasicPageRedesignTest = class extends CrSettingsBrowserTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://settings/test_loader.html?module=settings/basic_page_test.js&host=webui-test';
+  }
+};
+
+TEST_F('CrSettingsBasicPageRedesignTest', 'All', function() {
+  runMochaSuite('SettingsBasicPageRedesign');
+});
+
 GEN('#if !BUILDFLAG(IS_CHROMEOS_ASH)');
 var CrSettingsLanguagesPageTest = class extends CrSettingsBrowserTest {
   /** @override */
diff --git a/chrome/test/data/webui/settings/settings_menu_test.ts b/chrome/test/data/webui/settings/settings_menu_test.ts
index 6779142d03739..824a250281cb4 100644
--- a/chrome/test/data/webui/settings/settings_menu_test.ts
+++ b/chrome/test/data/webui/settings/settings_menu_test.ts
@@ -5,6 +5,7 @@
 /** @fileoverview Runs tests for the settings menu. */
 
 // clang-format off
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 import {pageVisibility, Router, routes, SettingsMenuElement} from 'chrome://settings/settings.js';
 import {assertEquals, assertFalse, assertNotEquals, assertTrue} from 'chrome://webui-test/chai_assert.js';
@@ -150,6 +151,13 @@ suite('SettingsMenuReset', function() {
           settingsMenu.shadowRoot!.querySelector<HTMLElement>(
                                       '#reset')!.hidden);
 
+      if (!loadTimeData.getBoolean('enableLandingPageRedesign')) {
+        assertEquals(
+            expectedHidden,
+            settingsMenu.shadowRoot!.querySelector<HTMLElement>(
+                                        '#safetyCheck')!.hidden);
+      }
+
       // <if expr="not chromeos and not lacros">
       assertEquals(
           expectedHidden,