diff --git a/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
index b2ab3a6e8338..504537fa16fc 100644
--- a/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
@@ -83,143 +83,435 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
             </div>
           </div>
           <div
-            class="mx_SettingsSubsection"
+            class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
+            data-testid="layoutPanel"
           >
             <div
               class="mx_SettingsSubsectionHeading"
             >
               <h3
-                class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+                class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
               >
                 Message layout
               </h3>
             </div>
             <div
-              class="mx_SettingsSubsection_content"
+              class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
             >
-              <div
-                class="mx_LayoutSwitcher_RadioButtons"
+              <form
+                class="_root_148br_24 mx_LayoutSwitcher_LayoutSelector"
               >
-                <label
-                  class="mx_LayoutSwitcher_RadioButton"
+                <div
+                  class="mxLayoutSwitcher_LayoutSelector_LayoutRadio"
                 >
                   <div
-                    class="mx_LayoutSwitcher_RadioButton_preview mx_IRCLayout mx_EventTilePreview_loader"
+                    class="_inline-field_148br_40 mxLayoutSwitcher_LayoutSelector_LayoutRadio_InlineField"
                   >
                     <div
-                      class="mx_Spinner"
+                      class="_inline-field-control_148br_52"
                     >
                       <div
-                        aria-label="Loading…"
-                        class="mx_Spinner_icon"
-                        data-testid="spinner"
-                        role="progressbar"
-                        style="width: 32px; height: 32px;"
-                      />
+                        class="_container_1vw5h_18"
+                      >
+                        <input
+                          checked=""
+                          class="_input_1vw5h_26"
+                          id="radix-0"
+                          name="layout"
+                          title=""
+                          type="radio"
+                          value="group"
+                        />
+                        <div
+                          class="_ui_1vw5h_27"
+                        />
+                      </div>
+                    </div>
+                    <div
+                      class="_inline-field-body_148br_46"
+                    >
+                      <label
+                        class="_label_148br_67"
+                        for="radix-0"
+                      >
+                        Modern
+                      </label>
                     </div>
                   </div>
-                  <label
-                    class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                  <div
+                    class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator"
+                    role="separator"
+                  />
+                  <div
+                    class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview"
+                    role="presentation"
                   >
-                    <input
-                      name="layout"
-                      type="radio"
-                      value="irc"
-                    />
-                    <div>
-                      <div />
+                    <div
+                      aria-atomic="true"
+                      aria-live="off"
+                      class="mx_EventTile"
+                      data-event-id="$9999999999999999999999999999999999999999999"
+                      data-has-reply="false"
+                      data-layout="group"
+                      data-scroll-tokens="$9999999999999999999999999999999999999999999"
+                      data-self="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        class="mx_DisambiguatedProfile"
+                      >
+                        <span
+                          class="mx_Username_color2 mx_DisambiguatedProfile_displayName"
+                          dir="auto"
+                        >
+                          @userId:matrix.org
+                        </span>
+                      </div>
+                      <div
+                        class="mx_EventTile_avatar"
+                      >
+                        <span
+                          class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
+                          data-color="2"
+                          data-testid="avatar-img"
+                          data-type="round"
+                          role="presentation"
+                          style="--cpd-avatar-size: 30px;"
+                          title="@userId:matrix.org"
+                        >
+                          u
+                        </span>
+                      </div>
+                      <div
+                        class="mx_EventTile_line"
+                      >
+                        <div
+                          class="mx_MTextBody mx_EventTile_content"
+                        >
+                          <span
+                            class="mx_EventTile_body"
+                            dir="auto"
+                          >
+                            Hey you. You're the best!
+                          </span>
+                        </div>
+                        <div
+                          aria-label="Message Actions"
+                          aria-live="off"
+                          class="mx_MessageActionBar"
+                          role="toolbar"
+                        >
+                          <div
+                            aria-label="Edit"
+                            class="mx_AccessibleButton mx_MessageActionBar_iconButton"
+                            role="button"
+                            tabindex="0"
+                          >
+                            <div />
+                          </div>
+                          <div
+                            aria-expanded="false"
+                            aria-haspopup="true"
+                            aria-label="Options"
+                            class="mx_AccessibleButton mx_MessageActionBar_iconButton mx_MessageActionBar_optionsButton"
+                            role="button"
+                            tabindex="-1"
+                          >
+                            <div />
+                          </div>
+                        </div>
+                      </div>
                     </div>
+                  </div>
+                </div>
+                <div
+                  class="mxLayoutSwitcher_LayoutSelector_LayoutRadio"
+                >
+                  <div
+                    class="_inline-field_148br_40 mxLayoutSwitcher_LayoutSelector_LayoutRadio_InlineField"
+                  >
                     <div
