diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/meta-boxes-section.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/meta-boxes-section.js.snap
index 18cd57ad1252d8..e76e7c106efb0a 100644
--- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/meta-boxes-section.js.snap
+++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/meta-boxes-section.js.snap
@@ -1,48 +1,416 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MetaBoxesSection renders a Custom Fields option 1`] = `
-<Section
-  title="Advanced panels"
+.emotion-0 {
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
+  font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
+}
+
+.components-panel__row .emotion-2 {
+  margin-bottom: inherit;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+}
+
+.emotion-4>*+*:not( marquee ) {
+  margin-left: calc(4px * 3);
+}
+
+.emotion-4>* {
+  min-width: 0;
+}
+
+<fieldset
+  class="interface-preferences-modal__section"
 >
-  <WithSelect(EnableCustomFieldsOption)
-    label="Custom fields"
-  />
-</Section>
+  <legend
+    class="interface-preferences-modal__section-legend"
+  >
+    <h2
+      class="interface-preferences-modal__section-title"
+    >
+      Advanced panels
+    </h2>
+  </legend>
+  <div
+    class="interface-preferences-modal__option"
+  >
+    <div
+      class="components-base-control components-toggle-control emotion-0 emotion-1"
+    >
+      <div
+        class="components-base-control__field emotion-2 emotion-3"
+      >
+        <div
+          class="components-flex components-h-stack emotion-4 emotion-5"
+          data-wp-c16t="true"
+          data-wp-component="HStack"
+        >
+          <span
+            class="components-form-toggle"
+          >
+            <input
+              class="components-form-toggle__input"
+              id="inspector-toggle-control-0"
+              type="checkbox"
+            />
+            <span
+              class="components-form-toggle__track"
+            />
+            <span
+              class="components-form-toggle__thumb"
+            />
+          </span>
+          <label
+            class="components-toggle-control__label"
+            for="inspector-toggle-control-0"
+          >
+            Custom fields
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</fieldset>
 `;
 
 exports[`MetaBoxesSection renders a Custom Fields option and meta box options 1`] = `
-<Section
-  title="Advanced panels"
+.emotion-0 {
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
+  font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
+}
+
+.components-panel__row .emotion-2 {
+  margin-bottom: inherit;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+}
+
+.emotion-4>*+*:not( marquee ) {
+  margin-left: calc(4px * 3);
+}
+
+.emotion-4>* {
+  min-width: 0;
+}
+
+<fieldset
+  class="interface-preferences-modal__section"
 >
-  <WithSelect(EnableCustomFieldsOption)
-    label="Custom fields"
-  />
-  <WithSelect(IfCondition(WithDispatch(BaseOption)))
-    key="test1"
-    label="Meta Box 1"
-    panelName="meta-box-test1"
-  />
-  <WithSelect(IfCondition(WithDispatch(BaseOption)))
-    key="test2"
-    label="Meta Box 2"
-    panelName="meta-box-test2"
-  />
-</Section>
+  <legend
+    class="interface-preferences-modal__section-legend"
+  >
+    <h2
+      class="interface-preferences-modal__section-title"
+    >
+      Advanced panels
+    </h2>
+  </legend>
+  <div
+    class="interface-preferences-modal__option"
+  >
+    <div
+      class="components-base-control components-toggle-control emotion-0 emotion-1"
+    >
+      <div
+        class="components-base-control__field emotion-2 emotion-3"
+      >
+        <div
+          class="components-flex components-h-stack emotion-4 emotion-5"
+          data-wp-c16t="true"
+          data-wp-component="HStack"
+        >
+          <span
+            class="components-form-toggle"
+          >
+            <input
+              class="components-form-toggle__input"
+              id="inspector-toggle-control-3"
+              type="checkbox"
+            />
+            <span
+              class="components-form-toggle__track"
+            />
+            <span
+              class="components-form-toggle__thumb"
+            />
+          </span>
+          <label
+            class="components-toggle-control__label"
+            for="inspector-toggle-control-3"
+          >
+            Custom fields
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="interface-preferences-modal__option"
+  >
+    <div
+      class="components-base-control components-toggle-control emotion-0 emotion-1"
+    >
+      <div
+        class="components-base-control__field emotion-2 emotion-3"
+      >
+        <div
+          class="components-flex components-h-stack emotion-4 emotion-5"
+          data-wp-c16t="true"
+          data-wp-component="HStack"
+        >
+          <span
+            class="components-form-toggle is-checked"
+          >
+            <input
+              checked=""
+              class="components-form-toggle__input"
+              id="inspector-toggle-control-4"
+              type="checkbox"
+            />
+            <span
+              class="components-form-toggle__track"
+            />
+            <span
+              class="components-form-toggle__thumb"
+            />
+          </span>
+          <label
+            class="components-toggle-control__label"
+            for="inspector-toggle-control-4"
+          >
+            Meta Box 1
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="interface-preferences-modal__option"
+  >
+    <div
+      class="components-base-control components-toggle-control emotion-0 emotion-1"
+    >
+      <div
+        class="components-base-control__field emotion-2 emotion-3"
+      >
+        <div
+          class="components-flex components-h-stack emotion-4 emotion-5"
+          data-wp-c16t="true"
+          data-wp-component="HStack"
+        >
+          <span
+            class="components-form-toggle is-checked"
+          >
+            <input
+              checked=""
+              class="components-form-toggle__input"
+              id="inspector-toggle-control-5"
+              type="checkbox"
+            />
+            <span
+              class="components-form-toggle__track"
+            />
+            <span
+              class="components-form-toggle__thumb"
+            />
+          </span>
+          <label
+            class="components-toggle-control__label"
+            for="inspector-toggle-control-5"
+          >
+            Meta Box 2
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</fieldset>
 `;
 
 exports[`MetaBoxesSection renders meta box options 1`] = `
