diff --git a/app/common/styles/components/alert-banner.scss b/app/common/styles/components/alert-banner.scss
new file mode 100644
index 0000000..8df9486
--- /dev/null
+++ b/app/common/styles/components/alert-banner.scss
@@ -0,0 +1,30 @@
+.alert-banner {
+  padding: 1rem 1rem 0.75rem;
+  border-left-width: 3px;
+  border-left-style: solid;
+  display: flex;
+  .status-icon {
+    margin-right: 1rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 1.2rem;
+  }
+}
+
+.alert-banner--error {
+  background-color: $notification-error--light;
+  border-left-color: $notification-error--dark;
+}
+.alert-banner--success {
+  background-color: $notification-success--light;
+  border-left-color: $notification-success--dark;
+}
+.alert-banner--warn {
+  background-color: $notification-warn--light;
+  border-left-color: $notification-warn--dark;
+}
+.alert-banner--info {
+  background-color: $notification-info--light;
+  border-left-color: $notification-info--dark;
+}
\ No newline at end of file
diff --git a/app/common/styles/components/index.scss b/app/common/styles/components/index.scss
index fc36b38..3a4bdb7 100644
--- a/app/common/styles/components/index.scss
+++ b/app/common/styles/components/index.scss
@@ -1,2 +1,3 @@
 @import "./form-elements.scss";
-@import "./table.scss";
\ No newline at end of file
+@import "./table.scss";
+@import "./alert-banner.scss";
\ No newline at end of file