diff --git a/webapp/channels/src/components/custom_status/custom_status_modal.tsx b/webapp/channels/src/components/custom_status/custom_status_modal.tsx
index 576c832972..69fcbd5cb2 100644
--- a/webapp/channels/src/components/custom_status/custom_status_modal.tsx
+++ b/webapp/channels/src/components/custom_status/custom_status_modal.tsx
@@ -5,7 +5,8 @@ import classNames from 'classnames';
 import type {Moment} from 'moment-timezone';
 import moment from 'moment-timezone';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {FormattedMessage, useIntl} from 'react-intl';
+import type {MessageDescriptor} from 'react-intl';
+import {FormattedMessage, defineMessage, useIntl} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
 import {useRouteMatch} from 'react-router-dom';
 
@@ -33,10 +34,8 @@ import EmojiIcon from 'components/widgets/icons/emoji_icon';
 
 import {A11yCustomEventTypes, Constants, ModalIdentifiers} from 'utils/constants';
 import type {A11yFocusEventDetail} from 'utils/constants';
-import {t} from 'utils/i18n';
 import {isKeyPressed} from 'utils/keyboard';
 import {getCurrentMomentForTimezone} from 'utils/timezone';
-import {localizeMessage} from 'utils/utils';
 
 import type {GlobalState} from 'types/store';
 
@@ -54,8 +53,7 @@ const EMOJI_PICKER_WIDTH_OFFSET = 308;
 
 type DefaultUserCustomStatus = {
     emoji: string;
-    message: string;
-    messageDefault: string;
+    message: MessageDescriptor;
     duration: CustomStatusDuration;
 };
 
