diff --git a/e2e-tests/playwright/specs/visual/common/landing_page.spec.ts-snapshots/landing-page-visual-check-chrome-linux.png b/e2e-tests/playwright/specs/visual/common/landing_page.spec.ts-snapshots/landing-page-visual-check-chrome-linux.png
new file mode 100644
index 00000000000..ae60e414a2c
Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/landing_page.spec.ts-snapshots/landing-page-visual-check-chrome-linux.png differ
diff --git a/e2e-tests/playwright/specs/visual/common/landing_page.spec.ts-snapshots/landing-page-visual-check-firefox-linux.png b/e2e-tests/playwright/specs/visual/common/landing_page.spec.ts-snapshots/landing-page-visual-check-firefox-linux.png
new file mode 100644
index 00000000000..3b537137903
Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/landing_page.spec.ts-snapshots/landing-page-visual-check-firefox-linux.png differ
diff --git a/e2e-tests/playwright/specs/visual/common/landing_page.spec.ts-snapshots/landing-page-visual-check-ipad-linux.png b/e2e-tests/playwright/specs/visual/common/landing_page.spec.ts-snapshots/landing-page-visual-check-ipad-linux.png
new file mode 100644
index 00000000000..2698604dd0e
Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/landing_page.spec.ts-snapshots/landing-page-visual-check-ipad-linux.png differ
diff --git a/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-error-free-edition-chrome-linux.png b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-error-free-edition-chrome-linux.png
new file mode 100644
index 00000000000..46003bb8724
Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-error-free-edition-chrome-linux.png differ
diff --git a/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-error-free-edition-firefox-linux.png b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-error-free-edition-firefox-linux.png
new file mode 100644
index 00000000000..9c6498a7fe7
Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-error-free-edition-firefox-linux.png differ
diff --git a/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-error-free-edition-ipad-linux.png b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-error-free-edition-ipad-linux.png
new file mode 100644
index 00000000000..982b6f27f91
Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-error-free-edition-ipad-linux.png differ
diff --git a/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-free-edition-chrome-linux.png b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-free-edition-chrome-linux.png
new file mode 100644
index 00000000000..4a20fe2adef
Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-free-edition-chrome-linux.png differ
diff --git a/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-free-edition-firefox-linux.png b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-free-edition-firefox-linux.png
new file mode 100644
index 00000000000..b2436b83592
Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-free-edition-firefox-linux.png differ
diff --git a/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-free-edition-ipad-linux.png b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-free-edition-ipad-linux.png
new file mode 100644
index 00000000000..95dcafb9828
Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/login.spec.ts-snapshots/login-page-visual-check-free-edition-ipad-linux.png differ
diff --git a/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-error-free-edition-chrome-linux.png b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-error-free-edition-chrome-linux.png
new file mode 100644
index 00000000000..4146be5c00a
Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-error-free-edition-chrome-linux.png differ
diff --git a/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-error-free-edition-firefox-linux.png b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-error-free-edition-firefox-linux.png
new file mode 100644
index 00000000000..6ca39b8e248
Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-error-free-edition-firefox-linux.png differ
diff --git a/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-error-free-edition-ipad-linux.png b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-error-free-edition-ipad-linux.png
new file mode 100644
index 00000000000..96e8aac1bce
Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-error-free-edition-ipad-linux.png differ
diff --git a/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-free-edition-chrome-linux.png b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-free-edition-chrome-linux.png
new file mode 100644
index 00000000000..8b496903eb5
Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-free-edition-chrome-linux.png differ
diff --git a/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-free-edition-firefox-linux.png b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-free-edition-firefox-linux.png
new file mode 100644
index 00000000000..d0f5a3c1619
Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-free-edition-firefox-linux.png differ
diff --git a/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-free-edition-ipad-linux.png b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-free-edition-ipad-linux.png
new file mode 100644
index 00000000000..f116cbbc1b6
Binary files /dev/null and b/e2e-tests/playwright/specs/visual/common/signup_email.spec.ts-snapshots/signup-page-visual-check-free-edition-ipad-linux.png differ
diff --git a/webapp/channels/src/components/channel_info_rhs/header.tsx b/webapp/channels/src/components/channel_info_rhs/header.tsx
index 8533a16ae04..0f09aad73b8 100644
--- a/webapp/channels/src/components/channel_info_rhs/header.tsx
+++ b/webapp/channels/src/components/channel_info_rhs/header.tsx
@@ -41,23 +41,25 @@ const Header = ({channel, isArchived, isMobile, onClose}: Props) => {
                         />
                     </button>
                 )}
