diff --git a/client/src/views/admin/layouts/detail.js b/client/src/views/admin/layouts/detail.js
index e6722f0bec..9c9bbce774 100644
--- a/client/src/views/admin/layouts/detail.js
+++ b/client/src/views/admin/layouts/detail.js
@@ -124,12 +124,14 @@ class LayoutDetailView extends LayoutGridView {
                 'success',
                 'danger',
                 'warning',
+                'primary',
             ],
             style: {
                 'info': 'info',
                 'success': 'success',
                 'danger': 'danger',
                 'warning': 'warning',
+                'primary': 'primary',
             },
             default: 'info',
             translation: 'LayoutManager.options.style',
diff --git a/frontend/less/espo/bootstrap/alerts.less b/frontend/less/espo/bootstrap/alerts.less
index b1d5e414aa..90fc20302c 100644
--- a/frontend/less/espo/bootstrap/alerts.less
+++ b/frontend/less/espo/bootstrap/alerts.less
@@ -2,10 +2,6 @@
 // Alerts
 // --------------------------------------------------
 
-
-// Base styles
-// -------------------------
-
 .alert {
   margin-bottom: var(--line-height-computed);
   border: 1px solid transparent;
@@ -27,23 +23,3 @@
     margin-top: 5px;
   }
 }
-
-// Alternate styles
-//
-// Generate contextual modifier classes for colorizing the alert.
-
-.alert-success {
-  .alert-variant-espo(@alert-success-bg; @alert-success-border; @alert-success-text);
-}
-
-.alert-info {
-  .alert-variant-espo(@alert-info-bg; @alert-info-border; @alert-info-text);
-}
-
-.alert-warning {
-  .alert-variant-espo(@alert-warning-bg; @alert-warning-border; @alert-warning-text);
-}
-
-.alert-danger {
-  .alert-variant-espo(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
-}
diff --git a/frontend/less/espo/bootstrap/variables.less b/frontend/less/espo/bootstrap/variables.less
index 75652b6cab..fa87e2d297 100644
--- a/frontend/less/espo/bootstrap/variables.less
+++ b/frontend/less/espo/bootstrap/variables.less
@@ -63,22 +63,6 @@
 
 @modal-backdrop-opacity: .5;
 
-@alert-success-bg:  @state-success-bg;
-@alert-success-text: @state-success-text;
-@alert-success-border: @state-success-border;
-
-@alert-info-bg: @state-info-bg;
-@alert-info-text: @state-info-text;
-@alert-info-border: @state-info-border;
-
-@alert-warning-bg: @state-warning-bg;
-@alert-warning-text: @state-warning-text;
-@alert-warning-border: @state-warning-border;
-
-@alert-danger-bg: @state-danger-bg;
-@alert-danger-text: @state-danger-text;
-@alert-danger-border: @state-danger-border;
-
 @list-group-disabled-color: @gray-light;
 @list-group-disabled-bg: @gray-lighter;
 @list-group-disabled-text-color: @list-group-disabled-color;
diff --git a/frontend/less/espo/elements/alert.less b/frontend/less/espo/elements/alert.less
index 42b6628339..6812178c7e 100644
--- a/frontend/less/espo/elements/alert.less
+++ b/frontend/less/espo/elements/alert.less
@@ -49,3 +49,23 @@ body > .alert {
         }
     }
 }
+
+.alert-success {
+    .alert-variant-espo(var(--state-success-bg); var(--state-success-border); var(--state-success-text));
+}
+
+.alert-info {
+    .alert-variant-espo(var(--state-info-bg); var(--state-info-border); var(--state-info-text));
+}
+
+.alert-warning {
+    .alert-variant-espo(var(--state-warning-bg); var(--state-warning-border); var(--state-warning-text));
+}
+
+.alert-danger {
+    .alert-variant-espo(var(--state-danger-bg); var(--state-danger-border); var(--state-danger-text));
+}
+
+.alert-primary {
+    .alert-variant-espo(var(--state-primary-bg); var(--state-primary-border); var(--state-primary-text));
+}
diff --git a/frontend/less/espo/root-variables.less b/frontend/less/espo/root-variables.less
index e8396bce46..0803912a1f 100644
--- a/frontend/less/espo/root-variables.less
+++ b/frontend/less/espo/root-variables.less
@@ -262,14 +262,29 @@
     --brand-success-10: darken(@brand-success-value, 10%);
     --brand-warning-10: darken(@brand-warning-value, 10%);
 
-    --state-primary-bg: @state-primary-bg-value;
-    --state-primary-text: @state-primary-text-value;
-
     --state-default-bg: @state-default-bg-value;
     --state-default-text: @state-default-text-value;
 
+    --state-primary-bg: @state-primary-bg-value;
+    --state-primary-text: @state-primary-text-value;
+    --state-primary-border: @state-primary-border-value;
+
     --state-danger-bg: @state-danger-bg-value;
     --state-danger-text: @state-danger-text-value;