-                      class="mx_StyledRadioButton_content"
+                      class="_inline-field-control_148br_52"
                     >
-                      IRC (Experimental)
+                      <div
+                        class="_container_1vw5h_18"
+                      >
+                        <input
+                          class="_input_1vw5h_26"
+                          id="radix-1"
+                          name="layout"
+                          title=""
+                          type="radio"
+                          value="bubble"
+                        />
+                        <div
+                          class="_ui_1vw5h_27"
+                        />
+                      </div>
                     </div>
                     <div
-                      class="mx_StyledRadioButton_spacer"
-                    />
-                  </label>
-                </label>
-                <label
-                  class="mx_LayoutSwitcher_RadioButton mx_LayoutSwitcher_RadioButton_selected"
-                >
+                      class="_inline-field-body_148br_46"
+                    >
+                      <label
+                        class="_label_148br_67"
+                        for="radix-1"
+                      >
+                        Message bubbles
+                      </label>
+                    </div>
+                  </div>
                   <div
-                    class="mx_LayoutSwitcher_RadioButton_preview mx_EventTilePreview_loader"
+                    class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator"
+                    role="separator"
+                  />
+                  <div
+                    class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview"
+                    role="presentation"
                   >
                     <div
-                      class="mx_Spinner"
+                      aria-atomic="true"
+                      aria-live="off"
+                      class="mx_EventTile"
+                      data-event-id="$9999999999999999999999999999999999999999999"
+                      data-has-reply="false"
+                      data-layout="bubble"
+                      data-scroll-tokens="$9999999999999999999999999999999999999999999"
+                      data-self="true"
+                      tabindex="-1"
                     >
                       <div
-                        aria-label="Loading…"
-                        class="mx_Spinner_icon"
-                        data-testid="spinner"
-                        role="progressbar"
-                        style="width: 32px; height: 32px;"
-                      />
+                        class="mx_DisambiguatedProfile"
+                      >
+                        <span
+                          class="mx_Username_color2 mx_DisambiguatedProfile_displayName"
+                          dir="auto"
+                        >
+                          @userId:matrix.org
+                        </span>
+                      </div>
+                      <div
+                        class="mx_EventTile_avatar"
+                      >
+                        <span
+                          class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
+                          data-color="2"
+                          data-testid="avatar-img"
+                          data-type="round"
+                          role="presentation"
+                          style="--cpd-avatar-size: 30px;"
+                          title="@userId:matrix.org"
+                        >
+                          u
+                        </span>
+                      </div>
+                      <div
+                        class="mx_EventTile_line"
+                      >
+                        <div
+                          class="mx_MTextBody mx_EventTile_content"
+                        >
+                          <span
+                            class="mx_EventTile_body"
+                            dir="auto"
+                          >
+                            Hey you. You're the best!
+                          </span>
+                        </div>
+                        <div
+                          aria-label="Message Actions"
+                          aria-live="off"
+                          class="mx_MessageActionBar"
+                          role="toolbar"
+                        >
+                          <div
+                            aria-label="Edit"
+                            class="mx_AccessibleButton mx_MessageActionBar_iconButton"
+                            role="button"
+                            tabindex="0"
+                          >
+                            <div />
+                          </div>
+                          <div
+                            aria-expanded="false"
+                            aria-haspopup="true"
+                            aria-label="Options"
+                            class="mx_AccessibleButton mx_MessageActionBar_iconButton mx_MessageActionBar_optionsButton"
+                            role="button"
+                            tabindex="-1"
+                          >
+                            <div />
+                          </div>
+                        </div>
+                      </div>
                     </div>
                   </div>
-                  <label
-                    class="mx_StyledRadioButton mx_StyledRadioButton_enabled mx_StyledRadioButton_checked"
+                </div>
+                <div
+                  class="mxLayoutSwitcher_LayoutSelector_LayoutRadio"
+                >
+                  <div
+                    class="_inline-field_148br_40 mxLayoutSwitcher_LayoutSelector_LayoutRadio_InlineField"
                   >
-                    <input
-                      checked=""
-                      name="layout"
-                      type="radio"
-                      value="group"
-                    />
-                    <div>
-                      <div />
+                    <div
+                      class="_inline-field-control_148br_52"
+                    >
+                      <div
+                        class="_container_1vw5h_18"
+                      >
+                        <input
+                          class="_input_1vw5h_26"
+                          id="radix-2"
+                          name="layout"
+                          title=""
+                          type="radio"
+                          value="irc"
+                        />
+                        <div
+                          class="_ui_1vw5h_27"
+                        />
+                      </div>
                     </div>
                     <div
