diff --git a/app/assets/images/alert/error.svg b/app/assets/images/alert/error.svg
new file mode 100644
index 00000000000..d915ff57620
--- /dev/null
+++ b/app/assets/images/alert/error.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#fc768c;}.cls-2{fill:#5b616a;}</style></defs><title>fail</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="12" cy="12" r="12"/><path class="cls-2" d="M12,4.6A7.4,7.4,0,1,0,19.4,12,7.41,7.41,0,0,0,12,4.6ZM16.4,12A4.36,4.36,0,0,1,16,13.86L10.14,8A4.36,4.36,0,0,1,12,7.6,4.41,4.41,0,0,1,16.4,12ZM7.6,12A4.36,4.36,0,0,1,8,10.14L13.86,16a4.36,4.36,0,0,1-1.86.43A4.41,4.41,0,0,1,7.6,12Z"/></g></g></svg>
\ No newline at end of file
diff --git a/app/assets/images/alert/success.svg b/app/assets/images/alert/success.svg
new file mode 100644
index 00000000000..624302517da
--- /dev/null
+++ b/app/assets/images/alert/success.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#68e380;}.cls-2{fill:#5b616a;}</style></defs><title>success-check</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="12" cy="12" r="12"/><path class="cls-2" d="M10.09,18.79A2,2,0,0,1,8.48,18L5.17,13.87A2.05,2.05,0,0,1,8.37,11.3l1.71,2.14,5.54-6.92a2.05,2.05,0,0,1,3.21,2.56L11.69,18A2,2,0,0,1,10.09,18.79Z"/></g></g></svg>
\ No newline at end of file
diff --git a/app/assets/images/alert/warning.svg b/app/assets/images/alert/warning.svg
new file mode 100644
index 00000000000..5cfce5593f7
--- /dev/null
+++ b/app/assets/images/alert/warning.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#f9ed83;}.cls-2{fill:#5b616a;}</style></defs><title>alert</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle class="cls-1" cx="12" cy="12" r="12"/><rect class="cls-2" x="9.89" y="3.22" width="4.21" height="11.76" rx="2.11" ry="2.11"/><rect class="cls-2" x="9.63" y="16.58" width="4.74" height="4.74" rx="2.37" ry="2.37"/></g></g></svg>
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/_alert.scss b/app/assets/stylesheets/components/_alert.scss
index 56845b09c93..1dba5d9e205 100644
--- a/app/assets/stylesheets/components/_alert.scss
+++ b/app/assets/stylesheets/components/_alert.scss
@@ -5,8 +5,7 @@ $ico-offset: -10px;
   background-color: $blue-light;
   border-radius: $space-1;
   color: #5b616a;
-  font-size: $sm-h6;
-  font-weight: $bold-font-weight;
+  font-size: 1rem;
   line-height: $line-height-2;
   margin-bottom: $space-4;
   padding: $space-2 1.5rem;
@@ -26,22 +25,22 @@ $ico-offset: -10px;
 
 .alert-notice,
 .alert-success {
-  background-color: #f0faed;
+  background-color: #ebfcef;
 
-  &::before { background-image: url(image-path('alert/ico-check.svg')); }
+  &::before { background-image: url(image-path('alert/success.svg')); }
 }
 
 .alert-error,
 .alert-alert {
-  background-color: #fff0f2;
+  background-color: #fff0f3;
 
-  &::before { background-image: url(image-path('alert/ico-exclamation.svg')); }
+  &::before { background-image: url(image-path('alert/error.svg')); }
 }
 
 .alert-warning {
-  background-color: #fff4db;
+  background-color: #fffccf;
 
-  &::before { background-image: url(image-path('alert/ico-warning.svg')); }
+  &::before { background-image: url(image-path('alert/warning.svg')); }
 }
 
 .alert-no-icon::before { content: none; }