diff --git a/src/components/dashboard/users/AccessContainer.tsx b/src/components/dashboard/users/AccessContainer.tsx
new file mode 100644
index 0000000000..5c0d6341b7
--- /dev/null
+++ b/src/components/dashboard/users/AccessContainer.tsx
@@ -0,0 +1,41 @@
+import React, { FunctionComponent } from 'react';
+import globalize from '../../../scripts/globalize';
+import CheckBoxElement from './CheckBoxElement';
+
+type IProps = {
+    containerClassName?: string;
+    headerTitle?: string;
+    checkBoxClassName?: string;
+    checkBoxTitle?: string;
+    listContainerClassName?: string;
+    accessClassName?: string;
+    listTitle?: string;
+    description?: string;
+    children?: React.ReactNode
+}
+
+const AccessContainer: FunctionComponent<IProps> = ({containerClassName, headerTitle, checkBoxClassName, checkBoxTitle, listContainerClassName, accessClassName, listTitle, description, children }: IProps) => {
+    return (
+        <div className={containerClassName}>
+            <h2>{globalize.translate(headerTitle)}</h2>
+            <CheckBoxElement labelClassName='checkboxContainer' type='checkbox' className={checkBoxClassName} title={checkBoxTitle} />
+            <div className={listContainerClassName}>
+                <div className={accessClassName}>
+                    <h3 className='checkboxListLabel'>
+                        {globalize.translate(listTitle)}
+                    </h3>
+                    <div className='checkboxList paperList' style={{
+                        padding: '.5em 1em'
+                    }}>
+                        {children}
+                    </div>
+                </div>
+                <div className='fieldDescription'>
+                    {globalize.translate(description)}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AccessContainer;
diff --git a/src/components/dashboard/users/SectionTitleContainer.tsx b/src/components/dashboard/users/SectionTitleContainer.tsx
new file mode 100644
index 0000000000..e5e4b8952a
--- /dev/null
+++ b/src/components/dashboard/users/SectionTitleContainer.tsx
@@ -0,0 +1,35 @@
+import React, { FunctionComponent } from 'react';
+import SectionTitleButtonElement from './SectionTitleButtonElement';
+import SectionTitleLinkElement from './SectionTitleLinkElement';
+
+type IProps = {
+    title: string;
+    isBtnVisible?: boolean;
+    titleLink?: string;
+}
+
+const SectionTitleContainer: FunctionComponent<IProps> = ({title, isBtnVisible = false, titleLink}: IProps) => {
+    return (
+        <div className='verticalSection'>
+            <div className='sectionTitleContainer flex align-items-center'>
+                <h2 className='sectionTitle'>
+                    {title}
+                </h2>
+
+                {isBtnVisible && <SectionTitleButtonElement
+                    className='fab btnAddUser submit sectionTitleButton'
+                    title='ButtonAddUser'
+                    icon='add'
+                />}
+
+                <SectionTitleLinkElement
+                    className='raised button-alt headerHelpButton'
+                    title='Help'
+                    url={titleLink}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default SectionTitleContainer;
diff --git a/src/components/pages/NewUserPage.tsx b/src/components/pages/NewUserPage.tsx
index 9c8110310c..3f94055dae 100644
--- a/src/components/pages/NewUserPage.tsx
+++ b/src/components/pages/NewUserPage.tsx
@@ -4,12 +4,11 @@ import Dashboard from '../../utils/dashboard';
 import globalize from '../../scripts/globalize';
 import loading from '../loading/loading';
 import toast from '../toast/toast';
-
-import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
+import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
 import InputElement from '../dashboard/users/InputElement';
-import CheckBoxElement from '../dashboard/users/CheckBoxElement';
 import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
 import ButtonElement from '../dashboard/users/ButtonElement';
+import AccessContainer from '../dashboard/users/AccessContainer';
 
 type userInput = {
     Name?: string;
@@ -178,18 +177,10 @@ const NewUserPage: FunctionComponent = () => {
     return (
         <div ref={element}>
             <div className='content-primary'>
-                <div className='verticalSection'>
-                    <div className='sectionTitleContainer flex align-items-center'>
-                        <h2 className='sectionTitle'>
-                            {globalize.translate('ButtonAddUser')}
-                        </h2>
-                        <SectionTitleLinkElement
-                            className='raised button-alt headerHelpButton'
-                            title='Help'
-                            url='https://docs.jellyfin.org/general/server/users/'
-                        />
-                    </div>
-                </div>
+                <SectionTitleContainer
+                    title={globalize.translate('HeaderAddUser')}
+                    titleLink='https://docs.jellyfin.org/general/server/users/'
+                />
                 <form className='newUserProfileForm'>
                     <div className='inputContainer'>
                         <InputElement
@@ -206,65 +197,47 @@ const NewUserPage: FunctionComponent = () => {
                             label='LabelPassword'
                         />
                     </div>
+                    <AccessContainer
+                        containerClassName='folderAccessContainer'
+                        headerTitle='HeaderLibraryAccess'
+                        checkBoxClassName='chkEnableAllFolders'
+                        checkBoxTitle='OptionEnableAccessToAllLibraries'
+                        listContainerClassName='folderAccessListContainer'
+                        accessClassName='folderAccess'
+                        listTitle='HeaderLibraries'
+                        description='LibraryAccessHelp'
+                    >
+                        {mediaFoldersItems.map(Item => (
+                            <CheckBoxListItem
+                                key={Item.Id}
+                                className='chkFolder'
+                                Id={Item.Id}
+                                Name={Item.Name}
+                                checkedAttribute=''
+                            />
+                        ))}
+                    </AccessContainer>
 
-                    <div className='folderAccessContainer'>
-                        <h2>{globalize.translate('HeaderLibraryAccess')}</h2>
-                        <CheckBoxElement
-                            type='checkbox'
-                            className='chkEnableAllFolders'
-                            title='OptionEnableAccessToAllLibraries'
-                        />
-                        <div className='folderAccessListContainer'>
-                            <div className='folderAccess'>
-                                <h3 className='checkboxListLabel'>
-                                    {globalize.translate('HeaderLibraries')}
-                                </h3>
-                                <div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
-                                    {mediaFoldersItems.map(Item => (
-                                        <CheckBoxListItem
-                                            key={Item.Id}
-                                            className='chkFolder'
-                                            Id={Item.Id}
-                                            Name={Item.Name}
-                                            checkedAttribute=''
-                                        />
-                                    ))}
-                                </div>
-                            </div>
-                            <div className='fieldDescription'>
-                                {globalize.translate('LibraryAccessHelp')}
-                            </div>
-                        </div>
-                    </div>
-                    <div className='channelAccessContainer verticalSection-extrabottompadding hide'>
-                        <h2>{globalize.translate('HeaderChannelAccess')}</h2>
-                        <CheckBoxElement
-                            type='checkbox'
-                            className='chkEnableAllChannels'
-                            title='OptionEnableAccessToAllChannels'
-                        />
-                        <div className='channelAccessListContainer'>
-                            <div className='channelAccess'>
-                                <h3 className='checkboxListLabel'>
-                                    {globalize.translate('Channels')}
-                                </h3>
-                                <div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
-                                    {channelsItems.map(Item => (
-                                        <CheckBoxListItem
-                                            key={Item.Id}
-                                            className='chkChannel'
-                                            Id={Item.Id}
-                                            Name={Item.Name}
-                                            checkedAttribute=''
-                                        />
-                                    ))}
-                                </div>
-                            </div>
-                            <div className='fieldDescription'>
-                                {globalize.translate('ChannelAccessHelp')}
-                            </div>
-                        </div>
-                    </div>
+                    <AccessContainer
+                        containerClassName='channelAccessContainer verticalSection-extrabottompadding hide'
+                        headerTitle='HeaderChannelAccess'
+                        checkBoxClassName='chkEnableAllChannels'
+                        checkBoxTitle='OptionEnableAccessToAllChannels'
+                        listContainerClassName='channelAccessListContainer'
+                        accessClassName='channelAccess'
+                        listTitle='Channels'
+                        description='ChannelAccessHelp'
+                    >
+                        {channelsItems.map(Item => (
+                            <CheckBoxListItem
+                                key={Item.Id}
+                                className='chkChannel'
+                                Id={Item.Id}
+                                Name={Item.Name}
+                                checkedAttribute=''
+                            />
+                        ))}
+                    </AccessContainer>
                     <div>
                         <ButtonElement
                             type='submit'
diff --git a/src/components/pages/UserEditPage.tsx b/src/components/pages/UserEditPage.tsx
index 72f5b65291..dce189c696 100644
--- a/src/components/pages/UserEditPage.tsx
+++ b/src/components/pages/UserEditPage.tsx
@@ -8,7 +8,7 @@ import CheckBoxElement from '../dashboard/users/CheckBoxElement';
 import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
 import InputElement from '../dashboard/users/InputElement';
 import LinkEditUserPreferences from '../dashboard/users/LinkEditUserPreferences';
-import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
+import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
 import SelectElement from '../dashboard/users/SelectElement';
 import SelectSyncPlayAccessElement from '../dashboard/users/SelectSyncPlayAccessElement';
 import SectionTabs from '../dashboard/users/SectionTabs';
@@ -278,18 +278,10 @@ const UserEditPage: FunctionComponent = () => {
     return (
         <div ref={element}>
             <div className='content-primary'>
-                <div className='verticalSection'>
-                    <div className='sectionTitleContainer flex align-items-center'>
-                        <h2 className='sectionTitle username'>
-                            {userName}
-                        </h2>
-                        <SectionTitleLinkElement
-                            className='raised button-alt headerHelpButton'
-                            title='Help'
-                            url='https://docs.jellyfin.org/general/server/users/'
-                        />
-                    </div>
-                </div>
+                <SectionTitleContainer
+                    title={userName}
+                    titleLink='https://docs.jellyfin.org/general/server/users/'
+                />
                 <SectionTabs activeTab='useredit'/>
                 <div
                     className='lnkEditUserPreferencesContainer'
diff --git a/src/components/pages/UserLibraryAccessPage.tsx b/src/components/pages/UserLibraryAccessPage.tsx
index 1fa2256a5f..0ffea1565f 100644
--- a/src/components/pages/UserLibraryAccessPage.tsx
+++ b/src/components/pages/UserLibraryAccessPage.tsx
@@ -5,12 +5,12 @@ import loading from '../loading/loading';
 import libraryMenu from '../../scripts/libraryMenu';
 import globalize from '../../scripts/globalize';
 import toast from '../toast/toast';
-import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
 import SectionTabs from '../dashboard/users/SectionTabs';
-import CheckBoxElement from '../dashboard/users/CheckBoxElement';
 import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
 import ButtonElement from '../dashboard/users/ButtonElement';
 import { getParameterByName } from '../../utils/url';
+import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
+import AccessContainer from '../dashboard/users/AccessContainer';
 
 type ItemsArr = {
     Name?: string;
@@ -109,7 +109,7 @@ const UserLibraryAccessPage: FunctionComponent = () => {
             itemsArr.push({
                 Id: device.Id,
                 Name: device.Name,
-                AppName : device.AppName,
+                AppName: device.AppName,
                 checkedAttribute: checkedAttribute
             });
         }
@@ -228,115 +228,75 @@ const UserLibraryAccessPage: FunctionComponent = () => {
     return (
         <div ref={element}>
             <div className='content-primary'>
-                <div className='verticalSection'>
-                    <div className='sectionTitleContainer flex align-items-center'>
-                        <h2 className='sectionTitle username'>
-                            {userName}
-                        </h2>
-                        <SectionTitleLinkElement
-                            className='raised button-alt headerHelpButton'
-                            title='Help'
-                            url='https://docs.jellyfin.org/general/server/users/'
-                        />
-                    </div>
-                </div>
+                <SectionTitleContainer
+                    title={userName}
+                    titleLink='https://docs.jellyfin.org/general/server/users/'
+                />
                 <SectionTabs activeTab='userlibraryaccess'/>
                 <form className='userLibraryAccessForm'>
-                    <div className='folderAccessContainer'>
-                        <h2>{globalize.translate('HeaderLibraryAccess')}</h2>
-                        <CheckBoxElement
-                            labelClassName='checkboxContainer'
-                            type='checkbox'
-                            className='chkEnableAllFolders'
-                            title='OptionEnableAccessToAllLibraries'
-                        />
-                        <div className='folderAccessListContainer'>
-                            <div className='folderAccess'>
-                                <h3 className='checkboxListLabel'>
-                                    {globalize.translate('HeaderLibraries')}
-                                </h3>
-                                <div className='checkboxList paperList checkboxList-paperList'>
-                                    {mediaFoldersItems.map(Item => {
-                                        return (
-                                            <CheckBoxListItem
-                                                key={Item.Id}
-                                                className='chkFolder'
-                                                Id={Item.Id}
-                                                Name={Item.Name}
-                                                checkedAttribute={Item.checkedAttribute}
-                                            />
-                                        );
-                                    })}
-                                </div>
-                            </div>
-                            <div className='fieldDescription'>
-                                {globalize.translate('LibraryAccessHelp')}
-                            </div>
-                        </div>
-                    </div>
-                    <div className='channelAccessContainer hide'>
-                        <h2>{globalize.translate('HeaderChannelAccess')}</h2>
-                        <CheckBoxElement
-                            labelClassName='checkboxContainer'
-                            type='checkbox'
-                            className='chkEnableAllChannels'
-                            title='OptionEnableAccessToAllChannels'
-                        />
-                        <div className='channelAccessListContainer'>
-                            <div className='channelAccess'>
-                                <h3 className='checkboxListLabel'>
-                                    {globalize.translate('Channels')}
-                                </h3>
-                                <div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
-                                    {channelsItems.map(Item => (
-                                        <CheckBoxListItem
-                                            key={Item.Id}
-                                            className='chkChannel'
-                                            Id={Item.Id}
-                                            Name={Item.Name}
-                                            checkedAttribute={Item.checkedAttribute}
-                                        />
-                                    ))}
-                                </div>
-                            </div>
-                            <div className='fieldDescription'>
-                                {globalize.translate('ChannelAccessHelp')}
-                            </div>
-                        </div>
-                    </div>
-                    <br />
-                    <div className='deviceAccessContainer hide'>
-                        <h2>{globalize.translate('HeaderDeviceAccess')}</h2>
-                        <CheckBoxElement
-                            labelClassName='checkboxContainer'
-                            type='checkbox'
-                            className='chkEnableAllDevices'
-                            title='OptionEnableAccessFromAllDevices'
-                        />
-                        <div className='deviceAccessListContainer'>
-                            <div className='deviceAccess'>
-                                <h3 className='checkboxListLabel'>
-                                    {globalize.translate('HeaderDevices')}
-                                </h3>
-                                <div className='checkboxList paperList' style={{padding: '.5em 1em'}}>
-                                    {devicesItems.map(Item => (
-                                        <CheckBoxListItem
-                                            key={Item.Id}
-                                            className='chkDevice'
-                                            Id={Item.Id}
-                                            Name={Item.Name}
-                                            AppName={Item.AppName}
-                                            checkedAttribute={Item.checkedAttribute}
-                                        />
-                                    ))}
-                                </div>
-                            </div>
-                            <div className='fieldDescription'>
-                                {globalize.translate('DeviceAccessHelp')}
-                            </div>
-                        </div>
-                        <br />
-                    </div>
+                    <AccessContainer
+                        containerClassName='folderAccessContainer'
+                        headerTitle='HeaderLibraryAccess'
+                        checkBoxClassName='chkEnableAllFolders'
+                        checkBoxTitle='OptionEnableAccessToAllLibraries'
+                        listContainerClassName='folderAccessListContainer'
+                        accessClassName='folderAccess'
+                        listTitle='HeaderLibraries'
+                        description='LibraryAccessHelp'
+                    >
+                        {mediaFoldersItems.map(Item => (
+                            <CheckBoxListItem
+                                key={Item.Id}
+                                className='chkFolder'
+                                Id={Item.Id}
+                                Name={Item.Name}
+                                checkedAttribute={Item.checkedAttribute}
+                            />
+                        ))}
+                    </AccessContainer>
+
+                    <AccessContainer
+                        containerClassName='channelAccessContainer hide'
+                        headerTitle='HeaderChannelAccess'
+                        checkBoxClassName='chkEnableAllChannels'
+                        checkBoxTitle='OptionEnableAccessToAllChannels'
+                        listContainerClassName='channelAccessListContainer'
+                        accessClassName='channelAccess'
+                        listTitle='Channels'
+                        description='ChannelAccessHelp'
+                    >
+                        {channelsItems.map(Item => (
+                            <CheckBoxListItem
+                                key={Item.Id}
+                                className='chkChannel'
+                                Id={Item.Id}
+                                Name={Item.Name}
+                                checkedAttribute={Item.checkedAttribute}
+                            />
+                        ))}
+                    </AccessContainer>
+
+                    <AccessContainer
+                        containerClassName='deviceAccessContainer hide'
+                        headerTitle='HeaderDeviceAccess'
+                        checkBoxClassName='chkEnableAllDevices'
+                        checkBoxTitle='OptionEnableAccessFromAllDevices'
+                        listContainerClassName='deviceAccessListContainer'
+                        accessClassName='deviceAccess'
+                        listTitle='HeaderDevices'
+                        description='DeviceAccessHelp'
+                    >
+                        {devicesItems.map(Item => (
+                            <CheckBoxListItem
+                                key={Item.Id}
+                                className='chkDevice'
+                                Id={Item.Id}
+                                Name={Item.Name}
+                                AppName={Item.AppName}
+                                checkedAttribute={Item.checkedAttribute}
+                            />
+                        ))}
+                    </AccessContainer>
                     <br />
                     <div>
                         <ButtonElement
diff --git a/src/components/pages/UserParentalControl.tsx b/src/components/pages/UserParentalControl.tsx
index 8c9c6b66b8..7744d790b2 100644
--- a/src/components/pages/UserParentalControl.tsx
+++ b/src/components/pages/UserParentalControl.tsx
@@ -7,7 +7,7 @@ import BlockedTagList from '../dashboard/users/BlockedTagList';
 import ButtonElement from '../dashboard/users/ButtonElement';
 import CheckBoxListItem from '../dashboard/users/CheckBoxListItem';
 import SectionTitleButtonElement from '../dashboard/users/SectionTitleButtonElement';
-import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
+import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
 import SelectMaxParentalRating from '../dashboard/users/SelectMaxParentalRating';
 import SectionTabs from '../dashboard/users/SectionTabs';
 import loading from '../loading/loading';
@@ -319,18 +319,10 @@ const UserParentalControl: FunctionComponent = () => {
     return (
         <div ref={element}>
             <div className='content-primary'>
-                <div className='verticalSection'>
-                    <div className='sectionTitleContainer flex align-items-center'>
-                        <h2 className='sectionTitle username'>
-                            {userName}
-                        </h2>
-                        <SectionTitleLinkElement
-                            className='raised button-alt headerHelpButton'
-                            title='Help'
-                            url='https://docs.jellyfin.org/general/server/users/'
-                        />
-                    </div>
-                </div>
+                <SectionTitleContainer
+                    title={userName}
+                    titleLink='https://docs.jellyfin.org/general/server/users/'
+                />
                 <SectionTabs activeTab='userparentalcontrol'/>
                 <form className='userParentalControlForm'>
                     <div className='selectContainer'>
diff --git a/src/components/pages/UserPasswordPage.tsx b/src/components/pages/UserPasswordPage.tsx
index 2eba530ae2..305e8a4422 100644
--- a/src/components/pages/UserPasswordPage.tsx
+++ b/src/components/pages/UserPasswordPage.tsx
@@ -1,8 +1,8 @@
 import React, { FunctionComponent, useCallback, useEffect, useState } from 'react';
-import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
 import SectionTabs from '../dashboard/users/SectionTabs';
 import UserPasswordForm from '../dashboard/users/UserPasswordForm';
 import { getParameterByName } from '../../utils/url';
+import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
 
 const UserPasswordPage: FunctionComponent = () => {
     const userId = getParameterByName('userId');
@@ -23,18 +23,10 @@ const UserPasswordPage: FunctionComponent = () => {
     return (
         <div>
             <div className='content-primary'>
-                <div className='verticalSection'>
-                    <div className='sectionTitleContainer flex align-items-center'>
-                        <h2 className='sectionTitle username'>
-                            {userName}
-                        </h2>
-                        <SectionTitleLinkElement
-                            className='raised button-alt headerHelpButton'
-                            title='Help'
-                            url='https://docs.jellyfin.org/general/server/users/'
-                        />
-                    </div>
-                </div>
+                <SectionTitleContainer
+                    title={userName}
+                    titleLink='https://docs.jellyfin.org/general/server/users/'
+                />
                 <SectionTabs activeTab='userpassword'/>
                 <div className='readOnlyContent'>
                     <UserPasswordForm
diff --git a/src/components/pages/UserProfilesPage.tsx b/src/components/pages/UserProfilesPage.tsx
index 8ed6c0cc4c..0ad54b817b 100644
--- a/src/components/pages/UserProfilesPage.tsx
+++ b/src/components/pages/UserProfilesPage.tsx
@@ -6,8 +6,7 @@ import loading from '../loading/loading';
 import dom from '../../scripts/dom';
 import confirm from '../../components/confirm/confirm';
 import UserCardBox from '../dashboard/users/UserCardBox';
-import SectionTitleButtonElement from '../dashboard/users/SectionTitleButtonElement';
-import SectionTitleLinkElement from '../dashboard/users/SectionTitleLinkElement';
+import SectionTitleContainer from '../dashboard/users/SectionTitleContainer';
 import '../../elements/emby-button/emby-button';
 import '../../elements/emby-button/paper-icon-button-light';
 import '../../components/cardbuilder/card.scss';
@@ -133,30 +132,16 @@ const UserProfilesPage: FunctionComponent = () => {
     return (
         <div ref={element}>
             <div className='content-primary'>
-                <div className='verticalSection verticalSection-extrabottompadding'>
-                    <div
-                        className='sectionTitleContainer sectionTitleContainer-cards'
-                        style={{display: 'flex', alignItems: 'center', paddingBottom: '1em'}}
-                    >
-                        <h2 className='sectionTitle sectionTitle-cards'>
-                            {globalize.translate('HeaderUsers')}
-                        </h2>
-                        <SectionTitleButtonElement
-                            className='fab btnAddUser submit sectionTitleButton'
-                            title='ButtonAddUser'
-                            icon='add'
-                        />
-                        <SectionTitleLinkElement
-                            className='raised button-alt headerHelpButton'
-                            title='Help'
-                            url='https://docs.jellyfin.org/general/server/users/adding-managing-users.html'
-                        />
-                    </div>
-                    <div className='localUsers itemsContainer vertical-wrap'>
-                        {users.map(user => {
-                            return <UserCardBox key={user.Id} user={user} />;
-                        })}
-                    </div>
+                <SectionTitleContainer
+                    title={globalize.translate('HeaderUsers')}
+                    isBtnVisible={true}
+                    titleLink='https://docs.jellyfin.org/general/server/users/adding-managing-users.html'
+                />
+
+                <div className='localUsers itemsContainer vertical-wrap'>
+                    {users.map(user => {
+                        return <UserCardBox key={user.Id} user={user} />;
+                    })}
                 </div>
             </div>
         </div>