diff --git a/assets/js/bolt.js b/assets/js/bolt.js
index 11750ce904..b6f4fed7d5 100644
--- a/assets/js/bolt.js
+++ b/assets/js/bolt.js
@@ -7,6 +7,7 @@ Axios.defaults.headers.common = {
     accept: 'application/vnd.api+json',
 };
 
+import './locale';
 import './jquery';
 import './codemirror';
 import './filters';
diff --git a/assets/js/locale.js b/assets/js/locale.js
new file mode 100644
index 0000000000..ee4855768f
--- /dev/null
+++ b/assets/js/locale.js
@@ -0,0 +1,16 @@
+import { Settings } from 'luxon';
+
+/*
+ ** Make Luxon format dates (incl. relative ones like "7 days ago") in the locale of the Bolt admin UI,
+ ** instead of the browser's locale. Bolt uses locale codes like 'pt_BR', while Intl expects 'pt-BR'.
+ ** An invalid locale would make Luxon throw on every date it formats, so those keep the browser's locale.
+ */
+const locale = document.documentElement.lang.replace(/_/g, '-');
+
+if (locale) {
+    try {
+        Settings.defaultLocale = Intl.getCanonicalLocales(locale)[0];
+    } catch {
+        // Keep the browser's locale
+    }
+}
diff --git a/templates/_base/layout.html.twig b/templates/_base/layout.html.twig
index f9ccf7e2c2..c0863e6394 100644
--- a/templates/_base/layout.html.twig
+++ b/templates/_base/layout.html.twig
@@ -1,7 +1,7 @@
 {# Check if aside has value and set hasAside variable #}
 {% set hasAside = block('aside')|trim is not empty ? true : false %}
 <!DOCTYPE html>
-<html lang="{{ app.user.locale|default() }}" {% if block('html_id') %}id="{% block html_id %}{% endblock %}"{% endif %}>
+<html lang="{{ app.request.locale|default('')|replace({'_': '-'}) }}" {% if block('html_id') %}id="{% block html_id %}{% endblock %}"{% endif %}>
 
 <head>
     <meta charset="utf-8">
diff --git a/templates/_macro/_macro.html.twig b/templates/_macro/_macro.html.twig
index 6eb1993271..defb00e1a8 100644
--- a/templates/_macro/_macro.html.twig
+++ b/templates/_macro/_macro.html.twig
@@ -94,7 +94,7 @@
 
 
 {% macro relative_datetime(datetime) %}{% apply spaceless %}
-    <abbr class="datetime-relative" title="{{ datetime|localdate }}">
+    <abbr class="datetime-relative" title="{{ datetime|localdate(null, app.request.locale|default(null)) }}">
         {{- datetime|date('c') -}}
     </abbr>
 {% endapply %}{% endmacro %}
diff --git a/templates/_partials/fields/date.html.twig b/templates/_partials/fields/date.html.twig
index b77cdd758e..ed1f649812 100644
--- a/templates/_partials/fields/date.html.twig
+++ b/templates/_partials/fields/date.html.twig
@@ -41,7 +41,7 @@
     :errormessage='{{ errormessage|json_encode }}'
   ></editor-date>
   {% else %}
-    {{ value|localdate(format|default(null), locale|default(null)) }}
+    {{ value|localdate(format|default(null), locale|default(app.request.locale|default(null))) }}
       <small>({{ macro.relative_datetime(value) }})</small>
   {% endif %}