diff --git a/src/app/components/recipe-mini/recipe-mini.component.html b/src/app/components/recipe-mini/recipe-mini.component.html
index 30a08b6..b3ffb2b 100644
--- a/src/app/components/recipe-mini/recipe-mini.component.html
+++ b/src/app/components/recipe-mini/recipe-mini.component.html
@@ -6,6 +6,6 @@
   <div class="recipe-details">
     <h2>{{ recipe.name }}</h2>
     <p>{{ recipe.description | truncate:50:false }}</p>
-    <a href="/recipe/{{ recipe.id }}">{{ 'recipe.see' | transloco }}</a>
+    <a [routerLink]="['/recipe', recipe.id]">{{ 'recipe.see' | transloco }}</a>
   </div>
 </div>
\ No newline at end of file
diff --git a/src/app/components/recipe-mini/recipe-mini.component.ts b/src/app/components/recipe-mini/recipe-mini.component.ts
index 7d52045..9c08115 100644
--- a/src/app/components/recipe-mini/recipe-mini.component.ts
+++ b/src/app/components/recipe-mini/recipe-mini.component.ts
@@ -3,11 +3,12 @@ import { Recipe } from '../../model/recipe.model';
 import { Input } from '@angular/core';
 import { TruncatePipe } from '../../pipes/truncate.pipe';
 import { TranslocoPipe } from '@jsverse/transloco';
+import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-recipe-mini',
   standalone: true,
-  imports: [TruncatePipe, TranslocoPipe],
+  imports: [TruncatePipe, TranslocoPipe, RouterModule],
   templateUrl: './recipe-mini.component.html',
   styleUrl: './recipe-mini.component.css'
 })