diff --git a/app/javascript/packs/vue/user_preferences.js b/app/javascript/packs/vue/user_preferences.js
new file mode 100644
index 000000000..8440dc3d7
--- /dev/null
+++ b/app/javascript/packs/vue/user_preferences.js
@@ -0,0 +1,13 @@
+import TurbolinksAdapter from 'vue-turbolinks';
+import Vue from 'vue/dist/vue.esm';
+import UserPreferences from '../../vue/user_preferences/container.vue';
+import PerfectScrollbar from 'vue2-perfect-scrollbar';
+
+Vue.use(TurbolinksAdapter);
+Vue.use(PerfectScrollbar);
+Vue.prototype.i18n = window.I18n;
+
+new Vue({
+  el: '#user_preferences',
+  components: { UserPreferences }
+});
diff --git a/app/javascript/vue/user_preferences/container.vue b/app/javascript/vue/user_preferences/container.vue
new file mode 100644
index 000000000..33aba7337
--- /dev/null
+++ b/app/javascript/vue/user_preferences/container.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="content-pane flexible with-grey-background">
+    <div class="content-header">
+      <div class="title-row">
+        <h1 class="mt-0">
+          {{ i18n.t('users.settings.account.preferences.title') }}
+        </h1>
+      </div>
+    </div>
+    <div class="p-4 mb-4 bg-sn-white rounded">
+      <h2 class="mt-0">{{ i18n.t("users.settings.account.preferences.edit.time_zone_label") }}</h2>
+      <div class="text-sn-dark-grey mb-4">
+        <p>{{ i18n.t("users.settings.account.preferences.edit.time_zone_sublabel") }}</p>
+      </div>
+      <SelectSearch
+        class="max-w-[40ch]"
+        :value="selectedTimeZone"
+        @change="setTimeZone"
+        :options="timeZones"
+      />
+      <div class="sci-divider my-6"></div>
+      <h2 class="mt-0">{{ i18n.t("users.settings.account.preferences.edit.date_format_label") }}</h2>
+      <div class="text-sn-dark-grey mb-4">
+        <p>{{ i18n.t("users.settings.account.preferences.edit.date_format_sublabel") }}</p>
+      </div>
+      <SelectSearch
+        class="max-w-[40ch]"
+        :value="selectedDateFormat"
+        @change="setDateFormat"
+        :options="dateFormats"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+
+import SelectSearch from "../shared/select_search.vue";
+import axios from '../../packs/custom_axios.js';
+
+export default {
+  name: "UserPreferences",
+  props: {
+    userSettings: Object,
+    timeZones: Array,
+    dateFormats: Array,
+    updateUrl: String
+  },
+  data: function() {
+    return {
+      selectedTimeZone: null,
+      selectedDateFormat: null
+    };
+  },
+  created() {
+    this.selectedTimeZone = this.userSettings.time_zone;
+    this.selectedDateFormat = this.userSettings.date_format;
+  },
+  components: {
+    SelectSearch,
+    PerfectScrollbar
+  },
+  methods: {
+    setTimeZone(value) {
+      this.selectedTimeZone = value;
+      axios.put(this.updateUrl, {
+          user: { time_zone: value }
+      })
+    },
+    setDateFormat(value) {
+      this.selectedDateFormat = value;
+      axios.put(this.updateUrl, {
+          user: { date_format: value }
+      })
+    }
+  },
+}
+</script>
\ No newline at end of file
diff --git a/app/models/user.rb b/app/models/user.rb
index 0ee836291..af695f447 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -513,40 +513,6 @@ class User < ApplicationRecord
     user_identities.exists?(provider: provider)
   end
 
-  # json friendly attributes
-  NOTIFICATIONS_TYPES = %w(assignments_notification recent_notification
-                           assignments_email_notification
-                           recent_email_notification)
-
-  # declare notifications getters
-  NOTIFICATIONS_TYPES.each do |name|
-    define_method(name) do
-      attr_name = name.gsub('_notification', '')
-      notifications_settings.fetch(attr_name.to_sym)
-    end
-  end
-
-  # declare notifications setters
-  NOTIFICATIONS_TYPES.each do |name|
-    define_method("#{name}=") do |value|
-      attr_name = name.gsub('_notification', '').to_sym
-      notifications_settings[attr_name] = value
-    end
-  end
-
-  def enabled_notifications_for?(notification_type, channel)
-    return true if %i(deliver deliver_error).include?(notification_type)
-
-    case channel
-    when :web
-      notification_type == :recent_changes && recent_notification ||
-        notification_type == :assignment && assignments_notification
-    when :email
-      notification_type == :recent_changes && recent_email_notification ||
-        notification_type == :assignment && assignments_email_notification
-    end
-  end
-
   def increase_daily_exports_counter!
     range = Time.now.utc.beginning_of_day.to_i..Time.now.utc.end_of_day.to_i
     last_export = export_vars[:last_export_timestamp] || 0
diff --git a/app/views/users/settings/account/preferences/index.html.erb b/app/views/users/settings/account/preferences/index.html.erb
index d519e4175..2c4d780ad 100644
--- a/app/views/users/settings/account/preferences/index.html.erb
+++ b/app/views/users/settings/account/preferences/index.html.erb
@@ -1,7 +1,20 @@
 <% provide(:head_title, t("users.settings.account.preferences.head_title")) %>
-<% provide(:container_class, "no-second-nav-container") %>
 
-<%= render partial: "users/settings/sidebar" %>
+<div id="user_preferences" class="contents">
+  <user-preferences
+    :update-url = "'<%= update_preferences_path(format: :json) %>'"
+    :user-settings = "<%= @user.settings.to_json %>"
+    :time-zones = "<%= ActiveSupport::TimeZone.all.map{ |tz|
+                                [ tz.name, tz.formatted_offset + " " + tz.name]
+                              }.to_json %>"
+    :date-formats = "<%= Constants::SUPPORTED_DATE_FORMATS.map { |df|
+                                [df, "#{l(Time.new(2024, 4, 22), format: :full_date, date_format: df)}"]
+                              }.to_json %>"
+  />
+</div>
+
+<%= javascript_include_tag "vue_user_preferences" %>
+
 <div class="tab-content user-account-preferences">
   <div class="tab-pane content-pane active" role="tabpanel">
 
diff --git a/config/initializers/extends.rb b/config/initializers/extends.rb
index e64fef909..8a4e41bae 100644
--- a/config/initializers/extends.rb
+++ b/config/initializers/extends.rb
@@ -608,6 +608,7 @@ class Extends
     my_modules/activities
     results/index
     protocols/show
+    preferences/index
   )
 end
 
diff --git a/config/webpack/webpack.config.js b/config/webpack/webpack.config.js
index 6caf6a1c3..505436849 100644
--- a/config/webpack/webpack.config.js
+++ b/config/webpack/webpack.config.js
@@ -42,7 +42,8 @@ const entryList = {
   vue_components_open_vector_editor: './app/javascript/packs/vue/open_vector_editor.js',
   vue_navigation_breadcrumbs: './app/javascript/packs/vue/navigation/breadcrumbs.js',
   vue_protocol_file_import_modal: './app/javascript/packs/vue/protocol_file_import_modal.js',
-  vue_components_export_stock_consumption_modal: './app/javascript/packs/vue/export_stock_consumption_modal.js'
+  vue_components_export_stock_consumption_modal: './app/javascript/packs/vue/export_stock_consumption_modal.js',
+  vue_user_preferences: './app/javascript/packs/vue/user_preferences.js',
 }
 
 // Engine pack loading based on https://github.com/rails/webpacker/issues/348#issuecomment-635480949