* Extended functionalities

* Added different UIs

meal-plan-frontend/src/pages/RecipeDetailPage.tsx

@@ -1,5 +1,6 @@
 import { ArrowLeft } from "lucide-react";
 import { useNavigate, useParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import { useRecipe } from "@/hooks/useRecipes";
 import { RecipeDetail } from "@/components/recipes/RecipeDetail";
 import { Skeleton } from "@/components/ui/Skeleton";
@@ -7,6 +8,7 @@ import { ErrorState } from "@/components/ui/ErrorState";
 import { extractApiError } from "@/api/axiosInstance";
 
 export function RecipeDetailPage() {
+  const { t } = useTranslation();
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
   const recipeId = Number(id);
@@ -16,7 +18,7 @@ export function RecipeDetailPage() {
     <div className="space-y-6">
       <button type="button" onClick={() => navigate(-1)} className="btn-secondary">
         <ArrowLeft className="h-4 w-4" />
-        Back
+        {t("common.back")}
       </button>
 
       {isLoading && (
@@ -34,7 +36,7 @@ export function RecipeDetailPage() {
 
       {isError && (
         <ErrorState
-          message={extractApiError(error, "Failed to load recipe.")}
+          message={extractApiError(error, t("errors.loadRecipeFailed"))}
           onRetry={() => void refetch()}
         />
       )}