diff --git a/src/components/BaseComponents/ConfirmationModal.vue b/src/components/BaseComponents/ConfirmationModal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..438ff362e01d693aa2d6663c2176e167c5281de1
--- /dev/null
+++ b/src/components/BaseComponents/ConfirmationModal.vue
@@ -0,0 +1,38 @@
+<!-- ConfirmationModal.vue -->
+<template>
+    <div class="modal" :id="modalId" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true"
+         data-bs-backdrop="static" data-bs-keyboard="false">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="modalLabel">{{ title }}</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            {{ message }}
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ cancelButtonText }}</button>
+            <button type="button" class="btn btn-primary" @click="confirmAction">{{ confirmButtonText }}</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref } from 'vue';
+  
+  const modalId = ref(null);
+  
+  const title = 'Confirm Action';
+  const message = 'Are you sure you want to proceed?';
+  const confirmButtonText = 'Confirm';
+  const cancelButtonText = 'Cancel';
+  
+  // Methods
+  function confirmAction() {
+    emit('confirm');
+  }
+  </script>
+  
\ No newline at end of file
diff --git a/src/components/Settings/SettingsProfile.vue b/src/components/Settings/SettingsProfile.vue
index a604f052d283afe7c3e548bef920379652c6ebc6..eaa7ac4b964a90292e027ea12653790897e55be0 100644
--- a/src/components/Settings/SettingsProfile.vue
+++ b/src/components/Settings/SettingsProfile.vue
@@ -167,7 +167,7 @@ onMounted(() => {
     <hr>
     <div>
       <h6>Banners</h6>
-      <div v-if="hasBanners" class="scrolling-wrapper-badges row flex-row flex-nowrap mt-2 pb-2 pt-2">
+      <div v-if="hasBanners" class="scrolling-wrapper-badges row flex-row flex-wrap mt-2 pb-2 pt-2">
         <div v-for="banner in banners" :key="banner.id" class="card text-center banner justify-content-center d-flex align-items-center" @click="selectItem(banner.id)"
           :class="{ 'selected-banner': banner.id === selectedBannerId }" data-bs-toggle="tooltip"
           data-bs-placement="top" data-bs-custom-class="custom-tooltip" :data-bs-title="banner.criteria">