diff --git a/src/pages/dev/DevPage.tsx b/src/pages/dev/DevPage.tsx
index 890d8e6..390b62c 100644
--- a/src/pages/dev/DevPage.tsx
+++ b/src/pages/dev/DevPage.tsx
@@ -2,7 +2,7 @@
 // This file is part of KristWeb 2 under GPL-3.0.
 // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
 import { useState } from "react";
-import { Button } from "antd";
+import { Button, Alert } from "antd";
 import { PageLayout } from "@layout/PageLayout";
 
 import { ImportBackupModal } from "../backup/ImportBackupModal";
@@ -23,6 +23,15 @@
     title="Dev page"
     siteTitle="Dev page"
   >
+    <Alert type="success" message="test" />
+    <Alert type="success" message="test" showIcon />
+    <Alert type="warning" message="test" />
+    <Alert type="warning" message="test" showIcon />
+    <Alert type="error" message="test" />
+    <Alert type="error" message="test" showIcon />
+
+    <br />
+
     {/* Open import backup modal */}
     <AuthorisedAction
       encrypt
diff --git a/src/style/theme.less b/src/style/theme.less
index 52332c8..6502bb5 100644
--- a/src/style/theme.less
+++ b/src/style/theme.less
@@ -117,6 +117,17 @@
 // Form required mark
 @label-required-color: @kw-red;
 
+// Alerts
+@alert-success-border-color: darken(@kw-green, 10%);
+@alert-success-bg-color: fade(darken(@kw-green, 25%), 60%);
+@alert-success-icon-color: saturate(@kw-green, 25%);
+@alert-warning-border-color: darken(@kw-orange, 10%);
+@alert-warning-bg-color: fade(darken(@kw-orange, 25%), 60%);
+@alert-warning-icon-color: saturate(@kw-orange, 25%);
+@alert-error-border-color: @kw-red;
+@alert-error-bg-color: fade(#b72626, 60%);
+@alert-error-icon-color: saturate(@kw-red, 25%);
+
 // general theme
 // ---
 @kw-sidebar-bg: @kw-darker;