diff --git a/src/components/ProductOrderMenu.vue b/src/components/ProductOrderMenu.vue
new file mode 100644
index 00000000000..d5b3f2030d6
--- /dev/null
+++ b/src/components/ProductOrderMenu.vue
@@ -0,0 +1,39 @@
+<template>
+  <v-menu scroll-strategy="close">
+    <template v-slot:activator="{ props }">
+      <v-btn v-bind="props" size="small" rounded="xl" prepend-icon="mdi-arrow-down" :append-icon="getCurrentProductOrderIcon" :active="!!productOrder">{{ $t('Common.Order') }}</v-btn>
+    </template>
+    <v-list>
+      <v-list-item :slim="true" v-for="order in productOrderList" :key="order.key" :prepend-icon="order.icon" :active="productOrder === order.key" @click="selectProductOrder(order.key)">
+        {{ $t('Common.' + order.value) }}
+      </v-list-item>
+    </v-list>
+  </v-menu>
+</template>
+
+<script>
+import constants from '../constants'
+
+export default {
+  props: {
+    'productOrder': String,
+  },
+  data() {
+    return {
+      productOrderList: constants.PRODUCT_ORDER_LIST,
+    }
+  },
+  computed: {
+    getCurrentProductOrderIcon() {
+      let currentProductOrder = this.productOrderList.find(o => o.key === this.productOrder)
+      return currentProductOrder ? currentProductOrder.icon : ''
+    },
+  },
+  emits: ['update:productOrder'],
+  methods: {
+    selectProductOrder(order) {
+      this.$emit('update:productOrder', order)
+    }
+  }
+}
+</script>
diff --git a/src/constants.js b/src/constants.js
index ba5639a3a16..87f1f9e5845 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -14,12 +14,12 @@ export default {
   PRICE_FILTER_LIST: [
     { key: 'only_last_30d', value: 'FilterPriceMoreThan30DaysHide' },
   ],
-  ORDER_BY_PARAM: 'order_by',
-  PRODUCT_ORDER_BY_LIST: [
+  ORDER_PARAM: 'order',
+  PRODUCT_ORDER_LIST: [
     { key: '-unique_scans_n', value: 'OrderProductUniqueScansDESC', icon: 'mdi-barcode-scan' },
     { key: '-price_count', value: 'OrderProductPriceCountDESC', icon: 'mdi-tag-multiple-outline' },
   ],
-  PRICE_ORDER_BY_LIST: [
+  PRICE_ORDER_LIST: [
     { key: 'price', value: 'OrderPriceASC', icon: 'mdi-order-numeric-ascending' },
     { key: '-date', value: 'OrderPriceDateDESC', icon: 'mdi-calendar' },
     { key: '-created', value: 'OrderPriceCreatedDESC', icon: 'mdi-clock-outline' },
diff --git a/src/views/BrandDetail.vue b/src/views/BrandDetail.vue
index c69afa6a2d8..9baf8458889 100644
--- a/src/views/BrandDetail.vue
+++ b/src/views/BrandDetail.vue
@@ -31,17 +31,7 @@
   <v-row v-if="!loading">
     <v-col>
       <ProductFilterMenu :productFilter="productFilter" @update:productFilter="toggleProductFilter($event)"></ProductFilterMenu>
-
-      <v-menu scroll-strategy="close">
-        <template v-slot:activator="{ props }">
-          <v-btn v-bind="props" size="small" prepend-icon="mdi-arrow-down" :append-icon="getCurrentProductOrderIcon"  :active="!!productOrder">{{ $t('Common.Order') }}</v-btn>
-        </template>
-        <v-list>
-          <v-list-item :slim="true" v-for="order in productOrderList" :key="order.key" :prepend-icon="order.icon" :active="productOrder === order.key" @click="selectProductOrder(order.key)">
-            {{ $t('Common.' + order.value) }}
-          </v-list-item>
-        </v-list>
-      </v-menu>
+      <ProductOrderMenu :productOrder="productOrder" @update:productOrder="selectProductOrder($event)"></ProductOrderMenu>
     </v-col>
   </v-row>
 
@@ -65,6 +55,7 @@ import { defineAsyncComponent } from 'vue'
 
 export default {
   components: {
+    'ProductFilterMenu': defineAsyncComponent(() => import('../components/ProductFilterMenu.vue')),
     'ProductFilterMenu': defineAsyncComponent(() => import('../components/ProductFilterMenu.vue')),
     'ProductCard': defineAsyncComponent(() => import('../components/ProductCard.vue')),
     'OpenFoodFactsLink': defineAsyncComponent(() => import('../components/OpenFoodFactsLink.vue')),
@@ -74,8 +65,7 @@ export default {
     return {
       // filter & order
       productFilter: '',
-      productOrder: constants.PRODUCT_ORDER_BY_LIST[1].key,
-      productOrderList: constants.PRODUCT_ORDER_BY_LIST,
+      productOrder: constants.PRODUCT_ORDER_LIST[1].key,
       // data
       brand: null,  // see init
       brandProductList: [],
@@ -85,10 +75,6 @@ export default {
     }
   },
   computed: {
-    getCurrentProductOrderIcon() {
-      let currentProductOrder = this.productOrderList.find(o => o.key === this.productOrder)
-      return currentProductOrder ? currentProductOrder.icon : ''
-    },
     getProductsParams() {
       let defaultParams = { brands__like: this.brand, order_by: `${this.productOrder}`, page: this.brandProductPage }
       if (this.productFilter && this.productFilter === 'hide_price_count_gte_1') {
@@ -99,7 +85,7 @@ export default {
   },
   mounted() {
     this.productFilter = this.$route.query[constants.FILTER_PARAM] || this.productFilter
-    this.productOrder = this.$route.query[constants.ORDER_BY_PARAM] || this.productOrder
+    this.productOrder = this.$route.query[constants.ORDER_PARAM] || this.productOrder
     this.initBrand()
   },
   methods: {
@@ -128,7 +114,7 @@ export default {
     selectProductOrder(orderKey) {
       if (this.productOrder !== orderKey) {
         this.productOrder = orderKey
-        this.$router.push({ query: { ...this.$route.query, [constants.ORDER_BY_PARAM]: this.productOrder } })
+        this.$router.push({ query: { ...this.$route.query, [constants.ORDER_PARAM]: this.productOrder } })
         // this.initBrand() will be called in watch $route
       }
     }
diff --git a/src/views/CategoryDetail.vue b/src/views/CategoryDetail.vue
index 365f5e43c2c..7849d670125 100644
--- a/src/views/CategoryDetail.vue
+++ b/src/views/CategoryDetail.vue
@@ -31,17 +31,7 @@
   <v-row v-if="!loading">
     <v-col>
       <ProductFilterMenu :productFilter="productFilter" @update:productFilter="toggleProductFilter($event)"></ProductFilterMenu>
-
-      <v-menu scroll-strategy="close">
-        <template v-slot:activator="{ props }">
-          <v-btn v-bind="props" size="small" prepend-icon="mdi-arrow-down" :append-icon="getCurrentProductOrderIcon"  :active="!!productOrder">{{ $t('Common.Order') }}</v-btn>
-        </template>
-        <v-list>
-          <v-list-item :slim="true" v-for="order in productOrderList" :key="order.key" :prepend-icon="order.icon" :active="productOrder === order.key" @click="selectProductOrder(order.key)">
-            {{ $t('Common.' + order.value) }}
-          </v-list-item>
-        </v-list>
-      </v-menu>
+      <ProductOrderMenu :productOrder="productOrder" @update:productOrder="selectProductOrder($event)"></ProductOrderMenu>
     </v-col>
   </v-row>
 
@@ -66,6 +56,7 @@ import { defineAsyncComponent } from 'vue'
 export default {
   components: {
     'ProductFilterMenu': defineAsyncComponent(() => import('../components/ProductFilterMenu.vue')),
+    'ProductOrderMenu': defineAsyncComponent(() => import('../components/ProductOrderMenu.vue')),
     'ProductCard': defineAsyncComponent(() => import('../components/ProductCard.vue')),
     'OpenFoodFactsLink': defineAsyncComponent(() => import('../components/OpenFoodFactsLink.vue')),
     'ShareButton': defineAsyncComponent(() => import('../components/ShareButton.vue'))
@@ -74,8 +65,7 @@ export default {
     return {
       // filter & order
       productFilter: '',
-      productOrder: constants.PRODUCT_ORDER_BY_LIST[1].key,
-      productOrderList: constants.PRODUCT_ORDER_BY_LIST,
+      productOrder: constants.PRODUCT_ORDER_LIST[1].key,
       // data
       category: null,  // see init
       categoryProductList: [],
@@ -85,10 +75,6 @@ export default {
     }
   },
   computed: {
-    getCurrentProductOrderIcon() {
-      let currentProductOrder = this.productOrderList.find(o => o.key === this.productOrder)
-      return currentProductOrder ? currentProductOrder.icon : ''
-    },
     getProductsParams() {
       let defaultParams = { categories_tags__contains: this.category, order_by: `${this.productOrder}`, page: this.categoryProductPage }
       if (this.productFilter && this.productFilter === 'hide_price_count_gte_1') {
@@ -99,7 +85,7 @@ export default {
   },
   mounted() {
     this.productFilter = this.$route.query[constants.FILTER_PARAM] || this.productFilter
-    this.productOrder = this.$route.query[constants.ORDER_BY_PARAM] || this.productOrder
+    this.productOrder = this.$route.query[constants.ORDER_PARAM] || this.productOrder
     this.initCategory()
   },
   methods: {
@@ -128,7 +114,7 @@ export default {
     selectProductOrder(orderKey) {
       if (this.productOrder !== orderKey) {
         this.productOrder = orderKey
-        this.$router.push({ query: { ...this.$route.query, [constants.ORDER_BY_PARAM]: this.productOrder } })
+        this.$router.push({ query: { ...this.$route.query, [constants.ORDER_PARAM]: this.productOrder } })
         // this.initCategory() will be called in watch $route
       }
     }
diff --git a/src/views/LocationDetail.vue b/src/views/LocationDetail.vue
index 9ca6ea900ce..047c01df64f 100644
--- a/src/views/LocationDetail.vue
+++ b/src/views/LocationDetail.vue
@@ -93,13 +93,13 @@ export default {
       // filter & order
       priceFilter: '',
       priceFilterList: constants.PRICE_FILTER_LIST,
-      priceOrder: constants.PRICE_ORDER_BY_LIST[1].key,
-      priceOrderList: constants.PRICE_ORDER_BY_LIST,
+      priceOrder: constants.PRICE_ORDER_LIST[1].key,
+      priceOrderList: constants.PRICE_ORDER_LIST,
     }
   },
   mounted() {
     this.priceFilter = this.$route.query[constants.FILTER_PARAM] || this.priceFilter
-    this.priceOrder = this.$route.query[constants.ORDER_BY_PARAM] || this.priceOrder
+    this.priceOrder = this.$route.query[constants.ORDER_PARAM] || this.priceOrder
     this.getLocation(),
     this.getLocationPrices()
   },
@@ -163,7 +163,7 @@ export default {
     selectPriceOrder(orderKey) {
       if (this.priceOrder !== orderKey) {
         this.priceOrder = orderKey
-        this.$router.push({ query: { ...this.$route.query, [constants.ORDER_BY_PARAM]: this.priceOrder } })
+        this.$router.push({ query: { ...this.$route.query, [constants.ORDER_PARAM]: this.priceOrder } })
         // this.initLocationPrices() will be called in watch $route
       }
     }
diff --git a/src/views/ProductDetail.vue b/src/views/ProductDetail.vue
index 9ca248fa8ae..f0a6c71bab8 100644
--- a/src/views/ProductDetail.vue
+++ b/src/views/ProductDetail.vue
@@ -102,13 +102,13 @@ export default {
       // filter & order
       priceFilter: '',
       priceFilterList: constants.PRICE_FILTER_LIST,
-      priceOrder: constants.PRICE_ORDER_BY_LIST[1].key,
-      priceOrderList: constants.PRICE_ORDER_BY_LIST,
+      priceOrder: constants.PRICE_ORDER_LIST[1].key,
+      priceOrderList: constants.PRICE_ORDER_LIST,
     }
   },
   mounted() {
     this.priceFilter = this.$route.query[constants.FILTER_PARAM] || this.priceFilter
-    this.priceOrder = this.$route.query[constants.ORDER_BY_PARAM] || this.priceOrder
+    this.priceOrder = this.$route.query[constants.ORDER_PARAM] || this.priceOrder
     this.getProduct(),
     this.initProductPrices()
   },
@@ -177,7 +177,7 @@ export default {
     selectPriceOrder(orderKey) {
       if (this.priceOrder !== orderKey) {
         this.priceOrder = orderKey
-        this.$router.push({ query: { ...this.$route.query, [constants.ORDER_BY_PARAM]: this.priceOrder } })
+        this.$router.push({ query: { ...this.$route.query, [constants.ORDER_PARAM]: this.priceOrder } })
         // this.initProductPrices() will be called in watch $route
       }
     }
diff --git a/src/views/ProductList.vue b/src/views/ProductList.vue
index 0cdabe132cf..5a8ffd9fe04 100644
--- a/src/views/ProductList.vue
+++ b/src/views/ProductList.vue
@@ -10,16 +10,7 @@
         {{ productTotal }}<span class="d-none d-sm-inline">&nbsp;products</span>
       </v-chip>
       <ProductFilterMenu :productFilter="productFilter" @update:productFilter="toggleProductFilter($event)"></ProductFilterMenu>
-      <v-menu scroll-strategy="close">
-        <template v-slot:activator="{ props }">
-          <v-btn v-bind="props" size="small" prepend-icon="mdi-arrow-down" :append-icon="getCurrentProductOrderIcon" :active="!!productOrder">{{ $t('Common.Order') }}</v-btn>
-        </template>
-        <v-list>
-          <v-list-item :slim="true" v-for="order in productOrderList" :key="order.key" :prepend-icon="order.icon" :active="productOrder === order.key" @click="selectProductOrder(order.key)">
-            {{ $t('Common.' + order.value) }}
-          </v-list-item>
-        </v-list>
-      </v-menu>
+      <ProductOrderMenu :productOrder="productOrder" @update:productOrder="selectProductOrder($event)"></ProductOrderMenu>
     </v-col>
   </v-row>
 
@@ -44,14 +35,14 @@ import { defineAsyncComponent } from 'vue'
 export default {
   components: {
     'ProductFilterMenu': defineAsyncComponent(() => import('../components/ProductFilterMenu.vue')),
+    'ProductOrderMenu': defineAsyncComponent(() => import('../components/ProductOrderMenu.vue')),
     'ProductCard': defineAsyncComponent(() => import('../components/ProductCard.vue')),
   },
   data() {
     return {
       // filter & order
       productFilter: '',
-      productOrder: constants.PRODUCT_ORDER_BY_LIST[1].key,
-      productOrderList: constants.PRODUCT_ORDER_BY_LIST,
+      productOrder: constants.PRODUCT_ORDER_LIST[1].key,
       // data
       productList: [],
       productTotal: null,
@@ -60,10 +51,6 @@ export default {
     }
   },
   computed: {
-    getCurrentProductOrderIcon() {
-      let currentProductOrder = this.productOrderList.find(o => o.key === this.productOrder)
-      return currentProductOrder ? currentProductOrder.icon : ''
-    },
     getProductsParams() {
       let defaultParams = { order_by: `${this.productOrder}`, page: this.productPage }
       if (this.productFilter && this.productFilter === 'hide_price_count_gte_1') {
@@ -74,7 +61,7 @@ export default {
   },
   mounted() {
     this.productFilter = this.$route.query[constants.FILTER_PARAM] || this.productFilter
-    this.productOrder = this.$route.query[constants.ORDER_BY_PARAM] || this.productOrder
+    this.productOrder = this.$route.query[constants.ORDER_PARAM] || this.productOrder
     this.initProductList()
   },
   methods: {
@@ -102,7 +89,7 @@ export default {
     selectProductOrder(orderKey) {
       if (this.productOrder !== orderKey) {
         this.productOrder = orderKey
-        this.$router.push({ query: { ...this.$route.query, [constants.ORDER_BY_PARAM]: this.productOrder } })
+        this.$router.push({ query: { ...this.$route.query, [constants.ORDER_PARAM]: this.productOrder } })
         // this.initProductList() will be called in watch $route
       }
     }
diff --git a/src/views/UserDetail.vue b/src/views/UserDetail.vue
index 8896896d762..249d3433dcb 100644
--- a/src/views/UserDetail.vue
+++ b/src/views/UserDetail.vue
@@ -85,8 +85,8 @@ export default {
       // filter & order
       priceFilter: '',
       priceFilterList: constants.PRICE_FILTER_LIST,
-      priceOrder: constants.PRICE_ORDER_BY_LIST[1].key,
-      priceOrderList: constants.PRICE_ORDER_BY_LIST,
+      priceOrder: constants.PRICE_ORDER_LIST[1].key,
+      priceOrderList: constants.PRICE_ORDER_LIST,
     }
   },
   computed: {
@@ -110,7 +110,7 @@ export default {
   },
   mounted() {
     this.priceFilter = this.$route.query[constants.FILTER_PARAM] || this.priceFilter
-    this.priceOrder = this.$route.query[constants.ORDER_BY_PARAM] || this.priceOrder
+    this.priceOrder = this.$route.query[constants.ORDER_PARAM] || this.priceOrder
     this.getUserPrices()
   },
   methods: {
@@ -138,7 +138,7 @@ export default {
     selectPriceOrder(orderKey) {
       if (this.priceOrder !== orderKey) {
         this.priceOrder = orderKey
-        this.$router.push({ query: { ...this.$route.query, [constants.ORDER_BY_PARAM]: this.priceOrder } })
+        this.$router.push({ query: { ...this.$route.query, [constants.ORDER_PARAM]: this.priceOrder } })
         // this.initUserPrices() will be called in watch $route
       }
     }