diff --git a/TODO.md b/TODO.md
index 7ecedda..5bbe111 100644
--- a/TODO.md
+++ b/TODO.md
@@ -3,7 +3,7 @@
 - [x] use bun package manager
 - [x] use nuxt framework
 - [x] rewrite the random page, the current landing page
-- [ ] rewrite the recipe page
+- [x] rewrite the recipe page
 - [ ] deploy
 - [ ] nuxt image
 - [x] prettier and eslint
diff --git a/bun.lockb b/bun.lockb
index 7b9029a..98904ee 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/recipe/index.vue b/components/recipe/index.vue
index b6402ca..7a80514 100644
--- a/components/recipe/index.vue
+++ b/components/recipe/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-const props = defineProps<{
-  recipe: Recipe;
-}>();
+import type { Recipe } from "~/types/recipe";
+
+defineProps<{ recipe: Recipe }>();
 </script>
 
 <template>
diff --git a/components/recipe/ingredients.vue b/components/recipe/ingredients.vue
index 08a63ce..bf8717c 100644
--- a/components/recipe/ingredients.vue
+++ b/components/recipe/ingredients.vue
@@ -9,13 +9,13 @@ defineProps<{
     <table class="table table-s table-pin-rows table-pin-cols">
       <thead>
         <tr>
-          <th></th>
+          <th />
           <td>Ingredient</td>
           <td>Quantity</td>
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(ingredient, i) in ingredients">
+        <tr v-for="(ingredient, i) in ingredients" :key="i">
           <th>{{ i + 1 }}</th>
           <td>{{ ingredient.name }}</td>
           <td>{{ ingredient.quantity }}</td>
diff --git a/composables/useRecipe.ts b/composables/useRecipe.ts
index bf57fcc..bf2586a 100644
--- a/composables/useRecipe.ts
+++ b/composables/useRecipe.ts
@@ -1,14 +1,7 @@
-type Recipe = {
-  title: string;
-  pictureUrl: string;
-  videoUrl: string;
-  category: string;
-  origin: string;
-  ingredients: { name: string; quantitiy: number };
-  instructions: string;
-};
+import type { Recipe } from "~/types/recipe";
 
 type Keyword = "random" | "filter" | "lookup" | "search";
+
 export default async function (keyword: Keyword, param?: string) {
   const { data, pending, error } = await useAsyncData(
     keyword,
@@ -40,16 +33,14 @@ export default async function (keyword: Keyword, param?: string) {
 
   const tmp = computed(() => data.value?.meals?.[0]);
 
-  let names = [];
-  let quantities = [];
-  let i = 0;
+  const names: string[] = [];
+  const quantities: number[] = [];
   for (const [k, v] of Object.entries(tmp.value)) {
     if (k.startsWith("strIngredient") && !!v) {
       names.push(v);
     } else if (k.startsWith("strMeasure") && !!v) {
       quantities.push(v);
     }
-    i++;
   }
 
   const recipe = reactive<Recipe>({
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 152b212..b7375bc 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -11,7 +11,7 @@ export default defineNuxtConfig({
   },
   runtimeConfig: {
     // The private keys which are only available server-side
-    apiUrl: process.env.API_URL,
+    apiUrl: "",
     // Keys within public are also exposed client-side
     public: {},
   },
diff --git a/package.json b/package.json
index 642ac83..7c2c0aa 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "daisyui": "^4.10.2",
     "postcss": "^8.4.38",
     "prettier": "3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "tailwindcss": "^3.4.3"
   }
 }
diff --git a/types/recipe.ts b/types/recipe.ts
new file mode 100644
index 0000000..3d6c00d
--- /dev/null
+++ b/types/recipe.ts
@@ -0,0 +1,9 @@
+export type Recipe = {
+  title: string;
+  pictureUrl: string;
+  videoUrl: string;
+  category: string;
+  origin: string;
+  ingredients: { name: string; quantity: number }[];
+  instructions: string;
+};