diff --git a/webapp/channels/src/components/rhs_settings/rhs_settings_display/index.ts b/webapp/channels/src/components/rhs_settings/rhs_settings_display/index.ts
index 334042ec13..8de123ade4 100644
--- a/webapp/channels/src/components/rhs_settings/rhs_settings_display/index.ts
+++ b/webapp/channels/src/components/rhs_settings/rhs_settings_display/index.ts
@@ -13,7 +13,7 @@ import {autoUpdateTimezone} from 'mattermost-redux/actions/timezone';
 import {updateMe} from 'mattermost-redux/actions/users';
 import {getConfig, getLicense} from 'mattermost-redux/selectors/entities/general';
 import {get, isCollapsedThreadsAllowed, getCollapsedThreadsPreference} from 'mattermost-redux/selectors/entities/preferences';
-import {getCurrentTimezone, getCurrentTimezoneLabel} from 'mattermost-redux/selectors/entities/timezone';
+import {getCurrentTimezone, getCurrentTimezoneFull, getCurrentTimezoneLabel} from 'mattermost-redux/selectors/entities/timezone';
 import {getCurrentUserId, getUser} from 'mattermost-redux/selectors/entities/users';
 import {getUserCurrentTimezone} from 'mattermost-redux/utils/timezone_utils';
 