@@ -73,32 +71,42 @@ const {
 const defaultCustomStatusSuggestions: DefaultUserCustomStatus[] = [
     {
         emoji: 'calendar',
-        message: t('custom_status.suggestions.in_a_meeting'),
-        messageDefault: 'In a meeting',
+        message: defineMessage({
+            id: 'custom_status.suggestions.in_a_meeting',
+            defaultMessage: 'In a meeting',
+        }),
         duration: ONE_HOUR,
     },
     {
         emoji: 'hamburger',
-        message: t('custom_status.suggestions.out_for_lunch'),
-        messageDefault: 'Out for lunch',
+        message: defineMessage({
+            id: 'custom_status.suggestions.out_for_lunch',
+            defaultMessage: 'Out for lunch',
+        }),
         duration: THIRTY_MINUTES,
     },
     {
         emoji: 'sneezing_face',
-        message: t('custom_status.suggestions.out_sick'),
-        messageDefault: 'Out sick',
+        message: defineMessage({
+            id: 'custom_status.suggestions.out_sick',
+            defaultMessage: 'Out sick',
+        }),
         duration: TODAY,
     },
     {
         emoji: 'house',
-        message: t('custom_status.suggestions.working_from_home'),
-        messageDefault: 'Working from home',
+        message: defineMessage({
+            id: 'custom_status.suggestions.working_from_home',
+            defaultMessage: 'Working from home',
+        }),
         duration: TODAY,
     },
     {
         emoji: 'palm_tree',
-        message: t('custom_status.suggestions.on_a_vacation'),
-        messageDefault: 'On a vacation',
+        message: defineMessage({
+            id: 'custom_status.suggestions.on_a_vacation',
+            defaultMessage: 'On a vacation',
+        }),
         duration: THIS_WEEK,
     },
 ];
@@ -320,7 +328,7 @@ const CustomStatusModal: React.FC<Props> = (props: Props) => {
         const customStatusSuggestions = defaultCustomStatusSuggestions.
             map((status) => ({
                 emoji: status.emoji,
-                text: formatMessage({id: status.message, defaultMessage: status.messageDefault}),
+                text: formatMessage(status.message),
                 duration: status.duration,
             })).
             filter((status: UserCustomStatus) => !recentCustomStatusTexts.includes(status.text)).
@@ -399,7 +407,7 @@ const CustomStatusModal: React.FC<Props> = (props: Props) => {
             handleEnterKeyPress={handleSetStatus}
             handleCancel={handleClearStatus}
             confirmButtonClassName='btn btn-primary'
-            ariaLabel={localizeMessage('custom_status.set_status', 'Set a status')}
+            ariaLabel={formatMessage({id: 'custom_status.set_status', defaultMessage: 'Set a status'})}
             keyboardEscape={false}
             tabIndex={-1}
         >
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 655de7b390..e40d761827 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
@@ -5,7 +5,7 @@
 
 import React from 'react';
 import type {ReactNode} from 'react';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, defineMessages} from 'react-intl';
 
 import type {PreferenceType} from '@mattermost/types/preferences';
 import type {UserProfile} from '@mattermost/types/users';
@@ -19,7 +19,6 @@ import SettingItem from 'components/setting_item';
 import SettingItemMax from 'components/setting_item_max';
 
 import Constants, {AdvancedSections, Preferences} from 'utils/constants';
-import {t} from 'utils/i18n';
 import {isMac} from 'utils/user_agent';
 import {a11yFocus, localizeMessage} from 'utils/utils';
 
@@ -224,26 +223,26 @@ export default class AdvancedSettingsDisplay extends React.PureComponent<Props,
 
     // This function changes ctrl to cmd when OS is mac
     getCtrlSendText = () => {
-        const description = {
+        const description = defineMessages({
             default: {
-                id: t('user.settings.advance.sendDesc'),
+                id: 'user.settings.advance.sendDesc',
                 defaultMessage: 'When enabled, CTRL + ENTER will send the message and ENTER inserts a new line.',
             },
             mac: {
-                id: t('user.settings.advance.sendDesc.mac'),
+                id: 'user.settings.advance.sendDesc.mac',
                 defaultMessage: 'When enabled, ⌘ + ENTER will send the message and ENTER inserts a new line.',
             },
-        };
-        const title = {
+        });
+        const title = defineMessages({
             default: {
-                id: t('user.settings.advance.sendTitle'),
+                id: 'user.settings.advance.sendTitle',
                 defaultMessage: 'Send Messages on CTRL+ENTER',
             },
             mac: {
-                id: t('user.settings.advance.sendTitle.mac'),
+                id: 'user.settings.advance.sendTitle.mac',
                 defaultMessage: 'Send Messages on ⌘+ENTER',
             },
-        };
+        });
         if (isMac()) {
             return {
                 ctrlSendTitle: title.mac,
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 4f462276a8..b51ddfe0c2 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
@@ -1237,7 +1237,7 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
                         type="radio"
                       />
                       <Memo(MemoizedFormattedMessage)
-                        defaultMessage="On"
+                        defaultMessage="Expanded"
                         id="user.settings.display.collapseOn"
                       />
                     </label>
@@ -1255,7 +1255,7 @@ exports[`components/user_settings/display/UserSettingsDisplay should match snaps
                         type="radio"
                       />
                       <Memo(MemoizedFormattedMessage)
-                        defaultMessage="Off"
+                        defaultMessage="Collapsed"
                         id="user.settings.display.collapseOff"
                       />
                     </label>
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 38bdaca613..2df86c35db 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
@@ -4,9 +4,9 @@
 /* eslint-disable max-lines */
 
 import deepEqual from 'fast-deep-equal';
-import type {PrimitiveType, FormatXMLElementFn} from 'intl-messageformat';
 import React from 'react';
-import {FormattedMessage} from 'react-intl';
+import type {MessageDescriptor} from 'react-intl';
+import {FormattedMessage, defineMessage} from 'react-intl';
 import type {Timezone} from 'timezones.json';
 
 import type {PreferenceType} from '@mattermost/types/preferences';
@@ -23,7 +23,6 @@ import ThemeSetting from 'components/user_settings/display/user_settings_theme';
 import type {Language} from 'i18n/i18n';
 import {getLanguageInfo} from 'i18n/i18n';
 import Constants from 'utils/constants';
-import {t} from 'utils/i18n';
 import {getBrowserTimezone} from 'utils/timezone';
 import {a11yFocus} from 'utils/utils';
 
@@ -53,21 +52,17 @@ function getDisplayStateFromProps(props: Props) {
 }
 
 type ChildOption = {
-    id: string;
-    message: string;
+    label: MessageDescriptor;
     value: string;
     display: string;
-    moreId: string;
-    moreMessage: string;
+    more: MessageDescriptor;
 };
 
 type Option = {
     value: string;
     radionButtonText: {
-        id: string;
-        message: string;
-        moreId?: string;
-        moreMessage?: string;
+        label: MessageDescriptor;
+        more?: MessageDescriptor;
     };
     childOption?: ChildOption;
 }
@@ -77,18 +72,11 @@ type SectionProps ={
     display: string;
     defaultDisplay: string;
     value: string;
-    title: {
-        id: string;
-        message: string;
-    };
+    title: MessageDescriptor;
     firstOption: Option;
     secondOption: Option;
     thirdOption?: Option;
-    description: {
-        id: string;
-        message: string;
-        values?: Record<string, React.ReactNode | PrimitiveType | FormatXMLElementFn<React.ReactNode, React.ReactNode>>;
-    };
+    description: MessageDescriptor;
     disabled?: boolean;
     onSubmit?: () => void;
 }
@@ -411,20 +399,20 @@ export default class UserSettingsDisplay extends React.PureComponent<Props, Stat
 
         const firstMessage = (
             <FormattedMessage
-                id={firstOption.radionButtonText.id}
-                defaultMessage={firstOption.radionButtonText.message}
+                id={firstOption.radionButtonText.label.id}
+                defaultMessage={firstOption.radionButtonText.label.defaultMessage}
             />
         );
 
         let moreColon;
         let firstMessageMore;
-        if (firstOption.radionButtonText.moreId) {
+        if (firstOption.radionButtonText.more?.id) {
             moreColon = ': ';
             firstMessageMore = (
                 <span className='font-weight--normal'>
                     <FormattedMessage
-                        id={firstOption.radionButtonText.moreId}
-                        defaultMessage={firstOption.radionButtonText.moreMessage}
+                        id={firstOption.radionButtonText.more.id}
+                        defaultMessage={firstOption.radionButtonText.more.defaultMessage}
                     />
                 </span>
             );
@@ -432,18 +420,18 @@ export default class UserSettingsDisplay extends React.PureComponent<Props, Stat
 
         const secondMessage = (
             <FormattedMessage
-                id={secondOption.radionButtonText.id}
-                defaultMessage={secondOption.radionButtonText.message}
+                id={secondOption.radionButtonText.label.id}
+                defaultMessage={secondOption.radionButtonText.label.defaultMessage}
             />
         );
 
         let secondMessageMore;
-        if (secondOption.radionButtonText.moreId) {
+        if (secondOption.radionButtonText.more?.id) {
             secondMessageMore = (
                 <span className='font-weight--normal'>
                     <FormattedMessage
-                        id={secondOption.radionButtonText.moreId}
-                        defaultMessage={secondOption.radionButtonText.moreMessage}
+                        id={secondOption.radionButtonText.more.id}
+                        defaultMessage={secondOption.radionButtonText.more.defaultMessage}
                     />
                 </span>
             );
@@ -453,8 +441,8 @@ export default class UserSettingsDisplay extends React.PureComponent<Props, Stat
         if (thirdOption) {
             thirdMessage = (
                 <FormattedMessage
-                    id={thirdOption.radionButtonText.id}
-                    defaultMessage={thirdOption.radionButtonText.message}
+                    id={thirdOption.radionButtonText.label.id}
+                    defaultMessage={thirdOption.radionButtonText.label.defaultMessage}
                 />
             );
         }
@@ -462,15 +450,14 @@ export default class UserSettingsDisplay extends React.PureComponent<Props, Stat
         const messageTitle = (
             <FormattedMessage
                 id={title.id}
-                defaultMessage={title.message}
+                defaultMessage={title.defaultMessage}
             />
         );
 
         const messageDesc = (
             <FormattedMessage
                 id={description.id}
-                defaultMessage={description.message}
-                values={description.values}
+                defaultMessage={description.defaultMessage}
             />
         );
 
@@ -536,21 +523,21 @@ export default class UserSettingsDisplay extends React.PureComponent<Props, Stat
                             <input
                                 id={name + 'childOption'}
                                 type='checkbox'
-                                name={childOptionToShow.id}
+                                name={childOptionToShow.label.id}
                                 checked={childOptionToShow.value === 'true'}
                                 onChange={(e) => {
                                     this.handleOnChange(e, {[childDisplay]: e.target.checked ? 'true' : 'false'});
                                 }}
                             />
                             <FormattedMessage
-                                id={childOptionToShow.id}
-                                defaultMessage={childOptionToShow.message}
+                                id={childOptionToShow.label.id}
+                                defaultMessage={childOptionToShow.label.defaultMessage}
                             />
                             {moreColon}
                             <span className='font-weight--normal'>
                                 <FormattedMessage
-                                    id={childOptionToShow.moreId}
-                                    defaultMessage={childOptionToShow.moreMessage}
+                                    id={childOptionToShow.more.id}
+                                    defaultMessage={childOptionToShow.more.defaultMessage}
                                 />
                             </span>
                         </label>
@@ -658,28 +645,32 @@ export default class UserSettingsDisplay extends React.PureComponent<Props, Stat
             display: 'collapseDisplay',
             value: this.state.collapseDisplay,
             defaultDisplay: 'false',
-            title: {
-                id: t('user.settings.display.collapseDisplay'),
-                message: 'Default Appearance of Image Previews',
-            },
+            title: defineMessage({
+                id: 'user.settings.display.collapseDisplay',
+                defaultMessage: 'Default Appearance of Image Previews',
+            }),
             firstOption: {
                 value: 'false',
                 radionButtonText: {
-                    id: t('user.settings.display.collapseOn'),
-                    message: 'On',
+                    label: defineMessage({
+                        id: 'user.settings.display.collapseOn',
+                        defaultMessage: 'Expanded',
+                    }),
                 },
             },
             secondOption: {
                 value: 'true',
                 radionButtonText: {
-                    id: t('user.settings.display.collapseOff'),
-                    message: 'Off',
+                    label: defineMessage({
+                        id: 'user.settings.display.collapseOff',
+                        defaultMessage: 'Collapsed',
+                    }),
                 },
             },
-            description: {
-                id: t('user.settings.display.collapseDesc'),
-                message: 'Set whether previews of image links and image attachment thumbnails show as expanded or collapsed by default. This setting can also be controlled using the slash commands /expand and /collapse.',
-            },
+            description: defineMessage({
+                id: 'user.settings.display.collapseDesc',
+                defaultMessage: 'Set whether previews of image links and image attachment thumbnails show as expanded or collapsed by default. This setting can also be controlled using the slash commands /expand and /collapse.',
+            }),
         });
 
         let linkPreviewSection = null;
@@ -690,28 +681,32 @@ export default class UserSettingsDisplay extends React.PureComponent<Props, Stat
                 display: 'linkPreviewDisplay',
                 value: this.state.linkPreviewDisplay,
                 defaultDisplay: 'true',
-                title: {
-                    id: t('user.settings.display.linkPreviewDisplay'),
-                    message: 'Website Link Previews',
-                },
+                title: defineMessage({
+                    id: 'user.settings.display.linkPreviewDisplay',
+                    defaultMessage: 'Website Link Previews',
+                }),
                 firstOption: {
                     value: 'true',
                     radionButtonText: {
-                        id: t('user.settings.display.linkPreviewOn'),
-                        message: 'On',
+                        label: defineMessage({
+                            id: 'user.settings.display.linkPreviewOn',
+                            defaultMessage: 'On',
+                        }),
                     },
                 },
                 secondOption: {
                     value: 'false',
                     radionButtonText: {
-                        id: t('user.settings.display.linkPreviewOff'),
-                        message: 'Off',
+                        label: defineMessage({
+                            id: 'user.settings.display.linkPreviewOff',
+                            defaultMessage: 'Off',
+                        }),
                     },
                 },
-                description: {
-                    id: t('user.settings.display.linkPreviewDesc'),
-                    message: 'When available, the first web link in a message will show a preview of the website content below the message.',
-                },
+                description: defineMessage({
+                    id: 'user.settings.display.linkPreviewDesc',
+                    defaultMessage: 'When available, the first web link in a message will show a preview of the website content below the message.',
+                }),
             });
             this.prevSections.message_display = 'linkpreview';
         } else {
@@ -726,28 +721,32 @@ export default class UserSettingsDisplay extends React.PureComponent<Props, Stat
                 display: 'lastActiveDisplay',
                 value: this.state.lastActiveDisplay,
                 defaultDisplay: 'true',
-                title: {
-                    id: t('user.settings.display.lastActiveDisplay'),
-                    message: 'Share last active time',
-                },
+                title: defineMessage({
+                    id: 'user.settings.display.lastActiveDisplay',
+                    defaultMessage: 'Share last active time',
+                }),
                 firstOption: {
                     value: 'true',
                     radionButtonText: {
-                        id: t('user.settings.display.lastActiveOn'),
-                        message: 'On',
+                        label: defineMessage({
+                            id: 'user.settings.display.lastActiveOn',
+                            defaultMessage: 'On',
+                        }),
                     },
                 },
                 secondOption: {
                     value: 'false',
                     radionButtonText: {
-                        id: t('user.settings.display.lastActiveOff'),
-                        message: 'Off',
+                        label: defineMessage({
+                            id: 'user.settings.display.lastActiveOff',
+                            defaultMessage: 'Off',
+                        }),
                     },
                 },
-                description: {
-                    id: t('user.settings.display.lastActiveDesc'),
-                    message: 'When enabled, other users will see when you were last active.',
-                },
+                description: defineMessage({
+                    id: 'user.settings.display.lastActiveDesc',
+                    defaultMessage: 'When enabled, other users will see when you were last active.',
+                }),
                 onSubmit: this.submitLastActive,
             });
         }
@@ -757,28 +756,32 @@ export default class UserSettingsDisplay extends React.PureComponent<Props, Stat
             display: 'militaryTime',
             value: this.state.militaryTime,
             defaultDisplay: 'false',
-            title: {
-                id: t('user.settings.display.clockDisplay'),
-                message: 'Clock Display',
-            },
+            title: defineMessage({
+                id: 'user.settings.display.clockDisplay',
+                defaultMessage: 'Clock Display',
+            }),
             firstOption: {
                 value: 'false',
                 radionButtonText: {
-                    id: t('user.settings.display.normalClock'),
-                    message: '12-hour clock (example: 4:00 PM)',
+                    label: defineMessage({
+                        id: 'user.settings.display.normalClock',
+                        defaultMessage: '12-hour clock (example: 4:00 PM)',
+                    }),
                 },
             },
             secondOption: {
                 value: 'true',
                 radionButtonText: {
-                    id: t('user.settings.display.militaryClock'),
-                    message: '24-hour clock (example: 16:00)',
+                    label: defineMessage({
+                        id: 'user.settings.display.militaryClock',
+                        defaultMessage: '24-hour clock (example: 16:00)',
+                    }),
                 },
             },
-            description: {
-                id: t('user.settings.display.preferTime'),
-                message: 'Select how you prefer time displayed.',
-            },
+            description: defineMessage({
+                id: 'user.settings.display.preferTime',
+                defaultMessage: 'Select how you prefer time displayed.',
+            }),
         });
 
         const teammateNameDisplaySection = this.createSection({
@@ -786,35 +789,41 @@ export default class UserSettingsDisplay extends React.PureComponent<Props, Stat
             display: 'teammateNameDisplay',
             value: this.props.lockTeammateNameDisplay ? this.props.configTeammateNameDisplay : this.state.teammateNameDisplay,
             defaultDisplay: this.props.configTeammateNameDisplay,
-            title: {
-                id: t('user.settings.display.teammateNameDisplayTitle'),
-                message: 'Teammate Name Display',
-            },
+            title: defineMessage({
+                id: 'user.settings.display.teammateNameDisplayTitle',
+                defaultMessage: 'Teammate Name Display',
+            }),
             firstOption: {
                 value: Constants.TEAMMATE_NAME_DISPLAY.SHOW_USERNAME,
                 radionButtonText: {
-                    id: t('user.settings.display.teammateNameDisplayUsername'),
-                    message: 'Show username',
+                    label: defineMessage({
+                        id: 'user.settings.display.teammateNameDisplayUsername',
+                        defaultMessage: 'Show username',
+                    }),
                 },
             },
             secondOption: {
                 value: Constants.TEAMMATE_NAME_DISPLAY.SHOW_NICKNAME_FULLNAME,
                 radionButtonText: {
-                    id: t('user.settings.display.teammateNameDisplayNicknameFullname'),
-                    message: 'Show nickname if one exists, otherwise show first and last name',
+                    label: defineMessage({
+                        id: 'user.settings.display.teammateNameDisplayNicknameFullname',
+                        defaultMessage: 'Show nickname if one exists, otherwise show first and last name',
+                    }),
                 },
             },
             thirdOption: {
                 value: Constants.TEAMMATE_NAME_DISPLAY.SHOW_FULLNAME,
                 radionButtonText: {
-                    id: t('user.settings.display.teammateNameDisplayFullname'),
-                    message: 'Show first and last name',
+                    label: defineMessage({
+                        id: 'user.settings.display.teammateNameDisplayFullname',
+                        defaultMessage: 'Show first and last name',
+                    }),
                 },
             },
-            description: {
-                id: t('user.settings.display.teammateNameDisplayDescription'),
-                message: 'Set how to display other user\'s names in posts and the Direct Messages list.',
-            },
+            description: defineMessage({
+                id: 'user.settings.display.teammateNameDisplayDescription',
+                defaultMessage: 'Set how to display other user\'s names in posts and the Direct Messages list.',
+            }),
             disabled: this.props.lockTeammateNameDisplay,
         });
 
@@ -823,28 +832,32 @@ export default class UserSettingsDisplay extends React.PureComponent<Props, Stat
             display: 'availabilityStatusOnPosts',
             value: this.state.availabilityStatusOnPosts,
             defaultDisplay: 'true',
-            title: {
-                id: t('user.settings.display.availabilityStatusOnPostsTitle'),
-                message: 'Show user availability on posts',
-            },
+            title: defineMessage({
+                id: 'user.settings.display.availabilityStatusOnPostsTitle',
+                defaultMessage: 'Show user availability on posts',
+            }),
             firstOption: {
                 value: 'true',
                 radionButtonText: {
-                    id: t('user.settings.sidebar.on'),
-                    message: 'On',
+                    label: defineMessage({
+                        id: 'user.settings.sidebar.on',
+                        defaultMessage: 'On',
+                    }),
                 },
             },
             secondOption: {
                 value: 'false',
                 radionButtonText: {
-                    id: t('user.settings.sidebar.off'),
-                    message: 'Off',
+                    label: defineMessage({
+                        id: 'user.settings.sidebar.off',
+                        defaultMessage: 'Off',
+                    }),
                 },
             },
-            description: {
-                id: t('user.settings.display.availabilityStatusOnPostsDescription'),
-                message: 'When enabled, online availability is displayed on profile images in the message list.',
-            },
+            description: defineMessage({
+                id: 'user.settings.display.availabilityStatusOnPostsDescription',
+                defaultMessage: 'When enabled, online availability is displayed on profile images in the message list.',
+            }),
         });
 
         let timezoneSelection;
@@ -889,40 +902,52 @@ export default class UserSettingsDisplay extends React.PureComponent<Props, Stat
             display: 'messageDisplay',
             value: this.state.messageDisplay,
             defaultDisplay: Preferences.MESSAGE_DISPLAY_CLEAN,
-            title: {
-                id: t('user.settings.display.messageDisplayTitle'),
-                message: 'Message Display',
-            },
+            title: defineMessage({
+                id: 'user.settings.display.messageDisplayTitle',
+                defaultMessage: 'Message Display',
+            }),
             firstOption: {
                 value: Preferences.MESSAGE_DISPLAY_CLEAN,
                 radionButtonText: {
-                    id: t('user.settings.display.messageDisplayClean'),
-                    message: 'Standard',
-                    moreId: t('user.settings.display.messageDisplayCleanDes'),
-                    moreMessage: 'Easy to scan and read.',
+                    label: defineMessage({
+                        id: 'user.settings.display.messageDisplayClean',
+                        defaultMessage: 'Standard',
+                    }),
+                    more: defineMessage({
+                        id: 'user.settings.display.messageDisplayCleanDes',
+                        defaultMessage: 'Easy to scan and read.',
+                    }),
                 },
             },
             secondOption: {
                 value: Preferences.MESSAGE_DISPLAY_COMPACT,
                 radionButtonText: {
-                    id: t('user.settings.display.messageDisplayCompact'),
-                    message: 'Compact',
-                    moreId: t('user.settings.display.messageDisplayCompactDes'),
-                    moreMessage: 'Fit as many messages on the screen as we can.',
+                    label: defineMessage({
+                        id: 'user.settings.display.messageDisplayCompact',
+                        defaultMessage: 'Compact',
+                    }),
+                    more: defineMessage({
+                        id: 'user.settings.display.messageDisplayCompactDes',
+                        defaultMessage: 'Fit as many messages on the screen as we can.',
+                    }),
                 },
                 childOption: {
-                    id: t('user.settings.display.colorize'),
+                    label: defineMessage({
+                        id: 'user.settings.display.colorize',
+                        defaultMessage: 'Colorize usernames',
+                    }),
                     value: this.state.colorizeUsernames,
                     display: 'colorizeUsernames',
-                    message: 'Colorize usernames',
-                    moreId: t('user.settings.display.colorizeDes'),
-                    moreMessage: 'Use colors to distinguish users in compact mode',
+                    more: defineMessage({
+                        id: 'user.settings.display.colorizeDes',
+                        defaultMessage: 'Use colors to distinguish users in compact mode',
+                    }),
                 },
             },
-            description: {
-                id: t('user.settings.display.messageDisplayDescription'),
-                message: 'Select how messages in a channel should be displayed.',
-            },
+            description: defineMessage({
+                id: 'user.settings.display.messageDisplayDescription',
+                defaultMessage: 'Select how messages in a channel should be displayed.',
+            }),
         });
 
         let collapsedReplyThreads;
@@ -933,28 +958,32 @@ export default class UserSettingsDisplay extends React.PureComponent<Props, Stat
                 display: 'collapsedReplyThreads',
                 value: this.state.collapsedReplyThreads,
                 defaultDisplay: Preferences.COLLAPSED_REPLY_THREADS_FALLBACK_DEFAULT,
-                title: {
-                    id: t('user.settings.display.collapsedReplyThreadsTitle'),
-                    message: 'Collapsed Reply Threads',
-                },
+                title: defineMessage({
+                    id: 'user.settings.display.collapsedReplyThreadsTitle',
+                    defaultMessage: 'Collapsed Reply Threads',
+                }),
                 firstOption: {
                     value: Preferences.COLLAPSED_REPLY_THREADS_ON,
                     radionButtonText: {
-                        id: t('user.settings.display.collapsedReplyThreadsOn'),
-                        message: 'On',
+                        label: defineMessage({
+                            id: 'user.settings.display.collapsedReplyThreadsOn',
+                            defaultMessage: 'On',
+                        }),
                     },
                 },
                 secondOption: {
                     value: Preferences.COLLAPSED_REPLY_THREADS_OFF,
                     radionButtonText: {
-                        id: t('user.settings.display.collapsedReplyThreadsOff'),
-                        message: 'Off',
+                        label: defineMessage({
+                            id: 'user.settings.display.collapsedReplyThreadsOff',
+                            defaultMessage: 'Off',
+                        }),
                     },
                 },
-                description: {
-                    id: t('user.settings.display.collapsedReplyThreadsDescription'),
-                    message: 'When enabled, reply messages are not shown in the channel and you\'ll be notified about threads you\'re following in the "Threads" view.',
-                },
+                description: defineMessage({
+                    id: 'user.settings.display.collapsedReplyThreadsDescription',
+                    defaultMessage: 'When enabled, reply messages are not shown in the channel and you\'ll be notified about threads you\'re following in the "Threads" view.',
+                }),
             });
         }
 
@@ -963,28 +992,32 @@ export default class UserSettingsDisplay extends React.PureComponent<Props, Stat
             display: 'clickToReply',
             value: this.state.clickToReply,
             defaultDisplay: 'true',
-            title: {
-                id: t('user.settings.display.clickToReply'),
-                message: 'Click to open threads',
-            },
+            title: defineMessage({
+                id: 'user.settings.display.clickToReply',
+                defaultMessage: 'Click to open threads',
+            }),
             firstOption: {
                 value: 'true',
                 radionButtonText: {
-                    id: t('user.settings.sidebar.on'),
-                    message: 'On',
+                    label: defineMessage({
+                        id: 'user.settings.sidebar.on',
+                        defaultMessage: 'On',
+                    }),
                 },
             },
             secondOption: {
                 value: 'false',
                 radionButtonText: {
-                    id: t('user.settings.sidebar.off'),
-                    message: 'Off',
+                    label: defineMessage({
+                        id: 'user.settings.sidebar.off',
+                        defaultMessage: 'Off',
+                    }),
                 },
             },
-            description: {
-                id: t('user.settings.display.clickToReplyDescription'),
-                message: 'When enabled, click anywhere on a message to open the reply thread.',
-            },
+            description: defineMessage({
+                id: 'user.settings.display.clickToReplyDescription',
+                defaultMessage: 'When enabled, click anywhere on a message to open the reply thread.',
+            }),
         });
 
         const channelDisplayModeSection = this.createSection({
@@ -992,28 +1025,32 @@ export default class UserSettingsDisplay extends React.PureComponent<Props, Stat
             display: 'channelDisplayMode',
             value: this.state.channelDisplayMode,
             defaultDisplay: Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN,
-            title: {
-                id: t('user.settings.display.channelDisplayTitle'),
-                message: 'Channel Display',
-            },
+            title: defineMessage({
+                id: 'user.settings.display.channelDisplayTitle',
+                defaultMessage: 'Channel Display',
+            }),
             firstOption: {
                 value: Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN,
                 radionButtonText: {
-                    id: t('user.settings.display.fullScreen'),
-                    message: 'Full width',
+                    label: defineMessage({
+                        id: 'user.settings.display.fullScreen',
+                        defaultMessage: 'Full width',
+                    }),
                 },
             },
             secondOption: {
                 value: Preferences.CHANNEL_DISPLAY_MODE_CENTERED,
                 radionButtonText: {
-                    id: t('user.settings.display.fixedWidthCentered'),
-                    message: 'Fixed width, centered',
+                    label: defineMessage({
+                        id: 'user.settings.display.fixedWidthCentered',
+                        defaultMessage: 'Fixed width, centered',
+                    }),
                 },
             },
-            description: {
-                id: t('user.settings.display.channeldisplaymode'),
-                message: 'Select the width of the center channel.',
-            },
+            description: defineMessage({
+                id: 'user.settings.display.channeldisplaymode',
+                defaultMessage: 'Select the width of the center channel.',
+            }),
         });
 
         let languagesSection;
@@ -1074,28 +1111,32 @@ export default class UserSettingsDisplay extends React.PureComponent<Props, Stat
                 display: 'oneClickReactionsOnPosts',
                 value: this.state.oneClickReactionsOnPosts,
                 defaultDisplay: 'true',
-                title: {
-                    id: t('user.settings.display.oneClickReactionsOnPostsTitle'),
-                    message: 'Quick reactions on messages',
-                },
+                title: defineMessage({
+                    id: 'user.settings.display.oneClickReactionsOnPostsTitle',
+                    defaultMessage: 'Quick reactions on messages',
+                }),
                 firstOption: {
                     value: 'true',
                     radionButtonText: {
-                        id: t('user.settings.sidebar.on'),
-                        message: 'On',
+                        label: defineMessage({
+                            id: 'user.settings.sidebar.on',
+                            defaultMessage: 'On',
+                        }),
                     },
                 },
                 secondOption: {
                     value: 'false',
                     radionButtonText: {
-                        id: t('user.settings.sidebar.off'),
-                        message: 'Off',
+                        label: defineMessage({
+                            id: 'user.settings.sidebar.off',
+                            defaultMessage: 'Off',
+                        }),
                     },
                 },
-                description: {
-                    id: t('user.settings.display.oneClickReactionsOnPostsDescription'),
-                    message: 'When enabled, you can react in one-click with recently used reactions when hovering over a message.',
-                },
+                description: defineMessage({
+                    id: 'user.settings.display.oneClickReactionsOnPostsDescription',
+                    defaultMessage: 'When enabled, you can react in one-click with recently used reactions when hovering over a message.',
+                }),
             });
         }