-                <HeaderTitle
-                    id='rhsPanelTitle'
-                >
-                    <FormattedMessage
-                        id='channel_info_rhs.header.title'
-                        defaultMessage='Info'
-                    />
-                </HeaderTitle>
+                <h2>
+                    <HeaderTitle
+                        id='rhsPanelTitle'
+                    >
+                        <FormattedMessage
+                            id='channel_info_rhs.header.title'
+                            defaultMessage='Info'
+                        />
+                    </HeaderTitle>
 
-                {channel.display_name &&
-                <span
-                    className='style--none sidebar--right__title__subtitle'
-                >
-                    {isArchived && (<Icon className='icon icon-archive-outline'/>)}
-                    {channel.display_name}
-                </span>
-                }
+                    {channel.display_name &&
+                    <span
+                        className='style--none sidebar--right__title__subtitle'
+                    >
+                        {isArchived && (<Icon className='icon icon-archive-outline'/>)}
+                        {channel.display_name}
+                    </span>
+                    }
+                </h2>
             </span>
 
             <WithTooltip
diff --git a/webapp/channels/src/components/channel_members_rhs/header.tsx b/webapp/channels/src/components/channel_members_rhs/header.tsx
index 47d4749b324..40aa73d4759 100644
--- a/webapp/channels/src/components/channel_members_rhs/header.tsx
+++ b/webapp/channels/src/components/channel_members_rhs/header.tsx
@@ -39,23 +39,24 @@ const Header = ({channel, canGoBack, onClose, goBack}: Props) => {
                         />
                     </button>
                 )}
+                <h2>
+                    <HeaderTitle
+                        id='rhsPanelTitle'
+                    >
+                        <FormattedMessage
+                            id='channel_members_rhs.header.title'
+                            defaultMessage='Members'
+                        />
+                    </HeaderTitle>
 
-                <HeaderTitle
-                    id='rhsPanelTitle'
-                >
-                    <FormattedMessage
-                        id='channel_members_rhs.header.title'
-                        defaultMessage='Members'
-                    />
-                </HeaderTitle>
-
-                {channel.display_name &&
+                    {channel.display_name &&
                     <span
                         className='style--none sidebar--right__title__subtitle'
                     >
                         {channel.display_name}
                     </span>
-                }
+                    }
+                </h2>
             </span>
 
             <WithTooltip