@@ -28,6 +28,7 @@ export function makeMapStateToProps() {
         const config = getConfig(state);
         const currentUserId = getCurrentUserId(state);
         const userTimezone = getCurrentTimezone(state);
+        const timezone = getCurrentTimezoneFull(state);
         const timezoneLabel = getCurrentTimezoneLabel(state);
         const allowCustomThemes = config.AllowCustomThemes === 'true';
         const enableLinkPreviews = config.EnableLinkPreviews === 'true';
@@ -50,6 +51,7 @@ export function makeMapStateToProps() {
             timezones,
             timezoneLabel,
             userTimezone,
+            timezone,
             currentUserTimezone: getCurrentTimezone(state),
             availabilityStatusOnPosts: get(state, Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.AVAILABILITY_STATUS_ON_POSTS, Preferences.AVAILABILITY_STATUS_ON_POSTS_DEFAULT),
             teammateNameDisplay: get(state, Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.NAME_NAME_FORMAT, configTeammateNameDisplay),
diff --git a/webapp/channels/src/components/rhs_settings/rhs_settings_display/rhs_settings_display.tsx b/webapp/channels/src/components/rhs_settings/rhs_settings_display/rhs_settings_display.tsx
index 11d9ffffc8..9dd1a9d908 100644
--- a/webapp/channels/src/components/rhs_settings/rhs_settings_display/rhs_settings_display.tsx
+++ b/webapp/channels/src/components/rhs_settings/rhs_settings_display/rhs_settings_display.tsx
@@ -2,9 +2,12 @@
 // See LICENSE.txt for license information.
 
 import type {PrimitiveType, FormatXMLElementFn} from 'intl-messageformat';
+import isEqual from 'lodash/isEqual';
+import type {ComponentProps} from 'react';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import ReactSelect from 'react-select';
+import type {Timezone} from 'timezones.json';
 
 import type {PreferenceType} from '@mattermost/types/preferences';
 import type {UserProfile, UserTimezone} from '@mattermost/types/users';
@@ -17,6 +20,7 @@ import RhsLimitVisibleGMsDMs from 'components/rhs_settings/rhs_settings_display/
 import RhsSettingsItem from 'components/rhs_settings/rhs_settings_item/rhs_settings_item';
 import RhsThemeSetting from 'components/rhs_settings/rhs_settings_theme';
 import Toggle from 'components/toggle';
+import ManageTimezones from 'components/user_settings/display/manage_timezones';
 
 import Constants from 'utils/constants';
 import {t} from 'utils/i18n';
@@ -110,6 +114,8 @@ type Props = {
     setRequireConfirm?: () => void;
     setEnforceFocus?: () => void;
     userTimezone: UserTimezone;
+    timezones: Timezone[];
+    timezone: UserTimezone;
     allowCustomThemes: boolean;
     enableLinkPreviews: boolean;
     defaultClientLocale: string;
@@ -158,6 +164,7 @@ type State = {
     serverError?: string;
     militaryTime: string;
     lastActiveDisplay: string;
+    timezone: UserTimezone;
 }
 
 export default class RhsSettingsDisplay extends React.PureComponent<Props, State> {
@@ -175,6 +182,7 @@ export default class RhsSettingsDisplay extends React.PureComponent<Props, State
             oneClickReactionsOnPosts: props.oneClickReactionsOnPosts ? props.oneClickReactionsOnPosts : 'true',
             showUnreadsCategory: props.showUnreadsCategory ? props.showUnreadsCategory : 'true',
             unreadScrollPosition: props.unreadScrollPosition ? props.unreadScrollPosition : Preferences.UNREAD_SCROLL_POSITION,
+            timezone: props.timezone,
         };
     }
 
@@ -204,6 +212,7 @@ export default class RhsSettingsDisplay extends React.PureComponent<Props, State
             showUnreadsCategory: props.showUnreadsCategory ? props.showUnreadsCategory : 'true',
             unreadScrollPosition: props.unreadScrollPosition ? props.unreadScrollPosition : Preferences.UNREAD_SCROLL_POSITION,
             isSaving: false,
+            timezone: props.timezone,
         };
 
         this.prevSections = {
@@ -236,9 +245,11 @@ export default class RhsSettingsDisplay extends React.PureComponent<Props, State
         const userId = user.id;
 
         // User preferences patch user and don't need to update preferences
-        if (newSettingsState.lastActiveDisplay !== this.props.lastActiveDisplay) {
+        if (newSettingsState.lastActiveDisplay !== this.props.lastActiveDisplay ||
+            !isEqual(newSettingsState.timezone, this.props.timezone)) {
             const updatedUser = {
                 ...user,
+                timezone: newSettingsState.timezone,
                 props: {
                     ...user.props,
                     show_last_active: newSettingsState.lastActiveDisplay,
@@ -336,7 +347,6 @@ export default class RhsSettingsDisplay extends React.PureComponent<Props, State
             name: Preferences.USE_MILITARY_TIME,
             value: newSettingsState.militaryTime,
         };
-
         this.setState({isSaving: true});
 
         const preferences = [
@@ -363,6 +373,16 @@ export default class RhsSettingsDisplay extends React.PureComponent<Props, State
     handleOnChange(display: {[key: string]: any}) {
         this.handleSubmit({...this.state, ...display});
     }
+    handleOnTimezoneChange: ComponentProps<typeof ManageTimezones>['onChange'] = (timezone, xd) => {
+        console.log(timezone);
+        console.log(xd);
+        this.handleOnChange({timezone: {
+            useAutomaticTimezone: timezone.useAutomaticTimezone.toString(),
+
+            // manualTimezone: timezone.useAutomaticTimezone ? timezone.automaticTimezone : timezone.manualTimezone,
+            // automaticTimezone: timezone.useAutomaticTimezone ? timezone.automaticTimezone : timezone.manualTimezone,
+        }});
+    };
 
     updateSection = (section: string) => {
         this.props.updateSection(section);
@@ -873,6 +893,27 @@ export default class RhsSettingsDisplay extends React.PureComponent<Props, State
             });
         }
 
+        let timezoneSelection;
+        if (this.props.enableTimezone && !this.props.shouldAutoUpdateTimezone) {
+            timezoneSelection = (
+                <>
+                    <label htmlFor='user.settings.display.timezone'>
+                        <FormattedMessage
+                            id='user.settings.display.timezone2'
+                            defaultMessage='Automatic timezone'
+                        />
+                    </label>
+                    <ManageTimezones
+                        user={this.props.user}
+                        updateSection={this.updateSection}
+                        onChange={this.handleOnTimezoneChange}
+                        compact={true}
+                        {...this.props.timezone}
+                    />
+                </>
+            );
+        }
+
         return (
             <div id='displaySettings'>
                 <div className='user-settings user-rhs-container container'>
@@ -886,6 +927,7 @@ export default class RhsSettingsDisplay extends React.PureComponent<Props, State
                     {lastActiveSection}
                     {channelDisplayModeSection}
                     {UnreadScrollPositionSection}
+                    {timezoneSelection}
                     {clockSection}
                     {teammateNameDisplaySection}
                     <RhsLimitVisibleGMsDMs/>
diff --git a/webapp/channels/src/components/user_settings/display/manage_timezones/manage_timezones.tsx b/webapp/channels/src/components/user_settings/display/manage_timezones/manage_timezones.tsx
index 29703ca00b..1b2fc3840a 100644
--- a/webapp/channels/src/components/user_settings/display/manage_timezones/manage_timezones.tsx
+++ b/webapp/channels/src/components/user_settings/display/manage_timezones/manage_timezones.tsx
@@ -12,7 +12,9 @@ import type {UserProfile} from '@mattermost/types/users';
 import type {ActionResult} from 'mattermost-redux/types/actions';
 import {getTimezoneLabel} from 'mattermost-redux/utils/timezone_utils';
 
+import ExternalLink from 'components/external_link';
 import SettingItemMax from 'components/setting_item_max';
+import Toggle from 'components/toggle';
 
 import {getBrowserTimezone} from 'utils/timezone';
 
@@ -20,15 +22,28 @@ type Actions = {
     updateMe: (user: UserProfile) => Promise<ActionResult>;
 }
 
+type OnChangeActions = {
+    selectedOption: {
+        label: string;
+        value: string;
+    };
+} & ({
+    useAutomaticTimezone: boolean;
+    automaticTimezone: string;
+    manualTimezone: string;
+});
+
 type Props = {
     user: UserProfile;
     updateSection: (section: string) => void;
-    useAutomaticTimezone: boolean;
+    useAutomaticTimezone: boolean | string;
     automaticTimezone: string;
     manualTimezone: string;
     timezones: Timezone[];
     timezoneLabel: string;
     actions: Actions;
+    compact?: boolean;
+    onChange?: (values: OnChangeActions) => void;
 }
 type SelectedOption = {
     value: string;
@@ -48,13 +63,20 @@ type State = {
 export default class ManageTimezones extends React.PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
+        const useAutomaticTimezone = (
+            props.useAutomaticTimezone === 'true' ||
+            props.useAutomaticTimezone === true
+        );
         this.state = {
-            useAutomaticTimezone: props.useAutomaticTimezone,
+            useAutomaticTimezone,
             automaticTimezone: props.automaticTimezone,
             manualTimezone: props.manualTimezone,
             isSaving: false,
             openMenu: false,
-            selectedOption: {label: props.timezoneLabel, value: props.useAutomaticTimezone ? props.automaticTimezone : props.manualTimezone},
+            selectedOption: {
+                label: props.timezoneLabel,
+                value: useAutomaticTimezone ? props.automaticTimezone : props.manualTimezone,
+            },
         };
     }
 
@@ -62,7 +84,15 @@ export default class ManageTimezones extends React.PureComponent<Props, State> {
         if (selectedOption && 'value' in selectedOption) {
             this.setState({
                 manualTimezone: selectedOption.value,
+                automaticTimezone: selectedOption.value,
+                selectedOption,
+                useAutomaticTimezone: false,
+            });
+            this.props.onChange?.({
+                manualTimezone: selectedOption.value,
+                automaticTimezone: selectedOption.value,
                 selectedOption,
+                useAutomaticTimezone: false,
             });
         }
     };
@@ -128,8 +158,9 @@ export default class ManageTimezones extends React.PureComponent<Props, State> {
             });
     };
 
-    handleAutomaticTimezone = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const useAutomaticTimezone = e.target.checked;
+    handleAutomaticTimezone = () => {
+        const useAutomaticTimezone = !this.state.automaticTimezone;
+        const manualTimezone = '';
         let automaticTimezone = '';
         let timezoneLabel: string;
         let selectedOptionValue: string;
@@ -151,13 +182,19 @@ export default class ManageTimezones extends React.PureComponent<Props, State> {
             automaticTimezone,
             selectedOption: {label: timezoneLabel, value: selectedOptionValue},
         });
+        this.props.onChange?.({
+            useAutomaticTimezone,
+            manualTimezone,
+            automaticTimezone,
+            selectedOption: {label: timezoneLabel, value: selectedOptionValue},
+        });
     };
 
     handleManualTimezone = (e: React.ChangeEvent<HTMLSelectElement>) => {
         this.setState({manualTimezone: e.target.value});
     };
     render() {
-        const {timezones} = this.props;
+        const {timezones, compact} = this.props;
         const {useAutomaticTimezone} = this.state;
 
         const timeOptions = this.props.timezones.map((timeObject) => {
@@ -183,42 +220,44 @@ export default class ManageTimezones extends React.PureComponent<Props, State> {
 
         const noTimezonesFromServer = timezones.length === 0;
         const automaticTimezoneInput = (
-            <div className='checkbox'>
-                <label>
-                    <input
-                        id='automaticTimezoneInput'
-                        type='checkbox'
-                        checked={useAutomaticTimezone}
-                        onChange={this.handleAutomaticTimezone}
-                        disabled={noTimezonesFromServer}
-                    />
-                    <FormattedMessage
-                        id='user.settings.timezones.automatic'
-                        defaultMessage='Automatic'
-                    />
 
-                </label>
-            </div>
+            // <div className='checkbox'>
+            //     <label>
+            //         <input
+            //             id='automaticTimezoneInput'
+            //             type='checkbox'
+            //             checked={useAutomaticTimezone}
+            //             onChange={this.handleAutomaticTimezone}
+            //             disabled={noTimezonesFromServer}
+            //         />
+            //         <FormattedMessage
+            //             id='user.settings.timezones.automatic'
+            //             defaultMessage='Automatic'
+            //         />
+
+            //     </label>
+            // </div>
+            <Toggle
+                id={'automaticTimezoneInput childOption'}
+                onToggle={this.handleAutomaticTimezone}
+                toggled={useAutomaticTimezone}
+            />
         );
 
         const manualTimezoneInput = (
             <div
-                className='pt-2'
+                className='pt-2 pb-4'
             >
-                <ReactSelect
-                    className='react-select react-select-top'
-                    classNamePrefix='react-select'
-                    id='displayTimezone'
-                    menuPortalTarget={document.body}
-                    styles={reactStyles}
-                    options={timeOptions}
-                    clearable={false}
-                    onChange={this.onChange}
-                    value={this.state.selectedOption}
-                    aria-labelledby='changeInterfaceTimezoneLabel'
-                    isDisabled={useAutomaticTimezone}
-                />
-                {serverError}
+                {!useAutomaticTimezone &&
+                <ExternalLink
+                    href='https://manager.infomaniak.com/v3/ng/profile/user/dashboard'
+                    target='_blank'
+                >
+                    <FormattedMessage
+                        id='user.settings.timezones.modify'
+                        defaultMessage='Change your time zone'
+                    />
+                </ExternalLink>}
             </div>
         );
 
@@ -226,22 +265,24 @@ export default class ManageTimezones extends React.PureComponent<Props, State> {
 
         inputs.push(manualTimezoneInput);
 
-        inputs.push(
-            <div>
-                <br/>
-                <FormattedMessage
-                    id='user.settings.timezones.promote'
-                    defaultMessage='Select the time zone used for timestamps in the user interface and email notifications.'
-                />
-            </div>,
-        );
-
+        // inputs.push(
+        //     <div>
+        //         <br/>
+        //         <FormattedMessage
+        //             id='user.settings.timezones.promote'
+        //             defaultMessage='Select the time zone used for timestamps in the user interface and email notifications.'
+        //         />
+        //     </div>,
+        // );
+        if (compact) {
+            return inputs;
+        }
         return (
             <SettingItemMax
                 title={
                     <FormattedMessage
-                        id='user.settings.display.timezone'
-                        defaultMessage='Timezone'
+                        id='user.settings.display.timezone2'
+                        defaultMessage='Automatic timezone'
                     />
                 }
                 containerStyle='timezone-container'
diff --git a/webapp/channels/src/i18n/de.json b/webapp/channels/src/i18n/de.json
index 8e5b64137d..798da0f947 100644
--- a/webapp/channels/src/i18n/de.json
+++ b/webapp/channels/src/i18n/de.json
@@ -5719,6 +5719,7 @@
   "user.settings.display.theme.themeDark": "Thema Dunkel",
   "user.settings.display.theme.themeAuto": "Automatisches Thema",
   "user.settings.display.timezone": "Zeitzone",
+  "user.settings.display.timezone2": "automatische Zeitzone",
   "user.settings.display.title": "Anzeigeeinstellungen",
   "user.settings.general.close": "Schließen",
   "user.settings.general.confirmEmail": "E-Mail-Adresse bestätigen",
@@ -5975,6 +5976,7 @@
   "user.settings.sidebar.title": "Seitenleisteneinstellungen",
   "user.settings.timezones.automatic": "Automatisch",
   "user.settings.timezones.promote": "Wähle die Zeitzone, die für Zeitstempel in der Benutzeroberfläche und E-Mail-Benachrichtigungen verwendet wird.",
+  "user.settings.timezones.modify" : "Seine Zeitzone ändern",
   "user.settings.tokens.activate": "Aktivieren",
   "user.settings.tokens.cancel": "Abbrechen",
   "user.settings.tokens.clickToEdit": "Klicke 'Bearbeiten', um deine persönlichen Zugriffs-Token zu verwalten",
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index 5b4be6329d..2c2025fa25 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -5734,6 +5734,7 @@
   "user.settings.display.theme.themeDark": "Dark Theme",
   "user.settings.display.theme.themeAuto": "Automatic Theme",
   "user.settings.display.timezone": "Timezone",
+  "user.settings.display.timezone2": "Automatic timezone",
   "user.settings.display.title": "Display Settings",
   "user.settings.general.close": "Close",
   "user.settings.general.confirmEmail": "Confirm Email",
@@ -5993,6 +5994,7 @@
   "user.settings.sidebar.title": "Sidebar Settings",
   "user.settings.timezones.automatic": "Automatic",
   "user.settings.timezones.promote": "Select the timezone used for timestamps in the user interface and email notifications.",
+  "user.settings.timezones.modify" : "Changing your time zone",
   "user.settings.tokens.activate": "Enable",
   "user.settings.tokens.cancel": "Cancel",
   "user.settings.tokens.clickToEdit": "Click 'Edit' to manage your personal access tokens",
diff --git a/webapp/channels/src/i18n/es.json b/webapp/channels/src/i18n/es.json
index dc0fab5ed2..4b38558c23 100644
--- a/webapp/channels/src/i18n/es.json
+++ b/webapp/channels/src/i18n/es.json
@@ -4692,6 +4692,7 @@
   "user.settings.display.theme.themeDark": "Tema Oscuro",
   "user.settings.display.theme.themeAuto": "Tema Automático",
   "user.settings.display.timezone": "Zona horaria",
+  "user.settings.display.timezone2": "Zona horaria automática",
   "user.settings.display.title": "Configuración de Visualización",
   "user.settings.general.close": "Cerrar",
   "user.settings.general.confirmEmail": "Confirmar Correo electrónico",
@@ -4921,6 +4922,7 @@
   "user.settings.sidebar.title": "Preferencias de la Barra Lateral",
   "user.settings.timezones.automatic": "Automático",
   "user.settings.timezones.promote": "Selecciona la zona horaria para ser utilizada en la interfaz de usuario y notificaciones de correo electrónico.",
+  "user.settings.timezones.modify" : "Cambiar de huso horario",
   "user.settings.tokens.activate": "Activado",
   "user.settings.tokens.botId": "Bot ID: ",
   "user.settings.tokens.cancel": "Cancelar",
diff --git a/webapp/channels/src/i18n/fr.json b/webapp/channels/src/i18n/fr.json
index 15d216d04c..7c7f9a3a74 100644
--- a/webapp/channels/src/i18n/fr.json
+++ b/webapp/channels/src/i18n/fr.json
@@ -4622,6 +4622,7 @@
   "user.settings.display.theme.themeDark": "Thème Sombre",
   "user.settings.display.theme.themeAuto": "Thème automatique",
   "user.settings.display.timezone": "Fuseau horaire",
+  "user.settings.display.timezone2": "Fuseau horaire automatique",
   "user.settings.display.title": "Paramètres d'affichage",
   "user.settings.general.close": "Fermer",
   "user.settings.general.confirmEmail": "Confirmation de l'adresse e-mail",
@@ -4861,6 +4862,7 @@
   "user.settings.sidebar.title": "Paramètres de la barre latérale",
   "user.settings.timezones.automatic": "Automatique",
   "user.settings.timezones.promote": "Sélectionnez le fuseau horaire de l'horodatage utilisé dans l'interface utilisateur et dans les notifications par e-mail.",
+  "user.settings.timezones.modify" : "Modifier son fuseau horaire",
   "user.settings.tokens.activate": "Activer",
   "user.settings.tokens.cancel": "Annuler",
   "user.settings.tokens.clickToEdit": "Cliquez sur 'Modifier' pour gérer vos jetons d'accès",
diff --git a/webapp/channels/src/i18n/it.json b/webapp/channels/src/i18n/it.json
index c6bd2f2714..cc44cb7dd6 100644
--- a/webapp/channels/src/i18n/it.json
+++ b/webapp/channels/src/i18n/it.json
@@ -3526,6 +3526,7 @@
   "user.settings.display.theme.themeDark": "Tema Scuro",
   "user.settings.display.theme.themeAuto": "Tema Automatico",
   "user.settings.display.timezone": "Fuso orario",
+  "user.settings.display.timezone2": "Fuso orario automatico",
   "user.settings.display.title": "Impostazioni aspetto",
   "user.settings.general.close": "Chiudi",
   "user.settings.general.confirmEmail": "Conferma l'indirizzo email",
@@ -3744,6 +3745,7 @@
   "user.settings.sidebar.title": "Impostazioni barra laterale",
   "user.settings.timezones.automatic": "Imposta automaticamente",
   "user.settings.timezones.promote": "Seleziona il fuso orario utilizzato per le ore nell'interfaccia utente e nelle notifiche email.",
+  "user.settings.timezones.modify" : "Cambiare il fuso orario",
   "user.settings.tokens.activate": "Attiva",
   "user.settings.tokens.botId": "Bot ID: ",
   "user.settings.tokens.cancel": "Annulla",