diff --git a/starter-code/.DS_Store b/starter-code/.DS_Store
new file mode 100644
index 00000000..82c60423
Binary files /dev/null and b/starter-code/.DS_Store differ
diff --git a/starter-code/index.html b/starter-code/index.html
index 189a3311..b7beffed 100755
--- a/starter-code/index.html
+++ b/starter-code/index.html
@@ -17,7 +17,7 @@ <h1>Pizza Builder</h1>
     <div class="panel controls">
       <ul>
         <li>
-          <button class="btn btn-pepperonni active">Pepperonni</button>
+          <button id="pepTheRoni" class="btn btn-pepperonni active">Pepperonni</button>
         </li>
         <li>
           <button class="btn btn-mushrooms active">Mushrooms</button>
@@ -26,10 +26,10 @@ <h1>Pizza Builder</h1>
           <button class="btn btn-green-peppers active">Green peppers</button>
         </li>
         <li>
-          <button class="btn btn-sauce active">White sauce</button>
+          <button class="btn btn-sauce active">Red sauce or White Sauce</button>
         </li>
         <li>
-          <button class="btn btn-crust active">Gluten-free crust</button>
+            <button class="btn btn-crust active">Regular Crust or Gluten-free</button>
         </li>
       </ul>
     </div>
@@ -40,19 +40,20 @@ <h1>Pizza Builder</h1>
       <h2>Your pizza's price</h2>
 
       <b>$10 cheese pizza</b>
-      <ul>
-        <li>$1 pepperonni</li>
-        <li>$1 mushrooms</li>
-        <li>$1 green peppers</li>
-        <li>$3 white sauce</li>
-        <li>$5 gluten-free crust</li>
+      <ul class="toppings">
+        <li id="toni">$<span id="top1">1</span> pepperonni</li>
+        <li id="oms">$<span id="top2">1</span> mushrooms</li>
+        <li id="ers">$<span id="top3">1</span> green peppers</li>
+        <li class="white">$<span id="top4">3</span> white sauce</li>
+        <li class="gluten">$<span id="top5">5</span> gluten-free crust</li>
       </ul>
-      <strong>$21</strong>
+      <strong class="price">$<span id="prices">13</span></strong>
     </aside>
     <!-- End Price -->
 
     <!-- Begin Pizza -->
     <div id="pizza">
+    <div class="bell-pepper">
       <section class="green-pepper one"></section>
       <section class="green-pepper two"></section>
       <section class="green-pepper three"></section>
@@ -74,7 +75,8 @@ <h2>Your pizza's price</h2>
       <section class="green-pepper nineteen"></section>
       <section class="green-pepper twenty"></section>
       <section class="green-pepper twenty-one"></section>
-
+    </div>
+    <div class="shroom">
       <section class="mushroom one">
         <div class="cap">1</div>
         <div class="stem"></div>
@@ -234,7 +236,9 @@ <h2>Your pizza's price</h2>
         <div class="cap">31</div>
         <div class="stem"></div>
       </section>
+    </div>
 
+    <div class="roni">
       <section class="pep one">1</section>
       <section class="pep two">2</section>
       <section class="pep three">3</section>
@@ -267,10 +271,11 @@ <h2>Your pizza's price</h2>
       <section class="pep thirty">30</section>
       <section class="pep thirty-one">31</section>
       <section class="pep thirty-three">33</section>
-
-      <section class="crust crust-gluten-free">
+    </div>
+      <section class="crust">
         <section class="cheese"></section>
         <section class="sauce sauce-white"></section>
+        <section class="sauce sauce-red"></section>
       </section>
     </div>
     <!-- End Pizza -->
diff --git a/starter-code/pizza.css b/starter-code/pizza.css
index 2d125b3d..b83cc96f 100755
--- a/starter-code/pizza.css
+++ b/starter-code/pizza.css
@@ -229,7 +229,7 @@ p.description {
   box-shadow: none;
 }
 
