diff --git a/src/components/ModalComponent.vue b/src/components/ModalComponent.vue
index af2c54296db630cc3e6b305707d9debaee16aaf3..c8d84c67286bbafb9cbeb39832c0e087d516c323 100644
--- a/src/components/ModalComponent.vue
+++ b/src/components/ModalComponent.vue
@@ -9,8 +9,11 @@
 
             <slot />
 
-            <div class="buttons flex flex-col justify-center items-center gap-3 mt-3 w-full">
+            <div class="buttons flex flex-row justify-center items-center gap-3 mt-3 w-full">
                 <slot name="buttons"></slot>
+                <button v-if="closeButton" class="button primary" @click="$emit('close')">
+                    Lukk
+                </button>
             </div>
         </div>
     </div>
@@ -26,6 +29,11 @@ defineProps({
         type: Boolean,
         default: true,
         required: false
+    },
+    closeButton: {
+        type: Boolean,
+        default: false,
+        required: false
     }
 })
 
diff --git a/src/views/ManageChallengeView.vue b/src/views/ManageChallengeView.vue
index a60084093ad69cd9d586c5cc61fb759cc6610a50..b6f15b648942636879a83fc0f6046aeb29ec6fc9 100644
--- a/src/views/ManageChallengeView.vue
+++ b/src/views/ManageChallengeView.vue
@@ -242,12 +242,8 @@ const confirmCancel = () => {
                 :isModalOpen="errorModalOpen"
                 @close="errorModalOpen = false"
             >
-                <template v-slot:input>
-                    <div class="flex justify-center items-center">
-                        <div class="flex flex-col gap-5">
-                            <button class="primary" @click="errorModalOpen = false">Lukk</button>
-                        </div>
-                    </div>
+                <template v-slot:buttons>
+                    <button class="primary" @click="errorModalOpen = false">Lukk</button>
                 </template>
             </ModalComponent>
 
@@ -257,15 +253,9 @@ const confirmCancel = () => {
                 :isModalOpen="confirmModalOpen"
                 @close="confirmModalOpen = false"
             >
-                <template v-slot:input>
-                    <div class="flex justify-center items-center">
-                        <div class="flex flex-col gap-5">
-                            <button class="primary" @click="confirmCancel">Bekreft</button>
-                            <button class="primary danger" @click="confirmModalOpen = false">
-                                Avbryt
-                            </button>
-                        </div>
-                    </div>
+                <template v-slot:buttons>
+                    <button class="primary" @click="confirmCancel">Bekreft</button>
+                    <button class="primary danger" @click="confirmModalOpen = false">Avbryt</button>
                 </template>
             </ModalComponent>
         </div>
diff --git a/src/views/ManageGoalView.vue b/src/views/ManageGoalView.vue
index d2d8e75bc429e79a1f0aed0dc3f498f6960c541a..4be7adf2c311e81c5b08388961ed204996a8de60 100644
--- a/src/views/ManageGoalView.vue
+++ b/src/views/ManageGoalView.vue
@@ -244,12 +244,8 @@ const confirmCancel = () => {
                 :isModalOpen="errorModalOpen"
                 @close="errorModalOpen = false"
             >
-                <template v-slot:input>
-                    <div class="flex justify-center items-center">
-                        <div class="flex flex-col gap-5">
-                            <button class="primary" @click="errorModalOpen = false">Lukk</button>
-                        </div>
-                    </div>
+                <template v-slot:buttons>
+                    <button class="primary" @click="errorModalOpen = false">Lukk</button>
                 </template>
             </ModalComponent>
 
@@ -259,15 +255,9 @@ const confirmCancel = () => {
                 :isModalOpen="confirmModalOpen"
                 @close="confirmModalOpen = false"
             >
-                <template v-slot:input>
-                    <div class="flex justify-center items-center">
-                        <div class="flex flex-col gap-5">
-                            <button class="primary" @click="confirmCancel">Bekreft</button>
-                            <button class="primary danger" @click="confirmModalOpen = false">
-                                Avbryt
-                            </button>
-                        </div>
-                    </div>
+                <template v-slot:buttons>
+                    <button class="primary" @click="confirmCancel">Bekreft</button>
+                    <button class="primary danger" @click="confirmModalOpen = false">Avbryt</button>
                 </template>
             </ModalComponent>
         </div>