-                      class="mx_StyledRadioButton_content"
+                      class="_inline-field-body_148br_46"
                     >
-                      Modern
+                      <label
+                        class="_label_148br_67"
+                        for="radix-2"
+                      >
+                        IRC (experimental)
+                      </label>
                     </div>
+                  </div>
+                  <div
+                    class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_separator"
+                    role="separator"
+                  />
+                  <div
+                    class="mxLayoutSwitcher_LayoutSelector_LayoutRadio_EventTilePreview mx_IRCLayout"
+                    role="presentation"
+                  >
                     <div
-                      class="mx_StyledRadioButton_spacer"
-                    />
-                  </label>
-                </label>
-                <label
-                  class="mx_LayoutSwitcher_RadioButton"
+                      aria-atomic="true"
+                      aria-live="off"
+                      class="mx_EventTile"
+                      data-event-id="$9999999999999999999999999999999999999999999"
+                      data-has-reply="false"
+                      data-layout="irc"
+                      data-scroll-tokens="$9999999999999999999999999999999999999999999"
+                      data-self="true"
+                      tabindex="-1"
+                    >
+                      <div
+                        class="mx_DisambiguatedProfile"
+                      >
+                        <span
+                          class="mx_Username_color2 mx_DisambiguatedProfile_displayName"
+                          dir="auto"
+                        >
+                          @userId:matrix.org
+                        </span>
+                      </div>
+                      <div
+                        class="mx_EventTile_avatar"
+                      >
+                        <span
+                          class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
+                          data-color="2"
+                          data-testid="avatar-img"
+                          data-type="round"
+                          role="presentation"
+                          style="--cpd-avatar-size: 14px;"
+                          title="@userId:matrix.org"
+                        >
+                          u
+                        </span>
+                      </div>
+                      <div
+                        class="mx_EventTile_line"
+                      >
+                        <div
+                          class="mx_MTextBody mx_EventTile_content"
+                        >
+                          <span
+                            class="mx_EventTile_body"
+                            dir="auto"
+                          >
+                            Hey you. You're the best!
+                          </span>
+                        </div>
+                        <div
+                          aria-label="Message Actions"
+                          aria-live="off"
+                          class="mx_MessageActionBar"
+                          role="toolbar"
+                        >
+                          <div
+                            aria-label="Edit"
+                            class="mx_AccessibleButton mx_MessageActionBar_iconButton"
+                            role="button"
+                            tabindex="0"
+                          >
+                            <div />
+                          </div>
+                          <div
+                            aria-expanded="false"
+                            aria-haspopup="true"
+                            aria-label="Options"
+                            class="mx_AccessibleButton mx_MessageActionBar_iconButton mx_MessageActionBar_optionsButton"
+                            role="button"
+                            tabindex="-1"
+                          >
+                            <div />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </form>
+              <form
+                class="_root_148br_24"
+              >
+                <div
+                  class="_inline-field_148br_40"
                 >
                   <div
-                    class="mx_LayoutSwitcher_RadioButton_preview mx_EventTilePreview_loader"
+                    class="_inline-field-control_148br_52"
                   >
                     <div
-                      class="mx_Spinner"
+                      class="_container_qnvru_18"
                     >
+                      <input
+                        class="_input_qnvru_32"
+                        id="radix-3"
+                        name="compactLayout"
+                        title=""
+                        type="checkbox"
+                      />
                       <div
-                        aria-label="Loading…"
-                        class="mx_Spinner_icon"
-                        data-testid="spinner"
-                        role="progressbar"
-                        style="width: 32px; height: 32px;"
+                        class="_ui_qnvru_42"
                       />
                     </div>
                   </div>
-                  <label
-                    class="mx_StyledRadioButton mx_StyledRadioButton_enabled"
+                  <div
+                    class="_inline-field-body_148br_46"
                   >
-                    <input
-                      name="layout"
-                      type="radio"
-                      value="bubble"
-                    />
-                    <div>
-                      <div />
-                    </div>
-                    <div
-                      class="mx_StyledRadioButton_content"
+                    <label
+                      class="_label_148br_67"
+                      for="radix-3"
                     >
-                      Message bubbles
-                    </div>
-                    <div
-                      class="mx_StyledRadioButton_spacer"
-                    />
-                  </label>
-                </label>
-              </div>
+                      Show compact layout
+                    </label>
+                  </div>
+                </div>
+              </form>
             </div>
+            <div
+              class="_separator_144s5_17"
+              data-kind="primary"
+              data-orientation="horizontal"
+              role="separator"
+            />
           </div>
           <div
             class="mx_SettingsSubsection"