diff --git a/addons/web/static/src/js/services/config.js b/addons/web/static/src/js/services/config.js
index cb32ed583d4..0ca1c912b27 100644
--- a/addons/web/static/src/js/services/config.js
+++ b/addons/web/static/src/js/services/config.js
@@ -47,9 +47,9 @@ var config = {
          */
         isMobile: null,
         /**
-         * Mapping between the numbers 0,1,2,3,4 and some descriptions
+         * Mapping between the numbers 0,1,2,3,4,5 and some descriptions
          */
-        SIZES: { XXS: 0, XS: 1, SM: 2, MD: 3, LG: 4 },
+        SIZES: { XXS: 0, XS: 1, SM: 2, MD: 3, LG: 4, XL: 5 },
     },
 };
 
@@ -59,13 +59,14 @@ var medias = [
     window.matchMedia('(min-width: 475px) and (max-width: 767px)'),
     window.matchMedia('(min-width: 768px) and (max-width: 991px)'),
     window.matchMedia('(min-width: 992px) and (max-width: 1199px)'),
-    window.matchMedia('(min-width: 1200px)')
+    window.matchMedia('(min-width: 1200px) and (max-width: 1533px)'),
+    window.matchMedia('(min-width: 1534px)'),
 ];
 
 /**
  * Return the current size class
  *
- * @returns {integer} a number between 0 and 3, included
+ * @returns {integer} a number between 0 and 5, included
  */
 function _getSizeClass() {
     for(var i = 0 ; i < medias.length ; i++) {
diff --git a/addons/web/static/src/less/variables.less b/addons/web/static/src/less/variables.less
index 9195f33295b..5e3dd01d313 100644
--- a/addons/web/static/src/less/variables.less
+++ b/addons/web/static/src/less/variables.less
@@ -62,6 +62,9 @@
 @screen-xs-min: 475px;
 @screen-xxs-max: (@screen-xs-min - 1);
 
+@screen-xl-min: 1534px;
+@screen-lg-max: (@screen-xl-min - 1);
+
 @odoo-form-group-cols: 12;
 @odoo-form-spacing-unit: 5px;
 @odoo-horizontal-padding: 16px;