diff --git a/src/components/coffeeIndex.vue b/src/components/coffeeIndex.vue
index e280d43..e33eab4 100644
--- a/src/components/coffeeIndex.vue
+++ b/src/components/coffeeIndex.vue
@@ -13,9 +13,10 @@
                     </div>
                 </div>
             </div>
+            
         </header>
         <div class="menu-container">
-            <li v-for="item in coffeeList" :key="item.productName">
+            <li v-for="item in coffeeList" :key="item.productName" class="coffee-li">
                 <div class="menu-item">
                     <img src="../assets/coffee1.png" alt="Golden Iced Coffee">
                     <div class="menu-item-content">
@@ -124,6 +125,9 @@ const coffeeList = [
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+.coffee-li{
+    list-style-type: none;
+}
 .menu2 {
     display: flex;
     flex-wrap: nowrap;
@@ -139,17 +143,22 @@ const coffeeList = [
     padding: 0;
 }
 
-.divider-pink, .divider-green, .divider-orange {
+.divider-pink,
+.divider-green,
+.divider-orange {
     height: 13px;
     width: 33%;
     margin: 0px;
 }
+
 .divider-pink {
     background-color: #e91e63;
 }
+
 .divider-green {
     background-color: #4caf50;
 }
+
 .divider-orange {
     background-color: #ff9800;
 }