modal css

src/components/EatFridgeItemModal.vue

 <template>
   <div v-if="visible" id="popup">
+      <div id="exitBtn" @click="close"><Icon  icon="mdi:alpha-x-box" :color="redIconColor" :style="{ fontSize: redIconSize }" /></div>
       <h2>{{ fridgeItem }}</h2>
       <p>{{sliderValue}}</p>
 
@@ -8,14 +9,17 @@
 
       <div id="buttons">
           <button @click="close">Ble kastet 🧺</button>
-          <button>Ble spist 😋</button>
+          <button id="eatenBtn" @click="close" >Ble spist 😋</button>
       </div>
   </div>
 </template>
 
 <script>
+import {Icon} from "@iconify/vue";
+
 export default {
     name: "EatFridgeItemModal",
+  components: {Icon},
   props: {
       fridgeItem: {
         type: String,
@@ -33,30 +37,65 @@ export default {
         this.$emit('closeModal',this);
       },
 
+  },
+  computed:{
+    redIconColor() {
+      return '#EE6D6D';
+    },
+    redIconSize() {
+      return '40px';
+    },
   }
 }
 </script>
 
 <style scoped lang="scss">
 #popup {
-  background-color: turquoise;
+  background-color: base.$white;
   color: black;
-  width: 80%;
+  width: 70%;
+  padding:2em;
   display:flex;
   flex-direction: column;
   align-items: center;
-
-
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 999;
+  box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.5);
+  border-radius: 2px;
 }
 
 @media (min-width: 800px){
   #popup {
-    width: 300px;
+    width: 40%;
   }
 }
 
 #buttons {
   justify-content: center;
   display: flex;
+  margin: 1em;
+  margin-top: 3em;
+}
+
+#exitBtn{
+  width:100%;
+  display: flex;
+  justify-content: right;
+
+}
+
+button {
+  padding: .6em 2.4em;
+  margin:.3em;
+  font-weight: bolder;
+  font-size: larger;
+  background-color: base.$red;
+  color:white;
+}
+#eatenBtn {
+  background-color: base.$green;
 }
 </style>
\ No newline at end of file

src/views/HomeView.vue

 <script setup>
-
-import EatFridgeItemModal from "@/components/EatFridgeItemModal.vue";
 </script>
 
 <template>
   <main>
-      <eat-fridge-item-modal></eat-fridge-item-modal>
       <p>HALLO</p>
   </main>
 </template>