diff --git a/TODO.md b/TODO.md
index 9d4bee6..276f1c7 100644
--- a/TODO.md
+++ b/TODO.md
@@ -12,7 +12,7 @@
 - [ ] seo, robots.txt
 - [x] update the README
 - [ ] create image provider
-- [ ] fetch recipe per id
+- [x] fetch recipe per id
 - [ ] add mood section
   - [ ] store recipes into my db (SQLite)
   - [ ] process them using AI
diff --git a/components/recipe/card.vue b/components/recipe/card.vue
index 09203da..9efbf86 100644
--- a/components/recipe/card.vue
+++ b/components/recipe/card.vue
@@ -12,17 +12,17 @@ defineProps<{
   <div class="card-body items-center text-center bg-base-200">
     <h2 class="card-title">{{ title }}</h2>
     <figure class="px-10 py-5">
-      <NuxtImg :src="pictureUrl" alt="Shoes" class="rounded-xl" />
+      <nuxt-img :src="pictureUrl" alt="Recipe picture" />
     </figure>
     <div class="card-actions space-between">
-      <NuxtLink class="badge badge-outline" :to="videoUrl">
-        <Icon name="cib:youtube" color="red" />
-      </NuxtLink>
+      <nuxt-link :to="videoUrl" target="_blank">
+        <icon name="cib:youtube" color="red" />
+      </nuxt-link>
       <div class="badge badge-secondary">
-        <Icon name="cil:apple" /> {{ category }}
+        <icon name="cil:apple" /> {{ category }}
       </div>
       <div class="badge badge-secondary">
-        <Icon name="cil:location-pin" /> {{ origin }}
+        <icon name="cil:location-pin" /> {{ origin }}
       </div>
     </div>
   </div>
diff --git a/components/recipe/index.vue b/components/recipe/view.vue
similarity index 91%
rename from components/recipe/index.vue
rename to components/recipe/view.vue
index f699c68..56c9d4c 100644
--- a/components/recipe/index.vue
+++ b/components/recipe/view.vue
@@ -9,7 +9,7 @@ defineProps<{ recipe: Recipe }>();
     <div class="flex flex-col lg:flex-row lg:justify-start gap-6 py-4">
       <div class="w-full lg:w-[480px]">
         <div class="card bg-base-100 shadow-xl mx-auto lg:mx-0">
-          <RecipeCard
+          <recipe-card
             :title="recipe.title"
             :picture-url="recipe.pictureUrl"
             :video-url="recipe.videoUrl"
@@ -20,7 +20,7 @@ defineProps<{ recipe: Recipe }>();
       </div>
 
       <div class="w-full lg:w-[480px]">
-        <RecipeIngredients :ingredients="recipe.ingredients" />
+        <recipe-ingredients :ingredients="recipe.ingredients" />
       </div>
     </div>
 
diff --git a/pages/[id].vue b/pages/[id].vue
index f3a0fcd..16197e6 100644
--- a/pages/[id].vue
+++ b/pages/[id].vue
@@ -46,6 +46,6 @@ useSeoMeta({
     />
   </div>
   <section v-else>
-    <Recipe :recipe="recipe!" />
+    <recipe-view :recipe="recipe!" />
   </section>
 </template>