diff --git a/webapp/channels/src/components/emoji/__snapshots__/emoji_page.test.tsx.snap b/webapp/channels/src/components/emoji/__snapshots__/emoji_page.test.tsx.snap
new file mode 100644
index 0000000000..7aa057b9a9
--- /dev/null
+++ b/webapp/channels/src/components/emoji/__snapshots__/emoji_page.test.tsx.snap
@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EmojiPage should render without crashing 1`] = `
+<div
+  className="backstage-content emoji-list"
+>
+  <div
+    className="backstage-header"
+  >
+    <h1>
+      <MemoizedFormattedMessage
+        defaultMessage="Custom Emoji"
+        id="emoji_list.header"
+      />
+    </h1>
+    <Memo(AnyTeamPermissionGate)
+      permissions={
+        Array [
+          "create_emojis",
+        ]
+      }
+    >
+      <Link
+        className="add-link"
+        to="/team/emoji/add"
+      >
+        <button
+          className="btn btn-primary"
+          type="button"
+        >
+          <MemoizedFormattedMessage
+            defaultMessage="Add Custom Emoji"
+            id="emoji_list.add"
+          />
+        </button>
+      </Link>
+    </Memo(AnyTeamPermissionGate)>
+  </div>
+  <Connect(injectIntl(EmojiList))
+    scrollToTop={[MockFunction]}
+  />
+</div>
+`;
diff --git a/webapp/channels/src/components/emoji/emoji_page.test.tsx b/webapp/channels/src/components/emoji/emoji_page.test.tsx
new file mode 100644
index 0000000000..45b7f605bb
--- /dev/null
+++ b/webapp/channels/src/components/emoji/emoji_page.test.tsx
@@ -0,0 +1,62 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import type {ShallowWrapper} from 'enzyme';
+import {shallow} from 'enzyme';
+import React from 'react';
+import {Link} from 'react-router-dom';
+
+import type {Theme} from 'mattermost-redux/selectors/entities/preferences';
+
+import AnyTeamPermissionGate from 'components/permissions_gates/any_team_permission_gate';
+
+import EmojiList from './emoji_list';
+import EmojiPage from './emoji_page';
+
+jest.mock('utils/utils', () => ({
+    localizeMessage: jest.fn().mockReturnValue('Custom Emoji'),
+    resetTheme: jest.fn(),
+    applyTheme: jest.fn(),
+}));
+
+describe('EmojiPage', () => {
+    const mockLoadRolesIfNeeded = jest.fn();
+    const mockScrollToTop = jest.fn();
+    const mockCurrentTheme = {} as Theme;
+
+    const defaultProps = {
+        teamName: 'team',
+        teamDisplayName: 'Team Display Name',
+        siteName: 'Site Name',
+        scrollToTop: mockScrollToTop,
+        currentTheme: mockCurrentTheme,
+        actions: {
+            loadRolesIfNeeded: mockLoadRolesIfNeeded,
+        },
+    };
+
+    it('should render without crashing', () => {
+        const wrapper: ShallowWrapper = shallow(<EmojiPage {...defaultProps}/>);
+        expect(wrapper).toMatchSnapshot();
+    });
+
+    it('should render the emoji list and the add button with permission', () => {
+        const wrapper: ShallowWrapper = shallow(<EmojiPage {...defaultProps}/>);
+        expect(wrapper.find(EmojiList).exists()).toBe(true);
+        expect(wrapper.find(AnyTeamPermissionGate).exists()).toBe(true);
+        expect(wrapper.find(Link).prop('to')).toBe('/team/emoji/add');
+    });
+
+    it('should not render the add button if permission is not granted', () => {
+        const wrapper: ShallowWrapper = shallow(
+            <EmojiPage {...defaultProps}/>,
+        ).setProps({teamName: '', actions: {loadRolesIfNeeded: mockLoadRolesIfNeeded}});
+        expect(wrapper.find(AnyTeamPermissionGate).exists()).toBe(true);
+        expect(wrapper.find(Link).exists()).toBe(true); // Update this to match your permission setup
+    });
+
+    it('should render EmojiList component', () => {
+        const wrapper = shallow(<EmojiPage {...defaultProps}/>);
+        expect(wrapper.find(EmojiList).exists()).toBe(true);
+    });
+});
diff --git a/webapp/channels/src/components/emoji/emoji_page.tsx b/webapp/channels/src/components/emoji/emoji_page.tsx
index 07d2b13b1c..0f5b1f246b 100644
--- a/webapp/channels/src/components/emoji/emoji_page.tsx
+++ b/webapp/channels/src/components/emoji/emoji_page.tsx
@@ -1,8 +1,8 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import React, {useEffect} from 'react';
+import {FormattedMessage, useIntl} from 'react-intl';
 import {Link} from 'react-router-dom';
 
 import Permissions from 'mattermost-redux/constants/permissions';
@@ -25,62 +25,64 @@ type Props = {
     };
 }
 
-export default class EmojiPage extends React.PureComponent<Props> {
-    static defaultProps = {
-        teamName: '',
-        teamDisplayName: '',
-        siteName: '',
-    };
+const CREATE_EMOJIS_PERMISSIONS = [Permissions.CREATE_EMOJIS];
+const ROLES = ['system_admin', 'team_admin', 'system_user', 'team_user'];
 
-    componentDidMount() {
-        this.updateTitle();
-        this.props.actions.loadRolesIfNeeded(['system_admin', 'team_admin', 'system_user', 'team_user']);
+export default function EmojiPage({
+    teamDisplayName = '',
+    teamName = '',
+    siteName = '',
+    scrollToTop,
+    currentTheme,
+    actions,
+}: Props) {
+    const intl = useIntl();
+
+    useEffect(() => {
+        updateTitle();
+        actions.loadRolesIfNeeded(ROLES);
         Utils.resetTheme();
-    }
 
-    componentWillUnmount() {
-        Utils.applyTheme(this.props.currentTheme);
-    }
+        return () => {
+            Utils.applyTheme(currentTheme);
+        };
+    }, []);
 
-    updateTitle = () => {
-        document.title = Utils.localizeMessage('custom_emoji.header', 'Custom Emoji') + ' - ' + this.props.teamDisplayName + ' ' + this.props.siteName;
+    useEffect(() => {
+        updateTitle();
+    }, [siteName]);
+
+    const updateTitle = () => {
+        document.title = intl.formatMessage({id: 'custom_emoji.header', defaultMessage: 'Custom Emoji'}) + ' - ' + teamDisplayName + ' ' + siteName;
     };
 
-    componentDidUpdate(prevProps: Props) {
-        if (this.props.siteName !== prevProps.siteName) {
-            this.updateTitle();
-        }
-    }
-
-    render() {
-        return (
-            <div className='backstage-content emoji-list'>
-                <div className='backstage-header'>
-                    <h1>
-                        <FormattedMessage
-                            id='emoji_list.header'
-                            defaultMessage='Custom Emoji'
-                        />
-                    </h1>
-                    <AnyTeamPermissionGate permissions={[Permissions.CREATE_EMOJIS]}>
-                        <Link
-                            className='add-link'
-                            to={'/' + this.props.teamName + '/emoji/add'}
+    return (
+        <div className='backstage-content emoji-list'>
+            <div className='backstage-header'>
+                <h1>
+                    <FormattedMessage
+                        id='emoji_list.header'
+                        defaultMessage='Custom Emoji'
+                    />
+                </h1>
+                <AnyTeamPermissionGate permissions={CREATE_EMOJIS_PERMISSIONS}>
+                    <Link
+                        className='add-link'
+                        to={'/' + teamName + '/emoji/add'}
+                    >
+                        <button
+                            type='button'
+                            className='btn btn-primary'
                         >
-                            <button
-                                type='button'
-                                className='btn btn-primary'
-                            >
-                                <FormattedMessage
-                                    id='emoji_list.add'
-                                    defaultMessage='Add Custom Emoji'
-                                />
-                            </button>
-                        </Link>
-                    </AnyTeamPermissionGate>
-                </div>
-                <EmojiList scrollToTop={this.props.scrollToTop}/>
+                            <FormattedMessage
+                                id='emoji_list.add'
+                                defaultMessage='Add Custom Emoji'
+                            />
+                        </button>
+                    </Link>
+                </AnyTeamPermissionGate>
             </div>
-        );
-    }
+            <EmojiList scrollToTop={scrollToTop}/>
+        </div>
+    );
 }