diff --git a/e2e-tests/cypress/tests/integration/channels/system_console/ui_and_api/customization_spec.js b/e2e-tests/cypress/tests/integration/channels/system_console/ui_and_api/customization_spec.js
index 75a0645752..d956613d9b 100644
--- a/e2e-tests/cypress/tests/integration/channels/system_console/ui_and_api/customization_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/system_console/ui_and_api/customization_spec.js
@@ -36,7 +36,7 @@ describe('Customization', () => {
 
         cy.findByTestId('CustomBrandImage').should('be.visible').within(() => {
             // * Verify that setting is visible and matches text content
-            cy.get('label').should('be.visible').and('have.text', 'Custom Brand Image:');
+            cy.get('legend').should('be.visible').and('have.text', 'Custom Brand Image:');
 
             // * Verify that help setting is visible and matches text content
             const contents = 'Customize your user experience by adding a custom image to your login screen. Recommended maximum image size is less than 2 MB.';
diff --git a/webapp/channels/src/components/add_user_to_channel_modal/__snapshots__/add_user_to_channel_modal.test.tsx.snap b/webapp/channels/src/components/add_user_to_channel_modal/__snapshots__/add_user_to_channel_modal.test.tsx.snap
index 43b5ad4745..02d56a94d4 100644
--- a/webapp/channels/src/components/add_user_to_channel_modal/__snapshots__/add_user_to_channel_modal.test.tsx.snap
+++ b/webapp/channels/src/components/add_user_to_channel_modal/__snapshots__/add_user_to_channel_modal.test.tsx.snap
@@ -95,9 +95,7 @@ exports[`components/AddUserToChannelModal should match snapshot 1`] = `
           value=""
         />
       </div>
-      <div>
-        <br />
-      </div>
+      <div />
     </ModalBody>
     <ModalFooter
       bsClass="modal-footer"
diff --git a/webapp/channels/src/components/add_user_to_channel_modal/add_user_to_channel_modal.tsx b/webapp/channels/src/components/add_user_to_channel_modal/add_user_to_channel_modal.tsx
index c6efcc77df..a5ecf45ea7 100644
--- a/webapp/channels/src/components/add_user_to_channel_modal/add_user_to_channel_modal.tsx
+++ b/webapp/channels/src/components/add_user_to_channel_modal/add_user_to_channel_modal.tsx
@@ -224,16 +224,16 @@ export default class AddUserToChannelModal extends React.PureComponent<Props, St
         if (!this.state.saving) {
             if (this.state.submitError) {
                 errorMsg = (
-                    <label
+                    <span
                         id='add-user-to-channel-modal__invite-error'
                         className='modal__error has-error control-label'
                     >
                         {this.state.submitError}
-                    </label>
+                    </span>
                 );
             } else if (targetUserIsMemberOfSelectedChannel) {
                 errorMsg = (
-                    <label
+                    <span
                         id='add-user-to-channel-modal__user-is-member'
                         className='modal__error has-error control-label'
                     >
@@ -244,7 +244,7 @@ export default class AddUserToChannelModal extends React.PureComponent<Props, St
                                 name,
                             }}
                         />
-                    </label>
+                    </span>
                 );
             }
         }
@@ -317,7 +317,6 @@ export default class AddUserToChannelModal extends React.PureComponent<Props, St
                         </div>
                         <div>
                             {errorMsg}
-                            <br/>
                         </div>
                     </Modal.Body>
                     <Modal.Footer>
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap
index 5c1b0d1873..f0e6fdd6c7 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/bleve_settings.test.tsx.snap
@@ -57,43 +57,36 @@ exports[`components/BleveSettings should match snapshot, disabled 1`] = `
         setByEnv={false}
         value=""
       />
-      <div
-        className="form-group"
-      >
-        <label
-          className="control-label col-sm-4"
-        >
-          <MemoizedFormattedMessage
+      <SettingSet
+        label={
+          <Memo(MemoizedFormattedMessage)
             defaultMessage="Bulk Indexing:"
             id="admin.bleve.bulkIndexingTitle"
           />
-        </label>
+        }
+      >
         <div
-          className="col-sm-8"
+          className="job-table-setting"
         >
-          <div
-            className="job-table-setting"
-          >
-            <Connect(JobTable)
-              createJobButtonText={
-                <Memo(MemoizedFormattedMessage)
-                  defaultMessage="Index Now"
-                  id="admin.bleve.createJob.title"
-                />
-              }
-              createJobHelpText={
-                <Memo(MemoizedFormattedMessage)
-                  defaultMessage="All users, channels and posts in the database will be indexed from oldest to newest. Bleve is available during indexing but search results may be incomplete until the indexing job is complete."
-                  id="admin.bleve.createJob.help"
-                />
-              }
-              disabled={true}
-              getExtraInfoText={[Function]}
-              jobType="bleve_post_indexing"
-            />
-          </div>
+          <Connect(JobTable)
+            createJobButtonText={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Index Now"
+                id="admin.bleve.createJob.title"
+              />
+            }
+            createJobHelpText={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="All users, channels and posts in the database will be indexed from oldest to newest. Bleve is available during indexing but search results may be incomplete until the indexing job is complete."
+                id="admin.bleve.createJob.help"
+              />
+            }
+            disabled={true}
+            getExtraInfoText={[Function]}
+            jobType="bleve_post_indexing"
+          />
         </div>
-      </div>
+      </SettingSet>
       <RequestButton
         buttonText={
           <Memo(MemoizedFormattedMessage)
@@ -260,43 +253,36 @@ exports[`components/BleveSettings should match snapshot, enabled 1`] = `
         setByEnv={false}
         value="bleve.idx"
       />
-      <div
-        className="form-group"
-      >
-        <label
-          className="control-label col-sm-4"
-        >
-          <MemoizedFormattedMessage
+      <SettingSet
+        label={
+          <Memo(MemoizedFormattedMessage)
             defaultMessage="Bulk Indexing:"
             id="admin.bleve.bulkIndexingTitle"
           />
-        </label>
+        }
+      >
         <div
-          className="col-sm-8"
+          className="job-table-setting"
         >
-          <div
-            className="job-table-setting"
-          >
-            <Connect(JobTable)
-              createJobButtonText={
-                <Memo(MemoizedFormattedMessage)
-                  defaultMessage="Index Now"
-                  id="admin.bleve.createJob.title"
-                />
-              }
-              createJobHelpText={
-                <Memo(MemoizedFormattedMessage)
-                  defaultMessage="All users, channels and posts in the database will be indexed from oldest to newest. Bleve is available during indexing but search results may be incomplete until the indexing job is complete."
-                  id="admin.bleve.createJob.help"
-                />
-              }
-              disabled={false}
-              getExtraInfoText={[Function]}
-              jobType="bleve_post_indexing"
-            />
-          </div>
+          <Connect(JobTable)
+            createJobButtonText={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Index Now"
+                id="admin.bleve.createJob.title"
+              />
+            }
+            createJobHelpText={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="All users, channels and posts in the database will be indexed from oldest to newest. Bleve is available during indexing but search results may be incomplete until the indexing job is complete."
+                id="admin.bleve.createJob.help"
+              />
+            }
+            disabled={false}
+            getExtraInfoText={[Function]}
+            jobType="bleve_post_indexing"
+          />
         </div>
-      </div>
+      </SettingSet>
       <RequestButton
         buttonText={
           <Memo(MemoizedFormattedMessage)
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.tsx.snap
index 44e4f72031..56e2eb2a57 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/database_settings.test.tsx.snap
@@ -340,39 +340,33 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
         setByEnv={false}
         value={true}
       />
-      <div
-        className="form-group"
-      >
-        <label
-          className="control-label col-sm-4"
-        >
-          <MemoizedFormattedMessage
+      <SettingSet
+        label={
+          <Memo(MemoizedFormattedMessage)
             defaultMessage="Schema Migrations:"
             id="admin.database.migrations_table.title"
           />
-        </label>
+        }
+      >
         <div
-          className="col-sm-8"
+          className="migrations-table-setting"
         >
-          <div
-            className="migrations-table-setting"
-          >
-            <Connect(Component)
-              createHelpText={
-                <Memo(MemoizedFormattedMessage)
-                  defaultMessage="All applied migrations."
-                  id="admin.database.migrations_table.help_text"
-                />
-              }
-            />
-          </div>
+          <Connect(Component)
+            createHelpText={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="All applied migrations."
+                id="admin.database.migrations_table.help_text"
+              />
+            }
+          />
         </div>
-      </div>
+      </SettingSet>
       <div
         className="form-group"
       >
         <label
           className="control-label col-sm-4"
+          htmlFor="activeSearchBackend"
         >
           <MemoizedFormattedMessage
             defaultMessage="Active Search Backend:"
@@ -385,6 +379,7 @@ exports[`components/DatabaseSettings should match snapshot 1`] = `
           <input
             className="form-control"
             disabled={true}
+            id="activeSearchBackend"
             type="text"
             value=""
           />
diff --git a/webapp/channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.tsx.snap b/webapp/channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.tsx.snap
index 728aedc333..6e84fd154e 100644
--- a/webapp/channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/__snapshots__/elasticsearch_settings.test.tsx.snap
@@ -288,43 +288,36 @@ exports[`components/ElasticSearchSettings should match snapshot, disabled 1`] =
           }
         }
       />
-      <div
-        className="form-group"
-      >
-        <label
-          className="control-label col-sm-4"
-        >
-          <MemoizedFormattedMessage
+      <SettingSet
+        label={
+          <Memo(MemoizedFormattedMessage)
             defaultMessage="Bulk Indexing:"
             id="admin.elasticsearch.bulkIndexingTitle"
           />
-        </label>
+        }
+      >
         <div
-          className="col-sm-8"
+          className="job-table-setting"
         >
-          <div
-            className="job-table-setting"
-          >
-            <Connect(JobTable)
-              createJobButtonText={
-                <Memo(MemoizedFormattedMessage)
-                  defaultMessage="Index Now"
-                  id="admin.elasticsearch.createJob.title"
-                />
-              }
-              createJobHelpText={
-                <Memo(MemoizedFormattedMessage)
-                  defaultMessage="All users, channels and posts in the database will be indexed from oldest to newest. Elasticsearch is available during indexing but search results may be incomplete until the indexing job is complete."
-                  id="admin.elasticsearch.createJob.help"
-                />
-              }
-              disabled={true}
-              getExtraInfoText={[Function]}
-              jobType="elasticsearch_post_indexing"
-            />
-          </div>
+          <Connect(JobTable)
+            createJobButtonText={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Index Now"
+                id="admin.elasticsearch.createJob.title"
+              />
+            }
+            createJobHelpText={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="All users, channels and posts in the database will be indexed from oldest to newest. Elasticsearch is available during indexing but search results may be incomplete until the indexing job is complete."
+                id="admin.elasticsearch.createJob.help"
+              />
+            }
+            disabled={true}
+            getExtraInfoText={[Function]}
+            jobType="elasticsearch_post_indexing"
+          />
         </div>
-      </div>
+      </SettingSet>
       <RequestButton
         buttonText={
           <Memo(MemoizedFormattedMessage)
@@ -790,42 +783,35 @@ exports[`components/ElasticSearchSettings should match snapshot, enabled 1`] = `
           }
         }
       />
-      <div
-        className="form-group"
-      >
-        <label
-          className="control-label col-sm-4"
-        >
-          <MemoizedFormattedMessage
+      <SettingSet
+        label={
+          <Memo(MemoizedFormattedMessage)
             defaultMessage="Bulk Indexing:"
             id="admin.elasticsearch.bulkIndexingTitle"
           />
-        </label>
+        }
+      >
         <div
-          className="col-sm-8"
+          className="job-table-setting"
         >
-          <div
-            className="job-table-setting"
-          >
-            <Connect(JobTable)
-              createJobButtonText={
-                <Memo(MemoizedFormattedMessage)
-                  defaultMessage="Index Now"
-                  id="admin.elasticsearch.createJob.title"
-                />
-              }
-              createJobHelpText={
-                <Memo(MemoizedFormattedMessage)
-                  defaultMessage="All users, channels and posts in the database will be indexed from oldest to newest. Elasticsearch is available during indexing but search results may be incomplete until the indexing job is complete."
-                  id="admin.elasticsearch.createJob.help"
-                />
-              }
-              getExtraInfoText={[Function]}
-              jobType="elasticsearch_post_indexing"
-            />
-          </div>
+          <Connect(JobTable)
+            createJobButtonText={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Index Now"
+                id="admin.elasticsearch.createJob.title"
+              />
+            }
+            createJobHelpText={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="All users, channels and posts in the database will be indexed from oldest to newest. Elasticsearch is available during indexing but search results may be incomplete until the indexing job is complete."
+                id="admin.elasticsearch.createJob.help"
+              />
+            }
+            getExtraInfoText={[Function]}
+            jobType="elasticsearch_post_indexing"
+          />
         </div>
-      </div>
+      </SettingSet>
       <RequestButton
         buttonText={
           <Memo(MemoizedFormattedMessage)
diff --git a/webapp/channels/src/components/admin_console/bleve_settings.tsx b/webapp/channels/src/components/admin_console/bleve_settings.tsx
index 6464a7562a..ba5ac5ebca 100644
--- a/webapp/channels/src/components/admin_console/bleve_settings.tsx
+++ b/webapp/channels/src/components/admin_console/bleve_settings.tsx
@@ -18,6 +18,7 @@ import JobsTable from './jobs';
 import OLDAdminSettings from './old_admin_settings';
 import type {BaseProps, BaseState} from './old_admin_settings';
 import RequestButton from './request_button/request_button';
+import SettingSet from './setting_set';
 import SettingsGroup from './settings_group';
 import TextSetting from './text_setting';
 
@@ -174,27 +175,24 @@ export default class BleveSettings extends OLDAdminSettings<Props, State> {
                     setByEnv={this.isSetByEnv('BleveSettings.IndexDir')}
                     disabled={this.props.isDisabled}
                 />
-                <div className='form-group'>
-                    <label className='control-label col-sm-4'>
-                        <FormattedMessage {...messages.bulkIndexingTitle}/>
-                    </label>
-                    <div className='col-sm-8'>
-                        <div className='job-table-setting'>
-                            <JobsTable
-                                jobType={JobTypes.BLEVE_POST_INDEXING}
-                                disabled={!this.state.canPurgeAndIndex || Boolean(this.props.isDisabled)}
-                                createJobButtonText={
-                                    <FormattedMessage
-                                        id='admin.bleve.createJob.title'
-                                        defaultMessage='Index Now'
-                                    />
-                                }
-                                createJobHelpText={<FormattedMessage {...messages.createJob_help}/>}
-                                getExtraInfoText={this.getExtraInfo}
-                            />
-                        </div>
+                <SettingSet
+                    label={<FormattedMessage {...messages.bulkIndexingTitle}/>}
+                >
+                    <div className='job-table-setting'>
+                        <JobsTable
+                            jobType={JobTypes.BLEVE_POST_INDEXING}
+                            disabled={!this.state.canPurgeAndIndex || Boolean(this.props.isDisabled)}
+                            createJobButtonText={
+                                <FormattedMessage
+                                    id='admin.bleve.createJob.title'
+                                    defaultMessage='Index Now'
+                                />
+                            }
+                            createJobHelpText={<FormattedMessage {...messages.createJob_help}/>}
+                            getExtraInfoText={this.getExtraInfo}
+                        />
                     </div>
-                </div>
+                </SettingSet>
                 <RequestButton
                     id='purgeIndexesSection'
                     requestAction={blevePurgeIndexes}
diff --git a/webapp/channels/src/components/admin_console/brand_image_setting/brand_image_setting.tsx b/webapp/channels/src/components/admin_console/brand_image_setting/brand_image_setting.tsx
index f20ec2f4ad..828d13ecfc 100644
--- a/webapp/channels/src/components/admin_console/brand_image_setting/brand_image_setting.tsx
+++ b/webapp/channels/src/components/admin_console/brand_image_setting/brand_image_setting.tsx
@@ -8,6 +8,7 @@ import {Client4} from 'mattermost-redux/client';
 
 import {uploadBrandImage, deleteBrandImage} from 'actions/admin_actions.jsx';
 
+import SettingSet from 'components/admin_console/setting_set';
 import FormError from 'components/form_error';
 import WithTooltip from 'components/with_tooltip';
 
@@ -110,6 +111,10 @@ export default class BrandImageSetting extends React.PureComponent<Props, State>
         }
     }
 
+    handleSelectClick = () => {
+        this.fileInputRef.current?.click();
+    };
+
     handleImageChange = () => {
         if (!this.fileInputRef.current) {
             return;
@@ -234,50 +239,47 @@ export default class BrandImageSetting extends React.PureComponent<Props, State>
         }
 
         return (
-            <div
-                data-testid={this.props.id}
-                className='form-group'
-            >
-                <label className='control-label col-sm-4'>
+            <SettingSet
+                inputId={this.props.id}
+                helpText={
+                    <FormattedMessage
+                        id='admin.team.uploadDesc'
+                        defaultMessage='Customize your user experience by adding a custom image to your login screen. Recommended maximum image size is less than 2 MB.'
+                    />
+                }
+                label={
                     <FormattedMessage
                         id='admin.team.brandImageTitle'
                         defaultMessage='Custom Brand Image:'
                     />
-                </label>
-                <div className='col-sm-8'>
+                }
+                setByEnv={false}
+            >
+                <div>
                     <div className='remove-image'>{img}</div>
                 </div>
-                <div className='col-sm-4'/>
-                <div className='col-sm-8'>
-                    <div className='file__upload mt-5'>
-                        <button
-                            type='button'
-                            className='btn btn-tertiary'
-                            disabled={this.props.disabled}
-                        >
-                            <FormattedMessage
-                                id='admin.team.chooseImage'
-                                defaultMessage='Select Image'
-                            />
-                        </button>
-                        <input
-                            ref={this.fileInputRef}
-                            type='file'
-                            accept={Constants.ACCEPT_STATIC_IMAGE}
-                            disabled={this.props.disabled}
-                            onChange={this.handleImageChange}
-                        />
-                    </div>
-                    <br/>
-                    <FormError error={this.state.error}/>
-                    <p className='help-text m-0'>
+                <div className='file__upload mt-5'>
+                    <button
+                        type='button'
+                        className='btn btn-tertiary'
+                        disabled={this.props.disabled}
+                        onClick={this.handleSelectClick}
+                    >
                         <FormattedMessage
-                            id='admin.team.uploadDesc'
-                            defaultMessage='Customize your user experience by adding a custom image to your login screen. Recommended maximum image size is less than 2 MB.'
+                            id='admin.team.chooseImage'
+                            defaultMessage='Select Image'
                         />
-                    </p>
+                    </button>
+                    <input
+                        ref={this.fileInputRef}
+                        type='file'
+                        accept={Constants.ACCEPT_STATIC_IMAGE}
+                        disabled={this.props.disabled}
+                        onChange={this.handleImageChange}
+                    />
                 </div>
-            </div>
+                <FormError error={this.state.error}/>
+            </SettingSet>
         );
     }
 }
diff --git a/webapp/channels/src/components/admin_console/compliance_reports/compliance_reports.tsx b/webapp/channels/src/components/admin_console/compliance_reports/compliance_reports.tsx
index 5f500b279c..ec9493289d 100644
--- a/webapp/channels/src/components/admin_console/compliance_reports/compliance_reports.tsx
+++ b/webapp/channels/src/components/admin_console/compliance_reports/compliance_reports.tsx
@@ -338,7 +338,7 @@ export default class ComplianceReports extends React.PureComponent<Props, State>
                 </h4>
                 <div className='row'>
                     <div className='col-sm-6 col-md-4 form-group'>
-                        <label>
+                        <label htmlFor='desc'>
                             <FormattedMessage
                                 id='admin.compliance_reports.desc'
                                 defaultMessage='Job Name:'
@@ -354,7 +354,7 @@ export default class ComplianceReports extends React.PureComponent<Props, State>
                         />
                     </div>
                     <div className='col-sm-3 col-md-2 form-group'>
-                        <label>
+                        <label htmlFor='from'>
                             <FormattedMessage
                                 id='admin.compliance_reports.from'
                                 defaultMessage='From:'
@@ -370,7 +370,7 @@ export default class ComplianceReports extends React.PureComponent<Props, State>
                         />
                     </div>
                     <div className='col-sm-3 col-md-2 form-group'>
-                        <label>
+                        <label htmlFor='to'>
                             <FormattedMessage
                                 id='admin.compliance_reports.to'
                                 defaultMessage='To:'
@@ -388,7 +388,7 @@ export default class ComplianceReports extends React.PureComponent<Props, State>
                 </div>
                 <div className='row'>
                     <div className='col-sm-6 col-md-4 form-group'>
-                        <label>
+                        <label htmlFor='emails'>
                             <FormattedMessage
                                 id='admin.compliance_reports.emails'
                                 defaultMessage='Emails:'
@@ -404,7 +404,7 @@ export default class ComplianceReports extends React.PureComponent<Props, State>
                         />
                     </div>
                     <div className='col-sm-6 col-md-4 form-group'>
-                        <label>
+                        <label htmlFor='keywords'>
                             <FormattedMessage
                                 id='admin.compliance_reports.keywords'
                                 defaultMessage='Keywords:'
diff --git a/webapp/channels/src/components/admin_console/database_settings.tsx b/webapp/channels/src/components/admin_console/database_settings.tsx
index 4b6c4c5b84..25564658e0 100644
--- a/webapp/channels/src/components/admin_console/database_settings.tsx
+++ b/webapp/channels/src/components/admin_console/database_settings.tsx
@@ -18,6 +18,7 @@ import MigrationsTable from './database';
 import type {BaseState} from './old_admin_settings';
 import OLDAdminSettings from './old_admin_settings';
 import RequestButton from './request_button/request_button';
+import SettingSet from './setting_set';
 import SettingsGroup from './settings_group';
 import TextSetting from './text_setting';
 
@@ -378,31 +379,29 @@ export default class DatabaseSettings extends OLDAdminSettings<Props, State> {
                     setByEnv={this.isSetByEnv('SqlSettings.DisableDatabaseSearch')}
                     disabled={this.props.isDisabled}
                 />
-                <div className='form-group'>
-                    <label
-                        className='control-label col-sm-4'
-                    >
+                <SettingSet
+                    label={
                         <FormattedMessage
                             id='admin.database.migrations_table.title'
                             defaultMessage='Schema Migrations:'
                         />
-                    </label>
-                    <div className='col-sm-8'>
-                        <div className='migrations-table-setting'>
-                            <MigrationsTable
-                                createHelpText={
-                                    <FormattedMessage
-                                        id='admin.database.migrations_table.help_text'
-                                        defaultMessage='All applied migrations.'
-                                    />
-                                }
-                            />
-                        </div>
+                    }
+                >
+                    <div className='migrations-table-setting'>
+                        <MigrationsTable
+                            createHelpText={
+                                <FormattedMessage
+                                    id='admin.database.migrations_table.help_text'
+                                    defaultMessage='All applied migrations.'
+                                />
+                            }
+                        />
                     </div>
-                </div>
+                </SettingSet>
                 <div className='form-group'>
                     <label
                         className='control-label col-sm-4'
+                        htmlFor='activeSearchBackend'
                     >
                         <FormattedMessage
                             id='admin.database.search_backend.title'
@@ -411,6 +410,7 @@ export default class DatabaseSettings extends OLDAdminSettings<Props, State> {
                     </label>
                     <div className='col-sm-8'>
                         <input
+                            id='activeSearchBackend'
                             type='text'
                             className='form-control'
                             value={this.state.searchBackend}
diff --git a/webapp/channels/src/components/admin_console/elasticsearch_settings.tsx b/webapp/channels/src/components/admin_console/elasticsearch_settings.tsx
index 7cb9d21bd6..1bf248d975 100644
--- a/webapp/channels/src/components/admin_console/elasticsearch_settings.tsx
+++ b/webapp/channels/src/components/admin_console/elasticsearch_settings.tsx
@@ -19,6 +19,7 @@ import JobsTable from './jobs';
 import OLDAdminSettings from './old_admin_settings';
 import type {BaseProps, BaseState} from './old_admin_settings';
 import RequestButton from './request_button/request_button';
+import SettingSet from './setting_set';
 import SettingsGroup from './settings_group';
 import TextSetting from './text_setting';
 
@@ -419,27 +420,24 @@ export default class ElasticsearchSettings extends OLDAdminSettings<Props, State
                     })}
                     disabled={!this.state.enableIndexing}
                 />
-                <div className='form-group'>
-                    <label className='control-label col-sm-4'>
-                        <FormattedMessage {...messages.bulkIndexingTitle}/>
-                    </label>
-                    <div className='col-sm-8'>
-                        <div className='job-table-setting'>
-                            <JobsTable
-                                jobType={JobTypes.ELASTICSEARCH_POST_INDEXING as JobType}
-                                disabled={!this.state.canPurgeAndIndex || this.props.isDisabled!}
-                                createJobButtonText={
-                                    <FormattedMessage
-                                        id='admin.elasticsearch.createJob.title'
-                                        defaultMessage='Index Now'
-                                    />
-                                }
-                                createJobHelpText={<FormattedMessage {...messages.help}/>}
-                                getExtraInfoText={this.getExtraInfo}
-                            />
-                        </div>
+                <SettingSet
+                    label={<FormattedMessage {...messages.bulkIndexingTitle}/>}
+                >
+                    <div className='job-table-setting'>
+                        <JobsTable
+                            jobType={JobTypes.ELASTICSEARCH_POST_INDEXING as JobType}
+                            disabled={!this.state.canPurgeAndIndex || this.props.isDisabled!}
+                            createJobButtonText={
+                                <FormattedMessage
+                                    id='admin.elasticsearch.createJob.title'
+                                    defaultMessage='Index Now'
+                                />
+                            }
+                            createJobHelpText={<FormattedMessage {...messages.help}/>}
+                            getExtraInfoText={this.getExtraInfo}
+                        />
                     </div>
-                </div>
+                </SettingSet>
                 <RequestButton
                     id='rebuildChannelsIndexButton'
                     requestAction={rebuildChannelsIndex}
diff --git a/webapp/channels/src/components/admin_console/group_settings/group_details/__snapshots__/group_profile.test.tsx.snap b/webapp/channels/src/components/admin_console/group_settings/group_details/__snapshots__/group_profile.test.tsx.snap
index 466562ab7f..674738f83d 100644
--- a/webapp/channels/src/components/admin_console/group_settings/group_details/__snapshots__/group_profile.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/group_settings/group_details/__snapshots__/group_profile.test.tsx.snap
@@ -3,12 +3,14 @@
 exports[`components/admin_console/group_settings/group_details/GroupProfile should match snapshot 1`] = `
 <div
   className="group-profile form-horizontal"
+  id="test"
 >
   <div
     className="group-profile-field form-group mb-0"
   >
     <label
       className="control-label col-sm-4"
+      htmlFor="testInput"
     >
       <MemoizedFormattedMessage
         defaultMessage="Name:"
@@ -29,6 +31,7 @@ exports[`components/admin_console/group_settings/group_details/GroupProfile shou
       <input
         className="form-control group-at-mention-input"
         disabled={false}
+        id="testInput"
         type="text"
         value="Test"
       />
diff --git a/webapp/channels/src/components/admin_console/group_settings/group_details/group_profile.test.tsx b/webapp/channels/src/components/admin_console/group_settings/group_details/group_profile.test.tsx
index 8f67c8c56a..d0f1cab495 100644
--- a/webapp/channels/src/components/admin_console/group_settings/group_details/group_profile.test.tsx
+++ b/webapp/channels/src/components/admin_console/group_settings/group_details/group_profile.test.tsx
@@ -10,6 +10,7 @@ describe('components/admin_console/group_settings/group_details/GroupProfile', (
     test('should match snapshot', () => {
         const wrapper = shallow(
             <GroupProfile
+                customID='test'
                 isDisabled={false}
                 name='Test'
                 showAtMention={true}
diff --git a/webapp/channels/src/components/admin_console/group_settings/group_details/group_profile.tsx b/webapp/channels/src/components/admin_console/group_settings/group_details/group_profile.tsx
index 7603ad203d..bc6046c3e4 100644
--- a/webapp/channels/src/components/admin_console/group_settings/group_details/group_profile.tsx
+++ b/webapp/channels/src/components/admin_console/group_settings/group_details/group_profile.tsx
@@ -10,7 +10,7 @@ import MentionsIcon from 'components/widgets/icons/mentions_icon';
 type Props = {
     name?: string;
     title: MessageDescriptor;
-    customID?: string;
+    customID: string;
     isDisabled?: boolean;
     showAtMention: boolean;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
@@ -29,7 +29,10 @@ const GroupProfile = ({
         id={customID}
     >
         <div className='group-profile-field form-group mb-0'>
-            <label className='control-label col-sm-4'>
+            <label
+                className='control-label col-sm-4'
+                htmlFor={customID + 'Input'}
+            >
                 <FormattedMessage {...title}/>
             </label>
             <div className='col-sm-8'>
@@ -42,6 +45,7 @@ const GroupProfile = ({
                     )}
                 </div>
                 <input
+                    id={customID + 'Input'}
                     type='text'
                     className='form-control group-at-mention-input'
                     value={name}
diff --git a/webapp/channels/src/components/admin_console/license_settings/team_edition/team_edition_right_panel.tsx b/webapp/channels/src/components/admin_console/license_settings/team_edition/team_edition_right_panel.tsx
index b4920647fd..4d6ebdd33b 100644
--- a/webapp/channels/src/components/admin_console/license_settings/team_edition/team_edition_right_panel.tsx
+++ b/webapp/channels/src/components/admin_console/license_settings/team_edition/team_edition_right_panel.tsx
@@ -101,13 +101,12 @@ const TeamEditionRightPanel: React.FC<TeamEditionRightPanelProps> = ({
                 {upgradeError && (
                     <div className='upgrade-error'>
                         <div className='form-group has-error'>
-                            <label className='control-label'>
-                                <span
-                                    dangerouslySetInnerHTML={{
-                                        __html: format(upgradeError),
-                                    }}
-                                />
-                            </label>
+                            <div
+                                className='as-bs-label control-label'
+                                dangerouslySetInnerHTML={{
+                                    __html: format(upgradeError),
+                                }}
+                            />
                         </div>
                     </div>
                 )}
@@ -140,17 +139,17 @@ const TeamEditionRightPanel: React.FC<TeamEditionRightPanelProps> = ({
                                 defaultMessage='Restart Server'
                             />
                         </LoadingWrapper>
-                        {restartError && (
-                            <div className='col-sm-12'>
-                                <div className='form-group has-error'>
-                                    <label className='control-label'>
-                                        {restartError}
-                                    </label>
-                                </div>
-                            </div>
-                        )}
                     </button>
                 </p>
+                {restartError && (
+                    <div className='upgrade-error'>
+                        <div className='form-group has-error'>
+                            <div className='as-bs-label control-label'>
+                                {restartError}
+                            </div>
+                        </div>
+                    </div>
+                )}
             </div>
         );
     }
diff --git a/webapp/channels/src/components/admin_console/license_settings/trial_banner/trial_banner.tsx b/webapp/channels/src/components/admin_console/license_settings/trial_banner/trial_banner.tsx
index 6ea566d20b..d769095929 100644
--- a/webapp/channels/src/components/admin_console/license_settings/trial_banner/trial_banner.tsx
+++ b/webapp/channels/src/components/admin_console/license_settings/trial_banner/trial_banner.tsx
@@ -340,22 +340,21 @@ const TrialBanner = ({
                 {upgradeError && (
                     <div className='upgrade-error'>
                         <div className='form-group has-error'>
-                            <label className='control-label'>
-                                <span
-                                    dangerouslySetInnerHTML={{
-                                        __html: format(upgradeError),
-                                    }}
-                                />
-                            </label>
+                            <div
+                                className='as-bs-label control-label'
+                                dangerouslySetInnerHTML={{
+                                    __html: format(upgradeError),
+                                }}
+                            />
                         </div>
                     </div>
                 )}
                 {restartError && (
-                    <div className='col-sm-12'>
+                    <div className='upgrade-error'>
                         <div className='form-group has-error'>
-                            <label className='control-label'>
+                            <div className='as-bs-label control-label'>
                                 {restartError}
-                            </label>
+                            </div>
                         </div>
                     </div>
                 )}
diff --git a/webapp/channels/src/components/admin_console/password_settings.tsx b/webapp/channels/src/components/admin_console/password_settings.tsx
index 3dc5917aa7..a23e4a5487 100644
--- a/webapp/channels/src/components/admin_console/password_settings.tsx
+++ b/webapp/channels/src/components/admin_console/password_settings.tsx
@@ -254,10 +254,9 @@ export default class PasswordSettings extends OLDAdminSettings<Props, State> {
                         </ul>
                         <div>
                             <br/>
-                            <label>
+                            <div className='password-settings__preview-heading'>
                                 <FormattedMessage {...messages.preview}/>
-                            </label>
-                            <br/>
+                            </div>
                             {this.getSampleErrorMsg()}
                         </div>
                     </SettingSet>
diff --git a/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap b/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap
index 330e41427c..2ab6c8423c 100644
--- a/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/plugin_management/__snapshots__/plugin_management.test.tsx.snap
@@ -91,67 +91,59 @@ exports[`components/PluginManagement should match snapshot 1`] = `
             setByEnv={false}
             value={true}
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            helpText={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
+                id="admin.plugin.uploadDesc"
+                values={
+                  Object {
+                    "link": [Function],
+                  }
+                }
+              />
+            }
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Upload Plugin: "
                 id="admin.plugin.uploadTitle"
               />
-            </label>
+            }
+          >
             <div
-              className="col-sm-8"
+              className="file__upload"
             >
-              <div
-                className="file__upload"
-              >
-                <button
-                  className="btn btn-tertiary"
-                  type="button"
-                >
-                  <MemoizedFormattedMessage
-                    defaultMessage="Choose File"
-                    id="admin.plugin.choose"
-                  />
-                </button>
-                <input
-                  accept=".gz"
-                  onChange={[Function]}
-                  type="file"
-                />
-              </div>
               <button
-                className="btn btn-primary"
-                disabled={true}
-                id="uploadPlugin"
+                className="btn btn-tertiary"
                 onClick={[Function]}
+                type="button"
               >
                 <MemoizedFormattedMessage
-                  defaultMessage="Upload"
-                  id="admin.plugin.upload"
+                  defaultMessage="Choose File"
+                  id="admin.plugin.choose"
                 />
               </button>
-              <div
-                className="help-text m-0"
+              <input
+                accept=".gz"
+                onChange={[Function]}
+                type="file"
               />
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
-                  id="admin.plugin.uploadDesc"
-                  values={
-                    Object {
-                      "link": [Function],
-                    }
-                  }
-                />
-              </p>
             </div>
-          </div>
+            <button
+              className="btn btn-primary"
+              disabled={true}
+              id="uploadPlugin"
+              onClick={[Function]}
+            >
+              <MemoizedFormattedMessage
+                defaultMessage="Upload"
+                id="admin.plugin.upload"
+              />
+            </button>
+            <div
+              className="help-text m-0"
+            />
+          </SettingSet>
           <Memo(BooleanSetting)
             disabled={false}
             helpText={
@@ -216,31 +208,24 @@ exports[`components/PluginManagement should match snapshot 1`] = `
             setByEnv={false}
             value="marketplace.example.com"
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Installed Plugins: "
                 id="admin.plugin.installedTitle"
               />
-            </label>
-            <div
-              className="col-sm-8"
+            }
+          >
+            <p
+              className="help-text"
             >
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Installed plugins on your Mattermost server."
-                  id="admin.plugin.installedDesc"
-                />
-              </p>
-              <br />
-            </div>
-          </div>
+              <MemoizedFormattedMessage
+                defaultMessage="Installed plugins on your Mattermost server."
+                id="admin.plugin.installedDesc"
+              />
+            </p>
+            <br />
+          </SettingSet>
         </Memo(SettingsGroup)>
       </div>
     </div>
@@ -367,67 +352,59 @@ exports[`components/PluginManagement should match snapshot when \`Enable Marketp
             setByEnv={false}
             value={true}
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            helpText={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
+                id="admin.plugin.uploadDesc"
+                values={
+                  Object {
+                    "link": [Function],
+                  }
+                }
+              />
+            }
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Upload Plugin: "
                 id="admin.plugin.uploadTitle"
               />
-            </label>
+            }
+          >
             <div
-              className="col-sm-8"
+              className="file__upload"
             >
-              <div
-                className="file__upload"
-              >
-                <button
-                  className="btn btn-tertiary"
-                  type="button"
-                >
-                  <MemoizedFormattedMessage
-                    defaultMessage="Choose File"
-                    id="admin.plugin.choose"
-                  />
-                </button>
-                <input
-                  accept=".gz"
-                  onChange={[Function]}
-                  type="file"
-                />
-              </div>
               <button
-                className="btn btn-primary"
-                disabled={true}
-                id="uploadPlugin"
+                className="btn btn-tertiary"
                 onClick={[Function]}
+                type="button"
               >
                 <MemoizedFormattedMessage
-                  defaultMessage="Upload"
-                  id="admin.plugin.upload"
+                  defaultMessage="Choose File"
+                  id="admin.plugin.choose"
                 />
               </button>
-              <div
-                className="help-text m-0"
+              <input
+                accept=".gz"
+                onChange={[Function]}
+                type="file"
               />
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
-                  id="admin.plugin.uploadDesc"
-                  values={
-                    Object {
-                      "link": [Function],
-                    }
-                  }
-                />
-              </p>
             </div>
-          </div>
+            <button
+              className="btn btn-primary"
+              disabled={true}
+              id="uploadPlugin"
+              onClick={[Function]}
+            >
+              <MemoizedFormattedMessage
+                defaultMessage="Upload"
+                id="admin.plugin.upload"
+              />
+            </button>
+            <div
+              className="help-text m-0"
+            />
+          </SettingSet>
           <Memo(BooleanSetting)
             disabled={false}
             helpText={
@@ -492,31 +469,24 @@ exports[`components/PluginManagement should match snapshot when \`Enable Marketp
             setByEnv={false}
             value="marketplace.example.com"
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Installed Plugins: "
                 id="admin.plugin.installedTitle"
               />
-            </label>
-            <div
-              className="col-sm-8"
+            }
+          >
+            <p
+              className="help-text"
             >
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Installed plugins on your Mattermost server."
-                  id="admin.plugin.installedDesc"
-                />
-              </p>
-              <br />
-            </div>
-          </div>
+              <MemoizedFormattedMessage
+                defaultMessage="Installed plugins on your Mattermost server."
+                id="admin.plugin.installedDesc"
+              />
+            </p>
+            <br />
+          </SettingSet>
         </Memo(SettingsGroup)>
       </div>
     </div>
@@ -577,31 +547,24 @@ exports[`components/PluginManagement should match snapshot when \`Enable Plugins
           container={false}
           id="PluginSettings"
         >
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Installed Plugins: "
                 id="admin.plugin.installedTitle"
               />
-            </label>
-            <div
-              className="col-sm-8"
+            }
+          >
+            <p
+              className="help-text"
             >
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Installed plugins on your Mattermost server."
-                  id="admin.plugin.installedDesc"
-                />
-              </p>
-              <br />
-            </div>
-          </div>
+              <MemoizedFormattedMessage
+                defaultMessage="Installed plugins on your Mattermost server."
+                id="admin.plugin.installedDesc"
+              />
+            </p>
+            <br />
+          </SettingSet>
         </Memo(SettingsGroup)>
       </div>
     </div>
@@ -728,67 +691,59 @@ exports[`components/PluginManagement should match snapshot when \`Enable Remote
             setByEnv={false}
             value={true}
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            helpText={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
+                id="admin.plugin.uploadDesc"
+                values={
+                  Object {
+                    "link": [Function],
+                  }
+                }
+              />
+            }
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Upload Plugin: "
                 id="admin.plugin.uploadTitle"
               />
-            </label>
+            }
+          >
             <div
-              className="col-sm-8"
+              className="file__upload"
             >
-              <div
-                className="file__upload"
-              >
-                <button
-                  className="btn btn-tertiary"
-                  type="button"
-                >
-                  <MemoizedFormattedMessage
-                    defaultMessage="Choose File"
-                    id="admin.plugin.choose"
-                  />
-                </button>
-                <input
-                  accept=".gz"
-                  onChange={[Function]}
-                  type="file"
-                />
-              </div>
               <button
-                className="btn btn-primary"
-                disabled={true}
-                id="uploadPlugin"
+                className="btn btn-tertiary"
                 onClick={[Function]}
+                type="button"
               >
                 <MemoizedFormattedMessage
-                  defaultMessage="Upload"
-                  id="admin.plugin.upload"
+                  defaultMessage="Choose File"
+                  id="admin.plugin.choose"
                 />
               </button>
-              <div
-                className="help-text m-0"
+              <input
+                accept=".gz"
+                onChange={[Function]}
+                type="file"
               />
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
-                  id="admin.plugin.uploadDesc"
-                  values={
-                    Object {
-                      "link": [Function],
-                    }
-                  }
-                />
-              </p>
             </div>
-          </div>
+            <button
+              className="btn btn-primary"
+              disabled={true}
+              id="uploadPlugin"
+              onClick={[Function]}
+            >
+              <MemoizedFormattedMessage
+                defaultMessage="Upload"
+                id="admin.plugin.upload"
+              />
+            </button>
+            <div
+              className="help-text m-0"
+            />
+          </SettingSet>
           <Memo(BooleanSetting)
             disabled={false}
             helpText={
@@ -853,31 +808,24 @@ exports[`components/PluginManagement should match snapshot when \`Enable Remote
             setByEnv={false}
             value="marketplace.example.com"
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Installed Plugins: "
                 id="admin.plugin.installedTitle"
               />
-            </label>
-            <div
-              className="col-sm-8"
+            }
+          >
+            <p
+              className="help-text"
             >
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Installed plugins on your Mattermost server."
-                  id="admin.plugin.installedDesc"
-                />
-              </p>
-              <br />
-            </div>
-          </div>
+              <MemoizedFormattedMessage
+                defaultMessage="Installed plugins on your Mattermost server."
+                id="admin.plugin.installedDesc"
+              />
+            </p>
+            <br />
+          </SettingSet>
         </Memo(SettingsGroup)>
       </div>
     </div>
@@ -1004,69 +952,61 @@ exports[`components/PluginManagement should match snapshot when \`Require Signat
             setByEnv={false}
             value={true}
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            helpText={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
+                id="admin.plugin.uploadDesc"
+                values={
+                  Object {
+                    "link": [Function],
+                  }
+                }
+              />
+            }
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Upload Plugin: "
                 id="admin.plugin.uploadTitle"
               />
-            </label>
+            }
+          >
             <div
-              className="col-sm-8"
+              className="file__upload"
             >
-              <div
-                className="file__upload"
-              >
-                <button
-                  className="btn btn-tertiary"
-                  disabled={true}
-                  type="button"
-                >
-                  <MemoizedFormattedMessage
-                    defaultMessage="Choose File"
-                    id="admin.plugin.choose"
-                  />
-                </button>
-                <input
-                  accept=".gz"
-                  disabled={true}
-                  onChange={[Function]}
-                  type="file"
-                />
-              </div>
               <button
-                className="btn btn-primary"
+                className="btn btn-tertiary"
                 disabled={true}
-                id="uploadPlugin"
                 onClick={[Function]}
+                type="button"
               >
                 <MemoizedFormattedMessage
-                  defaultMessage="Upload"
-                  id="admin.plugin.upload"
+                  defaultMessage="Choose File"
+                  id="admin.plugin.choose"
                 />
               </button>
-              <div
-                className="help-text m-0"
+              <input
+                accept=".gz"
+                disabled={true}
+                onChange={[Function]}
+                type="file"
               />
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
-                  id="admin.plugin.uploadDesc"
-                  values={
-                    Object {
-                      "link": [Function],
-                    }
-                  }
-                />
-              </p>
             </div>
-          </div>
+            <button
+              className="btn btn-primary"
+              disabled={true}
+              id="uploadPlugin"
+              onClick={[Function]}
+            >
+              <MemoizedFormattedMessage
+                defaultMessage="Upload"
+                id="admin.plugin.upload"
+              />
+            </button>
+            <div
+              className="help-text m-0"
+            />
+          </SettingSet>
           <Memo(BooleanSetting)
             disabled={false}
             helpText={
@@ -1131,31 +1071,24 @@ exports[`components/PluginManagement should match snapshot when \`Require Signat
             setByEnv={false}
             value="marketplace.example.com"
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Installed Plugins: "
                 id="admin.plugin.installedTitle"
               />
-            </label>
-            <div
-              className="col-sm-8"
+            }
+          >
+            <p
+              className="help-text"
             >
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Installed plugins on your Mattermost server."
-                  id="admin.plugin.installedDesc"
-                />
-              </p>
-              <br />
-            </div>
-          </div>
+              <MemoizedFormattedMessage
+                defaultMessage="Installed plugins on your Mattermost server."
+                id="admin.plugin.installedDesc"
+              />
+            </p>
+            <br />
+          </SettingSet>
         </Memo(SettingsGroup)>
       </div>
     </div>
@@ -1282,67 +1215,59 @@ exports[`components/PluginManagement should match snapshot, No installed plugins
             setByEnv={false}
             value={true}
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            helpText={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
+                id="admin.plugin.uploadDesc"
+                values={
+                  Object {
+                    "link": [Function],
+                  }
+                }
+              />
+            }
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Upload Plugin: "
                 id="admin.plugin.uploadTitle"
               />
-            </label>
+            }
+          >
             <div
-              className="col-sm-8"
+              className="file__upload"
             >
-              <div
-                className="file__upload"
-              >
-                <button
-                  className="btn btn-tertiary"
-                  type="button"
-                >
-                  <MemoizedFormattedMessage
-                    defaultMessage="Choose File"
-                    id="admin.plugin.choose"
-                  />
-                </button>
-                <input
-                  accept=".gz"
-                  onChange={[Function]}
-                  type="file"
-                />
-              </div>
               <button
-                className="btn btn-primary"
-                disabled={true}
-                id="uploadPlugin"
+                className="btn btn-tertiary"
                 onClick={[Function]}
+                type="button"
               >
                 <MemoizedFormattedMessage
-                  defaultMessage="Upload"
-                  id="admin.plugin.upload"
+                  defaultMessage="Choose File"
+                  id="admin.plugin.choose"
                 />
               </button>
-              <div
-                className="help-text m-0"
+              <input
+                accept=".gz"
+                onChange={[Function]}
+                type="file"
               />
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
-                  id="admin.plugin.uploadDesc"
-                  values={
-                    Object {
-                      "link": [Function],
-                    }
-                  }
-                />
-              </p>
             </div>
-          </div>
+            <button
+              className="btn btn-primary"
+              disabled={true}
+              id="uploadPlugin"
+              onClick={[Function]}
+            >
+              <MemoizedFormattedMessage
+                defaultMessage="Upload"
+                id="admin.plugin.upload"
+              />
+            </button>
+            <div
+              className="help-text m-0"
+            />
+          </SettingSet>
           <Memo(BooleanSetting)
             disabled={false}
             helpText={
@@ -1407,35 +1332,28 @@ exports[`components/PluginManagement should match snapshot, No installed plugins
             setByEnv={false}
             value="marketplace.example.com"
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Installed Plugins: "
                 id="admin.plugin.installedTitle"
               />
-            </label>
-            <div
-              className="col-sm-8"
+            }
+          >
+            <p
+              className="help-text"
             >
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Installed plugins on your Mattermost server."
-                  id="admin.plugin.installedDesc"
-                />
-              </p>
-              <br />
               <MemoizedFormattedMessage
-                defaultMessage="No installed plugins."
-                id="admin.plugin.no_plugins"
+                defaultMessage="Installed plugins on your Mattermost server."
+                id="admin.plugin.installedDesc"
               />
-            </div>
-          </div>
+            </p>
+            <br />
+            <MemoizedFormattedMessage
+              defaultMessage="No installed plugins."
+              id="admin.plugin.no_plugins"
+            />
+          </SettingSet>
         </Memo(SettingsGroup)>
       </div>
     </div>
@@ -1562,67 +1480,59 @@ exports[`components/PluginManagement should match snapshot, allow insecure URL e
             setByEnv={false}
             value={true}
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            helpText={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
+                id="admin.plugin.uploadDesc"
+                values={
+                  Object {
+                    "link": [Function],
+                  }
+                }
+              />
+            }
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Upload Plugin: "
                 id="admin.plugin.uploadTitle"
               />
-            </label>
+            }
+          >
             <div
-              className="col-sm-8"
+              className="file__upload"
             >
-              <div
-                className="file__upload"
-              >
-                <button
-                  className="btn btn-tertiary"
-                  type="button"
-                >
-                  <MemoizedFormattedMessage
-                    defaultMessage="Choose File"
-                    id="admin.plugin.choose"
-                  />
-                </button>
-                <input
-                  accept=".gz"
-                  onChange={[Function]}
-                  type="file"
-                />
-              </div>
               <button
-                className="btn btn-primary"
-                disabled={true}
-                id="uploadPlugin"
+                className="btn btn-tertiary"
                 onClick={[Function]}
+                type="button"
               >
                 <MemoizedFormattedMessage
-                  defaultMessage="Upload"
-                  id="admin.plugin.upload"
+                  defaultMessage="Choose File"
+                  id="admin.plugin.choose"
                 />
               </button>
-              <div
-                className="help-text m-0"
+              <input
+                accept=".gz"
+                onChange={[Function]}
+                type="file"
               />
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
-                  id="admin.plugin.uploadDesc"
-                  values={
-                    Object {
-                      "link": [Function],
-                    }
-                  }
-                />
-              </p>
             </div>
-          </div>
+            <button
+              className="btn btn-primary"
+              disabled={true}
+              id="uploadPlugin"
+              onClick={[Function]}
+            >
+              <MemoizedFormattedMessage
+                defaultMessage="Upload"
+                id="admin.plugin.upload"
+              />
+            </button>
+            <div
+              className="help-text m-0"
+            />
+          </SettingSet>
           <Memo(BooleanSetting)
             disabled={false}
             helpText={
@@ -1687,31 +1597,24 @@ exports[`components/PluginManagement should match snapshot, allow insecure URL e
             setByEnv={false}
             value="marketplace.example.com"
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Installed Plugins: "
                 id="admin.plugin.installedTitle"
               />
-            </label>
-            <div
-              className="col-sm-8"
+            }
+          >
+            <p
+              className="help-text"
             >
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Installed plugins on your Mattermost server."
-                  id="admin.plugin.installedDesc"
-                />
-              </p>
-              <br />
-            </div>
-          </div>
+              <MemoizedFormattedMessage
+                defaultMessage="Installed plugins on your Mattermost server."
+                id="admin.plugin.installedDesc"
+              />
+            </p>
+            <br />
+          </SettingSet>
         </Memo(SettingsGroup)>
       </div>
     </div>
@@ -1838,69 +1741,61 @@ exports[`components/PluginManagement should match snapshot, disabled 1`] = `
             setByEnv={false}
             value={true}
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            helpText={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="To enable plugins, set **Enable Plugins** to true. See <link>documentation</link> to learn more."
+                id="admin.plugin.uploadAndPluginDisabledDesc"
+                values={
+                  Object {
+                    "link": [Function],
+                  }
+                }
+              />
+            }
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Upload Plugin: "
                 id="admin.plugin.uploadTitle"
               />
-            </label>
+            }
+          >
             <div
-              className="col-sm-8"
+              className="file__upload"
             >
-              <div
-                className="file__upload"
-              >
-                <button
-                  className="btn btn-tertiary"
-                  disabled={true}
-                  type="button"
-                >
-                  <MemoizedFormattedMessage
-                    defaultMessage="Choose File"
-                    id="admin.plugin.choose"
-                  />
-                </button>
-                <input
-                  accept=".gz"
-                  disabled={true}
-                  onChange={[Function]}
-                  type="file"
-                />
-              </div>
               <button
-                className="btn btn-primary"
+                className="btn btn-tertiary"
                 disabled={true}
-                id="uploadPlugin"
                 onClick={[Function]}
+                type="button"
               >
                 <MemoizedFormattedMessage
-                  defaultMessage="Upload"
-                  id="admin.plugin.upload"
+                  defaultMessage="Choose File"
+                  id="admin.plugin.choose"
                 />
               </button>
-              <div
-                className="help-text m-0"
+              <input
+                accept=".gz"
+                disabled={true}
+                onChange={[Function]}
+                type="file"
               />
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="To enable plugins, set **Enable Plugins** to true. See <link>documentation</link> to learn more."
-                  id="admin.plugin.uploadAndPluginDisabledDesc"
-                  values={
-                    Object {
-                      "link": [Function],
-                    }
-                  }
-                />
-              </p>
             </div>
-          </div>
+            <button
+              className="btn btn-primary"
+              disabled={true}
+              id="uploadPlugin"
+              onClick={[Function]}
+            >
+              <MemoizedFormattedMessage
+                defaultMessage="Upload"
+                id="admin.plugin.upload"
+              />
+            </button>
+            <div
+              className="help-text m-0"
+            />
+          </SettingSet>
           <Memo(BooleanSetting)
             disabled={true}
             helpText={
@@ -2091,67 +1986,59 @@ exports[`components/PluginManagement should match snapshot, text entered into th
             setByEnv={false}
             value={true}
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            helpText={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
+                id="admin.plugin.uploadDesc"
+                values={
+                  Object {
+                    "link": [Function],
+                  }
+                }
+              />
+            }
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Upload Plugin: "
                 id="admin.plugin.uploadTitle"
               />
-            </label>
+            }
+          >
             <div
-              className="col-sm-8"
+              className="file__upload"
             >
-              <div
-                className="file__upload"
-              >
-                <button
-                  className="btn btn-tertiary"
-                  type="button"
-                >
-                  <MemoizedFormattedMessage
-                    defaultMessage="Choose File"
-                    id="admin.plugin.choose"
-                  />
-                </button>
-                <input
-                  accept=".gz"
-                  onChange={[Function]}
-                  type="file"
-                />
-              </div>
               <button
-                className="btn btn-primary"
-                disabled={true}
-                id="uploadPlugin"
+                className="btn btn-tertiary"
                 onClick={[Function]}
+                type="button"
               >
                 <MemoizedFormattedMessage
-                  defaultMessage="Upload"
-                  id="admin.plugin.upload"
+                  defaultMessage="Choose File"
+                  id="admin.plugin.choose"
                 />
               </button>
-              <div
-                className="help-text m-0"
+              <input
+                accept=".gz"
+                onChange={[Function]}
+                type="file"
               />
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
-                  id="admin.plugin.uploadDesc"
-                  values={
-                    Object {
-                      "link": [Function],
-                    }
-                  }
-                />
-              </p>
             </div>
-          </div>
+            <button
+              className="btn btn-primary"
+              disabled={true}
+              id="uploadPlugin"
+              onClick={[Function]}
+            >
+              <MemoizedFormattedMessage
+                defaultMessage="Upload"
+                id="admin.plugin.upload"
+              />
+            </button>
+            <div
+              className="help-text m-0"
+            />
+          </SettingSet>
           <Memo(BooleanSetting)
             disabled={false}
             helpText={
@@ -2216,31 +2103,24 @@ exports[`components/PluginManagement should match snapshot, text entered into th
             setByEnv={false}
             value="marketplace.example.com"
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Installed Plugins: "
                 id="admin.plugin.installedTitle"
               />
-            </label>
-            <div
-              className="col-sm-8"
+            }
+          >
+            <p
+              className="help-text"
             >
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Installed plugins on your Mattermost server."
-                  id="admin.plugin.installedDesc"
-                />
-              </p>
-              <br />
-            </div>
-          </div>
+              <MemoizedFormattedMessage
+                defaultMessage="Installed plugins on your Mattermost server."
+                id="admin.plugin.installedDesc"
+              />
+            </p>
+            <br />
+          </SettingSet>
         </Memo(SettingsGroup)>
       </div>
     </div>
@@ -2367,69 +2247,61 @@ exports[`components/PluginManagement should match snapshot, upload disabled 1`]
             setByEnv={false}
             value={true}
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            helpText={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Enable plugin uploads in config.json. See <link>documentation</link> to learn more."
+                id="admin.plugin.uploadDisabledDesc"
+                values={
+                  Object {
+                    "link": [Function],
+                  }
+                }
+              />
+            }
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Upload Plugin: "
                 id="admin.plugin.uploadTitle"
               />
-            </label>
+            }
+          >
             <div
-              className="col-sm-8"
+              className="file__upload"
             >
-              <div
-                className="file__upload"
-              >
-                <button
-                  className="btn"
-                  disabled={true}
-                  type="button"
-                >
-                  <MemoizedFormattedMessage
-                    defaultMessage="Choose File"
-                    id="admin.plugin.choose"
-                  />
-                </button>
-                <input
-                  accept=".gz"
-                  disabled={true}
-                  onChange={[Function]}
-                  type="file"
-                />
-              </div>
               <button
-                className="btn btn-primary"
+                className="btn"
                 disabled={true}
-                id="uploadPlugin"
                 onClick={[Function]}
+                type="button"
               >
                 <MemoizedFormattedMessage
-                  defaultMessage="Upload"
-                  id="admin.plugin.upload"
+                  defaultMessage="Choose File"
+                  id="admin.plugin.choose"
                 />
               </button>
-              <div
-                className="help-text m-0"
+              <input
+                accept=".gz"
+                disabled={true}
+                onChange={[Function]}
+                type="file"
               />
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Enable plugin uploads in config.json. See <link>documentation</link> to learn more."
-                  id="admin.plugin.uploadDisabledDesc"
-                  values={
-                    Object {
-                      "link": [Function],
-                    }
-                  }
-                />
-              </p>
             </div>
-          </div>
+            <button
+              className="btn btn-primary"
+              disabled={true}
+              id="uploadPlugin"
+              onClick={[Function]}
+            >
+              <MemoizedFormattedMessage
+                defaultMessage="Upload"
+                id="admin.plugin.upload"
+              />
+            </button>
+            <div
+              className="help-text m-0"
+            />
+          </SettingSet>
           <Memo(BooleanSetting)
             disabled={false}
             helpText={
@@ -2499,31 +2371,24 @@ exports[`components/PluginManagement should match snapshot, upload disabled 1`]
             setByEnv={false}
             value="marketplace.example.com"
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Installed Plugins: "
                 id="admin.plugin.installedTitle"
               />
-            </label>
-            <div
-              className="col-sm-8"
+            }
+          >
+            <p
+              className="help-text"
             >
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Installed plugins on your Mattermost server."
-                  id="admin.plugin.installedDesc"
-                />
-              </p>
-              <br />
-            </div>
-          </div>
+              <MemoizedFormattedMessage
+                defaultMessage="Installed plugins on your Mattermost server."
+                id="admin.plugin.installedDesc"
+              />
+            </p>
+            <br />
+          </SettingSet>
         </Memo(SettingsGroup)>
       </div>
     </div>
@@ -2650,67 +2515,59 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
             setByEnv={false}
             value={true}
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            helpText={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
+                id="admin.plugin.uploadDesc"
+                values={
+                  Object {
+                    "link": [Function],
+                  }
+                }
+              />
+            }
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Upload Plugin: "
                 id="admin.plugin.uploadTitle"
               />
-            </label>
+            }
+          >
             <div
-              className="col-sm-8"
+              className="file__upload"
             >
-              <div
-                className="file__upload"
-              >
-                <button
-                  className="btn btn-tertiary"
-                  type="button"
-                >
-                  <MemoizedFormattedMessage
-                    defaultMessage="Choose File"
-                    id="admin.plugin.choose"
-                  />
-                </button>
-                <input
-                  accept=".gz"
-                  onChange={[Function]}
-                  type="file"
-                />
-              </div>
               <button
-                className="btn btn-primary"
-                disabled={true}
-                id="uploadPlugin"
+                className="btn btn-tertiary"
                 onClick={[Function]}
+                type="button"
               >
                 <MemoizedFormattedMessage
-                  defaultMessage="Upload"
-                  id="admin.plugin.upload"
+                  defaultMessage="Choose File"
+                  id="admin.plugin.choose"
                 />
               </button>
-              <div
-                className="help-text m-0"
+              <input
+                accept=".gz"
+                onChange={[Function]}
+                type="file"
               />
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
-                  id="admin.plugin.uploadDesc"
-                  values={
-                    Object {
-                      "link": [Function],
-                    }
-                  }
-                />
-              </p>
             </div>
-          </div>
+            <button
+              className="btn btn-primary"
+              disabled={true}
+              id="uploadPlugin"
+              onClick={[Function]}
+            >
+              <MemoizedFormattedMessage
+                defaultMessage="Upload"
+                id="admin.plugin.upload"
+              />
+            </button>
+            <div
+              className="help-text m-0"
+            />
+          </SettingSet>
           <Memo(BooleanSetting)
             disabled={false}
             helpText={
@@ -2775,94 +2632,87 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
             setByEnv={false}
             value="marketplace.example.com"
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Installed Plugins: "
                 id="admin.plugin.installedTitle"
               />
-            </label>
-            <div
-              className="col-sm-8"
+            }
+          >
+            <p
+              className="help-text"
             >
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Installed plugins on your Mattermost server."
-                  id="admin.plugin.installedDesc"
-                />
-              </p>
-              <br />
-              <div
-                className="alert alert-transparent"
-              >
-                <PluginItem
-                  appsFeatureFlagEnabled={false}
-                  handleDisable={[Function]}
-                  handleEnable={[Function]}
-                  handleRemove={[Function]}
-                  hasSettings={true}
-                  key="plugin_0"
-                  pluginStatus={
-                    Object {
-                      "active": false,
-                      "description": "The plugin 0.",
-                      "id": "plugin_0",
-                      "instances": Array [
-                        Object {
-                          "cluster_id": "cluster_id_1",
-                          "state": 0,
-                          "version": "0.1.0",
-                        },
-                      ],
-                      "name": "Plugin 0",
-                      "state": 0,
-                      "version": "0.1.0",
-                    }
+              <MemoizedFormattedMessage
+                defaultMessage="Installed plugins on your Mattermost server."
+                id="admin.plugin.installedDesc"
+              />
+            </p>
+            <br />
+            <div
+              className="alert alert-transparent"
+            >
+              <PluginItem
+                appsFeatureFlagEnabled={false}
+                handleDisable={[Function]}
+                handleEnable={[Function]}
+                handleRemove={[Function]}
+                hasSettings={true}
+                key="plugin_0"
+                pluginStatus={
+                  Object {
+                    "active": false,
+                    "description": "The plugin 0.",
+                    "id": "plugin_0",
+                    "instances": Array [
+                      Object {
+                        "cluster_id": "cluster_id_1",
+                        "state": 0,
+                        "version": "0.1.0",
+                      },
+                    ],
+                    "name": "Plugin 0",
+                    "state": 0,
+                    "version": "0.1.0",
                   }
-                  removing={false}
-                  showInstances={true}
-                />
-                <PluginItem
-                  appsFeatureFlagEnabled={false}
-                  handleDisable={[Function]}
-                  handleEnable={[Function]}
-                  handleRemove={[Function]}
-                  hasSettings={true}
-                  key="plugin_1"
-                  pluginStatus={
-                    Object {
-                      "active": true,
-                      "description": "The plugin.",
-                      "id": "plugin_1",
-                      "instances": Array [
-                        Object {
-                          "cluster_id": "cluster_id_1",
-                          "state": 0,
-                          "version": "0.0.1",
-                        },
-                        Object {
-                          "cluster_id": "cluster_id_2",
-                          "state": 2,
-                          "version": "0.0.2",
-                        },
-                      ],
-                      "name": "Plugin 1",
-                      "state": 5,
-                      "version": "0.0.1",
-                    }
+                }
+                removing={false}
+                showInstances={true}
+              />
+              <PluginItem
+                appsFeatureFlagEnabled={false}
+                handleDisable={[Function]}
+                handleEnable={[Function]}
+                handleRemove={[Function]}
+                hasSettings={true}
+                key="plugin_1"
+                pluginStatus={
+                  Object {
+                    "active": true,
+                    "description": "The plugin.",
+                    "id": "plugin_1",
+                    "instances": Array [
+                      Object {
+                        "cluster_id": "cluster_id_1",
+                        "state": 0,
+                        "version": "0.0.1",
+                      },
+                      Object {
+                        "cluster_id": "cluster_id_2",
+                        "state": 2,
+                        "version": "0.0.2",
+                      },
+                    ],
+                    "name": "Plugin 1",
+                    "state": 5,
+                    "version": "0.0.1",
                   }
-                  removing={false}
-                  showInstances={true}
-                />
-              </div>
+                }
+                removing={false}
+                showInstances={true}
+              />
             </div>
-          </div>
+          </SettingSet>
         </Memo(SettingsGroup)>
       </div>
     </div>
@@ -2989,67 +2839,59 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
             setByEnv={false}
             value={true}
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            helpText={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
+                id="admin.plugin.uploadDesc"
+                values={
+                  Object {
+                    "link": [Function],
+                  }
+                }
+              />
+            }
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Upload Plugin: "
                 id="admin.plugin.uploadTitle"
               />
-            </label>
+            }
+          >
             <div
-              className="col-sm-8"
+              className="file__upload"
             >
-              <div
-                className="file__upload"
-              >
-                <button
-                  className="btn btn-tertiary"
-                  type="button"
-                >
-                  <MemoizedFormattedMessage
-                    defaultMessage="Choose File"
-                    id="admin.plugin.choose"
-                  />
-                </button>
-                <input
-                  accept=".gz"
-                  onChange={[Function]}
-                  type="file"
-                />
-              </div>
               <button
-                className="btn btn-primary"
-                disabled={true}
-                id="uploadPlugin"
+                className="btn btn-tertiary"
                 onClick={[Function]}
+                type="button"
               >
                 <MemoizedFormattedMessage
-                  defaultMessage="Upload"
-                  id="admin.plugin.upload"
+                  defaultMessage="Choose File"
+                  id="admin.plugin.choose"
                 />
               </button>
-              <div
-                className="help-text m-0"
+              <input
+                accept=".gz"
+                onChange={[Function]}
+                type="file"
               />
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
-                  id="admin.plugin.uploadDesc"
-                  values={
-                    Object {
-                      "link": [Function],
-                    }
-                  }
-                />
-              </p>
             </div>
-          </div>
+            <button
+              className="btn btn-primary"
+              disabled={true}
+              id="uploadPlugin"
+              onClick={[Function]}
+            >
+              <MemoizedFormattedMessage
+                defaultMessage="Upload"
+                id="admin.plugin.upload"
+              />
+            </button>
+            <div
+              className="help-text m-0"
+            />
+          </SettingSet>
           <Memo(BooleanSetting)
             disabled={false}
             helpText={
@@ -3114,62 +2956,55 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
             setByEnv={false}
             value="marketplace.example.com"
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Installed Plugins: "
                 id="admin.plugin.installedTitle"
               />
-            </label>
-            <div
-              className="col-sm-8"
+            }
+          >
+            <p
+              className="help-text"
             >
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Installed plugins on your Mattermost server."
-                  id="admin.plugin.installedDesc"
-                />
-              </p>
-              <br />
-              <div
-                className="alert alert-transparent"
-              >
-                <PluginItem
-                  appsFeatureFlagEnabled={false}
-                  handleDisable={[Function]}
-                  handleEnable={[Function]}
-                  handleRemove={[Function]}
-                  hasSettings={true}
-                  key="plugin_0"
-                  pluginStatus={
-                    Object {
-                      "active": false,
-                      "description": "The plugin 0.",
-                      "id": "plugin_0",
-                      "instances": Array [
-                        Object {
-                          "cluster_id": "cluster_id_1",
-                          "state": 0,
-                          "version": "0.1.0",
-                        },
-                      ],
-                      "name": "Plugin 0",
-                      "state": 0,
-                      "version": "0.1.0",
-                    }
+              <MemoizedFormattedMessage
+                defaultMessage="Installed plugins on your Mattermost server."
+                id="admin.plugin.installedDesc"
+              />
+            </p>
+            <br />
+            <div
+              className="alert alert-transparent"
+            >
+              <PluginItem
+                appsFeatureFlagEnabled={false}
+                handleDisable={[Function]}
+                handleEnable={[Function]}
+                handleRemove={[Function]}
+                hasSettings={true}
+                key="plugin_0"
+                pluginStatus={
+                  Object {
+                    "active": false,
+                    "description": "The plugin 0.",
+                    "id": "plugin_0",
+                    "instances": Array [
+                      Object {
+                        "cluster_id": "cluster_id_1",
+                        "state": 0,
+                        "version": "0.1.0",
+                      },
+                    ],
+                    "name": "Plugin 0",
+                    "state": 0,
+                    "version": "0.1.0",
                   }
-                  removing={false}
-                  showInstances={false}
-                />
-              </div>
+                }
+                removing={false}
+                showInstances={false}
+              />
             </div>
-          </div>
+          </SettingSet>
         </Memo(SettingsGroup)>
       </div>
     </div>
@@ -3296,67 +3131,59 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
             setByEnv={false}
             value={true}
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            helpText={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
+                id="admin.plugin.uploadDesc"
+                values={
+                  Object {
+                    "link": [Function],
+                  }
+                }
+              />
+            }
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Upload Plugin: "
                 id="admin.plugin.uploadTitle"
               />
-            </label>
+            }
+          >
             <div
-              className="col-sm-8"
+              className="file__upload"
             >
-              <div
-                className="file__upload"
-              >
-                <button
-                  className="btn btn-tertiary"
-                  type="button"
-                >
-                  <MemoizedFormattedMessage
-                    defaultMessage="Choose File"
-                    id="admin.plugin.choose"
-                  />
-                </button>
-                <input
-                  accept=".gz"
-                  onChange={[Function]}
-                  type="file"
-                />
-              </div>
               <button
-                className="btn btn-primary"
-                disabled={true}
-                id="uploadPlugin"
+                className="btn btn-tertiary"
                 onClick={[Function]}
+                type="button"
               >
                 <MemoizedFormattedMessage
-                  defaultMessage="Upload"
-                  id="admin.plugin.upload"
+                  defaultMessage="Choose File"
+                  id="admin.plugin.choose"
                 />
               </button>
-              <div
-                className="help-text m-0"
+              <input
+                accept=".gz"
+                onChange={[Function]}
+                type="file"
               />
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
-                  id="admin.plugin.uploadDesc"
-                  values={
-                    Object {
-                      "link": [Function],
-                    }
-                  }
-                />
-              </p>
             </div>
-          </div>
+            <button
+              className="btn btn-primary"
+              disabled={true}
+              id="uploadPlugin"
+              onClick={[Function]}
+            >
+              <MemoizedFormattedMessage
+                defaultMessage="Upload"
+                id="admin.plugin.upload"
+              />
+            </button>
+            <div
+              className="help-text m-0"
+            />
+          </SettingSet>
           <Memo(BooleanSetting)
             disabled={false}
             helpText={
@@ -3421,62 +3248,55 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
             setByEnv={false}
             value="marketplace.example.com"
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Installed Plugins: "
                 id="admin.plugin.installedTitle"
               />
-            </label>
-            <div
-              className="col-sm-8"
+            }
+          >
+            <p
+              className="help-text"
             >
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Installed plugins on your Mattermost server."
-                  id="admin.plugin.installedDesc"
-                />
-              </p>
-              <br />
-              <div
-                className="alert alert-transparent"
-              >
-                <PluginItem
-                  appsFeatureFlagEnabled={false}
-                  handleDisable={[Function]}
-                  handleEnable={[Function]}
-                  handleRemove={[Function]}
-                  hasSettings={true}
-                  key="plugin_0"
-                  pluginStatus={
-                    Object {
-                      "active": false,
-                      "description": "The plugin 0.",
-                      "id": "plugin_0",
-                      "instances": Array [
-                        Object {
-                          "cluster_id": "cluster_id_1",
-                          "state": 0,
-                          "version": "0.1.0",
-                        },
-                      ],
-                      "name": "Plugin 0",
-                      "state": 0,
-                      "version": "0.1.0",
-                    }
+              <MemoizedFormattedMessage
+                defaultMessage="Installed plugins on your Mattermost server."
+                id="admin.plugin.installedDesc"
+              />
+            </p>
+            <br />
+            <div
+              className="alert alert-transparent"
+            >
+              <PluginItem
+                appsFeatureFlagEnabled={false}
+                handleDisable={[Function]}
+                handleEnable={[Function]}
+                handleRemove={[Function]}
+                hasSettings={true}
+                key="plugin_0"
+                pluginStatus={
+                  Object {
+                    "active": false,
+                    "description": "The plugin 0.",
+                    "id": "plugin_0",
+                    "instances": Array [
+                      Object {
+                        "cluster_id": "cluster_id_1",
+                        "state": 0,
+                        "version": "0.1.0",
+                      },
+                    ],
+                    "name": "Plugin 0",
+                    "state": 0,
+                    "version": "0.1.0",
                   }
-                  removing={false}
-                  showInstances={false}
-                />
-              </div>
+                }
+                removing={false}
+                showInstances={false}
+              />
             </div>
-          </div>
+          </SettingSet>
         </Memo(SettingsGroup)>
       </div>
     </div>
@@ -3603,67 +3423,59 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
             setByEnv={false}
             value={true}
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            helpText={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
+                id="admin.plugin.uploadDesc"
+                values={
+                  Object {
+                    "link": [Function],
+                  }
+                }
+              />
+            }
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Upload Plugin: "
                 id="admin.plugin.uploadTitle"
               />
-            </label>
+            }
+          >
             <div
-              className="col-sm-8"
+              className="file__upload"
             >
-              <div
-                className="file__upload"
-              >
-                <button
-                  className="btn btn-tertiary"
-                  type="button"
-                >
-                  <MemoizedFormattedMessage
-                    defaultMessage="Choose File"
-                    id="admin.plugin.choose"
-                  />
-                </button>
-                <input
-                  accept=".gz"
-                  onChange={[Function]}
-                  type="file"
-                />
-              </div>
               <button
-                className="btn btn-primary"
-                disabled={true}
-                id="uploadPlugin"
+                className="btn btn-tertiary"
                 onClick={[Function]}
+                type="button"
               >
                 <MemoizedFormattedMessage
-                  defaultMessage="Upload"
-                  id="admin.plugin.upload"
+                  defaultMessage="Choose File"
+                  id="admin.plugin.choose"
                 />
               </button>
-              <div
-                className="help-text m-0"
+              <input
+                accept=".gz"
+                onChange={[Function]}
+                type="file"
               />
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
-                  id="admin.plugin.uploadDesc"
-                  values={
-                    Object {
-                      "link": [Function],
-                    }
-                  }
-                />
-              </p>
             </div>
-          </div>
+            <button
+              className="btn btn-primary"
+              disabled={true}
+              id="uploadPlugin"
+              onClick={[Function]}
+            >
+              <MemoizedFormattedMessage
+                defaultMessage="Upload"
+                id="admin.plugin.upload"
+              />
+            </button>
+            <div
+              className="help-text m-0"
+            />
+          </SettingSet>
           <Memo(BooleanSetting)
             disabled={false}
             helpText={
@@ -3728,62 +3540,55 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
             setByEnv={false}
             value="marketplace.example.com"
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Installed Plugins: "
                 id="admin.plugin.installedTitle"
               />
-            </label>
-            <div
-              className="col-sm-8"
+            }
+          >
+            <p
+              className="help-text"
             >
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Installed plugins on your Mattermost server."
-                  id="admin.plugin.installedDesc"
-                />
-              </p>
-              <br />
-              <div
-                className="alert alert-transparent"
-              >
-                <PluginItem
-                  appsFeatureFlagEnabled={false}
-                  handleDisable={[Function]}
-                  handleEnable={[Function]}
-                  handleRemove={[Function]}
-                  hasSettings={true}
-                  key="plugin_0"
-                  pluginStatus={
-                    Object {
-                      "active": false,
-                      "description": "The plugin 0.",
-                      "id": "plugin_0",
-                      "instances": Array [
-                        Object {
-                          "cluster_id": "cluster_id_1",
-                          "state": 0,
-                          "version": "0.1.0",
-                        },
-                      ],
-                      "name": "Plugin 0",
-                      "state": 0,
-                      "version": "0.1.0",
-                    }
+              <MemoizedFormattedMessage
+                defaultMessage="Installed plugins on your Mattermost server."
+                id="admin.plugin.installedDesc"
+              />
+            </p>
+            <br />
+            <div
+              className="alert alert-transparent"
+            >
+              <PluginItem
+                appsFeatureFlagEnabled={false}
+                handleDisable={[Function]}
+                handleEnable={[Function]}
+                handleRemove={[Function]}
+                hasSettings={true}
+                key="plugin_0"
+                pluginStatus={
+                  Object {
+                    "active": false,
+                    "description": "The plugin 0.",
+                    "id": "plugin_0",
+                    "instances": Array [
+                      Object {
+                        "cluster_id": "cluster_id_1",
+                        "state": 0,
+                        "version": "0.1.0",
+                      },
+                    ],
+                    "name": "Plugin 0",
+                    "state": 0,
+                    "version": "0.1.0",
                   }
-                  removing={false}
-                  showInstances={false}
-                />
-              </div>
+                }
+                removing={false}
+                showInstances={false}
+              />
             </div>
-          </div>
+          </SettingSet>
         </Memo(SettingsGroup)>
       </div>
     </div>
@@ -3910,67 +3715,59 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
             setByEnv={false}
             value={true}
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            helpText={
+              <Memo(MemoizedFormattedMessage)
+                defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
+                id="admin.plugin.uploadDesc"
+                values={
+                  Object {
+                    "link": [Function],
+                  }
+                }
+              />
+            }
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Upload Plugin: "
                 id="admin.plugin.uploadTitle"
               />
-            </label>
+            }
+          >
             <div
-              className="col-sm-8"
+              className="file__upload"
             >
-              <div
-                className="file__upload"
-              >
-                <button
-                  className="btn btn-tertiary"
-                  type="button"
-                >
-                  <MemoizedFormattedMessage
-                    defaultMessage="Choose File"
-                    id="admin.plugin.choose"
-                  />
-                </button>
-                <input
-                  accept=".gz"
-                  onChange={[Function]}
-                  type="file"
-                />
-              </div>
               <button
-                className="btn btn-primary"
-                disabled={true}
-                id="uploadPlugin"
+                className="btn btn-tertiary"
                 onClick={[Function]}
+                type="button"
               >
                 <MemoizedFormattedMessage
-                  defaultMessage="Upload"
-                  id="admin.plugin.upload"
+                  defaultMessage="Choose File"
+                  id="admin.plugin.choose"
                 />
               </button>
-              <div
-                className="help-text m-0"
+              <input
+                accept=".gz"
+                onChange={[Function]}
+                type="file"
               />
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Upload a plugin for your Mattermost server. See <link>documentation</link> to learn more."
-                  id="admin.plugin.uploadDesc"
-                  values={
-                    Object {
-                      "link": [Function],
-                    }
-                  }
-                />
-              </p>
             </div>
-          </div>
+            <button
+              className="btn btn-primary"
+              disabled={true}
+              id="uploadPlugin"
+              onClick={[Function]}
+            >
+              <MemoizedFormattedMessage
+                defaultMessage="Upload"
+                id="admin.plugin.upload"
+              />
+            </button>
+            <div
+              className="help-text m-0"
+            />
+          </SettingSet>
           <Memo(BooleanSetting)
             disabled={false}
             helpText={
@@ -4035,94 +3832,87 @@ exports[`components/PluginManagement should match snapshot, with installed plugi
             setByEnv={false}
             value="marketplace.example.com"
           />
-          <div
-            className="form-group"
-          >
-            <label
-              className="control-label col-sm-4"
-            >
-              <MemoizedFormattedMessage
+          <SettingSet
+            label={
+              <Memo(MemoizedFormattedMessage)
                 defaultMessage="Installed Plugins: "
                 id="admin.plugin.installedTitle"
               />
-            </label>
-            <div
-              className="col-sm-8"
+            }
+          >
+            <p
+              className="help-text"
             >
-              <p
-                className="help-text"
-              >
-                <MemoizedFormattedMessage
-                  defaultMessage="Installed plugins on your Mattermost server."
-                  id="admin.plugin.installedDesc"
-                />
-              </p>
-              <br />
-              <div
-                className="alert alert-transparent"
-              >
-                <PluginItem
-                  appsFeatureFlagEnabled={false}
-                  handleDisable={[Function]}
-                  handleEnable={[Function]}
-                  handleRemove={[Function]}
-                  hasSettings={false}
-                  key="plugin_0"
-                  pluginStatus={
-                    Object {
-                      "active": false,
-                      "description": "The plugin 0.",
-                      "id": "plugin_0",
-                      "instances": Array [
-                        Object {
-                          "cluster_id": "cluster_id_1",
-                          "state": 0,
-                          "version": "0.1.0",
-                        },
-                      ],
-                      "name": "Plugin 0",
-                      "state": 0,
-                      "version": "0.1.0",
-                    }
+              <MemoizedFormattedMessage
+                defaultMessage="Installed plugins on your Mattermost server."
+                id="admin.plugin.installedDesc"
+              />
+            </p>
+            <br />
+            <div
+              className="alert alert-transparent"
+            >
+              <PluginItem
+                appsFeatureFlagEnabled={false}
+                handleDisable={[Function]}
+                handleEnable={[Function]}
+                handleRemove={[Function]}
+                hasSettings={false}
+                key="plugin_0"
+                pluginStatus={
+                  Object {
+                    "active": false,
+                    "description": "The plugin 0.",
+                    "id": "plugin_0",
+                    "instances": Array [
+                      Object {
+                        "cluster_id": "cluster_id_1",
+                        "state": 0,
+                        "version": "0.1.0",
+                      },
+                    ],
+                    "name": "Plugin 0",
+                    "state": 0,
+                    "version": "0.1.0",
                   }
-                  removing={false}
-                  showInstances={true}
-                />
-                <PluginItem
-                  appsFeatureFlagEnabled={false}
-                  handleDisable={[Function]}
-                  handleEnable={[Function]}
-                  handleRemove={[Function]}
-                  hasSettings={false}
-                  key="plugin_1"
-                  pluginStatus={
-                    Object {
-                      "active": true,
-                      "description": "The plugin.",
-                      "id": "plugin_1",
-                      "instances": Array [
-                        Object {
-                          "cluster_id": "cluster_id_1",
-                          "state": 0,
-                          "version": "0.0.1",
-                        },
-                        Object {
-                          "cluster_id": "cluster_id_2",
-                          "state": 2,
-                          "version": "0.0.2",
-                        },
-                      ],
-                      "name": "Plugin 1",
-                      "state": 5,
-                      "version": "0.0.1",
-                    }
+                }
+                removing={false}
+                showInstances={true}
+              />
+              <PluginItem
+                appsFeatureFlagEnabled={false}
+                handleDisable={[Function]}
+                handleEnable={[Function]}
+                handleRemove={[Function]}
+                hasSettings={false}
+                key="plugin_1"
+                pluginStatus={
+                  Object {
+                    "active": true,
+                    "description": "The plugin.",
+                    "id": "plugin_1",
+                    "instances": Array [
+                      Object {
+                        "cluster_id": "cluster_id_1",
+                        "state": 0,
+                        "version": "0.0.1",
+                      },
+                      Object {
+                        "cluster_id": "cluster_id_2",
+                        "state": 2,
+                        "version": "0.0.2",
+                      },
+                    ],
+                    "name": "Plugin 1",
+                    "state": 5,
+                    "version": "0.0.1",
                   }
-                  removing={false}
-                  showInstances={true}
-                />
-              </div>
+                }
+                removing={false}
+                showInstances={true}
+              />
             </div>
-          </div>
+          </SettingSet>
         </Memo(SettingsGroup)>
       </div>
     </div>
diff --git a/webapp/channels/src/components/admin_console/plugin_management/plugin_management.tsx b/webapp/channels/src/components/admin_console/plugin_management/plugin_management.tsx
index 03b95eb461..34ffe0fdf1 100644
--- a/webapp/channels/src/components/admin_console/plugin_management/plugin_management.tsx
+++ b/webapp/channels/src/components/admin_console/plugin_management/plugin_management.tsx
@@ -24,6 +24,7 @@ import * as Utils from 'utils/utils';
 import BooleanSetting from '../boolean_setting';
 import OLDAdminSettings from '../old_admin_settings';
 import type {BaseProps, BaseState} from '../old_admin_settings';
+import SettingSet from '../setting_set';
 import SettingsGroup from '../settings_group';
 import TextSetting from '../text_setting';
 
@@ -556,6 +557,10 @@ class PluginManagement extends OLDAdminSettings<Props, State> {
         }
     }
 
+    handleChooseFileClick = () => {
+        this.fileInput.current?.click();
+    };
+
     handleUpload = () => {
         this.setState({lastMessage: null, serverError: null});
         const element = this.fileInput.current as HTMLInputElement;
@@ -1018,18 +1023,15 @@ class PluginManagement extends OLDAdminSettings<Props, State> {
 
         if (enable) {
             pluginsContainer = (
-                <div className='form-group'>
-                    <label className='control-label col-sm-4'>
-                        <FormattedMessage {...messages.installedTitle}/>
-                    </label>
-                    <div className='col-sm-8'>
-                        <p className='help-text'>
-                            <FormattedMessage {...messages.installedDesc}/>
-                        </p>
-                        <br/>
-                        {pluginsListContainer}
-                    </div>
-                </div>
+                <SettingSet
+                    label={<FormattedMessage {...messages.installedTitle}/>}
+                >
+                    <p className='help-text'>
+                        <FormattedMessage {...messages.installedDesc}/>
+                    </p>
+                    <br/>
+                    {pluginsListContainer}
+                </SettingSet>
             );
         }
 
@@ -1147,48 +1149,44 @@ class PluginManagement extends OLDAdminSettings<Props, State> {
                                     onChange={this.handleChange}
                                     setByEnv={this.isSetByEnv('PluginSettings.AutomaticPrepackagedPlugins')}
                                 />
-                                <div className='form-group'>
-                                    <label className='control-label col-sm-4'>
-                                        <FormattedMessage {...messages.uploadTitle}/>
-                                    </label>
-                                    <div className='col-sm-8'>
-                                        <div className='file__upload'>
-                                            <button
-                                                type='button'
-                                                className={classNames(['btn', {'btn-tertiary': enableUploads}])}
-                                                disabled={!enableUploadButton || this.props.isDisabled}
-                                            >
-                                                <FormattedMessage
-                                                    id='admin.plugin.choose'
-                                                    defaultMessage='Choose File'
-                                                />
-                                            </button>
-                                            <input
-                                                ref={this.fileInput}
-                                                type='file'
-                                                accept='.gz'
-                                                onChange={this.handleUpload}
-                                                disabled={!enableUploadButton || this.props.isDisabled}
-                                            />
-                                        </div>
+                                <SettingSet
+                                    helpText={uploadHelpText}
+                                    label={<FormattedMessage {...messages.uploadTitle}/>}
+                                >
+                                    <div className='file__upload'>
                                         <button
-                                            className={btnClass}
-                                            id='uploadPlugin'
-                                            disabled={!this.state.fileSelected}
-                                            onClick={this.handleSubmitUpload}
+                                            type='button'
+                                            className={classNames(['btn', {'btn-tertiary': enableUploads}])}
+                                            onClick={this.handleChooseFileClick}
+                                            disabled={!enableUploadButton || this.props.isDisabled}
                                         >
-                                            {uploadButtonText}
+                                            <FormattedMessage
+                                                id='admin.plugin.choose'
+                                                defaultMessage='Choose File'
+                                            />
                                         </button>
-                                        <div className='help-text m-0'>
-                                            {fileName}
-                                        </div>
-                                        {serverError}
-                                        {lastMessage}
-                                        <p className='help-text'>
-                                            {uploadHelpText}
-                                        </p>
+                                        <input
+                                            ref={this.fileInput}
+                                            type='file'
+                                            accept='.gz'
+                                            onChange={this.handleUpload}
+                                            disabled={!enableUploadButton || this.props.isDisabled}
+                                        />
                                     </div>
-                                </div>
+                                    <button
+                                        className={btnClass}
+                                        id='uploadPlugin'
+                                        disabled={!this.state.fileSelected}
+                                        onClick={this.handleSubmitUpload}
+                                    >
+                                        {uploadButtonText}
+                                    </button>
+                                    <div className='help-text m-0'>
+                                        {fileName}
+                                    </div>
+                                    {serverError}
+                                    {lastMessage}
+                                </SettingSet>
                                 <BooleanSetting
                                     id='enableMarketplace'
                                     label={<FormattedMessage {...messages.enableMarketplace}/>}
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/channel/details/__snapshots__/channel_moderation.test.tsx.snap b/webapp/channels/src/components/admin_console/team_channel_settings/channel/details/__snapshots__/channel_moderation.test.tsx.snap
index fb0d6efc03..b1b1fc96ea 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/channel/details/__snapshots__/channel_moderation.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/team_channel_settings/channel/details/__snapshots__/channel_moderation.test.tsx.snap
@@ -259,14 +259,15 @@ exports[`admin_console/team_channel_settings/channel/ChannelModeration Should ma
 exports[`admin_console/team_channel_settings/channel/ChannelModeration Should match second Snapshot 1`] = `
 <tr>
   <td>
-    <label
+    <div
+      className="as-bs-label"
       data-testid="admin-channel_settings-channel_moderation-createPosts"
     >
       <MemoizedFormattedMessage
         defaultMessage="Create Posts"
         id="admin.channel_settings.channel_moderation.createPosts"
       />
-    </label>
+    </div>
     <div
       data-testid="admin-channel_settings-channel_moderation-createPostsDesc"
     >
@@ -303,14 +304,15 @@ exports[`admin_console/team_channel_settings/channel/ChannelModeration Should ma
 exports[`admin_console/team_channel_settings/channel/ChannelModeration Should match seventh Snapshot 1`] = `
 <tr>
   <td>
-    <label
+    <div
+      className="as-bs-label"
       data-testid="admin-channel_settings-channel_moderation-createPosts"
     >
       <MemoizedFormattedMessage
         defaultMessage="Create Posts"
         id="admin.channel_settings.channel_moderation.createPosts"
       />
-    </label>
+    </div>
     <div
       data-testid="admin-channel_settings-channel_moderation-createPostsDesc"
     >
diff --git a/webapp/channels/src/components/admin_console/team_channel_settings/channel/details/channel_moderation.tsx b/webapp/channels/src/components/admin_console/team_channel_settings/channel/details/channel_moderation.tsx
index 68d445cc51..96bb8657aa 100644
--- a/webapp/channels/src/components/admin_console/team_channel_settings/channel/details/channel_moderation.tsx
+++ b/webapp/channels/src/components/admin_console/team_channel_settings/channel/details/channel_moderation.tsx
@@ -275,14 +275,15 @@ export const ChannelModerationTableRow = (props: ChannelModerationTableRow) => {
     return (
         <tr>
             <td>
-                <label
+                <div
+                    className='as-bs-label'
                     data-testid={channelModerationPermissionMessages?.title?.id?.replace(PERIOD_TO_SLASH_REGEX, '-')}
                 >
                     <FormattedMessage
                         id={channelModerationPermissionMessages?.title?.id}
                         defaultMessage={channelModerationPermissionMessages?.title?.defaultMessage}
                     />
-                </label>
+                </div>
                 <div
                     data-testid={channelModerationPermissionMessages?.description?.id?.replace(PERIOD_TO_SLASH_REGEX, '-')}
                 >
diff --git a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss
index 21e8b24aa2..8bf4fd31d9 100644
--- a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss
+++ b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.scss
@@ -196,11 +196,6 @@
         .post-error {
             margin: 4px 0 0 0;
             color: var(--error-text);
-
-            label {
-                margin: 0;
-                color: var(--error-text);
-            }
         }
     }
 
diff --git a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx
index e9980f5c80..fadc606e38 100644
--- a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx
+++ b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx
@@ -699,9 +699,9 @@ const AdvancedTextEditor = ({
                 className='AdvancedTextEditor__footer'
             >
                 {postError && (
-                    <label className={classNames('post-error', {errorClass})}>
+                    <div className={classNames('post-error', {errorClass})}>
                         {postError}
-                    </label>
+                    </div>
                 )}
                 {serverError && (
                     <MessageSubmitError
diff --git a/webapp/channels/src/components/integrations/bots/bot.tsx b/webapp/channels/src/components/integrations/bots/bot.tsx
index 4aac96d177..4db4b15897 100644
--- a/webapp/channels/src/components/integrations/bots/bot.tsx
+++ b/webapp/channels/src/components/integrations/bots/bot.tsx
@@ -366,7 +366,10 @@ export default class Bot extends React.PureComponent<Props, State> {
                             onSubmit={this.handleCreateToken}
                         >
                             <div className='row'>
-                                <label className='col-sm-auto control-label'>
+                                <label
+                                    className='col-sm-auto control-label'
+                                    htmlFor='botToken'
+                                >
                                     <FormattedMessage
                                         id='user.settings.tokens.name'
                                         defaultMessage='Token Description: '
@@ -374,6 +377,7 @@ export default class Bot extends React.PureComponent<Props, State> {
                                 </label>
                                 <div className='col-sm-4'>
                                     <input
+                                        id='botToken'
                                         autoFocus={true}
                                         className='form-control form-sm'
                                         type='text'
diff --git a/webapp/channels/src/components/message_submit_error.tsx b/webapp/channels/src/components/message_submit_error.tsx
index 43958dc818..bcbcc8b9f3 100644
--- a/webapp/channels/src/components/message_submit_error.tsx
+++ b/webapp/channels/src/components/message_submit_error.tsx
@@ -21,7 +21,7 @@ function MessageSubmitError(props: Props) {
 
         return (
             <div className='has-error'>
-                <label className='control-label'>
+                <div className='control-label'>
                     <FormattedMessage
                         id='message_submit_error.invalidCommand'
                         defaultMessage="Command with a trigger of ''{slashCommand}'' not found. "
@@ -31,6 +31,7 @@ function MessageSubmitError(props: Props) {
                     />
                     <a
                         href='#'
+                        role='button'
                         onClick={props.handleSubmit}
                     >
                         <FormattedMessage
@@ -38,7 +39,7 @@ function MessageSubmitError(props: Props) {
                             defaultMessage='Click here to send as a message.'
                         />
                     </a>
-                </label>
+                </div>
             </div>
         );
     }
diff --git a/webapp/channels/src/components/rename_channel_modal/__snapshots__/rename_channel_modal.test.tsx.snap b/webapp/channels/src/components/rename_channel_modal/__snapshots__/rename_channel_modal.test.tsx.snap
index 660502cee2..4c54b9820b 100644
--- a/webapp/channels/src/components/rename_channel_modal/__snapshots__/rename_channel_modal.test.tsx.snap
+++ b/webapp/channels/src/components/rename_channel_modal/__snapshots__/rename_channel_modal.test.tsx.snap
@@ -59,6 +59,7 @@ exports[`components/RenameChannelModal should match snapshot 1`] = `
       >
         <label
           className="control-label"
+          htmlFor="display_name"
         >
           <MemoizedFormattedMessage
             defaultMessage="Display Name"
@@ -81,6 +82,7 @@ exports[`components/RenameChannelModal should match snapshot 1`] = `
       >
         <label
           className="control-label"
+          htmlFor="channel_name"
         >
           URL
         </label>
diff --git a/webapp/channels/src/components/rename_channel_modal/rename_channel_modal.tsx b/webapp/channels/src/components/rename_channel_modal/rename_channel_modal.tsx
index 45b5772d74..b3e80c1606 100644
--- a/webapp/channels/src/components/rename_channel_modal/rename_channel_modal.tsx
+++ b/webapp/channels/src/components/rename_channel_modal/rename_channel_modal.tsx
@@ -241,7 +241,7 @@ export class RenameChannelModal extends React.PureComponent<Props, State> {
 
         let serverError = null;
         if (this.state.serverError) {
-            serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
+            serverError = <div className='form-group has-error'><div className='as-bs-label control-label'>{this.state.serverError}</div></div>;
         }
 
         const {formatMessage} = this.props.intl;
@@ -280,7 +280,10 @@ export class RenameChannelModal extends React.PureComponent<Props, State> {
                 <form role='form'>
                     <Modal.Body>
                         <div className='form-group'>
-                            <label className='control-label'>
+                            <label
+                                className='control-label'
+                                htmlFor='display_name'
+                            >
                                 <FormattedMessage
                                     id='rename_channel.displayName'
                                     defaultMessage='Display Name'
@@ -303,7 +306,12 @@ export class RenameChannelModal extends React.PureComponent<Props, State> {
                             {displayNameError}
                         </div>
                         <div className='form-group'>
-                            <label className='control-label'>{urlInputLabel}</label>
+                            <label
+                                className='control-label'
+                                htmlFor='channel_name'
+                            >
+                                {urlInputLabel}
+                            </label>
 
                             <div className={urlInputClass}>
                                 <WithTooltip
diff --git a/webapp/channels/src/components/select_team/__snapshots__/select_team.test.tsx.snap b/webapp/channels/src/components/select_team/__snapshots__/select_team.test.tsx.snap
index 8b1e3a5f1b..f2465ed41d 100644
--- a/webapp/channels/src/components/select_team/__snapshots__/select_team.test.tsx.snap
+++ b/webapp/channels/src/components/select_team/__snapshots__/select_team.test.tsx.snap
@@ -233,11 +233,11 @@ exports[`components/select_team/SelectTeam should match snapshot, on error 1`] =
         <div
           className="form-group has-error"
         >
-          <label
+          <div
             className="control-label"
           >
             <Component />
-          </label>
+          </div>
         </div>
       </div>
       <Memo(SystemPermissionGate)
@@ -535,14 +535,14 @@ exports[`components/select_team/SelectTeam should match snapshot, on no joinable
         <div
           className="form-group has-error"
         >
-          <label
+          <div
             className="control-label"
           >
             <MemoizedFormattedMessage
               defaultMessage="Your guest account has no channels assigned. Please contact an administrator."
               id="signup_team.guest_without_channels"
             />
-          </label>
+          </div>
         </div>
       </div>
       <Memo(SystemPermissionGate)
diff --git a/webapp/channels/src/components/select_team/select_team.tsx b/webapp/channels/src/components/select_team/select_team.tsx
index d3c3e36df8..877273c44b 100644
--- a/webapp/channels/src/components/select_team/select_team.tsx
+++ b/webapp/channels/src/components/select_team/select_team.tsx
@@ -201,7 +201,7 @@ export default class SelectTeam extends React.PureComponent<Props, State> {
             openContent = (
                 <div className='signup__content'>
                     <div className={'form-group has-error'}>
-                        <label className='control-label'>{this.state.error}</label>
+                        <div className='control-label'>{this.state.error}</div>
                     </div>
                 </div>
             );
@@ -209,12 +209,12 @@ export default class SelectTeam extends React.PureComponent<Props, State> {
             openContent = (
                 <div className='signup__content'>
                     <div className={'form-group has-error'}>
-                        <label className='control-label'>
+                        <div className='control-label'>
                             <FormattedMessage
                                 id='signup_team.guest_without_channels'
                                 defaultMessage='Your guest account has no channels assigned. Please contact an administrator.'
                             />
-                        </label>
+                        </div>
                     </div>
                 </div>
             );
diff --git a/webapp/channels/src/components/user_settings/display/manage_languages/manage_languages.tsx b/webapp/channels/src/components/user_settings/display/manage_languages/manage_languages.tsx
index b46c3fab39..41f4b5f75f 100644
--- a/webapp/channels/src/components/user_settings/display/manage_languages/manage_languages.tsx
+++ b/webapp/channels/src/components/user_settings/display/manage_languages/manage_languages.tsx
@@ -198,6 +198,7 @@ export class ManageLanguage extends React.PureComponent<Props, State> {
                     aria-label={interfaceLanguageLabelAria}
                     className='control-label'
                     id='changeInterfaceLanguageLabel'
+                    htmlFor='displayLanguage'
                 >
                     <FormattedMessage
                         id='user.settings.languages.change'
diff --git a/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/__snapshots__/custom_theme_chooser.test.tsx.snap b/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/__snapshots__/custom_theme_chooser.test.tsx.snap
index df4ccade85..de04fa45a9 100644
--- a/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/__snapshots__/custom_theme_chooser.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/__snapshots__/custom_theme_chooser.test.tsx.snap
@@ -385,6 +385,7 @@ exports[`components/user_settings/display/CustomThemeChooser should match, init
       >
         <label
           className="custom-label"
+          htmlFor="codeThemeSelect"
         >
           <MemoizedFormattedMessage
             defaultMessage="Code Theme"
@@ -538,6 +539,7 @@ exports[`components/user_settings/display/CustomThemeChooser should match, init
     >
       <label
         className="custom-label"
+        htmlFor="pasteBox"
       >
         <MemoizedFormattedMessage
           defaultMessage="Copy to share or paste theme colors here:"
diff --git a/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/custom_theme_chooser.tsx b/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/custom_theme_chooser.tsx
index 8bd531ce18..9b91570bf2 100644
--- a/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/custom_theme_chooser.tsx
+++ b/webapp/channels/src/components/user_settings/display/user_settings_theme/custom_theme_chooser/custom_theme_chooser.tsx
@@ -312,7 +312,10 @@ export class CustomThemeChooser extends React.PureComponent<Props, State> {
                         className='col-sm-6 form-group'
                         key={'custom-theme-key' + index}
                     >
-                        <label className='custom-label'>
+                        <label
+                            className='custom-label'
+                            htmlFor='codeThemeSelect'
+                        >
                             <FormattedMessage {...messages[element.id]}/>
                         </label>
                         <div
@@ -403,7 +406,10 @@ export class CustomThemeChooser extends React.PureComponent<Props, State> {
 
         const pasteBox = (
             <div className='col-sm-12'>
-                <label className='custom-label'>
+                <label
+                    className='custom-label'
+                    htmlFor='pasteBox'
+                >
                     <FormattedMessage
                         id='user.settings.custom_theme.copyPaste'
                         defaultMessage='Copy to share or paste theme colors here:'
diff --git a/webapp/channels/src/components/user_settings/general/user_settings_general.tsx b/webapp/channels/src/components/user_settings/general/user_settings_general.tsx
index 942311f943..cb19506fc9 100644
--- a/webapp/channels/src/components/user_settings/general/user_settings_general.tsx
+++ b/webapp/channels/src/components/user_settings/general/user_settings_general.tsx
@@ -494,14 +494,14 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
                 inputs.push(
                     <div key='currentEmailSetting'>
                         <div className='form-group'>
-                            <label className='col-sm-5 control-label'>
+                            <span className='as-bs-label col-sm-5 control-label'>
                                 <FormattedMessage
                                     id='user.settings.general.currentEmail'
                                     defaultMessage='Current Email'
                                 />
-                            </label>
+                            </span>
                             <div className='col-sm-7'>
-                                <label className='control-label word-break--all text-left'>{this.state.originalEmail}</label>
+                                <span className='as-bs-label control-label word-break--all text-left'>{this.state.originalEmail}</span>
                             </div>
                         </div>
                     </div>,
@@ -510,7 +510,10 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
                 inputs.push(
                     <div key='emailSetting'>
                         <div className='form-group'>
-                            <label className='col-sm-5 control-label'>
+                            <label
+                                className='col-sm-5 control-label'
+                                htmlFor='primaryEmail'
+                            >
                                 <FormattedMessage
                                     id='user.settings.general.newEmail'
                                     defaultMessage='New Email'
@@ -535,7 +538,10 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
                 inputs.push(
                     <div key='confirmEmailSetting'>
                         <div className='form-group'>
-                            <label className='col-sm-5 control-label'>
+                            <label
+                                className='col-sm-5 control-label'
+                                htmlFor='confirmEmail'
+                            >
                                 <FormattedMessage
                                     id='user.settings.general.confirmEmail'
                                     defaultMessage='Confirm Email'
@@ -559,7 +565,10 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
                 inputs.push(
                     <div key='currentPassword'>
                         <div className='form-group'>
-                            <label className='col-sm-5 control-label'>
+                            <label
+                                className='col-sm-5 control-label'
+                                htmlFor='currentPassword'
+                            >
                                 <FormattedMessage
                                     id='user.settings.general.currentPassword'
                                     defaultMessage='Current Password'
@@ -813,7 +822,10 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
                         key='firstNameSetting'
                         className='form-group'
                     >
-                        <label className='col-sm-5 control-label'>
+                        <label
+                            className='col-sm-5 control-label'
+                            htmlFor='firstName'
+                        >
                             <FormattedMessage
                                 id='user.settings.general.firstName'
                                 defaultMessage='First Name'
@@ -840,7 +852,10 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
                         key='lastNameSetting'
                         className='form-group'
                     >
-                        <label className='col-sm-5 control-label'>
+                        <label
+                            className='col-sm-5 control-label'
+                            htmlFor='lastName'
+                        >
                             <FormattedMessage
                                 id='user.settings.general.lastName'
                                 defaultMessage='Last Name'
diff --git a/webapp/channels/src/components/user_settings/security/user_access_token_section/user_access_token_section.tsx b/webapp/channels/src/components/user_settings/security/user_access_token_section/user_access_token_section.tsx
index 2c10e25b40..cc6918ec06 100644
--- a/webapp/channels/src/components/user_settings/security/user_access_token_section/user_access_token_section.tsx
+++ b/webapp/channels/src/components/user_settings/security/user_access_token_section/user_access_token_section.tsx
@@ -518,7 +518,10 @@ export default class UserAccessTokenSection extends React.PureComponent<Props, S
             newTokenSection = (
                 <div className='pl-3'>
                     <div className='row'>
-                        <label className='col-sm-auto control-label pr-3'>
+                        <label
+                            className='col-sm-auto control-label pr-3'
+                            htmlFor='newTokenDescription'
+                        >
                             <FormattedMessage
                                 id='user.settings.tokens.name'
                                 defaultMessage='Token Description: '
@@ -526,6 +529,7 @@ export default class UserAccessTokenSection extends React.PureComponent<Props, S
                         </label>
                         <div className='col-sm-5'>
                             <input
+                                id='newTokenDescription'
                                 autoFocus={true}
                                 ref={this.newtokendescriptionRef}
                                 className='form-control'
diff --git a/webapp/channels/src/components/user_settings/security/user_settings_security.tsx b/webapp/channels/src/components/user_settings/security/user_settings_security.tsx
index fe4b2ce472..4e03196573 100644
--- a/webapp/channels/src/components/user_settings/security/user_settings_security.tsx
+++ b/webapp/channels/src/components/user_settings/security/user_settings_security.tsx
@@ -258,7 +258,10 @@ export class SecurityTab extends React.PureComponent<Props, State> {
                         key='currentPasswordUpdateForm'
                         className='form-group'
                     >
-                        <label className='col-sm-5 control-label'>
+                        <label
+                            className='col-sm-5 control-label'
+                            htmlFor='currentPassword'
+                        >
                             <FormattedMessage
                                 id='user.settings.security.currentPassword'
                                 defaultMessage='Current Password'
@@ -285,7 +288,10 @@ export class SecurityTab extends React.PureComponent<Props, State> {
                         key='newPasswordUpdateForm'
                         className='form-group'
                     >
-                        <label className='col-sm-5 control-label'>
+                        <label
+                            className='col-sm-5 control-label'
+                            htmlFor='newPassword'
+                        >
                             <FormattedMessage
                                 id='user.settings.security.newPassword'
                                 defaultMessage='New Password'
@@ -311,7 +317,10 @@ export class SecurityTab extends React.PureComponent<Props, State> {
                         key='retypeNewPasswordUpdateForm'
                         className='form-group'
                     >
-                        <label className='col-sm-5 control-label'>
+                        <label
+                            className='col-sm-5 control-label'
+                            htmlFor='confirmPassword'
+                        >
                             <FormattedMessage
                                 id='user.settings.security.retypePassword'
                                 defaultMessage='Retype New Password'
diff --git a/webapp/channels/src/sass/components/_modal.scss b/webapp/channels/src/sass/components/_modal.scss
index ecc4b9368e..7802c22f94 100644
--- a/webapp/channels/src/sass/components/_modal.scss
+++ b/webapp/channels/src/sass/components/_modal.scss
@@ -117,11 +117,10 @@
 }
 
 .modal__error {
+    display: inline-block;
     margin-top: 6px;
     color: variables.$red;
-    float: left;
     font-size: 0.95em;
-    font-weight: normal;
 }
 
 .more-table {
diff --git a/webapp/channels/src/sass/routes/_admin-console.scss b/webapp/channels/src/sass/routes/_admin-console.scss
index a44c9f2f5d..f7d4c0c32a 100644
--- a/webapp/channels/src/sass/routes/_admin-console.scss
+++ b/webapp/channels/src/sass/routes/_admin-console.scss
@@ -239,24 +239,12 @@
         }
 
         .file__upload {
-            position: relative;
             display: inline-block;
+            width: fit-content;
             margin: 0 10px 10px 0;
 
             input {
-                position: absolute;
-                z-index: 5;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                padding-left: 100%;
-                cursor: pointer;
-                opacity: 0;
-
-                &[disabled] {
-                    cursor: not-allowed;
-                }
+                display: none;
             }
         }
 
@@ -1089,6 +1077,12 @@
     margin-bottom: 20px;
 }
 
+.password-settings__preview-heading {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: 600;
+}
+
 #error-tooltip {
     .tooltip-inner {
         max-width: none;
diff --git a/webapp/channels/src/sass/routes/_settings.scss b/webapp/channels/src/sass/routes/_settings.scss
index 4e70ea137d..cc63bcb9cc 100644
--- a/webapp/channels/src/sass/routes/_settings.scss
+++ b/webapp/channels/src/sass/routes/_settings.scss
@@ -813,3 +813,10 @@
         color: rgba(var(--center-channel-color-rgb), 0.4);
     }
 }
+
+.as-bs-label {
+    display: inline-block;
+    max-width: 100%;
+    margin-bottom: 5px;
+    font-weight: 700;
+}
diff --git a/webapp/channels/src/sass/routes/_signup.scss b/webapp/channels/src/sass/routes/_signup.scss
index 46d13fbd88..f01ff2c7cc 100644
--- a/webapp/channels/src/sass/routes/_signup.scss
+++ b/webapp/channels/src/sass/routes/_signup.scss
@@ -283,6 +283,7 @@ body {
         }
 
         .control-label {
+            display: block;
             width: 100%;
             padding: 0.7em 1em;
             border-radius: 3px;
@@ -290,7 +291,6 @@ body {
             background: #f2f2f2;
             color: #999;
             font-size: 14px;
-            font-weight: normal;
 
             &::before {
                 @extend %font-awesome;
diff --git a/webapp/platform/eslint-plugin/configs/.eslintrc-react.json b/webapp/platform/eslint-plugin/configs/.eslintrc-react.json
index fc8c464c79..2385fb45e2 100644
--- a/webapp/platform/eslint-plugin/configs/.eslintrc-react.json
+++ b/webapp/platform/eslint-plugin/configs/.eslintrc-react.json
@@ -29,7 +29,7 @@
     "jsx-a11y/iframe-has-title": "warn",
     "jsx-a11y/img-redundant-alt": "warn",
     "jsx-a11y/interactive-supports-focus": "warn",
-    "jsx-a11y/label-has-associated-control": "warn",
+    "jsx-a11y/label-has-associated-control": "error",
     "jsx-a11y/media-has-caption": "warn",
     "jsx-a11y/mouse-events-have-key-events": "warn",
     "jsx-a11y/no-access-key": "error",