diff --git a/front/pages/settings/about.vue b/front/pages/settings/about.vue
index 80d49bb..5a878cb 100644
--- a/front/pages/settings/about.vue
+++ b/front/pages/settings/about.vue
@@ -39,6 +39,7 @@ import { useDataStore } from '~/stores/dataStore'
 import { useToolbar } from '~/composables/useToolbar'
 import RouteConstants from '~/constants/RouteConstants'
 import { REPO_URL } from '~/constants/Constants'
+import { onMounted } from 'vue'
 
 const appStore = useAppStore()
 const dataStore = useDataStore()
@@ -48,4 +49,8 @@ toolbar.init({
   title: 'About',
   backRoute: RouteConstants.ROUTE_SETTINGS,
 })
+
+onMounted(() => {
+  animateSettings()
+})
 </script>
diff --git a/front/pages/settings/app-config.vue b/front/pages/settings/app-config.vue
index bbf5317..2753e88 100644
--- a/front/pages/settings/app-config.vue
+++ b/front/pages/settings/app-config.vue
@@ -93,4 +93,8 @@ toolbar.init({
   title: 'App settings',
   backRoute: RouteConstants.ROUTE_SETTINGS,
 })
+
+onMounted(() => {
+  animateSettings()
+})
 </script>
diff --git a/front/pages/settings/index.vue b/front/pages/settings/index.vue
index 660dad5..7b616d8 100644
--- a/front/pages/settings/index.vue
+++ b/front/pages/settings/index.vue
@@ -45,4 +45,8 @@ const toolbar = useToolbar()
 
 toolbar.init({ title: 'Settings' })
 
+onMounted(() => {
+  animateSettings()
+})
+
 </script>
diff --git a/front/pages/settings/user-preferences-dashboard.vue b/front/pages/settings/user-preferences-dashboard.vue
index c6078ba..12156ba 100644
--- a/front/pages/settings/user-preferences-dashboard.vue
+++ b/front/pages/settings/user-preferences-dashboard.vue
@@ -67,4 +67,8 @@ toolbar.init({
   title: 'Dashboard preferences',
   backRoute: RouteConstants.ROUTE_SETTINGS,
 })
+
+onMounted(() => {
+  animateSettings()
+})
 </script>
diff --git a/front/pages/settings/user-preferences-date.vue b/front/pages/settings/user-preferences-date.vue
index 9589bff..bb24bb4 100644
--- a/front/pages/settings/user-preferences-date.vue
+++ b/front/pages/settings/user-preferences-date.vue
@@ -75,4 +75,8 @@ toolbar.init({
   title: 'Date preferences',
   backRoute: RouteConstants.ROUTE_SETTINGS,
 })
+
+onMounted(() => {
+  animateSettings()
+})
 </script>
diff --git a/front/pages/settings/user-preferences-new-transaction-defaults.vue b/front/pages/settings/user-preferences-new-transaction-defaults.vue
index 4f8d2e1..3100ac9 100644
--- a/front/pages/settings/user-preferences-new-transaction-defaults.vue
+++ b/front/pages/settings/user-preferences-new-transaction-defaults.vue
@@ -65,4 +65,8 @@ toolbar.init({
   title: 'New transaction defaults',
   backRoute: RouteConstants.ROUTE_SETTINGS,
 })
+
+onMounted(() => {
+  animateSettings()
+})
 </script>
diff --git a/front/pages/settings/user-preferences-quick-transaction-amounts.vue b/front/pages/settings/user-preferences-quick-transaction-amounts.vue
index c7f92b3..3197ba4 100644
--- a/front/pages/settings/user-preferences-quick-transaction-amounts.vue
+++ b/front/pages/settings/user-preferences-quick-transaction-amounts.vue
@@ -60,4 +60,8 @@ toolbar.init({
   title: 'Quick transaction amounts',
   backRoute: RouteConstants.ROUTE_SETTINGS_USER_PREFERENCES_TRANSACTIONS,
 })
+
+onMounted(() => {
+  animateSettings()
+})
 </script>
diff --git a/front/pages/settings/user-preferences-transaction-fields-order.vue b/front/pages/settings/user-preferences-transaction-fields-order.vue
index 95dae18..09354e2 100644
--- a/front/pages/settings/user-preferences-transaction-fields-order.vue
+++ b/front/pages/settings/user-preferences-transaction-fields-order.vue
@@ -57,4 +57,9 @@ toolbar.init({
   title: 'Transaction fields order',
   backRoute: RouteConstants.ROUTE_SETTINGS_USER_PREFERENCES_TRANSACTIONS,
 })
+
+onMounted(() => {
+  animateSettings()
+})
+
 </script>
diff --git a/front/pages/settings/user-preferences-transactions.vue b/front/pages/settings/user-preferences-transactions.vue
index bcf37b4..f830ea4 100644
--- a/front/pages/settings/user-preferences-transactions.vue
+++ b/front/pages/settings/user-preferences-transactions.vue
@@ -122,4 +122,9 @@ toolbar.init({
   title: 'Transaction config',
   backRoute: RouteConstants.ROUTE_SETTINGS,
 })
+
+onMounted(() => {
+  animateSettings()
+})
+
 </script>
diff --git a/front/pages/settings/user-preferences-ui.vue b/front/pages/settings/user-preferences-ui.vue
index 797be7f..50f6197 100644
--- a/front/pages/settings/user-preferences-ui.vue
+++ b/front/pages/settings/user-preferences-ui.vue
@@ -97,8 +97,7 @@ toolbar.init({
   backRoute: RouteConstants.ROUTE_SETTINGS,
 })
 
-onMounted(async () => {
-  await nextTick()
+onMounted(() => {
   animateSettings()
 })
 </script>
diff --git a/front/utils/AnimationUtils.js b/front/utils/AnimationUtils.js
index 5c3b060..bc6cf16 100644
--- a/front/utils/AnimationUtils.js
+++ b/front/utils/AnimationUtils.js
@@ -29,14 +29,28 @@ export async function animateTransactionForm () {
   })
 }
 
-export function animateSettings() {
+export async function animateSettings() {
+  await nextTick()
+
   anime({
-    targets: `.van-cell-group`,
-    translateY: [-100, 0],
+    targets: `.van-cell`,
+
+    translateY: [50, 0],
     opacity: [0, 1],
-    duration: 1000,
-    delay: anime.stagger(100, { start: 200 }),
+
+    // translateY: [-10, 0],
+    // opacity: [0.1, 1],
+    // duration: 400,
+    delay: anime.stagger(30, { start: 0 }),
   })
+
+  // anime({
+  //   targets: `.van-cell-group`,
+  //   translateY: [-100, 0],
+  //   opacity: [0, 1],
+  //   duration: 1000,
+  //   delay: anime.stagger(100, { start: 200 }),
+  // })
 }
 
 export async function animateDashboard() {