diff --git a/js/index.js b/js/index.js
index 4f558c2..f1815ff 100644
--- a/js/index.js
+++ b/js/index.js
@@ -44,26 +44,96 @@ function renderPepperoni() {
 
 function renderMushrooms() {
   // Iteration 1: set the visibility of `<section class="mushroom">`
+  document.querySelectorAll('.mushroom').forEach((oneMushroom) => {
+    if (state.mushrooms) {
+      oneMushroom.style.visibility = 'visible';
+    } else {
+      oneMushroom.style.visibility = 'hidden';
+    }
+  });
 }
 
 function renderGreenPeppers() {
   // Iteration 1: set the visibility of `<section class="green-pepper">`
+  document.querySelectorAll('.green-pepper').forEach((greenPep) => {
+    if (state.greenPeppers) {
+      greenPep.style.visibility = 'visible';
+    } else {
+      greenPep.style.visibility = 'hidden';
+    }
+  });
 }
 
 function renderWhiteSauce() {
   // Iteration 2: add/remove the class "sauce-white" of `<section class="sauce">`
+  document.querySelectorAll('.sauce').forEach((oneSauce) => {
+    if (state.whiteSauce) {
+      oneSauce.style.visibility = 'visible';
+    } else {
+      oneSauce.style.visibility = 'hidden';
+    }
+  });
 }
 
 function renderGlutenFreeCrust() {
   // Iteration 2: add/remove the class "crust-gluten-free" of `<section class="crust">`
+  document.querySelectorAll('.crust').forEach((oneCrust) => {
+    if (state.glutenFreeCrust) {
+      oneCrust.style.visibility = 'visible';
+    } else {
+      oneCrust.style.visibility = 'hidden';
+    }
+  });
 }
 
 function renderButtons() {
-  // Iteration 3: add/remove the class "active" of each `<button class="btn">`
+  // Iterate over each button with class 'btn'
+  document.querySelectorAll('.btn').forEach((button) => {
+      // Extract the key from the button's class name dynamically
+      const buttonClasses = button.className.split(' ');
+      let key;
+      buttonClasses.forEach((className) => {
+          if (className.startsWith('btn-')) {
+            if(className.replace('btn-', '')=="green-peppers"){
+              key = "greenPeppers";
+            }else if(className.replace('btn-', '')=="crust"){
+              key = "glutenFreeCrust";              
+            }else if(className.replace('btn-', '')=="sauce"){
+              key = "whiteSauce";
+            }else{
+              key = className.replace('btn-', '');
+            } 
+          }
+      });
+      const isActive = state[key];
+      
+      if (isActive) {
+          button.classList.add('active');
+          button.classList.remove('inactive');
+      } else {
+          button.classList.remove('active');
+          button.classList.add('inactive');
+      }
+  });
 }
 
 function renderPrice() {
   // Iteration 4: change the HTML of `<aside class="panel price">`
+  const pricePanel = document.querySelector('.panel.price');
+  const priceList = pricePanel.querySelector('ul');
+  const totalPriceElement = pricePanel.querySelector('strong');
+  priceList.innerHTML = '';
+  let totalPrice = basePrice;
+  for (let ingredientKey in state) {
+    if (state[ingredientKey]) {
+      const ingredient = ingredients[ingredientKey];
+      const listItem = document.createElement('li');
+      listItem.textContent = `$${ingredient.price} ${ingredient.name}`;
+      priceList.appendChild(listItem);
+      totalPrice += ingredient.price;
+    }
+  }
+  totalPriceElement.textContent = `$${totalPrice}`;
 }
 
 renderEverything();
@@ -75,9 +145,25 @@ document.querySelector('.btn.btn-pepperoni').addEventListener('click', function
 });
 
 // Iteration 1: Add click event listener on `<button class="btn btn-mushrooms">`
+document.querySelector('.btn.btn-mushrooms').addEventListener('click', function () {
+  state.mushrooms = !state.mushrooms;
+  renderEverything();
+});
 
 // Iteration 1: Add click event listener on `<button class="btn btn-green-peppers">`
+document.querySelector('.btn.btn-green-peppers').addEventListener('click', function () {
+  state.greenPeppers = !state.greenPeppers;
+  renderEverything();
+});
 
 // Iteration 2: Add click event listener on `<button class="btn btn-sauce">`
+document.querySelector('.btn.btn-sauce').addEventListener('click', function () {
+  state.whiteSauce = !state.whiteSauce;
+  renderEverything();
+});
 
 // Iteration 2: Add click event listener on `<button class="btn btn-crust">`
+document.querySelector('.btn.btn-crust').addEventListener('click', function () {
+  state.glutenFreeCrust = !state.glutenFreeCrust;
+  renderEverything();
+});