diff --git a/addons/web/static/src/core/action_swiper/action_swiper.js b/addons/web/static/src/core/action_swiper/action_swiper.js
index 30d3240bb82..cda3b2c6140 100644
--- a/addons/web/static/src/core/action_swiper/action_swiper.js
+++ b/addons/web/static/src/core/action_swiper/action_swiper.js
@@ -4,6 +4,7 @@ import { localization } from "@web/core/l10n/localization";
 import { clamp } from "@web/core/utils/numbers";
 
 import { Component, onMounted, onWillUnmount, useRef, useState } from "@odoo/owl";
+import { Deferred } from "@web/core/utils/concurrency";
 
 const isScrollSwipable = (scrollables) => {
     return {
@@ -164,21 +165,23 @@ export class ActionSwiper extends Component {
         if (this.props.animationType === "bounce") {
             this.state.containerStyle = `transform: translateX(${this.swipedDistance}px)`;
             this.actionTimeoutId = browser.setTimeout(() => {
-                action();
+                action(Promise.resolve());
                 this._reset();
             }, 500);
         } else if (this.props.animationType === "forwards") {
             this.state.containerStyle = `transform: translateX(${this.swipedDistance}px)`;
             this.actionTimeoutId = browser.setTimeout(() => {
-                action();
+                const prom = new Deferred();
+                action(prom);
                 this.state.isSwiping = true;
                 this.state.containerStyle = `transform: translateX(${-this.swipedDistance}px)`;
                 this.resetTimeoutId = browser.setTimeout(() => {
+                    prom.resolve();
                     this._reset();
                 }, 100);
             }, 100);
         } else {
-            return action();
+            return action(Promise.resolve());
         }
     }
 }
diff --git a/addons/web/static/src/webclient/settings_form_view/settings/settings_page.js b/addons/web/static/src/webclient/settings_form_view/settings/settings_page.js
index d3b24805ac5..1c7ac0f7c95 100644
--- a/addons/web/static/src/webclient/settings_form_view/settings/settings_page.js
+++ b/addons/web/static/src/webclient/settings_form_view/settings/settings_page.js
@@ -15,6 +15,7 @@ export class SettingsPage extends Component {
         }
 
         this.settingsRef = useRef("settings");
+        this.settingsTabRef = useRef("settings_tab");
         this.scrollMap = Object.create(null);
         useEffect(
             (settingsEl, currentTab) => {
@@ -47,11 +48,22 @@ export class SettingsPage extends Component {
             this.getCurrentIndex() !== this.props.modules.length - 1
         );
     }
-    onRightSwipe() {
+    async onRightSwipe(prom) {
         this.state.selectedTab = this.props.modules[this.getCurrentIndex() - 1].key;
+        await prom;
+        this.scrollToSelectedTab();
     }
-    onLeftSwipe() {
+    async onLeftSwipe(prom) {
         this.state.selectedTab = this.props.modules[this.getCurrentIndex() + 1].key;
+        await prom;
+        this.scrollToSelectedTab();
+    }
+
+    scrollToSelectedTab() {
+        const key = this.state.selectedTab;
+        this.settingsTabRef.el
+            .querySelector(`[data-key='${key}']`)
+            .scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
     }
 
     onSettingTabClick(key) {
diff --git a/addons/web/static/src/webclient/settings_form_view/settings/settings_page.xml b/addons/web/static/src/webclient/settings_form_view/settings/settings_page.xml
index 7663c8166f7..648027b6d50 100644
--- a/addons/web/static/src/webclient/settings_form_view/settings/settings_page.xml
+++ b/addons/web/static/src/webclient/settings_form_view/settings/settings_page.xml
@@ -3,11 +3,11 @@
     <t t-name="web.SettingsPage">
         <div class="o_setting_container">
             <div class="position-sticky top-0 flex-grow-0 z-index-1">
-                <div class="settings_tab h-100 border-end" t-if="!env.isSmall or state.search.value.length === 0">
+                <div class="settings_tab h-100 border-end" t-if="!env.isSmall or state.search.value.length === 0" t-ref="settings_tab">
                     <t t-foreach="props.modules" t-as="module" t-key="module.key">
                         <div class="tab" t-if="!module.isVisible"
                              t-att-class="{
-                                'selected': state.selectedTab === module.key and state.search.value.length === 0, 'position-sticky start-0 end-0 text-bg-primary z-index-1 shadow-none': state.selectedTab === module.key and state.search.value.length === 0 and env.isSmall
+                                'selected': state.selectedTab === module.key and state.search.value.length === 0, 'text-bg-primary shadow-none': state.selectedTab === module.key and state.search.value.length === 0 and env.isSmall
                              }" t-att-data-key="module.key" role="tab" t-on-click="() => this.onSettingTabClick(module.key)">
                             <div class="icon d-none d-md-block" t-attf-style="background : url('{{module.imgurl}}') no-repeat center;background-size:contain;"/> <span class="app_name"><t t-esc="module.string"/></span>
                         </div>