better

frontend/src/app/components/pages/pages.component.scss

@@ -44,4 +44,65 @@
       font-size: var(--medium-font-size);
     }
   }
+
+  .confirm-delete {
+    @include card();
+    width: 66vw;
+    max-width: 500px;
+    @media (max-width: $mobile-width) {
+      width: 88vw;
+      max-width: 88vw;
+      padding: var(--medium-padding);
+    }
+    box-sizing: border-box;
+    padding: var(--large-padding);
+    position: relative;
+    box-shadow: $shadow;
+    @include inner-spacing(var(--large-padding));
+    text-align: center;
+
+    .header {
+      @include center-child();
+
+      .exit {
+        position: absolute;
+        right: var(--large-padding);
+        @include exit();
+      }
+    }
+
+    p {
+      strong {
+        font-weight: bold;
+      }
+    }
+
+    .confirm-buttons {
+      display: flex;
+      justify-content: center;
+      gap: var(--large-padding);
+
+      button {
+        max-width: 100%;
+      }
+
+      button.danger {
+        color: #b53f3f;
+        border-bottom-color: #b53f3f55;
+
+        &:after {
+          background-color: #b53f3f;
+        }
+      }
+
+      @media (max-width: $mobile-width) {
+        flex-direction: column;
+        gap: var(--small-padding);
+
+        button {
+          width: 100%;
+        }
+      }
+    }
+  }
 }