diff --git a/scripts/apps/users/directives/UserPreferencesDirective.ts b/scripts/apps/users/directives/UserPreferencesDirective.ts
index 49fba616da..e020b9741d 100644
--- a/scripts/apps/users/directives/UserPreferencesDirective.ts
+++ b/scripts/apps/users/directives/UserPreferencesDirective.ts
@@ -420,7 +420,7 @@ export function UserPreferencesDirective(
                         });
                     }
 
-                    p[key] = _.extend(val, scope.preferences[key]);
+                    p[key] = _.merge(val, scope.preferences[key]);
                 });
                 return p;
             }
diff --git a/scripts/apps/users/views/user-preferences.html b/scripts/apps/users/views/user-preferences.html
index 9a5d598695..685ac69741 100644
--- a/scripts/apps/users/views/user-preferences.html
+++ b/scripts/apps/users/views/user-preferences.html
@@ -19,6 +19,7 @@
                 <button class="sd-left-nav__btn" ng-class="{'sd-left-nav__btn--active': checkNavigation('planning-prefs')}" ng-click="goTo('planning-prefs')" ng-if="showPlanning()" translate>Planning</button>
                 <button class="sd-left-nav__btn" ng-class="{'sd-left-nav__btn--active': checkNavigation('vocabulary-values')}" ng-click="goTo('vocabulary-values')" ng-if="profileConfig.desks !== false" translate>Vocabulary values</button>
                 <button class="sd-left-nav__btn" ng-class="{'sd-left-nav__btn--active': checkNavigation('appearance')}" ng-click="goTo('appearance')" translate>Appearance</button>
+                <button class="sd-left-nav__btn" ng-class="{'sd-left-nav__btn--active': checkNavigation('macros-config')}" ng-click="goTo('macros-config')" ng-show = "preferences['macro_config']" translate>{{preferences['macro_config'].label}}</button>
             </nav>
         </div>
         <div class="preferences__content">
@@ -422,6 +423,17 @@ <h4 class="sd-heading sd-text-align--left sd-text--sans sd-heading--h4 sd-margin
                     </div>
                 </li>
 
+                <li ng-show = "preferences['macro_config']" class="simple-list__item simple-list__item--stacked simple-list__item--justify-flex-start">
+                    <h3 id="macros-config" class="sd-heading sd-text-align--left sd-text--sans sd-heading--h3" translate>{{preferences['macro_config'].label}}</h3>
+                    <div class="sd-container sd-container--flex sd-container--gap-none sd-container--direction-column sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus sd-margin-b--1">
+                        <div sd-info-item>
+                            <div ng-repeat="(key, field) in preferences.macro_config.fields">
+                            <label class="form-label" translate>{{ key }}</label>
+                            <input type="text" ng-model="preferences['macro_config'].fields[key]" />
+                        </div>
+                    </div>
+                </li>
+
                 <li class="simple-list__item simple-list__item--stacked simple-list__item--justify-flex-start">
 
                 </li>