diff --git a/apps/client/src/widgets/dialogs/delete_notes.tsx b/apps/client/src/widgets/dialogs/delete_notes.tsx
index 4a09f5b90..a5b43e035 100644
--- a/apps/client/src/widgets/dialogs/delete_notes.tsx
+++ b/apps/client/src/widgets/dialogs/delete_notes.tsx
@@ -11,6 +11,7 @@ import froca from "../../services/froca.js";
 import FNote from "../../entities/fnote.js";
 import link from "../../services/link.js";
 import Button from "../react/Button.jsx";
+import Alert from "../react/Alert.jsx";
 
 export interface ResolveOptions {
     proceed: boolean;
@@ -136,27 +137,23 @@ function BrokenRelations({ brokenRelations }: { brokenRelations: DeleteNotesPrev
 
     if (brokenRelations.length) {
         return (
-            <div className="broken-relations-wrapper">
-                <div className="alert alert-danger">
-                    <h4>{t("delete_notes.broken_relations_to_be_deleted", { relationCount: brokenRelations.length })}</h4>
-
-                    <ul className="broken-relations-list" style={{ maxHeight: "200px", overflow: "auto" }}>
-                        {brokenRelations.map((_, index) => {
-                            return (
-                                <li key={index}>
-                                    <span dangerouslySetInnerHTML={{ __html: t("delete_notes.deleted_relation_text", notesWithBrokenRelations[index]) }} />
-                                </li>
-                            );
-                        })}
-                    </ul>
-                </div>
-            </div>
+            <Alert type="danger" title={t("delete_notes.broken_relations_to_be_deleted", { relationCount: brokenRelations.length })}>
+                <ul className="broken-relations-list" style={{ maxHeight: "200px", overflow: "auto" }}>
+                    {brokenRelations.map((_, index) => {
+                        return (
+                            <li key={index}>
+                                <span dangerouslySetInnerHTML={{ __html: t("delete_notes.deleted_relation_text", notesWithBrokenRelations[index]) }} />
+                            </li>
+                        );
+                    })}
+                </ul>
+            </Alert>
         );
     } else {
         return (
-            <div className="no-note-to-delete-wrapper alert alert-info">
-            {t("delete_notes.no_note_to_delete")}
-            </div>
+            <Alert type="info">
+                {t("delete_notes.no_note_to_delete")}
+            </Alert>
         );
     }
 }
diff --git a/apps/client/src/widgets/react/Alert.tsx b/apps/client/src/widgets/react/Alert.tsx
new file mode 100644
index 000000000..88b6ce81c
--- /dev/null
+++ b/apps/client/src/widgets/react/Alert.tsx
@@ -0,0 +1,17 @@
+import { ComponentChildren } from "preact";
+
+interface AlertProps {
+    type: "info" | "danger";
+    title?: string;
+    children: ComponentChildren;
+}
+
+export default function Alert({ title, type, children }: AlertProps) {
+    return (
+        <div className={`alert alert-${type}`}>
+            {title && <h4>{title}</h4>}
+
+            {children}
+        </div>
+    );
+}
\ No newline at end of file