diff --git a/app/src/assets/BeeMovieCharacters.js b/app/src/assets/BeeMovieCharacters.js
index 7ae61db..98d5e46 100644
--- a/app/src/assets/BeeMovieCharacters.js
+++ b/app/src/assets/BeeMovieCharacters.js
@@ -2,73 +2,73 @@ const characters = [
   {
     name: 'Barry B. Benson',
     role: 'ya like jazz? ya like jazz? ya like jazz? ya like jazz?',
-    price: '$10.00',
+    price: 10.0,
   },
   {
     name: 'Vanessa Bloome',
     role: 'A florist who befriends Barry and helps him in his quest.',
-    price: '$12.00',
+    price: 12.0,
   },
   {
     name: 'Ken',
     role: 'WHY IS YOGURT NIGHT SO DIFFICULT',
-    price: '$8.00',
+    price: 8.0,
   },
   {
     name: 'Adam Flayman',
     role: "Barry's best friend, who works with him at the hive.",
-    price: '$9.00',
+    price: 9.0,
   },
   {
     name: 'Judge Bumbleton',
     role: 'The judge who presides over the trial against the human race.',
-    price: '$15.00',
+    price: 15.0,
   },
   {
-    name: 'Layton T. Montgomery',
+    name: 'Layton Montgomery',
     role: 'The human lawyer who represents the honey industry in the trial.',
-    price: '$18.00',
+    price: 18.0,
   },
   {
     name: 'President of the Honey Association',
     role: 'A character who is part of the honey industry.',
-    price: '$20.00',
+    price: 20.0,
   },
   {
     name: 'The Pollen Jock',
     role: 'A group of bees responsible for pollinating flowers and collecting nectar.',
-    price: '$14.00',
+    price: 14.0,
   },
   {
     name: 'Mr. Svenson',
     role: "The bee who talks about the hive's work and the status quo.",
-    price: '$7.00',
+    price: 7.0,
   },
   {
     name: 'Dr. Z',
     role: 'A bee who appears at the hospital scene and is somewhat scientific in nature.',
-    price: '$13.00',
+    price: 13.0,
   },
   {
     name: 'Bee Movie Narrator',
     role: 'Narrates the events and sets the tone for the story.',
-    price: '$25.00',
+    price: 25.0,
   },
   {
     name: 'Carlos',
     role: 'A bee who is part of the group involved in the courtroom drama.',
-    price: '$11.00',
+    price: 11.0,
   },
   {
     name: 'Peggy',
     role: 'A bee who is part of the scene where Barry addresses the media.',
-    price: '$9.00',
+    price: 9.0,
   },
   {
     name: 'The Bee Flight Instructor',
     role: 'A bee who teaches the younger bees how to fly and perform tasks.',
-    price: '$16.00',
+    price: 16.0,
   },
 ]
 
-export default characters // Have something like this to export JS files!!
+export default characters // have something like this to export js files
diff --git a/app/src/components/icons/CharacterCard.vue b/app/src/components/icons/CharacterCard.vue
index 3c2db9c..7cc0ff1 100644
--- a/app/src/components/icons/CharacterCard.vue
+++ b/app/src/components/icons/CharacterCard.vue
@@ -2,14 +2,13 @@
   <div
     class="card w-[30%] max-[600px]:w-[70%] flex border-solid border-2 rounded-2xl border-yellow-400 bg-black justify-center items-center m-2 p-2"
   >
-    <!--Fix the cards here...-->
     <div class="text-center">
-      <h2 id="name" class="text-[24px] text-yellow-400">{{ character.name }}</h2>
-      <h3 id="role" class="text-[20px] text-yellow-400">{{ character.role }}</h3>
-      <h3 id="price" class="text-[20px] text-yellow-400">{{ character.price }}</h3>
+      <h2 id="name" class="text-[20px] font-bold text-yellow-400">{{ character.name }}</h2>
+      <h3 id="role" class="text-[18px] text-yellow-400">{{ character.role }}</h3>
+      <h3 id="price" class="text-[20px] text-yellow-400">${{ character.price }}</h3>
       <button
         @click="addToCart"
-        class="text-[18px] text-yellow-400 border-solid border-2 border-yellow-400 bg-black rounded-2xl"
+        class="text-[18px] text-yellow-400 pl-3 pr-3 border-solid border-2 border-yellow-400 bg-black rounded-2xl"
       >
         Buy
       </button>
@@ -18,18 +17,10 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
 const props = defineProps({
   character: Object,
 })
 