-.btn-sauce {
+.btn-sauce2 {
   background: #fff4aa;
   box-shadow: 0 6px #998500;
   color: #555;
@@ -335,6 +335,14 @@ p.description {
   box-shadow: inset 0 0 40px #d3c3bb;
 }
 
+.white {
+    display: none;
+}
+
+.gluten {
+    display: none;
+}
+
 .sauce {
     position: absolute;
     width: 620px;
@@ -349,6 +357,10 @@ p.description {
   background: #fff4aa;
 }
 
+.sauce-red {
+  background: #dd2f25;
+}
+
 .cheese {
     position: absolute;
     width: 600px;
@@ -369,6 +381,7 @@ p.description {
     transform: rotate(12deg) translate(-4px, -600px);
 }
 
+
 .pep {
     position: absolute;
     width: 80px;
diff --git a/starter-code/pizza.js b/starter-code/pizza.js
index b473d048..814854a7 100755
--- a/starter-code/pizza.js
+++ b/starter-code/pizza.js
@@ -1 +1,123 @@
 // Write your Pizza Builder JavaScript in this file.
+
+$(document).ready(function () {
+
+  //all options
+  $(".btn-pepperonni").click(function() {
+    $(".roni").fadeToggle() 
+  });
+
+  $(".btn-mushrooms").click(function() {
+    $(".shroom").fadeToggle() 
+  });
+
+  $(".btn-green-peppers").click(function() {
+    $(".bell-pepper").fadeToggle()
+  });
+
+  $(".btn-sauce").click(function(){
+    $(".sauce-red").fadeToggle()
+  });
+
+  $(".btn-crust").click(function(){
+    $(".crust").toggleClass("crust-gluten-free")
+  });
+   
+  // $(".btn-pepperonni").click(function(){
+  //   $(".btn-pepperonni").toggleClass("active")
+  // });
+
+  $(".btn-mushrooms").click(function(){
+    $(".btn-mushrooms").toggleClass("active")
+  });
+
+  $(".btn-green-peppers").click(function(){
+    $(".btn-green-peppers").toggleClass("active")
+  });
+
+//extras put on
+  $(".btn-sauce").click(function(){
+    $(".white").toggle("white")
+  });
+
+  $(".btn-crust").click(function(){
+    $(".gluten").toggle("gluten")
+  });
+
+  //major toppings go away
+  $(".btn-pepperonni").click(function() {
+    $("#toni").toggle("toni") 
+  });
+
+  $(".btn-mushrooms").click(function() {
+    $("#oms").fadeToggle("oms") 
+  });
+
+  $(".btn-green-peppers").click(function() {
+    $("#ers").fadeToggle("ers")
+  });
+
+  //change price
+  
+  $(".btn-pepperonni").click(function() {
+   
+    $(".btn-pepperonni").toggleClass("active")
+    let top1 = parseFloat(document.getElementById("top1").innerHTML)
+    let prices = parseFloat(document.getElementById("prices").innerHTML)
+    let price
+    if ($(".btn-pepperonni").hasClass("active")) {
+      price = prices + top1
+      } else {
+        price = prices - top1
+      }
+    document.getElementById("prices").innerHTML = price
+  });
+
+  $(".btn-mushrooms").click(function() {
+    let top2 = parseFloat(document.getElementById("top2").innerHTML)
+    let prices = parseFloat(document.getElementById("prices").innerHTML)
+    let price 
+    if ($(".btn-mushrooms").hasClass("active")) {
+      price = prices + top2
+      } else {
+        price = prices - top2
+      }
+    document.getElementById("prices").innerHTML = price
+  });
+
+  $(".btn-green-peppers").click(function() {
+    let top3 = parseFloat(document.getElementById("top3").innerHTML)
+    let prices = parseFloat(document.getElementById("prices").innerHTML)
+    let price
+    if ($(".btn-green-peppers").hasClass("active")) {
+      price = prices + top3
+      } else {
+        price = prices - top3
+      }
+    document.getElementById("prices").innerHTML = price
+  });
+
+  $(".btn-sauce").click(function() {
+    let top4 = parseFloat(document.getElementById("top4").innerHTML)
+    let prices = parseFloat(document.getElementById("prices").innerHTML)
+    let price 
+    if ($(".btn-sauce").hasClass("active")) {
+      price = prices + top4
+      } else {
+        price = prices - top4
+      }
+    document.getElementById("prices").innerHTML = price
+  });
+  $(".btn-crust").click(function() {
+    let top5 = parseFloat(document.getElementById("top5").innerHTML)
+    let prices = parseFloat(document.getElementById("prices").innerHTML)
+    let price 
+    if ($(".btn-crust").hasClass("active")) {
+      price = prices + top5
+      } else {
+        price = prices - top5
+      }
+    document.getElementById("prices").innerHTML = price
+  });
+});
+