+    --state-danger-border: @state-danger-border-value;
+
+    --state-info-text: @state-info-text-value;
+    --state-info-bg: @state-info-bg-value;
+    --state-info-border: @state-info-border-value;
+
+    --state-success-text: @state-success-text-value;
+    --state-success-bg: @state-success-bg-value;
+    --state-success-border: @state-success-border-value;
+
+    --state-warning-bg: @state-warning-bg-value;
+    --state-warning-text: @state-warning-text-value;
+    --state-warning-border: @state-warning-border-value;
+
     --state-danger-bg-5: darken(@state-danger-bg-value, 5%);
     --state-danger-bg-10: darken(@state-danger-bg-value, 10%);
     --state-danger-text-10: darken(@state-danger-text-value, 10%);
@@ -277,20 +292,14 @@
 
     --brand-info-10: darken(@brand-info-value, 10%);
 
-    --state-info-text: @state-info-text-value;
     --state-info-text-10: darken(@state-info-text-value, 10%);
-    --state-info-bg: @state-info-bg-value;
     --state-info-bg-5: darken(@state-info-bg-value, 5%);
     --state-info-bg-10: darken(@state-info-bg-value, 10%);
 
-    --state-success-text: @state-success-text-value;
-    --state-success-bg: @state-success-bg-value;
     --state-success-bg-5: darken(@state-success-bg-value, 5%);
     --state-success-text-10: darken(@state-success-text-value, 10%);
     --state-success-text-10l: lighten(darken(@state-success-text-value, 10%), 20);
 
-    --state-warning-bg: @state-warning-bg-value;
-    --state-warning-text: @state-warning-text-value;
     --state-warning-text-10: darken(@state-warning-text-value, 10%);
     --state-warning-text-10l: lighten(darken(@state-warning-text-value, 10%), 20);
     --state-warning-bg-5: darken(@state-warning-bg-value, 5%);
diff --git a/frontend/less/espo/value-variables.less b/frontend/less/espo/value-variables.less
index e9d3d448af..e3f872ba9e 100644
--- a/frontend/less/espo/value-variables.less
+++ b/frontend/less/espo/value-variables.less
@@ -28,18 +28,23 @@
 
 @state-primary-bg-value: #ecf5fd;
 @state-primary-text-value: #5b9aca;
+@state-primary-border-value: darken(@state-primary-bg-value, 5%);
 
 @state-success-bg-value: lighten(spin(@brand-success-value, 5), 30%);
 @state-success-text-value: darken(spin(@brand-success-value, 7), 17%);
+@state-success-border-value: darken(@state-success-bg-value, 5%);
 
 @state-info-bg-value: #ece7f9;
 @state-info-text-value: #83779c;
+@state-info-border-value: darken(@state-info-bg-value, 5%);
 
 @state-warning-bg-value: #fbf7e1;
 @state-warning-text-value: #9E7328;
+@state-warning-border-value: darken(@state-warning-bg-value, 10%);
 
 @state-danger-text-value: #ad4846;
 @state-danger-bg-value: #f2dede;
+@state-danger-border-value: darken(@state-danger-bg-value, 10%);
 
 @state-default-text-value: @text-gray-color-value;
 @state-default-bg-value: @gray-lighter-value;
diff --git a/frontend/less/espo/variables.less b/frontend/less/espo/variables.less
index 417db0be49..737e23d41a 100644
--- a/frontend/less/espo/variables.less
+++ b/frontend/less/espo/variables.less
@@ -75,27 +75,26 @@
 
 @state-success-bg: var(--state-success-bg);
 @state-success-text: var(--state-success-text);
+@state-success-border: var(--state-success-border);
+
+@state-danger-bg: var(--state-danger-bg);
+@state-danger-text: var(--state-danger-text);
+@state-danger-border: var(--state-danger-border);
+
+@state-warning-text: var(--state-warning-text);
+@state-warning-bg: var(--state-warning-bg);
+@state-warning-border: var(--state-warning-border);
+
+@state-info-text: var(--state-info-text);
+@state-info-bg: var(--state-info-bg);
+@state-info-border: var(--state-info-border);
+
+@state-info-bg-5: var(--state-info-bg-5);
 
 @state-success-bg-5: var(--state-success-bg-5);
 @state-success-bg-10: var(--state-success-bg-10);
-
-@state-success-border: var(--state-success-bg-5);
 @state-success-text-10: var(--state-success-text-10);
 
-@state-danger-bg: var(--state-danger-bg);
-@state-danger-border: var(--state-danger-bg-10);
-@state-danger-text: var(--state-danger-text);
-
-@state-info-bg: var(--state-info-bg);
-@state-info-bg-5: var(--state-info-bg-5);
-
-@state-info-text: var(--state-info-text);
-@state-info-border: var(--state-info-bg-10);
-
-@state-warning-text: var(--state-warning-text);
-@state-warning-border: var(--state-warning-bg-10);
-@state-warning-bg: var(--state-warning-bg);
-
 @panel-primary-border: var(--panel-primary-border);
 
 @navbar-inverse-color: var(--navbar-inverse-color);