diff --git a/frontend/composables/recipes/use-recipes.ts b/frontend/composables/recipes/use-recipes.ts
index a9c15d52712e..5d465797a7ab 100644
--- a/frontend/composables/recipes/use-recipes.ts
+++ b/frontend/composables/recipes/use-recipes.ts
@@ -61,8 +61,8 @@ export const useLazyRecipes = function () {
 
   const recipes = ref<Recipe[]>([]);
 
-  async function fetchMore(start: number, limit: number) {
-    const { data } = await api.recipes.getAll(start, limit);
+  async function fetchMore(start: number, limit: number, orderBy: string | null = null, orderDescending = true) {
+    const { data } = await api.recipes.getAll(start, limit, { orderBy, orderDescending });
     if (data) {
       data.forEach((recipe) => {
         recipes.value?.push(recipe);
diff --git a/frontend/pages/recipes/all.vue b/frontend/pages/recipes/all.vue
index 58bae8e0d670..30062e1a5fd1 100644
--- a/frontend/pages/recipes/all.vue
+++ b/frontend/pages/recipes/all.vue
@@ -22,8 +22,12 @@ import { useLazyRecipes } from "~/composables/recipes";
 export default defineComponent({
   components: { RecipeCardSection },
   setup() {
-    const start = ref(0);
+    // paging and sorting params
+    const orderBy = "name";
+    const orderDescending =  false;
     const increment = ref(30);
+
+    const start = ref(0);
     const offset = ref(increment.value);
     const limit = ref(increment.value);
     const ready = ref(false);
@@ -32,7 +36,7 @@ export default defineComponent({
     const { recipes, fetchMore } = useLazyRecipes();
 
     onMounted(async () => {
-      await fetchMore(start.value, limit.value);
+      await fetchMore(start.value, limit.value, orderBy, orderDescending);
       ready.value = true;
     });
 
@@ -43,7 +47,7 @@ export default defineComponent({
       loading.value = true;
       start.value = offset.value + 1;
       offset.value = offset.value + increment.value;
-      fetchMore(start.value, limit.value);
+      fetchMore(start.value, limit.value, orderBy, orderDescending);
       loading.value = false;
     }, 500);