diff --git a/src/CookTime/client-app/src/components/Recipe/RecipePage.tsx b/src/CookTime/client-app/src/components/Recipe/RecipePage.tsx
index 2cfcfb3..52e9184 100644
--- a/src/CookTime/client-app/src/components/Recipe/RecipePage.tsx
+++ b/src/CookTime/client-app/src/components/Recipe/RecipePage.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Alert, Row, Toast, ToastContainer } from 'react-bootstrap';
 import { RecipeProvider, useRecipeContext } from './RecipeContext';
 import { RecipeHeader } from './RecipeHeader';
@@ -82,6 +82,13 @@ function RecipePageContent({ recipeId }: { recipeId: string }) {
 }
 
 export function RecipePage({ recipeId, generatedRecipe }: RecipePageProps) {
+  // Navigating between recipes (e.g. tapping a recommended recipe) keeps the same
+  // /recipes/details pathname and only changes the ?id= query, so the router does
+  // not scroll. Reset the scroll position whenever the recipe changes.
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [recipeId]);
+
   return (
     <RecipeProvider recipeId={recipeId} generatedRecipe={generatedRecipe}>
       <RecipePageContent recipeId={recipeId} />