-<Section
-  title="Advanced panels"
+.emotion-0 {
+  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
+  font-size: 13px;
+  box-sizing: border-box;
+}
+
+.emotion-0 *,
+.emotion-0 *::before,
+.emotion-0 *::after {
+  box-sizing: inherit;
+}
+
+.components-panel__row .emotion-2 {
+  margin-bottom: inherit;
+}
+
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -ms-flex-pack: start;
+  -webkit-justify-content: flex-start;
+  justify-content: flex-start;
+  width: 100%;
+}
+
+.emotion-4>*+*:not( marquee ) {
+  margin-left: calc(4px * 3);
+}
+
+.emotion-4>* {
+  min-width: 0;
+}
+
+<fieldset
+  class="interface-preferences-modal__section"
 >
-  <WithSelect(IfCondition(WithDispatch(BaseOption)))
-    key="test1"
-    label="Meta Box 1"
-    panelName="meta-box-test1"
-  />
-  <WithSelect(IfCondition(WithDispatch(BaseOption)))
-    key="test2"
-    label="Meta Box 2"
-    panelName="meta-box-test2"
-  />
-</Section>
+  <legend
+    class="interface-preferences-modal__section-legend"
+  >
+    <h2
+      class="interface-preferences-modal__section-title"
+    >
+      Advanced panels
+    </h2>
+  </legend>
+  <div
+    class="interface-preferences-modal__option"
+  >
+    <div
+      class="components-base-control components-toggle-control emotion-0 emotion-1"
+    >
+      <div
+        class="components-base-control__field emotion-2 emotion-3"
+      >
+        <div
+          class="components-flex components-h-stack emotion-4 emotion-5"
+          data-wp-c16t="true"
+          data-wp-component="HStack"
+        >
+          <span
+            class="components-form-toggle is-checked"
+          >
+            <input
+              checked=""
+              class="components-form-toggle__input"
+              id="inspector-toggle-control-1"
+              type="checkbox"
+            />
+            <span
+              class="components-form-toggle__track"
+            />
+            <span
+              class="components-form-toggle__thumb"
+            />
+          </span>
+          <label
+            class="components-toggle-control__label"
+            for="inspector-toggle-control-1"
+          >
+            Meta Box 1
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="interface-preferences-modal__option"
+  >
+    <div
+      class="components-base-control components-toggle-control emotion-0 emotion-1"
+    >
+      <div
+        class="components-base-control__field emotion-2 emotion-3"
+      >
+        <div
+          class="components-flex components-h-stack emotion-4 emotion-5"
+          data-wp-c16t="true"
+          data-wp-component="HStack"
+        >
+          <span
+            class="components-form-toggle is-checked"
+          >
+            <input
+              checked=""
+              class="components-form-toggle__input"
+              id="inspector-toggle-control-2"
+              type="checkbox"
+            />
+            <span
+              class="components-form-toggle__track"
+            />
+            <span
+              class="components-form-toggle__thumb"
+            />
+          </span>
+          <label
+            class="components-toggle-control__label"
+            for="inspector-toggle-control-2"
+          >
+            Meta Box 2
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</fieldset>
 `;
diff --git a/packages/edit-post/src/components/preferences-modal/test/meta-boxes-section.js b/packages/edit-post/src/components/preferences-modal/test/meta-boxes-section.js
index b00d2fdffb512c..89d642967efcd8 100644
--- a/packages/edit-post/src/components/preferences-modal/test/meta-boxes-section.js
+++ b/packages/edit-post/src/components/preferences-modal/test/meta-boxes-section.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -10,7 +10,7 @@ import { MetaBoxesSection } from '../meta-boxes-section';
 
 describe( 'MetaBoxesSection', () => {
 	it( 'does not render if there are no options', () => {
-		const wrapper = shallow(
+		render(
 			<MetaBoxesSection
 				areCustomFieldsRegistered={ false }
 				metaBoxes={ [
@@ -18,11 +18,11 @@ describe( 'MetaBoxesSection', () => {
 				] }
 			/>
 		);
-		expect( wrapper.isEmptyRender() ).toBe( true );
+		expect( screen.queryByRole( 'group' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'renders a Custom Fields option', () => {
-		const wrapper = shallow(
+		render(
 			<MetaBoxesSection
 				title="Advanced panels"
 				areCustomFieldsRegistered
@@ -31,11 +31,13 @@ describe( 'MetaBoxesSection', () => {
 				] }
 			/>
 		);
-		expect( wrapper ).toMatchSnapshot();
+		expect(
+			screen.getByRole( 'group', { name: 'Advanced panels' } )
+		).toMatchSnapshot();
 	} );
 
 	it( 'renders meta box options', () => {
-		const wrapper = shallow(
+		render(
 			<MetaBoxesSection
 				title="Advanced panels"
 				areCustomFieldsRegistered={ false }
@@ -46,11 +48,13 @@ describe( 'MetaBoxesSection', () => {
 				] }
 			/>
 		);
-		expect( wrapper ).toMatchSnapshot();
+		expect(
+			screen.getByRole( 'group', { name: 'Advanced panels' } )
+		).toMatchSnapshot();
 	} );
 
 	it( 'renders a Custom Fields option and meta box options', () => {
-		const wrapper = shallow(
+		render(
 			<MetaBoxesSection
 				title="Advanced panels"
 				areCustomFieldsRegistered
@@ -61,6 +65,8 @@ describe( 'MetaBoxesSection', () => {
 				] }
 			/>
 		);
-		expect( wrapper ).toMatchSnapshot();
+		expect(
+			screen.getByRole( 'group', { name: 'Advanced panels' } )
+		).toMatchSnapshot();
 	} );
 } );