diff --git a/frontend/components/Domain/Recipe/RecipeCardSection.vue b/frontend/components/Domain/Recipe/RecipeCardSection.vue
index fe201bd25..64fb9c0b3 100644
--- a/frontend/components/Domain/Recipe/RecipeCardSection.vue
+++ b/frontend/components/Domain/Recipe/RecipeCardSection.vue
@@ -236,14 +236,17 @@ export default defineComponent({
     });
 
     async function fetchRecipes(pageCount = 1) {
+      const orderDir = props.query?.orderDirection || preferences.value.orderDirection;
+      const orderByNullPosition = props.query?.orderByNullPosition || orderDir === "asc" ? "first" : "last";
       return await fetchMore(
         page.value,
         perPage * pageCount,
         props.query?.orderBy || preferences.value.orderBy,
-        props.query?.orderDirection || preferences.value.orderDirection,
+        orderDir,
+        orderByNullPosition,
         props.query,
         // we use a computed queryFilter to filter out recipes that have a null value for the property we're sorting by
-        queryFilter.value
+        queryFilter.value,
       );
     }
 
diff --git a/frontend/composables/recipes/use-recipes.ts b/frontend/composables/recipes/use-recipes.ts
index aef1c0c1c..9286968f3 100644
--- a/frontend/composables/recipes/use-recipes.ts
+++ b/frontend/composables/recipes/use-recipes.ts
@@ -2,7 +2,7 @@ import { useAsync, useRouter, ref } from "@nuxtjs/composition-api";
 import { useAsyncKey } from "../use-utils";
 import { usePublicExploreApi } from "~/composables/api/api-client";
 import { useUserApi } from "~/composables/api";
-import { Recipe } from "~/lib/api/types/recipe";
+import { OrderByNullPosition, Recipe } from "~/lib/api/types/recipe";
 import { RecipeSearchQuery } from "~/lib/api/user/recipes/recipe";
 
 export const allRecipes = ref<Recipe[]>([]);
@@ -11,12 +11,14 @@ export const recentRecipes = ref<Recipe[]>([]);
 function getParams(
   orderBy: string | null = null,
   orderDirection = "desc",
+  orderByNullPosition: OrderByNullPosition | null = null,
   query: RecipeSearchQuery | null = null,
   queryFilter: string | null = null
 ) {
   return {
     orderBy,
     orderDirection,
+    orderByNullPosition,
     paginationSeed: query?._searchSeed, // propagate searchSeed to stabilize random order pagination
     searchSeed: query?._searchSeed, // unused, but pass it along for completeness of data
     search: query?.search,
@@ -47,6 +49,7 @@ export const useLazyRecipes = function (publicGroupSlug: string | null = null) {
     perPage: number,
     orderBy: string | null = null,
     orderDirection = "desc",
+    orderByNullPosition: OrderByNullPosition | null = null,
     query: RecipeSearchQuery | null = null,
     queryFilter: string | null = null,
   ) {
@@ -54,7 +57,7 @@ export const useLazyRecipes = function (publicGroupSlug: string | null = null) {
     const { data, error } = await api.recipes.getAll(
       page,
       perPage,
-      getParams(orderBy, orderDirection, query, queryFilter),
+      getParams(orderBy, orderDirection, orderByNullPosition, query, queryFilter),
     );
 
     if (error?.response?.status === 404) {
@@ -88,7 +91,7 @@ export const useLazyRecipes = function (publicGroupSlug: string | null = null) {
   }
 
   async function getRandom(query: RecipeSearchQuery | null = null, queryFilter: string | null = null) {
-    const { data } = await api.recipes.getAll(1, 1, getParams("random", "desc", query, queryFilter));
+    const { data } = await api.recipes.getAll(1, 1, getParams("random", "desc", null, query, queryFilter));
     if (data?.items.length) {
       return data.items[0];
     }
diff --git a/frontend/lib/api/user/recipes/recipe.ts b/frontend/lib/api/user/recipes/recipe.ts
index bfc930167..b022efaac 100644
--- a/frontend/lib/api/user/recipes/recipe.ts
+++ b/frontend/lib/api/user/recipes/recipe.ts
@@ -84,6 +84,7 @@ export type RecipeSearchQuery = {
   page?: number;
   perPage?: number;
   orderBy?: string;
+  orderByNullPosition?: "first" | "last";
 
   _searchSeed?: string;
 };