diff --git a/webapp/channels/src/components/channel_notifications_modal/__snapshots__/channel_notifications_modal.test.tsx.snap b/webapp/channels/src/components/channel_notifications_modal/__snapshots__/channel_notifications_modal.test.tsx.snap
index 33db0673286..1c00dd33232 100644
--- a/webapp/channels/src/components/channel_notifications_modal/__snapshots__/channel_notifications_modal.test.tsx.snap
+++ b/webapp/channels/src/components/channel_notifications_modal/__snapshots__/channel_notifications_modal.test.tsx.snap
@@ -53,20 +53,22 @@ Object {
                       <header
                         class="mm-modal-header"
                       >
-                        <h1
+                        <h2
                           class="mm-modal-header__title"
                           id="mm-modal-header-channelNotificationModalLabel"
                         >
-                          Notification Preferences
-                        </h1>
-                        <div
-                          class="mm-modal-header__vertical-divider"
-                        />
-                        <p
-                          class="mm-modal-header__subtitle"
-                        >
-                          channel_display_name
-                        </p>
+                          <span>
+                            Notification Preferences
+                          </span>
+                          <span
+                            class="mm-modal-header__vertical-divider"
+                          />
+                          <span
+                            class="mm-modal-header__subtitle"
+                          >
+                            channel_display_name
+                          </span>
+                        </h2>
                       </header>
                     </h1>
                   </div>
@@ -535,20 +537,22 @@ Object {
                       <header
                         class="mm-modal-header"
                       >
-                        <h1
+                        <h2
                           class="mm-modal-header__title"
                           id="mm-modal-header-channelNotificationModalLabel"
                         >
-                          Notification Preferences
-                        </h1>
-                        <div
-                          class="mm-modal-header__vertical-divider"
-                        />
-                        <p
-                          class="mm-modal-header__subtitle"
-                        >
-                          channel_display_name
-                        </p>
+                          <span>
+                            Notification Preferences
+                          </span>
+                          <span
+                            class="mm-modal-header__vertical-divider"
+                          />
+                          <span
+                            class="mm-modal-header__subtitle"
+                          >
+                            channel_display_name
+                          </span>
+                        </h2>
                       </header>
                     </h1>
                   </div>
@@ -1177,20 +1181,22 @@ Object {
                       <header
                         class="mm-modal-header"
                       >
-                        <h1
+                        <h2
                           class="mm-modal-header__title"
                           id="mm-modal-header-channelNotificationModalLabel"
                         >
-                          Notification Preferences
-                        </h1>
-                        <div
-                          class="mm-modal-header__vertical-divider"
-                        />
-                        <p
-                          class="mm-modal-header__subtitle"
-                        >
-                          channel_display_name
-                        </p>
+                          <span>
+                            Notification Preferences
+                          </span>
+                          <span
+                            class="mm-modal-header__vertical-divider"
+                          />
+                          <span
+                            class="mm-modal-header__subtitle"
+                          >
+                            channel_display_name
+                          </span>
+                        </h2>
                       </header>
                     </h1>
                   </div>
@@ -1538,20 +1544,22 @@ Object {
                       <header
                         class="mm-modal-header"
                       >
-                        <h1
+                        <h2
                           class="mm-modal-header__title"
                           id="mm-modal-header-channelNotificationModalLabel"
                         >
-                          Notification Preferences
-                        </h1>
-                        <div
-                          class="mm-modal-header__vertical-divider"
-                        />
-                        <p
-                          class="mm-modal-header__subtitle"
-                        >
-                          channel_display_name
-                        </p>
+                          <span>
+                            Notification Preferences
+                          </span>
+                          <span
+                            class="mm-modal-header__vertical-divider"
+                          />
+                          <span
+                            class="mm-modal-header__subtitle"
+                          >
+                            channel_display_name
+                          </span>
+                        </h2>
                       </header>
                     </h1>
                   </div>
@@ -2118,20 +2126,22 @@ Object {
                       <header
                         class="mm-modal-header"
                       >
-                        <h1
+                        <h2
                           class="mm-modal-header__title"
                           id="mm-modal-header-channelNotificationModalLabel"
                         >
-                          Notification Preferences
-                        </h1>
-                        <div
-                          class="mm-modal-header__vertical-divider"
-                        />
-                        <p
-                          class="mm-modal-header__subtitle"
-                        >
-                          channel_display_name
-                        </p>
+                          <span>
+                            Notification Preferences
+                          </span>
+                          <span
+                            class="mm-modal-header__vertical-divider"
+                          />
+                          <span
+                            class="mm-modal-header__subtitle"
+                          >
+                            channel_display_name
+                          </span>
+                        </h2>
                       </header>
                     </h1>
                   </div>
@@ -2698,20 +2708,22 @@ Object {
                       <header
                         class="mm-modal-header"
                       >
-                        <h1
+                        <h2
                           class="mm-modal-header__title"
                           id="mm-modal-header-channelNotificationModalLabel"
                         >
-                          Notification Preferences
-                        </h1>
-                        <div
-                          class="mm-modal-header__vertical-divider"
-                        />
-                        <p
-                          class="mm-modal-header__subtitle"
-                        >
-                          channel_display_name
-                        </p>
+                          <span>
+                            Notification Preferences
+                          </span>
+                          <span
+                            class="mm-modal-header__vertical-divider"
+                          />
+                          <span
+                            class="mm-modal-header__subtitle"
+                          >
+                            channel_display_name
+                          </span>
+                        </h2>
                       </header>
                     </h1>
                   </div>
diff --git a/webapp/channels/src/components/new_search/search_box_suggestions.tsx b/webapp/channels/src/components/new_search/search_box_suggestions.tsx
index 2008d4b09e2..f0a7fce5c10 100644
--- a/webapp/channels/src/components/new_search/search_box_suggestions.tsx
+++ b/webapp/channels/src/components/new_search/search_box_suggestions.tsx
@@ -14,7 +14,7 @@ import type {SuggestionProps} from 'components/suggestion/suggestion';
 
 import ErrorBoundary from 'plugins/pluggable/error_boundary';
 
-const SuggestionsHeader = styled.div`
+const SuggestionsHeader = styled.h2`
     margin-top: 16px;
     padding: 8px 24px;
     color: rgba(var(--center-channel-color-rgb), 0.56);
@@ -22,6 +22,11 @@ const SuggestionsHeader = styled.div`
     line-height: 16px;
     font-weight: 600;
     text-transform: uppercase;
+    margin-bottom: 0;
+
+    && {
+        font-family: 'Open Sans', sans-serif;
+    }
 `;
 
 const SuggestionsBody = styled.div`
diff --git a/webapp/channels/src/components/new_search/search_hint.tsx b/webapp/channels/src/components/new_search/search_hint.tsx
index 5823d345162..8a7f6e1d2d0 100644
--- a/webapp/channels/src/components/new_search/search_hint.tsx
+++ b/webapp/channels/src/components/new_search/search_hint.tsx
@@ -25,6 +25,12 @@ const SearchHintsContainer = styled.div`
         margin-right: 8px;
         color: var(--center-channel-color-56);
     }
+    h2 {
+        all: inherit;
+        display: inline;
+        margin: 0;
+        padding: 0;
+    }
 `;
 
 const SearchFilter = styled.button`
@@ -98,10 +104,12 @@ const SearchHints = ({onSelectFilter, searchType, searchTerms, searchTeam, hasSe
     return (
         <SearchHintsContainer id='searchHints'>
             <i className='icon icon-lightbulb-outline'/>
-            <FormattedMessage
-                id='search_hint.filter'
-                defaultMessage='Filter your search with:'
-            />
+            <h2>
+                <FormattedMessage
+                    id='search_hint.filter'
+                    defaultMessage='Filter your search with:'
+                />
+            </h2>
             {filters.map((filter) => (
                 <SearchFilter
                     key={filter.searchTerm}
@@ -117,4 +125,3 @@ const SearchHints = ({onSelectFilter, searchType, searchTerms, searchTeam, hasSe
 };
 
 export default SearchHints;
-
diff --git a/webapp/channels/src/components/post_edit_history/__snapshots__/post_edit_history.test.tsx.snap b/webapp/channels/src/components/post_edit_history/__snapshots__/post_edit_history.test.tsx.snap
index 3eaf7673ca9..165ec1c2cb4 100644
--- a/webapp/channels/src/components/post_edit_history/__snapshots__/post_edit_history.test.tsx.snap
+++ b/webapp/channels/src/components/post_edit_history/__snapshots__/post_edit_history.test.tsx.snap
@@ -20,7 +20,11 @@ exports[`components/post_edit_history should display error screen if errors are
             class="sidebar--right__title"
             id="rhsPanelTitle"
           >
-            Edit History
+            <h2
+              id="rhsPanelTitle"
+            >
+              Edit History
+            </h2>
             <div
               class="sidebar--right__title__channel"
             >
@@ -184,7 +188,11 @@ exports[`components/post_edit_history should match snapshot 1`] = `
             class="sidebar--right__title"
             id="rhsPanelTitle"
           >
-            Edit History
+            <h2
+              id="rhsPanelTitle"
+            >
+              Edit History
+            </h2>
             <div
               class="sidebar--right__title__channel"
             >
diff --git a/webapp/channels/src/components/post_edit_history/post_edit_history.tsx b/webapp/channels/src/components/post_edit_history/post_edit_history.tsx
index 57f32ea209d..ee588f0a3f4 100644
--- a/webapp/channels/src/components/post_edit_history/post_edit_history.tsx
+++ b/webapp/channels/src/components/post_edit_history/post_edit_history.tsx
@@ -150,7 +150,9 @@ const PostEditHistory = ({
                 renderView={renderView}
             >
                 <SearchResultsHeader>
-                    {title}
+                    <h2 id='rhsPanelTitle'>
+                        {title}
+                    </h2>
                     <div className='sidebar--right__title__channel'>{channelDisplayName}</div>
                 </SearchResultsHeader>
                 {hasError ? errorContainer : postEditItems}
diff --git a/webapp/channels/src/components/signup/__snapshots__/signup.test.tsx.snap b/webapp/channels/src/components/signup/__snapshots__/signup.test.tsx.snap
index 6b236386eb0..06ac3031002 100644
--- a/webapp/channels/src/components/signup/__snapshots__/signup.test.tsx.snap
+++ b/webapp/channels/src/components/signup/__snapshots__/signup.test.tsx.snap
@@ -36,11 +36,11 @@ exports[`components/signup/Signup should match snapshot for all signup options e
         <div
           className="signup-body-card-content"
         >
-          <p
+          <h2
             className="signup-body-card-title"
           >
             Create your account with one of the following:
-          </p>
+          </h2>
           <div
             className="signup-body-card-form-login-options column"
           >
@@ -106,11 +106,11 @@ exports[`components/signup/Signup should match snapshot for all signup options e
         <div
           className="signup-body-card-content"
         >
-          <p
+          <h2
             className="signup-body-card-title"
           >
             Create your account
-          </p>
+          </h2>
           <form
             className="signup-body-card-form"
           >
@@ -275,11 +275,11 @@ exports[`components/signup/Signup should match snapshot for all signup options e
         <div
           className="signup-body-card-content"
         >
-          <p
+          <h2
             className="signup-body-card-title"
           >
             Create your account
-          </p>
+          </h2>
           <form
             className="signup-body-card-form"
           >
diff --git a/webapp/channels/src/components/signup/signup.scss b/webapp/channels/src/components/signup/signup.scss
index 511c31ae08f..915e2ca60f8 100644
--- a/webapp/channels/src/components/signup/signup.scss
+++ b/webapp/channels/src/components/signup/signup.scss
@@ -142,6 +142,7 @@
                 box-shadow: none;
 
                 .signup-body-card-title {
+                    margin: 0;
                     color: var(--center-channel-color);
                     font-family: 'Metropolis';
                     font-size: 22px;
@@ -186,8 +187,7 @@
                         @include mixins.primary-button;
                         @include mixins.button-large;
 
-                        width: 100%;
-                        margin-top: 30px;
+                        width: 100%;                    
                     }
                 }
 
diff --git a/webapp/channels/src/components/signup/signup.tsx b/webapp/channels/src/components/signup/signup.tsx
index e150e17c57d..68faad60faa 100644
--- a/webapp/channels/src/components/signup/signup.tsx
+++ b/webapp/channels/src/components/signup/signup.tsx
@@ -805,9 +805,9 @@ const Signup = ({onCustomizeHeader}: SignupProps) => {
                         <div
                             className='signup-body-card-content'
                         >
-                            <p className='signup-body-card-title'>
+                            <h2 className='signup-body-card-title'>
                                 {getCardTitle()}
-                            </p>
+                            </h2>
                             {enableCustomBrand && getMessageSubtitle()}
                             {alertBanner && (
                                 <AlertBanner
diff --git a/webapp/channels/src/components/suggestion/suggestion_list.tsx b/webapp/channels/src/components/suggestion/suggestion_list.tsx
index 2e1d9416dde..69f6a06fedf 100644
--- a/webapp/channels/src/components/suggestion/suggestion_list.tsx
+++ b/webapp/channels/src/components/suggestion/suggestion_list.tsx
@@ -211,9 +211,9 @@ export default class SuggestionList extends React.PureComponent<Props> {
                 className='suggestion-list__divider'
                 role='separator'
             >
-                <span>
+                <h2>
                     <FormattedMessage id={id}/>
-                </span>
+                </h2>
             </li>
         );
     }
diff --git a/webapp/channels/src/components/widgets/modals/components/modal_header.scss b/webapp/channels/src/components/widgets/modals/components/modal_header.scss
index e194bf6eb07..1248e7b385a 100644
--- a/webapp/channels/src/components/widgets/modals/components/modal_header.scss
+++ b/webapp/channels/src/components/widgets/modals/components/modal_header.scss
@@ -19,9 +19,12 @@
     }
 
     &__vertical-divider {
+        display: inline-block;
         width: 1px;
         height: 24px;
+        margin: 0 8px;
         background: rgba(var(--center-channel-color-rgb), 0.16);
+        vertical-align: middle;
     }
 
     &__subtitle {
@@ -35,6 +38,7 @@
         font-weight: 400;
         line-height: 20px;
         text-overflow: ellipsis;
+        vertical-align: middle;
         white-space: nowrap;
     }
 
diff --git a/webapp/channels/src/components/widgets/modals/components/modal_header.tsx b/webapp/channels/src/components/widgets/modals/components/modal_header.tsx
index 32ac5bd6e21..7099df7b0fd 100644
--- a/webapp/channels/src/components/widgets/modals/components/modal_header.tsx
+++ b/webapp/channels/src/components/widgets/modals/components/modal_header.tsx
@@ -16,23 +16,23 @@ function ModalHeader({id, title, subtitle, handleClose}: Props) {
     const intl = useIntl();
     return (
         <header className='mm-modal-header'>
-            <h1
+            <h2
                 id={`mm-modal-header-${id}`}
                 className='mm-modal-header__title'
             >
-                {title}
-            </h1>
-            <div className='mm-modal-header__vertical-divider'/>
-            <p className='mm-modal-header__subtitle'>{subtitle}</p>
-            {handleClose && <div className='mm-modal-header__ctr'>
-                <button
-                    className='btn btn-icon'
-                    onClick={handleClose}
-                    aria-label={intl.formatMessage({id: 'modal.header_close', defaultMessage: 'Close'})}
-                >
-                    <i className='icon icon-close'/>
-                </button>
-            </div>}
+                <span>{title}</span>
+                <span className='mm-modal-header__vertical-divider'/>
+                <span className='mm-modal-header__subtitle'>{subtitle}</span>
+                {handleClose && <div className='mm-modal-header__ctr'>
+                    <button
+                        className='btn btn-icon'
+                        onClick={handleClose}
+                        aria-label={intl.formatMessage({id: 'modal.header_close', defaultMessage: 'Close'})}
+                    >
+                        <i className='icon icon-close'/>
+                    </button>
+                </div>}
+            </h2>
         </header>
     );
 }
diff --git a/webapp/channels/src/sass/components/_suggestion-list.scss b/webapp/channels/src/sass/components/_suggestion-list.scss
index e640fa43c20..c89f668c8cd 100644
--- a/webapp/channels/src/sass/components/_suggestion-list.scss
+++ b/webapp/channels/src/sass/components/_suggestion-list.scss
@@ -152,6 +152,13 @@
     font-weight: 600;
     text-transform: uppercase;
 
+    h2 {
+        all: inherit;
+        display: flex;
+        padding: 0;
+        margin: 0;
+    }
+
     &:first-child {
         &::before {
             display: none;