diff --git a/projects/recipe-book-app/index.html b/projects/recipe-book-app/index.html
index b93360d..328bf05 100644
--- a/projects/recipe-book-app/index.html
+++ b/projects/recipe-book-app/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+    <title>Recipe Book App</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
@@ -14,44 +14,10 @@ <h1>Recipe Book App</h1>
 
     <div class="container">
       <ul id="recipe-list" class="recipe-list">
-        <!-- <li class="recipe-item">
-          <img
-            src="https://spoonacular.com/recipeImages/12345-312x231.jpg"
-            alt="Recipe 1"
-          />
-          <h2>Recipe 1</h2>
-          <p>
-            <strong>Ingredients:</strong> Ingredient 1, Ingredient 2, Ingredient
-            3
-          </p>
-          <a href="#">View Recipe</a>
-        </li>
-        <li class="recipe-item">
-          <img
-            src="https://spoonacular.com/recipeImages/12545-312x231.jpg"
-            alt="Recipe 2"
-          />
-          <h2>Recipe 2</h2>
-          <p>
-            <strong>Ingredients:</strong> Ingredient 1, Ingredient 2, Ingredient
-            3
-          </p>
-          <a href="#">View Recipe</a>
-        </li>
-        <li class="recipe-item">
-          <img
-            src="https://spoonacular.com/recipeImages/12445-312x231.jpg"
-            alt="Recipe 3"
-          />
-          <h2>Recipe 3</h2>
-          <p>
-            <strong>Ingredients:</strong> Ingredient 1, Ingredient 2, Ingredient
-            3
-          </p>
-          <a href="#">View Recipe</a>
-        </li> -->
+        <li>Loading recipes...</li>
       </ul>
     </div>
+    
     <script src="index.js"></script>
   </body>
 </html>
diff --git a/projects/recipe-book-app/index.js b/projects/recipe-book-app/index.js
index d35b3b8..3dc82df 100644
--- a/projects/recipe-book-app/index.js
+++ b/projects/recipe-book-app/index.js
@@ -1,26 +1,27 @@
-const API_KEY = "275d58779ccf4e22af03e792e8819fff";
+const API_KEY = "cf4b2745d2b64605bd47a2d231b6dcf7";  // Replace with your valid API key
 const recipeListEl = document.getElementById("recipe-list");
 
 function displayRecipes(recipes) {
-  recipeListEl.innerHTML = "";
+  recipeListEl.innerHTML = "";  // Clear any existing content, including "Loading recipes..."
   recipes.forEach((recipe) => {
     const recipeItemEl = document.createElement("li");
     recipeItemEl.classList.add("recipe-item");
-    recipeImageEl = document.createElement("img");
+
+    const recipeImageEl = document.createElement("img");
     recipeImageEl.src = recipe.image;
-    recipeImageEl.alt = "recipe image";
+    recipeImageEl.alt = `${recipe.title} image`;
 
-    recipeTitleEl = document.createElement("h2");
+    const recipeTitleEl = document.createElement("h2");
     recipeTitleEl.innerText = recipe.title;
 
-    recipeIngredientsEl = document.createElement("p");
+    const recipeIngredientsEl = document.createElement("p");
     recipeIngredientsEl.innerHTML = `
         <strong>Ingredients:</strong> ${recipe.extendedIngredients
           .map((ingredient) => ingredient.original)
           .join(", ")}
     `;
 
-    recipeLinkEl = document.createElement("a");
+    const recipeLinkEl = document.createElement("a");
     recipeLinkEl.href = recipe.sourceUrl;
     recipeLinkEl.innerText = "View Recipe";
 
@@ -33,18 +34,28 @@ function displayRecipes(recipes) {
 }
 
 async function getRecipes() {
-  const response = await fetch(
-    `https://api.spoonacular.com/recipes/random?number=10&apiKey=${API_KEY}`
-  );
-
-  const data = await response.json();
-
-  return data.recipes;
+  try {
+    const response = await fetch(
+      `https://api.spoonacular.com/recipes/random?number=10&apiKey=${API_KEY}`
+    );
+
+    if (!response.ok) {
+      throw new Error("Failed to fetch recipes");
+    }
+
+    const data = await response.json();
+    return data.recipes;
+  } catch (error) {
+    console.error(error);
+    recipeListEl.innerHTML = `<li>Error fetching recipes. Please try again later.</li>`;
+  }
 }
 
 async function init() {
   const recipes = await getRecipes();
-  displayRecipes(recipes);
+  if (recipes) {
+    displayRecipes(recipes);
+  }
 }
 
 init();