-const item = {
-  // Pass this as a parameter in ShoppingCartCards? (or maybe just use CharacterCard in HomeView)
-  name: props.character.name,
-  price: props.character.price,
-  // insertAdjacentHTML doesn't trigger Vue's reactivity, so Vue doesn't track or update changes if we use it. What can we do instead?
-}
-
 // Images go in public folder
 // Put character cards in container
 // Use Tailwind for this project
diff --git a/app/src/views/HomeView.vue b/app/src/views/HomeView.vue
index 0d419e7..61e3f02 100644
--- a/app/src/views/HomeView.vue
+++ b/app/src/views/HomeView.vue
@@ -1,14 +1,20 @@
 <script setup>
 import CharacterCard from '../components/icons/CharacterCard.vue'
 import characters from '../assets/BeeMovieCharacters.js'
-const cart = reactive([])
-// function addToCart() {
-//   cart.push(character) // Figure out what to push
+let cart = reactive([])
 
-//   console.log(cart)
-// }
+function addToCart(object, price) {
+  cart.push(object) // Figure out what to push
+  totalCost.value += price
+  console.log(cart)
+}
 import { ref, reactive } from 'vue'
+let totalCost = ref(0)
 
+function clearCart() {
+  cart = reactive([])
+  totalCost.value = 0
+}
 // Example 1:
 // ItemsArr
 // Put items on Screen
@@ -40,9 +46,9 @@ import { ref, reactive } from 'vue'
 // Step 2.5: Fix cards (done)
 // Step 3: "Cart" Array (done)
 // Step 4: Add to cart (done)
-// Step 5: Show the cart
-// Step 6: Calculate the cost; use reactive
-// Step 7: Remove or clear the cart (by clearing array)
+// Step 5: Show the cart (done)
+// Step 6: Calculate the cost; use reactive, ref (done)
+// Step 7: Remove or clear the cart (by clearing array) (done)
 // We want the button on the object to add it to the cart. Cart should be an array; pressing the button should add the button to the array.
 </script>
 
@@ -54,10 +60,6 @@ import { ref, reactive } from 'vue'
       </h1>
     </div>
 
-    <!--Bee Movie dating app!!!-->
-    <!--What do I want to be my components?-->
-    <!--Cards of Bee Movie characters should be a component (a dating app?) along with a heading introducing the site and cards for the shopping cart. (Shopping cart should also be a component?)-->
-    <!--File will be big -->
     <div class="thing-container w-full flex flex-wrap justify-start">
       <!--Doesn't cover whole screen for whatever reason-->
       <div class="card-container w-[70%] flex flex-wrap justify-center p-2">
@@ -65,23 +67,37 @@ import { ref, reactive } from 'vue'
           v-for="character in characters"
           :key="character.name"
           :character="character"
-          @click="cart.push(character)"
+          @click="addToCart(character, character.price)"
         ></CharacterCard>
-        <!-- Says CHARACTER, not item-->
       </div>
-      <div class="cart-container w-[30%] h-dvh bg-gray-900 flex flex-wrap justify-center align-top">
-        <!-- Supposed to show the cart-->
+
+      <div
+        class="cart-container w-[28%] h-fit bg-gray-900 border-2 border-solid border-yellow-400 rounded-2xl p-2 mt-3 flex flex-wrap justify-center align-top"
+      >
         <div class="cart-header-container w-full flex flex-wrap justify-center">
           <h2 class="text-[32px] font-medium text-center text-yellow-400">Your Cart</h2>
         </div>
+        <div class="cost-header-container w-full flex flex-wrap justify-center">
+          <h2 class="text-[32px] font-medium text-center text-yellow-400">
+            Cost: ${{ totalCost }}
+          </h2>
+        </div>
+        <div class="button-container w-full flex flex-wrap justify-center">
+          <button
+            @click="clearCart"
+            class="text-[18px] pl-3 pr-3 text-yellow-400 border-solid border-2 border-yellow-400 bg-black rounded-2xl"
+          >
+            Clear Cart
+          </button>
+        </div>
 
-        <!--Why don't I try reusing CharacterCard in the cart?? See what happens (need to figure out costs)-->
-        <!-- <ShoppingCartCards v-for="item in cart" :key="item.name" :item="item"></ShoppingCartCards> -->
-        <CharacterCard
-          v-for="character in cart"
-          :key="character.name"
-          :character="character"
-        ></CharacterCard>
+        <div class="product-container w-full flex flex-wrap justify-center">
+          <CharacterCard
+            v-for="character in cart"
+            :key="character.name"
+            :character="character"
+          ></CharacterCard>
+        </div>
       </div>
     </div>
   </main>