diff --git a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
index 5b88226b..b873a944 100644
--- a/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
+++ b/web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss
@@ -147,6 +147,38 @@ img {
   }
 }
 
+.p-button.p-button-outlined {
+  &.p-button-warning {
+    border: 2px solid map-get($colors, 'earth');
+    color: map-get($colors, 'earth');
+
+    &:hover {
+      background-color: map-get($colors, 'warning');
+      border: 2px solid map-get($colors, 'warning');
+    }
+  }
+
+  &.p-button-danger {
+    border: 2px solid map-get($colors, 'grape');
+    color: map-get($colors, 'grape');
+
+    &:hover {
+      background-color: map-get($colors, 'negative');
+      border: 2px solid map-get($colors, 'negative');
+    }
+  }
+
+  &.p-button-primary {
+    border: 2px solid $primaryDarkColor;
+    color: $primaryDarkColor;
+
+    &:hover {
+      background-color: $primaryColor;
+      border: 2px solid $primaryColor;
+    }
+  }
+}
+
 // Color of error messages in inputs ...
 .p-error {
   color: map-get($map: $colors, $key: grape);
diff --git a/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue b/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue
index e69030ea..98d914b6 100644
--- a/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue
+++ b/web-app/packages/lib/src/modules/dialog/components/ConfirmDialog.vue
@@ -41,7 +41,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
       class="w-full flex flex-column lg:flex-row justify-content-between align-items-center mt-4"
     >
       <PButton
-        severity="secondary"
+        :severity="severity"
+        outlined
         @click="close"
         class="flex w-12 mb-2 lg:mb-0 lg:mr-2 lg:w-6 justify-content-center"
         data-cy="clone-dialog-close-btn"
@@ -61,7 +62,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-MerginMaps-Commercial
 </template>
 
 <script setup lang="ts">
-import { ref, computed, defineEmits, withDefaults } from 'vue'
+import { ref, computed } from 'vue'
 
 import { ConfirmDialogProps } from '../types'