diff --git a/webapp/channels/src/components/settings_sidebar/settings_sidebar.tsx b/webapp/channels/src/components/settings_sidebar/settings_sidebar.tsx
index e794272a921..e48ffdf71e1 100644
--- a/webapp/channels/src/components/settings_sidebar/settings_sidebar.tsx
+++ b/webapp/channels/src/components/settings_sidebar/settings_sidebar.tsx
@@ -26,10 +26,12 @@ export type Props = {
 
 export default class SettingsSidebar extends React.PureComponent<Props> {
     buttonRefs: Array<RefObject<HTMLButtonElement>>;
+    totalTabs: Tab[];
 
     constructor(props: Props) {
         super(props);
-        this.buttonRefs = this.props.tabs.map(() => React.createRef());
+        this.totalTabs = [...this.props.tabs, ...this.props.pluginTabs || []];
+        this.buttonRefs = this.totalTabs.map(() => React.createRef());
     }
 
     public handleClick = (tab: Tab, e: React.MouseEvent) => {
@@ -41,13 +43,19 @@ export default class SettingsSidebar extends React.PureComponent<Props> {
     public handleKeyUp = (index: number, e: React.KeyboardEvent) => {
         if (isKeyPressed(e, Constants.KeyCodes.UP)) {
             if (index > 0) {
-                this.props.updateTab(this.props.tabs[index - 1].name);
+                this.props.updateTab(this.totalTabs[index - 1].name);
                 a11yFocus(this.buttonRefs[index - 1].current);
+            } else {
+                this.props.updateTab(this.totalTabs[this.totalTabs.length - 1].name);
+                a11yFocus(this.buttonRefs[this.buttonRefs.length - 1].current);
             }
         } else if (isKeyPressed(e, Constants.KeyCodes.DOWN)) {
-            if (index < this.props.tabs.length - 1) {
-                this.props.updateTab(this.props.tabs[index + 1].name);
+            if (index < this.totalTabs.length - 1) {
+                this.props.updateTab(this.totalTabs[index + 1].name);
                 a11yFocus(this.buttonRefs[index + 1].current);
+            } else {
+                this.props.updateTab(this.totalTabs[0].name);
+                a11yFocus(this.buttonRefs[0].current);
             }
         }
     };
@@ -55,9 +63,9 @@ export default class SettingsSidebar extends React.PureComponent<Props> {
     private renderTab(tab: Tab, index: number) {
         const key = `${tab.name}_li`;
         const isActive = this.props.activeTab === tab.name;
-        let className = '';
+        let className = 'nav-pills__tab';
         if (isActive) {
-            className = 'active';
+            className += ' active';
         }
 
         let icon;
@@ -79,27 +87,22 @@ export default class SettingsSidebar extends React.PureComponent<Props> {
         }
 
         return (
-            <li
-                id={`${tab.name}Li`}
+            <button
                 key={key}
-                className={className}
-                role='presentation'
+                ref={this.buttonRefs[index]}
+                id={`${tab.name}Button`}
+                className={`cursor--pointer style--none ${className}`}
+                onClick={this.handleClick.bind(null, tab)}
+                onKeyUp={this.handleKeyUp.bind(null, index)}
+                aria-label={tab.uiName.toLowerCase()}
+                role='tab'
+                aria-selected={isActive}
+                tabIndex={!isActive && !this.props.isMobileView ? -1 : 0}
+                aria-controls={`${tab.name}Settings`}
             >
-                <button
-                    ref={this.buttonRefs[index]}
-                    id={`${tab.name}Button`}
-                    className='cursor--pointer style--none'
-                    onClick={this.handleClick.bind(null, tab)}
-                    onKeyUp={this.handleKeyUp.bind(null, index)}
-                    aria-label={tab.uiName.toLowerCase()}
-                    role='tab'
-                    aria-selected={isActive}
-                    tabIndex={!isActive && !this.props.isMobileView ? -1 : 0}
-                >
-                    {icon}
-                    {tab.uiName}
-                </button>
-            </li>
+                {icon}
+                {tab.uiName}
+            </button>
         );
     }
 
@@ -110,32 +113,39 @@ export default class SettingsSidebar extends React.PureComponent<Props> {
             pluginTabList = (
                 <>
                     <hr/>
-                    <li
-                        key={'plugin preferences heading'}
-                        role='heading'
-                        className={'header'}
+                    <div
+                        role='group'
+                        aria-labelledby='userSettingsModal.pluginPreferences.header'
                     >
-                        <FormattedMessage
-                            id={'userSettingsModal.pluginPreferences.header'}
-                            defaultMessage={'PLUGIN PREFERENCES'}
-                        />
-                    </li>
-                    {this.props.pluginTabs.map((tab, index) => this.renderTab(tab, index))}
+                        <div
+                            key={'plugin preferences heading'}
+                            role='heading'
+                            className={'header'}
+                            aria-level={3}
+                            id='userSettingsModal.pluginPreferences.header'
+                        >
+                            <FormattedMessage
+                                id={'userSettingsModal.pluginPreferences.header'}
+                                defaultMessage={'PLUGIN PREFERENCES'}
+                            />
+                        </div>
+                        {this.props.pluginTabs.map((tab, index) => this.renderTab(tab, index + this.props.tabs.length))}
+                    </div>
                 </>
             );
         }
 
         return (
-            <div>
-                <ul
-                    id='tabList'
-                    className='nav nav-pills nav-stacked'
-                    role='tablist'
-                    aria-orientation='vertical'
-                >
+            <div
+                id='tabList'
+                className='nav nav-pills nav-stacked'
+                role='tablist'
+                aria-orientation='vertical'
+            >
+                <div role='group'>
                     {tabList}
-                    {pluginTabList}
-                </ul>
+                </div>
+                {pluginTabList}
             </div>
         );
     }
diff --git a/webapp/channels/src/components/team_settings/team_access_tab/team_access_tab.tsx b/webapp/channels/src/components/team_settings/team_access_tab/team_access_tab.tsx
index 1bc7d66bd01..bf04a6f5dce 100644
--- a/webapp/channels/src/components/team_settings/team_access_tab/team_access_tab.tsx
+++ b/webapp/channels/src/components/team_settings/team_access_tab/team_access_tab.tsx
@@ -123,7 +123,12 @@ const AccessTab = ({closeModal, collapseModal, hasChangeTabError, hasChanges, se
                             <span>{formatMessage({id: 'team_settings_modal.title', defaultMessage: 'Team Settings'})}</span>
                         </h4>
                     </div>
-                    <div className='modal-access-tab-content user-settings'>
+                    <div
+                        className='modal-access-tab-content user-settings'
+                        id='accessSettings'
+                        aria-labelledby='accessButton'
+                        role='tabpanel'
+                    >
                         {team.group_constrained ?
                             undefined :
                             <AllowedDomainsSelect
diff --git a/webapp/channels/src/components/team_settings/team_info_tab/team_info_tab.tsx b/webapp/channels/src/components/team_settings/team_info_tab/team_info_tab.tsx
index 5da24c3a997..bcc0f07466e 100644
--- a/webapp/channels/src/components/team_settings/team_info_tab/team_info_tab.tsx
+++ b/webapp/channels/src/components/team_settings/team_info_tab/team_info_tab.tsx
@@ -198,7 +198,12 @@ const InfoTab = ({team, hasChanges, maxFileSize, closeModal, collapseModal, hasC
                     <span>{formatMessage({id: 'team_settings_modal.title', defaultMessage: 'Team Settings'})}</span>
                 </h4>
             </div>
-            <div className='modal-info-tab-content user-settings' >
+            <div
+                className='modal-info-tab-content user-settings'
+                id='infoSettings'
+                aria-labelledby='infoButton'
+                role='tabpanel'
+            >
                 <div className='name-description-container' >
                     <TeamNameSection
                         name={name}
diff --git a/webapp/channels/src/components/user_settings/advanced/user_settings_advanced.tsx b/webapp/channels/src/components/user_settings/advanced/user_settings_advanced.tsx
index 0a19ec89967..1f18da1bd0e 100644
--- a/webapp/channels/src/components/user_settings/advanced/user_settings_advanced.tsx
+++ b/webapp/channels/src/components/user_settings/advanced/user_settings_advanced.tsx
@@ -738,7 +738,11 @@ export default class AdvancedSettingsDisplay extends React.PureComponent<Props,
         }
 
         return (
-            <div>
+            <div
+                id='advancedSettings'
+                aria-labelledby='advancedButton'
+                role='tabpanel'
+            >
                 <SettingMobileHeader
                     closeModal={this.props.closeModal}
                     collapseModal={this.props.collapseModal}
diff --git a/webapp/channels/src/components/user_settings/display/__snapshots__/user_settings_display.test.tsx.snap b/webapp/channels/src/components/user_settings/display/__snapshots__/user_settings_display.test.tsx.snap
index 18bdd5c3aeb..8430a0e882b 100644
--- a/webapp/channels/src/components/user_settings/display/__snapshots__/user_settings_display.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/display/__snapshots__/user_settings_display.test.tsx.snap
@@ -2,7 +2,9 @@
 
 exports[`components/user_settings/display/UserSettingsDisplay should match snapshot, channel display mode section 1`] = `
 <div
+  aria-labelledby="displayButton"
   id="displaySettings"
+  role="tabpanel"
 >
   <SettingMobileHeader
     closeModal={[MockFunction]}
@@ -355,7 +357,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
 
 exports[`components/user_settings/display/UserSettingsDisplay should match snapshot, clickToReply section 1`] = `
 <div
+  aria-labelledby="displayButton"
   id="displaySettings"
+  role="tabpanel"
 >
   <SettingMobileHeader
     closeModal={[MockFunction]}
@@ -708,7 +712,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
 
 exports[`components/user_settings/display/UserSettingsDisplay should match snapshot, clock section 1`] = `
 <div
+  aria-labelledby="displayButton"
   id="displaySettings"
+  role="tabpanel"
 >
   <SettingMobileHeader
     closeModal={[MockFunction]}
@@ -1061,7 +1067,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
 
 exports[`components/user_settings/display/UserSettingsDisplay should match snapshot, collapse section 1`] = `
 <div
+  aria-labelledby="displayButton"
   id="displaySettings"
+  role="tabpanel"
 >
   <SettingMobileHeader
     closeModal={[MockFunction]}
@@ -1414,7 +1422,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
 
 exports[`components/user_settings/display/UserSettingsDisplay should match snapshot, languages section 1`] = `
 <div
+  aria-labelledby="displayButton"
   id="displaySettings"
+  role="tabpanel"
 >
   <SettingMobileHeader
     closeModal={[MockFunction]}
@@ -1694,7 +1704,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
 
 exports[`components/user_settings/display/UserSettingsDisplay should match snapshot, link preview section with EnableLinkPreviews is false 1`] = `
 <div
+  aria-labelledby="displayButton"
   id="displaySettings"
+  role="tabpanel"
 >
   <SettingMobileHeader
     closeModal={[MockFunction]}
@@ -1956,7 +1968,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
 
 exports[`components/user_settings/display/UserSettingsDisplay should match snapshot, link preview section with EnableLinkPreviews is true 1`] = `
 <div
+  aria-labelledby="displayButton"
   id="displaySettings"
+  role="tabpanel"
 >
   <SettingMobileHeader
     closeModal={[MockFunction]}
@@ -2309,7 +2323,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
 
 exports[`components/user_settings/display/UserSettingsDisplay should match snapshot, message display section 1`] = `
 <div
+  aria-labelledby="displayButton"
   id="displaySettings"
+  role="tabpanel"
 >
   <SettingMobileHeader
     closeModal={[MockFunction]}
@@ -2680,7 +2696,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
 
 exports[`components/user_settings/display/UserSettingsDisplay should match snapshot, no active section 1`] = `
 <div
+  aria-labelledby="displayButton"
   id="displaySettings"
+  role="tabpanel"
 >
   <SettingMobileHeader
     closeModal={[MockFunction]}
@@ -2960,7 +2978,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
 
 exports[`components/user_settings/display/UserSettingsDisplay should match snapshot, teammate name display section 1`] = `
 <div
+  aria-labelledby="displayButton"
   id="displaySettings"
+  role="tabpanel"
 >
   <SettingMobileHeader
     closeModal={[MockFunction]}
@@ -3240,7 +3260,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
 
 exports[`components/user_settings/display/UserSettingsDisplay should match snapshot, theme section with EnableThemeSelection is false 1`] = `
 <div
+  aria-labelledby="displayButton"
   id="displaySettings"
+  role="tabpanel"
 >
   <SettingMobileHeader
     closeModal={[MockFunction]}
@@ -3520,7 +3542,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
 
 exports[`components/user_settings/display/UserSettingsDisplay should match snapshot, theme section with EnableThemeSelection is true 1`] = `
 <div
+  aria-labelledby="displayButton"
   id="displaySettings"
+  role="tabpanel"
 >
   <SettingMobileHeader
     closeModal={[MockFunction]}
@@ -3812,7 +3836,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
 
 exports[`components/user_settings/display/UserSettingsDisplay should match snapshot, timezone section 1`] = `
 <div
+  aria-labelledby="displayButton"
   id="displaySettings"
+  role="tabpanel"
 >
   <SettingMobileHeader
     closeModal={[MockFunction]}
@@ -4092,7 +4118,9 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
 
 exports[`components/user_settings/display/UserSettingsDisplay should not show last active section 1`] = `
 <div
+  aria-labelledby="displayButton"
   id="displaySettings"
+  role="tabpanel"
 >
   <SettingMobileHeader
     closeModal={[MockFunction]}
diff --git a/webapp/channels/src/components/user_settings/display/user_settings_display.tsx b/webapp/channels/src/components/user_settings/display/user_settings_display.tsx
index e80febfdc86..6892e9d93d1 100644
--- a/webapp/channels/src/components/user_settings/display/user_settings_display.tsx
+++ b/webapp/channels/src/components/user_settings/display/user_settings_display.tsx
@@ -1148,7 +1148,11 @@ export default class UserSettingsDisplay extends React.PureComponent<Props, Stat
         }
 
         return (
-            <div id='displaySettings'>
+            <div
+                id='displaySettings'
+                aria-labelledby='displayButton'
+                role='tabpanel'
+            >
                 <SettingMobileHeader
                     closeModal={this.props.closeModal}
                     collapseModal={this.props.collapseModal}
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 942311f9430..c14e5307786 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
@@ -1363,7 +1363,11 @@ export class UserSettingsGeneralTab extends PureComponent<Props, State> {
         const pictureSection = this.createPictureSection();
 
         return (
-            <div id='generalSettings'>
+            <div
+                id='profileSettings'
+                aria-labelledby='profileButton'
+                role='tabpanel'
+            >
                 <SettingMobileHeader
                     closeModal={this.props.closeModal}
                     collapseModal={this.props.collapseModal}
diff --git a/webapp/channels/src/components/user_settings/notifications/__snapshots__/user_settings_notifications.test.tsx.snap b/webapp/channels/src/components/user_settings/notifications/__snapshots__/user_settings_notifications.test.tsx.snap
index a1006af150c..34aa2ffddb3 100644
--- a/webapp/channels/src/components/user_settings/notifications/__snapshots__/user_settings_notifications.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/notifications/__snapshots__/user_settings_notifications.test.tsx.snap
@@ -6,7 +6,9 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        id="notificationSettings"
+        aria-labelledby="notificationsButton"
+        id="notificationsSettings"
+        role="tabpanel"
       >
         <div
           class="modal-header"
@@ -310,7 +312,9 @@ Object {
   </body>,
   "container": <div>
     <div
-      id="notificationSettings"
+      aria-labelledby="notificationsButton"
+      id="notificationsSettings"
+      role="tabpanel"
     >
       <div
         class="modal-header"
@@ -673,7 +677,9 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        id="notificationSettings"
+        aria-labelledby="notificationsButton"
+        id="notificationsSettings"
+        role="tabpanel"
       >
         <div
           class="modal-header"
@@ -980,7 +986,9 @@ Object {
   </body>,
   "container": <div>
     <div
-      id="notificationSettings"
+      aria-labelledby="notificationsButton"
+      id="notificationsSettings"
+      role="tabpanel"
     >
       <div
         class="modal-header"
@@ -1346,7 +1354,9 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        id="notificationSettings"
+        aria-labelledby="notificationsButton"
+        id="notificationsSettings"
+        role="tabpanel"
       >
         <div
           class="modal-header"
@@ -1615,7 +1625,9 @@ Object {
   </body>,
   "container": <div>
     <div
-      id="notificationSettings"
+      aria-labelledby="notificationsButton"
+      id="notificationsSettings"
+      role="tabpanel"
     >
       <div
         class="modal-header"
diff --git a/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.tsx b/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.tsx
index 4a7ee5de57b..c5d8a094175 100644
--- a/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.tsx
+++ b/webapp/channels/src/components/user_settings/notifications/user_settings_notifications.tsx
@@ -980,7 +980,11 @@ class NotificationsTab extends React.PureComponent<Props, State> {
         const areAllSectionsInactive = this.props.activeSection === '';
 
         return (
-            <div id='notificationSettings'>
+            <div
+                id='notificationsSettings'
+                aria-labelledby='notificationsButton'
+                role='tabpanel'
+            >
                 <SettingMobileHeader
                     closeModal={this.props.closeModal}
                     collapseModal={this.props.collapseModal}
diff --git a/webapp/channels/src/components/user_settings/plugin/__snapshots__/index.test.tsx.snap b/webapp/channels/src/components/user_settings/plugin/__snapshots__/index.test.tsx.snap
index 69107f5befc..14cacf143fc 100644
--- a/webapp/channels/src/components/user_settings/plugin/__snapshots__/index.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/plugin/__snapshots__/index.test.tsx.snap
@@ -1,7 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`plugin tab all props are properly passed to the children 1`] = `
-<div>
+<div
+  aria-labelledby="pluginAButton"
+  id="pluginASettings"
+  role="tabpanel"
+>
   <SettingMobileHeader
     closeModal={[MockFunction]}
     collapseModal={[MockFunction]}
diff --git a/webapp/channels/src/components/user_settings/plugin/index.tsx b/webapp/channels/src/components/user_settings/plugin/index.tsx
index bd30449b5bc..47e4251d8ef 100644
--- a/webapp/channels/src/components/user_settings/plugin/index.tsx
+++ b/webapp/channels/src/components/user_settings/plugin/index.tsx
@@ -37,7 +37,11 @@ const PluginTab = ({
     );
 
     return (
-        <div>
+        <div
+            id={`${settings.id}Settings`}
+            aria-labelledby={`${settings.id}Button`}
+            role='tabpanel'
+        >
             <SettingMobileHeader
                 closeModal={closeModal}
                 collapseModal={collapseModal}
diff --git a/webapp/channels/src/components/user_settings/security/__snapshots__/user_settings_security.test.tsx.snap b/webapp/channels/src/components/user_settings/security/__snapshots__/user_settings_security.test.tsx.snap
index 1ef0ed03b7c..c88fe47bdc7 100644
--- a/webapp/channels/src/components/user_settings/security/__snapshots__/user_settings_security.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/security/__snapshots__/user_settings_security.test.tsx.snap
@@ -1,7 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`components/user_settings/display/UserSettingsDisplay should match snapshot, enable gitlab 1`] = `
-<div>
+<div
+  aria-labelledby="securityButton"
+  id="securitySettings"
+  role="tabpanel"
+>
   <SettingMobileHeader
     closeModal={[MockFunction]}
     collapseModal={[MockFunction]}
@@ -138,7 +142,11 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
 `;
 
 exports[`components/user_settings/display/UserSettingsDisplay should match snapshot, enable google 1`] = `
-<div>
+<div
+  aria-labelledby="securityButton"
+  id="securitySettings"
+  role="tabpanel"
+>
   <SettingMobileHeader
     closeModal={[MockFunction]}
     collapseModal={[MockFunction]}
@@ -275,7 +283,11 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
 `;
 
 exports[`components/user_settings/display/UserSettingsDisplay should match snapshot, enable office365 1`] = `
-<div>
+<div
+  aria-labelledby="securityButton"
+  id="securitySettings"
+  role="tabpanel"
+>
   <SettingMobileHeader
     closeModal={[MockFunction]}
     collapseModal={[MockFunction]}
@@ -412,7 +424,11 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
 `;
 
 exports[`components/user_settings/display/UserSettingsDisplay should match snapshot, enable openID 1`] = `
-<div>
+<div
+  aria-labelledby="securityButton"
+  id="securitySettings"
+  role="tabpanel"
+>
   <SettingMobileHeader
     closeModal={[MockFunction]}
     collapseModal={[MockFunction]}
@@ -549,7 +565,11 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
 `;
 
 exports[`components/user_settings/display/UserSettingsDisplay should match snapshot, to email 1`] = `
-<div>
+<div
+  aria-labelledby="securityButton"
+  id="securitySettings"
+  role="tabpanel"
+>
   <SettingMobileHeader
     closeModal={[MockFunction]}
     collapseModal={[MockFunction]}
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 fe4b2ce472c..3d16cedd987 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
@@ -993,7 +993,11 @@ export class SecurityTab extends React.PureComponent<Props, State> {
         }
 
         return (
-            <div>
+            <div
+                id='securitySettings'
+                aria-labelledby='securityButton'
+                role='tabpanel'
+            >
                 <SettingMobileHeader
                     closeModal={this.props.closeModal}
                     collapseModal={this.props.collapseModal}
diff --git a/webapp/channels/src/components/user_settings/sidebar/user_settings_sidebar.tsx b/webapp/channels/src/components/user_settings/sidebar/user_settings_sidebar.tsx
index aaa01ac990c..29b8ed96b56 100644
--- a/webapp/channels/src/components/user_settings/sidebar/user_settings_sidebar.tsx
+++ b/webapp/channels/src/components/user_settings/sidebar/user_settings_sidebar.tsx
@@ -24,7 +24,11 @@ export interface Props {
 
 export default function UserSettingsSidebar(props: Props): JSX.Element {
     return (
-        <div>
+        <div
+            id='sidebarSettings'
+            aria-labelledby='sidebarButton'
+            role='tabpanel'
+        >
             <SettingMobileHeader
                 closeModal={props.closeModal}
                 collapseModal={props.collapseModal}
diff --git a/webapp/channels/src/sass/components/_settings-modal.scss b/webapp/channels/src/sass/components/_settings-modal.scss
index b71d18c9e9e..0705f5d69d2 100644
--- a/webapp/channels/src/sass/components/_settings-modal.scss
+++ b/webapp/channels/src/sass/components/_settings-modal.scss
@@ -12,43 +12,44 @@
 
         // Tabs
         .nav-pills {
-            > li {
+            &__tab {
+                display: flex;
+                width: 100%;
+                height: 32px;
+                align-items: center;
+                justify-content: start;
+                padding: 0 12px;
+                border-radius: 4px;
                 margin-bottom: 8px;
+                color: rgba(var(--center-channel-color-rgb), 0.75);
+                font-weight: 600;
+                gap: 2px;
 
-                &.header {
-                    color: rgba(var(--center-channel-color-rgb), 0.75);
-                    font-weight: 600;
+                i {
+                    color: rgba(var(--center-channel-color-rgb), 0.64);
                 }
 
-                button {
-                    height: 32px;
-                    padding: 0 12px;
+                &:hover {
                     border-radius: 4px;
-                    color: rgba(var(--center-channel-color-rgb), 0.75);
-                    font-weight: 600;
-
-                    i {
-                        color: rgba(var(--center-channel-color-rgb), 0.64);
-                    }
-
-                    &:hover {
-                        border-radius: 4px;
-                        background-color: rgba(var(--center-channel-color-rgb), 0.04);
-                        color: rgba(var(--center-channel-color-rgb), 0.8);
-                    }
+                    background-color: rgba(var(--center-channel-color-rgb), 0.04);
+                    color: rgba(var(--center-channel-color-rgb), 0.8);
                 }
 
                 &.active {
-                    button {
-                        background: rgba(var(--button-bg-rgb), 0.08);
-                        color: functions.v(button-bg);
+                    background: rgba(var(--button-bg-rgb), 0.08);
+                    color: functions.v(button-bg);
 
-                        i {
-                            color: functions.v(button-bg);
-                        }
+                    i {
+                        color: functions.v(button-bg);
                     }
                 }
             }
+
+            & .header {
+                margin-bottom: 8px;
+                color: rgba(var(--center-channel-color-rgb), 0.75);
+                font-weight: 600;
+            }
         }
 
         .settings-table {
@@ -61,10 +62,6 @@
                 background: rgba(var(--center-channel-color-rgb), 0.04);
             }
 
-            .nav {
-                width: 200px;
-            }
-
             .settings-content {
                 .divider-dark {
                     border-color: rgba(var(--center-channel-color-rgb), 0.12);